@autoguru/overdrive 4.42.0-next.1 → 4.43.0-next.0

package/dist/styles/sprinkles.css.js

@@ -9,6 +9,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 import { breakpoints } from "../themes/makeTheme.js";
 import { overdriveTokens as tokens } from "../themes/theme.css.js";
+import { cssLayerUtil } from "./layers.css.js";
+import { gapVar } from "./vars.css.js";
 const {
   space
 } = tokens;
@@ -16,7 +18,109 @@ const {
     none
   } = space,
   spaceWithoutNone = _objectWithoutProperties(space, ["none"]);
-const responsiveConditions = {
+const fontSizes = Object.entries(tokens.typography.size).reduce((sizes, _ref) => {
+  let [scale, fontSize] = _ref;
+  sizes[scale] = fontSize;
+  return sizes;
+}, {});
+const lineHeights = Object.entries(tokens.typography.size).reduce((sizes, _ref2) => {
+  let [scale, lineHeight] = _ref2;
+  sizes[scale] = lineHeight;
+  return sizes;
+}, {});
+const intentForegroundColours = Object.entries(tokens.colours.intent).reduce((acc, _ref3) => {
+  let [intent, {
+    foreground
+  }] = _ref3;
+  acc[intent] = foreground;
+  return acc;
+}, {});
+const intentBackgroundColoursStandard = Object.entries(tokens.colours.intent).reduce((acc, _ref4) => {
+  let [intent, {
+    background
+  }] = _ref4;
+  acc[intent] = background.standard;
+  return acc;
+}, {});
+const borderColors = _objectSpread({
+  default: tokens.color.interactive.border,
+  muted: tokens.color.interactive.borderMuted,
+  disabled: tokens.color.interactive.borderDisabled
+}, tokens.color.surface);
+const gapSizesWithVar = Object.entries(space).reduce((acc, _ref5) => {
+  let [key, value] = _ref5;
+  acc[key] = {
+    vars: {
+      [gapVar]: value
+    },
+    gap: value
+  };
+  return acc;
+}, {});
+const baseProperties = defineProperties({
+  '@layer': cssLayerUtil,
+  properties: {
+    borderRadius: tokens.border.radius,
+    borderBottomColor: borderColors,
+    borderLeftColor: borderColors,
+    borderRightColor: borderColors,
+    borderTopColor: borderColors,
+    borderLeftWidth: tokens.border.width,
+    borderBottomWidth: tokens.border.width,
+    borderRightWidth: tokens.border.width,
+    borderTopWidth: tokens.border.width,
+    borderLeftStyle: ['none', 'solid'],
+    borderBottomStyle: ['none', 'solid'],
+    borderRightStyle: ['none', 'solid'],
+    borderTopStyle: ['none', 'solid'],
+    color: tokens.color.content,
+    backgroundColor: _objectSpread(_objectSpread({}, tokens.color.surface), {}, {
+      transparent: 'transparent'
+    }),
+    opacity: ['1', '0'],
+    fontSize: fontSizes,
+    lineHeight: lineHeights,
+    fontWeight: tokens.typography.fontWeight,
+    boxShadow: tokens.elevation,
+    pointerEvents: ['auto', 'none'],
+    userSelect: ['auto', 'text', 'none']
+  },
+  shorthands: {
+    text: ['fontSize', 'lineHeight'],
+    bg: ['backgroundColor'],
+    fg: ['color'],
+    borderColor: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
+    borderStyle: ['borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'],
+    borderWidth: ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth']
+  }
+});
+export const sprinkles = createSprinkles(baseProperties);
+const legacyColourProperties = defineProperties({
+  '@layer': cssLayerUtil,
+  properties: {
+    backgroundColor: _objectSpread(_objectSpread(_objectSpread({}, intentBackgroundColoursStandard), tokens.colours.gamut), {}, {
+      transparent: 'transparent'
+    }),
+    borderBottomColor: tokens.border.colours,
+    borderLeftColor: tokens.border.colours,
+    borderRightColor: tokens.border.colours,
+    borderTopColor: tokens.border.colours,
+    color: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, intentForegroundColours), tokens.colours.foreground), tokens.colours.gamut), {}, {
+      unset: 'unset'
+    })
+  },
+  shorthands: {
+    backgroundColour: ['backgroundColor'],
+    borderBottomColour: ['borderBottomColor'],
+    borderLeftColour: ['borderLeftColor'],
+    borderRightColour: ['borderRightColor'],
+    borderTopColour: ['borderTopColor'],
+    borderColour: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
+    colour: ['color']
+  }
+});
+export const sprinklesLegacyColours = createSprinkles(legacyColourProperties);
+export const responsiveConditions = {
   mobile: {},
   tablet: {
     '@media': `screen and (min-width: ${breakpoints.tablet})`
@@ -28,39 +132,109 @@ const responsiveConditions = {
     '@media': `screen and (min-width: ${breakpoints.largeDesktop})`
   }
 };
+export const totalGridColumns = 12;
 const responsiveProperties = defineProperties({
-  conditions: _objectSpread({}, responsiveConditions),
+  '@layer': cssLayerUtil,
+  conditions: responsiveConditions,
   defaultCondition: 'mobile',
+  responsiveArray: ['mobile', 'tablet', 'desktop', 'largeDesktop'],
   properties: {
-    display: ['none', 'block', 'flex', 'grid', 'inline-block', 'inline-flex'],
-    flexDirection: ['row', 'column'],
+    display: ['none', 'block', 'contents', 'flex', 'grid', 'inline', 'inline-block', 'inline-flex'],
+    overflow: ['auto', 'hidden', 'visible'],
+    overflowX: ['auto', 'scroll', 'hidden'],
+    overflowY: ['auto', 'scroll', 'hidden'],
+    position: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+    textAlign: ['left', 'center', 'right'],
+    height: _objectSpread(_objectSpread({}, spaceWithoutNone), {}, {
+      'fit-content': 'fit-content',
+      'max-content': 'max-content',
+      'min-content': 'max-content',
+      full: '100%',
+      auto: 'auto'
+    }),
+    width: _objectSpread(_objectSpread({}, spaceWithoutNone), {}, {
+      'fit-content': 'fit-content',
+      'max-content': 'max-content',
+      'min-content': 'min-content',
+      full: '100%',
+      auto: 'auto'
+    }),
+    maxWidth: ['fit-content', 'max-content'],
+    minWidth: ['auto', 'fit-content'],
+    gap: gapSizesWithVar,
+    columnGap: space,
+    rowGap: space,
+    alignItems: ['flex-start', 'center', 'flex-end', 'baseline', 'stretch'],
+    justifyContent: ['flex-start', 'center', 'flex-end', 'space-around', 'space-between', 'space-evenly', 'stretch'],
+    alignContent: ['flex-start', 'center', 'flex-end', 'space-around', 'space-between', 'space-evenly', 'stretch'],
+    alignSelf: ['flex-start', 'center', 'flex-end', 'stretch'],
+    justifySelf: ['flex-start', 'center', 'flex-end'],
+    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
     flexGrow: [0, 1],
     flexShrink: [0, 1],
     flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
-    gap: space,
+    order: [0, 1, 2, 3, 4],
+    gridAutoColumns: ['auto', '1fr', 'min-content', 'max-content'],
+    gridAutoRows: ['auto', '1fr'],
+    gridAutoFlow: ['row', 'column', 'row dense', 'column dense'],
     gridTemplateColumns: {
-      '1': '1fr',
-      '2': 'repeat(2, 1fr)',
-      '3': 'repeat(3, 1fr)',
-      '4': 'repeat(4, 1fr)',
-      '5': 'repeat(5, 1fr)'
+      auto: 'auto',
+      none: 'none'
     },
-    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
-    justifyContent: ['stretch', 'flex-start', 'center', 'space-between', 'flex-end'],
-    alignSelf: ['flex-start', 'center', 'flex-end'],
-    height: _objectSpread(_objectSpread({}, spaceWithoutNone), {}, {
-      '100%': '100%',
+    gridTemplateRows: {
+      auto: 'auto',
+      none: 'none'
+    },
+    gridColumn: {
+      '1/2': `span ${totalGridColumns / 2}`,
+      '1/3': `span ${totalGridColumns / 3}`,
+      '2/3': `span ${totalGridColumns / 3 * 2}`,
+      '1/4': `span ${totalGridColumns / 4}`,
+      '3/4': `span ${totalGridColumns / 4 * 3}`,
+      '1/6': `span ${totalGridColumns / 6}`,
+      '2/6': `span ${totalGridColumns / 6 * 2}`,
+      '3/6': `span ${totalGridColumns / 6 * 3}`,
+      '4/6': `span ${totalGridColumns / 6 * 4}`,
+      full: `span ${totalGridColumns}`,
+      auto: 'auto'
+    },
+    paddingBottom: tokens.space,
+    paddingLeft: tokens.space,
+    paddingRight: tokens.space,
+    paddingTop: tokens.space,
+    marginBottom: tokens.space,
+    marginLeft: _objectSpread(_objectSpread({}, tokens.space), {}, {
       auto: 'auto'
     }),
-    width: _objectSpread(_objectSpread({}, spaceWithoutNone), {}, {
-      '100%': '100%',
+    marginRight: _objectSpread(_objectSpread({}, tokens.space), {}, {
       auto: 'auto'
-    })
+    }),
+    marginTop: tokens.space
   },
   shorthands: {
     gridColumns: ['gridTemplateColumns'],
     placeItems: ['justifyContent', 'alignItems'],
-    size: ['width', 'height']
+    size: ['width', 'height'],
+    padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
+    p: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    px: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    py: ['paddingTop', 'paddingBottom'],
+    pt: ['paddingTop'],
+    pr: ['paddingRight'],
+    pb: ['paddingBottom'],
+    pl: ['paddingLeft'],
+    margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
+    m: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
+    marginX: ['marginLeft', 'marginRight'],
+    mx: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+    my: ['marginTop', 'marginBottom'],
+    mt: ['marginTop'],
+    mr: ['marginRight'],
+    mb: ['marginBottom'],
+    ml: ['marginLeft']
   }
 });
 export const sprinklesResponsive = createSprinkles(responsiveProperties);

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

@@ -0,0 +1,2 @@
+export declare const gapVar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+//# sourceMappingURL=vars.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../../lib/styles/vars.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,oFAAgC,CAAC"}

package/dist/styles/vars.css.js

@@ -0,0 +1,7 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/styles/vars.css.ts", "@autoguru/overdrive");
+import { createGlobalVar } from '@vanilla-extract/css';
+export const gapVar = createGlobalVar('od-var-gap');
+__vanilla_filescope__.endFileScope();

package/dist/test/vitest.setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=vitest.setup.d.ts.map

package/dist/test/vitest.setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.setup.d.ts","sourceRoot":"","sources":["../../lib/test/vitest.setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/themes/makeTheme.d.ts

@@ -1,5 +1,6 @@
 import type { BreakPoints, ColourMap, FlattenedColours, ThemeTokens } from '.';
 export declare const breakpoints: BreakPoints;
+export declare const mediaQuery: Record<import("./types").DeviceSize, string>;
 export declare const themeTokensWithLayer: (tokens: ThemeTokens) => {
     mode: string;
     body: import("./helpers").TokensFromContract<{

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

@@ -1 +1 @@
-{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAKF,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,eAAO,MAAM,UAAU,8CAGtB,CAAC;AAKF,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

@@ -3,6 +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 { mapValues } from 'es-toolkit';
 import { cssLayerTheme } from "../styles/layers.css.js";
 export const breakpoints = {
   mobile: '0px',
@@ -10,6 +11,7 @@ export const breakpoints = {
   desktop: '1024px',
   largeDesktop: '1920px'
 };
+export const mediaQuery = mapValues(breakpoints, breakpoint => `screen and (min-width: ${breakpoint})`);
 export const themeTokensWithLayer = tokens => _objectSpread({
   '@layer': cssLayerTheme
 }, tokens);

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export interface TestId {
     testId?: string;
 }
-export type WithTestId<T> = T & TestId;
+export type WithTestId<T = unknown> = T & TestId;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IAItB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAKD,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IAItB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAKD,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC"}

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 import type { Ref, RefCallback } from 'react';
 import { useEffect } from 'react';
+import type { SprinklesResponsive } from 'styles/sprinkles.css';
 export declare const isBrowser: boolean;
 export declare const isomorphicLayoutEffect: typeof useEffect;
 export declare const useUncontrolledState: <T extends unknown>(value: T, onChange?: (value: T) => void) => [T, (value: T) => void];
@@ -14,7 +15,7 @@ export declare const ownerWindow: (node?: Node) => Window;
 export declare const useEventCallback: <T extends Function>(fn: T) => (...args: any[]) => undefined;
 export declare const animate: <T extends HTMLElement>(element: T, property: keyof T, to: number, duration?: number) => (() => void) | void;
 export type Alignment = 'left' | 'right' | 'center';
-export declare const alignmentToFlexAlignment: (align: Alignment) => "center" | "flexStart" | "flexEnd";
+export declare const alignmentToFlexAlignment: (align: Alignment) => SprinklesResponsive["justifyContent"];
 export declare const arrayRingLookup: <T extends ArrayLike<unknown>>(collection: T) => (index: any) => unknown;
 export declare const noop: () => void;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AACzD,OAAO,EAEN,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,SAAS,SAAgC,CAAC;AAEvD,eAAO,MAAM,sBAAsB,kBAA0C,CAAC;AAG9E,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,OAAO,EACrD,OAAO,CAAC,EACR,WAAW,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAC3B,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAMxB,CAAC;AAGF,eAAO,MAAM,uBAAuB,GAAI,CAAC,EAAE,CAAC,EAC3C,eAAe,CAAC,EAChB,mBAAmB,CAAC,KAClB,CAAC,CAAC,EAAE,CAAC,CAWP,CAAC;AAaF,eAAO,MAAM,KAAK,GAAI,cAAc,MAAM,KAAG,MAAM,GAAG,IAkBrD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,SAM9C,CAAC;AAOF,wBAAgB,SAAS,CAAC,CAAC,EAC1B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAUhB;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,KAAG,OAAO,IAAI,OACF,CAAC;AAE3D,eAAO,MAAM,QAAQ,GAAI,MAAC,EAAE,cAAW,WAII,CAAC;AAE5C,eAAO,MAAM,aAAa,GAAI,OAAO,IAAI,KAAG,QACZ,CAAC;AAEjC,eAAO,MAAM,WAAW,GAAI,OAAO,IAAI,KAAG,MACC,CAAC;AAU5C,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,QAAQ,EAAE,IAAI,CAAC,kCAOzD,CAAC;AAMF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAC5C,SAAS,CAAC,EACV,UAAU,MAAM,CAAC,EACjB,IAAI,MAAM,EACV,iBAAc,KACZ,CAAC,MAAM,IAAI,CAAC,GAAG,IA8BjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,eAAO,MAAM,wBAAwB,GAAI,OAAO,SAAS,KAK3C,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAYjD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,SAAS,CAAC,OAAO,CAAC,EAC3D,YAAY,CAAC,MAGL,UAAK,YACb,CAAC;AAEF,eAAO,MAAM,IAAI,YAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AACzD,OAAO,EAEN,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,eAAO,MAAM,SAAS,SAAgC,CAAC;AAEvD,eAAO,MAAM,sBAAsB,kBAA0C,CAAC;AAG9E,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,OAAO,EACrD,OAAO,CAAC,EACR,WAAW,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAC3B,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAMxB,CAAC;AAGF,eAAO,MAAM,uBAAuB,GAAI,CAAC,EAAE,CAAC,EAC3C,eAAe,CAAC,EAChB,mBAAmB,CAAC,KAClB,CAAC,CAAC,EAAE,CAAC,CAWP,CAAC;AAaF,eAAO,MAAM,KAAK,GAAI,cAAc,MAAM,KAAG,MAAM,GAAG,IAkBrD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,SAM9C,CAAC;AAOF,wBAAgB,SAAS,CAAC,CAAC,EAC1B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAUhB;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,KAAG,OAAO,IAAI,OACF,CAAC;AAE3D,eAAO,MAAM,QAAQ,GAAI,MAAC,EAAE,cAAW,WAII,CAAC;AAE5C,eAAO,MAAM,aAAa,GAAI,OAAO,IAAI,KAAG,QACZ,CAAC;AAEjC,eAAO,MAAM,WAAW,GAAI,OAAO,IAAI,KAAG,MACC,CAAC;AAU5C,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,QAAQ,EAAE,IAAI,CAAC,kCAOzD,CAAC;AAMF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAC5C,SAAS,CAAC,EACV,UAAU,MAAM,CAAC,EACjB,IAAI,MAAM,EACV,iBAAc,KACZ,CAAC,MAAM,IAAI,CAAC,GAAG,IA8BjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,eAAO,MAAM,wBAAwB,GAAI,OAAO,SAAS,KAK3C,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAYpD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,SAAS,CAAC,OAAO,CAAC,EAC3D,YAAY,CAAC,MAGL,UAAK,YACb,CAAC;AAEF,eAAO,MAAM,IAAI,YAAW,CAAC"}

package/dist/utils/index.js

@@ -98,8 +98,8 @@ export const animate = function (element, property, to) {
 };
 export const alignmentToFlexAlignment = align => ({
   center: 'center',
-  left: 'flexStart',
-  right: 'flexEnd'
+  left: 'flex-start',
+  right: 'flex-end'
 })[align];
 export const arrayRingLookup = collection => {
   const len = collection.length;

package/dist/utils/sprinkles.d.ts

@@ -0,0 +1,11 @@
+import { type Sprinkles, type SprinklesLegacyColours, type SprinklesResponsive } from '../styles/sprinkles.css';
+export declare const isSprinklesProperty: (key: string) => boolean;
+export declare const isSprinklesLegacyColourProperty: (key: string) => boolean;
+export declare const isSprinklesResponsiveProperty: (key: string) => boolean;
+export declare const filterSprinklesProps: <T extends object>(props: T) => {
+    sprinklesProps: Sprinkles;
+    sprinklesResponsiveProps: SprinklesResponsive;
+    sprinklesLegacyColourProps: SprinklesLegacyColours;
+};
+export declare const filterNonSprinklesProps: <T extends object>(props: T) => { [K in keyof T]: T[K]; };
+//# sourceMappingURL=sprinkles.d.ts.map

package/dist/utils/sprinkles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sprinkles.d.ts","sourceRoot":"","sources":["../../lib/utils/sprinkles.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,SAAS,EAEd,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACxB,MAAM,yBAAyB,CAAC;AAKjC,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,YAE9C,CAAC;AAKF,eAAO,MAAM,+BAA+B,GAAI,KAAK,MAAM,YAI1D,CAAC;AAKF,eAAO,MAAM,6BAA6B,GAAI,KAAK,MAAM,YAExD,CAAC;AAQF,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC;oBAatC,SAAS;8BACC,mBAAmB;gCACjB,sBAAsB;CAEzD,CAAC;AAQH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC,QAe9D,CAAC,qBAEH,CAAC"}

package/dist/utils/sprinkles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { sprinkles, sprinklesLegacyColours, sprinklesResponsive } from "../styles/sprinkles.css.js";
+export const isSprinklesProperty = key => {
+  return sprinkles.properties.has(key);
+};
+export const isSprinklesLegacyColourProperty = key => {
+  return sprinklesLegacyColours.properties.has(key);
+};
+export const isSprinklesResponsiveProperty = key => {
+  return sprinklesResponsive.properties.has(key);
+};
+export const filterSprinklesProps = props => Object.entries(props).reduce((acc, _ref) => {
+  let [key, value] = _ref;
+  if (isSprinklesProperty(key)) {
+    acc.sprinklesProps[key] = value;
+  } else if (isSprinklesResponsiveProperty(key)) {
+    acc.sprinklesResponsiveProps[key] = value;
+  } else if (isSprinklesLegacyColourProperty(key)) {
+    acc.sprinklesLegacyColourProps[key] = value;
+  }
+  return acc;
+}, {
+  sprinklesProps: {},
+  sprinklesResponsiveProps: {},
+  sprinklesLegacyColourProps: {}
+});
+export const filterNonSprinklesProps = props => Object.entries(props).reduce((acc, _ref2) => {
+  let [key, value] = _ref2;
+  if (!(isSprinklesProperty(key) || isSprinklesResponsiveProperty(key) || isSprinklesLegacyColourProperty(key))) {
+    acc[key] = value;
+  }
+  return acc;
+}, {});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.42.0-next.1",
+	"version": "4.43.0-next.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -46,12 +46,13 @@
 		"lint:eslint": "eslint \"lib/**/*.+(ts|tsx)\" --fix --quiet",
 		"lint": "yarn run lint:eslint && yarn run lint:tsc",
 		"release": "changeset publish",
-		"start": "concurrently -k \"yarn:storybook\"",
+		"start": "yarn storybook",
 		"storybook:extract": "npx sb extract",
 		"storybook": "storybook dev -p 6006",
 		"storybook:build": "storybook build",
-		"test": "vitest",
-		"test:ci": "yarn vitest run --no-cache --coverage",
+		"test": "vitest --project=specs",
+		"test:ci": "yarn vitest run --no-cache --coverage --project=specs",
+		"test:a11y": "vitest run --coverage --project=storybook",
 		"typeEmit": "tsc -d --declarationDir dist --emitDeclarationOnly",
 		"watch": "tsc --watch",
 		"prepare": "husky"
@@ -69,25 +70,25 @@
 	"devDependencies": {
 		"@autoguru/babel-preset": "^3.2.0",
 		"@autoguru/eslint-plugin": "2.0.0",
-		"@autoguru/icons": "1.8.9",
+		"@autoguru/icons": "1.8.10",
 		"@autoguru/tsconfig": "^1.3.1",
 		"@autoguru/utilities": "^1.3.3",
-		"@babel/cli": "7.27.0",
-		"@babel/core": "7.26.10",
+		"@babel/cli": "7.27.1",
+		"@babel/core": "7.27.1",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-proposal-export-default-from": "^7.25.9",
+		"@babel/plugin-proposal-export-default-from": "7.27.1",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
 		"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
 		"@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.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.27.0",
-		"@babel/runtime-corejs3": "7.27.0",
+		"@babel/plugin-transform-classes": "7.27.1",
+		"@babel/plugin-transform-runtime": "7.27.1",
+		"@babel/plugin-transform-spread": "7.27.1",
+		"@babel/plugin-transform-strict-mode": "7.27.1",
+		"@babel/preset-env": "7.27.1",
+		"@babel/preset-react": "7.27.1",
+		"@babel/preset-typescript": "7.27.1",
+		"@babel/runtime-corejs3": "7.27.1",
 		"@changesets/cli": "2.29.2",
 		"@chromatic-com/storybook": "^3.2.6",
 		"@internationalized/date": "^3.7.0",
@@ -97,10 +98,10 @@
 		"@storybook/addon-a11y": "8.6.12",
 		"@storybook/addon-actions": "8.6.12",
 		"@storybook/addon-essentials": "8.6.12",
-		"@storybook/addon-interactions": "8.6.12",
 		"@storybook/addon-links": "8.6.12",
 		"@storybook/addon-onboarding": "8.6.12",
 		"@storybook/blocks": "8.6.12",
+		"@storybook/experimental-addon-test": "^8.6.12",
 		"@storybook/manager-api": "8.6.12",
 		"@storybook/react": "8.6.12",
 		"@storybook/react-vite": "8.6.12",
@@ -121,7 +122,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.1.1",
+		"@vitest/browser": "3.1.2",
+		"@vitest/coverage-v8": "3.1.2",
 		"@vitest/eslint-plugin": "1.1.43",
 		"babel-plugin-add-import-extension": "^1.6.0",
 		"babel-plugin-dev-expression": "^0.2.3",
@@ -135,7 +137,7 @@
 		"csstype": "^3.1.3",
 		"deepmerge": "^4.3.1",
 		"es-toolkit": "1.35.0",
-		"eslint": "9.25.1",
+		"eslint": "9.26.0",
 		"eslint-plugin-storybook": "0.12.0",
 		"husky": "^9.1.7",
 		"intersection-observer": "^0.12.2",
@@ -144,6 +146,7 @@
 		"magic-string": "^0.30.17",
 		"mini-css-extract-plugin": "^2.9.2",
 		"mockdate": "^3.0.5",
+		"playwright": "^1.52.0",
 		"plop": "^4.0.1",
 		"postcss": "^8.5.3",
 		"prettier": "^3.5.3",
@@ -163,9 +166,9 @@
 		"storybook-addon-tag-badges": "^1.4.0",
 		"typescript": "5.8.3",
 		"url-loader": "^4.1.1",
-		"vite": "6.3.2",
-		"vitest": "^3.1.1",
-		"webpack": "5.99.6"
+		"vite": "6.3.3",
+		"vitest": "^3.1.2",
+		"webpack": "5.99.7"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": ">=1.8.8",
@@ -191,4 +194,4 @@
 		"yarn": "4.9.1"
 	},
 	"packageManager": "yarn@4.9.1"
-}
+}

package/dist/components/Box/useBoxStyles.css.d.ts

@@ -1,48 +0,0 @@
-export declare const padding: {
-    top: Record<string | number, any>;
-    right: Record<string | number, any>;
-    bottom: Record<string | number, any>;
-    left: Record<string | number, any>;
-};
-export declare const margin: {
-    top: Record<string | number, any>;
-    right: Record<string | number, any>;
-    bottom: Record<string | number, any>;
-    left: Record<string | number, any>;
-};
-export declare const boxShadow: Record<string | number, any>;
-export declare const border: {
-    style: string;
-    colour: {
-        top: Record<"gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark", string>;
-        right: Record<"gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark", string>;
-        bottom: Record<"gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark", string>;
-        left: Record<"gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark", string>;
-    };
-    width: {
-        top: Record<string | number, any>;
-        right: Record<string | number, any>;
-        bottom: Record<string | number, any>;
-        left: Record<string | number, any>;
-    };
-};
-export declare const borderRadius: Record<string | number, any>;
-export declare const backgroundColours: Record<"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", string>;
-export declare const colours: Record<"success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information", string>;
-export declare const width: Record<"none" | "full", string>;
-export declare const height: Record<"full", string>;
-export declare const position: Record<"fixed" | "absolute" | "relative", string>;
-export declare const textAlign: Record<"left" | "right" | "center", string>;
-export declare const overflow: Record<"auto" | "hidden" | "visible" | "scroll", string>;
-export declare const display: Record<"none" | "flex" | "grid" | "block" | "contents" | "inline" | "inlineFlex" | "inlineBlock", string>;
-export declare const opacity: Record<0 | 1, string>;
-export declare const userSelect: Record<"none", string>;
-export declare const order: Record<string | number, any>;
-export declare const alignItems: Record<string | number, any>;
-export declare const flexDirection: Record<string | number, any>;
-export declare const flexGrow: Record<0 | 1, string>;
-export declare const flexShrink: Record<0, string>;
-export declare const flexWrap: Record<"nowrap" | "wrap", string>;
-export declare const justifyContent: Record<string | number, any>;
-export declare const pointerEvents: Record<"none", string>;
-//# sourceMappingURL=useBoxStyles.css.d.ts.map

package/dist/components/Box/useBoxStyles.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAwC1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAsBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,yzBAE7B,CAAC;AAEF,eAAO,MAAM,OAAO,4HAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,iCAOhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,2GAcnB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,KAAK,8BAOjB,CAAC;AAEF,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}