@arbor-education/design-system.components 0.15.0 → 0.16.1

package/dist/components/formField/fieldset/Fieldset.stories.js

@@ -1,51 +1,557 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fieldset } from './Fieldset';
-import { FormField } from '../FormField';
-import { CheckboxInput } from '../inputs/checkbox/CheckboxInput';
-import { RadioButtonInput } from '../inputs/radio/RadioButtonInput';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { CheckboxInput } from '../../formField/inputs/checkbox/CheckboxInput';
+import { Fieldset } from '../../formField/fieldset/Fieldset';
+import { RadioButtonInput } from '../../formField/inputs/radio/RadioButtonInput';
+import { FormField } from '../../formField/FormField';
+// ─────────────────────────────────────────────
+// Content strings
+// ─────────────────────────────────────────────
+const DESCRIPTION_INTRO = `
+The **Fieldset** component is the semantic wrapper for grouping related form controls in the Arbor
+design system. It renders a native HTML \`<fieldset>\` with an optional \`<legend>\`, giving a
+grouped set of inputs a shared label that assistive technology can announce before each control.
+
+Under the hood it resets all browser user-agent styles (border, margin, padding) and uses flexbox
+to stack children with consistent spacing via the design-system token
+\`--checkbox-or-radio-button-group-spacing-gap-vertical\`.
+
+Use **Fieldset** when the higher-level \`CheckboxGroup\` or \`RadioButtonGroup\` components do not
+cover your layout needs — for example, mixed control types, custom grid arrangements, or consent
+blocks that combine checkboxes with rich text.
+
+---
+
+### When to use
+
+| Scenario | Notes |
+|---|---|
+| Custom group of checkboxes | Primary use case — wrap \`CheckboxInput\` components |
+| Custom group of radio buttons | Enforces mutual exclusivity via shared \`name\` attribute |
+| Mixed control group | Combine different control types under one accessible label |
+| Section of a larger form | Groups FormField components under a shared named section |
+| Consent and permissions blocks | Parent consent forms with multiple independent options |
+
+---
+
+### When NOT to use
+
+| Scenario | Alternative |
+|---|---|
+| Single labelled input | Use \`FormField\` with \`label\` + \`labelFor\` |
+| Standard checkbox list | Consider \`CheckboxGroup\` if it covers the layout |
+| Standard radio button list | Consider \`RadioButtonGroup\` if it covers the layout |
+| Visual card grouping (non-form) | Use layout primitives — \`<fieldset>\` is for form controls only |
+| Unknown-length async option list | Compose dynamically, but always keep Fieldset + legend |
+
+---
+
+### Component API
+
+\`\`\`tsx
+import { Fieldset } from '@arbor-education/design-system.components';
+
+// With legend
+<Fieldset legend="Notification preferences">
+  <CheckboxInput id="email" name="notifications" label="Email" />
+  <CheckboxInput id="sms" name="notifications" label="SMS" />
+</Fieldset>
+
+// Without legend (requires aria-label or aria-labelledby for accessibility)
+<h2 id="prefs-heading">Notification preferences</h2>
+<Fieldset aria-labelledby="prefs-heading">
+  <CheckboxInput id="email" name="notifications" label="Email" />
+  <CheckboxInput id="sms" name="notifications" label="SMS" />
+</Fieldset>
+
+// Disable all children at once
+<Fieldset legend="Trip consent" disabled>
+  <CheckboxInput id="trip-1" name="consent" label="Year 7 Geography trip" />
+  <CheckboxInput id="trip-2" name="consent" label="Year 8 Science museum" />
+</Fieldset>
+\`\`\`
+`.trim();
+const USAGE_GUIDANCE = `
+### When to use
+
+Fieldset is the right choice when you need to group two or more related form controls and give that
+group an accessible label. The most common patterns in Arbor are:
+
+- **Consent blocks** — a set of independent checkboxes that each require explicit opt-in
+- **Preference groups** — a set of radio buttons where only one option is valid
+- **Form sections** — a logical sub-section of a larger form, named with a visible legend
+
+---
+
+### When NOT to use
+
+| Anti-pattern | Why it is wrong | What to do instead |
+|---|---|---|
+| Adding a visible border | The UA border is intentionally removed. Adding it back makes fieldset look like a card | Use a \`<div>\` with a border if you need a visual card |
+| Grouping non-form content | Fieldset is a form landmark — assistive technology announces it as such | Use \`<section>\` or \`<div>\` for non-form groupings |
+| Omitting legend with no ARIA fallback | Screen readers have no group label to announce | Always provide \`legend\`, \`aria-label\`, or \`aria-labelledby\` |
+| Nesting fieldsets deeply | Legal HTML but confusing for AT users | Flatten or split into separate form sections |
+
+---
+
+### The \`disabled\` prop — one prop to rule them all
+
+Setting \`disabled\` on the Fieldset element is the correct, semantic way to disable an entire group
+of controls. The browser propagates the disabled state to **all descendant form controls**
+automatically — no JavaScript, no CSS hacks, no prop-drilling needed.
+
+\`\`\`tsx
+// This ONE prop disables every checkbox/radio/input inside:
+<Fieldset legend="Trip consent" disabled>
+  <CheckboxInput id="trip-1" label="Year 7 Geography trip" />
+  <CheckboxInput id="trip-2" label="Year 8 Science museum" />
+  <CheckboxInput id="trip-3" label="Year 9 Drama workshop" />
+</Fieldset>
+\`\`\`
+
+Do **not** pass \`disabled\` to each child individually when you want to disable the whole group —
+that is more code, more error-prone, and is not semantically equivalent.
+
+---
+
+### Legend visibility
+
+The \`legend\` prop renders a \`<legend>\` element as the **first child** of the fieldset. This is
+enforced by the component. Do not try to move it via CSS positioning — the browser ignores
+\`position: absolute\` on \`<legend>\` in many layouts and the AT reading order depends on it being
+first in the DOM.
+`.trim();
+const DEVELOPER_NOTES = `
+### Critical usage patterns
+
+#### Always label your fieldset
+
+A fieldset without any group label fails WCAG 1.3.1 (Info and Relationships). Use one of:
+
+1. **\`legend\` prop** (preferred) — renders a visible \`<legend>\` element
+2. **\`aria-label\`** — invisible label string (use when design requires no visible heading)
+3. **\`aria-labelledby\`** — points to an existing heading element by \`id\`
+
+#### Radio button mutual exclusivity
+
+For radio buttons, share the same \`name\` attribute across all \`RadioButtonInput\` children.
+The \`<fieldset>\` provides the group semantics; the shared \`name\` enforces single-selection.
+
+\`\`\`tsx
+<Fieldset legend="Report access level">
+  <RadioButtonInput name="access" id="access-view" label="View only" value="view" />
+  <RadioButtonInput name="access" id="access-edit" label="View and edit" value="edit" />
+  <RadioButtonInput name="access" id="access-admin" label="Full admin" value="admin" />
+</Fieldset>
+\`\`\`
+
+#### Do not add extra wrapper divs around children
+
+The Fieldset already applies \`display: flex; flex-direction: column; gap: var(--checkbox-or-radio-button-group-spacing-gap-vertical)\`.
+Adding extra \`<div>\` wrappers around each child will break the spacing rhythm.
+
+---
+
+### Accessibility
+
+| Concern | How it is addressed |
+|---|---|
+| Group label | \`<legend>\` is the first child — screen readers announce it before each control in the group |
+| Disabled state | Native \`disabled\` on \`<fieldset>\` propagates to all descendants — no JS needed |
+| No visible legend | Use \`aria-label\` or \`aria-labelledby\` — never leave the group unlabelled |
+| Keyboard navigation | All standard browser keyboard behaviour is preserved — no custom handlers needed |
+| WCAG 1.3.1 | Grouping via fieldset+legend satisfies Info and Relationships at level A |
+
+---
+
+### TypeScript types
+
+\`\`\`ts
+import type { FieldsetProps } from '@arbor-education/design-system.components';
+\`\`\`
+
+| Prop | Type | Default | Description |
+|---|---|---|
+| \`legend\` | \`string\` | — | Renders a \`<legend>\` element as the first child. Omit only when using \`aria-label\` or \`aria-labelledby\` |
+| \`disabled\` | \`boolean\` | \`false\` | Disables all descendant form controls via native HTML propagation |
+| \`children\` | \`ReactNode\` | — | Form controls to group. Typically \`CheckboxInput\` or \`RadioButtonInput\` |
+| \`className\` | \`string\` | — | Additional CSS classes for the \`<fieldset>\` element |
+| \`aria-label\` | \`string\` | — | Invisible accessible label — use when there is no visible legend |
+| \`aria-labelledby\` | \`string\` | — | \`id\` of an existing heading element — alternative to \`legend\` |
+`.trim();
+const RELATED_COMPONENTS = `
+---
+
+### Related components
+
+| Component | Storybook link |
+|---|---|
+| FormField | [View FormField](?path=/docs/components-formfield-formfield--docs) |
+| CheckboxInput | [View CheckboxInput](?path=/docs/components-formfield-inputs-checkboxinput--docs) |
+| RadioButtonInput | [View RadioButtonInput](?path=/docs/components-formfield-inputs-radiobuttoninput--docs) |
+`.trim();
+const PROPS_INTRO = `
+Use the controls below to toggle \`legend\` and \`disabled\` and see how Fieldset responds in real
+time. The \`children\` prop cannot be set via the controls panel directly — the Default story
+renders \`CheckboxInput\` components as the primary use case.
+`.trim();
+// ─────────────────────────────────────────────
+// Custom docs page
+// ─────────────────────────────────────────────
+function FieldsetDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ─────────────────────────────────────────────
+// Meta
+// ─────────────────────────────────────────────
 const meta = {
     title: 'Components/FormField/Fieldset',
     component: Fieldset,
+    tags: ['autodocs'],
     parameters: {
         layout: 'padded',
+        docs: { page: FieldsetDocsPage },
     },
-    tags: ['autodocs'],
     argTypes: {
         legend: {
-            control: 'text',
-            description: 'The legend text for the fieldset',
+            description: 'Renders a `<legend>` element as the first child of the fieldset. Provides the accessible group label announced by screen readers before each control in the group. Omit only when using `aria-label` or `aria-labelledby`.',
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '—' },
+            },
         },
         disabled: {
-            control: 'boolean',
-            description: 'Disable all form controls within the fieldset',
+            description: 'Disables all descendant form controls via native HTML propagation. **One prop disables everything** — no need to pass `disabled` to each child individually.',
+            control: { type: 'boolean' },
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
         },
         children: {
+            description: 'Form controls to group. Typically `CheckboxInput` or `RadioButtonInput` components. Do not wrap children in extra `<div>` elements — the fieldset already applies flex + gap spacing.',
             control: false,
-            description: 'Form controls and other content to display within the fieldset',
+            table: {
+                type: { summary: 'ReactNode' },
+                defaultValue: { summary: '—' },
+            },
+        },
+        className: {
+            description: 'Additional CSS class(es) applied to the `<fieldset>` element. Use design-token values for any layout overrides.',
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '—' },
+            },
         },
     },
 };
 export default meta;
-// Default fieldset with simple content
+// ─────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────
+/** Wraps a story with a consistent description below the rendered example. */
+function withDescription(description, story) {
+    return {
+        ...story,
+        parameters: {
+            ...story.parameters,
+            docs: {
+                ...story.parameters?.docs,
+                description: { story: description },
+            },
+        },
+    };
+}
+// ─────────────────────────────────────────────
+// Stories
+// ─────────────────────────────────────────────
 export const Default = {
     args: {
-        legend: 'Personal Information',
-        children: (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(FormField, { id: "first-name", label: "First Name", inputProps: {
-                        placeholder: 'Enter your first name',
-                    } }), _jsx(FormField, { id: "last-name", label: "Last Name", inputProps: {
-                        placeholder: 'Enter your last name',
-                    } })] })),
+        legend: 'Consent and Permissions',
+        disabled: false,
     },
+    render: args => (_jsxs(Fieldset, { ...args, children: [_jsx(CheckboxInput, { id: "consent-trips", name: "consent", label: "Consent for school trips", onChange: () => { } }), _jsx(CheckboxInput, { id: "consent-photos", name: "consent", label: "Consent for photographs", onChange: () => { } }), _jsx(CheckboxInput, { id: "consent-data", name: "consent", label: "Consent for data sharing with partner schools", onChange: () => { } })] })),
 };
-// Disabled fieldset
-export const Disabled = {
-    args: {
-        legend: 'Disabled Fieldset',
-        disabled: true,
-        children: (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(FormField, { id: "disabled-input", label: "Disabled Input", inputProps: {
-                        placeholder: 'This input is disabled',
-                        disabled: true,
-                    } }), _jsx(CheckboxInput, { id: "disabled-checkbox", name: "disabled", value: "disabled", label: "Disabled checkbox", disabled: true }), _jsx(RadioButtonInput, { id: "disabled-radio", name: "disabled", value: "disabled", label: "Disabled radio", disabled: true })] })),
+export const WithRadioButtons = withDescription('Radio buttons inside a fieldset enforce single-selection. Share the same `name` attribute across all `RadioButtonInput` children — the fieldset provides the group semantics, the shared `name` enforces mutual exclusivity.', {
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                code: `
+import { Fieldset, RadioButtonInput } from '@arbor-education/design-system.components';
+
+export default function ReportAccessFieldset() {
+  return (
+    <Fieldset legend="Report access level">
+      <RadioButtonInput
+        id="access-view"
+        name="access"
+        value="view"
+        label="View only — can read reports but not download"
+      />
+      <RadioButtonInput
+        id="access-download"
+        name="access"
+        value="download"
+        label="View and download — can export to PDF"
+      />
+      <RadioButtonInput
+        id="access-admin"
+        name="access"
+        value="admin"
+        label="Full admin — can view, download, and share with parents"
+      />
+    </Fieldset>
+  );
+}
+`.trim(),
+            },
+        },
     },
-};
+    render: () => (_jsxs(Fieldset, { legend: "Report access level", children: [_jsx(RadioButtonInput, { id: "access-view", name: "access", value: "view", label: "View only \u2014 can read reports but not download" }), _jsx(RadioButtonInput, { id: "access-download", name: "access", value: "download", label: "View and download \u2014 can export to PDF" }), _jsx(RadioButtonInput, { id: "access-admin", name: "access", value: "admin", label: "Full admin \u2014 can view, download, and share with parents" })] })),
+});
+export const WithFormFields = withDescription('Fieldset can wrap `FormField` components to create a named section within a larger form. This is useful for logical groupings like an address block or emergency contact details where each field has its own label.', {
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                code: `
+import { Fieldset, FormField } from '@arbor-education/design-system.components';
+
+export default function DietaryRequirementsFieldset() {
+  return (
+    <Fieldset legend="Dietary requirements">
+      <FormField
+        id="diet-primary"
+        label="Primary dietary requirement"
+        inputProps={{ placeholder: 'e.g. Halal, Vegetarian, Vegan' }}
+      />
+      <FormField
+        id="diet-allergies"
+        label="Allergies and intolerances"
+        fieldDescription="List all known allergens — this information is shared with the school kitchen"
+        inputProps={{ placeholder: 'e.g. Peanuts, Gluten, Dairy' }}
+      />
+    </Fieldset>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(Fieldset, { legend: "Dietary requirements", children: [_jsx(FormField, { id: "diet-primary", label: "Primary dietary requirement", inputProps: { placeholder: 'e.g. Halal, Vegetarian, Vegan' } }), _jsx(FormField, { id: "diet-allergies", label: "Allergies and intolerances", fieldDescription: "List all known allergens \u2014 this information is shared with the school kitchen", inputProps: { placeholder: 'e.g. Peanuts, Gluten, Dairy' } })] })),
+});
+export const WithoutLegend = withDescription('The `legend` prop is optional. When omitted the fieldset still provides semantic grouping, but you **must** supply either `aria-label` or `aria-labelledby` to satisfy WCAG 1.3.1. This is useful when the group label already exists as a visible heading in the page.', {
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                code: `
+import { Fieldset, CheckboxInput } from '@arbor-education/design-system.components';
+
+export default function WithoutLegendFieldset() {
+  return (
+    // No legend prop — aria-labelledby points to the heading above
+    <div>
+      <h2 id="notif-heading">Notification preferences</h2>
+      <Fieldset aria-labelledby="notif-heading">
+        <CheckboxInput
+          id="notif-email"
+          name="notifications"
+          label="Email — weekly summary and urgent alerts"
+        />
+        <CheckboxInput
+          id="notif-sms"
+          name="notifications"
+          label="SMS — urgent alerts only"
+        />
+        <CheckboxInput
+          id="notif-app"
+          name="notifications"
+          label="In-app — all updates in the Arbor dashboard"
+        />
+      </Fieldset>
+    </div>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { children: [_jsx("h2", { id: "notif-heading", style: {
+                    fontFamily: 'var(--type-body-font-family)',
+                    fontWeight: 'var(--type-body-bold-weight)',
+                    color: 'var(--form-field-label-color-text)',
+                    marginBottom: 'var(--form-field-spacing-vertical)',
+                    marginTop: 0,
+                    fontSize: '1rem',
+                }, children: "Notification preferences" }), _jsxs(Fieldset, { "aria-labelledby": "notif-heading", children: [_jsx(CheckboxInput, { id: "notif-email", name: "notifications", label: "Email \u2014 weekly summary and urgent alerts", onChange: () => { } }), _jsx(CheckboxInput, { id: "notif-sms", name: "notifications", label: "SMS \u2014 urgent alerts only", onChange: () => { } }), _jsx(CheckboxInput, { id: "notif-app", name: "notifications", label: "In-app \u2014 all updates in the Arbor dashboard", onChange: () => { } })] })] })),
+});
+export const WithAriaLabel = withDescription('Use `aria-label` when no visible heading exists to reference via `aria-labelledby` and design requirements prevent showing a `<legend>`. The label is invisible to sighted users but fully accessible to screen readers.', {
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                code: `
+import { Fieldset, CheckboxInput } from '@arbor-education/design-system.components';
+
+export default function AriaLabelFieldset() {
+  return (
+    <Fieldset aria-label="Trip consent options">
+      <CheckboxInput
+        id="trip-geography"
+        name="trip-consent"
+        label="Year 7 Geography field trip — 14 March"
+      />
+      <CheckboxInput
+        id="trip-science"
+        name="trip-consent"
+        label="Year 7 Science museum visit — 28 March"
+      />
+      <CheckboxInput
+        id="trip-drama"
+        name="trip-consent"
+        label="Year 7 Drama workshop — 4 April"
+      />
+    </Fieldset>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(Fieldset, { "aria-label": "Trip consent options", children: [_jsx(CheckboxInput, { id: "trip-geography", name: "trip-consent", label: "Year 7 Geography field trip \u2014 14 March", onChange: () => { } }), _jsx(CheckboxInput, { id: "trip-science", name: "trip-consent", label: "Year 7 Science museum visit \u2014 28 March", onChange: () => { } }), _jsx(CheckboxInput, { id: "trip-drama", name: "trip-consent", label: "Year 7 Drama workshop \u2014 4 April", onChange: () => { } })] })),
+});
+export const Disabled = withDescription('Setting `disabled` on the Fieldset is the correct semantic approach to disabling an entire group. The browser propagates the disabled state to **all descendant form controls** automatically — no need to pass `disabled` to each child individually.', {
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                code: `
+import { Fieldset, RadioButtonInput } from '@arbor-education/design-system.components';
+
+export default function DisabledFieldset() {
+  return (
+    // ONE disabled prop disables all three radio buttons:
+    <Fieldset legend="Notification preferences" disabled>
+      <RadioButtonInput
+        id="notif-all"
+        name="notif-freq"
+        value="all"
+        label="All notifications"
+      />
+      <RadioButtonInput
+        id="notif-urgent"
+        name="notif-freq"
+        value="urgent"
+        label="Urgent alerts only"
+      />
+      <RadioButtonInput
+        id="notif-none"
+        name="notif-freq"
+        value="none"
+        label="No notifications"
+      />
+    </Fieldset>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(Fieldset, { legend: "Notification preferences", disabled: true, children: [_jsx(RadioButtonInput, { id: "notif-all", name: "notif-freq", value: "all", label: "All notifications" }), _jsx(RadioButtonInput, { id: "notif-urgent", name: "notif-freq", value: "urgent", label: "Urgent alerts only" }), _jsx(RadioButtonInput, { id: "notif-none", name: "notif-freq", value: "none", label: "No notifications" })] })),
+});
+export const DisabledWithCheckboxes = withDescription('The most visually compelling demonstration of the `disabled` prop — all checkboxes are greyed out and non-interactive with a single `disabled` on the fieldset. This is how Arbor locks consent forms during a pending approval workflow.', {
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                code: `
+import { Fieldset, CheckboxInput } from '@arbor-education/design-system.components';
+
+export default function DisabledCheckboxesFieldset() {
+  return (
+    <Fieldset legend="Consent and permissions" disabled>
+      <CheckboxInput
+        id="consent-trips-dis"
+        name="consent"
+        label="Consent for school trips"
+        checked
+        onChange={() => {}}
+      />
+      <CheckboxInput
+        id="consent-photos-dis"
+        name="consent"
+        label="Consent for photographs"
+        checked
+        onChange={() => {}}
+      />
+      <CheckboxInput
+        id="consent-data-dis"
+        name="consent"
+        label="Consent for data sharing with partner schools"
+        onChange={() => {}}
+      />
+      <CheckboxInput
+        id="consent-medical-dis"
+        name="consent"
+        label="Consent to share medical information with trip supervisors"
+        onChange={() => {}}
+      />
+    </Fieldset>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(Fieldset, { legend: "Consent and permissions", disabled: true, children: [_jsx(CheckboxInput, { id: "consent-trips-dis", name: "consent", label: "Consent for school trips", checked: true, onChange: () => { } }), _jsx(CheckboxInput, { id: "consent-photos-dis", name: "consent", label: "Consent for photographs", checked: true, onChange: () => { } }), _jsx(CheckboxInput, { id: "consent-data-dis", name: "consent", label: "Consent for data sharing with partner schools", onChange: () => { } }), _jsx(CheckboxInput, { id: "consent-medical-dis", name: "consent", label: "Consent to share medical information with trip supervisors", onChange: () => { } })] })),
+});
+export const DisabledWithRadioButtons = withDescription('Radio buttons inside a disabled fieldset are also non-interactive. Use this pattern when the selection has been locked — for example, after a parent has submitted a form that is now awaiting school staff approval.', {
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                code: `
+import { Fieldset, RadioButtonInput } from '@arbor-education/design-system.components';
+
+export default function DisabledRadioFieldset() {
+  return (
+    <Fieldset legend="Dietary requirements" disabled>
+      <RadioButtonInput
+        id="diet-halal-dis"
+        name="diet"
+        value="halal"
+        label="Halal"
+        defaultChecked
+      />
+      <RadioButtonInput
+        id="diet-vegetarian-dis"
+        name="diet"
+        value="vegetarian"
+        label="Vegetarian"
+      />
+      <RadioButtonInput
+        id="diet-vegan-dis"
+        name="diet"
+        value="vegan"
+        label="Vegan"
+      />
+      <RadioButtonInput
+        id="diet-none-dis"
+        name="diet"
+        value="none"
+        label="No specific requirement"
+      />
+    </Fieldset>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(Fieldset, { legend: "Dietary requirements", disabled: true, children: [_jsx(RadioButtonInput, { id: "diet-halal-dis", name: "diet", value: "halal", label: "Halal", defaultChecked: true }), _jsx(RadioButtonInput, { id: "diet-vegetarian-dis", name: "diet", value: "vegetarian", label: "Vegetarian" }), _jsx(RadioButtonInput, { id: "diet-vegan-dis", name: "diet", value: "vegan", label: "Vegan" }), _jsx(RadioButtonInput, { id: "diet-none-dis", name: "diet", value: "none", label: "No specific requirement" })] })),
+});
 //# sourceMappingURL=Fieldset.stories.js.map

package/dist/components/formField/fieldset/Fieldset.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.stories.js","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kCAAkC;SAChD;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+CAA+C;SAC7D;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,gEAAgE;SAC9E;KACF;CAC8B,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,uCAAuC;AACvC,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,sBAAsB;QAC9B,QAAQ,EAAE,CACR,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACnE,KAAC,SAAS,IACR,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE;wBACV,WAAW,EAAE,uBAAuB;qBACrC,GACD,EACF,KAAC,SAAS,IACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,WAAW,EACjB,UAAU,EAAE;wBACV,WAAW,EAAE,sBAAsB;qBACpC,GACD,IACE,CACP;KACF;CACF,CAAC;AACF,oBAAoB;AACpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,MAAM,EAAE,mBAAmB;QAC3B,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,CACR,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACnE,KAAC,SAAS,IACR,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,gBAAgB,EACtB,UAAU,EAAE;wBACV,WAAW,EAAE,wBAAwB;wBACrC,QAAQ,EAAE,IAAI;qBACf,GACD,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,mBAAmB,EACtB,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,GACd,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,IAAI,GACd,IACE,CACP;KACF;CACF,CAAC"}
+{"version":3,"file":"Fieldset.stories.js","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,GACN,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,oDAAoD,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,gDAAgD;AAChD,kBAAkB;AAClB,gDAAgD;AAEhD,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DzB,CAAC,IAAI,EAAE,CAAC;AAET,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDtB,CAAC,IAAI,EAAE,CAAC;AAET,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDvB,CAAC,IAAI,EAAE,CAAC;AAET,MAAM,kBAAkB,GAAG;;;;;;;;;;CAU1B,CAAC,IAAI,EAAE,CAAC;AAET,MAAM,WAAW,GAAG;;;;CAInB,CAAC,IAAI,EAAE,CAAC;AAET,gDAAgD;AAChD,mBAAmB;AACnB,gDAAgD;AAEhD,SAAS,gBAAgB;IACvB,OAAO,CACL,8BACE,KAAC,KAAK,KAAG,EACT,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,cAAE,iBAAiB,GAAY,EACxC,KAAC,UAAU,sCAAiC,EAC5C,KAAC,QAAQ,cAAE,WAAW,GAAY,EAClC,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,KAAG,EACZ,KAAC,UAAU,iCAA4B,EACvC,KAAC,QAAQ,cAAE,cAAc,GAAY,EACrC,KAAC,UAAU,kCAA6B,EACxC,KAAC,QAAQ,cAAE,eAAe,GAAY,EACtC,KAAC,UAAU,2BAAsB,EACjC,KAAC,OAAO,IAAC,KAAK,EAAC,EAAE,GAAG,EACpB,KAAC,QAAQ,cAAE,kBAAkB,GAAY,IACxC,CACJ,CAAC;AACJ,CAAC;AAED,gDAAgD;AAChD,OAAO;AACP,gDAAgD;AAEhD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;KACjC;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,WAAW,EACT,4NAA4N;YAC9N,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;aAC/B;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EACT,8JAA8J;YAChK,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EACT,uLAAuL;YACzL,OAAO,EAAE,KAAK;YACd,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;gBAC9B,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;aAC/B;SACF;QACD,SAAS,EAAE;YACT,WAAW,EACT,iHAAiH;YACnH,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;aAC/B;SACF;KACF;CAC8B,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,gDAAgD;AAChD,UAAU;AACV,gDAAgD;AAEhD,8EAA8E;AAC9E,SAAS,eAAe,CAAC,WAAmB,EAAE,KAAY;IACxD,OAAO;QACL,GAAG,KAAK;QACR,UAAU,EAAE;YACV,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE;gBACJ,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI;gBACzB,WAAW,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE;aACpC;SACF;KACF,CAAC;AACJ,CAAC;AAED,gDAAgD;AAChD,UAAU;AACV,gDAAgD;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,yBAAyB;QACjC,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,QAAQ,OAAK,IAAI,aAChB,KAAC,aAAa,IAAC,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,EACxG,KAAC,aAAa,IAAC,EAAE,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,yBAAyB,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,EACxG,KAAC,aAAa,IAAC,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,+CAA+C,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,IACnH,CACZ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU,eAAe,CACpD,8NAA8N,EAC9N;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,QAAQ,IAAC,MAAM,EAAC,qBAAqB,aACpC,KAAC,gBAAgB,IACf,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,oDAA+C,GACrD,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,iBAAiB,EACpB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,4CAAuC,GAC7C,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,8DAAyD,GAC/D,IACO,CACZ;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU,eAAe,CAClD,sNAAsN,EACtN;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;CAoBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,QAAQ,IAAC,MAAM,EAAC,sBAAsB,aACrC,KAAC,SAAS,IACR,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,6BAA6B,EACnC,UAAU,EAAE,EAAE,WAAW,EAAE,+BAA+B,EAAE,GAC5D,EACF,KAAC,SAAS,IACR,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,4BAA4B,EAClC,gBAAgB,EAAC,oFAA+E,EAChG,UAAU,EAAE,EAAE,WAAW,EAAE,6BAA6B,EAAE,GAC1D,IACO,CACZ;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,eAAe,CACjD,yQAAyQ,EACzQ;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Bf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,0BACE,aACE,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,8BAA8B;oBAC1C,UAAU,EAAE,8BAAmE;oBAC/E,KAAK,EAAE,oCAAoC;oBAC3C,YAAY,EAAE,oCAAoC;oBAClD,SAAS,EAAE,CAAC;oBACZ,QAAQ,EAAE,MAAM;iBACjB,yCAGE,EACL,MAAC,QAAQ,uBAAiB,eAAe,aACvC,KAAC,aAAa,IACZ,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,+CAA0C,EAChD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,WAAW,EACd,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,+BAA0B,EAChC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,WAAW,EACd,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,kDAA6C,EACnD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,IACO,IACP,CACP;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,eAAe,CACjD,0NAA0N,EAC1N;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;CAwBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,QAAQ,kBAAY,sBAAsB,aACzC,KAAC,aAAa,IACZ,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,6CAAwC,EAC9C,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,6CAAwC,EAC9C,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,sCAAiC,EACvC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,IACO,CACZ;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU,eAAe,CAC5C,wPAAwP,EACxP;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Bf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,QAAQ,IAAC,MAAM,EAAC,0BAA0B,EAAC,QAAQ,mBAClD,KAAC,gBAAgB,IACf,EAAE,EAAC,WAAW,EACd,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,mBAAmB,GACzB,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,oBAAoB,GAC1B,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,kBAAkB,GACxB,IACO,CACZ;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU,eAAe,CAC1D,2OAA2O,EAC3O;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,QAAQ,IAAC,MAAM,EAAC,yBAAyB,EAAC,QAAQ,mBACjD,KAAC,aAAa,IACZ,EAAE,EAAC,mBAAmB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,0BAA0B,EAChC,OAAO,QACP,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,yBAAyB,EAC/B,OAAO,QACP,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,kBAAkB,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,qBAAqB,EACxB,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,4DAA4D,EAClE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,IACO,CACZ;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAU,eAAe,CAC5D,uNAAuN,EACvN;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,MAAC,QAAQ,IAAC,MAAM,EAAC,sBAAsB,EAAC,QAAQ,mBAC9C,KAAC,gBAAgB,IACf,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,OAAO,EACb,cAAc,SACd,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,qBAAqB,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,YAAY,GAClB,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,OAAO,GACb,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,eAAe,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,yBAAyB,GAC/B,IACO,CACZ;CACF,CACF,CAAC"}

package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts

@@ -1,7 +1,9 @@
 import { type FieldsetProps } from '../../../formField/fieldset/Fieldset';
 import { type CheckboxInputProps } from './CheckboxInput';
 export type CheckboxGroupProps = {
-    options: CheckboxInputProps[];
+    options: (CheckboxInputProps & {
+        id: string;
+    })[];
 } & FieldsetProps;
 export declare const CheckboxGroup: (props: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
 export declare namespace CheckboxGroup {

package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,GAAG,aAAa,CAAC;AAElB,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAStD,CAAC;AAEF,yBAAiB,aAAa,CAAC;IAC7B,KAAY,KAAK,GAAG,kBAAkB,CAAC;CACxC"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,CAAC,kBAAkB,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;CAClD,GAAG,aAAa,CAAC;AAElB,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAStD,CAAC;AAEF,yBAAiB,aAAa,CAAC;IAC7B,KAAY,KAAK,GAAG,kBAAkB,CAAC;CACxC"}

package/dist/components/formField/inputs/checkbox/CheckboxInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { useRef, useEffect } from 'react';
-import { Icon } from '../../../..';
+import { Icon } from '../../../icon/Icon';
 export const CheckboxInput = (props) => {
     const { className, onChange, disabled, checked = false, indeterminate = false, label, ...rest } = props;
     const inputRef = useRef(null);

package/dist/components/formField/inputs/checkbox/CheckboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAOnC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,gBAAgB,GAAG,UAAU,CACjC,8BAA8B,EAC9B,SAAS,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAEnD,IAAI,SAAS,GAAG,0DAA0D,CAAC;IAC3E,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,aAAa,EAAE,CAAC;YAClB,SAAS;kBACL,iEAAiE,CAAC;QACxE,CAAC;aACI,CAAC;YACJ,SAAS,GAAG,2DAA2D,CAAC;QAC1E,CAAC;IACH,CAAC;SACI,IAAI,aAAa,EAAE,CAAC;QACvB,SAAS;cACL,gEAAgE,CAAC;IACvE,CAAC;IAED,OAAO,CACL,iBAAO,SAAS,EAAE,gBAAgB,aAChC,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,kBACJ,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,KAC3C,IAAI,GACR,EACF,eACE,SAAS,EAAC,4BAA4B,iBAC1B,MAAM,iBACN,uBAAuB,YAElC,CAAC,OAAO,IAAI,aAAa,CAAC,IAAI,CAC7B,KAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,yBAAyB,GACnC,CACH,GACI,EACN,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAQ,CACzD,IACK,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CheckboxInput.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAO5C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,gBAAgB,GAAG,UAAU,CACjC,8BAA8B,EAC9B,SAAS,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAEnD,IAAI,SAAS,GAAG,0DAA0D,CAAC;IAC3E,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,aAAa,EAAE,CAAC;YAClB,SAAS;kBACL,iEAAiE,CAAC;QACxE,CAAC;aACI,CAAC;YACJ,SAAS,GAAG,2DAA2D,CAAC;QAC1E,CAAC;IACH,CAAC;SACI,IAAI,aAAa,EAAE,CAAC;QACvB,SAAS;cACL,gEAAgE,CAAC;IACvE,CAAC;IAED,OAAO,CACL,iBAAO,SAAS,EAAE,gBAAgB,aAChC,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,kBACJ,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,KAC3C,IAAI,GACR,EACF,eACE,SAAS,EAAC,4BAA4B,iBAC1B,MAAM,iBACN,uBAAuB,YAElC,CAAC,OAAO,IAAI,aAAa,CAAC,IAAI,CAC7B,KAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,yBAAyB,GACnC,CACH,GACI,EACN,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAQ,CACzD,IACK,CACT,CAAC;AACJ,CAAC,CAAC"}