@autoguru/overdrive 4.45.2 → 4.46.0

package/dist/components/DateTimePicker/CalendarButton.js

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useRef } from 'react';
 import { useButton } from 'react-aria';
-import { styledButton } from "./DateTimePicker.css.js";
+import { buttonStyle } from "./DateTimePicker.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CalendarButton = props => {
   const ref = useRef(null);
@@ -13,7 +13,7 @@ export const CalendarButton = props => {
     buttonProps
   } = useButton(props, ref);
   return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({}, buttonProps), {}, {
-    className: styledButton(),
+    className: buttonStyle,
     ref: ref,
     children: props.children
   }));

package/dist/components/DateTimePicker/CalendarGrid.js

@@ -10,7 +10,7 @@ import { getWeeksInMonth } from '@internationalized/date';
 import React, { useRef } from 'react';
 import { useCalendarCell, useCalendarGrid, useLocale } from 'react-aria';
 import { dataAttrs } from "../../utils/dataAttrs.js";
-import { calendarGridStyle, styledCell, tdStyle, thStyle } from "./DateTimePicker.css.js";
+import { calendarGridStyle, cellStyle, tdStyle, thStyle } from "./DateTimePicker.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CalendarCell = ({
   state,
@@ -33,7 +33,7 @@ const CalendarCell = ({
     children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({}, buttonProps), {}, {
       ref: ref,
       hidden: isOutsideVisibleRange,
-      className: styledCell()
+      className: cellStyle
     }, dataAttrs({
       selected: isSelected,
       disabled: isDisabled,

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

@@ -3,16 +3,8 @@ export declare const queryContainerStyle: string;
 export declare const layoutStyle: string;
 export declare const calendarGridStyle: string;
 export declare const calendarStyle: string;
-export declare const styledCell: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-export declare const styledButton: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
+export declare const cellStyle: string;
+export declare const buttonStyle: string;
 export declare const thStyle: string;
 export declare const tdStyle: string;
 export declare const titleStyle: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/DateTimePicker.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc,QAAoB,CAAC;AAChD,eAAO,MAAM,mBAAmB,QAG9B,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAMxB,CAAC;AAIH,eAAO,MAAM,UAAU;;;;EA+BrB,CAAC;AAIH,eAAO,MAAM,YAAY;;;;EA+BvB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAGH,eAAO,MAAM,UAAU,QAGrB,CAAC"}
+{"version":3,"file":"DateTimePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/DateTimePicker.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc,QAAoB,CAAC;AAChD,eAAO,MAAM,mBAAmB,QAO9B,CAAC;AAEH,eAAO,MAAM,WAAW,QAWtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC;AAIH,eAAO,MAAM,SAAS,QAmCpB,CAAC;AAIH,eAAO,MAAM,WAAW,QAoCtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAGH,eAAO,MAAM,UAAU,QAGrB,CAAC"}

package/dist/components/DateTimePicker/DateTimePicker.css.js

@@ -3,111 +3,138 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DateTimePicker/DateTimePicker.css.ts", "@autoguru/overdrive");
 import { createContainer, style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
-import { overdriveTokens as tokens } from "../../themes/index.js";
 import { breakpoints } from "../../themes/makeTheme.js";
-import { interactionStyle } from "../../utils/css.js"; // --- Container styles
+import { overdriveTokens as tokens } from "../../themes/theme.css.js"; // === Container styles
 export const queryContainer = createContainer("queryContainer");
 export const queryContainerStyle = style({
-  containerName: queryContainer,
-  containerType: 'inline-size'
+  '@layer': {
+    [cssLayerComponent]: {
+      containerName: queryContainer,
+      containerType: 'inline-size'
+    }
+  }
 }, "queryContainerStyle");
 export const layoutStyle = style({
-  '@container': {
-    [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
-      display: 'flex',
-      gap: tokens.space[7]
+  '@layer': {
+    [cssLayerComponent]: {
+      '@container': {
+        [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
+          display: 'flex',
+          gap: tokens.space[7]
+        }
+      }
     }
   }
 }, "layoutStyle");
 export const calendarGridStyle = style({
-  width: '100%',
-  '@container': {
-    [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
-      width: 'auto'
+  '@layer': {
+    [cssLayerComponent]: {
+      width: '100%',
+      '@container': {
+        [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
+          width: 'auto'
+        }
+      }
     }
   }
 }, "calendarGridStyle");
-export const calendarStyle = style({
+export const calendarStyle = style([sprinkles({
   alignItems: 'center',
   display: 'flex',
-  justifyContent: 'space-between',
-  marginBottom: tokens.space[2],
-  padding: `0 ${tokens.space[1]}`
-}, "calendarStyle");
+  justifyContent: 'spaceBetween',
+  mb: '2',
+  px: '1'
+})], "calendarStyle");
 
-// -- Cell styles
+// === Cell styles
 
-export const styledCell = recipe({
-  base: [{
-    alignItems: 'center',
-    backgroundColor: tokens.colours.background.body,
-    borderRadius: tokens.border.radius['md'],
-    color: tokens.colours.foreground.body,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    fontSize: 'md',
-    justifyContent: 'center'
-  }, interactionStyle({
-    hoverNotSelected: {
-      backgroundColor: tokens.colours.gamut.gray200
-    },
-    selected: {
-      backgroundColor: tokens.colours.foreground.body,
-      color: tokens.colours.background.body
-    },
-    disabled: {
-      backgroundColor: tokens.colours.background.body,
-      color: tokens.colours.gamut.gray400,
-      cursor: 'default'
+export const cellStyle = style([sprinkles({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  size: '7',
+  borderRadius: 'md'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      background: tokens.colours.background.body,
+      color: tokens.colours.foreground.body,
+      cursor: 'pointer',
+      selectors: {
+        [selectors.focusVisible]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.selected]: {
+          background: tokens.colours.foreground.body,
+          color: tokens.colours.background.body
+        },
+        [selectors.hoverNotSelected]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.disabled]: {
+          background: tokens.colours.background.body,
+          color: tokens.colours.gamut.gray400,
+          cursor: 'default'
+        }
+      }
     }
-  }), sprinkles({
-    size: '7'
-  }), focusOutlineStyle]
-}, "styledCell");
+  }
+}, focusOutlineStyle], "cellStyle");
 
-// -- Button styles
+// === Button styles
 
-export const styledButton = recipe({
-  base: [{
-    alignItems: 'center',
-    backgroundColor: tokens.colours.background.body,
-    borderColor: tokens.border.colours.gray,
-    borderRadius: tokens.border.radius['md'],
-    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
-    },
-    disabled: {
-      backgroundColor: tokens.colours.background.body,
-      borderColor: tokens.border.colours.light,
-      color: tokens.colours.gamut.gray300,
-      cursor: 'not-allowed'
+export const buttonStyle = style([sprinkles({
+  alignItems: 'center',
+  borderColour: 'gray',
+  borderRadius: 'md',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  display: 'flex',
+  justifyContent: 'center',
+  padding: 'none',
+  size: '7'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      background: tokens.colours.background.body,
+      color: tokens.colours.gamut.gray600,
+      cursor: 'pointer',
+      selectors: {
+        [selectors.hoverNotDisabled]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.focusVisible]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.disabled]: {
+          background: tokens.colours.background.body,
+          borderColor: tokens.border.colours.light,
+          color: tokens.colours.gamut.gray300,
+          cursor: 'not-allowed'
+        }
+      }
     }
-  }), sprinkles({
-    size: '7'
-  }), focusOutlineStyle]
-}, "styledButton");
+  }
+}, focusOutlineStyle], "buttonStyle");
 export const thStyle = style({
-  color: tokens.colours.gamut.gray600
+  '@layer': {
+    [cssLayerComponent]: {
+      color: tokens.colours.gamut.gray600
+    }
+  }
 }, "thStyle");
-export const tdStyle = style({
-  padding: tokens.space[1],
+export const tdStyle = sprinkles({
+  padding: '1',
   textAlign: 'center'
-}, "tdStyle");
+});
 
-// -- Heading styles
-export const titleStyle = style({
-  fontWeight: tokens.typography.fontWeight.bold,
-  margin: 0
-}, "titleStyle");
+// === Heading styles
+export const titleStyle = sprinkles({
+  fontWeight: 'bold',
+  margin: 'none'
+});
 __vanilla_filescope__.endFileScope();

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

@@ -1,57 +1,56 @@
 import { type RecipeVariants } from '@vanilla-extract/recipes';
+import { cssLayerComponent } from '../../styles/layers.css';
 export declare const gridContainer: string;
 export declare const gridContainerStyle: string;
-export declare const styledGrid: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const gridVariants: import("@vanilla-extract/recipes").RuntimeFn<{
     columns: {
         '1': {};
         '2': {
-            '@container': {
-                [x: string]: {
-                    gridTemplateColumns: "repeat(2, 1fr)";
-                } | {
-                    gridTemplateColumns: "repeat(3, 1fr)";
+            '@layer': {
+                [cssLayerComponent]: {
+                    '@container': {
+                        [x: string]: {
+                            gridTemplateColumns: "repeat(2, 1fr)";
+                        } | {
+                            gridTemplateColumns: "repeat(3, 1fr)";
+                        };
+                    };
                 };
             };
         };
         '3': {
-            '@container': {
-                [x: string]: {
-                    gridTemplateColumns: "repeat(2, 1fr)";
-                } | {
-                    gridTemplateColumns: "repeat(3, 1fr)";
+            '@layer': {
+                [cssLayerComponent]: {
+                    '@container': {
+                        [x: string]: {
+                            gridTemplateColumns: "repeat(2, 1fr)";
+                        } | {
+                            gridTemplateColumns: "repeat(3, 1fr)";
+                        };
+                    };
                 };
             };
         };
         '4': string;
         '5': (string | {
-            '@container': {
-                [x: string]: {
-                    gridTemplateColumns: "repeat(5, 1fr)";
+            '@layer': {
+                [cssLayerComponent]: {
+                    '@container': {
+                        [x: string]: {
+                            gridTemplateColumns: "repeat(5, 1fr)";
+                        };
+                    };
                 };
             };
         })[];
     };
 }>;
-export type StyledGridProps = NonNullable<RecipeVariants<typeof styledGrid>>;
-export declare const styledGridItem: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-export type StyledGridItemProps = NonNullable<RecipeVariants<typeof styledGridItem>>;
-export declare const styleIndicator: string;
-export declare const styledCheckbox: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-export type StyledCheckboxProps = NonNullable<RecipeVariants<typeof styledCheckbox>>;
-export declare const styledRadioButton: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-export type StyledRadioButtonProps = NonNullable<RecipeVariants<typeof styledRadioButton>>;
+export type GridVariants = NonNullable<RecipeVariants<typeof gridVariants>>;
+export declare const gridItemContainerStyle: string;
+export declare const gridItemStyle: string;
+export declare const indicatorStyle: string;
+export declare const checkboxStyle: string;
+export declare const radioButtonStyle: string;
 export declare const labelStyle: string;
 export declare const descriptionStyle: string;
 //# sourceMappingURL=OptionGrid.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AASvE,eAAO,MAAM,aAAa,QAAoB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAuBH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CrB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;AAO7E,eAAO,MAAM,cAAc;;;;EAkDzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAGF,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;EAiCzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAwBF,eAAO,MAAM,iBAAiB;;;;EAgC5B,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAC/C,cAAc,CAAC,OAAO,iBAAiB,CAAC,CACxC,CAAC;AAIF,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAE3B,CAAC"}
+{"version":3,"file":"OptionGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQ5D,eAAO,MAAM,aAAa,QAAoB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,QAO7B,CAAC;AA4BH,eAAO,MAAM,YAAY;;;;;gBAWpB,CAAC,iBAAiB,CAAC;;;;;;;;kBASlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;;;kBAUlB;;;;;;gBAQA,CAAC,iBAAiB,CAAC;;;;;;kBAMlB;;;;EASL,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;AAY5E,eAAO,MAAM,sBAAsB,QAsBjC,CAAC;AAEH,eAAO,MAAM,aAAa,QA8CxB,CAAC;AAIH,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,aAAa,QAkCxB,CAAC;AA4BH,eAAO,MAAM,gBAAgB,QAkC3B,CAAC;AAIH,eAAO,MAAM,UAAU,QAA+B,CAAC;AACvD,eAAO,MAAM,gBAAgB,QAA+B,CAAC"}