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

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"}