@autoguru/overdrive 4.48.0 → 4.49.0

package/dist/components/Tabs/Tabs.d.ts

@@ -10,11 +10,55 @@ interface TabsContextValue {
     getTabCount: () => number;
 }
 export declare const TabsContext: React.Context<TabsContextValue | null>;
+/**
+ * ## Tabs
+ *
+ * A tabbed interface component that manages tab navigation and content panels. The tabs system consists of several coordinated components:
+ *
+ * ### Component Structure
+ *
+ * - **Tabs** - Root container that provides context and state management
+ * - **TabList** - Container for tab navigation elements with keyboard navigation and scrolling support
+ * - **Tab** - Individual clickable tab with support for indications and custom rendering
+ * - **TabPanes** - Container for tab content panels with optional inactive rendering
+ * - **TabPane** - Individual content panel associated with each tab
+ *
+ * ### Component Props Overview
+ *
+ * #### TabList Props
+ * - `stretch?: boolean` - Whether tabs should stretch to fill available width
+ * - `scrollable?: boolean` - Enable horizontal scrolling with navigation buttons (cannot be used with stretch)
+ *
+ * #### Tab Props
+ * - `id?: string` - Custom ID for the tab element (auto-generated if not provided)
+ * - `as?: ElementType | ReactElement` - Custom component or element to render the tab as
+ * - `indication?: number` - Optional numeric badge displayed on the tab
+ *
+ * #### TabPanes Props
+ * - `renderInactivePanes?: boolean` - Whether to render inactive tab panels in the DOM (hidden but present)
+ * - `paddingTop?: string` - Top padding for the panes container (default: '6')
+ * - `paddingBottom?: string` - Bottom padding for the panes container (default: '6')
+ *
+ * #### TabPane Props
+ * - `id?: string` - Custom ID for the tab panel element (auto-generated if not provided)
+ *
+ * ### Visual Variants
+ *
+ * The `appearance` prop supports different visual styles:
+ * - `"underlined"` (default) - Tabs with bottom border indication
+ * - `"pill"`
+ * - `"minimal"`
+ */
 export interface TabsProps {
+    /** Custom ID for the tabs container. Auto-generated if not provided. */
     id?: string | null;
+    /** Index of the currently active tab (0-based) */
     active: number;
+    /** Visual appearance style for the tabs */
     appearance?: TabAppearance;
+    /** Tab navigation and content elements (typically TabList and TabPanes) */
     children?: ReactNode;
+    /** Callback fired when the active tab changes */
     onChange?: (index: number) => void;
 }
 export declare const Tabs: FunctionComponent<TabsProps>;

package/dist/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACnD,WAAW,EAAE,MAAM,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE,MAAM,WAAW,SAAS;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAuD7C,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACnD,WAAW,EAAE,MAAM,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,SAAS;IACzB,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAuD7C,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -4,6 +4,47 @@ import React, { createContext, useCallback, useMemo, useRef } from 'react';
 import { useId, useUncontrolledState } from "../../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TabsContext = /*#__PURE__*/createContext(null);
+
+/**
+ * ## Tabs
+ *
+ * A tabbed interface component that manages tab navigation and content panels. The tabs system consists of several coordinated components:
+ *
+ * ### Component Structure
+ *
+ * - **Tabs** - Root container that provides context and state management
+ * - **TabList** - Container for tab navigation elements with keyboard navigation and scrolling support
+ * - **Tab** - Individual clickable tab with support for indications and custom rendering
+ * - **TabPanes** - Container for tab content panels with optional inactive rendering
+ * - **TabPane** - Individual content panel associated with each tab
+ *
+ * ### Component Props Overview
+ *
+ * #### TabList Props
+ * - `stretch?: boolean` - Whether tabs should stretch to fill available width
+ * - `scrollable?: boolean` - Enable horizontal scrolling with navigation buttons (cannot be used with stretch)
+ *
+ * #### Tab Props
+ * - `id?: string` - Custom ID for the tab element (auto-generated if not provided)
+ * - `as?: ElementType | ReactElement` - Custom component or element to render the tab as
+ * - `indication?: number` - Optional numeric badge displayed on the tab
+ *
+ * #### TabPanes Props
+ * - `renderInactivePanes?: boolean` - Whether to render inactive tab panels in the DOM (hidden but present)
+ * - `paddingTop?: string` - Top padding for the panes container (default: '6')
+ * - `paddingBottom?: string` - Bottom padding for the panes container (default: '6')
+ *
+ * #### TabPane Props
+ * - `id?: string` - Custom ID for the tab panel element (auto-generated if not provided)
+ *
+ * ### Visual Variants
+ *
+ * The `appearance` prop supports different visual styles:
+ * - `"underlined"` (default) - Tabs with bottom border indication
+ * - `"pill"`
+ * - `"minimal"`
+ */
+
 export const Tabs = ({
   id: incomingId,
   active = 0,

package/dist/components/ToggleButtons/ToggleButtons.css.d.ts

@@ -0,0 +1,18 @@
+import { cssLayerComponent } from '../../styles/layers.css';
+export declare const toggleButtonsContainer: string;
+export declare const toggleButtonsContainerStyle: string;
+export declare const toggleButtonGroup: import("@vanilla-extract/recipes").RuntimeFn<{
+    iconOnly: {
+        true: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    color: `var(--${string})`;
+                    display: "block";
+                    lineHeight: number;
+                };
+            };
+        };
+    };
+}>;
+export declare const toggleButton: string;
+//# sourceMappingURL=ToggleButtons.css.d.ts.map

package/dist/components/ToggleButtons/ToggleButtons.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtons.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ToggleButtons/ToggleButtons.css.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAS5D,eAAO,MAAM,sBAAsB,QAAoB,CAAC;AACxD,eAAO,MAAM,2BAA2B,QAOtC,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;gBAuBzB,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;EAQJ,CAAC;AAIH,eAAO,MAAM,YAAY,QA0FvB,CAAC"}

package/dist/components/ToggleButtons/ToggleButtons.css.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/ToggleButtons/ToggleButtons.css.ts", "@autoguru/overdrive");
+import { createContainer, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { elementReset } from "../../styles/elementReset.css.js";
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { overdriveTokens as vars } from "../../themes/theme.css.js";
+import { WIDTH_COMPACT_ORIENTATION } from "./ToggleButtons.js";
+const TOGGLE_BUTTON_HEIGHT = '40px';
+export const toggleButtonsContainer = createContainer("toggleButtonsContainer");
+export const toggleButtonsContainerStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      containerName: toggleButtonsContainer,
+      containerType: 'inline-size'
+    }
+  }
+}, "toggleButtonsContainerStyle");
+export const toggleButtonGroup = recipe({
+  base: [{
+    '@layer': {
+      [cssLayerComponent]: {
+        color: vars.color.gamut.gray[500],
+        display: 'grid',
+        gridTemplateColumns: '1fr',
+        '@container': {
+          [`${toggleButtonsContainer} (min-width: ${WIDTH_COMPACT_ORIENTATION}px)`]: {
+            gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))'
+          }
+        }
+      }
+    }
+  }],
+  variants: {
+    iconOnly: {
+      true: {
+        '@layer': {
+          [cssLayerComponent]: {
+            color: vars.color.content.normal,
+            display: 'block',
+            lineHeight: 1
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    iconOnly: false
+  }
+}, "toggleButtonGroup");
+const selectorNotIconOnly = `${toggleButtonGroup.classNames.base}:not([data-icon-only])`;
+export const toggleButton = style([elementReset.button, focusOutlineStyle, sprinkles({
+  backgroundColor: 'page',
+  borderColour: 'gray',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  px: '3',
+  text: '4',
+  textWrap: 'nowrap'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      appearance: 'none',
+      color: 'inherit',
+      height: TOGGLE_BUTTON_HEIGHT,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      transitionDuration: '0.1s',
+      transitionProperty: 'background-color, border-color, box-shadow, color',
+      transitionTimingFunction: vars.animation.easing.standard,
+      userSelect: 'none',
+      selectors: {
+        '&:first-child': {
+          borderBottomLeftRadius: vars.border.radius.md,
+          borderTopLeftRadius: vars.border.radius.md
+        },
+        '&:last-child': {
+          borderBottomRightRadius: vars.border.radius.md,
+          borderTopRightRadius: vars.border.radius.md
+        },
+        '&:focus-visible': {
+          position: 'relative',
+          zIndex: 1
+        },
+        '&+&': {
+          borderLeftStyle: 'none'
+        },
+        [selectors.hoverNotDisabled]: {
+          cursor: 'pointer'
+        },
+        [selectors.hoverNotSelected]: {
+          backgroundColor: vars.color.gamut.gray[200],
+          boxShadow: 'inset 0 1px 5px 0 rgba(0, 0, 0, 0.03), inset 0 2px 2px 0 rgba(0, 0, 0, 0.03), inset 0 3px 1px -2px rgba(0, 0, 0, 0.05)',
+          transitionDelay: '50ms',
+          transitionDuration: '0.2s'
+        },
+        [selectors.selected]: {
+          backgroundColor: vars.color.surface.hard,
+          borderColor: vars.color.surface.hard,
+          color: vars.color.content.inverse
+        },
+        [selectors.disabled]: {
+          cursor: 'not-allowed',
+          opacity: 0.6
+        }
+      },
+      // Container-based responsive styles for mobile stacking (only for non-iconOnly)
+      '@container': {
+        [`${toggleButtonsContainer} (max-width: ${WIDTH_COMPACT_ORIENTATION}px)`]: {
+          selectors: {
+            [`${selectorNotIconOnly} &`]: {
+              borderLeftStyle: 'solid'
+            },
+            [`${selectorNotIconOnly} &+&`]: {
+              borderTopStyle: 'none'
+            },
+            [`${selectorNotIconOnly} &:first-child`]: {
+              borderBottomLeftRadius: 0,
+              borderTopLeftRadius: vars.border.radius.md,
+              borderTopRightRadius: vars.border.radius.md
+            },
+            [`${selectorNotIconOnly} &:last-child`]: {
+              borderBottomLeftRadius: vars.border.radius.md,
+              borderBottomRightRadius: vars.border.radius.md,
+              borderTopRightRadius: 0
+            }
+          }
+        }
+      }
+    }
+  }
+}], "toggleButton");
+__vanilla_filescope__.endFileScope();

package/dist/components/ToggleButtons/ToggleButtons.d.ts

@@ -0,0 +1,113 @@
+import type { AriaToggleButtonGroupItemProps } from '@react-types/button';
+import type { Key } from '@react-types/shared';
+import React, { type ReactNode } from 'react';
+import { type AriaToggleButtonGroupProps } from 'react-aria';
+import type { TestIdProp } from '../../types';
+import { type UseBoxProps } from '../Box/useBox/useBox';
+export interface ToggleButtonsProps extends AriaToggleButtonGroupProps, UseBoxProps, TestIdProp {
+    /**
+     * The toggle buttons to display in the group
+     * ```tsx
+     * <ToggleButton id="option1">Option 1</ToggleButton>
+     * <ToggleButton id="option2">Option 2</ToggleButton>
+     * ```
+     */
+    children: ReactNode;
+    /** Whether the buttons contain only icons (affects layout styling) */
+    iconOnly?: boolean;
+    /** Whether single or multiple selection is enabled. @default 'single' */
+    selectionMode?: 'single' | 'multiple';
+    /** Whether the collection allows empty selection. @default true */
+    disallowEmptySelection?: boolean;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: Iterable<Key>;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: Iterable<Key>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (keys: Set<Key>) => void;
+    /** Whether all toggle buttons are disabled. */
+    isDisabled?: boolean;
+    /** (_Not in use_) The orientation of the toggle button group. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const WIDTH_COMPACT_ORIENTATION = 640;
+/**
+ * ## ToggleButtons
+ *
+ * A toggle button group component that allows users to select one option from a set (multiple selection
+ * configurable). The ToggleButtons component also exports `ToggleButton` which are the child contents.
+ * Each `ToggleButton` item must be populated with an `id="[value]"` prop which is used to identify it
+ * both for default selection and in the on-change event.
+ *
+ * ### Configuration Overview
+ * - **Selection mode**: `selectionMode` - "single" or "multiple" behavior
+ * - **Default selection**: `defaultSelectedKeys` - initial selected keys as `string[]` (uncontrolled)
+ * - **Controlled mode**: `selectedKeys` + `onSelectionChange` - external state control
+ * - **Icon-only**: `iconOnly` - changes layout for single icon content (ARIA label or hidden text label required)
+ * - `disallowEmptySelection`: Prevents deselecting all options (**default**: `true`)
+ * - `isDisabled`: Disables the entire group
+ *
+ * ### Responsive Behaviour
+ * - For toggle buttons that are not `iconOnly` the layout will be vertical below tablet viewport width
+ *
+ * ### Accessibility
+ * - **Group Label**: When the button group has a label, associate it with `aria-labelledby` to and `id` on the heading text.
+ *   To add a label without a heading use `aria-label`
+ * - **Button Label**: For icons and other visual-only buttons add `aria-label` or label text within VisuallyHidden
+ *
+ * ### Selection Handling
+ * The `onSelectionChange` callback receives a `Set<Key>` containing the IDs of current selected buttons.
+ * Since a Set is not seralizable, the common approach is to convert it to an array for operations:
+ * ```tsx
+ * onSelectionChange={(keys) => {
+ *   console.log([...keys]); // Convert Set to array: ["option1", "option3"]
+ *   setSelected(new Set(keys)); // Store as Set for controlled state
+ * }}
+ * ```
+ * @example
+ * ```tsx
+ * // Uncontrolled (recommended)
+ * <ToggleButtons
+ *   defaultSelectedKeys={['confirm']}
+ *   onSelectionChange={(keys) => handleChange(keys)}
+ * >
+ *   <ToggleButton id="confirm">Confirm</ToggleButton>
+ *   <ToggleButton id="decline">Decline</ToggleButton>
+ *   <ToggleButton id="change-date">Change date</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled mode
+ * const [selected, setSelected] = useState(new Set(['list']));
+ *
+ * <ToggleButtons
+ *   selectedKeys={selected}
+ *   onSelectionChange={setSelected}
+ * >
+ *   <ToggleButton id="list">List</ToggleButton>
+ *   <ToggleButton id="grid">Grid</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon-only buttons
+ * <ToggleButtons
+ *   defaultSelectedKeys={['list']}
+ *   iconOnly
+ *   onSelectionChange={handleViewChange}
+ * >
+ *   <ToggleButton id="list" aria-label="List view">
+ *     <Icon icon={ListIcon} />
+ *   </ToggleButton>
+ *   <ToggleButton id="map" aria-label="Map view">
+ *     <Icon icon={MapIcon} />
+ *   </ToggleButton>
+ * </ToggleButtons>
+ * ```
+ */
+export declare const ToggleButtons: React.ForwardRefExoticComponent<ToggleButtonsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<AriaToggleButtonGroupItemProps<"button"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleButtons.d.ts.map

package/dist/components/ToggleButtons/ToggleButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtons.d.ts","sourceRoot":"","sources":["../../../lib/components/ToggleButtons/ToggleButtons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EAEd,MAAM,OAAO,CAAC;AACf,OAAO,EAGN,KAAK,0BAA0B,EAC/B,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIhE,MAAM,WAAW,kBAChB,SAAQ,0BAA0B,EACjC,WAAW,EACX,UAAU;IACX;;;;;;OAMG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,mEAAmE;IACnE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uFAAuF;IACvF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;AAGD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,aAAa,2FA0FzB,CAAC;AAIF,eAAO,MAAM,YAAY,oHAsCvB,CAAC"}

package/dist/components/ToggleButtons/ToggleButtons.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "disallowEmptySelection", "iconOnly", "orientation", "selectionMode"],
+  _excluded2 = ["selectedKeys", "defaultSelectedKeys", "onSelectionChange", "isDisabled", "aria-describedby", "aria-details", "aria-label", "aria-labelledby"],
+  _excluded3 = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { invariant } from '@autoguru/utilities';
+import React, { Children, forwardRef, useRef } from 'react';
+import { useToggleButtonGroup, useToggleButtonGroupItem } from 'react-aria';
+import { useToggleGroupState } from 'react-stately';
+import { useContainerWidth } from "../../hooks/index.js";
+import { mergeRefs } from "../../utils/index.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { useBox } from "../Box/useBox/useBox.js";
+import * as styles from "./ToggleButtons.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// only applies to non `iconOnly` layout
+export const WIDTH_COMPACT_ORIENTATION = 640;
+const ToggleButtonGroupContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * ## ToggleButtons
+ *
+ * A toggle button group component that allows users to select one option from a set (multiple selection
+ * configurable). The ToggleButtons component also exports `ToggleButton` which are the child contents.
+ * Each `ToggleButton` item must be populated with an `id="[value]"` prop which is used to identify it
+ * both for default selection and in the on-change event.
+ *
+ * ### Configuration Overview
+ * - **Selection mode**: `selectionMode` - "single" or "multiple" behavior
+ * - **Default selection**: `defaultSelectedKeys` - initial selected keys as `string[]` (uncontrolled)
+ * - **Controlled mode**: `selectedKeys` + `onSelectionChange` - external state control
+ * - **Icon-only**: `iconOnly` - changes layout for single icon content (ARIA label or hidden text label required)
+ * - `disallowEmptySelection`: Prevents deselecting all options (**default**: `true`)
+ * - `isDisabled`: Disables the entire group
+ *
+ * ### Responsive Behaviour
+ * - For toggle buttons that are not `iconOnly` the layout will be vertical below tablet viewport width
+ *
+ * ### Accessibility
+ * - **Group Label**: When the button group has a label, associate it with `aria-labelledby` to and `id` on the heading text.
+ *   To add a label without a heading use `aria-label`
+ * - **Button Label**: For icons and other visual-only buttons add `aria-label` or label text within VisuallyHidden
+ *
+ * ### Selection Handling
+ * The `onSelectionChange` callback receives a `Set<Key>` containing the IDs of current selected buttons.
+ * Since a Set is not seralizable, the common approach is to convert it to an array for operations:
+ * ```tsx
+ * onSelectionChange={(keys) => {
+ *   console.log([...keys]); // Convert Set to array: ["option1", "option3"]
+ *   setSelected(new Set(keys)); // Store as Set for controlled state
+ * }}
+ * ```
+ * @example
+ * ```tsx
+ * // Uncontrolled (recommended)
+ * <ToggleButtons
+ *   defaultSelectedKeys={['confirm']}
+ *   onSelectionChange={(keys) => handleChange(keys)}
+ * >
+ *   <ToggleButton id="confirm">Confirm</ToggleButton>
+ *   <ToggleButton id="decline">Decline</ToggleButton>
+ *   <ToggleButton id="change-date">Change date</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled mode
+ * const [selected, setSelected] = useState(new Set(['list']));
+ *
+ * <ToggleButtons
+ *   selectedKeys={selected}
+ *   onSelectionChange={setSelected}
+ * >
+ *   <ToggleButton id="list">List</ToggleButton>
+ *   <ToggleButton id="grid">Grid</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon-only buttons
+ * <ToggleButtons
+ *   defaultSelectedKeys={['list']}
+ *   iconOnly
+ *   onSelectionChange={handleViewChange}
+ * >
+ *   <ToggleButton id="list" aria-label="List view">
+ *     <Icon icon={ListIcon} />
+ *   </ToggleButton>
+ *   <ToggleButton id="map" aria-label="Map view">
+ *     <Icon icon={MapIcon} />
+ *   </ToggleButton>
+ * </ToggleButtons>
+ * ```
+ */
+export const ToggleButtons = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      children,
+      disallowEmptySelection = true,
+      iconOnly = false,
+      orientation: incomingOrientation,
+      selectionMode = 'single'
+    } = _ref,
+    withBoxProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+      selectedKeys,
+      defaultSelectedKeys,
+      onSelectionChange,
+      isDisabled,
+      'aria-describedby': ariaDescribedBy,
+      'aria-details': ariaDetails,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy
+    } = withBoxProps,
+    boxProps = _objectWithoutProperties(withBoxProps, _excluded2);
+  const childArray = Children.toArray(children);
+  !(childArray.length > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ToggleButtons: Must contain at least one ToggleButton child') : invariant(false) : void 0;
+  const internalRef = useRef(null);
+  const containerWidth = useContainerWidth({
+    containerRef: internalRef
+  });
+
+  // Determine orientation based on container width (not iconOnly)
+  const hasCompactLayout = !iconOnly && containerWidth > 0 && containerWidth < WIDTH_COMPACT_ORIENTATION;
+  const orientation = hasCompactLayout ? 'vertical' : incomingOrientation !== null && incomingOrientation !== void 0 ? incomingOrientation : 'horizontal';
+  const ariaProps = {
+    disallowEmptySelection,
+    defaultSelectedKeys,
+    isDisabled,
+    selectionMode,
+    onSelectionChange,
+    orientation,
+    selectedKeys,
+    'aria-describedby': ariaDescribedBy,
+    'aria-details': ariaDetails,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  const state = useToggleGroupState(ariaProps);
+  const {
+    groupProps
+  } = useToggleButtonGroup(ariaProps, state, internalRef);
+  const {
+    Component,
+    componentProps
+  } = useBox(_objectSpread(_objectSpread({}, boxProps), {}, {
+    className: !iconOnly && styles.toggleButtonsContainerStyle,
+    display: iconOnly ? 'flex' : undefined,
+    odComponent: 'toggle-buttons'
+  }));
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    ref: mergeRefs([internalRef, forwardedRef]),
+    children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({
+      className: styles.toggleButtonGroup({
+        iconOnly
+      })
+    }, groupProps), dataAttrs({
+      iconOnly
+    })), {}, {
+      children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
+        value: state,
+        children: children
+      })
+    }))
+  }));
+});
+ToggleButtons.displayName = 'ToggleButtons';
+export const ToggleButton = /*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
+  let {
+      children
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
+  const internalRef = useRef(null);
+  const state = React.useContext(ToggleButtonGroupContext);
+  !(state !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ToggleButton: Must be used within ToggleButtons component') : invariant(false) : void 0;
+  !(props.id !== undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ToggleButton: Missing required "id" prop') : invariant(false) : void 0;
+  const {
+    buttonProps,
+    isSelected
+  } = useToggleButtonGroupItem(props, state, internalRef);
+  const {
+    isDisabled
+  } = props;
+  return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread(_objectSpread({}, buttonProps), {}, {
+    className: styles.toggleButton
+  }, dataAttrs({
+    selected: isSelected,
+    disabled: isDisabled
+  })), {}, {
+    ref: mergeRefs([internalRef, forwardedRef]),
+    children: children
+  }));
+});
+ToggleButton.displayName = 'ToggleButton';

package/dist/components/ToggleButtons/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleButtons, ToggleButton, type ToggleButtonsProps, } from './ToggleButtons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ToggleButtons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/ToggleButtons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EACb,YAAY,EACZ,KAAK,kBAAkB,GACvB,MAAM,iBAAiB,CAAC"}

package/dist/components/ToggleButtons/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { ToggleButtons, ToggleButton } from "./ToggleButtons.js";

package/dist/components/index.d.ts

@@ -65,6 +65,7 @@ export * from './TextContainer';
 export * from './TextInput';
 export * from './TextLink';
 export * from './Toaster';
+export * from './ToggleButtons';
 export * from './Tooltip';
 export * from './VisuallyHidden';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -67,5 +67,6 @@ export * from "./TextContainer/index.js";
 export * from "./TextInput/index.js";
 export * from "./TextLink/index.js";
 export * from "./Toaster/index.js";
+export * from "./ToggleButtons/index.js";
 export * from "./Tooltip/index.js";
 export * from "./VisuallyHidden/index.js";

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useAnimationEvents';
 export * from './useAttachedBoxes';
+export * from './useContainerWidth';
 export * from './useDeepCompareMemo';
 export * from './useDocumentBodyStyles';
 export * from './useNegativeMargin';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -2,6 +2,7 @@
 
 export * from "./useAnimationEvents/index.js";
 export * from "./useAttachedBoxes/index.js";
+export * from "./useContainerWidth/index.js";
 export * from "./useDeepCompareMemo/index.js";
 export * from "./useDocumentBodyStyles/index.js";
 export * from "./useNegativeMargin/index.js";

package/dist/hooks/useContainerWidth/index.d.ts

@@ -0,0 +1,2 @@
+export { useContainerWidth, type UseContainerWidthProps, } from './useContainerWidth';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useContainerWidth/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useContainerWidth/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,iBAAiB,EACjB,KAAK,sBAAsB,GAC3B,MAAM,qBAAqB,CAAC"}

package/dist/hooks/useContainerWidth/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { useContainerWidth } from "./useContainerWidth.js";

package/dist/hooks/useContainerWidth/useContainerWidth.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+export interface UseContainerWidthProps {
+    containerRef: RefObject<HTMLElement>;
+    /**
+     * Debounce delay in milliseconds to prevent excessive updates during resize
+     * @default 32 (roughly 30fps)
+     */
+    debounceMs?: number;
+}
+/**
+ * Hook to observe and return the width of a container element
+ *
+ * @param containerRef - Reference to the container element to measure
+ * @param debounceMs - Debounce delay in milliseconds (default: 32ms for ~30fps)
+ * @returns Current width of the container in pixels
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const width = useContainerWidth({ containerRef });
+ *
+ * // With custom debounce
+ * const width = useContainerWidth({ containerRef, debounceMs: 100 });
+ * ```
+ */
+export declare const useContainerWidth: ({ containerRef, debounceMs, }: UseContainerWidthProps) => number;
+//# sourceMappingURL=useContainerWidth.d.ts.map

package/dist/hooks/useContainerWidth/useContainerWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerWidth.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useContainerWidth/useContainerWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAKT,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,sBAAsB;IACtC,YAAY,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,GAAI,+BAG/B,sBAAsB,KAAG,MA2D3B,CAAC"}

package/dist/hooks/useContainerWidth/useContainerWidth.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import { useLayoutEffect, useState, useRef, useCallback } from 'react';
+/**
+ * Hook to observe and return the width of a container element
+ *
+ * @param containerRef - Reference to the container element to measure
+ * @param debounceMs - Debounce delay in milliseconds (default: 32ms for ~30fps)
+ * @returns Current width of the container in pixels
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const width = useContainerWidth({ containerRef });
+ *
+ * // With custom debounce
+ * const width = useContainerWidth({ containerRef, debounceMs: 100 });
+ * ```
+ */
+export const useContainerWidth = ({
+  containerRef,
+  debounceMs = 32
+}) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const debounceRef = useRef(debounceMs);
+  const debouncedSetWidth = useCallback(newWidth => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = window.setTimeout(() => {
+      setContainerWidth(newWidth);
+    }, debounceMs);
+  }, [debounceMs]);
+  useLayoutEffect(() => {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+    const resize = () => {
+      if (containerRef.current) {
+        const newWidth = containerRef.current.getBoundingClientRect().width;
+
+        // For test environments or initial measurement, set immediately
+        if (typeof ResizeObserver === 'undefined' || containerWidth === 0) {
+          setContainerWidth(newWidth);
+        } else {
+          debouncedSetWidth(newWidth);
+        }
+      }
+    };
+
+    // Check if ResizeObserver is available (not available in some test environments)
+    if (typeof ResizeObserver === 'undefined') {
+      // Fallback for test environments - just measure once
+      resize();
+      return;
+    }
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(containerRef.current);
+
+    // Initial measurement (immediate)
+    resize();
+    return () => {
+      resizeObserver.disconnect();
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [containerRef, debouncedSetWidth, containerWidth]);
+  return containerWidth;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.48.0",
+	"version": "4.49.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -85,22 +85,22 @@
 		"@octokit/rest": "22.0.0",
 		"@popperjs/core": "2.11.8",
 		"@react-stately/toggle": "3.9.1",
-		"@storybook/addon-a11y": "9.1.5",
-		"@storybook/addon-docs": "9.1.5",
-		"@storybook/addon-links": "9.1.5",
-		"@storybook/addon-onboarding": "9.1.5",
-		"@storybook/addon-vitest": "9.1.5",
-		"@storybook/react-vite": "9.1.5",
+		"@storybook/addon-a11y": "9.1.8",
+		"@storybook/addon-docs": "9.1.8",
+		"@storybook/addon-links": "9.1.8",
+		"@storybook/addon-onboarding": "9.1.8",
+		"@storybook/addon-vitest": "9.1.8",
+		"@storybook/react-vite": "9.1.8",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "6.8.0",
 		"@testing-library/react": "16.3.0",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.6.1",
-		"@types/node": "24.4.0",
-		"@types/react": "19.1.13",
+		"@types/node": "24.6.0",
+		"@types/react": "19.1.15",
 		"@types/react-dom": "19.1.9",
 		"@types/webpack-env": "1.18.8",
-		"@typescript-eslint/utils": "8.41.0",
+		"@typescript-eslint/utils": "8.44.1",
 		"@vanilla-extract/babel-plugin": "1.2.0",
 		"@vanilla-extract/css": "1.17.4",
 		"@vanilla-extract/dynamic": "2.1.5",
@@ -110,12 +110,12 @@
 		"@vanilla-extract/webpack-plugin": "2.3.22",
 		"@vitest/browser": "3.2.4",
 		"@vitest/coverage-v8": "3.2.4",
-		"@vitest/eslint-plugin": "1.3.9",
+		"@vitest/eslint-plugin": "1.3.13",
 		"babel-plugin-add-import-extension": "1.6.0",
 		"babel-plugin-dev-expression": "0.2.3",
 		"babel-plugin-macros": "3.1.0",
-		"browserslist-config-autoguru": "2.5.1",
-		"chromatic": "13.1.4",
+		"browserslist-config-autoguru": "2.5.2",
+		"chromatic": "13.3.0",
 		"clsx": "2.1.1",
 		"colord": "2.9.3",
 		"concurrently": "9.2.1",
@@ -124,16 +124,16 @@
 		"deepmerge": "4.3.1",
 		"es-toolkit": "1.39.10",
 		"eslint": "9.34.0",
-		"eslint-plugin-storybook": "9.1.5",
+		"eslint-plugin-storybook": "9.1.8",
 		"husky": "9.1.7",
 		"intersection-observer": "0.12.2",
 		"jsdom": "26.1.0",
-		"lint-staged": "16.1.6",
+		"lint-staged": "16.2.3",
 		"magic-string": "0.30.19",
 		"mini-css-extract-plugin": "2.9.4",
 		"mockdate": "3.0.5",
-		"playwright": "1.55.0",
-		"plop": "4.0.2",
+		"playwright": "1.55.1",
+		"plop": "4.0.4",
 		"postcss": "8.5.6",
 		"prettier": "3.6.2",
 		"prop-types": "15.8.1",
@@ -148,13 +148,13 @@
 		"react-stately": "3.41.0",
 		"react-swipeable": "7.0.2",
 		"rollup-plugin-visualizer": "6.0.3",
-		"storybook": "9.1.5",
+		"storybook": "9.1.8",
 		"storybook-addon-tag-badges": "2.0.2",
 		"typescript": "5.9.2",
 		"url-loader": "4.1.1",
-		"vite": "7.1.5",
+		"vite": "7.1.7",
 		"vitest": "3.2.4",
-		"webpack": "5.101.3"
+		"webpack": "5.102.0"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": ">=1.8.8",
@@ -177,8 +177,8 @@
 		"webpack": "*"
 	},
 	"volta": {
-		"node": "22.19.0",
-		"yarn": "4.9.4"
+		"node": "22.20.0",
+		"yarn": "4.10.3"
 	},
-	"packageManager": "yarn@4.9.4"
+	"packageManager": "yarn@4.10.3"
 }