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

package/dist/components/dot/Dot.stories.js

@@ -1,25 +1,514 @@
-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 { Tag } from '../tag/Tag';
 import { Dot } from './Dot';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    'Dot is the smallest coloured indicator in the Arbor design system — a fixed 10 × 10 pixel',
+    'circle that communicates status, category, or grouping through colour. It provides the visual',
+    'primitive; the consuming application owns the semantic meaning.',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- **Inside `Tag`\'s `slotStart`** — the canonical dot-prefix pattern for category tags',
+    '  (`"Year 7"`, `"SEN"`, `"Active"`)',
+    '- **Alongside text in lists or tables** — paired with a student name, status label, or row',
+    '  description so that colour is never the sole conveyor of meaning (WCAG 1.4.1)',
+    '- **Chart or map legends** — where an adjacent label names the colour grouping',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Instead of Dot, use | When you need |',
+    '|---|---|',
+    '| [`Badge`](?path=/docs/components-badge--docs) | A numeric count: `3`, `12`, `99+` |',
+    '| [`Icon`](?path=/docs/components-icon--docs) | A recognisable glyph that conveys meaning by shape |',
+    '| [`Tag`](?path=/docs/components-tag--docs) | A text label for metadata or category |',
+    '| [`Pill`](?path=/docs/components-pill--docs) | An interactive filter toggle |',
+    '',
+    '```tsx',
+    '// BAD — Icon name="dot" is Lucide\'s 16 px dot glyph, not the design-system circle',
+    '<Icon name="dot" />',
+    '',
+    '// GOOD — Dot is always 10 × 10 and perfectly round',
+    '<Dot colour="green" />',
+    '```',
+    '',
+    '---',
+    '',
+    '### Arbor de-facto colour semantics',
+    '',
+    'The Arbor platform has established informal conventions for Dot colours. These are **not**',
+    'enforced at the design system level — your application owns the semantic mapping — but',
+    'applying them consistently improves recognition across the product.',
+    '',
+    '| Colour | Arbor convention |',
+    '|---|---|',
+    '| `green` | On track, positive attendance, active |',
+    '| `salmon` | Pupil Premium, attention needed |',
+    '| `orange` | At risk, warning |',
+    '| `purple` | SEN |',
+    '| `teal` | EAL |',
+    '| `blue` | Subject or category grouping |',
+    '| `yellow` | Active, neutral attention |',
+    '',
+    'Limit the number of distinct colours visible at once — per the Pills & Tags & Badges',
+    'Confluence guidance, fewer colours used consistently carry more meaning than a full rainbow.',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Closed API',
+    '',
+    'Dot is deliberately closed: `colour` and `label` are the only props. There is no `size`',
+    '(always 10 × 10), no `className` or `style` override, and no `onClick`. If you need a',
+    'different size or a clickable indicator, compose a different component.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    'Dot has two modes, controlled by the optional `label` prop:',
+    '',
+    '| Mode | When | Markup |',
+    '|---|---|---|',
+    '| **Decorative** (default) | Adjacent text carries the meaning | `aria-hidden="true"` — invisible to assistive technology |',
+    '| **Meaningful** | Dot is standalone with no adjacent label | `aria-label={label}` — announced by screen readers |',
+    '',
+    'The rule is simple:',
+    '',
+    '- If visible text next to the dot tells users what the colour means — omit `label`.',
+    '- If the dot is the only signal — provide `label`.',
+    '',
+    '**WCAG 1.4.1 Use of Colour**: colour alone must never be the only means of conveying',
+    'information. Either provide a `label`, or pair the dot with adjacent text that carries the',
+    'semantic weight.',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { Dot } from '@arbor-education/design-system.components';",
+    '',
+    'function MyDot(props: Dot.Props) { ... }',
+    '```',
+    '',
+    '| Type | Description |',
+    '|---|---|',
+    '| `Dot.Props` | Full props interface |',
+    "| `Dot.Colour` | `'purple' \\| 'salmon' \\| 'teal' \\| 'yellow' \\| 'green' \\| 'orange' \\| 'blue'` |",
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Tag](?path=/docs/components-tag--docs) · [Badge](?path=/docs/components-badge--docs) · [Icon](?path=/docs/components-icon--docs) · [Pill](?path=/docs/components-pill--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 DotDocsPage() {
+    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 })] }));
+}
+// ---------------------------------------------------------------------------
+// Data
+// ---------------------------------------------------------------------------
+const allColours = ['purple', 'salmon', 'teal', 'yellow', 'green', 'orange', 'blue'];
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
 const meta = {
-    tags: ['autodocs'],
     title: 'Components/Dot',
     component: Dot,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            page: DotDocsPage,
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        colour: {
+            control: 'select',
+            options: allColours,
+            description: [
+                'The background colour of the circle. **Required** — there is no default.',
+                'Establish a consistent semantic mapping in your application (e.g. green = on track,',
+                'salmon = Pupil Premium) and apply it uniformly.',
+            ].join(' '),
+            table: {
+                type: { summary: "'purple' | 'salmon' | 'teal' | 'yellow' | 'green' | 'orange' | 'blue'" },
+            },
+        },
+        label: {
+            control: 'text',
+            description: [
+                'Accessible label for the dot. When omitted (default), the dot is decorative and',
+                'invisible to assistive technology — correct when adjacent visible text carries the',
+                'meaning. When provided, the screen reader announces the label. Use this prop whenever',
+                'the dot is the sole carrier of information (no adjacent text).',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined (decorative — aria-hidden)' },
+            },
+        },
+    },
 };
 export default meta;
-export const Purple = { args: { colour: 'purple' } };
-export const Salmon = { args: { colour: 'salmon' } };
-export const Teal = { args: { colour: 'teal' } };
-export const Yellow = { args: { colour: 'yellow' } };
-export const Green = { args: { colour: 'green' } };
-export const Orange = { args: { colour: 'orange' } };
-export const Blue = { args: { colour: 'blue' } };
-export const Labeled = {
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+// ---------------------------------------------------------------------------
+// Template components for composition stories
+// (Named components avoid react-hooks lint issues — the react-hooks ESLint
+//  plugin is NOT configured in this project, so do NOT add eslint-disable.)
+// ---------------------------------------------------------------------------
+const AllColoursTemplate = () => (_jsx("div", { style: {
+        padding: 'var(--spacing-xlarge)',
+        background: 'var(--color-grey-050)',
+        borderRadius: 'var(--border-radius-small)',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 'var(--spacing-small)',
+        alignItems: 'center',
+    }, children: allColours.map(colour => (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 'var(--spacing-small)',
+        }, children: [_jsx(Dot, { colour: colour, label: colour }), _jsx("span", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: colour })] }, colour))) }));
+const DecorativeVsMeaningfulTemplate = () => (_jsxs("div", { style: {
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        gap: 'var(--spacing-xlarge)',
+        flexWrap: 'wrap',
+    }, children: [_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-large)',
+            }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Decorative (aria-hidden)" }), _jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 'var(--spacing-small)',
+                    }, children: [_jsx(Dot, { colour: "green" }), _jsx("span", { className: "ds-text", children: "Active" })] }), _jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }, children: "Screen reader: \"Active\"" }), _jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "The dot renders with no label prop. Adjacent text \"Active\" carries the full meaning \u2014 the dot is a decorative reinforcement only." })] }), _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-large)',
+            }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Meaningful (aria-label)" }), _jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 'var(--spacing-small)',
+                    }, children: _jsx(Dot, { colour: "green", label: "Active" }) }), _jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }, children: "Screen reader: \"Active\"" }), _jsxs("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: ["The dot renders with", ' ', _jsx("code", { children: "label=\"Active\"" }), ". No adjacent text \u2014 so the dot itself must carry the semantic meaning via aria-label."] })] })] }));
+const InTagContextTemplate = () => (_jsxs("div", { style: {
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        gap: 'var(--spacing-small)',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    }, children: [_jsx(Tag, { color: "blue", slotStart: _jsx(Dot, { colour: "blue" }), children: "Year 7" }), _jsx(Tag, { color: "green", slotStart: _jsx(Dot, { colour: "green" }), children: "Active" }), _jsx(Tag, { color: "purple", slotStart: _jsx(Dot, { colour: "purple" }), children: "SEN" }), _jsx(Tag, { color: "salmon", slotStart: _jsx(Dot, { colour: "salmon" }), children: "At risk" })] }));
+const InStatusListTemplate = () => (_jsxs("div", { style: {
+        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: "Today's attendance" }), _jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-small)',
+            }, children: [
+                { name: 'Ahmed Al-Rashidi', status: 'Present', colour: 'green' },
+                { name: 'Maria Santos', status: 'Present', colour: 'green' },
+                { name: 'James Okonkwo', status: 'Late', colour: 'yellow' },
+                { name: 'Chloe Patel', status: 'Medical', colour: 'teal' },
+                { name: 'Oliver Wright', status: 'Absent', colour: 'salmon' },
+            ].map(({ name, status, colour }) => (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 'var(--spacing-small)',
+                }, children: [_jsx(Dot, { colour: colour }), _jsx("span", { className: "ds-text", children: name }), _jsxs("span", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: ["\u2014", ' ', status] })] }, name))) })] }));
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
     args: {
         colour: 'purple',
-        label: 'Priority indicator',
     },
-};
-export const AllColours = {
-    render: () => (_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx(Dot, { colour: "purple" }), _jsx(Dot, { colour: "salmon" }), _jsx(Dot, { colour: "teal" }), _jsx(Dot, { colour: "yellow" }), _jsx(Dot, { colour: "green" }), _jsx(Dot, { colour: "orange" }), _jsx(Dot, { colour: "blue" })] })),
-};
+    render: args => _jsx(Dot, { ...args }),
+}, 'The interactive canvas story — every prop is wired to the **Controls** panel. Use the controls to explore all 7 colours and toggle the `label` prop to switch between decorative (`aria-hidden`) and meaningful (`aria-label`) modes. Dot is decorative by default: no `label` prop means assistive technology ignores it entirely.');
+export const AllColours = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Dot } from '@arbor-education/design-system.components';
+
+const allColours = ['purple', 'salmon', 'teal', 'yellow', 'green', 'orange', 'blue'] as const;
+
+function AllColoursTemplate() {
+  return (
+    <div
+      style={{
+        padding: 'var(--spacing-xlarge)',
+        background: 'var(--color-grey-050)',
+        borderRadius: 'var(--border-radius-small)',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 'var(--spacing-small)',
+        alignItems: 'center',
+      }}
+    >
+      {allColours.map(colour => (
+        <div
+          key={colour}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 'var(--spacing-small)',
+          }}
+        >
+          <Dot colour={colour} label={colour} />
+          <span className="ds-text" style={{ color: 'var(--color-grey-600)' }}>
+            {colour}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+export default AllColoursTemplate;
+`.trim(),
+            },
+        },
+    },
+    render: AllColoursTemplate,
+}, [
+    'All 7 `DotColour` values displayed together. The subtle grey wash (`--color-grey-050`)',
+    'background ensures 10 × 10 circles are visible against white canvas. Each dot uses',
+    '`label={colour}` here so screen readers can navigate the story sensibly — in real',
+    'usage, decorative dots paired with visible text would omit the `label` prop.',
+    '',
+    '**Note:** `DotColour` shares its 7 values with `BadgeColour` — a single colour string',
+    'works for both components without any casting.',
+].join(' '));
+export const WithAccessibleLabel = withDescription({
+    args: {
+        colour: 'purple',
+        label: 'Purple — SEN category',
+    },
+    render: args => _jsx(Dot, { ...args }),
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Dot } from '@arbor-education/design-system.components';
+
+function WithAccessibleLabelExample() {
+  return <Dot colour="purple" label="Purple — SEN category" />;
+}
+export default WithAccessibleLabelExample;
+`.trim(),
+            },
+        },
+    },
+}, [
+    'A dot with a `label` prop — rendered with `aria-label="Purple — SEN category"` and no',
+    '`aria-hidden`. A screen reader navigating to this element announces the label directly.',
+    'Use this pattern whenever the dot is the sole carrier of information — for example, a',
+    'standalone status indicator in a column with no adjacent text. When visible text is',
+    'present beside the dot, omit `label` instead (see **DecorativeVsMeaningful**).',
+].join(' '));
+export const DecorativeVsMeaningful = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Dot } from '@arbor-education/design-system.components';
+
+function DecorativeVsMeaningfulTemplate() {
+  return (
+    <div
+      style={{
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        gap: 'var(--spacing-xlarge)',
+        flexWrap: 'wrap',
+      }}
+    >
+      {/* Decorative dot — adjacent text carries meaning */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)' }}>
+          Decorative (aria-hidden)
+        </p>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }}>
+          {/* No label prop — dot is decorative because "Active" text is present */}
+          <Dot colour="green" />
+          <span className="ds-text">Active</span>
+        </div>
+        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
+          Screen reader: "Active"
+        </p>
+      </div>
+
+      {/* Meaningful dot — standalone, no adjacent text */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)' }}>
+          Meaningful (aria-label)
+        </p>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }}>
+          {/* label prop set — dot is meaningful, no adjacent text */}
+          <Dot colour="green" label="Active" />
+        </div>
+        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
+          Screen reader: "Active"
+        </p>
+      </div>
+    </div>
+  );
+}
+export default DecorativeVsMeaningfulTemplate;
+`.trim(),
+            },
+        },
+    },
+    render: DecorativeVsMeaningfulTemplate,
+}, [
+    'The core accessibility teaching story. **Left column**: a decorative dot paired with',
+    'visible text ("Active") — no `label` prop, `aria-hidden="true"`, screen reader',
+    'announces only the text. **Right column**: a standalone meaningful dot — `label="Active"`,',
+    'screen reader announces the label.',
+    '',
+    '**WCAG 1.4.1 Use of Colour**: colour alone must never be the only means of conveying',
+    'information. The rule is: if visible text next to the dot tells users what the colour means,',
+    'omit `label`. If the dot is the only signal, provide `label`.',
+].join(' '));
+export const InTagContext = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Dot, Tag } from '@arbor-education/design-system.components';
+
+function InTagContextTemplate() {
+  return (
+    <div
+      style={{
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        gap: 'var(--spacing-small)',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+      }}
+    >
+      <Tag color="blue" slotStart={<Dot colour="blue" />}>Year 7</Tag>
+      <Tag color="green" slotStart={<Dot colour="green" />}>Active</Tag>
+      <Tag color="purple" slotStart={<Dot colour="purple" />}>SEN</Tag>
+      <Tag color="salmon" slotStart={<Dot colour="salmon" />}>At risk</Tag>
+    </div>
+  );
+}
+export default InTagContextTemplate;
+`.trim(),
+            },
+        },
+    },
+    render: InTagContextTemplate,
+}, [
+    'The canonical Arbor usage pattern: `<Tag slotStart={<Dot colour="..." />}>Label</Tag>`.',
+    'All four dots are **decorative** — no `label` prop — because `Tag`\'s text children',
+    '("Year 7", "Active", "SEN", "At risk") already carry the full semantic meaning.',
+    '',
+    '`flex-shrink: 0` is built into `ds-dot`, so the circle never collapses inside',
+    '`Tag`\'s internal flex layout, even in very narrow containers.',
+    '',
+    '**Colour note:** `Tag` and `Dot` use separate colour props (`TagColor` vs `DotColour`)',
+    'but share the same 7 extended-palette values. Always match both to the same colour',
+    'for visual consistency.',
+].join(' '));
+export const InStatusList = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Dot } from '@arbor-education/design-system.components';
+
+function InStatusListTemplate() {
+  const students = [
+    { name: 'Ahmed Al-Rashidi', status: 'Present', colour: 'green' as const },
+    { name: 'Maria Santos', status: 'Present', colour: 'green' as const },
+    { name: 'James Okonkwo', status: 'Late', colour: 'yellow' as const },
+    { name: 'Chloe Patel', status: 'Medical', colour: 'teal' as const },
+    { name: 'Oliver Wright', status: 'Absent', colour: 'salmon' as const },
+  ];
+
+  return (
+    <div
+      style={{
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-large)',
+      }}
+    >
+      <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)' }}>
+        Today's attendance
+      </p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+        {students.map(({ name, status, colour }) => (
+          <div
+            key={name}
+            style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }}
+          >
+            <Dot colour={colour} />
+            <span className="ds-text">{name}</span>
+            <span className="ds-text" style={{ color: 'var(--color-grey-600)' }}>
+              — {status}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+export default InStatusListTemplate;
+`.trim(),
+            },
+        },
+    },
+    render: InStatusListTemplate,
+}, [
+    'A realistic Arbor attendance list: student name, status text, and a Dot for each row.',
+    'Most students share the same `green` dot ("Present") — only flagged entries use',
+    'different colours (`yellow` for Late, `teal` for Medical, `salmon` for Absent).',
+    '',
+    'This demonstrates the key design principle: **establish a semantic colour mapping and',
+    'apply it consistently**. A meaningful pattern — where most rows are one colour and',
+    'exceptions stand out — carries far more information than a decorative rainbow.',
+    '',
+    'All dots here are **decorative** (no `label` prop) because the adjacent name and',
+    'status text ("Ahmed Al-Rashidi — Present") carries the full meaning for every row.',
+    'WCAG 1.4.1 is satisfied by the visible text, not the colour alone.',
+].join(' '));
 //# sourceMappingURL=Dot.stories.js.map

package/dist/components/dot/Dot.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.stories.js","sourceRoot":"","sources":["../../../src/components/dot/Dot.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,IAAI,GAAqB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,GAAG;CACf,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,MAAM,GAAU,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;AAC5D,MAAM,CAAC,MAAM,MAAM,GAAU,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;AAC5D,MAAM,CAAC,MAAM,IAAI,GAAU,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;AACxD,MAAM,CAAC,MAAM,MAAM,GAAU,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;AAC5D,MAAM,CAAC,MAAM,KAAK,GAAU,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC;AAC1D,MAAM,CAAC,MAAM,MAAM,GAAU,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;AAC5D,MAAM,CAAC,MAAM,IAAI,GAAU,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;AAExD,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,oBAAoB;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,GAAG,IAAC,MAAM,EAAC,QAAQ,GAAG,EACvB,KAAC,GAAG,IAAC,MAAM,EAAC,QAAQ,GAAG,EACvB,KAAC,GAAG,IAAC,MAAM,EAAC,MAAM,GAAG,EACrB,KAAC,GAAG,IAAC,MAAM,EAAC,QAAQ,GAAG,EACvB,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,GAAG,EACtB,KAAC,GAAG,IAAC,MAAM,EAAC,QAAQ,GAAG,EACvB,KAAC,GAAG,IAAC,MAAM,EAAC,MAAM,GAAG,IACjB,CACP;CACF,CAAC"}
+{"version":3,"file":"Dot.stories.js","sourceRoot":"","sources":["../../../src/components/dot/Dot.stories.tsx"],"names":[],"mappings":"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"}