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

package/dist/components/row/Row.stories.js

@@ -1,65 +1,375 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { fn } from 'storybook/test';
 import { Row } from './Row';
+// ---------------------------------------------------------------------------
+// Content strings for the custom DocsPage
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`Row` is a single-line display component used to present a labelled piece of data — optionally with a supporting note — inside summary panels, detail cards, or any section-style layout.',
+    'When an `onClick` handler is provided the row becomes fully interactive: it gains hover and focus styles, renders a pair of animated directional icons, and responds to keyboard activation via **Enter** and **Space**.',
+].join(' ');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- Displaying a labelled piece of read-only data inside a detail panel or summary card (e.g. "Year group · Year 9").',
+    '- Rendering a list of named data points where a consistent label/value layout improves scannability.',
+    '- Providing a tappable/clickable drill-down link to a related record or page when `onClick` is supplied.',
+    '- Showing supplementary context alongside a value (e.g. a last-updated timestamp in the `note` slot).',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Navigation links | Native `<a>` or router `<Link>` — a `div` with `onClick` is not a true anchor |',
+    '| Tabular data with sortable columns | [`Table`](?path=/docs/components-table--docs) |',
+    '| Toggling or selecting items | Checkbox or radio group |',
+    '| Form controls | [`FormField`](?path=/docs/components-formfield--docs) with an appropriate input |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Clickable vs static rows',
+    '',
+    'The `onClick` prop is the **sole toggle** for all clickable behaviour — there is no separate `isClickable` prop or variant enum.',
+    '',
+    '| State | `tabIndex` | CSS modifier | Icons rendered |',
+    '|---|---|---|---|',
+    '| Static | `-1` (not in tab order) | — | None |',
+    '| Clickable | `0` (in tab order) | `ds-row--clickable` | `chevron-right` + `arrow-right` |',
+    '',
+    '**Dual-icon swap:** Both icons are always rendered when `onClick` is provided, but CSS controls their visibility:',
+    '',
+    '- **At rest:** `chevron-right` is visible; `arrow-right` is hidden via `display: none`.',
+    '- **On hover / focus:** `chevron-right` is hidden; `arrow-right` becomes visible.',
+    '',
+    'This swap is driven entirely by CSS — no JavaScript state is involved.',
+    '',
+    '---',
+    '',
+    '### Keyboard activation',
+    '',
+    'Clickable rows respond to **Enter** and **Space** keydown events by firing the `onClick` handler.',
+    '',
+    '---',
+    '',
+    '### Accessibility gap',
+    '',
+    '> **Known limitation:** Clickable `Row` instances render as a `<div>` with no `role="button"` attribute.',
+    '> Screen readers will not announce the element as a button, and `getByRole("button")` will not find it.',
+    '',
+    '`Row` does **not** spread arbitrary HTML attributes. The `className` prop is the only escape hatch.',
+    'Consumers **cannot** add `aria-label`, `aria-describedby`, `data-testid`, or any HTML attribute without modifying the component source.',
+    'These are documented design-debt items for a future accessibility audit.',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { Row } from '@arbor-education/design-system.components';",
+    "import type { RowProps } from '@arbor-education/design-system.components';",
+    '',
+    'type RowProps = {',
+    '  className?: string;',
+    '  label?: string;',
+    '  value?: string;',
+    '  note?: string;',
+    '  onClick?: MouseEventHandler<HTMLDivElement>;',
+    '};',
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Section](?path=/docs/components-section--docs) · [Card](?path=/docs/components-card--docs) · [Table](?path=/docs/components-table--docs)',
+].join('\n');
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function RowDocsPage() {
+    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/Row',
     component: Row,
-};
-export const Default = {
-    args: {
-        label: 'Label Text',
-        value: 'Value',
-        note: 'Note',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            page: RowDocsPage,
+        },
     },
-};
-export const LabelOnly = {
-    args: {
-        label: 'Full Name',
+    argTypes: {
+        label: {
+            description: [
+                'The left-hand label that identifies the data point.',
+                'Renders inside a `<span>` with a minimum width of 190 px so labels align consistently across stacked rows.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        value: {
+            description: [
+                'The right-hand value corresponding to the label.',
+                'Renders in the centre column with `flex-grow: 1`, filling available width.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        note: {
+            description: [
+                'Optional supplementary text rendered after the value — displayed in italics.',
+                'Useful for timestamps, caveats, or secondary context.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        onClick: {
+            description: [
+                'When provided, the row becomes interactive: it enters the tab order (`tabIndex={0}`),',
+                'gains the `ds-row--clickable` modifier, shows hover/focus styles, and renders dual directional icons.',
+                'Supports **Enter** and **Space** keyboard activation.',
+            ].join(' '),
+            action: 'onClick',
+            control: false,
+            table: {
+                type: { summary: 'MouseEventHandler<HTMLDivElement>' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        className: {
+            description: [
+                'Additional CSS class names applied to the root `<div>`.',
+                'This is the only HTML-attribute escape hatch — arbitrary HTML attributes cannot be passed via props.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
     },
 };
-export const LabelAndValue = {
-    args: {
-        label: 'Email Address',
-        value: 'jacob.black@forks.edu',
+export default meta;
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
     },
-};
-export const WithNote = {
+});
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
     args: {
-        label: 'Date of Birth',
-        value: '13/01/1990',
-        note: 'Age 36',
+        label: 'Year group',
+        value: 'Year 9',
+        note: 'Set 2',
+        onClick: fn(),
     },
-};
-export const Clickable = {
-    args: {
-        label: 'View Profile',
-        value: 'Jacob Black',
-        onClick: () => { console.log('click!'); },
+    render: args => _jsx(Row, { ...args }),
+}, 'The default story is wired to the Controls panel. By default it is clickable — remove `onClick` from the controls to switch to static mode and observe how the icons and hover behaviour disappear.');
+export const LabelOnly = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Row } from '@arbor-education/design-system.components';
+
+function EnrolmentStatusRow() {
+  return <Row label="Enrolment status" />;
+}
+export default EnrolmentStatusRow;
+`.trim(),
+            },
+        },
     },
-};
-export const ClickableWithNote = {
-    args: {
-        label: 'Attendance Record',
-        value: '96%',
-        note: 'Last updated today',
-        onClick: () => { console.log('click!'); },
+    render: () => _jsx(Row, { label: "Enrolment status" }),
+}, 'Minimum meaningful render — a label with no value or note. Both sibling `<span>` elements still render in the DOM (they are unconditionally present), but remain empty.');
+export const LabelAndValue = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Row } from '@arbor-education/design-system.components';
+
+function DateOfBirthRow() {
+  return <Row label="Date of birth" value="14 March 2009" />;
+}
+export default DateOfBirthRow;
+`.trim(),
+            },
+        },
     },
-};
-export const WithCustomClassName = {
-    args: {
-        label: 'Custom Styled',
-        value: 'With extra class',
-        className: 'custom-row-class',
+    render: () => _jsx(Row, { label: "Date of birth", value: "14 March 2009" }),
+}, 'The canonical two-column layout. The label column enforces a minimum width of 190 px so values align consistently when multiple rows are stacked.');
+export const WithNote = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Row } from '@arbor-education/design-system.components';
+
+function AttendanceRow() {
+  return (
+    <Row
+      label="Attendance this term"
+      value="91.4%"
+      note="Below school target of 95%"
+    />
+  );
+}
+export default AttendanceRow;
+`.trim(),
+            },
+        },
     },
-};
-export const LongContent = {
-    args: {
-        label: 'A very long label that might wrap depending on the container width',
-        value: 'A very long value that contains lots of information and might also need to wrap',
-        note: 'This is a longer note with additional context',
+    render: () => (_jsx(Row, { label: "Attendance this term", value: "91.4%", note: "Below school target of 95%" })),
+}, 'Adding a `note` renders supplementary italic text alongside the value. Use it for thresholds, last-updated timestamps, or secondary context that helps a user interpret the value.');
+export const Clickable = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Row } from '@arbor-education/design-system.components';
+
+function ClassRow() {
+  return (
+    <Row
+      label="Class"
+      value="9B/En1 — English"
+      onClick={() => navigateToClassDetail('9B-En1')}
+    />
+  );
+}
+export default ClassRow;
+`.trim(),
+            },
+        },
     },
-};
-export const MultipleRows = {
-    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [_jsx(Row, { label: "First Name", value: "Jacob" }), _jsx(Row, { label: "Last Name", value: "Black" }), _jsx(Row, { label: "Year Group", value: "Year 10", note: "2024/2025" }), _jsx(Row, { label: "Form Group", value: "10A" }), _jsx(Row, { label: "Attendance", value: "96%", note: "Above target", onClick: () => { console.log('click!'); } })] })),
-};
-export default meta;
+    render: () => (_jsx(Row, { label: "Class", value: "9B/En1 \u2014 English", onClick: fn() })),
+}, 'Providing an `onClick` handler activates all clickable behaviour: the row gains `ds-row--clickable`, enters the tab order, shows hover/focus styles, and renders the dual-icon pair. **Hover the row** to see the icon swap from `chevron-right` to `arrow-right`. Press **Enter** or **Space** to fire the handler.');
+export const ClickableWithNote = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Row } from '@arbor-education/design-system.components';
+
+function GuardianRow() {
+  return (
+    <Row
+      label="Guardian"
+      value="Sarah Okafor"
+      note="Primary contact"
+      onClick={() => navigateToContact('guardian-42')}
+    />
+  );
+}
+export default GuardianRow;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(Row, { label: "Guardian", value: "Sarah Okafor", note: "Primary contact", onClick: fn() })),
+}, 'All four content props used together with a clickable row. The note remains visible while the row is fully interactive — useful when secondary context (like "Primary contact") helps the user decide whether to navigate.');
+export const LongContent = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Row } from '@arbor-education/design-system.components';
+
+function LongContentExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <Row
+        label="Special educational needs and disabilities coordinator"
+        value="Mrs Jacqueline Abernathy-Thornton"
+        note="Updated 3 January 2026"
+      />
+      <Row
+        label="Pupil premium eligibility reason"
+        value="Free school meals — ever 6"
+        note="Verified by LA"
+        onClick={() => navigateToEligibilityDetail()}
+      />
+    </div>
+  );
+}
+export default LongContentExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx(Row, { label: "Special educational needs and disabilities coordinator", value: "Mrs Jacqueline Abernathy-Thornton", note: "Updated 3 January 2026" }), _jsx(Row, { label: "Pupil premium eligibility reason", value: "Free school meals \u2014 ever 6", note: "Verified by LA", onClick: fn() })] })),
+}, 'Long label and value strings exercise the flex layout. The label column maintains its 190 px minimum width, which may compress the value column significantly in narrow containers.');
+export const MultipleRows = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Row } from '@arbor-education/design-system.components';
+
+function PupilDetailPanel() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <Row label="Pupil" value="Amara Osei-Bonsu" />
+      <Row label="Year group" value="Year 10" />
+      <Row label="Form" value="10JH" />
+      <Row label="Admission number" value="001847" />
+      <Row label="UPN" value="A823456789012" />
+      <Row
+        label="SEN status"
+        value="SEN Support"
+        note="Review due May 2026"
+        onClick={() => navigateToSENRecord()}
+      />
+      <Row
+        label="Attendance (YTD)"
+        value="88.3%"
+        note="Below 90% threshold"
+        onClick={() => navigateToAttendance()}
+      />
+    </div>
+  );
+}
+export default PupilDetailPanel;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx(Row, { label: "Pupil", value: "Amara Osei-Bonsu" }), _jsx(Row, { label: "Year group", value: "Year 10" }), _jsx(Row, { label: "Form", value: "10JH" }), _jsx(Row, { label: "Admission number", value: "001847" }), _jsx(Row, { label: "UPN", value: "A823456789012" }), _jsx(Row, { label: "SEN status", value: "SEN Support", note: "Review due May 2026", onClick: fn() }), _jsx(Row, { label: "Attendance (YTD)", value: "88.3%", note: "Below 90% threshold", onClick: fn() })] })),
+}, 'A realistic pupil detail panel — the most common real-world usage. Static and clickable rows can be freely mixed. The `gap: var(--spacing-small)` wrapper token matches the spacing the component uses internally, keeping visual rhythm consistent.');
 //# sourceMappingURL=Row.stories.js.map

package/dist/components/row/Row.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.stories.js","sourceRoot":"","sources":["../../../src/components/row/Row.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,IAAI,GAAqB;IAC7B,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,GAAG;CACf,CAAC;AAIF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,MAAM;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,uBAAuB;KAC/B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;KAC1C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,KAAK,EAAE,mBAAmB;QAC1B,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,oBAAoB;QAC1B,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;KAC1C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACxC,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,kBAAkB;QACzB,SAAS,EAAE,kBAAkB;KAC9B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,oEAAoE;QAC3E,KAAK,EAAE,iFAAiF;QACxF,IAAI,EAAE,+CAA+C;KACtD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,aAClE,KAAC,GAAG,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,OAAO,GAAG,EACxC,KAAC,GAAG,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,OAAO,GAAG,EACvC,KAAC,GAAG,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,WAAW,GAAG,EAC3D,KAAC,GAAG,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,KAAK,GAAG,EACtC,KAAC,GAAG,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAI,IACjG,CACP;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Row.stories.js","sourceRoot":"","sources":["../../../src/components/row/Row.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/searchBar/SearchBar.stories.d.ts

@@ -1,4 +1,6 @@
 import type { StoryObj } from '@storybook/react-vite';
+import { SearchBar } from './SearchBar';
+declare function SearchBarDocsPage(): import("react/jsx-runtime").JSX.Element;
 declare const meta: {
     title: string;
     component: (props: {
@@ -8,39 +10,85 @@ declare const meta: {
         hoverText?: string;
         alwaysOpen?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
     parameters: {
         layout: string;
+        docs: {
+            page: typeof SearchBarDocsPage;
+        };
     };
-    tags: string[];
     argTypes: {
         searchValue: {
             control: "text";
             description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
         setSearchValue: {
+            control: false;
             action: string;
             description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
         placeholderText: {
             control: "text";
             description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
         hoverText: {
             control: "text";
             description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
         alwaysOpen: {
             control: "boolean";
             description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
     };
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SearchBar>;
 export declare const Default: Story;
-export declare const WithPlaceholder: Story;
+export declare const WithPlaceholderText: Story;
 export declare const WithHoverText: Story;
-export declare const WithHoverTextNoPlaceholder: Story;
+export declare const WithHoverTextOnly: Story;
 export declare const WithSearchValue: Story;
 export declare const AlwaysOpen: Story;
+export declare const AlwaysOpenWithValue: Story;
+export declare const ControlledByParent: Story;
 //# sourceMappingURL=SearchBar.stories.d.ts.map

package/dist/components/searchBar/SearchBar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/searchBar/SearchBar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAUnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAKxC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}
+{"version":3,"file":"SearchBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/searchBar/SearchBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA2FxC,iBAAS,iBAAiB,4CAmBzB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AA2IxC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAiCjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkC3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAiC/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAoCxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuChC,CAAC"}