@autoguru/overdrive 4.45.2 → 4.46.0

package/dist/components/OptionList/OptionList.css.js

@@ -3,108 +3,108 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/OptionList/OptionList.css.ts", "@autoguru/overdrive");
 import { 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/theme.css.js";
-import { interactionStyle } from "../../utils/css.js"; // === Group styles
-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");
+import { overdriveTokens as tokens } from "../../themes/theme.css.js"; // === Group styles
+export const groupStyle = sprinkles({
+  mt: '6'
+});
+export const groupLabelStyle = sprinkles({
+  text: '7',
+  fontWeight: 'bold',
+  mb: '3'
+});
+export const descriptionStyle = style([sprinkles({
+  text: '4'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      color: tokens.colours.gamut.gray400
+    }
+  }
+}], "descriptionStyle");
 
 // === Option item styles
-const buttonBorderRadius = tokens.border.radius['md'];
-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'
-  }, interactionStyle({
-    disabled: {
+export const optionItemStyle = style([sprinkles({
+  borderColour: 'gray',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  display: 'flex',
+  gap: '2',
+  paddingY: '3',
+  paddingX: '4',
+  userSelect: 'none',
+  width: 'full'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
       background: tokens.colours.background.body,
-      cursor: 'default'
-    },
-    hover: {
-      background: tokens.colours.gamut.gray200,
-      cursor: 'pointer'
-    },
-    focusVisible: {
-      background: tokens.colours.gamut.gray200
-    }
-  }), {
-    selectors: {
-      ['&+&']: {
-        borderTopStyle: 'none'
-      },
-      ['&:first-child']: {
-        borderTopLeftRadius: buttonBorderRadius,
-        borderTopRightRadius: buttonBorderRadius
-      },
-      ['&:last-child']: {
-        borderBottomLeftRadius: buttonBorderRadius,
-        borderBottomRightRadius: buttonBorderRadius
+      selectors: {
+        ['&+&']: {
+          borderTopStyle: 'none'
+        },
+        ['&:first-child']: {
+          borderTopLeftRadius: tokens.border.radius.md,
+          borderTopRightRadius: tokens.border.radius.md
+        },
+        ['&:last-child']: {
+          borderBottomLeftRadius: tokens.border.radius.md,
+          borderBottomRightRadius: tokens.border.radius.md
+        },
+        [selectors.hoverNotDisabled]: {
+          background: tokens.colours.gamut.gray200,
+          cursor: 'pointer'
+        },
+        [selectors.focusVisible]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.disabled]: {
+          background: tokens.colours.background.body,
+          cursor: 'default'
+        }
       }
     }
-  }, focusOutlineStyle]
-}, "styledOptionItem");
-export const itemLabelStyle = style({
+  }
+}, focusOutlineStyle], "optionItemStyle");
+export const itemLabelStyle = sprinkles({
   alignSelf: 'center',
-  fontSize: tokens.typography.size['3'].fontSize,
-  lineHeight: tokens.typography.size['3'].lineHeight,
-  width: '100%'
-}, "itemLabelStyle");
+  text: '3',
+  width: 'full'
+});
 
 // === Checkbox styles
-const checkboxTransition = style({
-  transitionDuration: '100ms',
-  transitionProperty: 'background',
-  transitionTimingFunction: 'ease-in'
-}, "checkboxTransition");
-const checkboxHovered = style({
-  selectors: {
-    [`${styledOptionItem.classNames.base}:hover &:not([data-checked],[data-disabled])`]: {
-      background: tokens.colours.gamut.gray300,
-      color: tokens.colours.background.body
+export const checkbox = style([sprinkles({
+  alignItems: 'center',
+  display: 'flex',
+  flexShrink: '0',
+  justifyContent: 'center',
+  size: '6',
+  borderRadius: 'sm',
+  borderStyle: 'solid',
+  borderWidth: '1'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      background: tokens.colours.background.body,
+      borderColor: tokens.border.colours.gray,
+      color: 'transparent',
+      transitionDuration: '100ms',
+      transitionProperty: 'background',
+      transitionTimingFunction: 'ease-in',
+      selectors: {
+        [selectors.checked]: {
+          background: tokens.colours.gamut.gray900,
+          borderColor: tokens.border.colours.dark,
+          color: tokens.colours.background.body
+        },
+        [`${optionItemStyle}:hover &:not([data-checked],[data-disabled])`]: {
+          background: tokens.colours.gamut.gray300,
+          color: tokens.colours.background.body
+        }
+      }
     }
   }
-}, "checkboxHovered");
-export const checkbox = recipe({
-  base: [{
-    background: tokens.colours.background.body,
-    borderColor: tokens.border.colours.gray,
-    borderStyle: 'solid',
-    borderRadius: tokens.border.radius['sm'],
-    borderWidth: tokens.border.width['1'],
-    color: 'transparent'
-  }, interactionStyle({
-    selected: {
-      background: tokens.colours.gamut.gray900,
-      borderColor: tokens.border.colours.dark,
-      color: tokens.colours.background.body
-    }
-  }), sprinkles({
-    alignItems: 'center',
-    display: 'flex',
-    flexShrink: '0',
-    justifyContent: 'center',
-    size: '6'
-  }), checkboxHovered, checkboxTransition]
-}, "checkbox");
+}], "checkbox");
 __vanilla_filescope__.endFileScope();

package/dist/components/OptionList/OptionList.d.ts

@@ -43,6 +43,7 @@ export declare const OptionList: {
     Item: {
         (props: {
             name?: string | undefined;
+            form?: string | undefined;
             value: string;
             autoFocus?: boolean | undefined;
             id?: string | undefined;
@@ -58,10 +59,16 @@ export declare const OptionList: {
             onChange?: ((isSelected: boolean) => void) | undefined;
             onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
             onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+            onClick?: ((e: React.MouseEvent<import("@react-types/shared").FocusableElement>) => void) | undefined;
             isDisabled?: boolean | undefined;
             isReadOnly?: boolean | undefined;
             onFocusChange?: ((isFocused: boolean) => void) | undefined;
             excludeFromTabOrder?: boolean | undefined;
+            onPress?: ((e: import("react-aria").PressEvent) => void) | undefined;
+            onPressStart?: ((e: import("react-aria").PressEvent) => void) | undefined;
+            onPressEnd?: ((e: import("react-aria").PressEvent) => void) | undefined;
+            onPressChange?: ((isPressed: boolean) => void) | undefined;
+            onPressUp?: ((e: import("react-aria").PressEvent) => void) | undefined;
             isRequired?: boolean | undefined;
             isInvalid?: boolean | undefined;
             validationState?: import("react-stately").ValidationState | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,KAAK,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,KAAK,kBAAkB,EAAyB,MAAM,eAAe,CAAC;AAE/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAU9C,KAAK,iBAAiB,GAAG,IAAI,CAC5B,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,WAAW,GAAG,KAAK,GAAG,OAAO,CAC7B,CAAC;AAEF,MAAM,WAAW,eAChB,SAAQ,sBAAsB,EAC7B,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,0CAAiD,CAAC;AAEhF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BhD,CAAC"}
+{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,KAAK,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,KAAK,kBAAkB,EAAyB,MAAM,eAAe,CAAC;AAE/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAU9C,KAAK,iBAAiB,GAAG,IAAI,CAC5B,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,WAAW,GAAG,KAAK,GAAG,OAAO,CAC7B,CAAC;AAEF,MAAM,WAAW,eAChB,SAAQ,sBAAsB,EAC7B,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,0CAAiD,CAAC;AAEhF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BhD,CAAC"}

package/dist/components/OptionList/OptionListItem.js

@@ -11,7 +11,7 @@ import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { OptionListContext } from "./OptionList.js";
-import { checkbox, itemLabelStyle, styledOptionItem } from "./OptionList.css.js";
+import { checkbox, itemLabelStyle, optionItemStyle } from "./OptionList.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The OptionListItem is used to populate OptionList. They are outlined with a large interactive area and flexible
@@ -29,7 +29,7 @@ export const OptionListItem = props => {
     focusProps
   } = useFocusRing();
   return /*#__PURE__*/_jsxs("label", _objectSpread(_objectSpread({
-    className: styledOptionItem()
+    className: optionItemStyle
   }, dataAttrs({
     'focus-visible': isFocusVisible
   })), {}, {
@@ -44,7 +44,7 @@ export const OptionListItem = props => {
         width: 'full'
       }),
       children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-        className: checkbox()
+        className: checkbox
       }, dataAttrs({
         checked: isSelected
       })), {}, {

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

@@ -1,16 +1,11 @@
-export declare const styledSearchBar: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+export declare const searchBarStyle: string;
+export declare const inputStyle: string;
+export declare const clearButtonVariants: import("@vanilla-extract/recipes").RuntimeFn<{
+    hasValue: {
+        false: {};
     };
-}>;
-export declare const styledInput: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-export declare const styledClearButton: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    isFocused: {
+        false: {};
     };
 }>;
 export declare const fieldWrapper: string;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.css.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe;;;;EAkC1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;EAetB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;EAgB5B,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC"}
+{"version":3,"file":"SearchBar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.css.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,cAAc,QAsCzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAiBrB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;EA2C9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC"}

package/dist/components/SearchBar/SearchBar.css.js

@@ -5,86 +5,141 @@ __vanilla_filescope__.setFileScope("lib/components/SearchBar/SearchBar.css.ts",
 import { 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 { sprinkles } from "../../styles/sprinkles.css.js";
-import { tokens } from "../../themes/base/tokens.js";
-import { interactionStyle } from "../../utils/css.js";
+import { overdriveTokens as tokens } from "../../themes/theme.css.js";
 const hideWebkitAppearance = style({
-  selectors: {
-    '&::-webkit-search-cancel-button, &::-webkit-search-decoration': {
-      appearance: 'none'
+  '@layer': {
+    [cssLayerComponent]: {
+      selectors: {
+        '&::-webkit-search-cancel-button, &::-webkit-search-decoration': {
+          appearance: 'none'
+        }
+      }
     }
   }
 }, "hideWebkitAppearance");
 const placeholder = style({
-  selectors: {
-    '&::placeholder': {
-      color: tokens.colours.gamut.gray400
-    },
-    '&:disabled::placeholder': {
-      color: tokens.colours.gamut.gray300
+  '@layer': {
+    [cssLayerComponent]: {
+      selectors: {
+        '&::placeholder': {
+          color: tokens.colours.gamut.gray400
+        },
+        '&:disabled::placeholder': {
+          color: tokens.colours.gamut.gray300
+        }
+      }
     }
   }
 }, "placeholder");
-export const styledSearchBar = 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[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
-    },
-    disabled: {
-      borderColor: tokens.border.colours.light,
-      cursor: 'not-allowed',
-      color: tokens.colours.gamut.gray300
-    },
-    hover: {
-      cursor: 'text'
-    },
-    hoverNotFocus: {
-      backgroundColor: tokens.border.colours.light,
-      borderColor: tokens.border.colours.light
+export const searchBarStyle = style([{
+  '@layer': {
+    [cssLayerComponent]: {
+      alignItems: 'center',
+      backgroundColor: tokens.colours.background.body,
+      borderColor: tokens.border.colours.gray,
+      borderRadius: tokens.border.radius['md'],
+      borderStyle: 'solid',
+      borderWidth: tokens.border.width[2],
+      color: tokens.colours.gamut.gray400,
+      display: 'flex',
+      gap: tokens.space[2],
+      padding: `0 ${tokens.space[4]}`,
+      selectors: {
+        '&:focus, &[data-focus], &[data-focused]': {
+          borderColor: tokens.border.colours.dark,
+          color: tokens.colours.gamut.gray900
+        },
+        '&:disabled, &[data-disabled]': {
+          borderColor: tokens.border.colours.light,
+          color: tokens.colours.gamut.gray300,
+          cursor: 'not-allowed'
+        },
+        '&:hover:not(:disabled,[data-disabled]), &[data-hover]:not(:disabled,[data-disabled])': {
+          cursor: 'text'
+        },
+        '&:hover:not(:focus,[data-focus],[data-focused]):not(:disabled,[data-disabled]), &[data-hover]:not(:focus,[data-focus],[data-focused]):not(:disabled,[data-disabled])': {
+          backgroundColor: tokens.border.colours.light,
+          borderColor: tokens.border.colours.light
+        }
+      }
+    }
+  }
+}, focusOutlineStyle], "searchBarStyle");
+export const inputStyle = style([{
+  '@layer': {
+    [cssLayerComponent]: {
+      background: 'transparent',
+      borderWidth: 0,
+      cursor: 'inherit',
+      fontSize: tokens.typography.size[8].fontSize,
+      height: '72px',
+      outlineStyle: 'none',
+      textAlign: 'center',
+      width: '100%'
     }
-  }), focusOutlineStyle]
-}, "styledSearchBar");
-export const styledInput = recipe({
-  base: [{
-    background: 'transparent',
-    borderWidth: 0,
-    cursor: 'inherit',
-    fontSize: tokens.typography.size[8].fontSize,
-    height: '72px',
-    outlineStyle: 'none',
-    textAlign: 'center',
-    width: '100%'
-  }, hideWebkitAppearance, placeholder]
-}, "styledInput");
-export const styledClearButton = recipe({
-  base: [{
+  }
+}, hideWebkitAppearance, placeholder], "inputStyle");
+export const clearButtonVariants = recipe({
+  base: [sprinkles({
     alignItems: 'center',
-    background: 'transparent',
     borderStyle: 'none',
-    cursor: 'pointer',
-    display: 'flex',
     justifyContent: 'center',
-    padding: 0,
-    position: 'relative'
-  }, sprinkles({
+    opacity: '1',
+    p: 'none',
+    pointerEvents: 'auto',
+    position: 'relative',
     size: '6'
-  })]
-}, "styledClearButton");
+  }), {
+    '@layer': {
+      [cssLayerComponent]: {
+        background: 'transparent',
+        cursor: 'pointer'
+      }
+    }
+  }],
+  variants: {
+    hasValue: {
+      false: {}
+    },
+    isFocused: {
+      false: {}
+    }
+  },
+  compoundVariants: [{
+    variants: {
+      hasValue: false
+    },
+    style: sprinkles({
+      display: 'none'
+    })
+  }, {
+    variants: {
+      hasValue: true,
+      isFocused: false
+    },
+    style: sprinkles({
+      opacity: '0',
+      pointerEvents: 'none'
+    })
+  }, {
+    variants: {
+      hasValue: true,
+      isFocused: true
+    },
+    style: sprinkles({
+      display: 'flex'
+    })
+  }]
+}, "clearButtonVariants");
 export const fieldWrapper = style({
-  alignItems: 'center',
-  display: 'flex',
-  flexGrow: 1
+  '@layer': {
+    [cssLayerComponent]: {
+      alignItems: 'center',
+      display: 'flex',
+      flexGrow: 1
+    }
+  }
 }, "fieldWrapper");
 __vanilla_filescope__.endFileScope();

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMN,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAY9C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,UAAU,cAAe,SAAQ,oBAAoB,EAAE,UAAU;IAChE,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAClC;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,gBAAgB,cAAc,sBAiEvD,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMN,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAY9C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,UAAU,cAAe,SAAQ,oBAAoB,EAAE,UAAU;IAChE,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAClC;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,gBAAgB,cAAc,sBAuEvD,CAAC"}

package/dist/components/SearchBar/SearchBar.js

@@ -7,10 +7,11 @@ import { MagnifyIcon, CloseIcon } from '@autoguru/icons';
 import React from 'react';
 import { mergeProps, useButton, useFocusRing, useSearchField } from 'react-aria';
 import { useSearchFieldState } from 'react-stately';
+import { sprinkles } from "../../styles/index.js";
 import { mergeRefs } from "../../utils/index.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
-import { fieldWrapper, styledClearButton, styledInput, styledSearchBar } from "./SearchBar.css.js";
+import { fieldWrapper, clearButtonVariants, inputStyle, searchBarStyle } from "./SearchBar.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultEnglish = {
   label: 'Search',
@@ -65,9 +66,14 @@ export const SearchBar = componentProps => {
     (_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : _refInput$current.focus();
   };
   const ClearButton = () => {
-    if (state.value === '') return null;
+    var _componentProps$lang$, _componentProps$lang;
+    const hasValue = state.value !== '';
     return /*#__PURE__*/_jsx(ReactAriaButton, _objectSpread(_objectSpread({
-      className: styledClearButton({})
+      className: clearButtonVariants({
+        hasValue,
+        isFocused
+      }),
+      "aria-label": (_componentProps$lang$ = (_componentProps$lang = componentProps.lang) === null || _componentProps$lang === void 0 ? void 0 : _componentProps$lang.clear) !== null && _componentProps$lang$ !== void 0 ? _componentProps$lang$ : defaultEnglish.clear
     }, clearButtonProps), {}, {
       children: /*#__PURE__*/_jsx(Icon, {
         icon: CloseIcon,
@@ -79,7 +85,7 @@ export const SearchBar = componentProps => {
     /*#__PURE__*/
     // this is a pass-through for mouse/touch interaction, the interactive element is keyboard focusable
     _jsxs("div", _objectSpread(_objectSpread({
-      className: styledSearchBar({}),
+      className: searchBarStyle,
       onClick: handleWrapperClick,
       ref: refWrapper
     }, dataAttrs({
@@ -88,15 +94,16 @@ export const SearchBar = componentProps => {
       'focus-visible': isFocusVisible,
       testid: props.testId
     })), {}, {
-      children: [/*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: MagnifyIcon,
-          size: "large"
-        })
+      children: [/*#__PURE__*/_jsx(Icon, {
+        className: sprinkles({
+          flexShrink: '0'
+        }),
+        icon: MagnifyIcon,
+        size: "large"
       }), /*#__PURE__*/_jsxs("div", {
         className: fieldWrapper,
         children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
-          className: styledInput({}),
+          className: inputStyle,
           ref: mergeRefs([refInput, refForwarded])
         })), /*#__PURE__*/_jsx(ClearButton, {})]
       })]

package/dist/hooks/useMedia/useMedia.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useMedia.spec.d.ts.map

package/dist/hooks/useMedia/useMedia.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMedia.spec.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useMedia/useMedia.spec.ts"],"names":[],"mappings":""}