@arbor-education/design-system.components 0.13.0 → 0.14.0

package/dist/components/formField/inputs/text/TextInput.stories.js

@@ -1,37 +1,576 @@
+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 { useRef, useState } from 'react';
 import { fn } from 'storybook/test';
+import { FormField } from '../../FormField';
 import { TextInput } from './TextInput';
+// ---------------------------------------------------------------------------
+// Component description — built as joined arrays to avoid no-useless-escape
+// on backtick code spans inside template literals.
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    'The **TextInput** is the single-line text entry control in the Arbor design system.',
+    'It wraps a native `<input>` element with `forwardRef` support, two size variants,',
+    'an error state, and full pass-through of HTML input attributes.',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- Free-form single-line text: student names, year group labels, search queries, notes',
+    '- Any field where the valid input is a short string the user types directly',
+    '- As the underlying input inside a `FormField` with `inputType="text"` (the recommended pattern in real forms)',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Instead of TextInput... | Use... | Why |',
+    '|---|---|---|',
+    '| Multi-line text | [`TextArea`](?path=/docs/components-formfield-inputs-textarea--docs) | Expands vertically; better UX for long content |',
+    '| Numeric values | [`NumberInput`](?path=/docs/components-formfield-inputs-numeric--docs) | Precision handling, stepper UI, better browser chrome |',
+    '| Time values | [`TimeInput`](?path=/docs/components-formfield-inputs-timeinput--docs) | Granularity controls, clock UI, better validation |',
+    '| Date selection | `DatePicker` | Calendar UI; avoids inconsistent native date picker chrome |',
+    '| Search / filter | [`SearchBar`](?path=/docs/components-searchbar--docs) | Search semantics, clear button, correct ARIA role |',
+    '| Selecting from a list | `SelectDropdown` or `Combobox` | Constrained selection; better keyboard and screen reader UX |',
+    '| Inline editable text | [`EditableText`](?path=/docs/components-editabletext--docs) | Uses TextInput internally; adds toggle-to-edit affordance |',
+    '',
+    '---',
+    '',
+    '### Design guidance',
+    '',
+    '- **Width is always 100%** — the input always fills its container. Control width by sizing the wrapper, not the input.',
+    '- **Stack sizes vertically** when comparing M and S — the 0.25rem height difference is subtle and easier to perceive when stacked.',
+    '- **Use FormField in real forms** — `FormField` automatically wires `hasError`, `aria-invalid`, and `aria-describedby`.',
+    '  On a bare `TextInput`, you are responsible for those attributes yourself.',
+    '- **hasError + disabled is an anti-pattern** — a user cannot correct an error on a field they cannot edit.',
+    '  Never show this combination.',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Critical gotchas',
+    '',
+    '#### 1. `aria-invalid` is NOT automatic on bare TextInput',
+    '`hasError={true}` only adds the visual red border class (`ds-input--error`).',
+    'It carries no ARIA semantics. When using TextInput outside FormField,',
+    'you must also pass `aria-invalid="true"` so assistive technologies announce the error state.',
+    'FormField handles this automatically when `errorText` is present.',
+    '',
+    '```tsx',
+    '// BAD — visually red, but screen reader does not know there is an error',
+    '<TextInput hasError />',
+    '',
+    '// GOOD — both the visual class and the ARIA attribute are set',
+    '<TextInput hasError aria-invalid="true" aria-describedby="my-field-error" />',
+    '<span id="my-field-error">Enter a valid email address</span>',
+    '```',
+    '',
+    '#### 2. `id` is required for label association',
+    'Without an `id`, a `<label>` element cannot use `htmlFor` to associate with the input.',
+    'Outside FormField, wiring `id` and `htmlFor` is your responsibility.',
+    '`FormField` passes `id` through automatically.',
+    '',
+    '#### 3. `type="number"` and `type="time"` — use purpose-built inputs instead',
+    'TextInput passes `type` through to the native `<input>`, but `NumberInput` and `TimeInput`',
+    'provide better experiences: precision handling, stepper UI, granularity controls.',
+    'Only use `type="number"` on bare TextInput as a last resort.',
+    '',
+    '#### 4. Width is always 100%',
+    'The component always fills its container. Size the wrapper, not the input.',
+    'Never set a `width` or `max-width` directly on the TextInput element.',
+    '',
+    '#### 5. `hasError + disabled` is an anti-pattern',
+    'Visually ambiguous and semantically incorrect — a user cannot correct an error on a field',
+    'they cannot edit. Do not combine these two props.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- **Label association** — always wire `id` on the input and `htmlFor` on the label.',
+    '  `FormField` does this automatically; bare TextInput consumers must do it manually.',
+    '- **Error state** — pair `hasError={true}` with `aria-invalid="true"` and',
+    '  `aria-describedby` pointing to the error message element.',
+    '  `FormField` handles all of this automatically when `errorText` is present.',
+    '- **Description text** — use `aria-describedby` pointing to any helper text element.',
+    '  `FormField` wires this via `${id}-description` automatically.',
+    '- **disabled vs readOnly** — `disabled` removes the field from tab order entirely.',
+    '  Use `readOnly` instead when the value must remain accessible and copyable,',
+    '  or when a screen reader user needs to reach the field. readOnly fields ARE submitted',
+    '  in forms; disabled fields are NOT.',
+    '- **Focus ring** — 3px outline using `--focus-border` and `--color-brand-500`.',
+    '  Do not suppress focus rings — they are the primary keyboard navigation cue.',
+    '- **Placeholder is not a label** — never use placeholder as the only visible label.',
+    '  It disappears on input and has poor colour contrast by default.',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { TextInput } from '@arbor-education/design-system.components';",
+    '',
+    'function MyField(props: TextInput.Props) { ... }',
+    '```',
+    '',
+    '| Type | Description |',
+    '|---|---|',
+    '| `TextInput.Props` | Full props interface — `size`, `hasError`, plus all `InputHTMLAttributes<HTMLInputElement>` (minus the HTML `size` attribute) |',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[FormField](?path=/docs/components-formfield--docs)',
+    '· [TextArea](?path=/docs/components-formfield-inputs-textarea--docs)',
+    '· [NumberInput](?path=/docs/components-formfield-inputs-numeric--docs)',
+    '· [TimeInput](?path=/docs/components-formfield-inputs-timeinput--docs)',
+    '· [SearchBar](?path=/docs/components-searchbar--docs)',
+    '· [EditableText](?path=/docs/components-editabletext--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+function TextInputDocsPage() {
+    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/Inputs/TextInput',
     component: TextInput,
     parameters: {
         layout: 'centered',
+        docs: {
+            page: TextInputDocsPage,
+        },
     },
     tags: ['autodocs'],
     args: {
         onChange: fn(),
+        onBlur: fn(),
     },
     argTypes: {
-        size: {
+        'size': {
             control: 'select',
             options: ['M', 'S'],
-            description: 'Input size',
+            description: [
+                'Controls the height of the input via the `ds-input--M` / `ds-input--S` modifier class.',
+                '`M` resolves to `--form-field-text-medium-height` (2.25rem / 36px) — the default for most form contexts.',
+                '`S` resolves to `--form-field-text-small-height` (2rem / 32px) — use in dense toolbars or compact table filters.',
+                'Note: the HTML `size` attribute is intentionally omitted from this component.',
+                'Width is always 100% of the parent container regardless of this prop.',
+            ].join(' '),
+            table: {
+                type: { summary: "'M' | 'S'" },
+                defaultValue: { summary: "'M'" },
+            },
+        },
+        'hasError': {
+            control: 'boolean',
+            description: [
+                'Applies the `ds-input--error` class, which sets a red border.',
+                'When using TextInput inside `FormField`, this prop is set automatically when `errorText` is present',
+                '— do NOT pass it manually in `inputProps`.',
+                'When using bare TextInput, also pass `aria-invalid="true"` — `hasError` is purely visual',
+                'and carries no ARIA semantics on its own.',
+            ].join(' '),
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        'disabled': {
+            control: 'boolean',
+            description: [
+                'Native HTML disabled attribute. Removes the field from tab order entirely.',
+                'Prevents all interaction and excludes the value from form submission.',
+                'Use `readOnly` instead when the value must remain accessible, copyable, or submitted.',
+            ].join(' '),
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
         },
-        disabled: {
+        'placeholder': {
+            control: 'text',
+            description: [
+                'Hint text displayed when the field is empty.',
+                'Never use placeholder as the only visible label — it disappears on input',
+                'and has poor colour contrast by default. Always pair with a visible `<label>` or `aria-label`.',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'type': {
+            control: 'text',
+            description: [
+                'HTML input type attribute, passed through to the native `<input>` element.',
+                'Valid values for single-line text scenarios: `"text"` (default), `"email"`, `"password"`,',
+                '`"tel"`, `"url"`, `"search"`.',
+                'Avoid `"number"` and `"time"` — use `NumberInput` and `TimeInput` instead for better UX.',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'text'" },
+            },
+        },
+        'readOnly': {
             control: 'boolean',
-            description: 'Disable the input',
+            description: [
+                'Makes the field focusable and selectable but not editable.',
+                'The value IS included in form submission (unlike `disabled`).',
+                'The field remains in tab order — use this instead of `disabled` when the value',
+                'must be accessible, readable, or copyable by the user.',
+            ].join(' '),
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        'value': {
+            control: 'text',
+            description: [
+                'Controlled value — pair with `onChange` to manage state externally.',
+                'When using controlled mode, you must handle `onChange` otherwise the input will appear frozen.',
+                'For uncontrolled usage, use `defaultValue` instead.',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'onChange': {
+            description: [
+                'Change event handler. Fires on every keystroke.',
+                'Required when using controlled `value` — otherwise the input will not update.',
+            ].join(' '),
+            table: {
+                type: { summary: 'ChangeEventHandler<HTMLInputElement>' },
+            },
+        },
+        'onBlur': {
+            description: [
+                'Blur event handler. Fires when the field loses focus.',
+                'The canonical trigger for field-level validation — check the value here and set error state if invalid.',
+            ].join(' '),
+            table: {
+                type: { summary: 'FocusEventHandler<HTMLInputElement>' },
+            },
+        },
+        'maxLength': {
+            control: 'number',
+            description: [
+                'Maximum number of characters allowed, enforced natively by the browser.',
+                'Useful for fields with a hard character limit — student reference numbers, short codes.',
+                'Consider pairing with a visible character count for longer limits.',
+            ].join(' '),
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        'id': {
+            control: 'text',
+            description: [
+                'HTML `id` attribute — required for label association via `htmlFor` when used outside `FormField`.',
+                '`FormField` passes `id` through automatically. On a bare TextInput, always set this',
+                'when a visible label is present so screen readers can associate the label with the field.',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+            },
         },
-        placeholder: {
+        'aria-label': {
             control: 'text',
-            description: 'Input placeholder text',
+            description: [
+                'Accessible label for contexts where a visible label is not possible',
+                '(e.g. an inline filter input in a data grid header).',
+                'If a visible label exists, prefer `id` + `htmlFor` association instead.',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+            },
         },
     },
 };
 export default meta;
-// Default input
-export const Default = {
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
+    },
+});
+// ---------------------------------------------------------------------------
+// Stateful template components
+// Named components avoid hooks-in-callbacks lint issues (react-hooks plugin
+// is NOT configured in this project — do not add eslint-disable comments).
+// ---------------------------------------------------------------------------
+const ControlledWithValidationTemplate = () => {
+    const [value, setValue] = useState('');
+    const [hasError, setHasError] = useState(false);
+    const handleBlur = () => {
+        setHasError(value.length > 0 && !value.includes('@'));
+    };
+    return (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "parent-email-controlled", className: "ds-text", children: "Parent email address" }), _jsx(TextInput, { id: "parent-email-controlled", type: "email", placeholder: "jane.doe@example.com", value: value, hasError: hasError, "aria-invalid": hasError, "aria-describedby": hasError ? 'parent-email-error' : undefined, onChange: (e) => {
+                    setValue(e.target.value);
+                    if (hasError && e.target.value.includes('@')) {
+                        setHasError(false);
+                    }
+                }, onBlur: handleBlur }), hasError && (_jsx("span", { id: "parent-email-error", className: "ds-text", style: { color: 'var(--color-semantic-destructive-600)' }, children: "Enter a valid email address" })), !hasError && value.includes('@') && (_jsx("span", { className: "ds-text", style: { color: 'var(--color-semantic-success-600)' }, children: "Email looks valid" }))] }));
+};
+const WithForwardRefTemplate = () => {
+    const inputRef = useRef(null);
+    return (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Click the button below to programmatically focus the text input." }), _jsx(TextInput, { ref: inputRef, id: "student-name-ref", placeholder: "Enter student full name", "aria-label": "Student full name" }), _jsx("button", { type: "button", className: "ds-button ds-button--secondary ds-button--M", onClick: () => inputRef.current?.focus(), children: "Focus input" })] }));
+};
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
     args: {
-        placeholder: 'Enter text...',
         size: 'M',
+        placeholder: 'Enter student full name',
+        disabled: false,
+        hasError: false,
     },
-};
+    render: args => (_jsx("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)' }, children: _jsx(TextInput, { ...args }) })),
+}, 'The interactive canvas story — every prop is wired to the **Controls** panel. Use the controls to explore sizes, error state, disabled, placeholder, and other HTML input attributes.');
+export const Sizes = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { TextInput } from '@arbor-education/design-system.components';
+
+function SizesExample() {
+  return (
+    <div style={{ maxWidth: '28rem', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="size-m">Medium (M) — 2.25rem</label>
+        <TextInput id="size-m" size="M" placeholder="Year group label or student name" />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="size-s">Small (S) — 2rem</label>
+        <TextInput id="size-s" size="S" placeholder="Year group label or student name" />
+      </div>
+    </div>
+  );
+}
+export default SizesExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "size-m", className: "ds-text", children: "Medium (M) \u2014 2.25rem via --form-field-text-medium-height" }), _jsx(TextInput, { id: "size-m", size: "M", placeholder: "Year group label or student name" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "size-s", className: "ds-text", children: "Small (S) \u2014 2rem via --form-field-text-small-height" }), _jsx(TextInput, { id: "size-s", size: "S", placeholder: "Year group label or student name" })] })] })),
+}, 'Both sizes stacked for comparison. `M` is the default for standard form layouts. `S` is for dense toolbars or compact table filters where the medium height would feel too tall. Heights are entirely token-driven — never hardcode a height on a TextInput wrapper.');
+export const States = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { TextInput } from '@arbor-education/design-system.components';
+
+function StatesExample() {
+  return (
+    <div style={{ maxWidth: '28rem', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      {/* Default — empty */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="state-default">Default — empty</label>
+        <TextInput id="state-default" placeholder="Enter student full name" />
+      </div>
+      {/* Error — always pair hasError with aria-invalid + aria-describedby on bare TextInput */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="state-error">Error — invalid input</label>
+        <TextInput
+          id="state-error"
+          hasError
+          aria-invalid="true"
+          aria-describedby="state-error-msg"
+          defaultValue="not-an-email"
+          type="email"
+        />
+        <span id="state-error-msg" style={{ color: 'var(--color-semantic-destructive-600)' }}>
+          Enter a valid email address
+        </span>
+      </div>
+      {/* Disabled */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="state-disabled">Disabled — not interactive</label>
+        <TextInput id="state-disabled" disabled placeholder="Field is disabled" />
+      </div>
+    </div>
+  );
+}
+export default StatesExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "state-default", className: "ds-text", children: "Default \u2014 empty" }), _jsx(TextInput, { id: "state-default", placeholder: "Enter student full name" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "state-filled", className: "ds-text", children: "Filled \u2014 value present" }), _jsx(TextInput, { id: "state-filled", defaultValue: "Amara Osei-Bonsu" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "state-error", className: "ds-text", children: "Error \u2014 invalid input" }), _jsx(TextInput, { id: "state-error", hasError: true, "aria-invalid": "true", "aria-describedby": "state-error-msg", defaultValue: "not-an-email", type: "email" }), _jsx("span", { id: "state-error-msg", className: "ds-text", style: { color: 'var(--color-semantic-destructive-600)' }, children: "Enter a valid email address" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "state-disabled", className: "ds-text", style: { color: 'var(--color-grey-400)' }, children: "Disabled \u2014 not interactive" }), _jsx(TextInput, { id: "state-disabled", disabled: true, placeholder: "Field is disabled" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "state-readonly", className: "ds-text", children: "Read only \u2014 value visible, not editable" }), _jsx(TextInput, { id: "state-readonly", readOnly: true, defaultValue: "Year 9 \u2014 Elm House" })] })] })),
+}, 'All five states in a single view: default (empty), filled (value present), error (with `hasError` + `aria-invalid` + an error message), disabled (removed from tab order; value not submitted), and readOnly (focusable, selectable, submittable — but not editable). Note: the error state on a bare TextInput always requires `aria-invalid="true"` set manually — `FormField` handles this automatically.');
+export const WithFormField = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { FormField } from '@arbor-education/design-system.components';
+
+function WithFormFieldExample() {
+  return (
+    <div style={{ maxWidth: '28rem', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      <FormField
+        inputType="text"
+        label="Student name"
+        id="student-name"
+        inputProps={{ placeholder: 'Enter student full name' }}
+      />
+      <FormField
+        inputType="text"
+        label="Parent email"
+        id="parent-email"
+        errorText="Enter a valid email address"
+        inputProps={{ placeholder: 'jane.doe@example.com', type: 'email' }}
+      />
+    </div>
+  );
+}
+export default WithFormFieldExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx(FormField, { inputType: "text", label: "Student name", id: "student-name", inputProps: { placeholder: 'Enter student full name' } }), _jsx(FormField, { inputType: "text", label: "Parent email", id: "parent-email", errorText: "Enter a valid email address", inputProps: { placeholder: 'jane.doe@example.com', type: 'email' } })] })),
+}, [
+    '**Always use `FormField` in real forms.** `FormField` with `inputType="text"` wraps TextInput and',
+    'automatically wires `hasError`, `aria-invalid`, `aria-describedby`, and the label `htmlFor` association.',
+    'The second example shows how `errorText` automatically sets the error state — do NOT pass',
+    '`hasError` or `aria-invalid` manually in `inputProps` when using FormField.',
+].join(' '));
+export const InputTypes = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { TextInput } from '@arbor-education/design-system.components';
+
+function InputTypesExample() {
+  return (
+    <div style={{ maxWidth: '28rem', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="type-text">type="text" — Student name</label>
+        <TextInput id="type-text" type="text" placeholder="Amara Osei-Bonsu" />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="type-email">type="email" — Parent email</label>
+        <TextInput id="type-email" type="email" placeholder="jane.doe@example.com" />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="type-password">type="password" — Set password</label>
+        <TextInput id="type-password" type="password" placeholder="Min. 8 characters" />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="type-tel">type="tel" — Parent phone number</label>
+        <TextInput id="type-tel" type="tel" placeholder="07700 900 123" />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <label htmlFor="type-url">type="url" — School website</label>
+        <TextInput id="type-url" type="url" placeholder="https://example-school.ac.uk" />
+      </div>
+    </div>
+  );
+}
+export default InputTypesExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "type-text", className: "ds-text", children: "type=\"text\" \u2014 Student name" }), _jsx(TextInput, { id: "type-text", type: "text", placeholder: "Amara Osei-Bonsu" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "type-email", className: "ds-text", children: "type=\"email\" \u2014 Parent email" }), _jsx(TextInput, { id: "type-email", type: "email", placeholder: "jane.doe@example.com" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "type-password", className: "ds-text", children: "type=\"password\" \u2014 Set password" }), _jsx(TextInput, { id: "type-password", type: "password", placeholder: "Min. 8 characters" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "type-tel", className: "ds-text", children: "type=\"tel\" \u2014 Parent phone number" }), _jsx(TextInput, { id: "type-tel", type: "tel", placeholder: "07700 900 123" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("label", { htmlFor: "type-url", className: "ds-text", children: "type=\"url\" \u2014 School website" }), _jsx(TextInput, { id: "type-url", type: "url", placeholder: "https://example-school.ac.uk" })] })] })),
+}, 'TextInput passes `type` directly to the native `<input>`. The visual appearance is identical across all types — the difference is in browser behaviour: `email` validates address format, `password` masks characters, `tel` opens a numeric keyboard on mobile, `url` validates URL format. Avoid `type="number"` and `type="time"` — use `NumberInput` and `TimeInput` for those.');
+export const ControlledWithValidation = withDescription({
+    render: () => _jsx(ControlledWithValidationTemplate, {}),
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useState } from 'react';
+import { TextInput } from '@arbor-education/design-system.components';
+
+function EmailValidationExample() {
+  const [value, setValue] = useState('');
+  const [hasError, setHasError] = useState(false);
+
+  const handleBlur = () => {
+    setHasError(value.length > 0 && !value.includes('@'));
+  };
+
+  return (
+    <div>
+      <label htmlFor="parent-email">Parent email address</label>
+      <TextInput
+        id="parent-email"
+        type="email"
+        placeholder="jane.doe@example.com"
+        value={value}
+        hasError={hasError}
+        aria-invalid={hasError}
+        aria-describedby={hasError ? 'parent-email-error' : undefined}
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (hasError && e.target.value.includes('@')) setHasError(false);
+        }}
+        onBlur={handleBlur}
+      />
+      {hasError && (
+        <span id="parent-email-error">Enter a valid email address</span>
+      )}
+    </div>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+}, [
+    'A fully controlled email field with validation-on-blur. State is managed externally:',
+    '`value` and `onChange` track the input; `onBlur` checks for `"@"` and sets `hasError`.',
+    'When `hasError` is true, the story also sets `aria-invalid="true"` and',
+    '`aria-describedby` pointing to the error message span — this is the correct bare-TextInput',
+    'pattern (FormField handles this wiring automatically).',
+    'The error clears as soon as the user types an `"@"` character, giving immediate positive feedback.',
+].join(' '));
+export const WithForwardRef = withDescription({
+    render: () => _jsx(WithForwardRefTemplate, {}),
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useRef } from 'react';
+import { TextInput } from '@arbor-education/design-system.components';
+
+function FocusExample() {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div>
+      <TextInput
+        ref={inputRef}
+        id="student-name"
+        placeholder="Enter student full name"
+        aria-label="Student full name"
+      />
+      <button type="button" onClick={() => inputRef.current?.focus()}>
+        Focus input
+      </button>
+    </div>
+  );
+}
+`.trim(),
+            },
+        },
+    },
+}, '`TextInput` uses `forwardRef` — it exposes the underlying `<input>` DOM node via `ref`. This story demonstrates programmatic focus: clicking the button calls `inputRef.current?.focus()`. Common real-world uses: restoring focus after an inline edit is saved, advancing focus in a multi-step form, or auto-focusing a search field when a panel opens.');
 //# sourceMappingURL=TextInput.stories.js.map

package/dist/components/formField/inputs/text/TextInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/text/TextInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE,EAAE;KACf;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,WAAW,EAAE,YAAY;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mBAAmB;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wBAAwB;SACtC;KACF;CAC+B,CAAC;AAEnC,eAAe,IAAI,CAAC;AAGpB,gBAAgB;AAChB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,WAAW,EAAE,eAAe;QAC5B,IAAI,EAAE,GAAG;KACV;CACF,CAAC"}
+{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/text/TextInput.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;AACtC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,8EAA8E;AAC9E,4EAA4E;AAC5E,mDAAmD;AACnD,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,qFAAqF;IACrF,mFAAmF;IACnF,iEAAiE;CAClE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,uFAAuF;IACvF,6EAA6E;IAC7E,gHAAgH;IAChH,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,4CAA4C;IAC5C,eAAe;IACf,6IAA6I;IAC7I,qJAAqJ;IACrJ,8IAA8I;IAC9I,gGAAgG;IAChG,iIAAiI;IACjI,0HAA0H;IAC1H,oJAAoJ;IACpJ,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,wHAAwH;IACxH,oIAAoI;IACpI,yHAAyH;IACzH,6EAA6E;IAC7E,4GAA4G;IAC5G,gCAAgC;CACjC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,sBAAsB;IACtB,EAAE;IACF,2DAA2D;IAC3D,8EAA8E;IAC9E,uEAAuE;IACvE,8FAA8F;IAC9F,mEAAmE;IACnE,EAAE;IACF,QAAQ;IACR,0EAA0E;IAC1E,wBAAwB;IACxB,EAAE;IACF,gEAAgE;IAChE,8EAA8E;IAC9E,8DAA8D;IAC9D,KAAK;IACL,EAAE;IACF,gDAAgD;IAChD,wFAAwF;IACxF,sEAAsE;IACtE,gDAAgD;IAChD,EAAE;IACF,8EAA8E;IAC9E,4FAA4F;IAC5F,mFAAmF;IACnF,8DAA8D;IAC9D,EAAE;IACF,8BAA8B;IAC9B,4EAA4E;IAC5E,uEAAuE;IACvE,EAAE;IACF,kDAAkD;IAClD,2FAA2F;IAC3F,mDAAmD;IACnD,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,qFAAqF;IACrF,sFAAsF;IACtF,2EAA2E;IAC3E,6DAA6D;IAC7D,8EAA8E;IAC9E,sFAAsF;IACtF,iEAAiE;IACjE,oFAAoF;IACpF,8EAA8E;IAC9E,wFAAwF;IACxF,sCAAsC;IACtC,gFAAgF;IAChF,+EAA+E;IAC/E,qFAAqF;IACrF,mEAAmE;IACnE,EAAE;IACF,KAAK;IACL,EAAE;IACF,sBAAsB;IACtB,EAAE;IACF,OAAO;IACP,wEAAwE;IACxE,EAAE;IACF,kDAAkD;IAClD,KAAK;IACL,EAAE;IACF,wBAAwB;IACxB,WAAW;IACX,uJAAuJ;CACxJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,qDAAqD;IACrD,sEAAsE;IACtE,wEAAwE;IACxE,wEAAwE;IACxE,uDAAuD;IACvD,6DAA6D;CAC9D,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,6GAA6G,CAAC;AAElI,SAAS,iBAAiB;IACxB,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,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,IAAI,EAAE,iBAAiB;SACxB;KACF;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE,EAAE;QACd,MAAM,EAAE,EAAE,EAAE;KACb;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,WAAW,EAAE;gBACX,wFAAwF;gBACxF,0GAA0G;gBAC1G,kHAAkH;gBAClH,+EAA+E;gBAC/E,uEAAuE;aACxE,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;gBAC9B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE;gBACX,+DAA+D;gBAC/D,qGAAqG;gBACrG,4CAA4C;gBAC5C,0FAA0F;gBAC1F,2CAA2C;aAC5C,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE;gBACX,4EAA4E;gBAC5E,uEAAuE;gBACvE,uFAAuF;aACxF,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,8CAA8C;gBAC9C,0EAA0E;gBAC1E,gGAAgG;aACjG,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,4EAA4E;gBAC5E,2FAA2F;gBAC3F,+BAA+B;gBAC/B,0FAA0F;aAC3F,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE;gBACX,4DAA4D;gBAC5D,+DAA+D;gBAC/D,gFAAgF;gBAChF,wDAAwD;aACzD,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,qEAAqE;gBACrE,gGAAgG;gBAChG,qDAAqD;aACtD,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE;gBACX,iDAAiD;gBACjD,+EAA+E;aAChF,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,sCAAsC,EAAE;aAC1D;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE;gBACX,uDAAuD;gBACvD,yGAAyG;aAC1G,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,qCAAqC,EAAE;aACzD;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE;gBACX,yEAAyE;gBACzE,yFAAyF;gBACzF,oEAAoE;aACrE,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,mGAAmG;gBACnG,qFAAqF;gBACrF,2FAA2F;aAC5F,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,qEAAqE;gBACrE,sDAAsD;gBACtD,yEAAyE;aAC1E,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;KACF;CAC+B,CAAC;AAEnC,eAAe,IAAI,CAAC;AAGpB,8EAA8E;AAC9E,iDAAiD;AACjD,8EAA8E;AAC9E,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE,EAAE,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;KACzE;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,+BAA+B;AAC/B,4EAA4E;AAC5E,2EAA2E;AAC3E,8EAA8E;AAE9E,MAAM,gCAAgC,GAAG,GAAG,EAAE;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACxI,gBAAO,OAAO,EAAC,yBAAyB,EAAC,SAAS,EAAC,SAAS,qCAEpD,EACR,KAAC,SAAS,IACR,EAAE,EAAC,yBAAyB,EAC5B,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,sBAAsB,EAClC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,sBACJ,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBACzB,IAAI,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;wBAC7C,WAAW,CAAC,KAAK,CAAC,CAAC;oBACrB,CAAC;gBACH,CAAC,EACD,MAAM,EAAE,UAAU,GAClB,EACD,QAAQ,IAAI,CACX,eAAM,EAAE,EAAC,oBAAoB,EAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,uCAAuC,EAAE,4CAEpG,CACR,EACA,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CACnC,eAAM,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mCAAmC,EAAE,kCAExE,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACxI,YAAG,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,uBAAuB,EAAE,iFAEvE,EACJ,KAAC,SAAS,IACR,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,kBAAkB,EACrB,WAAW,EAAC,yBAAyB,gBAC1B,mBAAmB,GAC9B,EACF,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6CAA6C,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,4BAGjC,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,WAAW,EAAE,yBAAyB;QACtC,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,YACjE,KAAC,SAAS,OAAK,IAAI,GAAI,GACnB,CACP;CACF,EACD,uLAAuL,CACxL,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU,eAAe,CACzC;IACE,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;CAkBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACxI,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,8EAEnC,EACR,KAAC,SAAS,IACR,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,GAAG,EACR,WAAW,EAAC,kCAAkC,GAC9C,IACE,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,yEAEnC,EACR,KAAC,SAAS,IACR,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,GAAG,EACR,WAAW,EAAC,kCAAkC,GAC9C,IACE,IACF,CACP;CACF,EACD,sQAAsQ,CACvQ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU,eAAe,CAC1C;IACE,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACxI,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,eAAe,EAAC,SAAS,EAAC,SAAS,qCAAwB,EAC1E,KAAC,SAAS,IAAC,EAAE,EAAC,eAAe,EAAC,WAAW,EAAC,yBAAyB,GAAG,IAClE,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,cAAc,EAAC,SAAS,EAAC,SAAS,4CAA+B,EAChF,KAAC,SAAS,IAAC,EAAE,EAAC,cAAc,EAAC,YAAY,EAAC,kBAAkB,GAAG,IAC3D,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,aAAa,EAAC,SAAS,EAAC,SAAS,2CAA8B,EAC9E,KAAC,SAAS,IACR,EAAE,EAAC,aAAa,EAChB,QAAQ,wBACK,MAAM,sBACF,iBAAiB,EAClC,YAAY,EAAC,cAAc,EAC3B,IAAI,EAAC,OAAO,GACZ,EACF,eAAM,EAAE,EAAC,iBAAiB,EAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,uCAAuC,EAAE,4CAEjG,IACH,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,gBAAgB,EAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,gDAErF,EACR,KAAC,SAAS,IACR,EAAE,EAAC,gBAAgB,EACnB,QAAQ,QACR,WAAW,EAAC,mBAAmB,GAC/B,IACE,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,gBAAgB,EAAC,SAAS,EAAC,SAAS,6DAAgD,EACnG,KAAC,SAAS,IACR,EAAE,EAAC,gBAAgB,EACnB,QAAQ,QACR,YAAY,EAAC,yBAAoB,GACjC,IACE,IACF,CACP;CACF,EACD,8YAA8Y,CAC/Y,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,eAAe,CACjD;IACE,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACxI,KAAC,SAAS,IACR,SAAS,EAAC,MAAM,EAChB,KAAK,EAAC,cAAc,EACpB,EAAE,EAAC,cAAc,EACjB,UAAU,EAAE,EAAE,WAAW,EAAE,yBAAyB,EAAE,GACtD,EACF,KAAC,SAAS,IACR,SAAS,EAAC,MAAM,EAChB,KAAK,EAAC,cAAc,EACpB,EAAE,EAAC,cAAc,EACjB,SAAS,EAAC,6BAA6B,EACvC,UAAU,EAAE,EAAE,WAAW,EAAE,sBAAsB,EAAE,IAAI,EAAE,OAAO,EAAE,GAClE,IACE,CACP;CACF,EACD;IACE,mGAAmG;IACnG,0GAA0G;IAC1G,2FAA2F;IAC3F,6EAA6E;CAC9E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU,eAAe,CAC9C;IACE,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Bf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACxI,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,kDAAmC,EACjF,KAAC,SAAS,IAAC,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,kBAAkB,GAAG,IACnE,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,YAAY,EAAC,SAAS,EAAC,SAAS,mDAAoC,EACnF,KAAC,SAAS,IAAC,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,GAAG,IACzE,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,eAAe,EAAC,SAAS,EAAC,SAAS,sDAAuC,EACzF,KAAC,SAAS,IAAC,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,UAAU,EAAC,WAAW,EAAC,mBAAmB,GAAG,IAC5E,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,wDAAyC,EACtF,KAAC,SAAS,IAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAC,WAAW,EAAC,eAAe,GAAG,IAC9D,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACnF,gBAAO,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,mDAAoC,EACjF,KAAC,SAAS,IAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAC,WAAW,EAAC,8BAA8B,GAAG,IAC7E,IACF,CACP;CACF,EACD,qXAAqX,CACtX,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAU,eAAe,CAC5D;IACE,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,gCAAgC,KAAG;IAClD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,sFAAsF;IACtF,wFAAwF;IACxF,wEAAwE;IACxE,4FAA4F;IAC5F,wDAAwD;IACxD,oGAAoG;CACrG,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU,eAAe,CAClD;IACE,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,sBAAsB,KAAG;IACxC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;CAqBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD,6VAA6V,CAC9V,CAAC"}