@autoguru/overdrive 4.62.0 → 4.64.0

package/dist/components/Alert/Alert.d.ts

@@ -9,6 +9,9 @@ export interface AlertProps extends IntentStripeProps {
     dismissible?: boolean;
     onRequestClose?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const Alert: ({ children, className, intent, inline, onRequestClose, dismissible, }: AlertProps) => React.JSX.Element;
+export declare const Alert: {
+    ({ children, className, intent, inline, onRequestClose, dismissible, }: AlertProps): React.JSX.Element;
+    displayName: string;
+};
 export default Alert;
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAK5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,GAAI,uEAOnB,UAAU,sBA6DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAK5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AAmBD,eAAO,MAAM,KAAK;4EAOf,UAAU;;CAiEZ,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -2,7 +2,6 @@ import { AlertCircleIcon, WarningIcon, CheckCircleIcon, InformationIcon, XIcon }
 import clsx from 'clsx';
 import React from 'react';
 import { sprinkles } from "../../styles/index.js";
-import { sprinklesLegacyText } from "../../styles/typography.css.js";
 import { Box } from "../Box/Box.js";
 import { Button } from "../Button/Button.js";
 import { Icon } from "../Icon/Icon.js";
@@ -16,6 +15,12 @@ const iconMapForIntent = {
   success: CheckCircleIcon,
   warning: WarningIcon
 };
+const textColorForIntent = {
+  danger: 'alertForeground',
+  information: 'infoForeground',
+  success: 'successForeground',
+  warning: 'warningForeground'
+};
 export const Alert = ({
   children,
   className = '',
@@ -25,8 +30,8 @@ export const Alert = ({
   dismissible = typeof onRequestClose === 'function'
 }) => {
   return /*#__PURE__*/_jsxs(Box, {
-    className: clsx(className, sprinklesLegacyText({
-      color: intent
+    className: clsx(className, sprinkles({
+      color: textColorForIntent[intent]
     }), {
       [styles.contained]: !inline
     }),
@@ -36,8 +41,8 @@ export const Alert = ({
     backgroundColor: "white",
     borderWidth: "1",
     borderColor: "default",
-    borderRadius: "1",
-    boxShadow: inline ? 'none' : '4',
+    borderRadius: "xsmall",
+    boxShadow: inline ? 'none' : 'z4',
     padding: "2",
     odComponent: "alert",
     children: [/*#__PURE__*/_jsx(IntentStripe, {
@@ -85,4 +90,5 @@ export const Alert = ({
     })]
   });
 };
+Alert.displayName = 'Alert';
 export default Alert;

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

@@ -148,6 +148,10 @@ export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
     isLoading: {
         true: {};
     };
+    /** Empty here; the appearance lives in the `intent: 'primary'` compound. */
+    outlined: {
+        true: {};
+    };
 }>;
 type ButtonRecipeProps = NonNullable<Required<RecipeVariants<typeof button>>>;
 export type ButtonSize = ButtonRecipeProps['size'];
@@ -156,6 +160,7 @@ export type ButtonIntent = ButtonRecipeProps['intent'];
 export type ButtonIsFullWidth = ButtonRecipeProps['isFullWidth'];
 export type ButtonIsLoading = ButtonRecipeProps['isLoading'];
 export type ButtonMinimal = ButtonRecipeProps['minimal'];
+export type ButtonOutlined = ButtonRecipeProps['outlined'];
 export type ButtonRounded = ButtonRecipeProps['rounded'];
 export interface StyledButtonProps {
     /**
@@ -174,8 +179,15 @@ export interface StyledButtonProps {
      * Present a borderless minimal appearance
      */
     minimal?: ButtonMinimal;
+    /**
+     * Transparent fill with a brand-coloured border and label.
+     *
+     * Currently applies to `variant="primary"` only, and ignored when `minimal`
+     * is set — the two are opposites.
+     */
+    outlined?: ButtonOutlined;
     isFullWidth?: ButtonIsFullWidth;
-    isLoading?: ButtonIsFullWidth;
+    isLoading?: ButtonIsLoading;
 }
 export {};
 //# sourceMappingURL=Button.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAYzE,eAAO,MAAM,aAAa,QAAkC,CAAC;AAC7D,eAAO,MAAM,cAAc,QAKzB,CAAC;AACH,eAAO,MAAM,OAAO,QAA4B,CAAC;AAGjD,eAAO,MAAM,MAAM;;;;gBA+Cd,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;gBAUD,CAAC,iBAAiB,CAAC;;kBAElB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;;;;kBASlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAOlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;;;;;kBAalB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;;;;;;EAsMJ,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAC7D,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC9B"}
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAYzE,eAAO,MAAM,aAAa,QAAkC,CAAC;AAC7D,eAAO,MAAM,cAAc,QAKzB,CAAC;AACH,eAAO,MAAM,OAAO,QAA4B,CAAC;AAGjD,eAAO,MAAM,MAAM;;;;gBA+Cd,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;gBAUD,CAAC,iBAAiB,CAAC;;kBAElB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;;;;kBASlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAOlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;;;;;kBAalB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;;;;;;IAcJ,4EAA4E;;;;EA4N5E,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAC7D,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,eAAe,CAAC;CAC5B"}

package/dist/components/Button/Button.css.js

@@ -212,6 +212,10 @@ export const button = recipe({
     },
     isLoading: {
       true: {}
+    },
+    /** Empty here; the appearance lives in the `intent: 'primary'` compound. */
+    outlined: {
+      true: {}
     }
   },
   compoundVariants: [
@@ -409,6 +413,37 @@ export const button = recipe({
         }
       }
     }
+  },
+  // Compound class names are index-based — append, never insert.
+  {
+    variants: {
+      intent: 'primary',
+      outlined: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          // intent primary sets this too, at equal specificity.
+          backgroundColor: 'transparent',
+          border: `1px solid ${vars.color.button.primary.outlined.border}`,
+          color: vars.color.button.primary.outlined.text,
+          selectors: {
+            '&:focus-visible, &:not(:disabled):hover': {
+              backgroundColor: vars.color.button.primary.outlined.hover,
+              borderColor: vars.color.button.primary.outlined.border,
+              color: vars.color.button.primary.outlined.text
+            },
+            '&:active:not(:disabled, [data-loading])': {
+              backgroundColor: vars.color.button.primary.outlined.pressed,
+              // Restated: intent primary's nested `:active`
+              // (0,3,0) beats this variant's `:focus-visible`.
+              borderColor: vars.color.button.primary.outlined.border,
+              color: vars.color.button.primary.outlined.text
+            }
+          }
+        }
+      }
+    }
   }],
   defaultVariants: {
     size: 'medium',

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACZ,YAAY,GACZ,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,eAAe,CACjB,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFAwIlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACZ,YAAY,GACZ,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,eAAe,CACjB,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFA4IlB,CAAC"}

package/dist/components/Button/Button.js

@@ -65,6 +65,7 @@ export const Button = /*#__PURE__*/forwardRef(({
   isFullWidth = false,
   localeText,
   minimal = false,
+  outlined = false,
   rounded = false,
   size = 'medium',
   testId,
@@ -84,7 +85,9 @@ export const Button = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const [functionallyDisabled, setFunctionallyDisabled] = useState(false);
   const language = _objectSpread(_objectSpread({}, LOCALE_TEXT_DEFAULT), localeText);
-  const isInverse = minimal || variant === 'secondary';
+  // `minimal` wins; primary-only because only it has outlined tokens.
+  const isOutlined = outlined && !minimal && variant === 'primary';
+  const isInverse = minimal || isOutlined || variant === 'secondary';
   const isSingleIconChild = useMemo(() => /*#__PURE__*/isValidElement(children) && children.type === Icon && typeof children.type !== 'string', [children]);
   const shape = isSingleIconChild && 'iconOnly' || rounded && 'rounded' || 'default';
   const onClick = useCallback(event => {
@@ -105,6 +108,7 @@ export const Button = /*#__PURE__*/forwardRef(({
       isFullWidth,
       isLoading,
       minimal,
+      outlined: isOutlined,
       rounded,
       shape,
       size

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,QAAQ,wCA0BnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC"}
+{"version":3,"file":"CheckBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,QAAQ,wCA6BnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC"}

package/dist/components/CheckBox/CheckBox.css.js

@@ -3,7 +3,7 @@ __vanilla_filescope__.setFileScope("lib/components/CheckBox/CheckBox.css.ts", "@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 import { nativeInput, checkable } from "../private/CheckableBase/CheckableBase.css.js";
-const colorAccent = vars.color.foreground.primary;
+const colorAccent = vars.color.brand.solid;
 const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const size = vars.space['6'];
@@ -33,7 +33,10 @@ export const checkbox = styleVariants({
   },
   selected: {
     backgroundColor: colorAccent,
-    borderColor: colorAccent
+    borderColor: colorAccent,
+    // On `selected` only — the Icon always renders, hidden by matching
+    // the page background.
+    color: vars.color.brand.onSolid
   }
 }, "checkbox");
 export const icon = style({

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

@@ -0,0 +1,64 @@
+import { type RecipeVariants } from '@vanilla-extract/recipes';
+import { cssLayerComponent } from '../../styles/layers.css';
+export declare const chip: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        filter: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    borderColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+            };
+        };
+        add: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: "transparent";
+                    borderColor: `var(--${string})`;
+                    borderStyle: "dashed";
+                    color: `var(--${string})`;
+                };
+            };
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    interactive: {
+        true: {};
+        false: {};
+    };
+}>;
+export type StyledFilterChipProps = NonNullable<RecipeVariants<typeof chip>>;
+export declare const chipBody: import("@vanilla-extract/recipes").RuntimeFn<{
+    withRemove: {
+        true: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    paddingInlineEnd: `var(--${string})`;
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export declare const buttonFont: string;
+export declare const innerButtonText: string;
+export declare const removeButton: string;
+export declare const labelText: string;
+export declare const valueText: string;
+export declare const categoryLabel: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    color: `var(--${string})`;
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+//# sourceMappingURL=FilterChip.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.css.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/FilterChip.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEvE,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAczE,eAAO,MAAM,IAAI;;;;gBAsCZ,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;kBAKlB;;;;;;;;;;;;EA6EJ,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;AAE7E,eAAO,MAAM,QAAQ;;;;gBAmBhB,CAAC,iBAAiB,CAAC;;kBAElB;;;;;EAUJ,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC;AAEH,eAAO,MAAM,eAAe,QAQ1B,CAAC;AAEH,eAAO,MAAM,YAAY,QAavB,CAAC;AAEH,eAAO,MAAM,SAAS,QAOpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;gBAYrB,CAAC,iBAAiB,CAAC;;kBAElB;;;;;EASJ,CAAC"}

package/dist/components/FilterChip/FilterChip.css.js

@@ -0,0 +1,243 @@
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/FilterChip/FilterChip.css.ts", "@autoguru/overdrive");
+import { globalLayer, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
+import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
+const TRANSITION_DURATION = '150ms';
+const FOCUS_RING_WIDTH = vars.border.width['2'];
+const FOCUS_COLOUR = vars.color.info.foreground;
+const chipHover = '&:is(button):hover, &:has(button:hover)';
+export const chip = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        alignItems: 'center',
+        borderRadius: vars.border.radius.pill,
+        borderStyle: 'solid',
+        borderWidth: vars.border.width['1'],
+        display: 'inline-flex',
+        fontSize: vars.typography.size['4'].fontSize,
+        lineHeight: vars.typography.size['4'].lineHeight,
+        maxWidth: '100%',
+        minWidth: 0,
+        position: 'relative',
+        transitionDuration: TRANSITION_DURATION,
+        transitionProperty: 'background-color, border-color, color',
+        transitionTimingFunction: vars.animation.easing.standard,
+        selectors: {
+          [`&:focus-visible, &[data-focus-visible], &:has(:focus-visible), &:has([data-focus-visible])`]: {
+            borderColor: FOCUS_COLOUR,
+            outline: `solid ${FOCUS_RING_WIDTH} ${FOCUS_COLOUR}`,
+            outlineOffset: FOCUS_RING_WIDTH
+          }
+        },
+        '@media': {
+          '(prefers-reduced-motion: reduce)': {
+            transitionDuration: '0s'
+          }
+        }
+      }
+    }
+  },
+  variants: {
+    variant: {
+      filter: {
+        '@layer': {
+          [cssLayerComponent]: {
+            backgroundColor: vars.color.background.emphasisInactive,
+            borderColor: vars.color.border.default,
+            color: vars.color.foreground.primary
+          }
+        }
+      },
+      add: {
+        '@layer': {
+          [cssLayerComponent]: {
+            backgroundColor: 'transparent',
+            borderColor: vars.color.border.default,
+            borderStyle: 'dashed',
+            color: vars.color.foreground.secondary
+          }
+        }
+      }
+    },
+    selected: {
+      true: {},
+      false: {}
+    },
+    interactive: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [{
+    variants: {
+      variant: 'filter',
+      interactive: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          selectors: {
+            [chipHover]: {
+              backgroundColor: vars.color.background.emphasisLight,
+              borderColor: vars.color.border.emphasis
+            }
+          }
+        }
+      }
+    }
+  }, {
+    variants: {
+      variant: 'add',
+      interactive: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          selectors: {
+            [chipHover]: {
+              borderColor: vars.color.border.selected,
+              color: vars.color.foreground.primary
+            },
+            [selectors.focusVisible]: {
+              borderColor: FOCUS_COLOUR,
+              color: vars.color.foreground.primary
+            }
+          }
+        }
+      }
+    }
+  }, {
+    variants: {
+      variant: 'filter',
+      selected: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          backgroundColor: vars.color.brand.solid,
+          borderColor: vars.color.brand.solid,
+          color: vars.color.brand.onSolid,
+          selectors: {
+            [chipHover]: {
+              backgroundColor: vars.color.brand.solid,
+              borderColor: vars.color.brand.solid
+            }
+          }
+        }
+      }
+    }
+  }],
+  defaultVariants: {
+    variant: 'filter',
+    selected: false,
+    interactive: false
+  }
+}, "chip");
+export const chipBody = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        gap: vars.space['1'],
+        minWidth: 0,
+        paddingBlock: vars.space['2'],
+        paddingInlineEnd: vars.space['3'],
+        paddingInlineStart: vars.space['3']
+      }
+    }
+  },
+  variants: {
+    withRemove: {
+      true: {
+        '@layer': {
+          [cssLayerComponent]: {
+            paddingInlineEnd: vars.space['1']
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    withRemove: false
+  }
+}, "chipBody");
+export const buttonFont = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      fontFamily: 'inherit',
+      fontWeight: 'inherit'
+    }
+  }
+}, "buttonFont");
+export const innerButtonText = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      color: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit'
+    }
+  }
+}, "innerButtonText");
+export const removeButton = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      display: 'inline-flex',
+      flexShrink: 0,
+      justifyContent: 'center',
+      paddingBlock: vars.space['2'],
+      paddingInlineEnd: vars.space['3'],
+      paddingInlineStart: 0
+    }
+  }
+}, "removeButton");
+export const labelText = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      flexShrink: 0,
+      whiteSpace: 'nowrap'
+    }
+  }
+}, "labelText");
+export const valueText = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }
+}, "valueText");
+export const categoryLabel = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        color: vars.color.foreground.secondary
+      }
+    }
+  },
+  variants: {
+    selected: {
+      true: {
+        '@layer': {
+          [cssLayerComponent]: {
+            color: vars.color.brand.onSolid
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+}, "categoryLabel");
+__vanilla_filescope__.endFileScope();

package/dist/components/FilterChip/FilterChip.d.ts

@@ -0,0 +1,112 @@
+import React, { type HTMLAttributes, type MouseEventHandler } from 'react';
+import type { TestIdProp } from '../../types';
+/** Attributes forwarded to the chip body. */
+type FilterChipBodyAttributes = Pick<HTMLAttributes<HTMLElement>, 'aria-controls' | 'aria-describedby' | 'aria-haspopup' | 'aria-label' | 'aria-labelledby' | 'id' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave'>;
+interface FilterChipBaseProps extends FilterChipBodyAttributes, TestIdProp {
+    /** The category name, or the chip's only text for `simple` and `add`. */
+    label: string;
+    /** Override class name with additional styles */
+    className?: string;
+}
+/** The props every chip except `add` shares. */
+interface FilterChipStateProps {
+    /**
+     * Reflects the persistent chosen state as an inverted surface. Purely
+     * visual — the chip's own text is what tells a screen reader which filter is
+     * applied. Use `pressed` if the chip is a toggle.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Marks the chip as an on/off toggle and reports `aria-pressed`. Only set
+     * this when clicking the chip applies and unapplies the filter in place; a
+     * chip whose body opens an editor is not a toggle and must leave it unset.
+     */
+    pressed?: boolean;
+    /**
+     * Whether the popover or dropdown this chip controls is open. When
+     * supplied the chip is exposed as a disclosure rather than a toggle, and
+     * `aria-haspopup` is set unless you specify it yourself. Pair it with
+     * `aria-controls` and the forwarded `ref`, which `Popover` needs to anchor
+     * itself to the chip.
+     */
+    expanded?: boolean;
+    /** Activates the chip body. Omit to render the chip non-interactively. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Removes the filter. Supplying this renders the trailing `×` button.
+     */
+    onRemove?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Accessible name for the `×` button. Defaults to naming the filter and its
+     * value — `Remove State QLD filter` — so that two chips from the same
+     * category are distinguishable. Any trailing colon is stripped.
+     */
+    removeLabel?: string;
+}
+/** A category and its chosen value, e.g. `Vehicle type: Truck`. */
+interface SelectChipProps extends FilterChipBaseProps, FilterChipStateProps {
+    type?: 'select';
+    /** The chosen value. */
+    value?: string;
+    operator?: never;
+}
+/** A category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`. */
+interface NumericChipProps extends FilterChipBaseProps, FilterChipStateProps {
+    type: 'numeric';
+    /** The chosen value. */
+    value?: string;
+    /** The comparison word, e.g. `over`. */
+    operator?: string;
+}
+/** A bare label with no value, e.g. `Serviced`. */
+interface SimpleChipProps extends FilterChipBaseProps, FilterChipStateProps {
+    type: 'simple';
+    value?: never;
+    operator?: never;
+}
+/**
+ * The dashed "Add Filter" affordance that opens a filter picker. It holds no
+ * filter, so it takes no value, no state and nothing to remove, and `onClick` is
+ * required.
+ */
+interface AddChipProps extends FilterChipBaseProps {
+    type: 'add';
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    value?: never;
+    operator?: never;
+    selected?: never;
+    pressed?: never;
+    expanded?: never;
+    onRemove?: never;
+    removeLabel?: never;
+}
+/** All FilterChip props, discriminated on `type`. */
+export type FilterChipProps = SelectChipProps | NumericChipProps | SimpleChipProps | AddChipProps;
+/**
+ * The four filter chip shapes.
+ *
+ * - `select` — a category and its chosen value, e.g. `Vehicle type: Truck`
+ * - `numeric` — a category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`
+ * - `simple` — a bare label with no value
+ * - `add` — the dashed "Add Filter" affordance that opens a filter picker
+ */
+export type FilterChipType = NonNullable<FilterChipProps['type']>;
+/**
+ * A filter chip represents one active filter in a filter bar. The body opens an
+ * editor for the filter's value and the trailing `×` clears it.
+ *
+ * Distinct from `Badge`, which is a static, non-interactive label.
+ *
+ * The forwarded `ref` lands on the chip body, which is what a `Popover` anchors
+ * to. It is attached only when the body is a button — that is, when `onClick` is
+ * supplied. A chip without one has an inert `<span>` body and receives no ref,
+ * whether or not it has a `×`.
+ *
+ * Removal is by the `×` button only — the WAI-ARIA APG chip pattern also removes
+ * a focused chip on `Backspace`/`Delete`, which this component does not
+ * implement.
+ */
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=FilterChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/FilterChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAEb,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAEtB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,6CAA6C;AAC7C,KAAK,wBAAwB,GAAG,IAAI,CACnC,cAAc,CAAC,WAAW,CAAC,EACzB,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,YAAY,GACZ,iBAAiB,GACjB,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,CAChB,CAAC;AAEF,UAAU,mBAAoB,SAAQ,wBAAwB,EAAE,UAAU;IACzE,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,gDAAgD;AAChD,UAAU,oBAAoB;IAC7B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,mEAAmE;AACnE,UAAU,eAAgB,SAAQ,mBAAmB,EAAE,oBAAoB;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,yFAAyF;AACzF,UAAU,gBAAiB,SAAQ,mBAAmB,EAAE,oBAAoB;IAC3E,IAAI,EAAE,SAAS,CAAC;IAChB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,mDAAmD;AACnD,UAAU,eAAgB,SAAQ,mBAAmB,EAAE,oBAAoB;IAC1E,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;CACjB;AAED;;;;GAIG;AACH,UAAU,YAAa,SAAQ,mBAAmB;IACjD,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,qDAAqD;AACrD,MAAM,MAAM,eAAe,GACxB,eAAe,GACf,gBAAgB,GAChB,eAAe,GACf,YAAY,CAAC;AAEhB;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;AAElE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,2FAqItB,CAAC"}