swarm-ui: add CheckboxField and use it for the issue report toggle and the account delete option

frontend/packages/swarm-ui/src/ui/checkbox-field/CheckboxField.css

@@ -0,0 +1,25 @@
+/* <CheckboxField> — box and label on one row. `min-height` is the same
+   touch-target floor `.ui-form-control` sets (FormField.css has the
+   reasoning), so a checkbox beside a text or select field is as tall as it and
+   its label is centred on the same line. The box takes the accent colour from
+   the shared theme instead of the browser's blue. */
+.ui-checkbox-field {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  min-height: 2.75em;
+  cursor: pointer;
+  color: var(--fg);
+}
+.ui-checkbox-field input {
+  accent-color: var(--purple);
+  width: 1.1em;
+  height: 1.1em;
+  margin: 0;
+  flex: none;
+  cursor: inherit;
+}
+.ui-checkbox-field:has(input:disabled) {
+  color: var(--muted);
+  cursor: not-allowed;
+}

frontend/packages/swarm-ui/src/ui/checkbox-field/CheckboxField.tsx

@@ -0,0 +1,33 @@
+// <CheckboxField> — a labelled checkbox, the on/off sibling of `TextField` and
+// `SelectField`. The label sits beside the box, not above it, and the whole
+// row is one click target at the kit's touch-target height, so a checkbox next
+// to a `SelectField` lines up with it and a bare browser checkbox no longer
+// sets the row's size.
+import "./CheckboxField.css";
+
+export function CheckboxField({
+  id,
+  label,
+  checked,
+  onChange,
+  disabled,
+}: {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label class="ui-checkbox-field" for={id}>
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onChange((e.target as HTMLInputElement).checked)}
+      />
+      <span>{label}</span>
+    </label>
+  );
+}