@autoguru/overdrive - npm Package Compare versions

Comparing version 4.39.0 to 4.39.1

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

@@ -15,5 +15,7 @@ import { type RecipeVariants } from '@vanilla-extract/recipes';
     size: {
-        small: string;
-        standard: string;
-        large: string;
+        small: string[];
+        standard: string[];
+        large: (string | {
+            padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        })[];
     };
@@ -20,0 +22,0 @@ }>;

dist/components/Badge/Badge.css.js

@@ -7,14 +7,14 @@ "use strict";
 import { styledIntentionalElement } from "../../styles/intentional.css.js";
-import { odStyle } from "../../styles/sprinkles.css.js";
+import { fontSize, fontWeight } from "../../styles/typography.css.js";
+import { themeContractVars as tokens } from "../../themes/theme.css.js";
 export const styledBadge = recipe({
-  base: [odStyle({
-    lineHeight: 'match',
+  base: [{
     overflow: 'hidden',
-    padding: '1',
     textOverflow: 'ellipsis',
     textTransform: 'uppercase',
-    whiteSpace: 'nowrap'
-  }), {
-    letterSpacing: '0.5px'
-  }],
+    letterSpacing: '0.5px',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    padding: tokens.space[1]
+  }, fontWeight.semiBold],
   variants: {
@@ -33,15 +33,7 @@ colour: {
     size: {
-      small: odStyle({
-        fontSize: 'xxs',
-        fontWeight: 'bold'
-      }),
-      standard: odStyle({
-        fontSize: 'xs',
-        fontWeight: 'semibold'
-      }),
-      large: odStyle({
-        fontSize: 'md',
-        fontWeight: 'semibold',
-        padding: '4'
-      })
+      small: [fontSize.xxs, fontWeight.bold],
+      standard: [fontSize.xs],
+      large: [fontSize.md, {
+        padding: tokens.space[4]
+      }]
     }
@@ -48,0 +40,0 @@ },

dist/components/Box/argTypes.d.ts

 import { ArgTypes } from '@storybook/react';
 import { type ComponentProps } from 'react';
-import { Tokens } from '../../themes/tokens';
 import { Box } from './Box';
-export declare const scaleOptions: Array<keyof Tokens['space']>;
+export declare const scaleOptions: string[];
 export declare const boxArgTypes: Partial<ArgTypes<ComponentProps<typeof Box>>>;
 //# sourceMappingURL=argTypes.d.ts.map

dist/components/Box/argTypes.js

@@ -6,9 +6,9 @@ "use strict";
 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 { defaultGamut } from "../../themes/base/tokens.js";
-export const scaleOptions = ['none', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+import { defaultGamut, tokens } from "../../themes/base/tokens.js";
+export const scaleOptions = Object.values(tokens.space);
+const boxShadowOptions = Object.keys(tokens.elevation);
+const borderRadiusOptions = Object.keys(tokens.border.radius);
 const scaledProps = ['padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingRight', 'paddingLeft', 'margin', 'marginX', 'marginY', 'marginTop', 'marginRight', 'marginLeft'];
-const boxShadowOptions = ['none', '1', '2', '3', '4', '5'];
-const borderRadiusOptions = ['none', '1', 'min', 'full', 'pill'];
 const widthOptions = ['full', 'none'];
-const oderOptions = [0, 1, 2];
+const orderOptions = [0, 1, 2];
 export const boxArgTypes = _objectSpread({
@@ -52,12 +52,8 @@ backgroundColour: {
   flexShrink: {
-    options: {
-      default: undefined,
-      '1': '1'
-    }
+    defaultValue: undefined,
+    options: ['1']
   },
   pointerEvents: {
-    options: {
-      default: undefined,
-      none: 'none'
-    }
+    defaultValue: undefined,
+    options: ['none']
   },
@@ -72,3 +68,3 @@ width: {
   order: {
-    options: oderOptions,
+    options: orderOptions,
     defaultValue: null,
@@ -75,0 +71,0 @@ control: {

dist/components/Box/Box.stories.d.ts

 import { StoryObj } from '@storybook/react';
-import React from 'react';
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Box").Props & React.RefAttributes<HTMLElement>>;
-    decorators: ((story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        children?: React.ReactNode;
-        as?: React.ElementType | undefined;
-        is?: React.ElementType | undefined;
-        boxShadow?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof typeof import("./useBoxStyles.css").boxShadow> | undefined;
-        display?: keyof typeof import("./useBoxStyles.css").display | undefined;
-        position?: keyof typeof import("./useBoxStyles.css").position | undefined;
-        width?: keyof typeof import("./useBoxStyles.css").width | undefined;
-        height?: keyof typeof import("./useBoxStyles.css").height | undefined;
-        backgroundColour?: keyof typeof import("./useBoxStyles.css").backgroundColours | undefined;
-        colour?: keyof typeof import("./useBoxStyles.css").colours | undefined;
-        opacity?: keyof typeof import("./useBoxStyles.css").opacity | undefined;
-        overflow?: keyof typeof import("./useBoxStyles.css").overflow | undefined;
-        userSelect?: keyof typeof import("./useBoxStyles.css").userSelect | undefined;
-        textAlign?: keyof typeof import("./useBoxStyles.css").textAlign | undefined;
-        pointerEvents?: keyof typeof import("./useBoxStyles.css").pointerEvents | undefined;
-        className?: import("clsx").ClassValue;
-        padding?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        paddingX?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        paddingY?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        paddingTop?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        paddingRight?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        paddingBottom?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        paddingLeft?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        margin?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        marginX?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        marginY?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        marginTop?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        marginRight?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        marginBottom?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        marginLeft?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["space"]> | undefined;
-        borderWidth?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["border"]["width"]> | undefined;
-        borderWidthX?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["border"]["width"]> | undefined;
-        borderWidthY?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["border"]["width"]> | undefined;
-        borderWidthTop?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["border"]["width"]> | undefined;
-        borderWidthRight?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["border"]["width"]> | undefined;
-        borderWidthBottom?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["border"]["width"]> | undefined;
-        borderWidthLeft?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof import("../../themes/tokens").Tokens["border"]["width"]> | undefined;
-        borderColour?: keyof typeof import("./useBoxStyles.css").border["colour"]["top"] | undefined;
-        borderColourX?: keyof typeof import("./useBoxStyles.css").border["colour"]["top"] | undefined;
-        borderColourY?: keyof typeof import("./useBoxStyles.css").border["colour"]["top"] | undefined;
-        borderColourTop?: keyof typeof import("./useBoxStyles.css").border["colour"]["top"] | undefined;
-        borderColourRight?: keyof typeof import("./useBoxStyles.css").border["colour"]["top"] | undefined;
-        borderColourBottom?: keyof typeof import("./useBoxStyles.css").border["colour"]["top"] | undefined;
-        borderColourLeft?: keyof typeof import("./useBoxStyles.css").border["colour"]["top"] | undefined;
-        borderRadius?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof typeof import("./useBoxStyles.css").borderRadius> | undefined;
-        alignItems?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof typeof import("./useBoxStyles.css").alignItems> | undefined;
-        order?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof typeof import("./useBoxStyles.css").order> | undefined;
-        flexDirection?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof typeof import("./useBoxStyles.css").flexDirection> | undefined;
-        flexGrow?: keyof typeof import("./useBoxStyles.css").flexGrow | undefined;
-        flexShrink?: keyof typeof import("./useBoxStyles.css").flexShrink | undefined;
-        flexWrap?: keyof typeof import("./useBoxStyles.css").flexWrap | undefined;
-        justifyContent?: import("../../utils/responsiveProps.css").ResponsiveProp<keyof typeof import("./useBoxStyles.css").justifyContent> | undefined;
-        value?: string | number | readonly string[] | undefined;
-        id?: string | undefined | undefined;
-        min?: number | string | undefined | undefined;
-        size?: number | undefined | undefined;
-        muted?: boolean | undefined | undefined;
-        name?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        content?: string | undefined | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
-        start?: number | undefined | undefined;
-        hidden?: boolean | undefined | undefined;
-        style?: React.CSSProperties | undefined;
-        default?: boolean | undefined | undefined;
-        wrap?: string | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        multiple?: boolean | undefined | undefined;
-        disabled?: boolean | undefined | undefined;
-        cite?: string | undefined | undefined;
-        data?: string | undefined | undefined;
-        form?: string | undefined | undefined;
-        label?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        span?: number | undefined | undefined;
-        summary?: string | undefined | undefined;
-        title?: string | undefined | undefined;
-        pattern?: string | undefined | undefined;
-        accept?: string | undefined | undefined;
-        acceptCharset?: string | undefined | undefined;
-        action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-        allowFullScreen?: boolean | undefined | undefined;
-        allowTransparency?: boolean | undefined | undefined;
-        alt?: string | undefined | undefined;
-        async?: boolean | undefined | undefined;
-        autoComplete?: string | undefined | undefined;
-        autoPlay?: boolean | undefined | undefined;
-        capture?: boolean | "user" | "environment" | undefined | undefined;
-        cellPadding?: number | string | undefined | undefined;
-        cellSpacing?: number | string | undefined | undefined;
-        charSet?: string | undefined | undefined;
-        challenge?: string | undefined | undefined;
-        checked?: boolean | undefined | undefined;
-        classID?: string | undefined | undefined;
-        cols?: number | undefined | undefined;
-        colSpan?: number | undefined | undefined;
-        controls?: boolean | undefined | undefined;
-        coords?: string | undefined | undefined;
-        crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-        dateTime?: string | undefined | undefined;
-        defer?: boolean | undefined | undefined;
-        download?: any;
-        encType?: string | undefined | undefined;
-        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-        formEncType?: string | undefined | undefined;
-        formMethod?: string | undefined | undefined;
-        formNoValidate?: boolean | undefined | undefined;
-        formTarget?: string | undefined | undefined;
-        frameBorder?: number | string | undefined | undefined;
-        headers?: string | undefined | undefined;
-        high?: number | undefined | undefined;
-        href?: string | undefined | undefined;
-        hrefLang?: string | undefined | undefined;
-        htmlFor?: string | undefined | undefined;
-        httpEquiv?: string | undefined | undefined;
-        integrity?: string | undefined | undefined;
-        keyParams?: string | undefined | undefined;
-        keyType?: string | undefined | undefined;
-        kind?: string | undefined | undefined;
-        list?: string | undefined | undefined;
-        loop?: boolean | undefined | undefined;
-        low?: number | undefined | undefined;
-        manifest?: string | undefined | undefined;
-        marginHeight?: number | undefined | undefined;
-        marginWidth?: number | undefined | undefined;
-        max?: number | string | undefined | undefined;
-        maxLength?: number | undefined | undefined;
-        media?: string | undefined | undefined;
-        mediaGroup?: string | undefined | undefined;
-        method?: string | undefined | undefined;
-        minLength?: number | undefined | undefined;
-        noValidate?: boolean | undefined | undefined;
-        optimum?: number | undefined | undefined;
-        placeholder?: string | undefined | undefined;
-        playsInline?: boolean | undefined | undefined;
-        poster?: string | undefined | undefined;
-        preload?: string | undefined | undefined;
-        readOnly?: boolean | undefined | undefined;
-        required?: boolean | undefined | undefined;
-        reversed?: boolean | undefined | undefined;
-        rows?: number | undefined | undefined;
-        rowSpan?: number | undefined | undefined;
-        sandbox?: string | undefined | undefined;
-        scope?: string | undefined | undefined;
-        scoped?: boolean | undefined | undefined;
-        scrolling?: string | undefined | undefined;
-        seamless?: boolean | undefined | undefined;
-        selected?: boolean | undefined | undefined;
-        shape?: string | undefined | undefined;
-        sizes?: string | undefined | undefined;
-        src?: string | undefined | undefined;
-        srcDoc?: string | undefined | undefined;
-        srcLang?: string | undefined | undefined;
-        srcSet?: string | undefined | undefined;
-        step?: number | string | undefined | undefined;
-        target?: string | undefined | undefined;
-        type?: string | undefined | undefined;
-        useMap?: string | undefined | undefined;
-        wmode?: string | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        accessKey?: string | undefined | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-        autoFocus?: boolean | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
-        contextMenu?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
-        tabIndex?: number | undefined | undefined;
-        radioGroup?: string | undefined | undefined;
-        role?: React.AriaRole | undefined;
-        about?: string | undefined | undefined;
-        datatype?: string | undefined | undefined;
-        inlist?: any;
-        prefix?: string | undefined | undefined;
-        property?: string | undefined | undefined;
-        rel?: string | undefined | undefined;
-        resource?: string | undefined | undefined;
-        rev?: string | undefined | undefined;
-        typeof?: string | undefined | undefined;
-        vocab?: string | undefined | undefined;
-        autoCorrect?: string | undefined | undefined;
-        autoSave?: string | undefined | undefined;
-        itemProp?: string | undefined | undefined;
-        itemScope?: boolean | undefined | undefined;
-        itemType?: string | undefined | undefined;
-        itemID?: string | undefined | undefined;
-        itemRef?: string | undefined | undefined;
-        results?: number | undefined | undefined;
-        security?: string | undefined | undefined;
-        unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-        popoverTarget?: string | undefined | undefined;
-        inert?: boolean | undefined | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-        "aria-activedescendant"?: string | undefined | undefined;
-        "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-        "aria-braillelabel"?: string | undefined | undefined;
-        "aria-brailleroledescription"?: string | undefined | undefined;
-        "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-colcount"?: number | undefined | undefined;
-        "aria-colindex"?: number | undefined | undefined;
-        "aria-colindextext"?: string | undefined | undefined;
-        "aria-colspan"?: number | undefined | undefined;
-        "aria-controls"?: string | undefined | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-        "aria-describedby"?: string | undefined | undefined;
-        "aria-description"?: string | undefined | undefined;
-        "aria-details"?: string | undefined | undefined;
-        "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-        "aria-errormessage"?: string | undefined | undefined;
-        "aria-expanded"?: (boolean | "false" | "true") | undefined;
-        "aria-flowto"?: string | undefined | undefined;
-        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-        "aria-hidden"?: (boolean | "false" | "true") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-        "aria-keyshortcuts"?: string | undefined | undefined;
-        "aria-label"?: string | undefined | undefined;
-        "aria-labelledby"?: string | undefined | undefined;
-        "aria-level"?: number | undefined | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-        "aria-modal"?: (boolean | "false" | "true") | undefined;
-        "aria-multiline"?: (boolean | "false" | "true") | undefined;
-        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-        "aria-owns"?: string | undefined | undefined;
-        "aria-placeholder"?: string | undefined | undefined;
-        "aria-posinset"?: number | undefined | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-        "aria-required"?: (boolean | "false" | "true") | undefined;
-        "aria-roledescription"?: string | undefined | undefined;
-        "aria-rowcount"?: number | undefined | undefined;
-        "aria-rowindex"?: number | undefined | undefined;
-        "aria-rowindextext"?: string | undefined | undefined;
-        "aria-rowspan"?: number | undefined | undefined;
-        "aria-selected"?: (boolean | "false" | "true") | undefined;
-        "aria-setsize"?: number | undefined | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-        "aria-valuemax"?: number | undefined | undefined;
-        "aria-valuemin"?: number | undefined | undefined;
-        "aria-valuenow"?: number | undefined | undefined;
-        "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
-        onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
-        onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
-        onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
-        onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
-        onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
-        onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
-        onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
-        onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
-        onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
-        onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
-        onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
-        onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onError?: React.ReactEventHandler<HTMLElement> | undefined;
-        onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
-        onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
-        onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
-        onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
-        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
-        onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
-        onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
-        onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
-        onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
-        onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
-        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
-        onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onPause?: React.ReactEventHandler<HTMLElement> | undefined;
-        onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
-        onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
-        onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
-        onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
-        onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
-        onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
-        onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
-        onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
-        onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
-        onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
-        onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
-        onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
-        onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onClick?: React.MouseEventHandler<HTMLElement> | undefined;
-        onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
-        onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
-        onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onDrag?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
-        onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onDrop?: React.DragEventHandler<HTMLElement> | undefined;
-        onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
-        onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
-        onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
-        onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
-        onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
-        onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
-        onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
-        onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
-        onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
-        onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
-        onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
-        onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
-        onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
-        onScroll?: React.UIEventHandler<HTMLElement> | undefined;
-        onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
-        onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
-        onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
-        onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
-        onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
-        onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
-        onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
-        ref?: React.Ref<HTMLElement> | undefined;
-        key?: React.Key | null | undefined;
-    }>) => React.JSX.Element)[];
-    argTypes: Partial<import("@storybook/react").ArgTypes<import("./Box").Props & React.RefAttributes<HTMLElement>>>;
+    component: import("react").ForwardRefExoticComponent<import("./Box").Props & import("react").RefAttributes<HTMLElement>>;
+    args: {
+        as: "div";
+        children: string;
+        colour: "primary";
+        backgroundColour: "primary";
+        borderRadius: string;
+        borderColour: "light";
+        borderWidth: "1";
+        boxShadow: string;
+        display: "inlineFlex";
+        margin: undefined;
+        padding: "6";
+        textAlign: undefined;
+    };
+    argTypes: Partial<import("@storybook/react").ArgTypes<import("./Box").Props & import("react").RefAttributes<HTMLElement>>>;
 };
@@ -441,2 +24,3 @@ export default meta;
 export declare const Standard: Story;
+export declare const ResponsiveProps: Story;
 //# sourceMappingURL=Box.stories.d.ts.map

dist/components/DateTimePicker/CalendarButton.js

@@ -8,4 +8,3 @@ "use strict";
 import { useButton } from 'react-aria';
-import { focusOutline } from "../../styles/focusOutline.css.js";
-import { odStyle } from "../../styles/sprinkles.css.js";
+import { styledButton } from "./DateTimePicker.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,29 +17,3 @@ export const CalendarButton = props => {
   return _jsx("button", _objectSpread(_objectSpread({}, buttonProps), {}, {
-    className: odStyle(_objectSpread({
-      alignItems: 'center',
-      background: {
-        initial: 'white',
-        hover: 'gray200',
-        disabled: 'white'
-      },
-      borderColor: {
-        initial: 'gray',
-        disabled: 'light'
-      },
-      borderRadius: '2',
-      borderStyle: 'solid',
-      borderWidth: '1',
-      color: {
-        initial: 'gray600',
-        disabled: 'gray300'
-      },
-      cursor: {
-        hover: 'pointer',
-        disabled: 'default'
-      },
-      display: 'flex',
-      justifyContent: 'center',
-      padding: 'none',
-      size: '7'
-    }, focusOutline)),
+    className: styledButton(),
     ref: ref,
@@ -47,0 +20,0 @@ children: props.children

dist/components/DateTimePicker/CalendarGrid.js

@@ -12,5 +12,4 @@ "use strict";
 import { useCalendarCell, useCalendarGrid, useLocale } from 'react-aria';
-import { odStyle } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
-import { calendarGridStyle, styledCell } from "./DateTimePicker.css.js";
+import { calendarGridStyle, styledCell, tdStyle, thStyle } from "./DateTimePicker.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -35,6 +34,3 @@ const CalendarCell = _ref => {
   return _jsx("td", _objectSpread(_objectSpread({}, cellProps), {}, {
-    className: odStyle({
-      padding: '1',
-      textAlign: 'center'
-    }),
+    className: tdStyle,
     children: _jsx("div", _objectSpread(_objectSpread(_objectSpread({}, buttonProps), {}, {
@@ -71,8 +67,6 @@ ref: ref,
       children: _jsx("tr", {
-        children: weekDays.map((day, index) => _jsx("th", {
-          className: odStyle({
-            color: 'gray600'
-          }),
+        children: weekDays.map(day => _jsx("th", {
+          className: thStyle,
           children: day
-        }, index))
+        }, day))
       })
@@ -83,6 +77,6 @@ })), _jsx("tbody", {
       }).keys()).map(weekIndex => _jsx("tr", {
-        children: state.getDatesInWeek(weekIndex).map((date, i) => date ? _jsx(CalendarCell, {
+        children: state.getDatesInWeek(weekIndex).map((date, idx) => date ? _jsx(CalendarCell, {
           state: state,
           date: date
-        }, i) : _jsx("td", {}, i))
+        }, idx) : _jsx("td", {}, idx))
       }, weekIndex))
@@ -89,0 +83,0 @@ })]

dist/components/DateTimePicker/DateTimePicker.css.d.ts

@@ -5,2 +5,3 @@ export declare const queryContainer: string;
 export declare const calendarGridStyle: string;
+export declare const calendarStyle: string;
 export declare const styledCell: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -11,2 +12,12 @@ [x: string]: {
 }>;
+export declare const styledButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+export declare const thStyle: string;
+export declare const tdStyle: string;
+export declare const headingStyle: string;
+export declare const subheadingStyle: string;
+export declare const titleStyle: string;
 //# sourceMappingURL=DateTimePicker.css.d.ts.map

dist/components/DateTimePicker/DateTimePicker.css.js

 "use strict";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DateTimePicker/DateTimePicker.css.ts", "@autoguru/overdrive");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createContainer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { focusOutline } from "../../styles/focusOutline.css.js";
-import { odStyle } from "../../styles/sprinkles.css.js";
-import { tokens } from "../../themes/base/tokens.js";
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
+import { styledFont } from "../../styles/typography.css.js";
 import { breakpoints } from "../../themes/makeTheme.js";
+import { themeContractVars as tokens } from "../../themes/theme.css.js";
+import { interactionStyle } from "../../utils/css.js";
 export const queryContainer = createContainer("queryContainer");
@@ -35,27 +34,82 @@ export const queryContainerStyle = style({
 }, "calendarGridStyle");
+export const calendarStyle = style({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginBottom: tokens.space[2],
+  padding: `0 ${tokens.space[1]}`
+}, "calendarStyle");
 export const styledCell = recipe({
-  base: [odStyle(_objectSpread({
+  base: [{
     alignItems: 'center',
-    background: {
-      initial: 'white',
-      hover: 'gray200',
-      selected: 'gray900',
-      disabled: 'white'
+    backgroundColor: tokens.colours.background.body,
+    borderRadius: tokens.border.radius[2],
+    color: tokens.colours.foreground.body,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    fontSize: 'md',
+    justifyContent: 'center'
+  }, interactionStyle({
+    hoverNotSelected: {
+      backgroundColor: tokens.colours.gamut.gray200
     },
-    borderRadius: '2',
-    color: {
-      initial: 'gray900',
-      selected: 'white',
-      disabled: 'gray400'
+    selected: {
+      backgroundColor: tokens.colours.foreground.body,
+      color: tokens.colours.background.body
     },
-    cursor: {
-      initial: 'pointer',
-      disabled: 'default'
+    disabled: {
+      backgroundColor: tokens.colours.background.body,
+      color: tokens.colours.gamut.gray400,
+      cursor: 'default'
+    }
+  }), sprinklesResponsive({
+    size: '7'
+  }), focusOutlineStyle]
+}, "styledCell");
+export const styledButton = recipe({
+  base: [{
+    alignItems: 'center',
+    backgroundColor: tokens.colours.background.body,
+    borderColor: tokens.border.colours.gray,
+    borderRadius: tokens.border.radius[2],
+    borderStyle: 'solid',
+    borderWidth: tokens.border.width[1],
+    color: tokens.colours.gamut.gray600,
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: 0
+  }, interactionStyle({
+    hover: {
+      backgroundColor: tokens.colours.gamut.gray200
     },
-    display: 'inline-flex',
-    fontSize: 'md',
-    justifyContent: 'center',
+    disabled: {
+      backgroundColor: tokens.colours.background.body,
+      borderColor: tokens.border.colours.light,
+      color: tokens.colours.gamut.gray300,
+      cursor: 'not-allowed'
+    }
+  }), sprinklesResponsive({
     size: '7'
-  }, focusOutline))]
-}, "styledCell");
+  }), focusOutlineStyle]
+}, "styledButton");
+export const thStyle = style({
+  color: tokens.colours.gamut.gray600
+}, "thStyle");
+export const tdStyle = style({
+  padding: tokens.space[1],
+  textAlign: 'center'
+}, "tdStyle");
+export const headingStyle = styledFont({
+  size: '3xl',
+  weight: 'bold'
+});
+export const subheadingStyle = styledFont({
+  size: 'xl',
+  weight: 'bold'
+});
+export const titleStyle = style({
+  fontWeight: tokens.typography.fontWeight.bold,
+  margin: 0
+}, "titleStyle");
 __vanilla_filescope__.endFileScope();

dist/components/DateTimePicker/DateTimePicker.js

@@ -11,3 +11,3 @@ "use strict";
 import { useCalendarState } from 'react-stately';
-import { odStyle } from "../../styles/sprinkles.css.js";
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
@@ -18,3 +18,3 @@ import { Icon } from "../Icon/index.js";
 import { CalendarGrid } from "./CalendarGrid.js";
-import { layoutStyle, queryContainerStyle } from "./DateTimePicker.css.js";
+import { calendarStyle, headingStyle, layoutStyle, queryContainerStyle, subheadingStyle, titleStyle } from "./DateTimePicker.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -105,6 +105,3 @@ const defaultEnglish = {
       id: titleId,
-      className: odStyle({
-        font: '2xl',
-        fontWeight: 'bold'
-      }),
+      className: headingStyle,
       children: title
@@ -114,19 +111,10 @@ }), _jsxs("div", {
       children: [_jsxs("div", {
-        className: odStyle({
+        className: sprinklesResponsive({
           flexShrink: 0
         }),
         children: [_jsx("h3", {
-          className: odStyle({
-            font: 'xl',
-            fontWeight: 'bold'
-          }),
+          className: subheadingStyle,
           children: (_lang$dateLabel = lang === null || lang === void 0 ? void 0 : lang.dateLabel) !== null && _lang$dateLabel !== void 0 ? _lang$dateLabel : defaultEnglish.dateLabel
         }), _jsxs("div", _objectSpread(_objectSpread({}, calendarProps), {}, {
-          className: odStyle({
-            alignItems: 'center',
-            display: 'flex',
-            justifyContent: 'space-between',
-            marginBottom: '2',
-            paddingX: '1'
-          }),
+          className: calendarStyle,
           children: [_jsx(CalendarButton, _objectSpread(_objectSpread({}, prevButtonProps), {}, {
@@ -139,6 +127,3 @@ "aria-label": (_lang$prevLabel = lang === null || lang === void 0 ? void 0 : lang.prevLabel) !== null && _lang$prevLabel !== void 0 ? _lang$prevLabel : defaultEnglish.prevLabel,
           })), _jsx("h4", {
-            className: odStyle({
-              fontWeight: 'bold',
-              margin: 'none'
-            }),
+            className: titleStyle,
             children: calendarTitle
@@ -157,10 +142,7 @@ }), _jsx(CalendarButton, _objectSpread(_objectSpread({}, nextButtonProps), {}, {
       }), _jsxs("div", {
-        className: odStyle({
+        className: sprinklesResponsive({
           flexGrow: 1
         }),
         children: [_jsx("h3", {
-          className: odStyle({
-            font: 'xl',
-            fontWeight: 'bold'
-          }),
+          className: subheadingStyle,
           children: (_lang$timeLabel = lang === null || lang === void 0 ? void 0 : lang.timeLabel) !== null && _lang$timeLabel !== void 0 ? _lang$timeLabel : defaultEnglish.timeLabel
@@ -167,0 +149,0 @@ }), _jsx(OptionGrid, _objectSpread({}, optionGridComponentProps))]

dist/components/HorizontalAutoScroller/HorizontalAutoScroller.stories.d.ts

@@ -10,3 +10,3 @@ import { StoryObj } from '@storybook/react';
         space: {
-            options: import("../../themes/tokens").SpaceScale[];
+            options: string[];
             control: {
@@ -13,0 +13,0 @@ type: "select";

dist/components/Inline/Inline.stories.d.ts

@@ -21,3 +21,3 @@ import { StoryObj } from '@storybook/react';
         space: {
-            options: import("../../themes/tokens").SpaceScale[];
+            options: string[];
             control: {
@@ -24,0 +24,0 @@ type: "select";

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

@@ -55,2 +55,4 @@ import { type RecipeVariants } from '@vanilla-extract/recipes';
 export type StyledRadioButtonProps = NonNullable<RecipeVariants<typeof styledRadioButton>>;
+export declare const labelStyle: string;
+export declare const descriptionStyle: string;
 //# sourceMappingURL=OptionGrid.css.d.ts.map

dist/components/OptionGrid/OptionGrid.css.js

 "use strict";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/OptionGrid/OptionGrid.css.ts", "@autoguru/overdrive");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createContainer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { focusOutline } from "../../styles/focusOutline.css.js";
-import { odStyle } from "../../styles/sprinkles.css.js";
-import { tokens } from "../../themes/base/tokens.js";
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
 import { breakpoints } from "../../themes/makeTheme.js";
+import { themeContractVars as tokens } from "../../themes/theme.css.js";
+import { interactionStyle, notDisabled, notSelected } from "../../utils/css.js";
 export const gridContainer = createContainer("gridContainer");
@@ -38,3 +36,3 @@ export const gridContainerStyle = style({
 export const styledGrid = recipe({
-  base: odStyle({
+  base: sprinklesResponsive({
     display: 'grid',
@@ -84,52 +82,47 @@ gridColumns: {
 const optionTransition = style({
-  transition: 'background 80ms ease-in'
+  transition: 'background 100ms ease-in, border-color 100ms ease-in'
 }, "optionTransition");
-const pseudoThickBorder = style({
-  selectors: {
-    '&[data-selected]:after': {
-      outlineColor: tokens.colours.gamut.black900,
-      outlineStyle: 'solid',
-      outlineWidth: tokens.border.width[2],
-      borderRadius: 'inherit',
-      content: '',
-      display: 'block',
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      left: 0,
-      top: 0
-    }
-  }
-}, "pseudoThickBorder");
 export const styledGridItem = recipe({
   base: [{
-    minHeight: '80px',
-    userSelect: 'none'
-  }, odStyle(_objectSpread(_objectSpread({
     alignItems: 'center',
-    background: {
-      initial: 'white',
-      focusVisible: 'gray200',
-      hover: 'gray200',
-      selected: 'white'
-    },
-    borderColor: {
-      initial: 'gray',
-      focusVisible: 'light',
-      hover: 'light',
-      selected: 'dark'
-    },
-    borderRadius: '2',
+    backgroundColor: tokens.colours.background.body,
+    borderColor: tokens.border.colours.gray,
+    borderRadius: tokens.border.radius[2],
     borderStyle: 'solid',
-    borderWidth: '1',
-    cursor: {
-      hover: 'pointer'
+    borderWidth: tokens.border.width[1],
+    minHeight: '80px',
+    userSelect: 'none',
+    display: 'flex',
+    gap: tokens.space[2],
+    padding: `${tokens.space[3]} ${tokens.space[4]}`,
+    position: 'relative'
+  }, interactionStyle({
+    hover: {
+      cursor: 'pointer'
     },
-    display: 'flex'
-  }, focusOutline), {}, {
-    gap: '2',
-    paddingX: '4',
-    paddingY: '3',
-    position: 'relative'
-  })), optionTransition, pseudoThickBorder]
+    selected: {
+      backgroundColor: tokens.colours.background.body,
+      borderColor: tokens.border.colours.dark
+    }
+  }), {
+    selectors: {
+      '&[data-selected]:after': {
+        outlineColor: tokens.colours.gamut.black900,
+        outlineStyle: 'solid',
+        outlineWidth: tokens.border.width[2],
+        borderRadius: 'inherit',
+        content: '',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0
+      },
+      '&:hover:not([data-selected]), &[data-focus-visible]:not([data-selected])': {
+        backgroundColor: tokens.border.colours.light,
+        borderColor: tokens.border.colours.light
+      }
+    }
+  }, optionTransition, focusOutlineStyle]
 }, "styledGridItem");
@@ -141,23 +134,20 @@ export const styleIndicator = style({
 export const styledCheckbox = recipe({
-  base: [odStyle({
+  base: [{
+    backgroundColor: tokens.colours.background.body,
+    borderRadius: tokens.border.radius[1],
+    color: 'transparent'
+  }, interactionStyle({
+    selected: {
+      backgroundColor: tokens.colours.foreground.body,
+      color: tokens.colours.background.body
+    }
+  }), {
+    selectors: {
+      [`&[data-hover]${notSelected}${notDisabled}, &[data-focus-visible]${notSelected}${notDisabled}`]: {
+        backgroundColor: tokens.colours.gamut.gray300,
+        color: tokens.colours.background.body
+      }
+    }
+  }, sprinklesResponsive({
     alignItems: 'center',
-    background: {
-      initial: 'white',
-      focusVisible: 'gray300',
-      hover: 'gray300',
-      selected: 'gray900'
-    },
-    borderColor: {
-      initial: 'gray',
-      selected: 'dark'
-    },
-    borderRadius: '1',
-    borderStyle: 'solid',
-    borderWidth: '1',
-    color: {
-      initial: 'transparent',
-      focusVisible: 'white',
-      hover: 'white',
-      selected: 'white'
-    },
     display: 'flex',
@@ -191,21 +181,32 @@ flexShrink: 0,
 export const styledRadioButton = recipe({
-  base: [odStyle({
+  base: [{
+    backgroundColor: tokens.colours.background.body,
+    borderColor: tokens.border.colours.gray,
+    borderRadius: tokens.border.radius.full,
+    borderStyle: 'solid',
+    borderWidth: tokens.border.width[1],
+    position: 'relative'
+  }, interactionStyle({
+    selected: {
+      backgroundColor: tokens.colours.foreground.body,
+      borderColor: tokens.border.colours.dark
+    }
+  }), sprinklesResponsive({
     alignItems: 'center',
-    background: {
-      initial: 'white',
-      hover: 'gray300',
-      focusVisible: 'gray300',
-      selected: 'gray900'
-    },
-    borderColor: {
-      initial: 'gray',
-      selected: 'dark'
-    },
-    borderRadius: 'full',
-    borderStyle: 'solid',
-    borderWidth: '1',
-    position: 'relative',
     size: '6'
-  }), pseudoRadio, optionTransition]
+  }), {
+    selectors: {
+      '&[data-hover]:not([data-selected]),&[focus-visible]:not([data-selected])': {
+        backgroundColor: tokens.colours.gamut.gray300,
+        borderColor: tokens.colours.gamut.gray300
+      }
+    }
+  }, pseudoRadio, optionTransition]
 }, "styledRadioButton");
+export const labelStyle = style({
+  fontSize: tokens.typography.size[4].fontSize
+}, "labelStyle");
+export const descriptionStyle = style({
+  fontSize: tokens.typography.size[2].fontSize
+}, "descriptionStyle");
 __vanilla_filescope__.endFileScope();

dist/components/OptionGrid/OptionGrid.js

@@ -12,6 +12,5 @@ "use strict";
 import { ListBox, ListBoxItem, Text } from 'react-aria-components';
-import { odStyle } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
-import { gridContainerStyle, styledCheckbox, styledGrid, styledGridItem, styledRadioButton, styleIndicator } from "./OptionGrid.css.js";
+import { descriptionStyle, gridContainerStyle, labelStyle, styledCheckbox, styledGrid, styledGridItem, styledRadioButton, styleIndicator } from "./OptionGrid.css.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -86,5 +85,3 @@ export const OptionGrid = _ref => {
                   elementType: "div",
-                  className: odStyle({
-                    fontSize: 'md'
-                  }),
+                  className: labelStyle,
                   children: label
@@ -94,5 +91,3 @@ }), description && _jsx(Text, {
                   elementType: "div",
-                  className: odStyle({
-                    fontSize: 'xs'
-                  }),
+                  className: descriptionStyle,
                   children: description
@@ -99,0 +94,0 @@ })]

dist/components/OptionList/OptionList.css.d.ts

@@ -1,4 +0,4 @@
-export declare const styleGroup: string;
-export declare const styleGroupLabel: string;
-export declare const styleDescription: string;
+export declare const groupStyle: string;
+export declare const groupLabelStyle: string;
+export declare const descriptionStyle: string;
 export declare const styledOptionItem: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9,2 +9,3 @@ [x: string]: {
 }>;
+export declare const itemLabelStyle: string;
 export declare const checkbox: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -11,0 +12,0 @@ [x: string]: {

dist/components/OptionList/OptionList.css.js

 "use strict";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/OptionList/OptionList.css.ts", "@autoguru/overdrive");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { focusOutline } from "../../styles/focusOutline.css.js";
-import { odStyle } from "../../styles/sprinkles.css.js";
-import { tokens } from "../../themes/base/tokens.js";
-export const styleGroup = odStyle({
-  marginTop: '6'
-});
-export const styleGroupLabel = odStyle({
-  font: 'xxl',
-  fontWeight: 'bold',
-  marginBottom: '3'
-});
-export const styleDescription = odStyle({
-  color: 'gray400',
-  font: 'md'
-});
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
+import { themeContractVars as tokens } from "../../themes/theme.css.js";
+import { interactionStyle } from "../../utils/css.js";
+export const groupStyle = style({
+  marginTop: tokens.space['6']
+}, "groupStyle");
+export const groupLabelStyle = style({
+  fontSize: tokens.typography.size['7'].fontSize,
+  fontWeight: tokens.typography.fontWeight.bold,
+  lineHeight: tokens.typography.size['7'].lineHeight,
+  marginBottom: tokens.space['3']
+}, "groupLabelStyle");
+export const descriptionStyle = style({
+  color: tokens.colours.gamut.gray400,
+  fontSize: tokens.typography.size[4].fontSize,
+  lineHeight: tokens.typography.size[4].lineHeight
+}, "descriptionStyle");
 const buttonBorderRadius = tokens.border.radius['2'];
-const optionBorders = style({
-  selectors: {
-    ['&+&']: {
-      borderTopStyle: 'none'
-    },
-    ['&:first-child']: {
-      borderTopLeftRadius: buttonBorderRadius,
-      borderTopRightRadius: buttonBorderRadius
-    },
-    ['&:last-child']: {
-      borderBottomLeftRadius: buttonBorderRadius,
-      borderBottomRightRadius: buttonBorderRadius
-    }
-  }
-}, "optionBorders");
 export const styledOptionItem = recipe({
   base: [{
+    background: tokens.colours.background.body,
+    borderColor: tokens.border.colours.gray,
+    borderStyle: 'solid',
+    borderWidth: tokens.border.width['1'],
+    display: 'flex',
+    gap: tokens.space['2'],
+    padding: `${tokens.space['3']} ${tokens.space['4']}`,
+    width: '100%',
     userSelect: 'none'
-  }, odStyle({
-    background: {
-      initial: 'white',
-      hover: 'gray200',
-      focusVisible: 'gray200',
-      disabled: 'white'
+  }, interactionStyle({
+    disabled: {
+      background: tokens.colours.background.body,
+      cursor: 'default'
     },
-    borderColor: 'gray',
-    borderStyle: 'solid',
-    borderWidth: '1',
-    cursor: {
-      hover: 'pointer',
-      disabled: 'default'
+    hover: {
+      background: tokens.colours.gamut.gray200,
+      cursor: 'pointer'
     },
-    display: 'flex',
-    gap: '2',
-    outlineColor: 'link',
-    outlineStyle: 'solid',
-    outlineOffset: 'md',
-    outlineWidth: {
-      initial: 'none',
-      focusVisible: 'default'
-    },
-    paddingX: '4',
-    paddingY: '3',
-    width: '100%'
-  }), optionBorders]
+    focusVisible: {
+      background: tokens.colours.gamut.gray200
+    }
+  }), {
+    selectors: {
+      ['&+&']: {
+        borderTopStyle: 'none'
+      },
+      ['&:first-child']: {
+        borderTopLeftRadius: buttonBorderRadius,
+        borderTopRightRadius: buttonBorderRadius
+      },
+      ['&:last-child']: {
+        borderBottomLeftRadius: buttonBorderRadius,
+        borderBottomRightRadius: buttonBorderRadius
+      }
+    }
+  }, focusOutlineStyle]
 }, "styledOptionItem");
+export const itemLabelStyle = style({
+  alignSelf: 'center',
+  fontSize: tokens.typography.size['3'].fontSize,
+  lineHeight: tokens.typography.size['3'].lineHeight,
+  width: '100%'
+}, "itemLabelStyle");
+const checkboxTransition = style({
+  transitionProperty: 'background',
+  transitionTimingFunction: 'ease-in',
+  transitionDuration: '100ms'
+}, "checkboxTransition");
 const checkboxHovered = style({
   selectors: {
-    [`${styledOptionItem.classNames.base}:hover &:not([data-checked]):not([data-disabled])`]: {
+    [`${styledOptionItem.classNames.base}:hover &:not([data-checked],[data-disabled])`]: {
       color: tokens.colours.background.body,
-      background: tokens.colours.gamut.gray300,
-      transitionDuration: '15ms'
+      background: tokens.colours.gamut.gray300
     }
   }
 }, "checkboxHovered");
-const checkboxTransition = style({
-  transitionProperty: 'background',
-  transitionTimingFunction: 'ease-in',
-  transitionDuration: '80ms'
-}, "checkboxTransition");
 export const checkbox = recipe({
-  base: [odStyle(_objectSpread(_objectSpread({
+  base: [{
+    background: tokens.colours.background.body,
+    borderColor: tokens.border.colours.gray,
+    borderStyle: 'solid',
+    borderRadius: tokens.border.radius['1'],
+    borderWidth: tokens.border.width['1'],
+    color: 'transparent'
+  }, interactionStyle({
+    selected: {
+      background: tokens.colours.gamut.gray900,
+      borderColor: tokens.border.colours.dark,
+      color: tokens.colours.background.body
+    }
+  }), sprinklesResponsive({
     alignItems: 'center',
-    background: {
-      initial: 'white',
-      checked: 'gray900'
-    },
-    borderColor: {
-      initial: 'gray',
-      checked: 'dark'
-    },
-    borderStyle: 'solid',
-    borderRadius: '1',
-    borderWidth: '1',
-    color: {
-      initial: 'transparent',
-      checked: 'white'
-    },
     display: 'flex',
     flexShrink: 0,
-    justifyContent: 'center'
-  }, focusOutline), {}, {
+    justifyContent: 'center',
     size: '6'
-  })), checkboxTransition, checkboxHovered]
+  }), checkboxHovered, checkboxTransition]
 }, "checkbox");
 __vanilla_filescope__.endFileScope();

dist/components/OptionList/OptionList.js

@@ -10,3 +10,3 @@ "use strict";
 import { dataAttrs } from "../../utils/dataAttrs.js";
-import { styleDescription, styleGroup, styleGroupLabel } from "./OptionList.css.js";
+import { descriptionStyle, groupStyle, groupLabelStyle } from "./OptionList.css.js";
 import { OptionListItem, ItemSplitLabel } from "./OptionListItem.js";
@@ -39,6 +39,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     children: [_jsx("div", _objectSpread(_objectSpread({}, labelProps), {}, {
-      className: styleGroupLabel,
+      className: groupLabelStyle,
       children: label
     })), description && _jsx("div", _objectSpread(_objectSpread({}, descriptionProps), {}, {
-      className: styleDescription,
+      className: descriptionStyle,
       children: description
@@ -48,3 +48,3 @@ })), _jsx(OptionListContext.Provider, {
       children: _jsx("div", {
-        className: styleGroup,
+        className: groupStyle,
         children: children
@@ -51,0 +51,0 @@ })

dist/components/OptionList/OptionListItem.js

@@ -9,3 +9,3 @@ "use strict";
 import { useCheckboxGroupItem, useFocusRing, mergeProps } from 'react-aria';
-import { odStyle } from "../../styles/sprinkles.css.js";
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
@@ -15,3 +15,3 @@ import { Icon } from "../Icon/index.js";
 import { OptionListContext } from "./OptionList.js";
-import { checkbox, styledOptionItem } from "./OptionList.css.js";
+import { checkbox, itemLabelStyle, styledOptionItem } from "./OptionList.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,3 +39,3 @@ export const OptionListItem = props => {
     }), _jsxs("div", {
-      className: odStyle({
+      className: sprinklesResponsive({
         display: 'flex',
@@ -54,7 +54,3 @@ gap: '2',
       })), _jsx("div", {
-        className: odStyle({
-          alignSelf: 'center',
-          font: 'sm',
-          width: '100%'
-        }),
+        className: itemLabelStyle,
         children: props.children
@@ -73,3 +69,3 @@ })]
   return _jsx("div", {
-    className: odStyle({
+    className: sprinklesResponsive({
       display: 'flex',
@@ -79,7 +75,7 @@ gap: '2',
     }),
-    children: children !== null && children !== void 0 ? children : content === null || content === void 0 ? void 0 : content.map((item, idx) => _jsx("span", {
+    children: children !== null && children !== void 0 ? children : content === null || content === void 0 ? void 0 : content.map(item => _jsx("span", {
       children: item
-    }, idx))
+    }, item))
   });
 };
 ItemSplitLabel.displayName = 'OptionList.ItemSplitLabel';

dist/components/SearchBar/SearchBar.css.d.ts

 export declare const styledSearchBar: import("@vanilla-extract/recipes").RuntimeFn<{
-    disabled: {
-        true: string;
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
     };
@@ -16,2 +16,3 @@ }>;
 }>;
+export declare const fieldWrapper: string;
 //# sourceMappingURL=SearchBar.css.d.ts.map

dist/components/SearchBar/SearchBar.css.js

 "use strict";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/SearchBar/SearchBar.css.ts", "@autoguru/overdrive");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { focusOutline } from "../../styles/focusOutline.css.js";
-import { odStyle } from "../../styles/sprinkles.css.js";
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
 import { tokens } from "../../themes/base/tokens.js";
+import { interactionStyle } from "../../utils/css.js";
 const hideWebkitAppearance = style({
@@ -24,2 +22,5 @@ selectors: {
       color: tokens.colours.gamut.gray400
+    },
+    '&:disabled::placeholder': {
+      color: tokens.colours.gamut.gray300
     }
@@ -29,53 +30,46 @@ }
 export const styledSearchBar = recipe({
-  base: [odStyle(_objectSpread(_objectSpread({
+  base: [{
     alignItems: 'center',
-    background: {
-      initial: 'white',
-      hover: 'gray200',
-      focus: 'white'
+    backgroundColor: tokens.colours.background.body,
+    borderColor: tokens.border.colours.gray,
+    borderRadius: tokens.border.radius[3],
+    borderStyle: 'solid',
+    borderWidth: tokens.border.width[2],
+    color: tokens.colours.gamut.gray400,
+    display: 'flex',
+    gap: tokens.space[2],
+    padding: `0 ${tokens.space[4]}`
+  }, interactionStyle({
+    focus: {
+      borderColor: tokens.border.colours.dark,
+      color: tokens.colours.gamut.gray900
     },
-    borderColor: {
-      initial: 'gray',
-      hover: 'light',
-      focus: 'dark'
+    disabled: {
+      borderColor: tokens.border.colours.light,
+      cursor: 'not-allowed',
+      color: tokens.colours.gamut.gray300
     },
-    borderRadius: '3',
-    borderStyle: 'solid',
-    borderWidth: '2',
-    color: {
-      initial: 'gray400',
-      focus: 'gray900'
+    hover: {
+      cursor: 'text'
     },
-    cursor: {
-      hover: 'text'
-    },
-    display: 'flex'
-  }, focusOutline), {}, {
-    gap: '2',
-    paddingX: '4'
-  }))],
-  variants: {
-    disabled: {
-      true: odStyle({
-        color: 'gray500',
-        cursor: 'not-allowed'
-      })
+    hoverNotFocus: {
+      backgroundColor: tokens.border.colours.light,
+      borderColor: tokens.border.colours.light
     }
-  }
+  }), focusOutlineStyle]
 }, "styledSearchBar");
 export const styledInput = recipe({
-  base: [odStyle({
+  base: [{
     background: 'transparent',
-    borderWidth: 'none',
-    height: '7',
-    fontSize: '2xl',
+    borderWidth: 0,
+    cursor: 'inherit',
+    fontSize: tokens.typography.size[8].fontSize,
+    height: '72px',
     outlineStyle: 'none',
     textAlign: 'center',
     width: '100%'
-  }), {
-    height: '72px'
   }, hideWebkitAppearance, placeholder]
 }, "styledInput");
 export const styledClearButton = recipe({
-  base: [odStyle({
+  base: [{
     alignItems: 'center',
@@ -87,7 +81,13 @@ background: 'transparent',
     justifyContent: 'center',
-    padding: 'none',
-    position: 'relative',
+    padding: 0,
+    position: 'relative'
+  }, sprinklesResponsive({
     size: '6'
   })]
 }, "styledClearButton");
+export const fieldWrapper = style({
+  display: 'flex',
+  flexGrow: 1,
+  alignItems: 'center'
+}, "fieldWrapper");
 __vanilla_filescope__.endFileScope();

dist/components/SearchBar/SearchBar.d.ts

@@ -10,4 +10,6 @@ import React from 'react';
 interface SearchBarProps extends AriaSearchFieldProps {
+    onChange?: AriaSearchFieldProps['onChange'];
+    isDisabled?: AriaSearchFieldProps['isDisabled'];
+    maxLength?: AriaSearchFieldProps['maxLength'];
     placeholder: string;
-    onChange?: AriaSearchFieldProps['onChange'];
     lang?: Partial<Record<TextContent, string>>;
@@ -14,0 +16,0 @@ ref?: React.Ref<HTMLInputElement>;

dist/components/SearchBar/SearchBar.js

@@ -10,7 +10,6 @@ "use strict";
 import { useSearchFieldState } from 'react-stately';
-import { odStyle } from "../../styles/sprinkles.css.js";
 import { mergeRefs } from "../../utils/index.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
-import { styledClearButton, styledInput, styledSearchBar } from "./SearchBar.css.js";
+import { fieldWrapper, styledClearButton, styledInput, styledSearchBar } from "./SearchBar.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -76,2 +75,3 @@ const defaultEnglish = {
     }, dataAttrs({
+      disabled: props.isDisabled,
       focus: isFocused,
@@ -87,7 +87,3 @@ 'focus-visible': isFocusVisible,
       }), _jsxs("div", {
-        className: odStyle({
-          display: 'flex',
-          flexGrow: 1,
-          alignItems: 'center'
-        }),
+        className: fieldWrapper,
         children: [_jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
@@ -94,0 +90,0 @@ className: styledInput({}),

dist/stories/helpers/index.d.ts

 import React from 'react';
-import { type ODStyle } from '../../styles/sprinkles.css';
 import { type RecipeStackProps } from '../../styles/stack.css';
+import { type Sprinkles } from './sprinkles.css';
 import { type VariantColourSwatchProps } from './styles.css';
@@ -9,5 +9,5 @@ export type AsProp<C extends React.ElementType> = {
 export type PolyComponentProps<C extends React.ElementType, P> = AsProp<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof AsProp<C> | keyof P> & P;
-export type BoxProps<C extends React.ElementType> = PolyComponentProps<C, ODStyle>;
+export type BoxProps<C extends React.ElementType> = PolyComponentProps<C, Sprinkles>;
 export declare const Box: <C extends React.ElementType = "div">({ as, children, className, style, ...props }: BoxProps<C>) => React.JSX.Element;
-type StackSprinkles = Pick<ODStyle, 'alignItems' | 'flexDirection' | 'flexWrap' | 'gap' | 'justifyContent'>;
+type StackSprinkles = Pick<Sprinkles, 'alignItems' | 'flexDirection' | 'flexWrap' | 'gap' | 'justifyContent'>;
 export type StackProps<C extends React.ElementType> = PolyComponentProps<C, RecipeStackProps & StackSprinkles>;
@@ -17,3 +17,3 @@ export declare const Stack: <C extends React.ElementType = "div">({ alignItems, children, className, flexDirection, flexWrap, gap, horizontal, justifyContent, space, style, ...props }: StackProps<C>) => React.JSX.Element;
 export declare const ColourSwatch: ({ shape, size, ...props }: ColourSwatchProps) => React.JSX.Element;
-export { type ODStyle } from '../../styles/sprinkles.css';
+export { type Sprinkles } from './sprinkles.css';
 //# sourceMappingURL=index.d.ts.map

dist/styles/focusOutline.css.d.ts

@@ -1,3 +0,2 @@
-import { ODStyle } from './sprinkles.css';
-export declare const focusOutline: ODStyle;
+export declare const focusOutlineStyle: string;
 //# sourceMappingURL=focusOutline.css.d.ts.map

dist/styles/focusOutline.css.js

@@ -5,14 +5,16 @@ "use strict";
 __vanilla_filescope__.setFileScope("lib/styles/focusOutline.css.ts", "@autoguru/overdrive");
-export const focusOutline = {
-  outlineColor: 'link',
-  outlineStyle: {
-    initial: 'none',
-    focusVisible: 'solid'
-  },
-  outlineOffset: 'md',
-  outlineWidth: {
-    initial: 'none',
-    focusVisible: 'default'
+import { style } from '@vanilla-extract/css';
+import { themeContractVars as tokens } from "../themes/theme.css.js";
+const width = '2px';
+export const focusOutlineStyle = style({
+  outlineOffset: width,
+  outlineStyle: 'none',
+  outlineWidth: width,
+  selectors: {
+    '&:focus-visible, &[data-focus-visible], [data-focus-visible] &': {
+      outlineColor: tokens.colours.foreground.link,
+      outlineStyle: 'solid'
+    }
   }
-};
+}, "focusOutlineStyle");
 __vanilla_filescope__.endFileScope();

dist/styles/sprinkles.css.d.ts

@@ -1,159 +0,2 @@
-export declare const odStyle: ((props: {
-    gap?: import("../themes/tokens").SpaceScale | undefined;
-    marginBottom?: import("../themes/tokens").SpaceScale | undefined;
-    marginLeft?: import("../themes/tokens").SpaceScale | undefined;
-    marginRight?: import("../themes/tokens").SpaceScale | undefined;
-    marginTop?: import("../themes/tokens").SpaceScale | undefined;
-    paddingBottom?: import("../themes/tokens").SpaceScale | undefined;
-    paddingLeft?: import("../themes/tokens").SpaceScale | undefined;
-    paddingRight?: import("../themes/tokens").SpaceScale | undefined;
-    paddingTop?: import("../themes/tokens").SpaceScale | undefined;
-    margin?: import("../themes/tokens").SpaceScale | undefined;
-    marginX?: import("../themes/tokens").SpaceScale | undefined;
-    marginY?: import("../themes/tokens").SpaceScale | undefined;
-    padding?: import("../themes/tokens").SpaceScale | undefined;
-    paddingX?: import("../themes/tokens").SpaceScale | undefined;
-    paddingY?: import("../themes/tokens").SpaceScale | undefined;
-} & {
-    fontSize?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "2xl" | "3xl" | undefined;
-    lineHeight?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "match" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "2xl" | "3xl" | undefined;
-    fontWeight?: "normal" | "bold" | "semibold" | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textOverflow?: "clip" | "ellipsis" | undefined;
-    textTransform?: "lowercase" | "uppercase" | undefined;
-    whiteSpace?: "normal" | "nowrap" | "break-space" | undefined;
-    wordBreak?: "normal" | "break-word" | "break-all" | undefined;
-    font?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "2xl" | "3xl" | undefined;
-} & {
-    borderColor?: "light" | "dark" | "gray" | {
-        initial?: "light" | "dark" | "gray" | undefined;
-        active?: "light" | "dark" | "gray" | undefined;
-        checked?: "light" | "dark" | "gray" | undefined;
-        disabled?: "light" | "dark" | "gray" | undefined;
-        focus?: "light" | "dark" | "gray" | undefined;
-        focusVisible?: "light" | "dark" | "gray" | undefined;
-        hover?: "light" | "dark" | "gray" | undefined;
-        selected?: "light" | "dark" | "gray" | undefined;
-    } | undefined;
-    borderRadius?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | {
-        initial?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        active?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        checked?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        disabled?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focus?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focusVisible?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        hover?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        selected?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-    } | undefined;
-    borderBottomLeftRadius?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | {
-        initial?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        active?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        checked?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        disabled?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focus?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focusVisible?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        hover?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        selected?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-    } | undefined;
-    borderBottomRightRadius?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | {
-        initial?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        active?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        checked?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        disabled?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focus?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focusVisible?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        hover?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        selected?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-    } | undefined;
-    borderTopLeftRadius?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | {
-        initial?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        active?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        checked?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        disabled?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focus?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focusVisible?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        hover?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        selected?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-    } | undefined;
-    borderTopRightRadius?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | {
-        initial?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        active?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        checked?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        disabled?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focus?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        focusVisible?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        hover?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-        selected?: "1" | "2" | "3" | "none" | "min" | "pill" | "full" | undefined;
-    } | undefined;
-    borderStyle?: "none" | "dashed" | "dotted" | "solid" | {
-        initial?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        active?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        checked?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        disabled?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focus?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focusVisible?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        hover?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        selected?: "none" | "dashed" | "dotted" | "solid" | undefined;
-    } | undefined;
-    borderBottomStyle?: "none" | "dashed" | "dotted" | "solid" | {
-        initial?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        active?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        checked?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        disabled?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focus?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focusVisible?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        hover?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        selected?: "none" | "dashed" | "dotted" | "solid" | undefined;
-    } | undefined;
-    borderLeftStyle?: "none" | "dashed" | "dotted" | "solid" | {
-        initial?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        active?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        checked?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        disabled?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focus?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focusVisible?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        hover?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        selected?: "none" | "dashed" | "dotted" | "solid" | undefined;
-    } | undefined;
-    borderRightStyle?: "none" | "dashed" | "dotted" | "solid" | {
-        initial?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        active?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        checked?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        disabled?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focus?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focusVisible?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        hover?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        selected?: "none" | "dashed" | "dotted" | "solid" | undefined;
-    } | undefined;
-    borderTopStyle?: "none" | "dashed" | "dotted" | "solid" | {
-        initial?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        active?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        checked?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        disabled?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focus?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        focusVisible?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        hover?: "none" | "dashed" | "dotted" | "solid" | undefined;
-        selected?: "none" | "dashed" | "dotted" | "solid" | undefined;
-    } | undefined;
-    borderWidth?: "1" | "2" | "3" | "none" | {
-        initial?: "1" | "2" | "3" | "none" | undefined;
-        active?: "1" | "2" | "3" | "none" | undefined;
-        checked?: "1" | "2" | "3" | "none" | undefined;
-        disabled?: "1" | "2" | "3" | "none" | undefined;
-        focus?: "1" | "2" | "3" | "none" | undefined;
-        focusVisible?: "1" | "2" | "3" | "none" | undefined;
-        hover?: "1" | "2" | "3" | "none" | undefined;
-        selected?: "1" | "2" | "3" | "none" | undefined;
-    } | undefined;
-    boxShadow?: "1" | "2" | "3" | "4" | "5" | "none" | {
-        initial?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-        active?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-        checked?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-        disabled?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-        focus?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-        focusVisible?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-        hover?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-        selected?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
-    } | undefined;
-} & {
+export declare const sprinklesResponsive: ((props: {
     display?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | {
@@ -189,2 +32,8 @@ mobile?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
     } | undefined;
+    gap?: "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;
+        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
+        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
+    } | undefined;
     gridTemplateColumns?: "1" | "2" | "3" | "4" | "5" | {
@@ -214,8 +63,2 @@ mobile?: "1" | "2" | "3" | "4" | "5" | undefined;
     } | undefined;
-    position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | {
-        mobile?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-        tablet?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-        desktop?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-        largeDesktop?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-    } | undefined;
     height?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "auto" | "100%" | {
@@ -233,8 +76,2 @@ mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "auto" | "100%" | undefined;
     } | undefined;
-    overflow?: "auto" | "hidden" | "visible" | "scroll" | {
-        mobile?: "auto" | "hidden" | "visible" | "scroll" | undefined;
-        tablet?: "auto" | "hidden" | "visible" | "scroll" | undefined;
-        desktop?: "auto" | "hidden" | "visible" | "scroll" | undefined;
-        largeDesktop?: "auto" | "hidden" | "visible" | "scroll" | undefined;
-    } | undefined;
     gridColumns?: "1" | "2" | "3" | "4" | "5" | {
@@ -258,98 +95,6 @@ mobile?: "1" | "2" | "3" | "4" | "5" | undefined;
     } | undefined;
-} & {
-    color?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | {
-        initial?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        active?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        checked?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        disabled?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        focus?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        focusVisible?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        hover?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        selected?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-    } | undefined;
-    background?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | {
-        initial?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        active?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        checked?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        disabled?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        focus?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        focusVisible?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        hover?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-        selected?: "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "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" | "white" | "transparent" | undefined;
-    } | undefined;
-    fill?: import("../themes/tokens").ColourGamut | "white" | {
-        initial?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        active?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        checked?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        disabled?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        focus?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        focusVisible?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        hover?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        selected?: import("../themes/tokens").ColourGamut | "white" | undefined;
-    } | undefined;
-    stroke?: import("../themes/tokens").ColourGamut | "white" | {
-        initial?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        active?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        checked?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        disabled?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        focus?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        focusVisible?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        hover?: import("../themes/tokens").ColourGamut | "white" | undefined;
-        selected?: import("../themes/tokens").ColourGamut | "white" | undefined;
-    } | undefined;
-} & {
-    cursor?: "default" | "not-allowed" | "pointer" | "text" | "wait" | {
-        initial?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-        active?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-        checked?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-        disabled?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-        focus?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-        focusVisible?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-        hover?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-        selected?: "default" | "not-allowed" | "pointer" | "text" | "wait" | undefined;
-    } | undefined;
-    outlineColor?: "body" | "link" | {
-        initial?: "body" | "link" | undefined;
-        active?: "body" | "link" | undefined;
-        checked?: "body" | "link" | undefined;
-        disabled?: "body" | "link" | undefined;
-        focus?: "body" | "link" | undefined;
-        focusVisible?: "body" | "link" | undefined;
-        hover?: "body" | "link" | undefined;
-        selected?: "body" | "link" | undefined;
-    } | undefined;
-    outlineStyle?: "none" | "solid" | {
-        initial?: "none" | "solid" | undefined;
-        active?: "none" | "solid" | undefined;
-        checked?: "none" | "solid" | undefined;
-        disabled?: "none" | "solid" | undefined;
-        focus?: "none" | "solid" | undefined;
-        focusVisible?: "none" | "solid" | undefined;
-        hover?: "none" | "solid" | undefined;
-        selected?: "none" | "solid" | undefined;
-    } | undefined;
-    outlineOffset?: "sm" | "md" | "lg" | {
-        initial?: "sm" | "md" | "lg" | undefined;
-        active?: "sm" | "md" | "lg" | undefined;
-        checked?: "sm" | "md" | "lg" | undefined;
-        disabled?: "sm" | "md" | "lg" | undefined;
-        focus?: "sm" | "md" | "lg" | undefined;
-        focusVisible?: "sm" | "md" | "lg" | undefined;
-        hover?: "sm" | "md" | "lg" | undefined;
-        selected?: "sm" | "md" | "lg" | undefined;
-    } | undefined;
-    outlineWidth?: "none" | "default" | {
-        initial?: "none" | "default" | undefined;
-        active?: "none" | "default" | undefined;
-        checked?: "none" | "default" | undefined;
-        disabled?: "none" | "default" | undefined;
-        focus?: "none" | "default" | undefined;
-        focusVisible?: "none" | "default" | undefined;
-        hover?: "none" | "default" | undefined;
-        selected?: "none" | "default" | undefined;
-    } | undefined;
 }) => string) & {
-    properties: Set<"background" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "alignItems" | "alignSelf" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "boxShadow" | "color" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridTemplateColumns" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "wordBreak" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "font" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "fill" | "stroke" | "paddingX" | "paddingY" | "marginX" | "marginY" | "gridColumns">;
+    properties: Set<"width" | "size" | "alignItems" | "alignSelf" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridTemplateColumns" | "height" | "justifyContent" | "gap" | "placeItems" | "gridColumns">;
 };
-export type ODStyle = Parameters<typeof odStyle>[0];
+export type SprinklesResponsive = Parameters<typeof sprinklesResponsive>[0];
 //# sourceMappingURL=sprinkles.css.d.ts.map

dist/styles/sprinkles.css.js

@@ -10,10 +10,6 @@ "use strict";
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
-import { tokens } from "../themes/base/tokens.js";
 import { breakpoints } from "../themes/makeTheme.js";
+import { themeContractVars as tokens } from "../themes/theme.css.js";
 const {
-  border,
-  colours,
-  elevation,
-  space,
-  typography
+  space
 } = tokens;
@@ -36,125 +32,3 @@ const {
 };
-const interactionConditions = {
-  initial: {},
-  active: {
-    selector: '&:active'
-  },
-  checked: {
-    selector: '&:checked, &[data-checked]'
-  },
-  disabled: {
-    selector: '&:disabled, &[data-disabled]'
-  },
-  focus: {
-    selector: '&:focus, &[data-focus], &[data-focused]'
-  },
-  focusVisible: {
-    selector: '&:focus-visible, &[data-focus-visible]'
-  },
-  hover: {
-    selector: '&:hover, &[data-hover]'
-  },
-  selected: {
-    selector: '&[data-selected]'
-  }
-};
-const spaceProperties = defineProperties({
-  properties: {
-    gap: space,
-    marginBottom: space,
-    marginLeft: space,
-    marginRight: space,
-    marginTop: space,
-    paddingBottom: space,
-    paddingLeft: space,
-    paddingRight: space,
-    paddingTop: space
-  },
-  shorthands: {
-    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
-    marginX: ['marginLeft', 'marginRight'],
-    marginY: ['marginTop', 'marginBottom'],
-    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
-    paddingX: ['paddingLeft', 'paddingRight'],
-    paddingY: ['paddingTop', 'paddingBottom']
-  }
-});
-const typographyProperties = defineProperties({
-  properties: {
-    fontSize: {
-      '1': typography.size[1].fontSize,
-      '2': typography.size[2].fontSize,
-      '3': typography.size[3].fontSize,
-      '4': typography.size[4].fontSize,
-      '5': typography.size[5].fontSize,
-      '6': typography.size[6].fontSize,
-      '7': typography.size[7].fontSize,
-      '8': typography.size[8].fontSize,
-      '9': typography.size[9].fontSize,
-      xxs: typography.size[1].fontSize,
-      xs: typography.size[2].fontSize,
-      sm: typography.size[3].fontSize,
-      md: typography.size[4].fontSize,
-      lg: typography.size[5].fontSize,
-      xl: typography.size[6].fontSize,
-      xxl: typography.size[7].fontSize,
-      '2xl': typography.size[8].fontSize,
-      '3xl': typography.size[9].fontSize
-    },
-    lineHeight: {
-      '1': typography.size[1].lineHeight,
-      '2': typography.size[2].lineHeight,
-      '3': typography.size[3].lineHeight,
-      '4': typography.size[4].lineHeight,
-      '5': typography.size[5].lineHeight,
-      '6': typography.size[6].lineHeight,
-      '7': typography.size[7].lineHeight,
-      '8': typography.size[8].lineHeight,
-      '9': typography.size[9].lineHeight,
-      xxs: typography.size[1].lineHeight,
-      xs: typography.size[2].lineHeight,
-      sm: typography.size[3].lineHeight,
-      md: typography.size[4].lineHeight,
-      lg: typography.size[5].lineHeight,
-      xl: typography.size[6].lineHeight,
-      xxl: typography.size[7].lineHeight,
-      '2xl': typography.size[8].lineHeight,
-      '3xl': typography.size[9].lineHeight,
-      match: '1em'
-    },
-    fontWeight: {
-      normal: '400',
-      semibold: '500',
-      bold: '700'
-    },
-    textAlign: ['left', 'center', 'right'],
-    textOverflow: ['clip', 'ellipsis'],
-    textTransform: ['lowercase', 'uppercase'],
-    whiteSpace: ['break-space', 'normal', 'nowrap'],
-    wordBreak: ['break-all', 'break-word', 'normal']
-  },
-  shorthands: {
-    font: ['fontSize', 'lineHeight']
-  }
-});
-const borderProperties = defineProperties({
-  conditions: _objectSpread({}, interactionConditions),
-  defaultCondition: 'initial',
-  properties: {
-    borderColor: _objectSpread({}, border.colours),
-    borderRadius: _objectSpread({}, border.radius),
-    borderBottomLeftRadius: _objectSpread({}, border.radius),
-    borderBottomRightRadius: _objectSpread({}, border.radius),
-    borderTopLeftRadius: _objectSpread({}, border.radius),
-    borderTopRightRadius: _objectSpread({}, border.radius),
-    borderStyle: ['none', 'solid', 'dotted', 'dashed'],
-    borderBottomStyle: ['none', 'solid', 'dotted', 'dashed'],
-    borderLeftStyle: ['none', 'solid', 'dotted', 'dashed'],
-    borderRightStyle: ['none', 'solid', 'dotted', 'dashed'],
-    borderTopStyle: ['none', 'solid', 'dotted', 'dashed'],
-    borderWidth: _objectSpread({}, border.width),
-    boxShadow: _objectSpread({}, elevation)
-  }
-});
-const displayProperties = defineProperties({
+const responsiveProperties = defineProperties({
   conditions: _objectSpread({}, responsiveConditions),
@@ -168,2 +42,3 @@ defaultCondition: 'mobile',
     flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
+    gap: space,
     gridTemplateColumns: {
@@ -179,3 +54,2 @@ '1': '1fr',
     alignSelf: ['flex-start', 'center', 'flex-end'],
-    position: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
     height: _objectSpread(_objectSpread({}, spaceWithoutNone), {}, {
@@ -188,4 +62,3 @@ '100%': '100%',
       auto: 'auto'
-    }),
-    overflow: ['hidden', 'scroll', 'visible', 'auto']
+    })
   },
@@ -198,35 +71,3 @@ shorthands: {
 });
-const gamutProperties = defineProperties({
-  conditions: _objectSpread({}, interactionConditions),
-  defaultCondition: 'initial',
-  properties: {
-    color: _objectSpread(_objectSpread({}, colours.gamut), {}, {
-      transparent: 'transparent'
-    }),
-    background: _objectSpread(_objectSpread({}, colours.gamut), {}, {
-      transparent: 'transparent'
-    }),
-    fill: colours.gamut,
-    stroke: colours.gamut
-  }
-});
-const interactionProperties = defineProperties({
-  conditions: _objectSpread({}, interactionConditions),
-  defaultCondition: 'initial',
-  properties: {
-    cursor: ['default', 'pointer', 'not-allowed', 'text', 'wait'],
-    outlineColor: colours.foreground,
-    outlineStyle: ['solid', 'none'],
-    outlineOffset: {
-      sm: '1px',
-      md: '2px',
-      lg: '4px'
-    },
-    outlineWidth: {
-      none: '0',
-      default: '2px'
-    }
-  }
-});
-export const odStyle = createSprinkles(spaceProperties, typographyProperties, borderProperties, displayProperties, gamutProperties, interactionProperties);
+export const sprinklesResponsive = createSprinkles(responsiveProperties);
 __vanilla_filescope__.endFileScope();

dist/styles/stack.css.d.ts

 import { type RecipeVariants } from '@vanilla-extract/recipes';
 export declare const stack: import("@vanilla-extract/recipes").RuntimeFn<{
     space: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        md: {
+            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        lg: {
+            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
     };
     horizontal: {
-        false: string;
-        true: string;
+        false: {
+            flexDirection: "column";
+        };
+        true: {
+            flexDirection: "row";
+        };
     };
@@ -12,0 +22,0 @@ }>;

dist/styles/stack.css.js

@@ -6,27 +6,27 @@ "use strict";
 import { recipe } from '@vanilla-extract/recipes';
-import { odStyle } from "./sprinkles.css.js";
+import { themeContractVars as tokens } from "../themes/theme.css.js";
 export const stack = recipe({
-  base: odStyle({
+  base: {
     display: 'flex',
     flexWrap: 'wrap'
-  }),
+  },
   variants: {
     space: {
-      sm: odStyle({
-        gap: '5'
-      }),
-      md: odStyle({
-        gap: '8'
-      }),
-      lg: odStyle({
-        gap: '9'
-      })
+      sm: {
+        gap: tokens.space['5']
+      },
+      md: {
+        gap: tokens.space['8']
+      },
+      lg: {
+        gap: tokens.space['9']
+      }
     },
     horizontal: {
-      false: odStyle({
+      false: {
         flexDirection: 'column'
-      }),
-      true: odStyle({
+      },
+      true: {
         flexDirection: 'row'
-      })
+      }
     }
@@ -33,0 +33,0 @@ },

dist/utils/css.d.ts

@@ -0,3 +1,10 @@
+import type { StyleRule } from '@vanilla-extract/css';
 export declare const cssVarUnwrap: (value: string) => string;
 export declare const getThemeTokenValue: (themeClass?: string | null, token?: string | null) => string;
+export type SelectorStates = 'base' | 'active' | 'checked' | 'selected' | 'disabled' | 'focus' | 'focusVisible' | 'hover' | 'hoverNotFocus' | 'hoverNotSelected';
+export type InteractionStyleProps = Partial<Record<SelectorStates, StyleRule>>;
+export declare const notDisabled = ":not(:disabled,[data-disabled])";
+export declare const notFocused = ":not(:focus,[data-focus],[data-focused])";
+export declare const notSelected = ":not(:checked,[data-checked],[data-selected])";
+export declare const interactionStyle: (selectors: InteractionStyleProps) => StyleRule;
 //# sourceMappingURL=css.d.ts.map

dist/utils/css.js

 "use strict";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["base"];
+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; }
 const cssVarRegExp = /var\(([^)]+)\)/;
@@ -15,2 +20,32 @@ export const cssVarUnwrap = value => {
   return ((_getComputedStyle$get = getComputedStyle(themedElement).getPropertyValue(cssVar)) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.trim()) || '';
+};
+export const notDisabled = ':not(:disabled,[data-disabled])';
+export const notFocused = ':not(:focus,[data-focus],[data-focused])';
+export const notSelected = ':not(:checked,[data-checked],[data-selected])';
+export const interactionStyle = selectors => {
+  const {
+      base = {}
+    } = selectors,
+    interactionStyles = _objectWithoutProperties(selectors, _excluded);
+  const styles = _objectSpread(_objectSpread({}, base), {}, {
+    selectors: {}
+  });
+  const rules = {
+    hover: `&:hover${notDisabled}, &[data-hover]${notDisabled}`,
+    hoverNotFocus: `&:hover${notFocused}${notDisabled}, &[data-hover]${notFocused}${notDisabled}`,
+    hoverNotSelected: `&:hover${notSelected}${notDisabled}, &[data-hover]${notSelected}${notDisabled}`,
+    active: '&:active',
+    selected: '&:checked, &[data-checked], &[data-selected]',
+    focus: '&:focus, &[data-focus], &[data-focused]',
+    focusVisible: '&:focus-visible, &[data-focus-visible]',
+    disabled: '&:disabled, &[data-disabled]'
+  };
+  Object.entries(interactionStyles).forEach(_ref => {
+    let [state, stateStyles] = _ref;
+    if (state in rules && stateStyles) {
+      if (state === 'checked') state = 'selected';
+      styles.selectors[rules[state]] = stateStyles;
+    }
+  });
+  return styles;
 };

dist/utils/dataAttrs.js

@@ -7,3 +7,3 @@ "use strict";
     if (value !== false && value !== undefined) {
-      acc[`data-${key}`] = typeof value === 'boolean' ? 'true' : value;
+      acc[`data-${key}`] = typeof value === 'boolean' ? '' : value;
     }
@@ -10,0 +10,0 @@ return acc;

package.json

 {
 	"name": "@autoguru/overdrive",
-	"version": "4.39.0",
+	"version": "4.39.1",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
@@ -51,3 +51,3 @@ "types": "dist/index.d.ts",
 		"test": "vitest",
-		"test:ci": "yarn test --no-cache --coverage",
+		"test:ci": "yarn vitest run --no-cache --coverage",
 		"typeEmit": "tsc -d --declarationDir dist --emitDeclarationOnly",
@@ -70,3 +70,3 @@ "watch": "tsc --watch",
 		"@autoguru/eslint-plugin": "2.0.0",
-		"@autoguru/icons": "^1.8.2",
+		"@autoguru/icons": "^1.8.3",
 		"@autoguru/tsconfig": "^1.3.1",
@@ -96,14 +96,14 @@ "@autoguru/utilities": "^1.3.3",
 		"@react-stately/toggle": "^3.8.1",
-		"@storybook/addon-a11y": "^8.6.2",
-		"@storybook/addon-actions": "^8.6.2",
-		"@storybook/addon-essentials": "^8.6.2",
-		"@storybook/addon-interactions": "^8.6.2",
-		"@storybook/addon-links": "^8.6.2",
-		"@storybook/addon-onboarding": "^8.6.2",
-		"@storybook/blocks": "^8.6.2",
-		"@storybook/manager-api": "^8.6.2",
-		"@storybook/react": "^8.6.2",
-		"@storybook/react-vite": "^8.6.2",
-		"@storybook/test": "^8.6.2",
-		"@storybook/theming": "^8.6.2",
+		"@storybook/addon-a11y": "^8.6.3",
+		"@storybook/addon-actions": "^8.6.3",
+		"@storybook/addon-essentials": "^8.6.3",
+		"@storybook/addon-interactions": "^8.6.3",
+		"@storybook/addon-links": "^8.6.3",
+		"@storybook/addon-onboarding": "^8.6.3",
+		"@storybook/blocks": "^8.6.3",
+		"@storybook/manager-api": "^8.6.3",
+		"@storybook/react": "^8.6.3",
+		"@storybook/react-vite": "^8.6.3",
+		"@storybook/test": "^8.6.3",
+		"@storybook/theming": "^8.6.3",
 		"@testing-library/jest-dom": "^6.6.3",
@@ -113,3 +113,3 @@ "@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.6.1",
-		"@types/node": "^22.13.5",
+		"@types/node": "^22.13.9",
 		"@types/react": "^19.0.10",
@@ -131,7 +131,7 @@ "@types/react-dom": "^19.0.4",
 		"browserslist-config-autoguru": "^2.4.4",
-		"chromatic": "^11.26.1",
+		"chromatic": "^11.27.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"concurrently": "^9.1.2",
-		"core-js": "^3.40.0",
+		"core-js": "^3.41.0",
 		"csstype": "^3.1.3",
@@ -150,3 +150,3 @@ "deepmerge": "^4.3.1",
 		"postcss": "^8.5.3",
-		"prettier": "^3.5.2",
+		"prettier": "^3.5.3",
 		"prop-types": "^15.8.1",
@@ -164,3 +164,3 @@ "rand-seed": "^2.1.7",
 		"rollup-plugin-visualizer": "^5.14.0",
-		"storybook": "^8.6.2",
+		"storybook": "^8.6.3",
 		"storybook-addon-tag-badges": "^1.4.0",
@@ -167,0 +167,0 @@ "typescript": "^5.7.3",

No alert changes

Improved metrics

Number of package files

1174

0.43%

Worsened metrics

Total package byte prevSize

1095395

-0.61%

Lines of code

20548

-1.28%

No dependency changes