@autoguru/overdrive 4.57.2 → 4.58.0

package/dist/components/Alert/Alert.js

@@ -1,4 +1,4 @@
-import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowCloseIcon } from '@autoguru/icons';
+import { AlertCircleIcon, WarningIcon, CheckCircleIcon, InformationIcon, XIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import React from 'react';
 import { sprinkles } from "../../styles/index.js";
@@ -14,7 +14,7 @@ const iconMapForIntent = {
   danger: AlertCircleIcon,
   information: InformationIcon,
   success: CheckCircleIcon,
-  warning: AlertIcon
+  warning: WarningIcon
 };
 export const Alert = ({
   children,
@@ -77,7 +77,7 @@ export const Alert = ({
             className: sprinkles({
               colour: 'muted'
             }),
-            icon: WindowCloseIcon,
+            icon: XIcon,
             size: "medium"
           })
         })

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

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGvE,OAAc,EACb,KAAK,wBAAwB,EAI7B,KAAK,YAAY,EAEjB,KAAK,GAAG,EASR,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAMnD,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,KAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,gBAAgB,CAAC,WAAW,CAC5C,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAyGD,eAAO,MAAM,WAAW,EAwFlB,CAAC,WAAW,SAAS,OAAO,EACjC,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC9D,YAAY,CAAC"}
+{"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAc,EACb,KAAK,wBAAwB,EAI7B,KAAK,YAAY,EAEjB,KAAK,GAAG,EASR,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAMnD,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,KAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,gBAAgB,CAAC,WAAW,CAC5C,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAyGD,eAAO,MAAM,WAAW,EAwFlB,CAAC,WAAW,SAAS,OAAO,EACjC,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC9D,YAAY,CAAC"}

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -9,7 +9,7 @@ const _excluded = ["autoFocus", "autoWidth", "inlineOptions", "fieldIcon", "sugg
 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; }
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-import { ChevronDownIcon, CloseIcon } from '@autoguru/icons';
+import { CaretDownIcon, XIcon } from '@autoguru/icons';
 import { wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from 'react';
@@ -220,7 +220,7 @@ const AutoSuggestFullscreenInput = /*#__PURE__*/forwardRef(function AutoSuggestF
         size: "medium",
         onClick: closeModal,
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: CloseIcon
+          icon: XIcon
         })
       })]
     })
@@ -455,7 +455,7 @@ const AutoSuggestInputPrimitive = withEnhancedInput(_ref4 => {
       suffixed,
       prefixed,
       isLoading,
-      fieldIcon = ChevronDownIcon,
+      fieldIcon = CaretDownIcon,
       isFocused,
       className,
       size
@@ -495,7 +495,7 @@ const AutoSuggestInputPrimitive = withEnhancedInput(_ref4 => {
     onMouseDown: onRequestReset,
     children: /*#__PURE__*/_jsx(Icon, {
       size: size === 'large' ? size : 'medium',
-      icon: CloseIcon
+      icon: XIcon
     })
   }) :
   // eslint-disable-next-line sonarjs/no-nested-conditional

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;AAU5D,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;;;;;;;;;;;;;;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"}

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

@@ -1,11 +1,12 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Button/Button.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { globalLayer, 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 { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 const intentColors = vars.colours.intent;
 const smallHeight = '36px';
 const selectorFocusHoverActive = '&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active';

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

@@ -6,7 +6,7 @@ declare const LOCALE_TEXT_DEFAULT: {
     readonly loading: "loading";
 };
 type LocaleText = Partial<Record<keyof typeof LOCALE_TEXT_DEFAULT, string>>;
-export interface ButtonProps extends Pick<ButtonPrimitive, 'children' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'>, StyledButtonProps, TestIdProp {
+export interface ButtonProps extends Pick<ButtonPrimitive, 'children' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label' | 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>, StyledButtonProps, TestIdProp {
     /**
      * Disabling the button will prevent it from receiving keyboard focus or click events
      */

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,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,EAClC,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,uFA8HlB,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,EACd,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAClE,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,uFAsIlB,CAAC"}

package/dist/components/Button/Button.js

@@ -73,9 +73,13 @@ export const Button = /*#__PURE__*/forwardRef(({
   onBlur,
   onClick: incomingOnClick,
   onFocus,
+  onKeyDown,
   onMouseEnter,
   onMouseLeave,
-  'aria-label': ariaLabel
+  'aria-label': ariaLabel,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup
 }, ref) => {
   const [functionallyDisabled, setFunctionallyDisabled] = useState(false);
   const language = _objectSpread(_objectSpread({}, LOCALE_TEXT_DEFAULT), localeText);
@@ -106,10 +110,14 @@ export const Button = /*#__PURE__*/forwardRef(({
     }), className],
     pointerEvents: functionallyDisabled ? 'none' : undefined,
     'aria-label': isLoading ? language.loading : ariaLabel,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
     'data-loading': isLoading ? '' : undefined,
     onBlur,
     onClick,
     onFocus,
+    onKeyDown,
     onMouseEnter,
     onMouseLeave
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/Calendar.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,QAM5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC;AAIH,eAAO,MAAM,SAAS,QAoCpB,CAAC;AAIH,eAAO,MAAM,WAAW,QAoCtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAGH,eAAO,MAAM,UAAU,QAGrB,CAAC"}
+{"version":3,"file":"Calendar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/Calendar.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,iBAAiB,QAM5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC;AAIH,eAAO,MAAM,SAAS,QAoCpB,CAAC;AAIH,eAAO,MAAM,WAAW,QAoCtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAGH,eAAO,MAAM,UAAU,QAGrB,CAAC"}

package/dist/components/Calendar/Calendar.css.js

@@ -1,11 +1,12 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Calendar/Calendar.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { globalLayer, style } from '@vanilla-extract/css';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, 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";
+globalLayer(LAYER_ORDER);
 export const calendarGridStyle = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/Calendar/Calendar.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
+import { CaretLeftIcon, CaretRightIcon } from '@autoguru/icons';
 import { getLocalTimeZone,
 // currently only supporting western-style Gregorian calendar
 GregorianCalendar, today } from '@internationalized/date';
@@ -98,7 +98,7 @@ export const Calendar = ({
       children: [/*#__PURE__*/_jsx(CalendarButton, _objectSpread(_objectSpread({}, prevButtonProps), {}, {
         "aria-label": textValues.prevLabel,
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: ChevronLeftIcon,
+          icon: CaretLeftIcon,
           size: "medium"
         })
       })), /*#__PURE__*/_jsx("h4", {
@@ -107,7 +107,7 @@ export const Calendar = ({
       }), /*#__PURE__*/_jsx(CalendarButton, _objectSpread(_objectSpread({}, nextButtonProps), {}, {
         "aria-label": textValues.nextLabel,
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: ChevronRightIcon,
+          icon: CaretRightIcon,
           size: "medium"
         })
       }))]

package/dist/components/Columns/Column.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AA8BvE,eAAO,MAAM,8BAA8B;;;;;;;;;CAE1C,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAC5C,OAAO,8BAA8B,CACrC,CAAC,CAAC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;EAuBtB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC7C,cAAc,CAAC,OAAO,WAAW,CAAC,CAClC,CAAC"}
+{"version":3,"file":"Column.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAgCvE,eAAO,MAAM,8BAA8B;;;;;;;;;CAE1C,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAC5C,OAAO,8BAA8B,CACrC,CAAC,CAAC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;EAuBtB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC7C,cAAc,CAAC,OAAO,WAAW,CAAC,CAClC,CAAC"}

package/dist/components/Columns/Column.css.js

@@ -1,9 +1,11 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Columns/Column.css.ts", "@autoguru/overdrive");
+import { globalLayer } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { responsiveConditions, sprinkles } from "../../styles/sprinkles.css.js";
+globalLayer(LAYER_ORDER);
 const getSizeStyle = scale => `${scale * 100}%`;
 const columnWidthResponsive = defineProperties({
   '@layer': cssLayerComponent,

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateInput/DateInput.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAevB,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAI9B,CAAC"}
+{"version":3,"file":"DateInput.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateInput/DateInput.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY,QAevB,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAI9B,CAAC"}

package/dist/components/DateInput/DateInput.css.js

@@ -1,9 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DateInput/DateInput.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { selectors } from "../../styles/selectors.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
+globalLayer(LAYER_ORDER);
 export const segmentStyle = style({
   '@layer': {
     [cssLayerComponent]: {

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAsBhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,QAAQ,yCAmBnB,CAAC;AAEH,eAAO,MAAM,QAAQ,qCAenB,CAAC"}
+{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAsBhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,QAAQ,yCAmBnB,CAAC;AAEH,eAAO,MAAM,QAAQ,qCAenB,CAAC"}

package/dist/components/DatePicker/DatePicker.css.js

@@ -1,8 +1,9 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DatePicker/DatePicker.css.ts", "@autoguru/overdrive");
-import { style, styleVariants } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { globalLayer, style, styleVariants } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const inputContainer = style({
   '@layer': {
     [cssLayerComponent]: {

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeField.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimeField/DateTimeField.css.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAgD5D,eAAO,MAAM,cAAc,QAazB,CAAC;AAEH,eAAO,MAAM,cAAc,QAczB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;gBAmBrB,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAKJ,CAAC;AAEH,eAAO,MAAM,eAAe,QAc1B,CAAC;AACH,eAAO,MAAM,UAAU,QAAqD,CAAC;AAC7E,eAAO,MAAM,UAAU,QAgBrB,CAAC"}
+{"version":3,"file":"DateTimeField.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimeField/DateTimeField.css.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAkDzE,eAAO,MAAM,cAAc,QAazB,CAAC;AAEH,eAAO,MAAM,cAAc,QAczB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;gBAmBrB,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAKJ,CAAC;AAEH,eAAO,MAAM,eAAe,QAc1B,CAAC;AACH,eAAO,MAAM,UAAU,QAAqD,CAAC;AAC7E,eAAO,MAAM,UAAU,QAgBrB,CAAC"}

package/dist/components/DateTimeField/DateTimeField.css.js

@@ -1,13 +1,14 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DateTimeField/DateTimeField.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { globalLayer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { focusOutline, focusOutlineStyle } from "../../styles/focusOutline.css.js";
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { selectors } from "../../styles/selectors.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { textStyles } from "../../styles/typography.js";
 import { overdriveTokens } from "../../themes/index.js";
+globalLayer(LAYER_ORDER);
 const baseFieldStyle = style([sprinkles({
   backgroundColor: 'page',
   borderColor: 'default',

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EACN,cAAc,EACd,iBAAiB,EAEjB,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAO1C,KAAK,WAAW,GAAG,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,IAAI,GAAG,UAAU,GAAG,SAAS,CAC7B,CAAC;AACF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,WAAW;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA4DrD,CAAC"}
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EACN,cAAc,EACd,iBAAiB,EAEjB,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAO1C,KAAK,WAAW,GAAG,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,IAAI,GAAG,UAAU,GAAG,SAAS,CAC7B,CAAC;AACF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,WAAW;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA4DrD,CAAC"}

package/dist/components/DropDown/DropDown.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["children", "label", "icon", "alignment", "isOpen", "onOpenChange", "onClick"];
 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 { ChevronDownIcon } from '@autoguru/icons';
+import { CaretDownIcon } from '@autoguru/icons';
 import * as React from 'react';
 import { useCallback, useRef, useState } from 'react';
 import { Button } from "../Button/Button.js";
@@ -17,7 +17,7 @@ export const DropDown = _ref => {
   let {
       children: options,
       label,
-      icon = ChevronDownIcon,
+      icon = CaretDownIcon,
       alignment = EPositionerAlignment.BOTTOM_LEFT,
       isOpen: controlledIsOpen,
       onOpenChange,

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

@@ -1 +1 @@
-{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QAUf,CAAC;AAEH,eAAO,MAAM,KAAK,QAkBhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
+{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,IAAI,QAUf,CAAC;AAEH,eAAO,MAAM,KAAK,QAkBhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}

package/dist/components/EditableText/EditableText.css.js

@@ -1,8 +1,9 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/EditableText/EditableText.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const root = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
+import { CaretLeftIcon, CaretRightIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
@@ -111,7 +111,7 @@ export const HorizontalAutoScroller = ({
           },
           variant: "secondary",
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: ChevronLeftIcon
+            icon: CaretLeftIcon
           })
         })
       }), /*#__PURE__*/_jsxs(Columns, {
@@ -144,7 +144,7 @@ export const HorizontalAutoScroller = ({
           },
           variant: "secondary",
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: ChevronRightIcon
+            icon: CaretRightIcon
           })
         })
       })]

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRenderer.css.d.ts","sourceRoot":"","sources":["../../../lib/components/MarkdownRenderer/MarkdownRenderer.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;gBAKnB,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;EAQJ,CAAC"}
+{"version":3,"file":"MarkdownRenderer.css.d.ts","sourceRoot":"","sources":["../../../lib/components/MarkdownRenderer/MarkdownRenderer.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAKzE,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;gBAKnB,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;EAQJ,CAAC"}

package/dist/components/MarkdownRenderer/MarkdownRenderer.css.js

@@ -1,9 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/MarkdownRenderer.css.ts", "@autoguru/overdrive");
-import { globalStyle, style } from '@vanilla-extract/css';
+import { globalLayer, globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const rootBase = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/MarkdownRenderer/components/MarkdownBlockquote.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownBlockquote.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownBlockquote.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,eAAO,MAAM,UAAU;;;;gBAgBlB,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;EAQJ,CAAC"}
+{"version":3,"file":"MarkdownBlockquote.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownBlockquote.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK5E,eAAO,MAAM,UAAU;;;;gBAgBlB,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;EAQJ,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownBlockquote.css.js

@@ -1,8 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownBlockquote.css.ts", "@autoguru/overdrive");
+import { globalLayer } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { cssLayerComponent } from "../../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const blockquote = recipe({
   base: {
     '@layer': {

package/dist/components/MarkdownRenderer/components/MarkdownCodeBlock.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownCodeBlock.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownCodeBlock.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,eAAO,MAAM,SAAS;;;;gBAgBjB,CAAC,iBAAiB,CAAC;;;;;;kBAMlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAMlB;;;;EAQJ,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC"}
+{"version":3,"file":"MarkdownCodeBlock.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownCodeBlock.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK5E,eAAO,MAAM,SAAS;;;;gBAgBjB,CAAC,iBAAiB,CAAC;;;;;;kBAMlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAMlB;;;;EAQJ,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownCodeBlock.css.js

@@ -1,9 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownCodeBlock.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { globalLayer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { cssLayerComponent } from "../../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const codeBlock = recipe({
   base: {
     '@layer': {

package/dist/components/MarkdownRenderer/components/MarkdownEmphasis.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEmphasis.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownEmphasis.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,QAMnB,CAAC"}
+{"version":3,"file":"MarkdownEmphasis.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownEmphasis.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,QAMnB,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownEmphasis.css.js

@@ -1,7 +1,8 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownEmphasis.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../../styles/layers.css.js";
+globalLayer(LAYER_ORDER);
 export const emphasis = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/MarkdownRenderer/components/MarkdownImage.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownImage.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownImage.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,QAQhB,CAAC"}
+{"version":3,"file":"MarkdownImage.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownImage.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK,QAQhB,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownImage.css.js

@@ -1,8 +1,9 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownImage.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const image = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/MarkdownRenderer/components/MarkdownInlineCode.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownInlineCode.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownInlineCode.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,eAAO,MAAM,UAAU;;;;gBAelB,CAAC,iBAAiB,CAAC;;kBAElB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAQJ,CAAC"}
+{"version":3,"file":"MarkdownInlineCode.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownInlineCode.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK5E,eAAO,MAAM,UAAU;;;;gBAelB,CAAC,iBAAiB,CAAC;;kBAElB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAQJ,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownInlineCode.css.js

@@ -1,8 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownInlineCode.css.ts", "@autoguru/overdrive");
+import { globalLayer } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { cssLayerComponent } from "../../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const inlineCode = recipe({
   base: {
     '@layer': {

package/dist/components/MarkdownRenderer/components/MarkdownStrikethrough.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownStrikethrough.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownStrikethrough.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAMxB,CAAC"}
+{"version":3,"file":"MarkdownStrikethrough.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownStrikethrough.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,QAMxB,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownStrikethrough.css.js

@@ -1,7 +1,8 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownStrikethrough.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../../styles/layers.css.js";
+globalLayer(LAYER_ORDER);
 export const strikethrough = style({
   '@layer': {
     [cssLayerComponent]: {

package/dist/components/MarkdownRenderer/components/MarkdownTable.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownTable.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownTable.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,eAAO,MAAM,YAAY;;;;gBAYpB,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;EAQJ,CAAC;AAEH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,EAAE;;;;gBAeV,CAAC,iBAAiB,CAAC;;kBAElB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAQJ,CAAC;AAEH,eAAO,MAAM,EAAE;;;;gBAaV,CAAC,iBAAiB,CAAC;;kBAElB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAQJ,CAAC"}
+{"version":3,"file":"MarkdownTable.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownTable.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK5E,eAAO,MAAM,YAAY;;;;gBAYpB,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;EAQJ,CAAC;AAEH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,EAAE;;;;gBAeV,CAAC,iBAAiB,CAAC;;kBAElB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAQJ,CAAC;AAEH,eAAO,MAAM,EAAE;;;;gBAaV,CAAC,iBAAiB,CAAC;;kBAElB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAQJ,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownTable.css.js

@@ -1,9 +1,10 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownTable.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { globalLayer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { cssLayerComponent } from "../../../styles/layers.css.js";
+import { LAYER_ORDER, cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
 export const tableWrapper = recipe({
   base: {
     '@layer': {

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

@@ -1 +1 @@
-{"version":3,"file":"NumberBubble.css.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,QAMtB,CAAC"}
+{"version":3,"file":"NumberBubble.css.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,QAMtB,CAAC"}

package/dist/components/NumberBubble/NumberBubble.css.js

@@ -1,7 +1,8 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/NumberBubble/NumberBubble.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { globalLayer, style } from '@vanilla-extract/css';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
+globalLayer(LAYER_ORDER);
 export const numberStyle = style({
   '@layer': {
     [cssLayerComponent]: {

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;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"}
+{"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;AAUzE,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"}

package/dist/components/OptionGrid/OptionGrid.css.js

@@ -1,13 +1,17 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/OptionGrid/OptionGrid.css.ts", "@autoguru/overdrive");
-import { createContainer, style } from '@vanilla-extract/css';
+import { createContainer, globalLayer, 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 { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { selectors } from "../../styles/selectors.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { breakpoints } from "../../themes/makeTheme.js";
-import { overdriveTokens as tokens } from "../../themes/theme.css.js"; // === Container styles
+import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
+
+// === Container styles
+
 export const gridContainer = createContainer("gridContainer");
 export const gridContainerStyle = style({
   '@layer': {

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

@@ -1 +1 @@
-{"version":3,"file":"OptionList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAW3B,CAAC;AAGH,eAAO,MAAM,eAAe,QA4C1B,CAAC;AAEH,eAAO,MAAM,cAAc,QAIzB,CAAC;AAGH,eAAO,MAAM,QAAQ,QAmCnB,CAAC"}
+{"version":3,"file":"OptionList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAW3B,CAAC;AAGH,eAAO,MAAM,eAAe,QA4C1B,CAAC;AAEH,eAAO,MAAM,cAAc,QAIzB,CAAC;AAGH,eAAO,MAAM,QAAQ,QAmCnB,CAAC"}

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

@@ -1,11 +1,14 @@
 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 { globalLayer, style } from '@vanilla-extract/css';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
-import { cssLayerComponent } from "../../styles/layers.css.js";
+import { LAYER_ORDER, 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"; // === Group styles
+import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
+
+// === Group styles
 export const groupStyle = sprinkles({
   mt: '6'
 });