@arbor-education/design-system.components 4.7.0-alpha.0 → 4.7.1

package/src/components/filterBar/FilterBar.test.tsx

@@ -302,4 +302,54 @@ describe('FilterBar', () => {
     await user.click(screen.getByRole('button', { name: 'Remove date range filter' }));
     expect(screen.getByRole('button', { name: 'Open filter' })).toHaveFocus();
   });
+
+  test('does not stringify a non-text tag value into the accessible name', () => {
+    render(
+      <FilterBar.ActiveList
+        items={[
+          { id: 'with-label', type: 'group', label: 'Year group', value: <span>Year 10</span>, onClick: vi.fn() },
+          { id: 'without-label', type: 'sort', value: <span>Name</span>, onClick: vi.fn() },
+        ]}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open group Year group' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open sort' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /\[object Object\]/ })).not.toBeInTheDocument();
+  });
+
+  test('uses an explicit actionLabel over the derived label for a non-text tag value', () => {
+    render(
+      <>
+        <FilterBar.ActiveList
+          items={[
+            { id: 'item', type: 'group', label: 'Year group', value: <span>Year 10</span>, actionLabel: 'Open year group: Year 10', onClick: vi.fn() },
+          ]}
+        />
+        <FilterBar.Tag
+          type="sort"
+          value={<span>Name</span>}
+          actionLabel="Open sort: Name"
+          onClick={vi.fn()}
+        />
+      </>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open year group: Year 10' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open sort: Name' })).toBeInTheDocument();
+  });
+
+  test('keeps the value in the accessible name for string and number values', () => {
+    render(
+      <FilterBar.ActiveList
+        items={[
+          { id: 'text', type: 'filter', label: 'Year group', value: 'Year 10', onClick: vi.fn() },
+          { id: 'number', type: 'filter', value: 10, onClick: vi.fn() },
+        ]}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open filter Year group: Year 10' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open filter 10' })).toBeInTheDocument();
+  });
 });

package/src/components/filterBar/FilterBar.tsx

@@ -18,6 +18,7 @@ export type FilterBarTagItem = {
   icon?: IconName;
   ariaControls?: string;
   ariaExpanded?: boolean;
+  /** Accessible name for the tag button. Takes precedence over the label derived from `label` and `value`; provide it when `value` is not a string or number. */
   actionLabel?: string;
   removeLabel?: string;
   disabled?: boolean;
@@ -89,7 +90,15 @@ const getButtonA11yLabel = (type: FilterBarType, label: string, count?: number |
   return `Open ${label.toLowerCase()}. ${count} ${type} item${count === 1 ? '' : 's'} applied`;
 };
 
-const getTagActionLabel = (item: FilterBarTagItem): string => item.label ? `Open ${item.type} ${item.label}: ${item.value}` : `Open ${item.type} ${item.value}`;
+const getTagActionLabel = ({ type, label, value }: FilterBarTagItem): string => {
+  const textValue = typeof value === 'string' || typeof value === 'number' ? value : null;
+
+  if (label) {
+    return textValue === null ? `Open ${type} ${label}` : `Open ${type} ${label}: ${textValue}`;
+  }
+
+  return textValue === null ? `Open ${type}` : `Open ${type} ${textValue}`;
+};
 
 const FilterBarTagContent = ({ label, value }: Pick<FilterBarTagProps, 'label' | 'value'>) => {
   return (

package/src/components/formField/inputs/text/TextInput.tsx

@@ -12,6 +12,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
     hasError,
     className = '',
     disabled = false,
+    type = 'text',
     ...rest
   } = props;
 
@@ -30,6 +31,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
       ref={ref}
       className={inputClasses}
       disabled={disabled}
+      type={type}
       {...rest}
     />
   );

package/src/components/kpiCard/KPICard.stories.tsx

@@ -248,7 +248,7 @@ const WithProgressTemplate = () => (
   <div style={{ maxWidth: '320px' }}>
     <KPICard label="Attendance rate" value={94.2} isPercentage>
       <div style={{ marginTop: 'var(--spacing-small)' }}>
-        <Progress value={94.2} max={100} />
+        <Progress value={94.2} max={100} aria-label="Attendance rate progress" />
       </div>
     </KPICard>
   </div>
@@ -368,7 +368,7 @@ import { KPICard, Progress } from '@arbor-education/design-system.components';
 function WithProgressBarExample() {
   return (
     <KPICard label="Attendance rate" value={94.2} isPercentage>
-      <Progress value={94.2} max={100} />
+      <Progress value={94.2} max={100} aria-label="Attendance rate progress" />
     </KPICard>
   );
 }

package/src/components/sideNavigation/SideNavigation.stories.tsx

@@ -28,8 +28,10 @@ const DESCRIPTION_INTRO = [
   'SideNavigation supports two mutually exclusive APIs:',
   '',
   '1. **Data-driven** — pass an `items` array of `SideNavigation.Node` objects and let the component render the tree.',
-  '2. **Composable** — build the tree yourself from `SideNavigation.Title`, `SideNavigation.Group`, and',
-  '   `SideNavigation.Item` as JSX children.',
+  '2. **Composable** — build the tree yourself from `SideNavigation.Group` and `SideNavigation.Item` as JSX children.',
+  '',
+  'Set the visible heading with the `title` prop, which works with either API. `SideNavigation.Title` is a list',
+  'item for use *inside* `<SideNavigation>` in the composable API; do not render it outside the component.',
   '',
   '> **`items` and `children` are mutually exclusive.** If both are passed, `items` silently wins and `children`',
   '> is dropped entirely — no warning, no error.',
@@ -101,6 +103,8 @@ const DEVELOPER_NOTES = [
   '',
   '- The root renders a `<nav aria-label>` (default `"Side navigation"`) — override with a meaningful value',
   '  when a page has more than one nav landmark',
+  '- When `title` is set, the `<nav>` is named by the visible heading via `aria-labelledby`, so `ariaLabel` is',
+  '  ignored; the heading is an `<h2>` outside the list, not a child of the `<ul>`',
   '- Groups render `aria-expanded` + `aria-controls` on the toggle button, with a genuinely `aria-hidden`',
   '  child list when collapsed',
   '- The favourite button exposes `aria-pressed` and uses `favouriteTooltip` as its `aria-label` — the tooltip',

package/src/components/sideNavigation/SideNavigation.test.tsx

@@ -106,4 +106,25 @@ describe('SideNavigation', () => {
 
     expect(screen.getByText('Daily Attendance').closest('a')).toHaveAttribute('data-custom-link', 'true');
   });
+
+  test('renders the title as a heading outside the list and names the nav with it', () => {
+    render(
+      <SideNavigation
+        title="Attendance"
+        items={[{ type: 'item', id: 'daily', label: 'Daily Attendance', href: '/daily' }]}
+      />,
+    );
+
+    const nav = screen.getByRole('navigation', { name: 'Attendance' });
+    const heading = screen.getByRole('heading', { name: 'Attendance', level: 2 });
+    expect(nav).toContainElement(heading);
+    expect(heading.closest('ul')).toBeNull();
+    expect(heading).toHaveClass('ds-side-navigation__title');
+  });
+
+  test('keeps ariaLabel when no title is passed', () => {
+    render(<SideNavigation ariaLabel="Attendance navigation" items={[]} />);
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(screen.getByRole('navigation', { name: 'Attendance navigation' })).toBeInTheDocument();
+  });
 });

package/src/components/sideNavigation/SideNavigation.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
 import { SideNavigationProvider } from './SideNavigationContext.js';
 import { SideNavigationGroup } from './SideNavigationGroup.js';
@@ -19,6 +19,11 @@ import type {
 
 export type SideNavigationProps = {
   ariaLabel?: string;
+  /**
+   * Visible heading rendered above the list. It sits outside the `<ul>`, so it is valid in both
+   * APIs. When set, it names the `<nav>` via `aria-labelledby`, which takes precedence over `ariaLabel`.
+   */
+  title?: string;
   items?: SideNavigationNode[];
   renderLink?: (args: SideNavigationRenderLinkArgs) => React.ReactElement;
 } & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
@@ -52,6 +57,7 @@ function renderNodes(nodes: SideNavigationNode[]): React.ReactNode {
 const SideNavigationImpl = (props: SideNavigationProps) => {
   const {
     ariaLabel = 'Side navigation',
+    title,
     items,
     renderLink,
     className,
@@ -59,12 +65,23 @@ const SideNavigationImpl = (props: SideNavigationProps) => {
     ...rest
   } = props;
 
+  const titleId = useId();
   const contextValue = useMemo(() => ({ renderLink }), [renderLink]);
 
   return (
     <TooltipPrimitive.Provider delayDuration={400}>
       <SideNavigationProvider value={contextValue}>
-        <nav aria-label={ariaLabel} className={classNames('ds-side-navigation', className)} {...rest}>
+        <nav
+          aria-label={title ? undefined : ariaLabel}
+          aria-labelledby={title ? titleId : undefined}
+          className={classNames('ds-side-navigation', className)}
+          {...rest}
+        >
+          {title && (
+            <h2 id={titleId} className="ds-side-navigation__title">
+              {title}
+            </h2>
+          )}
           <ul className="ds-side-navigation__list">
             {items ? renderNodes(items) : children}
           </ul>

package/src/components/sideNavigation/SideNavigationTitle.tsx

@@ -6,8 +6,10 @@ export type SideNavigationTitleProps = HTMLAttributes<HTMLHeadingElement>;
 export const SideNavigationTitle = (props: SideNavigationTitleProps) => {
   const { className, children, ...rest } = props;
   return (
-    <h2 className={classNames('ds-side-navigation__title', className)} {...rest}>
-      {children}
-    </h2>
+    <li>
+      <h2 className={classNames('ds-side-navigation__title', className)} {...rest}>
+        {children}
+      </h2>
+    </li>
   );
 };

package/src/components/sidebar/Sidebar.stories.tsx

@@ -146,10 +146,7 @@ const DEVELOPER_NOTES = [
   '    </Sidebar.Item>',
   '  </Sidebar>',
   '  {panelOpen && (',
-  '    <div style={{ display: \'flex\', flexDirection: \'column\' }}>',
-  '      <SideNavigation.Title>Attendance</SideNavigation.Title>',
-  '      <SideNavigation id="side-panel" items={navItems} />',
-  '    </div>',
+  '    <SideNavigation id="side-panel" title="Attendance" items={navItems} />',
   '  )}',
   '</div>',
   '```',
@@ -398,12 +395,7 @@ const WithPanelTemplate = () => {
           <Icon name="date" size={24} />
         </SidebarItem>
       </Sidebar>
-      {open && (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <SideNavigation.Title>Attendance</SideNavigation.Title>
-          <SideNavigation id="story-panel" items={basePanelNavItems} />
-        </div>
-      )}
+      {open && <SideNavigation id="story-panel" title="Attendance" items={basePanelNavItems} />}
     </div>
   );
 };
@@ -563,12 +555,7 @@ function WithPanelExample() {
 
       {/* SideNavigation is a separate companion component — not a sub-component of Sidebar. */}
       {/* It is styled as a panel by default, so no extra wrapper class is needed. */}
-      {open && (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <SideNavigation.Title>Attendance</SideNavigation.Title>
-          <SideNavigation id="side-panel" items={navItems} />
-        </div>
-      )}
+      {open && <SideNavigation id="side-panel" title="Attendance" items={navItems} />}
     </div>
   );
 }

package/src/components/table/columnFilters/TimeFilter/TimeFilter.test.tsx

@@ -33,7 +33,7 @@ describe('TimeFilter', () => {
     expect(screen.getByRole('button', { name: /After/i })).toBeInTheDocument();
     const timeInput = container.querySelector('input[type="time"]');
     expect(timeInput).toHaveValue('14:30');
-    expect(screen.getByRole('button', { name: 'Clear this filter' })).toHaveTextContent('Reset time');
+    expect(screen.getByRole('button', { name: 'Reset time filter' })).toHaveTextContent('Reset time');
   });
 
   test('calls onModelChange when filter type changes', async () => {
@@ -61,7 +61,7 @@ describe('TimeFilter', () => {
       <TimeFilter model={{ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '14:30' }} onModelChange={onModelChange} />,
     );
     expect(screen.getByRole('button', { name: /After/i })).toBeInTheDocument();
-    const resetButton = screen.getByRole('button', { name: 'Clear this filter' });
+    const resetButton = screen.getByRole('button', { name: 'Reset time filter' });
     await userEvent.click(resetButton);
     expect(onModelChange).toHaveBeenLastCalledWith({ filterType: FILTER_TYPES.BEFORE as FilterType, pivot: '' });
     expect(screen.getByRole('button', { name: /Before/i })).toBeInTheDocument();

package/src/components/table/columnFilters/TimeFilter/TimeFilter.tsx

@@ -112,12 +112,15 @@ export const TimeFilter = (props: TimeFilterProps) => {
           />
           <input
             className="ds-column-filter-time__input"
+            aria-label="Time"
             onChange={handlePivotChange}
             type="time"
             value={pivot}
           />
         </div>
-        <FilterResetButton onClick={handleResetClick}>Reset time</FilterResetButton>
+        <FilterResetButton onClick={handleResetClick} ariaLabel="Reset time filter">
+          Reset time
+        </FilterResetButton>
       </div>
     </PopupParentContext.Provider>
   );

package/src/components/table/columnFilters/filterResetButton/FilterResetButton.tsx

@@ -2,15 +2,16 @@ import { Button } from 'Components/button/Button';
 
 type FilterResetButtonProps = {
   onClick: () => void;
+  ariaLabel?: string;
   children?: React.ReactNode;
 };
 
 export function FilterResetButton(props: FilterResetButtonProps) {
-  const { onClick, children = 'Reset' } = props;
+  const { onClick, ariaLabel, children = 'Reset' } = props;
   return (
     <Button
       className="ds-column-filter__reset-button"
-      aria-label="Clear this filter"
+      aria-label={ariaLabel}
       onClick={onClick}
       variant="secondary"
       size="S"

package/src/components/table/pagination/PageSizeSelector.tsx

@@ -59,7 +59,7 @@ export const PageSizeSelector = (props: PageSizeSelectorProps) => {
   return (
     <Dropdown>
       <Dropdown.Trigger>
-        <Button variant="dropdown" aria-label="Select page size">
+        <Button variant="dropdown" aria-label={`Page size ${selectedPageSize}`}>
           {selectedPageSize}
           <Icon name="chevron-down" />
         </Button>

package/src/components/table/pagination/Pagination.test.tsx

@@ -712,7 +712,7 @@ describe('Table Pagination', () => {
         mockGridApi as GridApi,
       );
 
-      const trigger = screen.getByLabelText('Select page size');
+      const trigger = screen.getByLabelText('Page size 100');
       await userEvent.click(trigger);
 
       // Click on a numeric option - it should be normalized to a number
@@ -789,7 +789,7 @@ describe('Table Pagination', () => {
         expect(screen.getByText('Go to next page')).toBeInTheDocument();
         expect(screen.getByText('Go to last page')).toBeInTheDocument();
 
-        expect(screen.getByLabelText('Select page size')).toBeInTheDocument();
+        expect(screen.getByLabelText(/^Page size /)).toBeInTheDocument();
       });
     });
 
@@ -831,7 +831,7 @@ describe('Table Pagination', () => {
         />,
       );
 
-      const trigger = screen.getByLabelText('Select page size');
+      const trigger = screen.getByLabelText('Page size 5');
       expect(trigger.textContent).toContain('5');
       await userEvent.click(trigger);
       expect(await screen.findByText('15')).toBeInTheDocument();

package/.changeset/twenty-groups-wonder.md

@@ -1,5 +0,0 @@
----
-"@arbor-education/design-system.components": patch
----
-
-MIS-75857 Add aria-label to match the text on a pill

package/.changeset/yellow-falcons-search.md

@@ -1,5 +0,0 @@
----
-"@arbor-education/design-system.components": patch
----
-
-MIS-70965 ⬆️ update AG-Grid to v35

package/dist/components/button/Button.story.d.ts

@@ -1,47 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-  title: string;
-  component: ({ type, size, children, onClick, disabled, className, ...props }: import('./Button.js').ButtonProps) => import('react/jsx-runtime').JSX.Element;
-  parameters: {
-    layout: string;
-  };
-  tags: string[];
-  argTypes: {
-    type: {
-      control: 'select';
-      options: string[];
-      description: string;
-    };
-    size: {
-      control: 'select';
-      options: string[];
-      description: string;
-    };
-    disabled: {
-      control: 'boolean';
-      description: string;
-    };
-    children: {
-      control: 'text';
-      description: string;
-    };
-    onClick: {
-      action: string;
-    };
-  };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Tertiary: Story;
-export declare const PrimaryDestructive: Story;
-export declare const SecondaryDestructive: Story;
-export declare const TextLink: Story;
-export declare const SmallPrimary: Story;
-export declare const SmallSecondary: Story;
-export declare const HoverState: Story;
-export declare const PressedState: Story;
-export declare const FocussedState: Story;
-export declare const Disabled: Story;
-// # sourceMappingURL=Button.story.d.ts.map

package/dist/components/button/Button.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.story.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAIF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAKlC,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/dist/components/button/Button.story.js

@@ -1,123 +0,0 @@
-import { Button } from './Button.js';
-const meta = {
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'primary-destructive',
-        'secondary-destructive',
-        'text-link',
-      ],
-      description: 'Button type/variant',
-    },
-    size: {
-      control: 'select',
-      options: ['M', 'S'],
-      description: 'Button size',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the button',
-    },
-    children: {
-      control: 'text',
-      description: 'Button text',
-    },
-    onClick: {
-      action: 'clicked',
-    },
-  },
-};
-export default meta;
-// Primary button
-export const Primary = {
-  args: {
-    type: 'primary',
-    children: 'Button Text',
-    size: 'M',
-  },
-};
-// Secondary button
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    type: 'secondary',
-  },
-};
-// Tertiary button
-export const Tertiary = {
-  args: {
-    ...Primary.args,
-    type: 'tertiary',
-  },
-};
-// Primary destructive button
-export const PrimaryDestructive = {
-  args: {
-    ...Primary.args,
-    type: 'primary-destructive',
-  },
-};
-// Secondary destructive button
-export const SecondaryDestructive = {
-  args: {
-    ...Primary.args,
-    type: 'secondary-destructive',
-  },
-};
-// Text link button
-export const TextLink = {
-  args: {
-    ...Primary.args,
-    type: 'text-link',
-  },
-};
-// Small buttons
-export const SmallPrimary = {
-  args: {
-    ...Primary.args,
-    size: 'S',
-  },
-};
-export const SmallSecondary = {
-  args: {
-    ...Secondary.args,
-    size: 'S',
-  },
-};
-// States
-export const HoverState = {
-  args: {
-    ...Primary.args,
-    state: 'hover',
-  },
-};
-export const PressedState = {
-  args: {
-    ...Primary.args,
-    state: 'pressed',
-  },
-};
-export const FocussedState = {
-  args: {
-    ...Primary.args,
-    state: 'focussed',
-  },
-};
-// Disabled button
-export const Disabled = {
-  args: {
-    ...Primary.args,
-    disabled: true,
-  },
-};
-// # sourceMappingURL=Button.story.js.map

package/dist/components/button/Button.story.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.story.js","sourceRoot":"","sources":["../../../src/components/button/Button.story.tsx"],"names":[],"mappings":"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"}

package/dist/components/button/ButtonUsageExample.d.ts

@@ -1,2 +0,0 @@
-export declare const ButtonUsageExample: () => import('react/jsx-runtime').JSX.Element;
-// # sourceMappingURL=ButtonUsageExample.d.ts.map

package/dist/components/button/ButtonUsageExample.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonUsageExample.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonUsageExample.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,+CAgF9B,CAAC"}

package/dist/components/button/ButtonUsageExample.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
-import React from 'react';
-import { Button } from './Button.js';
-// Example of using the Button component with SVG icons
-export const ButtonUsageExample = () => {
-  // You can create icon components to use with buttons
-  const InfoIcon = () => (_jsxs('svg', { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx('path', { d: 'M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx('path', { d: 'M8 10.6667V8', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx('path', { d: 'M8 5.33334H8.00667', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
-  const ChevronIcon = () => (_jsx('svg', { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx('path', { d: 'M6 12L10 8L6 4', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
-  return (_jsxs('div', { style: { display: 'flex', gap: '16px', flexDirection: 'column' }, children: [_jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary', children: 'Primary Button' }), _jsx(Button, { type: 'primary', iconLeft: _jsx(InfoIcon, {}), children: 'With Left Icon' }), _jsx(Button, { type: 'primary', iconRight: _jsx(ChevronIcon, {}), children: 'With Right Icon' }), _jsx(Button, { type: 'primary', iconLeft: _jsx(InfoIcon, {}), iconRight: _jsx(ChevronIcon, {}), children: 'With Both Icons' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'secondary', children: 'Secondary Button' }), _jsx(Button, { type: 'secondary', iconLeft: _jsx(InfoIcon, {}), children: 'With Left Icon' }), _jsx(Button, { type: 'secondary', iconRight: _jsx(ChevronIcon, {}), children: 'With Right Icon' }), _jsx(Button, { type: 'secondary', iconLeft: _jsx(InfoIcon, {}), iconRight: _jsx(ChevronIcon, {}), children: 'With Both Icons' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'tertiary', children: 'Tertiary Button' }), _jsx(Button, { type: 'tertiary', iconLeft: _jsx(InfoIcon, {}), children: 'With Left Icon' }), _jsx(Button, { type: 'tertiary', iconRight: _jsx(ChevronIcon, {}), children: 'With Right Icon' }), _jsx(Button, { type: 'tertiary', iconLeft: _jsx(InfoIcon, {}), iconRight: _jsx(ChevronIcon, {}), children: 'With Both Icons' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary-icon', iconLeft: _jsx(InfoIcon, {}) }), _jsx(Button, { type: 'secondary-icon', iconLeft: _jsx(InfoIcon, {}) }), _jsx(Button, { type: 'tertiary-icon', iconLeft: _jsx(InfoIcon, {}) })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary', size: 'S', children: 'Small Primary' }), _jsx(Button, { type: 'secondary', size: 'S', children: 'Small Secondary' }), _jsx(Button, { type: 'tertiary', size: 'S', children: 'Small Tertiary' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary-destructive', children: 'Destructive Primary' }), _jsx(Button, { type: 'secondary-destructive', children: 'Destructive Secondary' }), _jsx(Button, { type: 'secondary-destructive-icon', iconLeft: _jsx(InfoIcon, {}) })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'text-link', children: 'Text Link' }), _jsx(Button, { type: 'text-link-padding', children: 'Text Link with Padding' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary', state: 'default', children: 'Default State' }), _jsx(Button, { type: 'primary', state: 'hover', children: 'Hover State' }), _jsx(Button, { type: 'primary', state: 'pressed', children: 'Pressed State' }), _jsx(Button, { type: 'primary', state: 'focussed', children: 'Focused State' }), _jsx(Button, { type: 'primary', disabled: true, children: 'Disabled Button' })] })] }));
-};
-// # sourceMappingURL=ButtonUsageExample.js.map

package/dist/components/button/ButtonUsageExample.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonUsageExample.js","sourceRoot":"","sources":["../../../src/components/button/ButtonUsageExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/combobox/useElementWidth.d.ts

@@ -1,2 +0,0 @@
-export declare const useElementWidth: (ref: React.RefObject<HTMLElement | null>, watchKey: string) => number;
-//# sourceMappingURL=useElementWidth.d.ts.map

package/dist/components/combobox/useElementWidth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementWidth.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,UAAU,MAAM,KACf,MAkCF,CAAC"}

package/dist/components/combobox/useElementWidth.js

@@ -1,31 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from 'react';
-export const useElementWidth = (ref, watchKey) => {
-    const [measurement, setMeasurement] = useState({ width: 0, hasMeasured: false });
-    const element = ref.current;
-    const update = useCallback(() => {
-        const currentElement = ref.current;
-        if (!currentElement) {
-            setMeasurement({ width: 0, hasMeasured: true });
-            return;
-        }
-        setMeasurement({
-            width: currentElement.getBoundingClientRect().width,
-            hasMeasured: true,
-        });
-    }, [ref]);
-    useLayoutEffect(() => {
-        // Re-run measurement when callers know the element's contents/layout inputs changed.
-        update();
-    }, [update, watchKey]);
-    useLayoutEffect(() => {
-        if (!element)
-            return;
-        const observer = new ResizeObserver(update);
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-    }, [element, update]);
-    return measurement.width;
-};
-//# sourceMappingURL=useElementWidth.js.map

package/dist/components/combobox/useElementWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementWidth.js","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAwC,EACxC,QAAgB,EACR,EAAE;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;IACjF,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;IAE5B,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,cAAc,CAAC;YACb,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACnD,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,eAAe,CAAC,GAAG,EAAE;QACnB,qFAAqF;QACrF,MAAM,EAAE,CAAC;IACX,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE1B,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtB,OAAO,WAAW,CAAC,KAAK,CAAC;AAC3B,CAAC,CAAC"}