@arbor-education/design-system.components 0.12.0 → 0.13.1

package/dist/components/separator/Separator.stories.js

@@ -1,12 +1,451 @@
+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 { Separator } from './Separator';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    'Separator renders a thin horizontal rule between content sections. It is a lightweight wrapper',
+    'around the [Radix UI Separator primitive](https://www.radix-ui.com/primitives/docs/components/separator)',
+    'that adds the `ds-separator` class and forwards all props via `...rest`.',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### Semantic vs decorative',
+    '',
+    'The most important prop on Separator is `decorative`. It controls whether the line is communicated',
+    'to assistive technologies:',
+    '',
+    '| decorative | Role in DOM | Screen reader behaviour |',
+    '|---|---|---|',
+    '| `false` (default) | `role="separator"` | Announces a thematic break — equivalent to `<hr>` |',
+    '| `true` | `role="none"` | Invisible to screen readers — purely presentational |',
+    '',
+    'Ask yourself: "If this line were invisible, would a screen reader user miss the conceptual',
+    'boundary?" If yes, use `decorative={false}`. If the surrounding headings or labels already',
+    'communicate the grouping, use `decorative={true}`.',
+    '',
+    '---',
+    '',
+    '### When to use',
+    '',
+    '- **Between distinct content sections** — e.g. attendance summary and report notes on a student',
+    '  profile, where there is a genuine thematic break',
+    '- **Between navigation groups** — e.g. between Academic links and People links in a sidebar,',
+    '  when section headings alone are not enough',
+    '- **Vertical dividers** — e.g. separating a value from its unit inside a stat card',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Scenario | Use instead |',
+    '|---|---|',
+    '| Inside a Dropdown menu | `Dropdown.Separator` (has its own `ds-dropdown__separator` styles) |',
+    '| Between every list item | Gap tokens (`var(--spacing-small)`) — separators between every item create visual noise |',
+    '| Between table rows | AG Grid\'s built-in row borders |',
+    '| Purely decorative colour block / hero divider | A styled `<div>` with an explicit `aria-hidden` |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Vertical orientation',
+    '',
+    'Use `orientation="vertical"` for inline dividers between labelled values. The component sizes',
+    'itself to `width: 1px; height: 100%` — place it inside a flex container with an explicit height',
+    'so the percentage resolves correctly:',
+    '',
+    '```tsx',
+    '<div style={{ display: "flex", alignItems: "center", height: "var(--spacing-xxxlarge)" }}>',
+    '  <span>Present</span>',
+    '  <Separator orientation="vertical" decorative />',
+    '  <span>32 students</span>',
+    '</div>',
+    '```',
+    '',
+    '---',
+    '',
+    '### Forwarded refs',
+    '',
+    'The Arbor `Separator` wrapper does **not** use `forwardRef`. Do not attempt to attach a ref to',
+    'this component — use a wrapping element if you need a DOM reference.',
+    '',
+    '---',
+    '',
+    '### API overview',
+    '',
+    'All props are forwarded to the Radix `Root` element via `...rest`. See the',
+    '[Radix Separator docs](https://www.radix-ui.com/primitives/docs/components/separator) for the',
+    'full prop list. Key props:',
+    '',
+    '| Prop | Type | Default | Description |',
+    '|---|---|---|---|',
+    '| `orientation` | `"horizontal" \\| "vertical"` | `"horizontal"` | Layout axis |',
+    '| `decorative` | `boolean` | `false` | When `true`, sets `role="none"` — hides from screen readers |',
+    '| `className` | `string` | — | Merged with `ds-separator` via `classnames` |',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Dropdown](?path=/docs/components-dropdown--docs) (use `Dropdown.Separator` inside menus) · [Section](?path=/docs/components-section--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 SeparatorDocsPage() {
+    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/Separator',
     component: Separator,
-};
-export const Default = {
-    args: {
-        title: 'titleValue',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            page: SeparatorDocsPage,
+        },
+    },
+    argTypes: {
+        orientation: {
+            control: 'radio',
+            options: ['horizontal', 'vertical'],
+            description: [
+                'Controls the layout axis of the separator line.',
+                '`"horizontal"` (default) renders a full-width 1px horizontal rule.',
+                '`"vertical"` renders a 1px vertical line sized to `height: 100%` — place it inside a flex',
+                'container with an explicit height so the percentage resolves correctly.',
+            ].join(' '),
+            table: {
+                type: { summary: '"horizontal" | "vertical"' },
+                defaultValue: { summary: '"horizontal"' },
+            },
+        },
+        decorative: {
+            control: 'boolean',
+            description: [
+                'Controls whether the separator is communicated to assistive technologies.',
+                'When `false` (default), the element renders with `role="separator"` — a screen reader',
+                'announces a thematic break, equivalent to an `<hr>`.',
+                'When `true`, the element renders with `role="none"` and is invisible to screen readers.',
+                'Use `decorative={true}` only when the surrounding content (headings, labels) already',
+                'communicates the grouping and the line is purely visual.',
+            ].join(' '),
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: [
+                'Additional CSS class merged with `ds-separator` via the `classnames` utility.',
+                'This is the primary escape hatch for colour and spacing customisation — there are no',
+                '`--separator-*` design tokens.',
+                'Common pattern: override `background-color` with a visible token such as',
+                '`var(--color-grey-200)` when the separator must be visible on the default page background.',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
     },
 };
 export default meta;
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
+    args: {
+        orientation: 'horizontal',
+        decorative: false,
+    },
+    render: args => (_jsx("div", { style: { padding: 'var(--spacing-xlarge)' }, children: _jsx(Separator, { ...args, style: { backgroundColor: 'var(--color-grey-200)' } }) })),
+}, [
+    'The interactive canvas — every prop is wired to the Controls panel below.',
+    'The separator is given `background-color: var(--color-grey-200)` via an inline style **in this',
+    'story wrapper only** so it remains visible against the docs page background.',
+    'In production, supply a visible colour through `className` — see the WithCustomSpacing story for',
+    'the recommended pattern.',
+].join(' '));
+export const Vertical = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Separator } from '@arbor-education/design-system.components';
+
+<div style={{ display: 'flex', alignItems: 'center', height: 'var(--spacing-xxxlarge)' }}>
+  <span>Present</span>
+  <Separator orientation="vertical" decorative style={{ backgroundColor: 'var(--color-grey-200)' }} />
+  <span>32 students</span>
+  <Separator orientation="vertical" decorative style={{ backgroundColor: 'var(--color-grey-200)' }} />
+  <span>Period 3</span>
+</div>
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { padding: 'var(--spacing-xlarge)' }, children: _jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                height: 'var(--spacing-xxxlarge)',
+                gap: 0,
+            }, children: [_jsx("span", { className: "ds-text", children: "Present" }), _jsx(Separator, { orientation: "vertical", decorative: true, style: { backgroundColor: 'var(--color-grey-200)' } }), _jsx("span", { className: "ds-text", children: "32 students" }), _jsx(Separator, { orientation: "vertical", decorative: true, style: { backgroundColor: 'var(--color-grey-200)' } }), _jsx("span", { className: "ds-text", children: "Period 3" })] }) })),
+}, [
+    '`orientation="vertical"` renders a 1px vertical line sized to `height: 100%`.',
+    'Place it inside a flex container with an explicit height so the percentage resolves correctly.',
+    'Vertical separators between labelled values are almost always presentational, so',
+    '`decorative={true}` is the right default — the surrounding labels already communicate the grouping.',
+].join(' '));
+export const SemanticVsDecorative = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Separator } from '@arbor-education/design-system.components';
+
+{/* Semantic — announces a thematic break to screen readers */}
+<p>Attendance for Year 10 — Week ending 18 April</p>
+<Separator decorative={false} style={{ backgroundColor: 'var(--color-grey-200)' }} />
+<p>Overall attendance: 94.2%</p>
+
+{/* Decorative — invisible to screen readers; surrounding headings already communicate grouping */}
+<p>Attendance for Year 10 — Week ending 18 April</p>
+<Separator decorative style={{ backgroundColor: 'var(--color-grey-200)' }} />
+<p>Overall attendance: 94.2%</p>
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)' }, children: [_jsx("p", { className: "ds-text", style: {
+                    marginTop: 0,
+                    marginBottom: 'var(--spacing-large)',
+                    color: 'var(--color-grey-600)',
+                    fontSize: 'var(--font-size-1-11)',
+                }, children: "Open your browser DevTools and inspect the two separators \u2014 the role attribute is the only difference between them visually, but it matters enormously to screen reader users." }), _jsxs("div", { style: {
+                    display: 'flex',
+                    gap: 'var(--spacing-xxlarge)',
+                    alignItems: 'flex-start',
+                }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("p", { className: "ds-text", style: {
+                                    marginTop: 0,
+                                    marginBottom: 'var(--spacing-small)',
+                                    color: 'var(--color-grey-600)',
+                                    fontSize: 'var(--font-size-1-11)',
+                                }, children: "Semantic (decorative=false) \u2014 announces a thematic break" }), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 'var(--spacing-small)' }, children: "Attendance for Year 10 \u2014 Week ending 18 April" }), _jsx(Separator, { decorative: false, style: { backgroundColor: 'var(--color-grey-200)' } }), _jsx("p", { className: "ds-text", style: { marginTop: 'var(--spacing-small)', marginBottom: 0 }, children: "Overall attendance: 94.2%" }), _jsxs("p", { className: "ds-text", style: {
+                                    marginTop: 'var(--spacing-small)',
+                                    marginBottom: 0,
+                                    padding: 'var(--spacing-small)',
+                                    backgroundColor: 'var(--color-semantic-info-050)',
+                                    borderRadius: 'var(--border-radius-small)',
+                                    fontSize: 'var(--font-size-1-11)',
+                                    color: 'var(--color-semantic-info-800)',
+                                }, children: ["DOM:", ' ', _jsx("code", { children: "role=\"separator\"" }), ' ', "\u2014 screen reader announces \"separator\" between the heading and the stat. Use this when the two sections would feel disconnected without the boundary signal."] })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("p", { className: "ds-text", style: {
+                                    marginTop: 0,
+                                    marginBottom: 'var(--spacing-small)',
+                                    color: 'var(--color-grey-600)',
+                                    fontSize: 'var(--font-size-1-11)',
+                                }, children: "Decorative (decorative=true) \u2014 invisible to screen readers" }), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 'var(--spacing-small)' }, children: "Attendance for Year 10 \u2014 Week ending 18 April" }), _jsx(Separator, { decorative: true, style: { backgroundColor: 'var(--color-grey-200)' } }), _jsx("p", { className: "ds-text", style: { marginTop: 'var(--spacing-small)', marginBottom: 0 }, children: "Overall attendance: 94.2%" }), _jsxs("p", { className: "ds-text", style: {
+                                    marginTop: 'var(--spacing-small)',
+                                    marginBottom: 0,
+                                    padding: 'var(--spacing-small)',
+                                    backgroundColor: 'var(--color-semantic-warning-050)',
+                                    borderRadius: 'var(--border-radius-small)',
+                                    fontSize: 'var(--font-size-1-11)',
+                                    color: 'var(--color-semantic-warning-800)',
+                                }, children: ["DOM:", ' ', _jsx("code", { children: "role=\"none\"" }), ' ', "\u2014 screen reader skips this element entirely. Use this when surrounding headings or labels already communicate the grouping clearly."] })] })] })] })),
+}, [
+    'A side-by-side teaching example showing the only meaningful difference between `decorative={false}`',
+    'and `decorative={true}`: the `role` attribute.',
+    'Visually the two separators look identical — the distinction is entirely for assistive technology.',
+    'Open DevTools and inspect the `<div>` elements to see `role="separator"` vs `role="none"`.',
+    'Controls are disabled in this story because the layout is fixed for comparison purposes.',
+].join(' '));
+export const BetweenContentSections = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Separator } from '@arbor-education/design-system.components';
+
+<div style={{ maxWidth: '40rem' }}>
+  <p><strong>Autumn Term — Attendance Summary</strong></p>
+  <p>
+    Emma Warwick has attended 87 out of 90 scheduled sessions this term, giving an overall
+    attendance rate of 96.7%. There were three absences recorded: two authorised and one
+    unauthorised on 3 November.
+  </p>
+  <Separator style={{ backgroundColor: 'var(--color-grey-200)' }} />
+  <p><strong>Head of Year Report</strong></p>
+  <p>
+    Emma is performing well across all subject areas and has been commended by her form tutor
+    for consistent effort.
+  </p>
+</div>
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)', maxWidth: '40rem' }, children: [_jsx("p", { className: "ds-text", style: { marginTop: 0 }, children: _jsx("strong", { children: "Autumn Term \u2014 Attendance Summary" }) }), _jsx("p", { className: "ds-text", children: "Emma Warwick has attended 87 out of 90 scheduled sessions this term, giving an overall attendance rate of 96.7%. There were three absences recorded: two authorised (medical appointment on 14 October, family holiday approved in advance on 21 October) and one unauthorised on 3 November. No lateness has been recorded." }), _jsx(Separator, { style: { backgroundColor: 'var(--color-grey-200)' } }), _jsx("p", { className: "ds-text", style: { marginTop: 'var(--spacing-small)' }, children: _jsx("strong", { children: "Head of Year Report" }) }), _jsx("p", { className: "ds-text", style: { marginBottom: 0 }, children: "Emma is performing well across all subject areas and has been commended by her form tutor for consistent effort. Her target grade for English is currently being reviewed following a strong performance in the mock assessment. No pastoral concerns have been raised this term." })] })),
+}, [
+    'A realistic school management scenario: a student profile with two distinct content sections.',
+    'The attendance summary and the Head of Year report are genuinely separate topics — a semantic',
+    'separator (`decorative={false}`, the default) is the right choice because a screen reader user',
+    'benefits from knowing there is a thematic boundary between them.',
+    'Notice that the separator owns its own vertical margin via `var(--spacing-small)` — do not add',
+    'extra `margin-bottom` to the paragraph above or `margin-top` to the heading below.',
+].join(' '));
+export const InMenuContext = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Separator } from '@arbor-education/design-system.components';
+
+<nav aria-label="School administration">
+  <p>Academic</p>
+  <ul>
+    <li><a href="#year-groups">Year groups</a></li>
+    <li><a href="#classes">Classes</a></li>
+    <li><a href="#subjects">Subjects</a></li>
+    <li><a href="#timetables">Timetables</a></li>
+  </ul>
+
+  {/*
+    decorative={true} — the bold section headings already communicate the grouping
+    to screen reader users, so role="separator" would be redundant noise.
+  */}
+  <Separator
+    decorative
+    style={{ backgroundColor: 'var(--color-grey-200)', margin: 'var(--spacing-large) 0' }}
+  />
+
+  <p>People</p>
+  <ul>
+    <li><a href="#students">Students</a></li>
+    <li><a href="#staff">Staff</a></li>
+    <li><a href="#guardians">Guardians</a></li>
+  </ul>
+</nav>
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: {
+            padding: 'var(--spacing-xlarge)',
+            maxWidth: '14rem',
+            border: 'var(--border-weight) solid var(--color-grey-200)',
+            borderRadius: 'var(--border-radius-small)',
+        }, children: _jsxs("nav", { "aria-label": "School administration", children: [_jsx("p", { className: "ds-text", style: {
+                        margin: '0 0 var(--spacing-small)',
+                        fontSize: 'var(--font-size-2-13)',
+                        fontWeight: 'var(--font-weight-semi-bold)',
+                        color: 'var(--section-heading-color-text)',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                    }, children: "Academic" }), _jsxs("ul", { style: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx("li", { children: _jsx("a", { className: "ds-text", href: "#year-groups", children: "Year groups" }) }), _jsx("li", { children: _jsx("a", { className: "ds-text", href: "#classes", children: "Classes" }) }), _jsx("li", { children: _jsx("a", { className: "ds-text", href: "#subjects", children: "Subjects" }) }), _jsx("li", { children: _jsx("a", { className: "ds-text", href: "#timetables", children: "Timetables" }) })] }), _jsx(Separator, { decorative: true, style: { backgroundColor: 'var(--color-grey-200)', margin: 'var(--spacing-large) 0' } }), _jsx("p", { className: "ds-text", style: {
+                        margin: '0 0 var(--spacing-small)',
+                        fontSize: 'var(--font-size-2-13)',
+                        fontWeight: 'var(--font-weight-semi-bold)',
+                        color: 'var(--section-heading-color-text)',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                    }, children: "People" }), _jsxs("ul", { style: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx("li", { children: _jsx("a", { className: "ds-text", href: "#students", children: "Students" }) }), _jsx("li", { children: _jsx("a", { className: "ds-text", href: "#staff", children: "Staff" }) }), _jsx("li", { children: _jsx("a", { className: "ds-text", href: "#guardians", children: "Guardians" }) })] })] }) })),
+}, [
+    'A simulated school admin sidebar navigation with two groups — Academic and People — separated',
+    'by a Separator.',
+    'Here `decorative={true}` is the right choice: the bold section headings ("ACADEMIC", "PEOPLE")',
+    'already communicate the grouping clearly to screen reader users.',
+    'Adding `role="separator"` would be redundant noise — a screen reader would announce "separator"',
+    'between two headings it can already distinguish from each other.',
+    'This is the inverse of the BetweenContentSections story: when context already communicates',
+    'structure, the separator is purely visual.',
+    '**Important:** do not use this pattern inside a `Dropdown` — use `Dropdown.Separator` instead,',
+    'which carries its own `ds-dropdown__separator` styles.',
+].join(' '));
+export const WithCustomSpacing = withDescription({
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Separator } from '@arbor-education/design-system.components';
+
+{/* Default — invisible on grey-050/white surfaces; no colour applied */}
+<Separator />
+
+{/* Visible separator via inline style (demo only — use className in production) */}
+<Separator style={{ backgroundColor: 'var(--color-grey-200)' }} />
+
+{/* Strong separator with extra vertical margin */}
+<Separator style={{ backgroundColor: 'var(--color-grey-400)', margin: 'var(--spacing-large) 0' }} />
+
+{/*
+  Recommended production pattern — apply overrides via className in your component SCSS:
+
+  .my-section__divider {
+    background-color: var(--color-grey-200);
+    margin: var(--spacing-large) 0;
+  }
+*/}
+<Separator className="my-section__divider" />
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)', maxWidth: '40rem' }, children: [_jsx("p", { className: "ds-text", style: {
+                    marginTop: 0,
+                    marginBottom: 'var(--spacing-large)',
+                    color: 'var(--color-grey-600)',
+                    fontSize: 'var(--font-size-1-11)',
+                }, children: "Three separators with different className overrides \u2014 colour and spacing via CSS tokens, never hardcoded px or hex values." }), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 0 }, children: "Default colour (invisible on grey-050 background)" }), _jsx(Separator, {}), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 'var(--spacing-xlarge)', fontStyle: 'italic', color: 'var(--color-grey-600)', fontSize: 'var(--font-size-1-11)' }, children: "Above: no className \u2014 separator is invisible because --page-base-color-border = --color-grey-050" }), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 0 }, children: "Visible separator (var(--color-grey-200))" }), _jsx(Separator, { style: { backgroundColor: 'var(--color-grey-200)' } }), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 'var(--spacing-xlarge)', fontStyle: 'italic', color: 'var(--color-grey-600)', fontSize: 'var(--font-size-1-11)' }, children: "Above: inline style used here for demo clarity \u2014 in production use className with a CSS token override" }), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 0 }, children: "Strong separator (var(--color-grey-400)) \u2014 for higher-contrast boundaries" }), _jsx(Separator, { style: { backgroundColor: 'var(--color-grey-400)', margin: 'var(--spacing-large) 0' } }), _jsx("p", { className: "ds-text", style: { marginTop: 0, marginBottom: 0, fontStyle: 'italic', color: 'var(--color-grey-600)', fontSize: 'var(--font-size-1-11)' }, children: "Above: increased vertical margin via inline style \u2014 in production override the margin in a className" }), _jsxs("div", { style: {
+                    marginTop: 'var(--spacing-xlarge)',
+                    padding: 'var(--spacing-large)',
+                    backgroundColor: 'var(--color-semantic-info-050)',
+                    borderRadius: 'var(--border-radius-small)',
+                    border: 'var(--border-weight) solid var(--color-semantic-info-100)',
+                }, children: [_jsx("p", { className: "ds-text", style: { margin: '0 0 var(--spacing-small)', fontWeight: 'var(--font-weight-semi-bold)', color: 'var(--color-semantic-info-800)' }, children: "Recommended className pattern (production)" }), _jsxs("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-semantic-info-800)', fontSize: 'var(--font-size-1-11)' }, children: ["There are no", ' ', _jsx("code", { children: "--separator-*" }), ' ', "tokens. Apply overrides via a custom class in your component SCSS:"] }), _jsx("pre", { style: {
+                            margin: 'var(--spacing-small) 0 0',
+                            padding: 'var(--spacing-small)',
+                            backgroundColor: 'var(--color-semantic-info-100)',
+                            borderRadius: 'var(--border-radius-small)',
+                            fontSize: 'var(--font-size-1-11)',
+                            color: 'var(--color-semantic-info-900)',
+                            overflowX: 'auto',
+                        }, children: _jsx("code", { children: '.my-section__divider { background-color: var(--color-grey-200); margin: var(--spacing-large) 0; }' }) }), _jsx("pre", { style: {
+                            margin: 'var(--spacing-small) 0 0',
+                            padding: 'var(--spacing-small)',
+                            backgroundColor: 'var(--color-semantic-info-100)',
+                            borderRadius: 'var(--border-radius-small)',
+                            fontSize: 'var(--font-size-1-11)',
+                            color: 'var(--color-semantic-info-900)',
+                            overflowX: 'auto',
+                        }, children: _jsx("code", { children: '<Separator className="my-section__divider" />' }) })] })] })),
+}, [
+    'Demonstrates the colour visibility problem head-on and shows the three-tier spectrum of',
+    '`background-color` overrides.',
+    'The first separator is completely invisible — this is the default behaviour on any grey-050',
+    'or white surface, and it trips up nearly every first-time consumer of this component.',
+    'The second and third examples use inline styles for demo clarity only.',
+    'In production, always reach for `className` with a custom CSS rule and design tokens — never',
+    'hardcode hex values or pixel spacing.',
+    'The callout at the bottom shows the exact SCSS + JSX pattern to copy into your component.',
+].join(' '));
 //# sourceMappingURL=Separator.stories.js.map

package/dist/components/separator/Separator.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.stories.js","sourceRoot":"","sources":["../../../src/components/separator/Separator.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;KACpB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Separator.stories.js","sourceRoot":"","sources":["../../../src/components/separator/Separator.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/Table.d.ts

@@ -1,3 +1,4 @@
+import { type GridApi } from 'ag-grid-enterprise';
 import { type AgGridReactProps } from 'ag-grid-react';
 import { type ReactNode } from 'react';
 import { type UseTableSettingsParams } from './useTableSettings';
@@ -32,6 +33,12 @@ export declare const Table: {
     ButtonCellRenderer: (props: import("ag-grid-react").CustomCellRendererProps<any, any, any> & {
         value: import("../button/Button").ButtonProps;
     }) => import("react/jsx-runtime").JSX.Element;
+    BooleanCellRenderer: (props: import("ag-grid-react").CustomCellRendererProps) => import("react/jsx-runtime").JSX.Element | null;
+    DefaultCellRenderer: (props: import("ag-grid-react").CustomCellRendererProps) => import("react/jsx-runtime").JSX.Element;
+    DateCellEditor: (props: import("ag-grid-react").CustomCellEditorProps) => import("react/jsx-runtime").JSX.Element;
+    DefaultColDef: import("ag-grid-enterprise").ColDef<any, any>;
+    GridApiContext: import("react").Context<GridApi<any> | null>;
+    CheckboxCellRenderer: (props: import("ag-grid-react").CustomCellRendererProps) => import("react/jsx-runtime").JSX.Element;
     DefaultValueFormatter: import("ag-grid-enterprise").ValueFormatterFunc<any, any, any>;
     TableSettingsDropdown: () => import("react/jsx-runtime").JSX.Element;
     TableControls: (props: TableControlsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUzD,OAAO,EAAoB,KAAK,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAYnF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,KAAK,UAAU,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1H,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,KAAK,UAAU,CAAC,KAAK,GAAG,GAAG,IAAI;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC,CAAC,EAAE,OAAO,CAAC;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,sBAAsB,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAMrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,eAAO,MAAM,KAAK;YAAW,UAAU;;;;;;;;;;;;;;;;;;CAoJtC,CAAC;AAeF,yBAAiB,KAAK,CAAC;IAErB,KAAY,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC;IACnD,KAAY,aAAa,GAAG,kBAAkB,CAAC;IAC/C,KAAY,UAAU,GAAG,cAAc,CAAC;IACxC,KAAY,gBAAgB,GAAG,wBAAwB,CAAC;IACxD,KAAY,OAAO,GAAG,aAAa,CAAC;CACrC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUzD,OAAO,EAAoB,KAAK,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAanF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,KAAK,UAAU,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1H,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,KAAK,UAAU,CAAC,KAAK,GAAG,GAAG,IAAI;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC,CAAC,EAAE,OAAO,CAAC;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,sBAAsB,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAMrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,eAAO,MAAM,KAAK;YAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAqJtC,CAAC;AAqBF,yBAAiB,KAAK,CAAC;IAErB,KAAY,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC;IACnD,KAAY,aAAa,GAAG,kBAAkB,CAAC;IAC/C,KAAY,UAAU,GAAG,cAAc,CAAC;IACxC,KAAY,gBAAgB,GAAG,wBAAwB,CAAC;IACxD,KAAY,OAAO,GAAG,aAAa,CAAC;CACrC"}

package/dist/components/table/Table.js

@@ -24,12 +24,14 @@ import { tidyTheme } from './theme/tidyTheme';
 import { focusFirstFocusableElement } from '../../utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
+import { DateCellEditor } from './cellEditors/DateCellEditor';
 import { TableSettingsDropdown } from './tableControls/TableSettingsDropdown';
 import { TableControls } from './tableControls/TableControls';
 import { TABLE_SPACING } from './tableConsts';
 import { TableSettingsContext } from './TableSettingsContext';
 import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
 import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
+import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer';
 setAgGridLicenseKey();
 ModuleRegistry.registerModules([AllEnterpriseModule]);
 export { TableSettingsContext } from './TableSettingsContext';
@@ -94,6 +96,7 @@ export const Table = (props) => {
                             dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
                             dsBooleanFilter: BooleanFilter,
                             dsTimeFilter: TimeFilter,
+                            dsDateCellEditor: DateCellEditor,
                             dsCheckboxCellRenderer: CheckboxCellRenderer,
                             dsBooleanCellRenderer: BooleanCellRenderer,
                             ...components,
@@ -106,6 +109,12 @@ Table.RowCountInfo = RowCountInfo;
 Table.BulkActionsDropdown = BulkActionsDropdown;
 Table.HideColumnsDropdown = HideColumnsDropdown;
 Table.ButtonCellRenderer = ButtonCellRenderer;
+Table.BooleanCellRenderer = BooleanCellRenderer;
+Table.DefaultCellRenderer = DefaultCellRenderer;
+Table.DateCellEditor = DateCellEditor;
+Table.DefaultColDef = DSDefaultColDef;
+Table.GridApiContext = GridApiContext;
+Table.CheckboxCellRenderer = CheckboxCellRenderer;
 Table.DefaultValueFormatter = defaultValueFormatter;
 Table.TableSettingsDropdown = TableSettingsDropdown;
 Table.TableControls = TableControls;

package/dist/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAgB,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAA+B,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,aAAa,EAA8D,MAAM,+BAA+B,CAAC;AAE1H,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAgB1E,mBAAmB,EAAE,CAAC;AAEtB,cAAc,CAAC,eAAe,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IACzC,MAAM,EACJ,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,SAAS,GAAG,IAAI,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EACnB,sCAAsC,GAAG,KAAK,EAC9C,iBAAiB,GAAG,KAAK,EACzB,sBAAsB,EACtB,aAAa,GAAG,EAAE,EAClB,OAAO,GAAG,EAAE,EACZ,UAAU,GAAG,EAAE,EACf,UAAU,EACV,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAE7D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,uBAAuB,GACxB,GAAG,gBAAgB,CAAC;QACnB,sBAAsB;QACtB,oBAAoB;QACpB,sBAAsB;QACtB,qBAAqB;QACrB,mBAAmB;KACpB,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEzC,MAAM,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC;IAEpD,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,UAAU,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO,YAAY,CAAC,UAAU,CAAC;YAC7B,eAAe,EAAE,gBAAgB;YACjC,SAAS,EAAE,gBAAgB;YAC3B,aAAa,EAAE,gBAAgB;YAC/B,YAAY,EAAE,gBAAgB;YAC9B,OAAO,EAAE;gBACP,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC;gBACrB,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,uBAAuB;gBAC1C,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,sBAAsB;gBACzC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,uBAAuB;aAC3C,CAAC,YAAY,CAAC;SAChB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACrC,KAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;gBACL,QAAQ;gBACR,aAAa;gBACb,mBAAmB;gBACnB,eAAe;gBACf,uBAAuB;aACxB,YAED,kCACe,MAAM,EACnB,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,EAC9D,WAAW,EAAE,GAAG,EAAE,GAAG,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,EAC1D,SAAS,EAAE,GAAG,EAAE,GAAG,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,EACxD,WAAW,EAAE,GAAG,EAAE,GAAG,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,EAC1D,SAAS,EAAE,GAAG,EAAE,GAAG,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EACvD,OAAO,EAAE,GAAG,EAAE,GAAG,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,aAEpD,aAAa,IAAI,CAChB,KAAC,WAAW,mBAAc,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,YACnH,aAAa,GACF,CACf,EACD,KAAC,WAAW,IACV,KAAK,EAAE,QAAQ,EAAE,EACjB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;4BACrB,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;4BACtB,UAAU,CAAC,GAAG,CAAC,CAAC;4BAChB,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;wBACvB,CAAC,EACD,oBAAoB,QACpB,uBAAuB,QACvB,sBAAsB,EAAE,CAAC,KAAK,EAAE,EAAE;4BAChC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,sCAAsC,CAAC,IAAI,OAAO,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gCACjG,gCAAgC,CAC9B,OAAO,EACP,kBAAkB,CAAC,OAAO,EAC1B,iBAAiB,EACjB,sCAAsC,CACvC,CAAC;4BACJ,CAAC;4BAED,IAAI,sBAAsB,EAAE,CAAC;gCAC3B,sBAAsB,CAAC,KAAK,CAAC,CAAC;4BAChC,CAAC;wBACH,CAAC,EACD,aAAa,EAAE,CAAC,MAAM,EAAE,EAAE;4BACxB,IAAI,mBAAmB,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,aAAa,EAAE,CAAC;gCAC1D,0BAA0B,CAAC,QAAQ,CAAC,aAA4B,CAAC,CAAC;4BACpE,CAAC;4BAED,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC;wBAC1B,CAAC,EACD,aAAa,EAAE,EAAE,GAAG,eAAe,EAAE,GAAG,aAAa,EAAE,EACvD,OAAO,EAAE;4BACP,QAAQ;4BACR,GAAG,OAAO;yBACX,EACD,UAAU,EAAE;4BACV,oBAAoB,EAAE,kBAAkB;4BACxC,wBAAwB,EAAE,sBAAsB;4BAChD,4BAA4B,EAAE,0BAA0B;4BACxD,eAAe,EAAE,aAAa;4BAC9B,YAAY,EAAE,UAAU;4BACxB,gBAAgB,EAAE,cAAc;4BAChC,sBAAsB,EAAE,oBAAoB;4BAC5C,qBAAqB,EAAE,mBAAmB;4BAC1C,GAAG,UAAU;yBACd,KACG,IAAI,KACJ,CAAC,SAAS,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC,GACnD,EACD,aAAa,IAAI,CAChB,KAAC,WAAW,mBAAc,YAAY,YACnC,aAAa,GACF,CACf,IACO,GACoB,GACR,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;AACxC,KAAK,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;AAC1C,KAAK,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;AAC9C,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;AAClC,KAAK,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;AAChD,KAAK,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;AAChD,KAAK,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;AAC9C,KAAK,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;AAChD,KAAK,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;AAChD,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC;AACtC,KAAK,CAAC,aAAa,GAAG,eAAe,CAAC;AACtC,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC;AACtC,KAAK,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;AAClD,KAAK,CAAC,qBAAqB,GAAG,qBAAqB,CAAC;AACpD,KAAK,CAAC,qBAAqB,GAAG,qBAAqB,CAAC;AACpD,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;AAEpC,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC"}

package/dist/components/table/Table.stories.d.ts

@@ -27,6 +27,7 @@ export declare const WithValidationClassesAdded: Story;
 export declare const TidyTable: Story;
 export declare const TableWithExplicitColours: Story;
 export declare const TableWithSemanticColors: Story;
+export declare const WithDateCellEditor: Story;
 export declare const WithBooleanCellRenderer: Story;
 export declare const WithCheckboxCellRenderer: Story;
 export default meta;

package/dist/components/table/Table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAmBtD,KAAK,UAAU,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAY1B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAqJpC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8B7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA8B/B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KA0B7C,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAwB3C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA4CrC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,KAmD/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAAC,UAAU,CAsBzD,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAAC,UAAU,CAqDzD,CAAC;AA6FF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,qDAAqD,EAAE,QAAQ,CAAC,UAAU,CAqGpF,CAAC;AAEJ,eAAO,MAAM,wDAAwD,EAAE,QAAQ,CAAC,UAAU,CA0HvF,CAAC;AAEJ,eAAO,MAAM,0BAA0B,EAAE,KAkBxC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA0E1B,CAAC;AA0BF,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC;AA8BF,eAAO,MAAM,0BAA0B,EAAE,KAiBxC,CAAC;AAwJF,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAsHtC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA0DrC,CAAC;AAiCF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAiFF,eAAO,MAAM,wBAAwB,EAAE,KAetC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAmBtD,KAAK,UAAU,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAY1B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAqJpC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8B7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA8B/B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KA0B7C,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAwB3C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA4CrC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,KAmD/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAAC,UAAU,CAsBzD,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAAC,UAAU,CAqDzD,CAAC;AA6FF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,qDAAqD,EAAE,QAAQ,CAAC,UAAU,CAqGpF,CAAC;AAEJ,eAAO,MAAM,wDAAwD,EAAE,QAAQ,CAAC,UAAU,CA0HvF,CAAC;AAEJ,eAAO,MAAM,0BAA0B,EAAE,KAkBxC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA0E1B,CAAC;AA0BF,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC;AA8BF,eAAO,MAAM,0BAA0B,EAAE,KAiBxC,CAAC;AAwJF,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAsHtC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA0DrC,CAAC;AAoFF,eAAO,MAAM,kBAAkB,EAAE,KAkBhC,CAAC;AAiCF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAiFF,eAAO,MAAM,wBAAwB,EAAE,KAetC,CAAC;AAEF,eAAe,IAAI,CAAC"}