@autoguru/overdrive 4.42.0-next.1 → 4.43.0-next.0

package/dist/components/TextLink/TextLink.stories.d.ts

@@ -5,44 +5,49 @@ declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<import("./TextLink").Props, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
     decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        color?: import("../Text/useTextStyles").TextColor | undefined;
+        color?: "accent" | "hard" | "soft" | "success" | "info" | "danger" | "warning" | "onBody" | "onSurface" | undefined;
         content?: string | undefined | undefined;
         strong?: boolean | undefined;
         size?: import("../Text/useTextStyles").TextSize | undefined;
         muted?: boolean | undefined;
         fontWeight?: import("../Text/useTextStyles").TextFontWeight | undefined;
         icon?: import("@autoguru/icons").IconType | undefined;
-        display?: ("block" | "inline" | "inlineBlock") | undefined;
+        display?: ("block" | "inline" | "inline-block") | undefined;
         transform?: import("../Text/useTextStyles").TextTransform | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
         style?: React.CSSProperties | undefined;
         key?: React.Key | null | undefined;
-        as?: import("../Text/useTextStyles").TextTags | undefined;
-        is?: (React.ElementType | React.ReactElement) | undefined;
-        className?: string | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
+        id?: string | undefined | undefined;
+        children?: React.ReactNode;
         slot?: string | undefined | undefined;
         title?: string | undefined | undefined;
-        download?: any;
-        href?: string | undefined | undefined;
-        hrefLang?: string | undefined | undefined;
-        htmlFor?: string | undefined | undefined;
-        media?: string | undefined | undefined;
-        target?: React.HTMLAttributeAnchorTarget | undefined;
-        type?: string | undefined | undefined;
+        className?: string | undefined;
+        align?: ("left" | "right" | "center" | {
+            mobile?: "left" | "right" | "center" | undefined;
+            tablet?: "left" | "right" | "center" | undefined;
+            desktop?: "left" | "right" | "center" | undefined;
+            largeDesktop?: "left" | "right" | "center" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | null>;
+        noWrap?: boolean | undefined;
+        as?: import("../Text/useTextStyles").TextTags | undefined;
+        testId?: string | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
+        download?: any;
+        htmlFor?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
@@ -74,6 +79,7 @@ declare const meta: {
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: (React.ElementType | React.ReactElement) | undefined;
         exportparts?: string | undefined | undefined;
         part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
@@ -129,7 +135,6 @@ declare const meta: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
@@ -287,9 +292,7 @@ declare const meta: {
         onScrollEndCapture?: React.UIEventHandler<HTMLParagraphElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLParagraphElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLParagraphElement> | undefined;
-        onAnimationStart?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
         onAnimationStartCapture?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLParagraphElement> | undefined;
@@ -303,12 +306,14 @@ declare const meta: {
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLParagraphElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLParagraphElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLParagraphElement> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        noWrap?: boolean | undefined;
-        breakWord?: boolean | undefined;
-        testId?: string | undefined;
-        ping?: string | undefined | undefined;
+        media?: string | undefined | undefined;
+        target?: React.HTMLAttributeAnchorTarget | undefined;
+        type?: string | undefined | undefined;
+        href?: string | undefined | undefined;
+        hrefLang?: string | undefined | undefined;
         referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
+        ping?: string | undefined | undefined;
+        breakWord?: boolean | undefined;
         ref?: React.Ref<HTMLAnchorElement> | undefined;
     }>) => React.JSX.Element)[];
     argTypes: {

package/dist/components/TextLink/TextLink.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAgB7B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAKrC,CAAC"}
+{"version":3,"file":"TextLink.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAgB7B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAKrC,CAAC"}

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,6 +1,7 @@
-import * as React from 'react';
-import { type BoxProps } from '../Box';
-type VisuallyHiddenProps = Pick<BoxProps, 'as' | 'children' | 'is'>;
-export declare const VisuallyHidden: ({ children, ...props }: VisuallyHiddenProps) => React.JSX.Element;
+import React, { type ElementType, type PropsWithChildren } from 'react';
+export interface VisuallyHiddenProps<E extends ElementType> extends PropsWithChildren {
+    as?: E;
+}
+export declare const VisuallyHidden: <E extends ElementType>({ children, ...props }: VisuallyHiddenProps<E>) => React.JSX.Element;
 export default VisuallyHidden;
 //# sourceMappingURL=VisuallyHidden.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI5C,KAAK,mBAAmB,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;AAOpE,eAAO,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,sBAIzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMxE,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,WAAW,CACzD,SAAQ,iBAAiB;IACzB,EAAE,CAAC,EAAE,CAAC,CAAC;CACP;AAOD,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAAE,wBAGnD,mBAAmB,CAAC,CAAC,CAAC,sBAQxB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -5,8 +5,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["children"];
 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 * as React from 'react';
-import { Box } from "../Box/index.js";
+import React from 'react';
+import { useBox } from "../Box/index.js";
 import { visuallyHidden } from "./VisuallyHidden.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const VisuallyHidden = _ref => {
@@ -14,8 +14,14 @@ export const VisuallyHidden = _ref => {
       children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
+  const {
+    Component,
+    componentProps
+  } = useBox(_objectSpread(_objectSpread({}, props), {}, {
     className: visuallyHidden,
+    odComponent: 'visually-hidden'
+  }));
+  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     children: children
   }));
 };

package/dist/components/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -3,11 +3,7 @@ import * as React from 'react';
 import { VisuallyHidden } from '.';
 declare const meta: {
     title: string;
-    component: ({ children, ...props }: {
-        as?: React.ElementType | undefined;
-        is?: React.ElementType | undefined;
-        children?: React.ReactNode;
-    }) => React.JSX.Element;
+    component: <E extends React.ElementType>({ children, ...props }: import("./VisuallyHidden").VisuallyHiddenProps<E>) => React.JSX.Element;
     args: {
         as: "div";
     };

package/dist/components/VisuallyHidden/VisuallyHidden.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAEnC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;CAc6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}
+{"version":3,"file":"VisuallyHidden.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAEnC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAc6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/dist/components/private/CheckableBase/CheckableBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/CheckableBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,KAAK,KAAA,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,gFA8FzB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckableBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/CheckableBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,KAAK,KAAA,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,gFA2FzB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/components/private/CheckableBase/CheckableBase.js

@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import React, { forwardRef, useId } from 'react';
-import { Box, useBoxStyles } from "../../Box/index.js";
+import { Box, boxStyles } from "../../Box/index.js";
 import { Text, useTextStyles } from "../../Text/index.js";
 import * as styles from "./CheckableBase.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,13 +30,13 @@ export const CheckableBase = forwardRef((_ref, ref) => {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    justifyContent: "flexStart",
+    justifyContent: "flex-start",
     paddingY: "3",
     paddingRight: label ? '3' : 'none',
     paddingLeft: "none",
     position: "relative",
-    className: [styles.root, useBoxStyles({
-      is: 'button'
+    className: [styles.root, boxStyles({
+      as: 'button'
     }), className, {
       [styles.disabled]: disabled
     }],
@@ -55,8 +55,8 @@ export const CheckableBase = forwardRef((_ref, ref) => {
       disabled: disabled,
       type: inputType,
       pointerEvents: disabled ? 'none' : void 0,
-      className: clsx(useBoxStyles({
-        is: 'button'
+      className: clsx(boxStyles({
+        as: 'button'
       }), styles.nativeInput),
       onClick: handleClick,
       onChange: onChange
@@ -65,8 +65,8 @@ export const CheckableBase = forwardRef((_ref, ref) => {
       alignItems: "center",
       justifyContent: "center",
       position: "relative",
-      className: [styles.checkable, useBoxStyles({
-        is: 'button'
+      className: [styles.checkable, boxStyles({
+        as: 'button'
       })],
       children: children
     }), _jsx(Box, {
@@ -74,8 +74,8 @@ export const CheckableBase = forwardRef((_ref, ref) => {
       htmlFor: id,
       width: "full",
       pointerEvents: disabled ? 'none' : void 0,
-      className: clsx(useBoxStyles({
-        is: 'button'
+      className: clsx(boxStyles({
+        as: 'button'
       }), useTextStyles({
         size: '4'
       }), {

package/dist/components/private/InputBase/HintText.js

@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import React from 'react';
-import { useBoxStyles } from "../../Box/index.js";
+import { boxStyles } from "../../Box/index.js";
 import { Text } from "../../Text/index.js";
 import * as styles from "./HintText.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,17 +14,17 @@ export const HintText = _ref => {
     size = 'medium',
     className = ''
   } = _ref;
-  const boxStyles = useBoxStyles({
-    is: 'p',
+  const style = boxStyles({
+    as: 'p',
     marginTop: '1'
   });
   if (!hintText && !reserveHintSpace) return null;
   const showHintText = !disabled && hintText;
   return _jsx(Text, {
-    is: "p",
+    as: "p",
     size: size === 'large' ? '4' : '2',
     colour: "unset",
-    className: clsx(boxStyles, styles.hintText, className),
+    className: clsx(style, styles.hintText, className),
     children: showHintText ? hintText : '\u00A0'
   });
 };

package/dist/components/private/InputBase/withEnhancedInput.d.ts

@@ -1,10 +1,10 @@
 import { IconType } from '@autoguru/icons';
-import React, { type ChangeEventHandler, type ComponentProps, type ComponentType, type FocusEventHandler, type ForwardedRef, type InputHTMLAttributes, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type Ref, type RefObject } from 'react';
+import React, { type ChangeEventHandler, type ComponentProps, type ComponentType, type FocusEventHandler, type InputHTMLAttributes, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type Ref } from 'react';
 import { Box } from '../../Box';
 import { NotchedBase } from './NotchedBase';
 import type { InputSize } from './withEnhancedInput.css';
 type ElementTypes = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-type NativeAttributes<E extends ElementTypes> = Omit<InputHTMLAttributes<E>, 'height' | 'is' | 'placeholder' | 'size' | 'width'>;
+type NativeAttributes<E extends ElementTypes> = Omit<InputHTMLAttributes<E>, 'color' | 'height' | 'is' | 'placeholder' | 'size' | 'width'>;
 export interface EventHandlers<E extends ElementTypes> {
     onChange?: ChangeEventHandler<E>;
     onBlur?: FocusEventHandler<E>;
@@ -41,7 +41,7 @@ export type WrappedComponentProps<IncomingProps, E extends ElementTypes> = {
     validation: ValidationProps;
     eventHandlers: EventHandlers<E>;
     field: Omit<EnhanceInputPrimitiveProps<E>, 'placeholder' | 'hintText' | 'fieldIcon' | 'size'> & {
-        ref: ForwardedRef<ElementTypes> | RefObject<ElementTypes>;
+        ref: Ref<E>;
     };
     fieldIcon?: EnhanceInputPrimitiveProps<E>['fieldIcon'];
     className?: boolean;

package/dist/components/private/InputBase/withEnhancedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/private/InputBase/withEnhancedInput.js

@@ -9,7 +9,7 @@ import { invariant, wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
 import React, { forwardRef, useCallback, useState } from 'react';
 import { useInputControlledState } from "../../../utils/index.js";
-import { Box, useBoxStyles } from "../../Box/index.js";
+import { Box, boxStyles } from "../../Box/index.js";
 import { Icon } from "../../Icon/index.js";
 import { ProgressSpinner } from "../../ProgressSpinner/index.js";
 import { HintText } from "./HintText.js";
@@ -72,8 +72,8 @@ export const withEnhancedInput = function (WrappingComponent) {
         disabled
       }, inputStateStyles);
       const iconSize = size === 'small' ? 'medium' : size;
-      const inputItselfClassName = clsx(useBoxStyles({
-        is: primitiveType === 'textarea' ? 'textarea' : 'input',
+      const inputItselfClassName = clsx(boxStyles({
+        as: primitiveType === 'textarea' ? 'textarea' : 'input',
         backgroundColour,
         width: 'full',
         position: 'relative',
@@ -127,7 +127,7 @@ export const withEnhancedInput = function (WrappingComponent) {
       const onMouseOut = useCallback(() => {
         setIsHovered(false);
       }, []);
-      const iconStyles = useBoxStyles({
+      const iconStyles = boxStyles({
         pointerEvents: 'none',
         position: 'absolute'
       });

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useAnimationEvents';
 export * from './useAttachedBoxes';
+export * from './useDeepCompareMemo';
 export * from './useDocumentBodyStyles';
 export * from './useNegativeMargin';
 export * from './useResponsiveValue';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -2,6 +2,7 @@
 
 export * from "./useAnimationEvents/index.js";
 export * from "./useAttachedBoxes/index.js";
+export * from "./useDeepCompareMemo/index.js";
 export * from "./useDocumentBodyStyles/index.js";
 export * from "./useNegativeMargin/index.js";
 export * from "./useResponsiveValue/index.js";

package/dist/hooks/useDeepCompareMemo/index.d.ts

@@ -0,0 +1,2 @@
+export declare function useDeepCompareMemo<T>(factory: () => T, dependencies: React.DependencyList): T;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useDeepCompareMemo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useDeepCompareMemo/index.ts"],"names":[],"mappings":"AAOA,wBAAgB,kBAAkB,CAAC,CAAC,EACnC,OAAO,EAAE,MAAM,CAAC,EAChB,YAAY,EAAE,KAAK,CAAC,cAAc,GAChC,CAAC,CAeH"}

package/dist/hooks/useDeepCompareMemo/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import { isEqual } from 'es-toolkit';
+import { useRef } from 'react';
+export function useDeepCompareMemo(factory, dependencies) {
+  const ref = useRef(factory());
+  const prevDeps = useRef(dependencies);
+  if (!isEqual(prevDeps.current, dependencies)) {
+    ref.current = factory();
+    prevDeps.current = dependencies;
+  }
+  return ref.current;
+}

package/dist/hooks/useNegativeMargin/useNegativeMarginLeft.d.ts

@@ -1,5 +1,4 @@
 import { ThemeTokens as Tokens } from '../../themes';
-import { ResponsiveProp } from '../../utils/responsiveProps.css';
-export declare const useNegativeMarginLeft: (space: ResponsiveProp<keyof Tokens["space"]>) => any;
+export declare const useNegativeMarginLeft: (space: keyof Tokens["space"]) => any;
 export default useNegativeMarginLeft;
 //# sourceMappingURL=useNegativeMarginLeft.d.ts.map

package/dist/hooks/useNegativeMargin/useNegativeMarginLeft.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNegativeMarginLeft.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useNegativeMargin/useNegativeMarginLeft.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAIjE,eAAO,MAAM,qBAAqB,GACjC,OAAO,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,QACgB,CAAC;AAE9D,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"useNegativeMarginLeft.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useNegativeMargin/useNegativeMarginLeft.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AASrD,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,MAAM,CAAC,OAAO,CAAC,QACT,CAAC;AAE1D,eAAe,qBAAqB,CAAC"}

package/dist/hooks/useNegativeMargin/useNegativeMarginTop.d.ts

@@ -1,5 +1,4 @@
 import { ThemeTokens as Tokens } from '../../themes';
-import { ResponsiveProp } from '../../utils/responsiveProps.css';
-export declare const useNegativeMarginTop: (space: ResponsiveProp<keyof Tokens["space"]>) => any;
+export declare const useNegativeMarginTop: (space: keyof Tokens["space"]) => any;
 export default useNegativeMarginTop;
 //# sourceMappingURL=useNegativeMarginTop.d.ts.map

package/dist/hooks/useNegativeMargin/useNegativeMarginTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNegativeMarginTop.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useNegativeMargin/useNegativeMarginTop.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAIjE,eAAO,MAAM,oBAAoB,GAChC,OAAO,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,QACe,CAAC;AAE7D,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"useNegativeMarginTop.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useNegativeMargin/useNegativeMarginTop.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAQrD,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,MAAM,CAAC,OAAO,CAAC,QACT,CAAC;AAEzD,eAAe,oBAAoB,CAAC"}

package/dist/reset/globalReset.css.js

@@ -3,26 +3,43 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/reset/globalReset.css.ts", "@autoguru/overdrive");
 import { globalStyle } from '@vanilla-extract/css';
+import { cssLayerReset } from "../styles/layers.css.js";
 import { overdriveTokens } from "../themes/theme.css.js";
 globalStyle('html', {
-  overflowX: 'hidden'
+  '@layer': {
+    [cssLayerReset]: {
+      overflowX: 'hidden'
+    }
+  }
 });
 globalStyle('body', {
-  textRendering: 'optimizeLegibility',
-  textSizeAdjust: 'none',
-  margin: 0,
-  padding: 0,
-  border: 'none',
-  WebkitTapHighlightColor: 'transparent'
+  '@layer': {
+    [cssLayerReset]: {
+      textRendering: 'optimizeLegibility',
+      textSizeAdjust: 'none',
+      margin: 0,
+      padding: 0,
+      border: 'none',
+      WebkitTapHighlightColor: 'transparent'
+    }
+  }
 });
 globalStyle('body, [data-od-reset]', {
-  fontFamily: overdriveTokens.typography.fontFamily,
-  fontSize: overdriveTokens.typography.size[4].fontSize,
-  fontWeight: overdriveTokens.typography.fontWeight.normal,
-  lineHeight: overdriveTokens.typography.size[4].lineHeight
+  '@layer': {
+    [cssLayerReset]: {
+      fontFamily: overdriveTokens.typography.fontFamily,
+      fontSize: overdriveTokens.typography.size[4].fontSize,
+      fontWeight: overdriveTokens.typography.fontWeight.normal,
+      lineHeight: overdriveTokens.typography.size[4].lineHeight
+    }
+  }
 });
 globalStyle('*', {
-  boxSizing: 'border-box',
-  font: 'inherit'
+  '@layer': {
+    [cssLayerReset]: {
+      boxSizing: 'border-box',
+      font: 'inherit'
+    }
+  }
 });
 __vanilla_filescope__.endFileScope();

package/dist/reset/reset.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reset.css.d.ts","sourceRoot":"","sources":["../../lib/reset/reset.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,eAAO,MAAM,SAAS,QAKpB,CAAC;AAqFH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCnB,CAAC"}
+{"version":3,"file":"reset.css.d.ts","sourceRoot":"","sources":["../../lib/reset/reset.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,eAAO,MAAM,SAAS,QASpB,CAAC;AA8IH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCnB,CAAC"}