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

frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx

@@ -27,6 +27,7 @@ import {
   SelectField,
   type SelectOption,
 } from "../ui/select-field/SelectField.js";
+import { CheckboxField } from "../ui/checkbox-field/CheckboxField.js";
 import { Button, type ButtonVariant } from "../ui/button/Button.js";
 import { Dialog } from "../ui/dialog/Dialog.js";
 import { ConfirmDialog } from "../ui/confirm-dialog/ConfirmDialog.js";
@@ -156,6 +157,18 @@ function SelectFieldSample() {
   );
 }
 
+function CheckboxFieldSample() {
+  const [checked, setChecked] = useState(true);
+  return (
+    <CheckboxField
+      id="sample-checkbox-field"
+      label="hide blocked (open dependency)"
+      checked={checked}
+      onChange={setChecked}
+    />
+  );
+}
+
 function RefreshIntervalPickerSample() {
   const [value, setValue] = useState<RefreshIntervalMs>(30_000);
   return (
@@ -517,6 +530,21 @@ export function ComponentsPage() {
         </Sample>
       </Section>
 
+      <Section title="CheckboxField">
+        <Sample label="editable">
+          <CheckboxFieldSample />
+        </Sample>
+        <Sample label="disabled">
+          <CheckboxField
+            id="sample-checkbox-field-disabled"
+            label="also log the token out"
+            checked={false}
+            onChange={() => {}}
+            disabled
+          />
+        </Sample>
+      </Section>
+
       <Section title="Button">
         <div class="components-chip-row">
           {BUTTON_VARIANTS.map((variant) => (