@autoguru/overdrive 4.43.6-next.0 → 4.43.6-next.10

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;AAE/E,MAAM,WAAW,SAAS;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CA4B7C,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;AAE/E,MAAM,WAAW,SAAS;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CA4B7C,CAAC"}

package/dist/components/Icon/Icon.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { cloneElement } from 'react';
 import { useNullCheck } from "../../hooks/useNullCheck/index.js";
+import { componentStyles } from "../../styles/index.js";
 import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
 import { Box } from "../Box/Box.js";
-import { useBoxStyles } from "../Box/useBoxStyles.js";
 import * as styles from "./Icon.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Icon = _ref => {
@@ -18,7 +18,7 @@ export const Icon = _ref => {
   } = _ref;
   useNullCheck(icon, 'Icon component received an empty icon prop.');
   const iconElement = cloneElement(icon, {
-    className: useBoxStyles({
+    className: componentStyles({
       as: 'svg',
       display: 'block',
       width: 'full',

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

@@ -26,24 +26,24 @@ declare const _default: {
         fontWeight?: "bold" | "normal" | "semiBold" | undefined;
         opacity?: number | "1" | "0" | undefined;
         name?: string | undefined | undefined;
-        alignContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | {
-            mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-            tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-            desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-            largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | null>;
-        alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | {
-            mobile?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-            tablet?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-            desktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-            largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | null>;
-        alignSelf?: ("stretch" | "center" | "flex-end" | "flex-start" | {
-            mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-            tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-            desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-            largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | null>;
+        alignContent?: ("space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | {
+            mobile?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+            tablet?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+            desktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+            largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | null>;
+        alignItems?: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
+            mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+            tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+            desktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+            largeDesktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | null>;
+        alignSelf?: ("stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | {
+            mobile?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+            tablet?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+            desktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+            largeDesktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | null>;
         backgroundColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "transparent" | undefined;
         borderBottomColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
         borderBottomStyle?: "none" | "solid" | undefined;
@@ -138,18 +138,12 @@ declare const _default: {
             desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
             largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
         } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | null>;
-        justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | {
-            mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-            tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-            desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-            largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | null>;
-        justifySelf?: ("center" | "flex-end" | "flex-start" | {
-            mobile?: "center" | "flex-end" | "flex-start" | undefined;
-            tablet?: "center" | "flex-end" | "flex-start" | undefined;
-            desktop?: "center" | "flex-end" | "flex-start" | undefined;
-            largeDesktop?: "center" | "flex-end" | "flex-start" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-end" | "flex-start" | null>;
+        justifyContent?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | null> | ("space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | {
+            mobile?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+            tablet?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+            desktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+            largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        } | undefined);
         marginBottom?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | null> | ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | {
             mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
             tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
@@ -241,12 +235,12 @@ declare const _default: {
             desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
             largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
         } | undefined);
-        textAlign?: ("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>;
+        textAlign?: ("left" | "right" | "center" | "centre" | {
+            mobile?: "left" | "right" | "center" | "centre" | undefined;
+            tablet?: "left" | "right" | "center" | "centre" | undefined;
+            desktop?: "left" | "right" | "center" | "centre" | undefined;
+            largeDesktop?: "left" | "right" | "center" | "centre" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "centre" | null>;
         textWrap?: "balance" | "nowrap" | "stable" | "pretty" | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         userSelect?: "none" | "auto" | "text" | undefined;
@@ -288,12 +282,12 @@ declare const _default: {
             desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
             largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
         } | undefined);
-        placeItems?: ("stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | {
-            mobile?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-            tablet?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-            desktop?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-            largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | null>;
+        placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | null> | ("stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | {
+            mobile?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+            tablet?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+            desktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+            largeDesktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        } | undefined);
         start?: number | undefined | undefined;
         hidden?: boolean | undefined | undefined;
         style?: React.CSSProperties | undefined;
@@ -305,20 +299,22 @@ declare const _default: {
         disabled?: boolean | undefined | undefined;
         key?: React.Key | null | undefined;
         value?: string | number | readonly string[] | undefined;
-        borderColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-        borderColourX?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-        borderColourY?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
         borderBottomColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
         borderLeftColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
         borderRightColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
         borderTopColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-        borderColourBottom?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-        borderColourLeft?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-        borderColourRight?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-        borderColourTop?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
         useVar?: "gap" | undefined;
         bg?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "transparent" | undefined;
         fg?: "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | undefined;
+        borderColorX?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
+        borderColorY?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
+        borderColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+        borderColourX?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+        borderColourY?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+        borderStyleBottom?: "none" | "solid" | undefined;
+        borderStyleLeft?: "none" | "solid" | undefined;
+        borderStyleRight?: "none" | "solid" | undefined;
+        borderStyleTop?: "none" | "solid" | undefined;
         gridColumns?: (string | {
             mobile?: string | undefined;
             tablet?: string | undefined;
@@ -472,11 +468,6 @@ declare const _default: {
         as?: React.ElementType | undefined;
         span?: number | undefined | undefined;
         label?: string | undefined | undefined;
-        onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
-        id?: string | undefined | undefined;
-        children?: React.ReactNode;
-        ref?: React.Ref<HTMLElement> | undefined;
         cite?: string | undefined | undefined;
         data?: string | undefined | undefined;
         form?: string | undefined | undefined;
@@ -484,6 +475,11 @@ declare const _default: {
         summary?: string | undefined | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+        id?: string | undefined | undefined;
+        children?: React.ReactNode;
+        ref?: React.Ref<HTMLElement> | undefined;
         is?: React.ElementType | undefined;
         accept?: string | undefined | undefined;
         acceptCharset?: string | undefined | undefined;
@@ -832,6 +828,8 @@ declare const _default: {
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        odComponent?: string | undefined;
+        testId?: string | undefined;
     }>) => React.JSX.Element)[];
     parameters: {
         chromatic: {

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingBox.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/LoadingBox/LoadingBox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE1C,wBAYoC;AAEpC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC"}
+{"version":3,"file":"LoadingBox.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/LoadingBox/LoadingBox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE1C,wBAYoC;AAEpC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC"}

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

@@ -21,12 +21,12 @@ declare const _default: {
         noThemedWrapper?: boolean | undefined;
         ref?: React.Ref<HTMLElement | undefined> | undefined;
         key?: React.Key | null | undefined;
-        alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | {
-            mobile?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-            tablet?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-            desktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-            largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | null>;
+        alignItems?: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
+            mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+            tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+            desktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+            largeDesktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | null>;
     }>) => React.JSX.Element)[];
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAGnE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,WAAW,iBAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoC7D,CAAC"}
+{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,WAAW,iBAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoC7D,CAAC"}

package/dist/components/NumberBubble/NumberBubble.js

@@ -8,9 +8,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo } from 'react';
+import { sprinkles } from "../../styles/index.js";
 import { toPrettyBigNumber } from "../../utils/number.js";
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/newBox/boxStyles.js";
 import { Text } from "../Text/Text.js";
 import * as styles from "./NumberBubble.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,7 +43,7 @@ export const NumberBubble = _ref => {
     children: _jsx(Text, {
       size: "2",
       strong: true,
-      className: clsx(styles.bubbleText, boxStyles({
+      className: clsx(styles.bubbleText, sprinkles({
         position: 'absolute'
       })),
       colour: textColour,

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -66,7 +66,7 @@ export const Provider = _ref => {
       children: _jsx("div", {
         className: theme.themeRef,
         style: styles,
-        "data-od-component-provider": "",
+        "data-od-component": "provider",
         children: children
       })
     })

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -2,8 +2,8 @@
 
 import clsx from 'clsx';
 import * as React from 'react';
+import { componentStyles } from "../../styles/index.js";
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/newBox/boxStyles.js";
 import * as styles from "./ProgressSpinner.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ProgressSpinner = _ref => {
@@ -15,7 +15,7 @@ export const ProgressSpinner = _ref => {
   return _jsx(Box, {
     className: [styles.size[size].circular, styles.colours[colour], className],
     children: _jsx("svg", {
-      className: clsx(boxStyles({
+      className: clsx(componentStyles({
         as: 'svg',
         display: 'block',
         overflow: 'hidden'

package/dist/components/StarRating/StarRating.js

@@ -4,8 +4,8 @@ import { StarHalfIcon, StarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { memo } from 'react';
+import { sprinkles } from "../../styles/index.js";
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/newBox/boxStyles.js";
 import { Icon } from "../Icon/Icon.js";
 import { Inline } from "../Inline/Inline.js";
 import { Text } from "../Text/Text.js";
@@ -83,7 +83,7 @@ const Star = _ref2 => {
   return _jsx(Icon, {
     icon: star,
     size: starSizeMap.get(size),
-    className: clsx(boxStyles({
+    className: clsx(sprinkles({
       position: 'relative'
     }), styles.star.default, {
       [styles.star.empty]: starType === EStarType.Empty

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,QAAmC,CAAC;AAEzD,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,wCAiBjB,CAAC;AAEH,eAAO,MAAM,KAAK,UAQjB,CAAC"}
+{"version":3,"file":"Stepper.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,QAAmC,CAAC;AAEzD,eAAO,MAAM,IAAI,QAAY,CAAC;AAE9B,eAAO,MAAM,MAAM,wCAiBjB,CAAC;AAEH,eAAO,MAAM,KAAK,UAQjB,CAAC"}

package/dist/components/Stepper/Stepper.css.js

@@ -8,13 +8,7 @@ import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const disabled = style({
   cursor: 'not-allowed'
 }, "disabled");
-export const root = style({
-  selectors: {
-    [`&:not(${disabled}):focus`]: {
-      borderColor: vars.colours.intent.information.background.standard
-    }
-  }
-}, "root");
+export const root = style({}, "root");
 export const handle = styleVariants({
   default: {
     width: vars.space[6],

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EACN,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAYf,MAAM,WAAW,YAAY;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAkDD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAsHnD,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EACN,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,YAAY;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAkDD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAqHnD,CAAC"}

package/dist/components/Stepper/Stepper.js

@@ -7,7 +7,6 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { addWithSafeDecimal } from "../../utils/number.js";
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/newBox/boxStyles.js";
 import { Icon } from "../Icon/Icon.js";
 import { Inline } from "../Inline/Inline.js";
 import { Text } from "../Text/Text.js";
@@ -111,9 +110,7 @@ export const Stepper = _ref3 => {
     }
   }, [min, max, onDecrement, onIncrement, onChange]);
   return _jsx(Box, {
-    className: clsx(className, styles.root, boxStyles({
-      as: 'button'
-    }), disabled && styles.disabled),
+    className: clsx(className, styles.root, disabled && styles.disabled),
     userSelect: "none",
     "aria-disabled": disabled,
     tabIndex: 0,

package/dist/components/Tabs/Tab.js

@@ -4,7 +4,7 @@ import { invariant } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, forwardRef, isValidElement, useContext } from 'react';
-import { useBoxStyles } from "../Box/useBoxStyles.js";
+import { componentStyles } from "../../styles/index.js";
 import { Inline } from "../Inline/Inline.js";
 import { Text } from "../Text/Text.js";
 import { useTextStyles } from "../Text/useTextStyles.js";
@@ -28,8 +28,8 @@ export const Tab = forwardRef((_ref, ref) => {
   const isActive = tabsContext.activeIndex === tabListContext;
   const controlsId = typeof incomingId === 'string' ? incomingId : `${tabsContext.id}-${tabListContext}-tab`;
   const props = {
-    className: clsx(useBoxStyles({
-      is: typeof Component === 'string' ? Component : 'button',
+    className: clsx(componentStyles({
+      as: typeof Component === 'string' ? Component : 'button',
       display: 'inlineFlex',
       justifyContent: 'center',
       backgroundColour: 'transparent'

package/dist/components/Text/textStyles.d.ts

@@ -1,6 +1,7 @@
 import type { ElementType } from 'react';
 import { type Sprinkles, type SprinklesLegacyText } from '../../styles/sprinkles.css';
 import { type TypographyStyles } from '../../styles/typography.css';
+export type TextAlign = Sprinkles['textAlign'];
 export type TextColor = Sprinkles['color'];
 export type TextColour = SprinklesLegacyText['colour'];
 export type TextSize = Sprinkles['text'];
@@ -11,6 +12,7 @@ export interface TextStylesProps extends TypographyStyles {
     colour?: TextColour;
     fontWeight?: FontWeight;
     size?: TextSize;
+    textAlign?: TextAlign;
 }
-export declare const textStyles: ({ as, breakWord, color, colour, fontWeight, noWrap, size, transform, }: TextStylesProps) => string;
+export declare const textStyles: ({ as, breakWord, color, colour, fontWeight, noWrap, size, textAlign, transform, }: TextStylesProps) => string;
 //# sourceMappingURL=textStyles.d.ts.map

package/dist/components/Text/textStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/textStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAGN,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEN,KAAK,gBAAgB,EACrB,MAAM,6BAA6B,CAAC;AAGrC,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAC3C,MAAM,MAAM,UAAU,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAEjD,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAKD,eAAO,MAAM,UAAU,GAAI,wEASxB,eAAe,WAMf,CAAC"}
+{"version":3,"file":"textStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/textStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAGN,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEN,KAAK,gBAAgB,EACrB,MAAM,6BAA6B,CAAC;AAGrC,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;AAC/C,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAC3C,MAAM,MAAM,UAAU,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAEjD,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAKD,eAAO,MAAM,UAAU,GAAI,mFAUxB,eAAe,WAMf,CAAC"}

package/dist/components/Text/textStyles.js

@@ -14,6 +14,7 @@ export const textStyles = _ref => {
     fontWeight,
     noWrap,
     size,
+    textAlign,
     transform
   } = _ref;
   return clsx([resetStyles({
@@ -21,7 +22,8 @@ export const textStyles = _ref => {
   }), sprinkles({
     color,
     fontWeight,
-    text: size
+    text: size,
+    textAlign
   }), sprinklesLegacyText({
     colour
   }), typographyStyles({

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

@@ -1 +1 @@
-{"version":3,"file":"TextBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/TextBubble/TextBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,WAAW,eAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAmDzD,CAAC"}
+{"version":3,"file":"TextBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/TextBubble/TextBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAGnE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,WAAW,eAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAmDzD,CAAC"}

package/dist/components/TextBubble/TextBubble.js

@@ -8,8 +8,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo } from 'react';
+import { sprinkles } from "../../styles/index.js";
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/newBox/boxStyles.js";
 import { Text } from "../Text/Text.js";
 import * as styles from "./TextBubble.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -58,7 +58,7 @@ export const TextBubble = _ref => {
       size: "2",
       strong: true,
       noWrap: true,
-      className: clsx(styles.bubbleText, boxStyles({
+      className: clsx(styles.bubbleText, sprinkles({
         position: 'absolute',
         overflow: 'hidden',
         width: 'full',

package/dist/components/TextLink/TextLink.js

@@ -8,8 +8,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { invariant } from '@autoguru/utilities';
 import clsx from 'clsx';
 import React, { cloneElement, createElement, forwardRef, isValidElement } from 'react';
+import { componentStyles } from "../../styles/index.js";
 import { Box } from "../Box/Box.js";
-import { useBoxStyles } from "../Box/useBoxStyles.js";
 import { Icon } from "../Icon/Icon.js";
 import { Text } from "../Text/Text.js";
 import * as styles from "./TextLink.css.js";
@@ -35,8 +35,8 @@ export const TextLink = forwardRef((_ref, ref) => {
     size: size,
     fontWeight: fontWeight,
     strong: strong,
-    className: clsx(useBoxStyles({
-      is: 'span',
+    className: clsx(componentStyles({
+      as: 'span',
       pointerEvents: 'none',
       position: 'relative',
       paddingRight: icon ? '5' : undefined

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

@@ -19,12 +19,12 @@ declare const meta: {
         style?: React.CSSProperties | undefined;
         key?: React.Key | null | undefined;
         as?: import("../Text/useTextStyles").TextTags | undefined;
+        slot?: string | undefined | undefined;
+        title?: string | undefined | 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;
         className?: string | undefined;
         align?: "left" | "right" | "center" | undefined;
         noWrap?: boolean | undefined;
@@ -303,8 +303,8 @@ declare const meta: {
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLParagraphElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLParagraphElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLParagraphElement> | undefined;
-        breakWord?: boolean | undefined;
         testId?: string | undefined;
+        breakWord?: boolean | undefined;
         ping?: string | undefined | undefined;
         referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
         ref?: React.Ref<HTMLAnchorElement> | undefined;

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;AASf,MAAM,WAAW,kBAAkB;IAClC,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,6FA2FzB,CAAC"}
+{"version":3,"file":"CheckableBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/CheckableBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,kBAAkB;IAClC,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,6FA2FzB,CAAC"}

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

@@ -1,9 +1,8 @@
 "use strict";
 
-import clsx from 'clsx';
 import React, { forwardRef, useId } from 'react';
+import { elementResetStyles } from "../../../styles/index.js";
 import { Box } from "../../Box/Box.js";
-import { boxStyles } from "../../Box/newBox/boxStyles.js";
 import { Text } from "../../Text/Text.js";
 import { textStyles } from "../../Text/textStyles.js";
 import * as styles from "./CheckableBase.css.js";
@@ -32,14 +31,12 @@ export const CheckableBase = forwardRef((_ref, ref) => {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    justifyContent: "flex-start",
+    justifyContent: "start",
     paddingY: "3",
     paddingRight: label ? '3' : 'none',
     paddingLeft: "none",
     position: "relative",
-    className: [styles.root, boxStyles({
-      as: 'button'
-    }), className, {
+    className: [styles.root, elementResetStyles('button'), className, {
       [styles.disabled]: disabled
     }],
     children: [_jsx(Box, {
@@ -57,9 +54,7 @@ export const CheckableBase = forwardRef((_ref, ref) => {
       disabled: disabled,
       type: inputType,
       pointerEvents: disabled ? 'none' : void 0,
-      className: clsx(boxStyles({
-        as: 'button'
-      }), styles.nativeInput),
+      className: [elementResetStyles('button'), styles.nativeInput],
       onClick: handleClick,
       onChange: onChange
     }), _jsx(Box, {
@@ -67,22 +62,18 @@ export const CheckableBase = forwardRef((_ref, ref) => {
       alignItems: "center",
       justifyContent: "center",
       position: "relative",
-      className: [styles.checkable, boxStyles({
-        as: 'button'
-      })],
+      className: [styles.checkable, elementResetStyles('button')],
       children: children
     }), _jsx(Box, {
       as: "label",
       htmlFor: id,
       width: "full",
       pointerEvents: disabled ? 'none' : void 0,
-      className: clsx(boxStyles({
-        as: 'button'
-      }), textStyles({
+      className: [elementResetStyles('button'), textStyles({
         size: '4'
       }), {
         [styles.label.disabled]: disabled
-      }),
+      }],
       children: nakedLabel ? _jsx(Text, {
         as: "span",
         children: label

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

@@ -1 +1 @@
-{"version":3,"file":"HintText.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/HintText.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA0BrD,CAAC"}
+{"version":3,"file":"HintText.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/HintText.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAyBrD,CAAC"}