@autoguru/overdrive 4.44.7 → 4.44.9

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 BoxProps } from '../Box/Box';
 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<BoxProps['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,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,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,QAAQ,CAAC,SAAS,CAAC,EACnB,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,CA6B7C,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,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,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,QAAQ,CAAC,SAAS,CAAC,EACnB,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

@@ -1,7 +1,9 @@
 "use strict";
 
-import * as React from 'react';
-import { cloneElement } from 'react';
+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 React, { cloneElement } from 'react';
 import { useNullCheck } from "../../hooks/useNullCheck/index.js";
 import { elementStyles } from "../../styles/index.js";
 import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
@@ -16,6 +18,19 @@ export const Icon = ({
 }) => {
   var _icon$props$ariaLabe;
   useNullCheck(icon, 'Icon component received an empty icon prop.');
+  const boxProps = {
+    as: 'span',
+    display,
+    className: [resolveResponsiveStyle(size, styles.size), className],
+    odComponent: 'icon'
+  };
+
+  // Handle null/undefined icons by showing fallback without trying to clone
+  if (!icon) {
+    return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
+      children: "\u2B24"
+    }));
+  }
   const iconElement = /*#__PURE__*/cloneElement(icon, {
     className: elementStyles({
       as: 'svg',
@@ -26,11 +41,7 @@ export const Icon = ({
     '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 /*#__PURE__*/_jsx(Box, {
-    as: "span",
-    display: display,
-    className: [resolveResponsiveStyle(size, styles.size), className],
-    odComponent: "icon",
-    children: icon ? iconElement : '⬤'
-  });
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
+    children: iconElement
+  }));
 };

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.44.7",
+	"version": "4.44.9",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -59,7 +59,7 @@
 	"devDependencies": {
 		"@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",
@@ -79,25 +79,25 @@
 		"@babel/preset-typescript": "7.27.1",
 		"@babel/runtime-corejs3": "7.28.0",
 		"@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.16",
-		"@storybook/addon-docs": "9.0.16",
-		"@storybook/addon-links": "9.0.16",
-		"@storybook/addon-onboarding": "9.0.16",
-		"@storybook/addon-vitest": "9.0.16",
-		"@storybook/react-vite": "9.0.16",
+		"@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/react": "16.3.0",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.6.1",
-		"@types/node": "24.0.13",
-		"@types/react": "19.1.8",
-		"@types/react-dom": "19.1.6",
+		"@types/node": "24.2.0",
+		"@types/react": "19.1.9",
+		"@types/react-dom": "19.1.7",
 		"@types/webpack-env": "1.18.8",
 		"@typescript-eslint/utils": "8.35.1",
 		"@vanilla-extract/babel-plugin": "1.2.0",
@@ -114,22 +114,22 @@
 		"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.7",
+		"es-toolkit": "1.39.8",
 		"eslint": "9.30.1",
-		"eslint-plugin-storybook": "9.0.16",
+		"eslint-plugin-storybook": "9.1.0",
 		"husky": "9.1.7",
 		"intersection-observer": "0.12.2",
 		"jsdom": "26.1.0",
-		"lint-staged": "16.1.2",
+		"lint-staged": "16.1.4",
 		"magic-string": "0.30.17",
-		"mini-css-extract-plugin": "2.9.2",
+		"mini-css-extract-plugin": "2.9.3",
 		"mockdate": "3.0.5",
 		"playwright": "1.53.2",
 		"plop": "4.0.1",
@@ -143,17 +143,17 @@
 		"react-dom": "19.1.0",
 		"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.16",
+		"storybook": "9.1.0",
 		"storybook-addon-tag-badges": "2.0.1",
-		"typescript": "5.8.3",
+		"typescript": "5.9.2",
 		"url-loader": "4.1.1",
-		"vite": "7.0.4",
+		"vite": "7.0.6",
 		"vitest": "3.2.4",
-		"webpack": "5.100.1"
+		"webpack": "5.101.0"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": ">=1.8.8",
@@ -176,7 +176,7 @@
 		"webpack": "*"
 	},
 	"volta": {
-		"node": "22.17.0",
+		"node": "22.18.0",
 		"yarn": "4.9.2"
 	},
 	"packageManager": "yarn@4.9.2"