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

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;+EAmC/C,2CACE;;;;;;;;;;;;;;;;;;;sFAemB,2CAAgB;oFAIlC,2CACI;qFANP,2CAAc;mFAHb,2CACJ;;uFAbK,2CACE;qFAGO,2CAEN;sFAVN,2CAEC;oFALA,2CAAgB;;;;;;;qFAiCH,4CACJ,SAAS;;gFApBS,2CAAe;;iFA1B5C,2CACG;;;;;;;;;;;;;;kFAGH,2CACQ;kFAEF,2CACE;iFAoBL,2CAAgB;iFAAmC,2CACvD;sFAkB8B,4CAC7B,SACI;sFAGO,4CAAiB,SAAS;wFAErB,4CACP,SACX;0FAEM,4CAAiB,SACtB;2FACE,4CAEF,SACD;yFAC8B,4CAAiB,SAC/C;6BACiB,yDAEX,OAAO;8BAET,yDACJ,OAAO;8BAAwB,yDAG7B,OAAO;gCAGR,yDAE6B,OAAO;kCAC/B,yDACG,OAAO;mCAEA,yDAEX,OAAO;iCAER,yDACD,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjGV,wBAkCiC;AA8HjC,eAAO,MAAM,QAAQ,qKAA+B,CAAC;AAQrD,eAAO,MAAM,cAAc,oKAA2C,CAAC"}
+{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAU,OAAO,EAAE,MAAM,GAAG,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAwC9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,QAAQ,EAAE,KAqEtB,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,KAqE5B,CAAC"}

package/dist/components/Columns/index.d.ts

@@ -1,3 +1,3 @@
-export { Columns } from './Columns';
-export { Column } from './Column';
+export * from './Columns';
+export * from './Column';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Columns/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}

package/dist/components/Columns/index.js

@@ -1,4 +1,4 @@
 "use strict";
 
-export { Columns } from "./Columns.js";
-export { Column } from "./Column.js";
+export * from "./Columns.js";
+export * from "./Column.js";

package/dist/components/DateInput/DateInput.js

@@ -23,7 +23,7 @@ export const DateInput = withEnhancedInput(_ref => {
     rest = _objectWithoutProperties(_ref, _excluded);
   process.env.NODE_ENV !== "production" ? warning(field.value !== '', 'Date Input does not support empty values.') : void 0;
   return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    is: "input"
+    as: "input"
   }, eventHandlers), field), rest), {}, {
     autoComplete: "off",
     type: "date"

package/dist/components/DatePicker/DatePicker.js

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { CalendarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
-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 { Text } from "../Text/index.js";
@@ -43,10 +43,10 @@ export const DatePicker = _ref => {
       [styles.disabled.root]: disabled
     }),
     children: [_jsx(Box, _objectSpread({
+      as: "input",
       position: "absolute",
       height: "full",
       width: "full",
-      is: "input",
       disabled: disabled,
       onChange: onChangeEvent,
       className: clsx({
@@ -58,7 +58,7 @@ export const DatePicker = _ref => {
         [styles.contents.withLabel]: Boolean(valueLabel)
       }),
       children: [isLoading ? _jsx(ProgressSpinner, {
-        className: clsx(styles.spinner, useBoxStyles({
+        className: clsx(styles.spinner, boxStyles({
           position: 'absolute'
         })),
         size: size

package/dist/components/DividerLine/DividerLine.js

@@ -19,7 +19,7 @@ export const DividerLine = _ref => {
       [styles.size.horizontal[size]]: !isVertical,
       [styles.size.vertical[size]]: isVertical
     }),
-    marginY: isVertical ? void 0 : space,
-    marginX: isVertical ? space : void 0
+    marginY: isVertical ? undefined : space,
+    marginX: isVertical ? space : undefined
   });
 };

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

@@ -13,20 +13,20 @@ declare const meta: {
         size?: import("../Button/Button.css").ButtonSize | undefined;
         disabled?: boolean | undefined;
         key?: React.Key | null | undefined;
-        className?: string | undefined | undefined;
-        type?: "submit" | "reset" | "button" | undefined | undefined;
         id?: string | undefined | undefined;
-        lang?: Partial<Record<"loading", string>> | undefined;
-        "aria-label"?: string | undefined | undefined;
         ref?: React.Ref<HTMLButtonElement> | undefined;
+        className?: string | undefined | undefined;
         testId?: string | undefined;
+        lang?: Partial<Record<"loading", string>> | undefined;
+        "aria-label"?: string | undefined | undefined;
+        type?: "submit" | "reset" | "button" | undefined | undefined;
         rounded?: boolean | undefined;
         minimal?: import("../Button/Button.css").ButtonMinimal | undefined;
         isLoading?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         withDoubleClicks?: boolean | undefined;
         variant?: import("../Button/Button.css").ButtonIntent | undefined;
-        alignment?: import("..").EPositionerAlignment | undefined;
+        alignment: any;
     }>) => React.JSX.Element)[];
     args: {
         label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAMnC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCF,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,EAAE;;;;;;;CAoBjB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC"}
+{"version":3,"file":"DropDown.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAMnC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCF,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,EAAE;;;;;;;CAoBjB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC"}

package/dist/components/DropDown/DropDownOption.js

@@ -22,7 +22,7 @@ export const DropDownOption = _ref => {
       display = 'flex',
       iconColour = 'dark',
       is = 'button',
-      alignItems = 'space-between',
+      alignItems = 'center',
       width = 'full'
     } = _ref,
     boxProps = _objectWithoutProperties(_ref, _excluded);
@@ -44,7 +44,7 @@ export const DropDownOption = _ref => {
       noWrap: true,
       space: "2",
       width: "full",
-      alignX: "spaceBetween",
+      alignX: "space-between",
       alignY: "center",
       children: [_jsx(Text, {
         is: "p",

package/dist/components/DropDown/DropDownOptionsList.js

@@ -24,4 +24,5 @@ export const DropDownOptionsList = forwardRef((_ref, ref) => {
       })
     })
   });
-});
+});
+DropDownOptionsList.displayName = 'DropDownOptionsList';

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

@@ -4,12 +4,12 @@ import { Box } from '../Box';
 import { Text } from '../Text';
 type BoxProps = Pick<ComponentProps<typeof Box>, 'display' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
 type TextProps = Pick<ComponentProps<typeof Text>, 'is' | 'colour' | 'size' | 'children' | 'noWrap'>;
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'is' | 'autoFocus' | 'width' | 'height' | 'onFocus' | 'onBlur' | 'onKeyDown' | keyof TextProps | keyof BoxProps>;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'style' | 'is' | 'autoFocus' | 'width' | 'height' | 'onFocus' | 'onBlur' | 'onKeyDown' | keyof TextProps | keyof BoxProps>;
 export interface Props extends TextProps, InputProps, BoxProps {
     className?: string;
     onModeChange?: (mode: InputMode) => void;
 }
 type InputMode = 'TEXT' | 'INPUT';
-export declare const EditableText: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
+export declare const EditableText: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default EditableText;
 //# sourceMappingURL=EditableText.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEN,cAAc,EAEd,mBAAmB,EAKnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CACnB,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAC9C,CAAC;AACF,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAChD,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAClC,eAAO,MAAM,YAAY,iFAsHxB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEN,cAAc,EAEd,mBAAmB,EAKnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CACnB,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAC9C,CAAC;AACF,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAChD,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAClC,eAAO,MAAM,YAAY,8EAsHxB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -20,7 +20,7 @@ export const EditableText = forwardRef((_ref, ref) => {
       is,
       colour = 'muted',
       size,
-      display = 'inlineBlock',
+      display = 'inline-block',
       value,
       onFocus,
       onBlur,
@@ -100,7 +100,7 @@ export const EditableText = forwardRef((_ref, ref) => {
     })), _jsx(Text, {
       noWrap: true,
       ref: textRef,
-      is: is,
+      as: is,
       colour: colour,
       size: size,
       className: clsx(textStyles, styles.text, {

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import React from 'react';
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./EditableText").Props & React.RefAttributes<HTMLAnchorElement>>;
+    component: React.ForwardRefExoticComponent<import("./EditableText").Props & React.RefAttributes<HTMLDivElement>>;
     argTypes: {
         colour: {
             options: string[];

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

@@ -1 +1 @@
-{"version":3,"file":"EditableText.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAY2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,IAAI,EAAE,KAsBlB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC"}
+{"version":3,"file":"EditableText.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAY2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,IAAI,EAAE,KAuBlB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC"}

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { FillHeightBox } from './FillHeightBox';
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<Omit<import("../../hooks/useWindowHeightFill/useWindowHeightFill").UseWindowHeightFillProps, "containerRef"> & import("../ScrollPane/ScrollPane").Props>;
+    component: React.FunctionComponent<Omit<import("../../hooks/useWindowHeightFill/useWindowHeightFill").UseWindowHeightFillProps, "containerRef"> & Omit<import("../ScrollPane/ScrollPane").Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 type Story = StoryObj<typeof FillHeightBox>;

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

@@ -4,7 +4,7 @@ import { EAlignment } from '../Positioner/alignment';
 import { Flyout } from '.';
 declare const meta: {
     title: string;
-    component: React.FunctionComponent<import("../Positioner/Positioner").Props>;
+    component: React.FunctionComponent<Omit<import("../Positioner/Positioner").Props, "ref">>;
     argTypes: {
         alignment: {
             options: EAlignment[];

package/dist/components/Heading/Heading.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { ThemeTokens as Tokens } from '../../themes';
 import type { WithTestId } from '../../types';
-import { type BoxProps } from '../Box';
+import { type UseBoxProps } from '../Box';
 import type { TextStyleProps } from '../Text';
-export interface HeadingProps extends Omit<TextStyleProps, 'is'>, Pick<BoxProps, 'children' | 'className' | 'id'> {
-    is?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface HeadingProps extends Omit<TextStyleProps, 'as'>, Pick<UseBoxProps, 'children' | 'className' | 'id' | 'ref'> {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     colour?: Exclude<keyof Tokens['typography']['colour'], 'muted'>;
 }
-export declare const Heading: ({ is, id, testId, align, fontWeight, noWrap, transform, colour, size, breakWord, className, children, }: WithTestId<HeadingProps>) => React.JSX.Element;
+export declare const Heading: ({ as, breakWord, children, className, colour, fontWeight, id, noWrap, size, testId, transform, }: WithTestId<HeadingProps>) => React.JSX.Element;
 export default Heading;
 //# sourceMappingURL=Heading.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../lib/components/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,WAAW,YAChB,SAAQ,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,EACjC,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC;IAChD,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;CAChE;AAWD,eAAO,MAAM,OAAO,GAAI,yGAarB,UAAU,CAAC,YAAY,CAAC,sBAoB1B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../lib/components/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,WAAW,YAChB,SAAQ,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,EACjC,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;IAC3D,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;CAChE;AAWD,eAAO,MAAM,OAAO,GAAI,kGAYrB,UAAU,CAAC,YAAY,CAAC,sBAmB1B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Heading/Heading.js

@@ -18,25 +18,23 @@ const sizeScaleDefaults = {
 };
 export const Heading = _ref => {
   let {
-    is = 'h1',
-    id,
-    testId,
-    align,
+    as = 'h1',
+    breakWord,
+    children,
+    className,
+    colour = 'dark',
     fontWeight = 'bold',
+    id,
     noWrap,
-    transform,
-    colour = 'dark',
-    size = sizeScaleDefaults[is],
-    breakWord,
-    className = '',
-    children
+    size = sizeScaleDefaults[as],
+    testId,
+    transform
   } = _ref;
   return _jsx(Box, _objectSpread(_objectSpread({
+    as: as,
     id: id,
-    as: is,
     className: [useTextStyles({
       size,
-      align,
       colour,
       noWrap,
       transform,

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Heading } from '.';
 declare const _default: {
     title: string;
-    component: ({ is, id, testId, align, fontWeight, noWrap, transform, colour, size, breakWord, className, children, }: import("../../types").WithTestId<import("./Heading").HeadingProps>) => React.JSX.Element;
+    component: ({ as, breakWord, children, className, colour, fontWeight, id, noWrap, size, testId, transform, }: import("../../types").WithTestId<import("./Heading").HeadingProps>) => React.JSX.Element;
     argTypes: {
         noWrap: {
             options: (boolean | undefined)[];
@@ -40,13 +40,6 @@ declare const _default: {
                 type: "select";
             };
         };
-        align: {
-            options: ("left" | "right" | "center" | undefined)[];
-            defaultValue: string;
-            control: {
-                type: "select";
-            };
-        };
         colour: {
             options: ("link" | "white" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined)[];
             defaultValue: undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Heading/Heading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2D5B,wBAmEiC;AAEjC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Heading/Heading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD5B,wBA4DiC;AAEjC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}

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

@@ -2,6 +2,18 @@ export declare const controllerBtn: string;
 export declare const controllerCol: string;
 export declare const prevBtn: string;
 export declare const nextBtn: string;
+export declare const itemMinWidth: string;
 export declare const item: string;
 export declare const active: string;
+export declare const sprinklesColumnWidth: ((props: {
+    flexBasis?: ("full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | {
+        mobile?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+        tablet?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+        desktop?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+        largeDesktop?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | null>;
+}) => string) & {
+    properties: Set<"flexBasis">;
+};
+export type SprinklesColumnWidth = Parameters<typeof sprinklesColumnWidth>[0];
 //# sourceMappingURL=HorizontalAutoScroller.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalAutoScroller.css.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,QAKxB,CAAC;AACH,eAAO,MAAM,aAAa,QAExB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AACH,eAAO,MAAM,MAAM,QAGjB,CAAC"}
+{"version":3,"file":"HorizontalAutoScroller.css.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,QAKxB,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,YAAY,QAOvB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAGjB,CAAC;AAyBH,eAAO,MAAM,oBAAoB;;;;;;;;;CAA+B,CAAC;AACjE,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.css.js

@@ -3,6 +3,9 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/HorizontalAutoScroller/HorizontalAutoScroller.css.ts", "@autoguru/overdrive");
 import { style } from '@vanilla-extract/css';
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+import { responsiveConditions } from "../../styles/sprinkles.css.js";
+import { mediaQuery } from "../../themes/makeTheme.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 const actionWidth = 50;
 export const controllerBtn = style({
@@ -22,6 +25,14 @@ export const nextBtn = style({
   right: 0,
   background: 'linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6769301470588236) 70%, rgba(255,255,255,0) 100%)'
 }, "nextBtn");
+export const itemMinWidth = style({
+  minWidth: '50vw',
+  '@media': {
+    [mediaQuery.tablet]: {
+      minWidth: 'auto'
+    }
+  }
+}, "itemMinWidth");
 export const item = style({
   userSelect: 'none',
   willChange: 'transform',
@@ -33,4 +44,26 @@ export const active = style({
   transform: 'scale(1)',
   opacity: 1
 }, "active");
+const getSizeStyle = scale => `${scale * 100}%`;
+const columnWidth = defineProperties({
+  conditions: responsiveConditions,
+  defaultCondition: 'mobile',
+  responsiveArray: ['mobile', 'tablet', 'desktop', 'largeDesktop'],
+  properties: {
+    flexBasis: {
+      '1/2': getSizeStyle(1 / 2),
+      '1/3': getSizeStyle(1 / 3),
+      '2/3': getSizeStyle(2 / 3),
+      '1/4': getSizeStyle(1 / 4),
+      '3/4': getSizeStyle(3 / 4),
+      '1/5': getSizeStyle(1 / 5),
+      '2/5': getSizeStyle(2 / 5),
+      '3/5': getSizeStyle(3 / 5),
+      '4/5': getSizeStyle(4 / 5),
+      full: getSizeStyle(1),
+      auto: 'auto'
+    }
+  }
+});
+export const sprinklesColumnWidth = createSprinkles(columnWidth);
 __vanilla_filescope__.endFileScope();

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.d.ts

@@ -1,15 +1,16 @@
 import { ComponentProps, FunctionComponent, ReactNode } from 'react';
-import { Column, Columns } from '../Columns';
+import { SprinklesResponsive } from '../../styles/sprinkles.css';
 import { SliderProgress } from '../SliderProgress';
+import * as styles from './HorizontalAutoScroller.css';
 import { UseHorizontalAutoScrollerProps } from './useHorizontalAutoScroller';
-export interface Props extends Pick<ComponentProps<typeof Columns>, 'space'>, Omit<UseHorizontalAutoScrollerProps, 'itemsRef'> {
+export interface Props extends Omit<UseHorizontalAutoScrollerProps, 'itemsRef'> {
     durationSeconds?: number;
     className?: string;
-    columnWidth?: ComponentProps<typeof Column>['width'];
+    columnWidth?: styles.SprinklesColumnWidth['flexBasis'];
     sliderProgressColour?: ComponentProps<typeof SliderProgress>['backgroundColour'];
     noControls?: boolean;
+    space?: SprinklesResponsive['gap'];
     children: ReactNode | ReactNode[];
 }
 export declare const HorizontalAutoScroller: FunctionComponent<Props>;
-export default HorizontalAutoScroller;
 //# sourceMappingURL=HorizontalAutoScroller.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalAutoScroller.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,cAAc,EACd,iBAAiB,EACjB,SAAS,EAGT,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAG7C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,EAEN,8BAA8B,EAC9B,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,OAAO,CAAC,EACpD,IAAI,CAAC,8BAA8B,EAAE,UAAU,CAAC;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;IACrD,oBAAoB,CAAC,EAAE,cAAc,CACpC,OAAO,cAAc,CACrB,CAAC,kBAAkB,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,KAAK,CAkK3D,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"HorizontalAutoScroller.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,cAAc,EACd,iBAAiB,EACjB,SAAS,EAGT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAKjE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,MAAM,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAEN,8BAA8B,EAC9B,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,8BAA8B,EAAE,UAAU,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,cAAc,CACpC,OAAO,cAAc,CACrB,CAAC,kBAAkB,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC;IACnC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,KAAK,CAqL3D,CAAC"}

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.js

@@ -11,11 +11,9 @@ import flattenChildren from 'react-keyed-flatten-children';
 import { useSwipeable } from 'react-swipeable';
 import { Box } from "../Box/index.js";
 import { Button } from "../Button/index.js";
-import { Column, Columns } from "../Columns/index.js";
 import { Icon } from "../Icon/index.js";
-import Section from "../Section/Section.js";
+import { Section } from "../Section/Section.js";
 import { SliderProgress } from "../SliderProgress/index.js";
-import { Stack } from "../Stack/index.js";
 import * as styles from "./HorizontalAutoScroller.css.js";
 import { useHorizontalAutoScroller } from "./useHorizontalAutoScroller.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +21,7 @@ export const HorizontalAutoScroller = _ref => {
   let {
     sliderProgressColour = 'primary',
     noControls = false,
-    space = '5',
+    space = ['7', '5'],
     durationSeconds = 10,
     children,
     itemsPerPage: incomingItemsPerPage,
@@ -37,20 +35,27 @@ export const HorizontalAutoScroller = _ref => {
   const [itemsRef, setItemsRef] = useState();
   const items = useMemo(() => {
     const itemsRef = [];
-    const list = incomingItems.map((item, index) => _jsx(Column, {
+    const list = incomingItems.map((item, index) => _jsx(Box, {
       ref: el => {
         if (el) itemsRef.push(el);
       },
-      noShrink: true,
-      width: columnWidth,
-      justifyContent: "stretch",
+      flexGrow: 0,
+      flexShrink: 0,
       alignSelf: "stretch",
+      className: clsx(styles.itemMinWidth, styles.sprinklesColumnWidth({
+        flexBasis: columnWidth
+      })),
       children: _jsx(Box, {
+        display: "flex",
+        height: "full",
         width: "full",
-        className: clsx(styles.item, {
-          [styles.active]: index === activeIndex
-        }),
-        children: item
+        children: _jsx(Box, {
+          width: "full",
+          className: clsx(styles.item, {
+            [styles.active]: index === activeIndex
+          }),
+          children: item
+        })
       })
     }, index));
     setItemsRef(itemsRef);
@@ -83,9 +88,13 @@ export const HorizontalAutoScroller = _ref => {
       children: items
     });
   }
-  return _jsxs(Stack, {
+  return _jsxs(Box, {
+    alignItems: "stretch",
     className: className,
-    space: "5",
+    display: "flex",
+    flexDirection: "column",
+    gap: "5",
+    odComponent: "horizontal-auto-scroller",
     children: [_jsxs(Box, _objectSpread(_objectSpread({
       overflow: "hidden",
       position: "relative"
@@ -101,7 +110,7 @@ export const HorizontalAutoScroller = _ref => {
         className: [styles.controllerBtn, styles.prevBtn],
         display: "flex",
         alignItems: "center",
-        justifyContent: "flexStart",
+        justifyContent: "flex-start",
         position: "absolute",
         children: _jsx(Button, {
           rounded: true,
@@ -115,18 +124,19 @@ export const HorizontalAutoScroller = _ref => {
             icon: ChevronLeftIcon
           })
         })
-      }), _jsxs(Columns, {
-        ref: containerRef,
+      }), _jsxs(Box, {
+        alignItems: "stretch",
+        display: "flex",
         overflow: "hidden",
-        noWrap: true,
+        px: ['7', '8'],
+        flexWrap: "nowrap",
         width: "full",
-        space: space,
-        children: [noControls ? null : _jsx(Column, {
-          noShrink: true,
+        gap: space,
+        ref: containerRef,
+        children: [noControls ? null : _jsx(Box, {
           className: styles.controllerCol,
           children: _jsx("span", {})
-        }), items, noControls ? null : _jsx(Column, {
-          noShrink: true,
+        }), items, noControls ? null : _jsx(Box, {
           className: styles.controllerCol,
           children: _jsx("span", {})
         })]
@@ -134,7 +144,7 @@ export const HorizontalAutoScroller = _ref => {
         className: [styles.controllerBtn, styles.nextBtn],
         display: "flex",
         alignItems: "center",
-        justifyContent: "flexEnd",
+        justifyContent: "flex-end",
         position: "absolute",
         children: _jsx(Button, {
           rounded: true,
@@ -149,17 +159,18 @@ export const HorizontalAutoScroller = _ref => {
           })
         })
       })]
-    })), _jsx(Section, {
-      width: "small",
-      children: _jsx(SliderProgress, {
-        backgroundColour: sliderProgressColour,
-        duration: `${durationSeconds}s`,
-        paused: paused,
-        onRequestNext: next,
-        totalCount: pageCount,
-        activeIndex: activePage || 0
+    })), _jsx(Box, {
+      children: _jsx(Section, {
+        width: "small",
+        children: _jsx(SliderProgress, {
+          backgroundColour: sliderProgressColour,
+          duration: `${durationSeconds}s`,
+          paused: paused,
+          onRequestNext: next,
+          totalCount: pageCount,
+          activeIndex: activePage || 0
+        })
       })
     })]
   });
-};
-export default HorizontalAutoScroller;
+};

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

@@ -1,11 +1,11 @@
 import type { IconType } from '@autoguru/icons';
 import type { FunctionComponent, ReactElement, SVGAttributes } from 'react';
 import { ResponsiveProp } from '../../utils/responsiveProps.css';
-import type { BoxStyleProps } from '../Box';
+import type { UseBoxProps } from '../Box';
 import * as styles from './Icon.css';
 export type IconEl = IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'>;
 export interface Props {
-    display?: Extract<BoxStyleProps['display'], 'block' | 'inlineBlock'>;
+    display?: Extract<UseBoxProps['display'], 'block' | 'inline-block'>;
     className?: string;
     size?: ResponsiveProp<keyof typeof styles.size | string>;
     icon: IconEl;

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,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,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,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IACrE,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,KAAK,CA4BzC,CAAC;AAEF,eAAe,IAAI,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;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,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,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC;IACpE,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,KAAK,CA4BzC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Icon/Icon.js

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