@autoguru/overdrive 4.40.0-next.0 → 4.40.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAMvE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;EA4GtB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Badge.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAMvE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;EA6GtB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC"}

package/dist/components/Badge/Badge.css.js

@@ -8,6 +8,7 @@ import { fontSize, fontWeight } from "../../styles/typography.css.js";
 import { themeContractVars as tokens } from "../../themes/theme.css.js";
 export const styledBadge = recipe({
   base: [{
+    display: 'inline-block',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     textTransform: 'uppercase',

package/dist/components/Badge/Badge.stories.d.ts

@@ -5,14 +5,6 @@ type Story = StoryObj<typeof Badge>;
 declare const _default: {
     title: string;
     component: ({ label, colour, look, size, className, testId, }: import("../../types").WithTestId<import("./Badge").BadgeProps>) => React.JSX.Element;
-    decorators: ((story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        label: string;
-        colour?: ("neutral" | "green" | "blue" | "yellow" | "red") | undefined;
-        className?: string | undefined;
-        look?: "standard" | "inverted" | undefined;
-        size?: "small" | "large" | "standard" | undefined;
-        testId?: string | undefined;
-    }>) => React.JSX.Element)[];
     tags: string[];
 };
 export default _default;

package/dist/components/Badge/Badge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;AAE1B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;;;;;;;;;;;;;;AAUpC,wBA0B+B;AAE/B,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAYhC,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;AAE1B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;;;;;;AAUpC,wBAI+B;AAE/B,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAiChC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,QAAQ,wCAyBnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC"}
+{"version":3,"file":"CheckBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,QAAQ,wCA0BnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC"}

package/dist/components/CheckBox/CheckBox.css.js

@@ -27,7 +27,7 @@ export const checkbox = styleVariants({
     borderWidth: borderWidth,
     zIndex: 0,
     selectors: {
-      [`${nativeInput}:not(:checked):hover ~${checkable} &`]: {
+      [`${nativeInput}:not(:checked):hover ~${checkable} &:not([data-indeterminate])`]: {
         backgroundColor: colorMid
       }
     },

package/dist/components/CheckBox/CheckBox.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface Props {
     className?: string;
     checked?: boolean;
     disabled?: boolean;
+    isIndeterminate?: boolean;
     name?: string;
     value: string;
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9C,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,gFA6CpB,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAqB,MAAM,OAAO,CAAC;AAWxE,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,gFA0DpB,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/components/CheckBox/CheckBox.js

@@ -1,10 +1,13 @@
 "use strict";
 
-import { CheckIcon } from '@autoguru/icons';
+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 { CheckIcon, MinusIcon } from '@autoguru/icons';
 import clsx from 'clsx';
-import * as React from 'react';
-import { forwardRef } from 'react';
-import { noop } from "../../utils/index.js";
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { mergeRefs, noop } from "../../utils/index.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Box } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
 import { CheckableBase } from "../private/CheckableBase/index.js";
@@ -18,12 +21,19 @@ export const CheckBox = forwardRef((_ref, ref) => {
     name = '',
     disabled = false,
     checked = false,
+    isIndeterminate = false,
     onClick = noop,
     onChange = noop,
     children
   } = _ref;
+  const internalRef = useRef(null);
+  useEffect(() => {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
   return _jsx(CheckableBase, {
-    ref: ref,
+    ref: mergeRefs([ref, internalRef]),
     inputType: "checkbox",
     className: className,
     inputName: name,
@@ -33,16 +43,19 @@ export const CheckBox = forwardRef((_ref, ref) => {
     checked: checked,
     handleClick: onClick,
     handleChange: onChange,
-    children: _jsx(Box, {
+    children: _jsx(Box, _objectSpread(_objectSpread({
       className: clsx(styles.checkbox.default, checkableIndicator, {
-        [styles.checkbox.selected]: checked
-      }),
+        [styles.checkbox.selected]: checked || isIndeterminate
+      })
+    }, dataAttrs({
+      indeterminate: isIndeterminate
+    })), {}, {
       children: _jsx(Icon, {
-        icon: CheckIcon,
+        icon: isIndeterminate ? MinusIcon : CheckIcon,
         size: "medium",
         className: styles.icon
       })
-    })
+    }))
   });
 });
 CheckBox.displayName = 'Checkbox';

package/dist/components/CheckBox/CheckBox.stories.d.ts

@@ -6,6 +6,7 @@ export default meta;
 type Story = StoryObj<typeof CheckBox>;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const Indeterminate: Story;
 export declare const List: {
     render: ({ disabled, onChange }: {
         disabled: any;

package/dist/components/CheckBox/CheckBox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAU7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAgC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;CAwChB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAeF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA8BpC,CAAC"}
+{"version":3,"file":"CheckBox.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAU7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA+C/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAOF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;CAwChB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAeF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA8BpC,CAAC"}

package/dist/components/Columns/Columns.stories.d.ts

@@ -208,6 +208,8 @@ declare const _default: {
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -414,6 +416,8 @@ declare const _default: {
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
@@ -642,6 +646,8 @@ declare const _default: {
         popoverTarget?: import("@storybook/core/csf").InputType | undefined;
         inert?: import("@storybook/core/csf").InputType | undefined;
         inputMode?: import("@storybook/core/csf").InputType | undefined;
+        exportparts?: import("@storybook/core/csf").InputType | undefined;
+        part?: import("@storybook/core/csf").InputType | undefined;
         "aria-activedescendant"?: import("@storybook/core/csf").InputType | undefined;
         "aria-atomic"?: import("@storybook/core/csf").InputType | undefined;
         "aria-autocomplete"?: import("@storybook/core/csf").InputType | undefined;
@@ -846,6 +852,8 @@ declare const _default: {
         onLostPointerCaptureCapture?: import("@storybook/core/csf").InputType | undefined;
         onScroll?: import("@storybook/core/csf").InputType | undefined;
         onScrollCapture?: import("@storybook/core/csf").InputType | undefined;
+        onScrollEnd?: import("@storybook/core/csf").InputType | undefined;
+        onScrollEndCapture?: import("@storybook/core/csf").InputType | undefined;
         onWheel?: import("@storybook/core/csf").InputType | undefined;
         onWheelCapture?: import("@storybook/core/csf").InputType | undefined;
         onAnimationStart?: import("@storybook/core/csf").InputType | undefined;

package/dist/components/Columns/Columns.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;;;+EAkClC,6CACV;;;;;;;;;;;;;;;;;sFAgBU,6CAAgB;oFAI/B,6CACC;qFAPY,6CACL;mFAJW,6CACR;;;uFAbW,6CAExB;qFAGO,6CAEN;sFAXU,6CAEV;oFALO,6CACI;;;;;;;qFAiCH,8CACJ,SAAS;;gFApBQ,6CAAgB;;iFA3BhC,6CACG;;;;;;;;;;;;;;;;;;;;;;;kFAES,6CAGhB;kFAEC,6CACD;iFAmBgB,6CACL;iFAAkC,6CAAgB;sFAmBxC,8CAAiB,SACrC;sFAIE,8CAAiB,SAAS;wFAErB,8CACP,SAAS;0FAEO,8CACJ,SAAS;2FACa,8CAElC,SACD;yFAEoB,8CAAiB,SAAS;6BAEvC,yDACS,OACb;8BACQ,yDACY,OAAO;8BACT,yDAEnB,OACH;gCAEI,yDAGiB,OAAO;kCAA4B,yDAExD,OAAO;mCAEA,yDACS,OACb;iCACW,yDACY,OACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjGF,wBAkCiC;AA8HjC,eAAO,MAAM,QAAQ,qKAA+B,CAAC;AAQrD,eAAO,MAAM,cAAc,oKAA2C,CAAC"}
+{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;;;+EAkClC,6CACV;;;;;;;;;;;;;;;;;sFAgBU,6CAAgB;oFAI/B,6CACC;qFAPY,6CACL;mFAJW,6CACR;;;uFAbW,6CAExB;qFAGO,6CAEN;sFAXU,6CAEV;oFALO,6CACI;;;;;;;qFAiCH,8CACJ,SAAS;;gFApBQ,6CAAgB;;iFA3BhC,6CACG;;;;;;;;;;;;;;;;;;;;;;;kFAES,6CAGhB;kFAEC,6CACD;iFAmBgB,6CACL;iFAAkC,6CAAgB;sFAmBxC,8CAAiB,SACrC;sFAIE,8CAAiB,SAAS;wFAErB,8CACP,SAAS;0FAEO,8CACJ,SAAS;2FACa,8CAElC,SACD;yFAEoB,8CAAiB,SAAS;6BAEvC,yDACS,OACb;8BACQ,yDACY,OAAO;8BACT,yDAEnB,OACH;gCAEI,yDAGiB,OAAO;kCAA4B,yDAExD,OAAO;mCAEA,yDACS,OACb;iCACW,yDACY,OACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjGF,wBAkCiC;AA8HjC,eAAO,MAAM,QAAQ,qKAA+B,CAAC;AAQrD,eAAO,MAAM,cAAc,oKAA2C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;AAE/E,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CA6BzC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;AAE/E,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CA4BzC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Icon/Icon.js

@@ -16,20 +16,21 @@ export const Icon = _ref => {
     display = 'block'
   } = _ref;
   useNullCheck(icon, 'Icon component received an empty icon prop.');
+  const iconElement = cloneElement(icon, {
+    className: useBoxStyles({
+      as: 'svg',
+      display: 'block',
+      width: 'full',
+      height: 'full'
+    }),
+    'aria-label': (_icon$props$ariaLabe = icon.props['aria-label']) !== null && _icon$props$ariaLabe !== void 0 ? _icon$props$ariaLabe : undefined,
+    'aria-hidden': icon.props['aria-label'] ? undefined : true
+  });
   return _jsx(Box, {
-    as: "div",
+    as: "span",
     display: display,
     className: [resolveResponsiveStyle(size, styles.size), className],
-    children: icon ? cloneElement(icon, {
-      className: useBoxStyles({
-        as: 'svg',
-        display: 'block',
-        width: 'full',
-        height: 'full'
-      }),
-      'aria-label': (_icon$props$ariaLabe = icon.props['aria-label']) !== null && _icon$props$ariaLabe !== void 0 ? _icon$props$ariaLabe : undefined,
-      'aria-hidden': icon.props['aria-label'] ? undefined : true
-    }) : '⬤'
+    children: icon ? iconElement : '⬤'
   });
 };
 export default Icon;

package/dist/components/LoadingBox/LoadingBox.stories.d.ts

@@ -210,6 +210,8 @@ declare const _default: {
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -416,6 +418,8 @@ declare const _default: {
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;

package/dist/components/LoadingBox/LoadingBox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBox.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/LoadingBox/LoadingBox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;sFAiCgU,6CAAgB;oFAAqC,6CAAgB;qFAA5H,6CAAgB;mFAAtE,6CAAgB;;;uFAJhQ,6CACO;qFAGU,6CAAgB;sFAT1B,6CAEP;oFAJF,6CAAe;;;;;;;qFAWyiB,8CAAiB,SAAS;gFAAxf,6CAAgB;;iFArB9D,6CAC/B;;;;;;;;;;;;;;;;;;;;;;;kFACW,6CAEtB;kFAAmC,6CAE3B;iFAekI,6CAAgB;iFAAkC,6CAAgB;sFAA2a,8CAAiB,SAAS;sFAAuC,8CAAiB,SAAS;wFAAyC,8CAAiB,SAAS;0FAA2C,8CAAiB,SAAS;2FAA4C,8CAAiB,SAAS;yFAA0C,8CAAiB,SAAS;6BAAyB,yDAAiC,OAAO;8BAAwB,yDAAiC,OAAO;8BAAwB,yDAAiC,OAAO;gCAA0B,yDAAiC,OAAO;kCAA4B,yDAAiC,OAAO;mCAA6B,yDAAiC,OAAO;iCAA2B,yDAAiC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/Br7C,wBAYoC;AAEpC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC"}
+{"version":3,"file":"LoadingBox.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/LoadingBox/LoadingBox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;sFAiCgU,6CAAgB;oFAAqC,6CAAgB;qFAA5H,6CAAgB;mFAAtE,6CAAgB;;;uFAJhQ,6CACO;qFAGU,6CAAgB;sFAT1B,6CAEP;oFAJF,6CAAe;;;;;;;qFAWyiB,8CAAiB,SAAS;gFAAxf,6CAAgB;;iFArB9D,6CAC/B;;;;;;;;;;;;;;;;;;;;;;;kFACW,6CAEtB;kFAAmC,6CAE3B;iFAekI,6CAAgB;iFAAkC,6CAAgB;sFAA2a,8CAAiB,SAAS;sFAAuC,8CAAiB,SAAS;wFAAyC,8CAAiB,SAAS;0FAA2C,8CAAiB,SAAS;2FAA4C,8CAAiB,SAAS;yFAA0C,8CAAiB,SAAS;6BAAyB,yDAAiC,OAAO;8BAAwB,yDAAiC,OAAO;8BAAwB,yDAAiC,OAAO;gCAA0B,yDAAiC,OAAO;kCAA4B,yDAAiC,OAAO;mCAA6B,yDAAiC,OAAO;iCAA2B,yDAAiC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/Br7C,wBAYoC;AAEpC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC"}

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

@@ -1,7 +1,45 @@
-export declare const root: {
-    default: string;
-    active: string;
-};
+export declare const styledTab: import("@vanilla-extract/recipes").RuntimeFn<{
+    appearance: {
+        underlined: {
+            borderBottom: "calc(1px + 1px) solid transparent";
+            padding: `calc(var(--${string}) + 1px) var(--${string})` | `calc(var(--${string}) + 1px) var(--${string}, ${string})` | `calc(var(--${string}) + 1px) var(--${string}, ${number})` | `calc(var(--${string}, ${string}) + 1px) var(--${string})` | `calc(var(--${string}, ${string}) + 1px) var(--${string}, ${string})` | `calc(var(--${string}, ${string}) + 1px) var(--${string}, ${number})` | `calc(var(--${string}, ${number}) + 1px) var(--${string})` | `calc(var(--${string}, ${number}) + 1px) var(--${string}, ${string})` | `calc(var(--${string}, ${number}) + 1px) var(--${string}, ${number})`;
+            ':focus-visible': {
+                outlineOffset: "-1px";
+            };
+        };
+        pill: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+            selectors: {
+                '&+&': {
+                    marginLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                '&:not([aria-selected=true]):hover': {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    };
+    active: {
+        true: {};
+    };
+}>;
 export declare const item: string;
-export declare const indication: Record<"default" | "active", string>;
+export declare const indication: import("@vanilla-extract/recipes").RuntimeFn<{
+    appearance: {
+        underlined: {};
+        pill: {
+            selectors: {
+                [x: string]: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    };
+    active: {
+        true: {};
+    };
+}>;
 //# sourceMappingURL=Tab.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,IAAI;;;CAqBhB,CAAC;AAEF,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,UAAU,sCAWrB,CAAC"}
+{"version":3,"file":"Tab.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;EAqDrB,CAAC"}

package/dist/components/Tabs/Tab.css.js

@@ -5,47 +5,125 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Tabs/Tab.css.ts", "@autoguru/overdrive");
 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 { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { themeContractVars as vars } from "../../themes/theme.css.js";
 import { focusOutline } from "./../../styles/focusOutline.css.js";
 const lineBottomHeight = '1px';
 const size = '20px';
-export const root = {
-  default: style({
-    padding: `calc(${vars.space['3']} + ${lineBottomHeight}) ${vars.space['4']}`,
-    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-    borderBottom: `calc(${lineBottomHeight} + ${lineBottomHeight}) solid transparent`,
+export const styledTab = recipe({
+  base: {
     flex: 'auto',
-    ':last-of-type': {
-      marginRight: 0
+    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
+    ':focus-visible': _objectSpread({}, focusOutline),
+    selectors: {
+      '&:not([aria-selected=true]):hover': {
+        color: vars.colours.foreground.body
+      }
+    }
+  },
+  variants: {
+    appearance: {
+      underlined: {
+        borderBottom: `calc(${lineBottomHeight} + ${lineBottomHeight}) solid transparent`,
+        padding: `calc(${vars.space['3']} + ${lineBottomHeight}) ${vars.space['4']}`,
+        ':focus-visible': {
+          outlineOffset: '-1px'
+        }
+      },
+      pill: {
+        borderRadius: vars.border.radius.pill,
+        color: vars.colours.foreground.body,
+        fontWeight: vars.typography.fontWeight.normal,
+        padding: `${vars.space['2']} ${vars.space['4']}`,
+        selectors: {
+          '&+&': {
+            marginLeft: vars.space['3']
+          },
+          '&:not([aria-selected=true]):hover': {
+            backgroundColor: vars.colours.gamut.gray200
+          }
+        }
+      }
+    },
+    active: {
+      true: {}
+    }
+  },
+  compoundVariants: [{
+    variants: {
+      appearance: 'underlined',
+      active: true
     },
-    ':hover': {
-      color: vars.colours.intent.neutral.background.strong
+    style: {
+      color: vars.colours.intent.neutral.background.strong,
+      borderBottomColor: vars.colours.intent.neutral.background.strong
+    }
+  }, {
+    variants: {
+      appearance: 'pill',
+      active: true
     },
-    ':focus-visible': _objectSpread(_objectSpread({}, focusOutline), {}, {
-      outlineOffset: '-2px'
-    })
-  }, "root_default"),
-  active: style({
-    color: vars.colours.intent.neutral.background.strong,
-    borderBottomColor: vars.colours.intent.neutral.background.strong
-  }, "root_active")
-};
+    style: {
+      backgroundColor: vars.colours.foreground.body,
+      color: vars.colours.background.body
+    }
+  }],
+  defaultVariants: {
+    appearance: 'underlined'
+  }
+}, "styledTab");
 export const item = style({
   display: 'inline-flex',
   width: 'max-content',
   verticalAlign: 'middle'
 }, "item");
-export const indication = styleVariants({
-  default: {
+export const indication = recipe({
+  base: [{
     backgroundColor: vars.colours.background.light,
+    borderRadius: vars.border.radius.pill,
+    display: 'inline-block',
     minWidth: size,
     height: size,
+    padding: `0 ${vars.space['1']}`,
     lineHeight: size,
     transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, backgroundColor 0.2s ${vars.animation.easing.decelerate} 0s`
+  }],
+  variants: {
+    appearance: {
+      underlined: {},
+      pill: {
+        selectors: {
+          [`${styledTab.classNames.base}:not([aria-selected=true]):hover &`]: {
+            backgroundColor: vars.colours.background.neutral
+          }
+        }
+      }
+    },
+    active: {
+      true: {}
+    }
   },
-  active: {
-    backgroundColor: vars.colours.intent.neutral.background.strong
+  compoundVariants: [{
+    variants: {
+      appearance: 'underlined',
+      active: true
+    },
+    style: {
+      backgroundColor: vars.colours.intent.neutral.background.strong
+    }
+  }, {
+    variants: {
+      appearance: 'pill',
+      active: true
+    },
+    style: {
+      backgroundColor: vars.colours.background.light,
+      color: vars.colours.foreground.body
+    }
+  }],
+  defaultVariants: {
+    appearance: 'underlined'
   }
 }, "indication");
 __vanilla_filescope__.endFileScope();

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,8EAsFf,CAAC;AAIF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,8EA+Ef,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/dist/components/Tabs/Tab.js

@@ -21,28 +21,26 @@ export const Tab = forwardRef((_ref, ref) => {
   const tabsContext = useContext(TabsContext);
   const tabListContext = useContext(TabListContext);
   !(tabsContext !== null && tabListContext !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'This tab pane isnt nested beneath <Tabs /> or <TabPanes />>') : invariant(false) : void 0;
+  const {
+    appearance
+  } = tabsContext;
   const isActive = tabsContext.activeIndex === tabListContext;
-  const indicationStyles = useBoxStyles({
-    display: 'inlineBlock',
-    paddingX: '1',
-    borderRadius: 'pill'
-  });
   const controlsId = typeof incomingId === 'string' ? incomingId : `${tabsContext.id}-${tabListContext}-tab`;
   const props = {
     className: clsx(useBoxStyles({
       is: typeof Component === 'string' ? Component : 'button',
       display: 'inlineFlex',
       justifyContent: 'center',
-      backgroundColour: 'transparent',
-      marginRight: '6'
+      backgroundColour: 'transparent'
     }), useTextStyles({
       noWrap: true,
       size: '3',
       fontWeight: 'bold',
       colour: 'light'
-    }), styles.root.default, {
-      [styles.root.active]: isActive
-    }),
+    }), styles.styledTab({
+      appearance,
+      active: isActive
+    })),
     role: 'tab',
     'aria-selected': isActive ? 'true' : 'false',
     'data-controls': controlsId,
@@ -68,8 +66,9 @@ export const Tab = forwardRef((_ref, ref) => {
       align: "center",
       display: "block",
       colour: isActive ? 'white' : 'dark',
-      className: clsx(styles.indication.default, indicationStyles, {
-        [styles.indication.active]: isActive
+      className: styles.indication({
+        appearance,
+        active: isActive
       }),
       children: indication
     })]

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

@@ -1,3 +1,17 @@
-export declare const root: Record<"scroll" | "default", string>;
+export declare const styledTabList: import("@vanilla-extract/recipes").RuntimeFn<{
+    appearance: {
+        underlined: {
+            boxShadow: `inset 0 -1px 0 0 var(--${string})` | `inset 0 -1px 0 0 var(--${string}, ${string})` | `inset 0 -1px 0 0 var(--${string}, ${number})`;
+        };
+        pill: {};
+    };
+    scroll: {
+        true: {
+            display: "grid";
+            gridTemplateColumns: "auto 1fr auto";
+            gridGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
 export declare const listWrapperScroll: string;
 //# sourceMappingURL=TabList.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,sCASf,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC"}
+{"version":3,"file":"TabList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAiBxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC"}

package/dist/components/Tabs/TabList.css.js

@@ -2,18 +2,27 @@
 
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Tabs/TabList.css.ts", "@autoguru/overdrive");
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { themeContractVars as vars } from "../../themes/theme.css.js";
-export const root = styleVariants({
-  default: {
-    boxShadow: `inset 0 -1px 0 0 ${vars.border.colours.gray}`
-  },
-  scroll: {
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr auto',
-    gridGap: vars.space['2']
+export const styledTabList = recipe({
+  base: {},
+  variants: {
+    appearance: {
+      underlined: {
+        boxShadow: `inset 0 -1px 0 0 ${vars.border.colours.gray}`
+      },
+      pill: {}
+    },
+    scroll: {
+      true: {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr auto',
+        gridGap: vars.space['2']
+      }
+    }
   }
-}, "root");
+}, "styledTabList");
 export const listWrapperScroll = style({
   overflowX: 'auto',
   overflowY: 'hidden',

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

@@ -1,6 +1,4 @@
-import type { FunctionComponent } from 'react';
-import * as React from 'react';
-import { ReactNode } from 'react';
+import React, { type FunctionComponent, type ReactNode } from 'react';
 export interface Props {
     stretch?: boolean;
     scrollable?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIN,SAAS,EAKT,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAOD,eAAO,MAAM,cAAc,8BAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAyI5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EAGtB,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAYf,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAOD,eAAO,MAAM,cAAc,8BAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CA+I5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Tabs/TabList.js

@@ -2,8 +2,7 @@
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@autoguru/icons';
 import { invariant } from '@autoguru/utilities';
-import * as React from 'react';
-import { Children, createContext, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
+import React, { Children, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 import { animate, ownerWindow, useEventCallback } from "../../utils/index.js";
 import { Box } from "../Box/index.js";
@@ -11,6 +10,7 @@ import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { useTextStyles } from "../Text/index.js";
 import * as styles from "./TabList.css.js";
+import { TabsContext } from "./Tabs.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultEnglish = {
   next: 'scroll tabs right',
@@ -33,6 +33,11 @@ export const TabList = _ref => {
       children: child
     });
   });
+  const tabsContext = useContext(TabsContext);
+  !(tabsContext !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'This tablist isnt nested beneath <Tabs />') : invariant(false) : void 0;
+  const {
+    appearance
+  } = tabsContext;
   const [displayScroll, setDisplayScroll] = useState({
     start: false,
     end: false
@@ -63,8 +68,8 @@ export const TabList = _ref => {
       animate(wrapperRef.current, 'scrollLeft', scrollValue, 300);
     }
   };
-  const handleStartButton = () => void scrollToItem(-wrapperRef.current.clientWidth);
-  const handleEndButton = () => void scrollToItem(wrapperRef.current.clientWidth);
+  const handleStartButton = () => scrollToItem(-wrapperRef.current.clientWidth);
+  const handleEndButton = () => scrollToItem(wrapperRef.current.clientWidth);
   useEffect(() => {
     const win = ownerWindow(wrapperRef.current);
     const handleResize = () => {
@@ -79,12 +84,14 @@ export const TabList = _ref => {
   }, []);
   useEffect(() => {
     updateScrollButtonState();
-  }, [children]);
+  }, [children, updateScrollButtonState]);
   const shouldShowScrollButtons = scrollable && (displayScroll.start || displayScroll.end);
   return _jsxs(Box, {
-    overflow: "hidden",
     alignItems: "center",
-    className: [styles.root.default, shouldShowScrollButtons && styles.root.scroll],
+    className: styles.styledTabList({
+      appearance,
+      scroll: scrollable
+    }),
     children: [shouldShowScrollButtons ? _jsx(Button, {
       minimal: true,
       rounded: true,

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

@@ -1,15 +1,18 @@
 import type { FunctionComponent } from 'react';
 import * as React from 'react';
 import { ReactNode } from 'react';
+type TabsAppearance = 'underlined' | 'pill';
 interface TabsContextValue {
     id?: string;
     activeIndex: number;
+    appearance: TabsAppearance;
     onChange?: (index: number) => void;
 }
 export declare const TabsContext: React.Context<TabsContextValue | null>;
 export interface Props {
     id?: string | null;
     active: number;
+    appearance?: 'underlined' | 'pill';
     children?: ReactNode;
     onChange?: (index: number) => void;
 }

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,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,SAAS,EAAW,MAAM,OAAO,CAAC;AAI1D,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE,MAAM,WAAW,KAAK;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CA2BzC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,SAAS,EAAW,MAAM,OAAO,CAAC;AAI1D,KAAK,cAAc,GAAG,YAAY,GAAG,MAAM,CAAC;AAC5C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE,MAAM,WAAW,KAAK;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CA6BzC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -9,6 +9,7 @@ export const Tabs = _ref => {
   let {
     id: incomingId,
     active = 0,
+    appearance = 'underlined',
     onChange,
     children
   } = _ref;
@@ -18,8 +19,9 @@ export const Tabs = _ref => {
     value: useMemo(() => ({
       id,
       activeIndex: activeState,
+      appearance,
       onChange: setActiveState
-    }), [id, activeState]),
+    }), [id, activeState, appearance, setActiveState]),
     children: children
   });
 };

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

@@ -1,26 +1,10 @@
-import type { StoryObj } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Tabs } from '.';
-declare const meta: {
-    title: string;
-    component: React.FunctionComponent<import("./Tabs").Props>;
-    decorators: ((story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        id?: string | null | undefined;
-        active: number;
-        children?: React.ReactNode;
-        onChange?: ((index: number) => void) | undefined;
-    }>) => React.JSX.Element)[];
-    argTypes: {
-        children: {
-            control: {
-                disable: true;
-            };
-        };
-    };
-};
+declare const meta: Meta<typeof Tabs>;
 export default meta;
 type Story = StoryObj<typeof Tabs>;
 export declare const Standard: Story;
+export declare const Pill: Story;
 export declare const WithIndication: Story;
 export declare const WithComplexTab: Story;
 export declare const WithStretch: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,OAAO,EAAmC,IAAI,EAAE,MAAM,GAAG,CAAC;AAkB1D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAemB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0C5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAavD,OAAO,EAAmC,IAAI,EAAE,MAAM,GAAG,CAAC;AAkB1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAqB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAwC5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAC"}

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

@@ -73,6 +73,8 @@ declare const meta: {
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -279,6 +281,8 @@ declare const meta: {
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLAnchorElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLAnchorElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLAnchorElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLAnchorElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"TextLink.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAgB7B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAKrC,CAAC"}
+{"version":3,"file":"TextLink.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAgB7B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAKrC,CAAC"}

package/dist/styles/focusOutline.css.d.ts

@@ -1,4 +1,6 @@
-import { type StyleRule } from '@vanilla-extract/css';
-export declare const focusOutline: StyleRule;
+export declare const focusOutline: {
+    outline: string;
+    outlineOffset: string;
+};
 export declare const focusOutlineStyle: string;
 //# sourceMappingURL=focusOutline.css.d.ts.map

package/dist/styles/focusOutline.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusOutline.css.d.ts","sourceRoot":"","sources":["../../lib/styles/focusOutline.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAM7D,eAAO,MAAM,YAAY,EAAE,SAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAO5B,CAAC"}
+{"version":3,"file":"focusOutline.css.d.ts","sourceRoot":"","sources":["../../lib/styles/focusOutline.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAO5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.40.0-next.0",
+	"version": "4.40.0-next.1",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -66,11 +66,11 @@
 	"devDependencies": {
 		"@autoguru/babel-preset": "^3.2.0",
 		"@autoguru/eslint-plugin": "2.0.0",
-		"@autoguru/icons": "^1.8.3",
+		"@autoguru/icons": "1.8.5",
 		"@autoguru/tsconfig": "^1.3.1",
 		"@autoguru/utilities": "^1.3.3",
 		"@babel/cli": "^7.26.4",
-		"@babel/core": "^7.26.9",
+		"@babel/core": "^7.26.10",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-proposal-export-default-from": "^7.25.9",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
@@ -78,37 +78,37 @@
 		"@babel/plugin-proposal-optional-chaining": "^7.21.0",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/plugin-transform-classes": "^7.25.9",
-		"@babel/plugin-transform-runtime": "^7.26.9",
+		"@babel/plugin-transform-runtime": "^7.26.10",
 		"@babel/plugin-transform-spread": "^7.25.9",
 		"@babel/plugin-transform-strict-mode": "^7.25.9",
 		"@babel/preset-env": "^7.26.9",
 		"@babel/preset-react": "^7.26.3",
 		"@babel/preset-typescript": "^7.26.0",
-		"@babel/runtime-corejs3": "^7.26.9",
+		"@babel/runtime-corejs3": "^7.26.10",
 		"@changesets/cli": "^2.28.1",
-		"@chromatic-com/storybook": "^3.2.5",
+		"@chromatic-com/storybook": "^3.2.6",
 		"@internationalized/date": "^3.7.0",
 		"@octokit/rest": "^21.1.1",
 		"@popperjs/core": "^2.11.8",
 		"@react-stately/toggle": "^3.8.2",
-		"@storybook/addon-a11y": "^8.6.4",
-		"@storybook/addon-actions": "^8.6.4",
-		"@storybook/addon-essentials": "^8.6.4",
-		"@storybook/addon-interactions": "^8.6.4",
-		"@storybook/addon-links": "^8.6.4",
-		"@storybook/addon-onboarding": "^8.6.4",
-		"@storybook/blocks": "^8.6.4",
-		"@storybook/manager-api": "^8.6.4",
-		"@storybook/react": "^8.6.4",
-		"@storybook/react-vite": "^8.6.4",
-		"@storybook/test": "^8.6.4",
-		"@storybook/theming": "^8.6.4",
+		"@storybook/addon-a11y": "^8.6.7",
+		"@storybook/addon-actions": "^8.6.7",
+		"@storybook/addon-essentials": "^8.6.7",
+		"@storybook/addon-interactions": "^8.6.7",
+		"@storybook/addon-links": "^8.6.7",
+		"@storybook/addon-onboarding": "^8.6.7",
+		"@storybook/blocks": "^8.6.7",
+		"@storybook/manager-api": "^8.6.7",
+		"@storybook/react": "^8.6.7",
+		"@storybook/react-vite": "^8.6.7",
+		"@storybook/test": "^8.6.7",
+		"@storybook/theming": "^8.6.7",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/node": "^22.13.10",
-		"@types/react": "^19.0.10",
+		"@types/react": "^19.0.12",
 		"@types/react-dom": "^19.0.4",
 		"@types/webpack-env": "^1.18.8",
 		"@vanilla-extract/babel-plugin": "^1.2.0",
@@ -118,8 +118,8 @@
 		"@vanilla-extract/sprinkles": "^1.6.3",
 		"@vanilla-extract/vite-plugin": "^5.0.1",
 		"@vanilla-extract/webpack-plugin": "^2.3.18",
-		"@vitest/coverage-v8": "3.0.8",
-		"@vitest/eslint-plugin": "^1.1.37",
+		"@vitest/coverage-v8": "3.0.9",
+		"@vitest/eslint-plugin": "^1.1.38",
 		"babel-plugin-add-import-extension": "^1.6.0",
 		"babel-plugin-dev-expression": "^0.2.3",
 		"babel-plugin-macros": "^3.1.0",
@@ -132,11 +132,11 @@
 		"csstype": "^3.1.3",
 		"deepmerge": "^4.3.1",
 		"eslint": "^9.22.0",
-		"eslint-plugin-storybook": "^0.11.4",
+		"eslint-plugin-storybook": "^0.11.6",
 		"husky": "^9.1.7",
 		"intersection-observer": "^0.12.2",
 		"jsdom": "^26.0.0",
-		"lint-staged": "^15.4.3",
+		"lint-staged": "^15.5.0",
 		"magic-string": "^0.30.17",
 		"mini-css-extract-plugin": "^2.9.2",
 		"mockdate": "^3.0.5",
@@ -150,36 +150,35 @@
 		"react-aria-components": "^1.7.1",
 		"react-dom": "^19.0.0",
 		"react-focus-lock": "2.13.6",
-		"react-intersection-observer": "^9.15.1",
+		"react-intersection-observer": "^9.16.0",
 		"react-keyed-flatten-children": "2.2.1",
 		"react-stately": "^3.36.1",
 		"react-swipeable": "^7.0.2",
 		"rollup-plugin-visualizer": "^5.14.0",
-		"storybook": "^8.6.4",
+		"storybook": "^8.6.7",
 		"storybook-addon-tag-badges": "^1.4.0",
 		"typescript": "^5.8.2",
 		"url-loader": "^4.1.1",
-		"vite": "^6.2.1",
-		"vitest": "^3.0.8",
+		"vite": "^6.2.2",
+		"vitest": "^3.0.9",
 		"webpack": "^5.98.0"
 	},
 	"peerDependencies": {
-		"@autoguru/icons": "^1.7.28",
-		"@autoguru/utilities": "^1.0.98",
-		"@internationalized/date": "^3.7.0",
-		"@popperjs/core": "^2.10.2",
+		"@autoguru/icons": ">=1.8.4",
+		"@autoguru/utilities": "^1.3.3",
+		"@popperjs/core": "^2.11.8",
 		"@vanilla-extract/dynamic": "^2.1.2",
-		"clsx": "^1.1.1",
-		"colord": "^2.0.1",
+		"@vanilla-extract/recipes": "^0.5.5",
+		"clsx": "^2.1.1",
+		"colord": "^2.9.3",
 		"csstype": "^3.1.3",
 		"react": ">=18 || >=19.0.0-rc.0",
-		"react-aria": "^3.36.0",
-		"react-aria-components": "^1.6.0",
+		"react-aria": "^3.38.1",
 		"react-dom": ">=18 || >=19.0.0-rc.0",
-		"react-focus-lock": "^2.5.0",
-		"react-intersection-observer": ">=9.4.3",
-		"react-keyed-flatten-children": "^1.3.0",
-		"react-swipeable": ">=7.0.0",
+		"react-focus-lock": "^2.13.6",
+		"react-intersection-observer": ">=9.16.0",
+		"react-keyed-flatten-children": "^2.2.1",
+		"react-swipeable": ">=7.0.2",
 		"webpack": "*"
 	},
 	"volta": {