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

package/dist/components/avatar/Avatar.stories.js

@@ -1,73 +1,417 @@
-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 { Avatar } from './Avatar';
+// ---------------------------------------------------------------------------
+// Content strings
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`Avatar` displays a visual identity for a person — a photograph, a set of initials, or a',
+    'fallback silhouette — in a consistently-sized, circular container.',
+    'It is the foundational building block for staff lists, pupil profiles, message threads,',
+    'and anywhere a face or identity marker is needed across the Arbor platform.',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — adjust any prop and the canvas updates live. Try switching the `size`, clearing `src` to see initials mode, and then clearing `initials` too to see the placeholder silhouette.';
+const USAGE_GUIDANCE = [
+    '### Choosing a size',
+    '',
+    '| Size | CSS token | Typical context |',
+    '|---|---|---|',
+    '| `small` | `--avatar-small-size` | Dense lists, table rows, inline chips |',
+    '| `medium` | `--avatar-medium-size` | Standard list items, message previews (default) |',
+    '| `large` | `--avatar-large-size` | Cards, sidebars, expanded list items |',
+    '| `extra-large` | `--avatar-extra-large-size` | Profile headers, detail pages |',
+    '',
+    '---',
+    '',
+    '### When to use',
+    '',
+    '- To represent a teacher, pupil, guardian, or staff member visually.',
+    '- In lists, tables, message threads, profile headers, and contact cards.',
+    '- When a face or personal identifier makes a list row easier to scan.',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Representing organisations, schools, or non-person entities | An icon or logo |',
+    '| Purely decorative circular shapes | A styled `<span>` or CSS directly |',
+    '| When a name alone is sufficient | Plain text — no avatar needed |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Rendering priority',
+    '',
+    '`src` always wins. If you pass both `src` and `initials`, the image is rendered and',
+    'the initials are ignored. Pass both props together if you want initials as a visual',
+    'fallback — but note there is no built-in `onError` handler. If the image URL is broken,',
+    'the browser\'s default broken-image treatment shows. Handle `onError` via `...rest`',
+    'or manage `src` state externally.',
+    '',
+    '---',
+    '',
+    '### The `alt` prop serves three purposes',
+    '',
+    '| Mode | Where `alt` goes |',
+    '|---|---|',
+    '| Image | `<img alt={alt}>` |',
+    '| Initials | `<span aria-label={alt}>` around the initials text |',
+    '| Placeholder | `<span aria-label={alt \\|\\| "User avatar"}>` around the SVG |',
+    '',
+    'When `alt` is an empty string (the default) and initials mode is active, screen readers',
+    'read the raw initials text. Always set `alt` to the person\'s full name for initials and',
+    'placeholder modes.',
+    '',
+    '---',
+    '',
+    '### Avatar is an inline element',
+    '',
+    'The root renders as a `<span>` — an inline element.',
+    'When placing Avatar next to text inside a flex container, always set `alignItems: "center"`',
+    'on the wrapper so the avatar sits correctly alongside the text baseline.',
+    '',
+    '---',
+    '',
+    '### Design tokens',
+    '',
+    'Each size has its own CSS custom properties:',
+    '',
+    '```',
+    '--avatar-small-size           --avatar-small-radius',
+    '--avatar-small-color-border   --avatar-small-color-background',
+    '',
+    '--avatar-medium-size          --avatar-medium-radius',
+    '--avatar-medium-color-border  --avatar-medium-color-background',
+    '--avatar-medium-color-text    ← text colour, only defined for medium',
+    '',
+    '--avatar-large-size           --avatar-large-radius',
+    '--avatar-large-color-border   --avatar-large-color-background',
+    '',
+    '--avatar-extra-large-size     --avatar-extra-large-radius',
+    '--avatar-extra-large-color-border  --avatar-extra-large-color-background',
+    '```',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { Avatar } from '@arbor-education/design-system.components';",
+    '',
+    'type AvatarProps = Avatar.Props;',
+    "type AvatarSize  = Avatar.Size; // 'small' | 'medium' | 'large' | 'extra-large'",
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[AvatarGroup](?path=/docs/components-avatargroup--docs) · [SingleUser](?path=/docs/components-singleuser--docs)',
+].join('\n');
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function AvatarDocsPage() {
+    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/Avatar',
     component: Avatar,
     tags: ['autodocs'],
     parameters: {
-        docs: {
-            description: {
-                component: 'Renders a user avatar as a `<span>`',
-            },
-        },
+        layout: 'padded',
+        docs: { page: AvatarDocsPage },
     },
     argTypes: {
         size: {
-            control: 'select',
+            description: [
+                'Controls the diameter of the avatar.',
+                'Use `small` for dense lists, `medium` (default) for standard contexts,',
+                '`large` for cards and sidebars, and `extra-large` for profile headers.',
+                'Note: the correct value is `"extra-large"` — not `"xl"`.',
+            ].join(' '),
+            control: { type: 'select' },
             options: ['small', 'medium', 'large', 'extra-large'],
+            table: {
+                type: { summary: "'small' | 'medium' | 'large' | 'extra-large'" },
+                defaultValue: { summary: "'medium'" },
+            },
+        },
+        src: {
+            description: [
+                'URL of the person\'s photograph.',
+                'When provided, the image is rendered and `initials` is ignored entirely.',
+                'There is no built-in `onError` fallback — handle broken images externally via `...rest` or by managing `src` state.',
+            ].join(' '),
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        alt: {
+            description: [
+                'Accessible label for the avatar.',
+                'In image mode it becomes the `<img alt>` attribute.',
+                'In initials mode it becomes `aria-label` on the initials span.',
+                'In placeholder mode it becomes `aria-label` on the SVG wrapper (defaulting to `"User avatar"` when empty).',
+                'Always set this to the person\'s full name.',
+            ].join(' '),
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "''" },
+            },
+        },
+        initials: {
+            description: [
+                'Short string (typically 1–2 characters) shown when no `src` is provided.',
+                'Rendered on a coloured circular background.',
+                'Silently ignored when `src` is present.',
+            ].join(' '),
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        className: {
+            description: [
+                'Additional CSS class names applied to the root `<span>` element,',
+                'alongside the built-in `ds-avatar` and `ds-avatar--{size}` classes.',
+            ].join(' '),
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
         },
     },
 };
-export const Default = {
+export default meta;
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
+    },
+});
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
     args: {
         size: 'medium',
         src: 'https://i.pravatar.cc/150?img=1',
-        alt: 'User avatar',
+        alt: 'Amara Osei-Bonsu',
     },
-};
-export const WithInitials = {
-    args: {
-        size: 'medium',
-        initials: 'CM',
-        alt: 'Christine Montgomery',
+    render: args => _jsx(Avatar, { ...args }),
+}, 'The default story is wired to the Controls panel. Clear `src` to switch to initials mode, then clear `initials` to see the placeholder silhouette. Toggle `size` to compare the four diameter options.');
+export const WithInitials = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Avatar } from '@arbor-education/design-system.components';
+
+function WithInitialsExample() {
+  return (
+    <Avatar
+      size="medium"
+      initials="JB"
+      alt="Jacob Black"
+    />
+  );
+}
+export default WithInitialsExample;
+`.trim(),
+            },
+        },
     },
-};
-export const Placeholder = {
-    args: {
-        size: 'medium',
-        alt: 'User avatar',
+    render: () => _jsx(Avatar, { size: "medium", initials: "JB", alt: "Jacob Black" }),
+}, 'When no photo is available, pass `initials` (typically the person\'s first and last initial). The component renders them on a coloured circular background. Screen readers announce the full name from the `alt` prop rather than spelling out the raw letters.');
+export const Placeholder = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Avatar } from '@arbor-education/design-system.components';
+
+function PlaceholderExample() {
+  return (
+    <Avatar
+      size="medium"
+      alt="Unknown staff member"
+    />
+  );
+}
+export default PlaceholderExample;
+`.trim(),
+            },
+        },
     },
-};
-export const Small = {
-    args: {
-        size: 'small',
-        src: 'https://i.pravatar.cc/150?img=2',
-        alt: 'User avatar',
+    render: () => _jsx(Avatar, { size: "medium", alt: "Unknown staff member" }),
+}, 'When neither `src` nor `initials` is provided, a generic person-silhouette SVG renders. The `alt` prop becomes the `aria-label`; if `alt` is also empty it defaults to `"User avatar"`. Use this for anonymous or as-yet-unknown users.');
+export const AllRenderingModes = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Avatar } from '@arbor-education/design-system.components';
+
+function AllRenderingModesExample() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <Avatar size="medium" src="https://i.pravatar.cc/150?img=5" alt="Sarah Thompson" />
+      <Avatar size="medium" initials="MP" alt="Mrs Patel" />
+      <Avatar size="medium" alt="Unknown user" />
+    </div>
+  );
+}
+export default AllRenderingModesExample;
+`.trim(),
+            },
+        },
     },
-};
-export const Medium = {
-    args: {
-        size: 'medium',
-        src: 'https://i.pravatar.cc/150?img=3',
-        alt: 'User avatar',
+    render: () => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem' }, children: [_jsx(Avatar, { size: "medium", src: "https://i.pravatar.cc/150?img=5", alt: "Sarah Thompson" }), _jsx(Avatar, { size: "medium", initials: "MP", alt: "Mrs Patel" }), _jsx(Avatar, { size: "medium", alt: "Unknown user" })] })),
+}, 'All three rendering modes side by side at the same size: **image** (left), **initials** (centre), **placeholder** (right). All three share the same container size and shape — only the inner content differs.');
+export const AllSizes = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Avatar } from '@arbor-education/design-system.components';
+
+function AllSizesExample() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1rem' }}>
+      <Avatar size="small"       src="https://i.pravatar.cc/150?img=10" alt="Amara Osei-Bonsu" />
+      <Avatar size="medium"      src="https://i.pravatar.cc/150?img=10" alt="Amara Osei-Bonsu" />
+      <Avatar size="large"       src="https://i.pravatar.cc/150?img=10" alt="Amara Osei-Bonsu" />
+      <Avatar size="extra-large" src="https://i.pravatar.cc/150?img=10" alt="Amara Osei-Bonsu" />
+    </div>
+  );
+}
+export default AllSizesExample;
+`.trim(),
+            },
+        },
     },
-};
-export const Large = {
-    args: {
-        size: 'large',
-        src: 'https://i.pravatar.cc/150?img=4',
-        alt: 'User avatar',
+    render: () => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem', padding: '1rem' }, children: [_jsx(Avatar, { size: "small", src: "https://i.pravatar.cc/150?img=10", alt: "Amara Osei-Bonsu" }), _jsx(Avatar, { size: "medium", src: "https://i.pravatar.cc/150?img=10", alt: "Amara Osei-Bonsu" }), _jsx(Avatar, { size: "large", src: "https://i.pravatar.cc/150?img=10", alt: "Amara Osei-Bonsu" }), _jsx(Avatar, { size: "extra-large", src: "https://i.pravatar.cc/150?img=10", alt: "Amara Osei-Bonsu" })] })),
+}, 'All four sizes — `small`, `medium`, `large`, and `extra-large` — shown together. Note the correct prop value is `"extra-large"`, not `"xl"`.');
+export const ImageTakesPriorityOverInitials = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Avatar } from '@arbor-education/design-system.components';
+
+function ImagePriorityExample() {
+  // Passing both src and initials is safe — src always wins.
+  // If the image later becomes unavailable, initials act as a visual fallback.
+  return (
+    <Avatar
+      size="large"
+      src="https://i.pravatar.cc/150?img=3"
+      initials="SD"
+      alt="Mr Davies"
+    />
+  );
+}
+export default ImagePriorityExample;
+`.trim(),
+            },
+        },
     },
-};
-export const ExtraLarge = {
-    args: {
-        size: 'extra-large',
-        src: 'https://i.pravatar.cc/150?img=5',
-        alt: 'User avatar',
+    render: () => (_jsx(Avatar, { size: "large", src: "https://i.pravatar.cc/150?img=3", initials: "SD", alt: "Mr Davies" })),
+}, 'Both `src` and `initials` are passed here, but the photo always wins — initials are silently ignored when `src` is present. Passing both is a safe, intentional pattern for graceful degradation (though note there is no built-in `onError` handler for broken image URLs).');
+export const SmallInListContext = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Avatar } from '@arbor-education/design-system.components';
+
+const staffMembers = [
+  { src: 'https://i.pravatar.cc/150?img=20', initials: 'AO', name: 'Amara Osei-Bonsu', role: 'Head of Year 9' },
+  { src: 'https://i.pravatar.cc/150?img=21', initials: 'SD', name: 'Mr Davies',         role: 'Mathematics' },
+  { src: undefined,                           initials: 'NP', name: 'Mrs Patel',          role: 'Cover Supervisor' },
+  { src: undefined,                           initials: undefined, name: 'Supply Teacher', role: 'Not yet confirmed' },
+];
+
+function StaffListExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      {staffMembers.map(({ src, initials, name, role }) => (
+        <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Avatar size="small" src={src} initials={initials} alt={name} />
+          <span className="ds-text"><strong>{name}</strong> — {role}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+export default StaffListExample;
+`.trim(),
+            },
+        },
     },
-};
-export const AllSizes = {
-    render: () => (_jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [_jsx(Avatar, { size: "small", src: "https://i.pravatar.cc/150?img=6", alt: "Small avatar" }), _jsx(Avatar, { size: "medium", src: "https://i.pravatar.cc/150?img=7", alt: "Medium avatar" }), _jsx(Avatar, { size: "large", src: "https://i.pravatar.cc/150?img=8", alt: "Large avatar" }), _jsx(Avatar, { size: "extra-large", src: "https://i.pravatar.cc/150?img=9", alt: "Extra large avatar" })] })),
-};
-export default meta;
+    render: () => {
+        const staffMembers = [
+            { src: 'https://i.pravatar.cc/150?img=20', initials: 'AO', name: 'Amara Osei-Bonsu', role: 'Head of Year 9' },
+            { src: 'https://i.pravatar.cc/150?img=21', initials: 'SD', name: 'Mr Davies', role: 'Mathematics' },
+            { src: undefined, initials: 'NP', name: 'Mrs Patel', role: 'Cover Supervisor' },
+            { src: undefined, initials: undefined, name: 'Supply Teacher', role: 'Not yet confirmed' },
+        ];
+        return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: staffMembers.map(({ src, initials, name, role }) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Avatar, { size: "small", src: src, initials: initials, alt: name }), _jsxs("span", { className: "ds-text", children: [_jsx("strong", { children: name }), ' ', "\u2014", ' ', role] })] }, name))) }));
+    },
+}, 'A realistic staff list showing all three rendering modes at `small` size. The first two rows have photos, the third has initials only, and the fourth shows the placeholder silhouette. Note `alignItems: "center"` on each row — required because Avatar is an inline `<span>` element.');
+export const ExtraLargeProfile = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Avatar } from '@arbor-education/design-system.components';
+
+function ProfileHeaderExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.75rem' }}>
+      <Avatar
+        size="extra-large"
+        src="https://i.pravatar.cc/150?img=47"
+        alt="Jacob Black"
+      />
+      <div style={{ textAlign: 'center' }}>
+        <p className="ds-text"><strong>Jacob Black</strong></p>
+        <p className="ds-text">Year 10 · Form 10B</p>
+      </div>
+    </div>
+  );
+}
+export default ProfileHeaderExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.75rem' }, children: [_jsx(Avatar, { size: "extra-large", src: "https://i.pravatar.cc/150?img=47", alt: "Jacob Black" }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("p", { className: "ds-text", children: _jsx("strong", { children: "Jacob Black" }) }), _jsx("p", { className: "ds-text", children: "Year 10 \u00B7 Form 10B" })] })] })),
+}, 'The `extra-large` size (6rem / 96px) is designed for profile headers where the person\'s identity is the focal point of the view. Pair it with the person\'s full name and a short contextual label beneath.');
 //# sourceMappingURL=Avatar.stories.js.map

package/dist/components/avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,qCAAqC;aACxC;SACF;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;SACrD;KACF;CACF,CAAC;AAIF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,IAAI;QACd,GAAG,EAAE,sBAAsB;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;QACnB,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aAChE,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,cAAc,GAAG,EAChF,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,eAAe,GAAG,EAClF,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,cAAc,GAAG,EAChF,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,oBAAoB,GAAG,IACxF,CACP;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/avatarGroup/AvatarGroup.stories.d.ts

@@ -3,12 +3,14 @@ import { AvatarGroup } from './AvatarGroup';
 declare const meta: Meta<typeof AvatarGroup>;
 export default meta;
 type Story = StoryObj<typeof AvatarGroup>;
-export declare const FromProps: Story;
-export declare const SizeOverridesPerAvatar: Story;
-export declare const ComposableChildren: Story;
-export declare const ComposableChildrenDescending: Story;
-export declare const AscendingWithOverflow: Story;
-export declare const DescendingWithOverflow: Story;
+export declare const Default: Story;
+export declare const ItemsApi: Story;
+export declare const ChildrenApi: Story;
+export declare const AllSizes: Story;
+export declare const GroupSizeOverride: Story;
+export declare const WithOverflow: Story;
+export declare const DescendingOverflow: Story;
 export declare const CustomOverflowLabel: Story;
-export declare const AnnouncedOverflowUpdates: Story;
+export declare const WithAriaLabel: Story;
+export declare const LiveOverflowCounter: Story;
 //# sourceMappingURL=AvatarGroup.stories.d.ts.map

package/dist/components/avatarGroup/AvatarGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatarGroup/AvatarGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAIlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAI1C,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA0BpC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA6ChC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KA+B1C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAenC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAepC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAuBtC,CAAC"}
+{"version":3,"file":"AvatarGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatarGroup/AvatarGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAuL5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAgHlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6H1C,eAAO,MAAM,OAAO,EAAE,KAuBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA2CtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsCzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoEtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA8E/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgD1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAgHhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuCjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAiDjC,CAAC"}