@autoguru/overdrive 4.45.0-next.3 → 4.45.0

package/dist/components/Flex/flex.d.ts

@@ -30,7 +30,7 @@ export interface FlexInlineProps {
     /** Shortcut start/top alignment */
     start?: boolean;
 }
-export declare const inlinePropMapping: ({ align, center, end, fullWidth, gap, height, noWrap, justify, reverse, spaceBetween, start, }: FlexInlineProps) => {
+export declare const inlinePropMapping: ({ align, center, end, fullWidth, gap, height, noWrap, justify, reverse, spaceBetween, start, }?: FlexInlineProps) => {
     alignItems: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
         mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
         tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
@@ -66,16 +66,16 @@ export declare const inlinePropMapping: ({ align, center, end, fullWidth, gap, h
  *
  * @example
  * // Basic row with defaults
- * const simple = row();
+ * const simple = inline();
  *
  * // Centered row with responsive gap
- * const centered = row({
+ * const centered = inline({
  *   align: 'center',
  *   justify: 'center',
  *   gap: { mobile: '2', tablet: '4', desktop: '6' }
  * });
  */
-export declare const inline: (props: FlexInlineProps) => string;
+export declare const inline: (props?: FlexInlineProps) => string;
 export interface FlexStackProps {
     /** Cross-axis horizontal alignment of items (_responsive_) */
     align?: Sprinkles['alignItems'];
@@ -94,7 +94,7 @@ export interface FlexStackProps {
     start?: boolean;
     width?: Sprinkles['width'];
 }
-export declare const stackPropMapping: ({ align, center, end, gap, justify, minWidth, reverse, start, width, }: FlexStackProps) => {
+export declare const stackPropMapping: ({ align, center, end, gap, justify, minWidth, reverse, start, width, }?: FlexStackProps) => {
     alignItems: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
         mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
         tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
@@ -148,5 +148,5 @@ export declare const stackPropMapping: ({ align, center, end, gap, justify, minW
  * 	 align: 'stretch',
  * });
  */
-export declare const stack: (props: FlexStackProps) => string;
+export declare const stack: (props?: FlexStackProps) => string;
 //# sourceMappingURL=flex.d.ts.map

package/dist/components/Flex/flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../lib/components/Flex/flex.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CACvC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,WAAW,GAAG,OAAO,CACjD,GACA,YAAY,GACZ,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACpC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAClC,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,GAAI,gGAY/B,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBK,CAAC;AAExB;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,eAAe,WACT,CAAC;AAIrC,MAAM,WAAW,cAAc;IAC9B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAChC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,GAAI,wEAU9B,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcM,CAAC;AAExB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,cAAc,WACR,CAAC"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../lib/components/Flex/flex.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CACvC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,WAAW,GAAG,OAAO,CACjD,GACA,YAAY,GACZ,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACpC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAClC,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,GAAI,iGAY/B,eAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBA,CAAC;AAExB;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,GAAI,QAAO,eAAoB,WACd,CAAC;AAIrC,MAAM,WAAW,cAAc;IAC9B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAChC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,GAAI,yEAU9B,cAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcC,CAAC;AAExB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,GAAI,QAAO,cAAmB,WACb,CAAC"}

package/dist/components/Flex/flex.js

@@ -13,7 +13,7 @@ export const inlinePropMapping = ({
   reverse,
   spaceBetween,
   start
-}) => ({
+} = {}) => ({
   alignItems: justify,
   display: 'flex',
   flexDirection: reverse && 'row-reverse' || 'row',
@@ -30,16 +30,16 @@ export const inlinePropMapping = ({
  *
  * @example
  * // Basic row with defaults
- * const simple = row();
+ * const simple = inline();
  *
  * // Centered row with responsive gap
- * const centered = row({
+ * const centered = inline({
  *   align: 'center',
  *   justify: 'center',
  *   gap: { mobile: '2', tablet: '4', desktop: '6' }
  * });
  */
-export const inline = props => sprinkles(inlinePropMapping(props));
+export const inline = (props = {}) => sprinkles(inlinePropMapping(props));
 
 // ---
 
@@ -53,7 +53,7 @@ export const stackPropMapping = ({
   reverse,
   start,
   width
-}) => ({
+} = {}) => ({
   alignItems: align !== null && align !== void 0 ? align : start && 'start' || center && 'center' || end && 'end' || undefined,
   display: 'flex',
   flexDirection: reverse && 'column-reverse' || 'column',
@@ -83,4 +83,4 @@ export const stackPropMapping = ({
  * 	 align: 'stretch',
  * });
  */
-export const stack = props => sprinkles(stackPropMapping(props));
+export const stack = (props = {}) => sprinkles(stackPropMapping(props));

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

@@ -1,14 +1,14 @@
 import type { IconType } from '@autoguru/icons';
-import type { FunctionComponent, ReactElement, SVGAttributes } from 'react';
-import { ResponsiveProp } from '../../utils/responsiveProps.css';
+import { type FunctionComponent, type ReactElement, type SVGAttributes } from 'react';
+import type { ResponsiveProp } from '../../utils/responsiveProps.css';
 import { type UseBoxProps } from '../Box/useBox/useBox';
 import * as styles from './Icon.css';
-export type IconEl = IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'>;
+export type IconEl = IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'> | null;
 export interface IconProps {
     display?: Extract<UseBoxProps['display'], 'block' | 'inlineBlock' | 'inline-block'>;
     className?: string;
     size?: ResponsiveProp<keyof typeof styles.size | string>;
-    icon: IconEl;
+    icon?: IconEl;
 }
 export declare const Icon: FunctionComponent<IconProps>;
 //# sourceMappingURL=Icon.d.ts.map

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;AAO5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEhE,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,SAAS;IACzB,OAAO,CAAC,EAAE,OAAO,CAChB,WAAW,CAAC,SAAS,CAAC,EACtB,OAAO,GAAG,aAAa,GAAG,cAAc,CACxC,CAAC;IACF,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,SAAS,CA2B7C,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,OAAc,EAEb,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,MAAM,GACf,QAAQ,GACR,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,GAC9C,IAAI,CAAC;AAER,MAAM,WAAW,SAAS;IACzB,OAAO,CAAC,EAAE,OAAO,CAChB,WAAW,CAAC,SAAS,CAAC,EACtB,OAAO,GAAG,aAAa,GAAG,cAAc,CACxC,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAgC7C,CAAC"}

package/dist/components/Icon/Icon.js

@@ -3,8 +3,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import * as React from 'react';
-import { cloneElement } from 'react';
+import React, { cloneElement } from 'react';
 import { useNullCheck } from "../../hooks/useNullCheck/index.js";
 import { elementStyles } from "../../styles/index.js";
 import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
@@ -25,9 +24,16 @@ export const Icon = ({
   } = useBox({
     as: 'span',
     className: [resolveResponsiveStyle(size, styles.size), className],
-    odComponent: 'icon',
-    display
+    display,
+    odComponent: 'icon'
   });
+
+  // Handle null/undefined icons by showing fallback without trying to clone
+  if (!icon) {
+    return /*#__PURE__*/_jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+      children: "\u2B24"
+    }));
+  }
   const iconElement = /*#__PURE__*/cloneElement(icon, {
     className: elementStyles({
       as: 'svg',
@@ -39,6 +45,6 @@ export const Icon = ({
     'aria-hidden': icon.props['aria-label'] ? undefined : true
   });
   return /*#__PURE__*/_jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-    children: icon ? iconElement : '⬤'
+    children: iconElement
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"OptionGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AASvE,eAAO,MAAM,aAAa,QAAoB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAuBH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CrB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;AAO7E,eAAO,MAAM,cAAc;;;;EAkDzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAGF,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;EA+BzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAwBF,eAAO,MAAM,iBAAiB;;;;EAgC5B,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAC/C,cAAc,CAAC,OAAO,iBAAiB,CAAC,CACxC,CAAC;AAIF,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAE3B,CAAC"}
+{"version":3,"file":"OptionGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AASvE,eAAO,MAAM,aAAa,QAAoB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAuBH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CrB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;AAO7E,eAAO,MAAM,cAAc;;;;EAkDzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAGF,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;EAiCzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAwBF,eAAO,MAAM,iBAAiB;;;;EAgC5B,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAC/C,cAAc,CAAC,OAAO,iBAAiB,CAAC,CACxC,CAAC;AAIF,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAE3B,CAAC"}

package/dist/components/OptionGrid/OptionGrid.css.js

@@ -134,8 +134,10 @@ export const styleIndicator = style({
 }, "styleIndicator");
 export const styledCheckbox = recipe({
   base: [{
-    backgroundColor: tokens.colours.background.body,
+    borderColor: tokens.border.colours.gray,
     borderRadius: tokens.border.radius['sm'],
+    borderStyle: 'solid',
+    borderWidth: tokens.border.width[1],
     color: 'transparent'
   }, interactionStyle({
     selected: {

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

@@ -1,5 +1,3 @@
-export declare const child: {
-    spaces: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none", string>;
-    default: string;
-};
+export declare const hr: string;
+export declare const stackWithDividers: string;
 //# sourceMappingURL=Stack.css.d.ts.map

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

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

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

@@ -2,17 +2,28 @@
 
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Stack/Stack.css.ts", "@autoguru/overdrive");
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { gapVar } from "../../styles/vars.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
-import { mapTokenToProperty } from "../../utils/mapTokenToProperty.js";
-export const child = {
-  spaces: styleVariants(mapTokenToProperty(vars.space, value => ({
-    paddingBottom: value
-  })), "child_spaces"),
-  default: style({
-    ':last-child': {
-      paddingBottom: 0
+export const hr = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      borderStyle: 'none',
+      boxShadow: `inset 0 0 0 1px ${vars.colours.background.neutral}`,
+      height: '1px',
+      margin: 0,
+      transform: `translateY(calc(${gapVar} * -1))`,
+      width: '100%'
     }
-  }, "child_default")
-};
+  }
+}, "hr");
+export const stackWithDividers = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      // double the flex gap to match spacing of original implementation
+      gap: `calc(2 * ${gapVar})`
+    }
+  }
+}, "stackWithDividers");
 __vanilla_filescope__.endFileScope();

package/dist/components/Stack/Stack.js

@@ -7,7 +7,7 @@ import React, { Children, useMemo } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 import { calcChildElement } from "../../utils/elements.js";
 import { useBox } from "../Box/useBox/useBox.js";
-import * as styles from "./Divider.css.js";
+import * as styles from "./Stack.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = () => /*#__PURE__*/_jsx("hr", {
   className: styles.hr
@@ -51,7 +51,7 @@ export const Stack = ({
     componentProps
   } = useBox({
     as,
-    className,
+    className: [dividers && styles.stackWithDividers, className],
     odComponent: 'stack',
     display: 'flex',
     flexDirection: 'column',

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

@@ -21,6 +21,15 @@ export declare const styledTab: import("@vanilla-extract/recipes").RuntimeFn<{
                 };
             };
         };
+        minimal: {
+            borderBottom: "2px solid transparent";
+            padding: "6px 0";
+            selectors: {
+                '&+&': {
+                    marginLeft: `var(--${string})`;
+                };
+            };
+        };
     };
     active: {
         true: {};
@@ -37,9 +46,12 @@ export declare const indication: import("@vanilla-extract/recipes").RuntimeFn<{
                 };
             };
         };
+        minimal: {};
     };
     active: {
         true: {};
     };
 }>;
+export type TabVariants = NonNullable<Parameters<typeof styledTab>[0]>;
+export type TabAppearance = NonNullable<TabVariants['appearance']>;
 //# 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":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;EAqDrB,CAAC"}
+{"version":3,"file":"Tab.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;EAsDrB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC"}

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

@@ -7,8 +7,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
+import { focusOutline } from "../../styles/focusOutline.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
-import { focusOutline } from "./../../styles/focusOutline.css.js";
 const lineBottomHeight = '1px';
 const size = '20px';
 export const styledTab = recipe({
@@ -44,6 +44,15 @@ export const styledTab = recipe({
             backgroundColor: vars.colours.gamut.gray200
           }
         }
+      },
+      minimal: {
+        borderBottom: `2px solid transparent`,
+        padding: '6px 0',
+        selectors: {
+          '&+&': {
+            marginLeft: vars.space['6']
+          }
+        }
       }
     },
     active: {
@@ -68,6 +77,15 @@ export const styledTab = recipe({
       backgroundColor: vars.colours.foreground.body,
       color: vars.colours.background.body
     }
+  }, {
+    variants: {
+      appearance: 'minimal',
+      active: true
+    },
+    style: {
+      color: vars.color.content.normal,
+      borderBottomColor: vars.color.content.normal
+    }
   }],
   defaultVariants: {
     appearance: 'underlined'
@@ -98,7 +116,8 @@ export const indication = recipe({
             backgroundColor: vars.colours.background.neutral
           }
         }
-      }
+      },
+      minimal: {}
     },
     active: {
       true: {}

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

@@ -4,6 +4,7 @@ export declare const styledTabList: import("@vanilla-extract/recipes").RuntimeFn
             boxShadow: `inset 0 -1px 0 0 var(--${string})`;
         };
         pill: {};
+        minimal: {};
     };
     scroll: {
         true: {

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":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAiBxB,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;;;;;;;;;;;;;;;EAkBxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC"}

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

@@ -12,7 +12,8 @@ export const styledTabList = recipe({
       underlined: {
         boxShadow: `inset 0 -1px 0 0 ${vars.border.colours.gray}`
       },
-      pill: {}
+      pill: {},
+      minimal: {}
     },
     scroll: {
       true: {

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

@@ -1,18 +1,18 @@
 import type { FunctionComponent } from 'react';
 import * as React from 'react';
 import { ReactNode } from 'react';
-type TabsAppearance = 'underlined' | 'pill';
+import type { TabAppearance } from './Tab.css';
 interface TabsContextValue {
     id?: string;
     activeIndex: number;
-    appearance: TabsAppearance;
+    appearance: TabAppearance;
     onChange?: (index: number) => void;
 }
 export declare const TabsContext: React.Context<TabsContextValue | null>;
 export interface TabsProps {
     id?: string | null;
     active: number;
-    appearance?: 'underlined' | 'pill';
+    appearance?: TabAppearance;
     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,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,SAAS;IACzB,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,SAAS,CA6B7C,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,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE,MAAM,WAAW,SAAS;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CA6B7C,CAAC"}

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './DividerLine';
 export * from './DropDown';
 export * from './EditableText';
 export * from './FillHeightBox';
+export * from './Flex';
 export * from './Flyout';
 export * from './Heading';
 export * from './HorizontalAutoScroller';

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

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

package/dist/components/index.js

@@ -17,6 +17,7 @@ export * from "./DividerLine/index.js";
 export * from "./DropDown/index.js";
 export * from "./EditableText/index.js";
 export * from "./FillHeightBox/index.js";
+export * from "./Flex/index.js";
 export * from "./Flyout/index.js";
 export * from "./Heading/index.js";
 export * from "./HorizontalAutoScroller/index.js";

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

@@ -5,4 +5,17 @@ export declare const cssLayerTypography: string;
 export declare const cssLayerStyleprops: string;
 export declare const cssLayerComponent: string;
 export declare const cssLayerUtil: string;
+/**
+ * Map of CSS layer names to their corresponding layer objects
+ */
+export declare const cssLayerMap: {
+    readonly reset: string;
+    readonly theme: string;
+    readonly colorset: string;
+    readonly typography: string;
+    readonly styleprops: string;
+    readonly component: string;
+    readonly util: string;
+};
+export type CSSLayers = keyof typeof cssLayerMap;
 //# sourceMappingURL=layers.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layers.css.d.ts","sourceRoot":"","sources":["../../lib/styles/layers.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,WAAW,QAAqD,CAAC;AAC9E,eAAO,MAAM,kBAAkB,QAG9B,CAAC;AACF,eAAO,MAAM,kBAAkB,QAA4B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAC1D,eAAO,MAAM,YAAY,QAAsB,CAAC"}
+{"version":3,"file":"layers.css.d.ts","sourceRoot":"","sources":["../../lib/styles/layers.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,WAAW,QAAqD,CAAC;AAC9E,eAAO,MAAM,kBAAkB,QAG9B,CAAC;AACF,eAAO,MAAM,kBAAkB,QAA4B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAC1D,eAAO,MAAM,YAAY,QAAsB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC"}

package/dist/styles/layers.css.js

@@ -15,4 +15,17 @@ export const cssLayerTypography = globalLayer({
 export const cssLayerStyleprops = globalLayer('styleprops');
 export const cssLayerComponent = globalLayer('component');
 export const cssLayerUtil = globalLayer('util');
+
+/**
+ * Map of CSS layer names to their corresponding layer objects
+ */
+export const cssLayerMap = {
+  reset: cssLayerReset,
+  theme: cssLayerTheme,
+  colorset: cssColorSet,
+  typography: cssLayerTypography,
+  styleprops: cssLayerStyleprops,
+  component: cssLayerComponent,
+  util: cssLayerUtil
+};
 __vanilla_filescope__.endFileScope();

package/dist/styles/responsiveStyles.d.ts

@@ -0,0 +1,35 @@
+import type { StyleRule } from '@vanilla-extract/css';
+import { type Breakpoints } from '../themes/makeTheme';
+import { type CSSLayers } from './layers.css';
+/**
+ * Type for defining styles for each breakpoint
+ */
+export type ResponsiveStyleMap = Partial<Record<Breakpoints, StyleRule>>;
+/**
+ * Creates a single responsive style class that applies different styles at different breakpoints
+ *
+ * @param styles - Object defining styles for each breakpoint
+ * @param layer - Optional CSS layer name to apply the styles within
+ * @returns A single vanilla-extract style class with responsive behavior
+ *
+ * @example
+ * ```typescript
+ * const styles = responsiveStyles({
+ *   mobile: { padding: '16px', fontSize: '14px' },
+ *   tablet: { padding: '24px', fontSize: '16px' },
+ *   desktop: { padding: '32px', fontSize: '18px' }
+ * });
+ *
+ * // With CSS layer
+ * const layeredStyles = responsiveStyles({
+ *   mobile: { padding: '16px', fontSize: '14px' },
+ *   tablet: { padding: '24px', fontSize: '16px' },
+ *   desktop: { padding: '32px', fontSize: '18px' }
+ * }, 'component');
+ *
+ * // Usage in a component
+ * <div className={styles}>Responsive content</div>
+ * ```
+ */
+export declare const responsiveStyles: (styles: ResponsiveStyleMap, layer?: CSSLayers) => string;
+//# sourceMappingURL=responsiveStyles.d.ts.map

package/dist/styles/responsiveStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveStyles.d.ts","sourceRoot":"","sources":["../../lib/styles/responsiveStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGrE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEpE,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,gBAAgB,GAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,SAAS,WAoCjB,CAAC"}

package/dist/styles/responsiveStyles.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import { style } from '@vanilla-extract/css';
+import { breakpoints } from "../themes/makeTheme.js";
+import { cssLayerMap } from "./layers.css.js";
+import { responsiveConditions } from "./sprinkles.css.js";
+/**
+ * Type for defining styles for each breakpoint
+ */
+/**
+ * Creates a single responsive style class that applies different styles at different breakpoints
+ *
+ * @param styles - Object defining styles for each breakpoint
+ * @param layer - Optional CSS layer name to apply the styles within
+ * @returns A single vanilla-extract style class with responsive behavior
+ *
+ * @example
+ * ```typescript
+ * const styles = responsiveStyles({
+ *   mobile: { padding: '16px', fontSize: '14px' },
+ *   tablet: { padding: '24px', fontSize: '16px' },
+ *   desktop: { padding: '32px', fontSize: '18px' }
+ * });
+ *
+ * // With CSS layer
+ * const layeredStyles = responsiveStyles({
+ *   mobile: { padding: '16px', fontSize: '14px' },
+ *   tablet: { padding: '24px', fontSize: '16px' },
+ *   desktop: { padding: '32px', fontSize: '18px' }
+ * }, 'component');
+ *
+ * // Usage in a component
+ * <div className={styles}>Responsive content</div>
+ * ```
+ */
+export const responsiveStyles = (styles, layer) => {
+  const responsiveStyle = {};
+  for (const [breakpoint, styleRule] of Object.entries(styles)) {
+    if (breakpoint in breakpoints) {
+      const breakpointKey = breakpoint;
+      if (breakpointKey === breakpoints[0]) {
+        // Default (mobile) styles are applied directly
+        Object.assign(responsiveStyle, styleRule);
+      } else {
+        // Larger breakpoints use media queries
+        const mediaQuery = responsiveConditions[breakpointKey]['@media'];
+        if (!responsiveStyle['@media']) {
+          responsiveStyle['@media'] = {};
+        }
+        responsiveStyle['@media'][mediaQuery] = styleRule;
+      }
+    }
+  }
+  if (layer) {
+    return style({
+      '@layer': {
+        [cssLayerMap[layer]]: responsiveStyle
+      }
+    });
+  }
+  return style(responsiveStyle);
+};

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

@@ -28,8 +28,6 @@ export declare const sprinkles: ((props: {
     backgroundColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "transparent" | undefined;
     backgroundColour?: "white" | "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "transparent" | undefined;
     opacity?: number | "1" | "0" | undefined;
-    lineHeight?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
-    fontSize?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
     fontWeight?: "bold" | "normal" | "semiBold" | undefined;
     textTransform?: "capitalize" | "lowercase" | "uppercase" | undefined;
     textWrap?: "balance" | "nowrap" | "stable" | "pretty" | undefined;
@@ -38,7 +36,6 @@ export declare const sprinkles: ((props: {
     pointerEvents?: "none" | "auto" | undefined;
     userSelect?: "none" | "auto" | "text" | undefined;
     useVar?: "gap" | undefined;
-    text?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
     bg?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "transparent" | undefined;
     fg?: "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | undefined;
     borderColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
@@ -83,6 +80,18 @@ export declare const sprinkles: ((props: {
         desktop?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
         largeDesktop?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
     } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "fixed" | "absolute" | "relative" | "static" | "sticky" | null>;
+    lineHeight?: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | {
+        mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | null>;
+    fontSize?: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | {
+        mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | null>;
     textAlign?: ("left" | "right" | "center" | "centre" | {
         mobile?: "left" | "right" | "center" | "centre" | undefined;
         tablet?: "left" | "right" | "center" | "centre" | undefined;
@@ -341,6 +350,12 @@ export declare const sprinkles: ((props: {
         desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
         largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
     } | undefined);
+    text?: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | {
+        mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | null>;
     padding?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | null> | ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | {
         mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
         tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AA2LA,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAoIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;CAcvB,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAqLA,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AA2IF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;CAcvB,CAAC"}

package/dist/styles/sprinkles.css.js

@@ -113,8 +113,6 @@ const baseProperties = defineProperties({
     backgroundColour: mappedBackgroundColours,
     opacity: [0, '1', '0'],
     // Typography
-    lineHeight: mapValues(tokens.typography.size, size => size.lineHeight),
-    fontSize: mapValues(tokens.typography.size, size => size.fontSize),
     fontWeight: tokens.typography.fontWeight,
     textTransform: ['capitalize', 'lowercase', 'uppercase'],
     textWrap: ['balance', 'pretty', 'stable', 'nowrap'],
@@ -131,7 +129,6 @@ const baseProperties = defineProperties({
     }
   },
   shorthands: {
-    text: ['fontSize', 'lineHeight'],
     bg: ['backgroundColor'],
     fg: ['color'],
     borderColor: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
@@ -183,6 +180,9 @@ const responsiveProperties = defineProperties({
     overflowX: ['auto', 'scroll', 'hidden'],
     overflowY: ['auto', 'scroll', 'hidden'],
     position: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+    // Typography
+    lineHeight: mapValues(tokens.typography.size, size => size.lineHeight),
+    fontSize: mapValues(tokens.typography.size, size => size.fontSize),
     textAlign: {
       left: 'left',
       center: 'center',
@@ -262,6 +262,7 @@ const responsiveProperties = defineProperties({
     borderWidthTop: ['borderTopWidth'],
     placeItems: ['justifyContent', 'alignItems'],
     size: ['width', 'height'],
+    text: ['fontSize', 'lineHeight'],
     padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
     p: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
     paddingX: ['paddingLeft', 'paddingRight'],

package/dist/themes/makeTheme.d.ts

@@ -1,5 +1,14 @@
 import type { BreakPoints, ColourMap, FlattenedColours, ThemeTokens } from '.';
 export declare const breakpoints: BreakPoints;
+export type Breakpoints = keyof typeof breakpoints;
+/**
+ * Type guard to check if a value is a valid breakpoint key
+ */
+export declare const isBreakpoint: (value: string) => value is Breakpoints;
+/**
+ * Get all available breakpoint keys
+ */
+export declare const getBreakpoint: () => readonly Breakpoints[];
 export declare const mediaQuery: Record<import("./types").DeviceSize, string>;
 /**
  * Wraps theme tokens with `theme` CSS layer using the vanilla-extract method

package/dist/themes/makeTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,8CAGtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,SAAS,KAAG,gBAepD,CAAC"}
+{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,WAErD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAO,SAAS,WAAW,EAEpD,CAAC;AAEF,eAAO,MAAM,UAAU,8CAGtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,SAAS,KAAG,gBAepD,CAAC"}

package/dist/themes/makeTheme.js

@@ -13,6 +13,19 @@ export const breakpoints = {
   // IPad Pro width (1366 - 25%)
   largeDesktop: '1920px' // 1080p width (1920 - 25%)
 };
+/**
+ * Type guard to check if a value is a valid breakpoint key
+ */
+export const isBreakpoint = value => {
+  return value in breakpoints;
+};
+
+/**
+ * Get all available breakpoint keys
+ */
+export const getBreakpoint = () => {
+  return Object.keys(breakpoints);
+};
 export const mediaQuery = mapValues(breakpoints, breakpoint => `screen and (min-width: ${breakpoint})`);
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.45.0-next.3",
+	"version": "4.45.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -60,7 +60,7 @@
 		"@antebudimir/eslint-plugin-vanilla-extract": "^1.11.0",
 		"@autoguru/babel-preset": "3.2.0",
 		"@autoguru/eslint-plugin": "2.0.0",
-		"@autoguru/icons": "1.8.11",
+		"@autoguru/icons": "1.8.12",
 		"@autoguru/tsconfig": "1.3.1",
 		"@autoguru/utilities": "^1.3.3",
 		"@babel/cli": "7.28.0",
@@ -78,29 +78,29 @@
 		"@babel/preset-env": "7.28.0",
 		"@babel/preset-react": "7.27.1",
 		"@babel/preset-typescript": "7.27.1",
-		"@babel/runtime-corejs3": "7.28.0",
+		"@babel/runtime-corejs3": "7.28.2",
 		"@changesets/cli": "2.29.5",
-		"@chromatic-com/storybook": "4.0.1",
+		"@chromatic-com/storybook": "4.1.0",
 		"@internationalized/date": "3.8.2",
 		"@octokit/rest": "22.0.0",
 		"@popperjs/core": "2.11.8",
 		"@react-stately/toggle": "3.8.5",
-		"@storybook/addon-a11y": "9.0.15",
-		"@storybook/addon-docs": "9.0.15",
-		"@storybook/addon-links": "9.0.15",
-		"@storybook/addon-onboarding": "9.0.15",
-		"@storybook/addon-vitest": "9.0.15",
-		"@storybook/react-vite": "9.0.15",
+		"@storybook/addon-a11y": "9.1.0",
+		"@storybook/addon-docs": "9.1.0",
+		"@storybook/addon-links": "9.1.0",
+		"@storybook/addon-onboarding": "9.1.0",
+		"@storybook/addon-vitest": "9.1.0",
+		"@storybook/react-vite": "9.1.0",
 		"@testing-library/dom": "^10.4.0",
-		"@testing-library/jest-dom": "6.6.3",
+		"@testing-library/jest-dom": "6.7.0",
 		"@testing-library/react": "16.3.0",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.6.1",
-		"@types/node": "24.0.10",
-		"@types/react": "19.1.8",
-		"@types/react-dom": "19.1.6",
+		"@types/node": "24.2.1",
+		"@types/react": "19.1.10",
+		"@types/react-dom": "19.1.7",
 		"@types/webpack-env": "1.18.8",
-		"@typescript-eslint/utils": "8.35.1",
+		"@typescript-eslint/utils": "8.39.1",
 		"@vanilla-extract/babel-plugin": "1.2.0",
 		"@vanilla-extract/css": "1.17.4",
 		"@vanilla-extract/dynamic": "2.1.5",
@@ -115,46 +115,46 @@
 		"babel-plugin-dev-expression": "0.2.3",
 		"babel-plugin-macros": "3.1.0",
 		"browserslist-config-autoguru": "2.5.0",
-		"chromatic": "13.1.2",
+		"chromatic": "13.1.3",
 		"clsx": "2.1.1",
 		"colord": "2.9.3",
 		"concurrently": "9.2.0",
-		"core-js": "3.44.0",
+		"core-js": "3.45.0",
 		"csstype": "3.1.3",
 		"deepmerge": "4.3.1",
-		"es-toolkit": "1.39.6",
-		"eslint": "9.30.1",
-		"eslint-plugin-storybook": "9.0.15",
+		"es-toolkit": "1.39.9",
+		"eslint": "9.33.0",
+		"eslint-plugin-storybook": "9.1.2",
 		"husky": "9.1.7",
 		"intersection-observer": "0.12.2",
 		"jsdom": "26.1.0",
-		"lint-staged": "16.1.2",
+		"lint-staged": "16.1.5",
 		"magic-string": "0.30.17",
-		"mini-css-extract-plugin": "2.9.2",
+		"mini-css-extract-plugin": "2.9.4",
 		"mockdate": "3.0.5",
-		"playwright": "1.53.2",
+		"playwright": "1.54.2",
 		"plop": "4.0.1",
 		"postcss": "8.5.6",
 		"prettier": "3.6.2",
 		"prop-types": "15.8.1",
 		"rand-seed": "2.1.7",
-		"react": "19.1.0",
+		"react": "19.1.1",
 		"react-aria": "3.41.1",
 		"react-aria-components": "1.10.1",
-		"react-dom": "19.1.0",
+		"react-dom": "19.1.1",
 		"react-focus-lock": "2.13.6",
 		"react-intersection-observer": "9.16.0",
-		"react-keyed-flatten-children": "5.0.0",
+		"react-keyed-flatten-children": "5.0.1",
 		"react-stately": "3.39.0",
 		"react-swipeable": "7.0.2",
 		"rollup-plugin-visualizer": "6.0.3",
-		"storybook": "9.0.15",
-		"storybook-addon-tag-badges": "2.0.1",
-		"typescript": "5.8.3",
+		"storybook": "9.1.0",
+		"storybook-addon-tag-badges": "2.0.2",
+		"typescript": "5.9.2",
 		"url-loader": "4.1.1",
-		"vite": "7.0.2",
+		"vite": "7.1.2",
 		"vitest": "3.2.4",
-		"webpack": "5.99.9"
+		"webpack": "5.101.2"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": ">=1.8.8",
@@ -177,7 +177,7 @@
 		"webpack": "*"
 	},
 	"volta": {
-		"node": "22.17.0",
+		"node": "22.18.0",
 		"yarn": "4.9.2"
 	},
 	"packageManager": "yarn@4.9.2"

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

@@ -1,2 +0,0 @@
-export declare const hr: string;
-//# sourceMappingURL=Divider.css.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Divider.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,EAAE,QAOb,CAAC"}

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

@@ -1,16 +0,0 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-__vanilla_filescope__.setFileScope("lib/components/Stack/Divider.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { gapVar } from "../../styles/vars.css.js";
-import { overdriveTokens as vars } from "../../themes/theme.css.js";
-export const hr = style({
-  borderStyle: 'none',
-  boxShadow: `inset 0 0 0 1px ${vars.colours.background.neutral}`,
-  height: '1px',
-  margin: 0,
-  transform: `translateY(calc(${gapVar}/-2))`,
-  width: '100%'
-}, "hr");
-__vanilla_filescope__.endFileScope();