@autoguru/overdrive 4.57.2 → 4.58.0

package/dist/components/Pagination/Pagination.js

@@ -1,4 +1,4 @@
-import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
+import { CaretLeftIcon, CaretRightIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
@@ -48,7 +48,7 @@ const Loading = ({
   }),
   children: [/*#__PURE__*/_jsx(NavButton, {
     disabled: true,
-    icon: ChevronLeftIcon
+    icon: CaretLeftIcon
   }), Array.from({
     length: placeholderBubblesNum
   }).fill('').map((_, index) => /*#__PURE__*/_jsx(Bubble, {
@@ -56,7 +56,7 @@ const Loading = ({
     className: styles.disabled
   }, index)), /*#__PURE__*/_jsx(NavButton, {
     disabled: true,
-    icon: ChevronRightIcon
+    icon: CaretRightIcon
   })]
 });
 export const Pagination = ({
@@ -82,7 +82,7 @@ export const Pagination = ({
     children: [/*#__PURE__*/_jsx(NavButton, {
       disabled: activePage <= 1,
       label: "navigate back",
-      icon: ChevronLeftIcon,
+      icon: CaretLeftIcon,
       onClick: handleClick(activePage - 1)
     }), buildPagesList(numPages, allowedActive, numPagesDisplayed, numPages - numPagesDisplayed).map(num => /*#__PURE__*/_jsx(Bubble, {
       gap: num < 0,
@@ -93,7 +93,7 @@ export const Pagination = ({
     }, num)), /*#__PURE__*/_jsx(NavButton, {
       disabled: activePage >= numPages,
       label: "navigate forward",
-      icon: ChevronRightIcon,
+      icon: CaretRightIcon,
       onClick: handleClick(allowedActive + 1)
     })]
   }) : /*#__PURE__*/_jsx(Loading, {

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAgBvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC"}
+{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAgBvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC"}

package/dist/components/Popover/Popover.css.js

@@ -1,10 +1,11 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Popover/Popover.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { selectors } from "../../styles/selectors.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const overlayStyle = style([sprinkles({
   borderRadius: 'md',
   borderWidth: '1',

package/dist/components/Popover/Popover.js

@@ -4,7 +4,7 @@ const _excluded = ["children"],
   _excluded2 = ["children", "offset", "state", "triggerRef", "lang"];
 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 { CloseIcon } from '@autoguru/icons';
+import { XIcon } from '@autoguru/icons';
 import React, { useRef, useEffect } from 'react';
 import { usePopover, useDialog, DismissButton, Overlay } from 'react-aria';
 import { useMedia } from "../../hooks/useMedia/useMedia.js";
@@ -99,7 +99,7 @@ export const Popover = _ref2 => {
                 onClick: state.close,
                 "aria-label": textValues.close,
                 children: /*#__PURE__*/_jsx(Icon, {
-                  icon: CloseIcon
+                  icon: XIcon
                 })
               })
             }), children]

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.css.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,cAAc,QAsCzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAiBrB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;EA2C9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC"}
+{"version":3,"file":"SearchBar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.css.ts"],"names":[],"mappings":"AAsCA,eAAO,MAAM,cAAc,QAsCzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAiBrB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;EA2C9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC"}

package/dist/components/SearchBar/SearchBar.css.js

@@ -1,11 +1,12 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/SearchBar/SearchBar.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { globalLayer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 const hideWebkitAppearance = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/SearchBar/SearchBar.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { MagnifyIcon, CloseIcon } from '@autoguru/icons';
+import { MagnifyingGlassIcon, XIcon } from '@autoguru/icons';
 import React from 'react';
 import { mergeProps, useButton, useFocusRing, useSearchField } from 'react-aria';
 import { useSearchFieldState } from 'react-stately';
@@ -74,7 +74,7 @@ export const SearchBar = componentProps => {
       "aria-label": (_componentProps$lang$ = (_componentProps$lang = componentProps.lang) === null || _componentProps$lang === void 0 ? void 0 : _componentProps$lang.clear) !== null && _componentProps$lang$ !== void 0 ? _componentProps$lang$ : defaultEnglish.clear
     }, clearButtonProps), {}, {
       children: /*#__PURE__*/_jsx(Icon, {
-        icon: CloseIcon,
+        icon: XIcon,
         size: "100%"
       })
     }));
@@ -96,7 +96,7 @@ export const SearchBar = componentProps => {
         className: sprinkles({
           flexShrink: '0'
         }),
-        icon: MagnifyIcon,
+        icon: MagnifyingGlassIcon,
         size: "large"
       }), /*#__PURE__*/_jsxs("div", {
         className: fieldWrapper,

package/dist/components/SelectInput/SelectInput.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["field", "eventHandlers", "suffixed", "prefixed", "validation", "isFocused", "isLoading", "size", "fieldIcon"];
 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 { ChevronDownIcon } from '@autoguru/icons';
+import { CaretDownIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import React from 'react';
 import { Box } from "../Box/index.js";
@@ -21,7 +21,7 @@ export const SelectInput = withEnhancedInput(_ref => {
       isFocused,
       isLoading,
       size,
-      fieldIcon = ChevronDownIcon
+      fieldIcon = CaretDownIcon
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsxs(Box, {

package/dist/components/SimplePagination/SimplePagination.js

@@ -1,4 +1,4 @@
-import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
+import { CaretLeftIcon, CaretRightIcon } from '@autoguru/icons';
 import * as React from 'react';
 import { noop } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
@@ -34,7 +34,7 @@ export const SimplePagination = ({
       onClick: handleClick(EChangeDirection.Previous),
       children: /*#__PURE__*/_jsx(Icon, {
         size: "medium",
-        icon: ChevronLeftIcon
+        icon: CaretLeftIcon
       })
     }), /*#__PURE__*/_jsx(Button, {
       rounded: true,
@@ -46,7 +46,7 @@ export const SimplePagination = ({
       onClick: handleClick(EChangeDirection.Next),
       children: /*#__PURE__*/_jsx(Icon, {
         size: "medium",
-        icon: ChevronRightIcon
+        icon: CaretRightIcon
       })
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Slider/Slider.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,eAAe,QAK1B,CAAC;AAEH,eAAO,MAAM,cAAc,QAIzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAoBhB,CAAC;AAEH,eAAO,MAAM,KAAK,QAkChB,CAAC"}
+{"version":3,"file":"Slider.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Slider/Slider.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,eAAe,QAK1B,CAAC;AAEH,eAAO,MAAM,cAAc,QAIzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAoBhB,CAAC;AAEH,eAAO,MAAM,KAAK,QAkChB,CAAC"}

package/dist/components/Slider/Slider.css.js

@@ -1,11 +1,12 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Slider/Slider.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { globalLayer, style } from '@vanilla-extract/css';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, 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";
+globalLayer(LAYER_ORDER);
 export const container = sprinkles({
   display: 'flex',
   flexDirection: 'column',

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

@@ -0,0 +1,21 @@
+/**
+ * Wrapper that joins the primary action and the menu trigger into a single
+ * visual control.
+ */
+export declare const group: string;
+/**
+ * Primary action segment (left). Only the outer (left) corners are rounded so
+ * it visually fuses with the trigger segment.
+ *
+ * The radius override lives in the `component` layer, which sits *after*
+ * `styleprops` (where the Button's base `borderRadius: 'md'` sprinkle is
+ * emitted) in `LAYER_ORDER`, so it reliably wins.
+ */
+export declare const primary: string;
+/**
+ * Menu trigger segment (right, the chevron). Only the outer (right) corners are
+ * rounded. A negative left margin collapses the adjacent 1px borders of the two
+ * bordered segments into a single divider line.
+ */
+export declare const trigger: string;
+//# sourceMappingURL=SplitButton.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SplitButton/SplitButton.css.ts"],"names":[],"mappings":"AAQA;;;GAGG;AACH,eAAO,MAAM,KAAK,QAMhB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,QAOlB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,OAAO,QAelB,CAAC"}

package/dist/components/SplitButton/SplitButton.css.js

@@ -0,0 +1,57 @@
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/SplitButton/SplitButton.css.ts", "@autoguru/overdrive");
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
+
+/**
+ * Wrapper that joins the primary action and the menu trigger into a single
+ * visual control.
+ */
+export const group = style([sprinkles({
+  display: 'flex',
+  position: 'relative',
+  width: 'fit-content'
+})], "group");
+
+/**
+ * Primary action segment (left). Only the outer (left) corners are rounded so
+ * it visually fuses with the trigger segment.
+ *
+ * The radius override lives in the `component` layer, which sits *after*
+ * `styleprops` (where the Button's base `borderRadius: 'md'` sprinkle is
+ * emitted) in `LAYER_ORDER`, so it reliably wins.
+ */
+export const primary = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      borderBottomRightRadius: 0,
+      borderTopRightRadius: 0
+    }
+  }
+}, "primary");
+
+/**
+ * Menu trigger segment (right, the chevron). Only the outer (right) corners are
+ * rounded. A negative left margin collapses the adjacent 1px borders of the two
+ * bordered segments into a single divider line.
+ */
+export const trigger = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      borderBottomLeftRadius: 0,
+      borderTopLeftRadius: 0,
+      marginLeft: `calc(-1 * ${vars.border.width['1']})`,
+      selectors: {
+        // Render the active segment above its sibling so the focus
+        // outline and overlapped border are never clipped.
+        '&:hover, &:focus-visible': {
+          zIndex: 1
+        }
+      }
+    }
+  }
+}, "trigger");
+__vanilla_filescope__.endFileScope();

package/dist/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,63 @@
+import { IconType } from '@autoguru/icons';
+import { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import type { TestIdProp } from '../../types';
+import { Button } from '../Button/Button';
+import { Flyout } from '../Flyout/Flyout';
+/**
+ * Button props shared by *both* the primary action and the menu trigger. The
+ * `children`/`onClick`/`aria-label` of the underlying buttons are managed
+ * internally, so they are omitted here.
+ */
+type SharedButtonProps = Pick<ComponentProps<typeof Button>, 'variant' | 'size' | 'disabled' | 'minimal' | 'rounded' | 'isLoading'>;
+type FlyoutProps = Pick<ComponentProps<typeof Flyout>, 'alignment'>;
+export interface SplitButtonProps extends SharedButtonProps, FlyoutProps, TestIdProp {
+    /**
+     * Text label for the primary action segment (left).
+     */
+    label: string;
+    /**
+     * Handler for the primary action. This does **not** open the menu.
+     */
+    onClick?: ComponentProps<typeof Button>['onClick'];
+    /**
+     * Menu options, typically `DropDownOption` elements.
+     */
+    children: ReactNode;
+    /**
+     * Icon shown in the menu trigger segment (right).
+     * @default CaretDownIcon
+     */
+    icon?: IconType;
+    /**
+     * Accessible label for the menu trigger segment.
+     * @default 'More options'
+     */
+    menuLabel?: string;
+    /**
+     * Controls the open state of the menu. When provided the component becomes
+     * controlled; otherwise it manages its own open state.
+     */
+    isOpen?: boolean;
+    /**
+     * Called whenever the menu requests to open or close.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * A `SplitButton` pairs a primary action with a dropdown menu of related
+ * secondary actions. The left segment triggers the primary action, while the
+ * chevron on the right opens a menu of `DropDownOption` children.
+ *
+ * Both segments share a single `variant`/`size`. Following the WAI-ARIA
+ * pattern, the two segments are independent buttons grouped together; the
+ * trigger exposes `aria-haspopup` and `aria-expanded`.
+ *
+ * @example
+ * <SplitButton label="Bulk upload" onClick={handleUpload}>
+ *   <DropDownOption label="Single upload" icon={UploadIcon} onClick={...} />
+ *   <DropDownOption label="Import CSV" onClick={...} />
+ * </SplitButton>
+ */
+export declare const SplitButton: FunctionComponent<SplitButtonProps>;
+export {};
+//# sourceMappingURL=SplitButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../../lib/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EACN,cAAc,EACd,iBAAiB,EAGjB,SAAS,EAMT,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAO1C;;;;GAIG;AACH,KAAK,iBAAiB,GAAG,IAAI,CAC5B,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CACrE,CAAC;AAEF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,gBAChB,SAAQ,iBAAiB,EACzB,WAAW,EACX,UAAU;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAiH3D,CAAC"}

package/dist/components/SplitButton/SplitButton.js

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["label", "onClick", "children", "icon", "menuLabel", "alignment", "isOpen", "onOpenChange", "testId"];
+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 { CaretDownIcon } from '@autoguru/icons';
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from "../Button/Button.js";
+import { DropDownOptionsList } from "../DropDown/DropDownOptionsList.js";
+import { Flyout } from "../Flyout/Flyout.js";
+import { Icon } from "../Icon/Icon.js";
+import { useOutsideClick } from "../OutsideClick/OutsideClick.js";
+import { EPositionerAlignment } from "../Positioner/index.js";
+import * as styles from "./SplitButton.css.js";
+/**
+ * Button props shared by *both* the primary action and the menu trigger. The
+ * `children`/`onClick`/`aria-label` of the underlying buttons are managed
+ * internally, so they are omitted here.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A `SplitButton` pairs a primary action with a dropdown menu of related
+ * secondary actions. The left segment triggers the primary action, while the
+ * chevron on the right opens a menu of `DropDownOption` children.
+ *
+ * Both segments share a single `variant`/`size`. Following the WAI-ARIA
+ * pattern, the two segments are independent buttons grouped together; the
+ * trigger exposes `aria-haspopup` and `aria-expanded`.
+ *
+ * @example
+ * <SplitButton label="Bulk upload" onClick={handleUpload}>
+ *   <DropDownOption label="Single upload" icon={UploadIcon} onClick={...} />
+ *   <DropDownOption label="Import CSV" onClick={...} />
+ * </SplitButton>
+ */
+export const SplitButton = _ref => {
+  let {
+      label,
+      onClick,
+      children,
+      icon = CaretDownIcon,
+      menuLabel = 'More options',
+      alignment = EPositionerAlignment.BOTTOM_RIGHT,
+      isOpen: controlledIsOpen,
+      onOpenChange,
+      testId
+    } = _ref,
+    sharedProps = _objectWithoutProperties(_ref, _excluded);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(false);
+
+  // Use controlled state if provided, otherwise use uncontrolled state.
+  const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+  const handleOpenChange = useCallback(newIsOpen => {
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(newIsOpen);
+    if (controlledIsOpen === undefined) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+  }, [controlledIsOpen, onOpenChange]);
+
+  // Only request a close when the menu is actually open. `useOutsideClick`
+  // fires on any mouseup outside the trigger/menu (e.g. clicking the primary
+  // action), so without this guard `onOpenChange(false)` would be emitted
+  // even when the menu is already closed.
+  const handleClose = useCallback(() => {
+    if (isOpen) handleOpenChange(false);
+  }, [isOpen, handleOpenChange]);
+  const closeAndFocusTrigger = useCallback(() => {
+    var _triggerRef$current;
+    handleClose();
+    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+  }, [handleClose]);
+  const onTriggerClick = useCallback(() => handleOpenChange(!isOpen), [isOpen, handleOpenChange]);
+  const onTriggerKeyDown = useCallback(event => {
+    if (event.key === 'Escape') closeAndFocusTrigger();
+  }, [closeAndFocusTrigger]);
+
+  // `useOutsideClick` keeps the refs array in its effect deps, so memoise it to
+  // avoid tearing down and re-binding the document `mouseup` listener on every
+  // render. The refs themselves are stable, so an empty dep list is correct.
+  const outsideClickRefs = useMemo(() => [menuRef, triggerRef], []);
+  useOutsideClick(outsideClickRefs, handleClose);
+
+  // The menu renders in a portal, so an Escape keypress while focus is inside
+  // it does not bubble to the trigger. Listen on the menu element directly so
+  // Escape closes regardless of where focus sits.
+  useEffect(() => {
+    const node = menuRef.current;
+    if (!isOpen || !node) return;
+    const onKeyDown = event => {
+      if (event.key === 'Escape') closeAndFocusTrigger();
+    };
+    node.addEventListener('keydown', onKeyDown);
+    return () => node.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, closeAndFocusTrigger]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      role: "group",
+      "aria-label": label,
+      className: styles.group,
+      "data-testid": testId,
+      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        className: styles.primary,
+        onClick: onClick,
+        children: label
+      })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        ref: triggerRef,
+        className: styles.trigger,
+        "aria-label": menuLabel,
+        "aria-haspopup": true,
+        "aria-expanded": isOpen,
+        onClick: onTriggerClick,
+        onKeyDown: onTriggerKeyDown,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: icon
+        })
+      }))]
+    }), /*#__PURE__*/_jsx(Flyout, {
+      triggerRef: triggerRef,
+      isOpen: isOpen,
+      alignment: alignment,
+      children: /*#__PURE__*/_jsx(DropDownOptionsList, {
+        ref: menuRef,
+        children: children
+      })
+    })]
+  });
+};
+SplitButton.displayName = 'SplitButton';

package/dist/components/SplitButton/default.d.ts

@@ -0,0 +1,2 @@
+export { SplitButton as default } from './SplitButton';
+//# sourceMappingURL=default.d.ts.map

package/dist/components/SplitButton/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../lib/components/SplitButton/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/SplitButton/default.js

@@ -0,0 +1 @@
+export { SplitButton as default } from "./SplitButton.js";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/SplitButton/index.js

@@ -0,0 +1 @@
+export { SplitButton } from "./SplitButton.js";

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,EAAE,QAWb,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC"}
+{"version":3,"file":"Stack.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,EAAE,QAWb,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC"}

package/dist/components/Stack/Stack.css.js

@@ -1,9 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Stack/Stack.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { gapVar } from "../../styles/vars.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const hr = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/StandardModal/StandardModal.js

@@ -1,4 +1,4 @@
-import { WindowCloseIcon } from '@autoguru/icons';
+import { XIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
@@ -114,7 +114,7 @@ export const StandardModal = ({
               className: textStyles({
                 colour: 'muted'
               }),
-              icon: WindowCloseIcon,
+              icon: XIcon,
               size: "medium"
             })
           })]

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

@@ -1 +1 @@
-{"version":3,"file":"StarRating.d.ts","sourceRoot":"","sources":["../../../lib/components/StarRating/StarRating.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAatE,oBAAY,eAAe;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;CACf;AAqBD,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,eAAe,CAgC5D,CAAC"}
+{"version":3,"file":"StarRating.d.ts","sourceRoot":"","sources":["../../../lib/components/StarRating/StarRating.tsx"],"names":[],"mappings":"AAQA,OAAO,EAA2B,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAatE,oBAAY,eAAe;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;CACf;AA8BD,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,eAAe,CAgC5D,CAAC"}

package/dist/components/StarRating/StarRating.js

@@ -1,4 +1,4 @@
-import { StarHalfIcon, StarIcon } from '@autoguru/icons';
+import { StarFilledIcon, StarHalfIcon, StarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { memo } from 'react';
@@ -20,7 +20,14 @@ var EStarType = /*#__PURE__*/function (EStarType) {
   EStarType[EStarType["Half"] = 1] = "Half";
   EStarType[EStarType["Empty"] = 2] = "Empty";
   return EStarType;
-}(EStarType || {});
+}(EStarType || {}); // In @autoguru/icons 2.x (Phosphor), `StarIcon` is the hollow outline and
+// `StarFilledIcon` is the solid star, so full ratings use the filled variant
+// while empty ratings keep the outline.
+const starIconMap = {
+  [EStarType.Full]: StarFilledIcon,
+  [EStarType.Half]: StarHalfIcon,
+  [EStarType.Empty]: StarIcon
+};
 const starSizeMap = new Map([[EStarRatingSize.Medium, 'medium'], [EStarRatingSize.Small, 'small']]);
 const labelSizeMap = new Map([[EStarRatingSize.Small, '3'], [EStarRatingSize.Medium, '4']]);
 export const StarRating = /*#__PURE__*/memo(({
@@ -80,7 +87,7 @@ const Star = ({
   size = EStarRatingSize.Medium
 }) => {
   const starType = getStarIconType(index, rating);
-  const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
+  const star = starIconMap[starType];
   return /*#__PURE__*/_jsx(Icon, {
     icon: star,
     size: starSizeMap.get(size),

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAkCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
+{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAkCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}

package/dist/components/Switch/Switch.css.js

@@ -1,9 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Switch/Switch.css.ts", "@autoguru/overdrive");
-import { style, styleVariants } from '@vanilla-extract/css';
+import { globalLayer, style, styleVariants } from '@vanilla-extract/css';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 const colorAccent = vars.colours.foreground.body;
 const colorContrast = vars.colours.background.body;
 const colorMid = vars.colours.background.neutral;

package/dist/components/Table/TableHeadCell.js

@@ -1,4 +1,4 @@
-import { SortIcon } from '@autoguru/icons';
+import { ArrowsDownUpIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef, useCallback } from 'react';
@@ -33,7 +33,7 @@ export const TableHeadCell = /*#__PURE__*/forwardRef(({
   }, [onSort]);
   const shouldSort = typeof sort === 'string';
   const sorter = /*#__PURE__*/_jsx(Icon, {
-    icon: SortIcon,
+    icon: ArrowsDownUpIcon,
     size: "small",
     className: clsx([styles.sorter.root, styles.sorter[sort !== null && sort !== void 0 ? sort : 'none']])
   });

package/dist/components/TextLink/TextLink.d.ts

@@ -20,7 +20,7 @@ export interface TextLinkProps extends FilteredAnchorProps, FilteredTextStylePro
  * <TextLink href="https://example.com">Click me</TextLink>
  *
  * // With an icon
- * <TextLink href="/settings" icon={SettingsIcon}>Settings</TextLink>
+ * <TextLink href="/settings" icon={GearIcon}>Settings</TextLink>
  * ```
  */
 export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/TextLink/TextLink.js

@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * <TextLink href="https://example.com">Click me</TextLink>
  *
  * // With an icon
- * <TextLink href="/settings" icon={SettingsIcon}>Settings</TextLink>
+ * <TextLink href="/settings" icon={GearIcon}>Settings</TextLink>
  * ```
  */
 export const TextLink = /*#__PURE__*/forwardRef((_ref, ref) => {

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

@@ -1 +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"}
+{"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;AAWzE,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"}