@autoguru/overdrive 4.43.0-next.2 → 4.43.0-next.4

package/dist/components/Box/Box.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Box.test.d.ts.map

package/dist/components/Box/Box.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.test.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.test.tsx"],"names":[],"mappings":""}

package/dist/components/Box/Box.test.js

@@ -0,0 +1,113 @@
+"use strict";
+
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Box } from "./Box.js";
+import * as stories from "./Box.stories.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  ComponentAsProp,
+  DataAttributes,
+  ResponsiveProps,
+  Standard
+} = composeStories(stories);
+describe('Box', async () => {
+  await it('renders the standard Box story', async () => {
+    await Standard.run();
+    const text = Standard.args.children;
+    const boxElement = screen.getByText(text);
+    expect(boxElement.tagName).toBe('DIV');
+  });
+  await it('renders the Box story with responsive props', async () => {
+    await ResponsiveProps.run();
+    const boxElement = screen.getByText('Resize the viewport');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('merges custom className with component styles', () => {
+    render(_jsx(Box, {
+      padding: "3",
+      className: "my-custom-class another-class",
+      children: "Custom Class Box"
+    }));
+    const boxElement = screen.getByText('Custom Class Box');
+    expect(boxElement.className).toContain('my-custom-class');
+    expect(boxElement.className).toContain('another-class');
+    expect(boxElement).not.toHaveAttribute('padding');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('renders as a button element', () => {
+    render(_jsx(Box, {
+      as: "button",
+      children: "Button Box"
+    }));
+    const buttonElement = screen.getByRole('button', {
+      name: 'Button Box'
+    });
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+  await it('renders using a React element passed to "as" prop', async () => {
+    await ComponentAsProp.run();
+    const boxElement = screen.getByText('Styled props merged with custom component');
+    expect(boxElement.tagName).toBe('A');
+    expect(boxElement).toHaveAttribute('href', '#hello');
+    expect(boxElement.className).toContain('keep-my-custom-class-name');
+    expect(boxElement).not.toHaveAttribute('backgroundColor');
+    expect(boxElement).not.toHaveAttribute('borderColor');
+    expect(boxElement).not.toHaveAttribute('borderWidth');
+    expect(boxElement).not.toHaveAttribute('p');
+  });
+  await it('renders as an anchor tag with href', () => {
+    render(_jsx(Box, {
+      as: "a",
+      href: "/test-link",
+      children: "Anchor Box"
+    }));
+    const anchorElement = screen.getByRole('link', {
+      name: 'Anchor Box'
+    });
+    expect(anchorElement.tagName).toBe('A');
+    expect(anchorElement).toHaveAttribute('href', '/test-link');
+  });
+  await it('renders with odComponent and testId props', async () => {
+    await DataAttributes.run();
+    const boxElement = screen.getByText('The most basic box (or is it?)');
+    expect(boxElement).toHaveAttribute('data-od-component', 'box-basic');
+    expect(boxElement).toHaveAttribute('data-test-id', 'so-basic');
+    expect(boxElement).toHaveAttribute('data-custom-attribute', 'somewhat less basic');
+  });
+  await it('applies basic style props (padding)', () => {
+    render(_jsx(Box, {
+      padding: "4",
+      children: "Padded Box"
+    }));
+    const boxElement = screen.getByText('Padded Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('applies responsive style props for padding', () => {
+    render(_jsx(Box, {
+      padding: ['2', '4', '6'],
+      children: "Responsive Padded Box"
+    }));
+    const boxElement = screen.getByText('Responsive Padded Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('applies colour and backgroundColour props', () => {
+    render(_jsx(Box, {
+      color: "onSurface",
+      backgroundColor: "danger",
+      children: "Coloured Box"
+    }));
+    const boxElement = screen.getByText('Coloured Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('applies border props correctly', () => {
+    render(_jsx(Box, {
+      borderColor: "warning",
+      borderWidth: "2",
+      children: "Bordered Box"
+    }));
+    const boxElement = screen.getByText('Bordered Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+});

package/dist/components/Box/boxStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"boxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/boxStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUzC,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAE9D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,GAC9B,UAAU,CAAC;AA4BZ,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,6BAItD,cAAc,CAAC,CAAC,CAAC,WA2BnB,CAAC"}
+{"version":3,"file":"boxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/boxStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUzC,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAE9D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,GAC9B,UAAU,CAAC;AA4BZ,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,6BAItD,cAAc,CAAC,CAAC,CAAC,WA4BnB,CAAC"}

package/dist/components/Box/boxStyles.js

@@ -5,7 +5,7 @@ const _excluded = ["as", "className"];
 import clsx from 'clsx';
 import { element } from "../../reset/reset.css.js";
 import { sprinkles, sprinklesLegacyColours, sprinklesResponsive } from "../../styles/sprinkles.css.js";
-import { filterSprinklesProps } from "../../utils/sprinkles.js";
+import { filterPropsWithStyles } from "../../utils/sprinkles.js";
 const borderColorProps = ['borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'];
 const borderStyleProps = ['borderStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'];
 const borderWidthProps = ['borderWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'];
@@ -24,7 +24,7 @@ export const boxStyles = _ref => {
     sprinklesProps,
     sprinklesResponsiveProps,
     sprinklesLegacyColourProps
-  } = filterSprinklesProps(props);
+  } = filterPropsWithStyles(props);
   if (hasBorderColorOrWidth && !hasBorderStyle) {
     sprinklesProps['borderStyle'] = 'solid';
   }

package/dist/components/Box/useBox.js

@@ -30,11 +30,11 @@ export const useBox = _ref => {
   const className = useDeepCompareMemo(() => boxStyles(_objectSpread({
     as,
     className: _className
-  }, props)), [_className, props]);
+  }, props)), [as, _className, props]);
   const remainingProps = useDeepCompareMemo(() => _objectSpread(_objectSpread({}, filterNonSprinklesProps(props)), dataAttrs({
     [OD_COMPONENT_ATTR]: odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
     testId
-  })), [props]);
+  })), [odComponent, props, testId]);
   const componentProps = _objectSpread(_objectSpread({}, remainingProps), {}, {
     className
   });

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

@@ -11,20 +11,6 @@ export declare const sprinklesColumnWidthResponsive: ((props: {
 };
 export type SprinklesColumnWidthResponsive = Parameters<typeof sprinklesColumnWidthResponsive>[0];
 export declare const columnStyle: import("@vanilla-extract/recipes").RuntimeFn<{
-    alignSelf: {
-        stretch: {
-            alignSelf: "stretch";
-        };
-        top: {
-            alignSelf: "flex-start";
-        };
-        center: {
-            alignSelf: "center";
-        };
-        bottom: {
-            alignSelf: "flex-end";
-        };
-    };
     grow: {
         true: {
             flexGrow: number;

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

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

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

@@ -32,20 +32,6 @@ export const sprinklesColumnWidthResponsive = createSprinkles(columnWidthRespons
 export const columnStyle = recipe({
   base: {},
   variants: {
-    alignSelf: {
-      stretch: {
-        alignSelf: 'stretch'
-      },
-      top: {
-        alignSelf: 'flex-start'
-      },
-      center: {
-        alignSelf: 'center'
-      },
-      bottom: {
-        alignSelf: 'flex-end'
-      }
-    },
     grow: {
       true: {
         flexGrow: 1

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

@@ -1,12 +1,11 @@
 import React, { type ElementType } from 'react';
-import { type StyleProps, type UseBoxProps } from '../Box';
+import { type UseBoxProps } from '../Box';
 import * as styles from './Column.css';
 export interface ColumnProps extends styles.ColumnRecipeVariants {
-    order?: StyleProps['order'];
     width?: styles.SprinklesColumnWidthResponsive['flexBasis'];
 }
 export declare const Column: {
-    <E extends ElementType>({ alignSelf, children, grow, noShrink, order, ref, width, ...boxProps }: UseBoxProps<E> & ColumnProps): React.JSX.Element;
+    <E extends ElementType>({ children, grow, noShrink, order, ref, width, ...boxProps }: UseBoxProps<E> & ColumnProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Column.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAc,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAO,KAAK,UAAU,EAAU,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAExE,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,WAAY,SAAQ,MAAM,CAAC,oBAAoB;IAC/D,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC,8BAA8B,CAAC,WAAW,CAAC,CAAC;CAC3D;AAQD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,2EASzC,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW;;CA4C9B,CAAC"}
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAc,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAEvD,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,WAAY,SAAQ,MAAM,CAAC,oBAAoB;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC,8BAA8B,CAAC,WAAW,CAAC,CAAC;CAC3D;AAQD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,gEAQzC,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW;;CA2C9B,CAAC"}

package/dist/components/Columns/Column.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["alignSelf", "children", "grow", "noShrink", "order", "ref", "width"];
+const _excluded = ["children", "grow", "noShrink", "order", "ref", "width"];
 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 { invariant } from '@autoguru/utilities';
@@ -13,7 +13,6 @@ import { ColumnContext } from "./Columns.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Column = _ref => {
   let {
-      alignSelf,
       children,
       grow = false,
       noShrink = false,
@@ -52,7 +51,6 @@ export const Column = _ref => {
     className: [spaceXCls, spaceYCls, styles.sprinklesColumnWidthResponsive({
       flexBasis: width
     }), styles.columnStyle({
-      alignSelf,
       grow,
       noShrink
     })],

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

@@ -95,12 +95,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);
-        maxWidth?: ("fit-content" | "max-content" | {
-            mobile?: "fit-content" | "max-content" | undefined;
-            tablet?: "fit-content" | "max-content" | undefined;
-            desktop?: "fit-content" | "max-content" | undefined;
-            largeDesktop?: "fit-content" | "max-content" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "fit-content" | "max-content" | null>;
+        maxWidth?: ("small" | "medium" | "large" | "fit-content" | "max-content" | {
+            mobile?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+            tablet?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+            desktop?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+            largeDesktop?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "fit-content" | "max-content" | null>;
         minWidth?: ("auto" | "fit-content" | {
             mobile?: "auto" | "fit-content" | undefined;
             tablet?: "auto" | "fit-content" | undefined;

package/dist/components/Section/Section.d.ts

@@ -1,8 +1,8 @@
 import { type FunctionComponent } from 'react';
+import { SprinklesResponsive } from '../../styles/sprinkles.css';
 import { type UseBoxProps } from '../Box';
-import * as styles from './Section.css';
 export interface SectionProps {
-    width?: keyof typeof styles.width;
+    width?: SprinklesResponsive['maxWidth'];
 }
 export declare const Section: FunctionComponent<UseBoxProps & SectionProps>;
 //# sourceMappingURL=Section.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../lib/components/Section/Section.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAElD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAYjE,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../lib/components/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAIlD,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiBjE,CAAC"}

package/dist/components/Section/Section.js

@@ -5,24 +5,29 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["children", "width"];
 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 clsx from 'clsx';
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { useBox } from "../Box/index.js";
 import * as styles from "./Section.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Section = _ref => {
   let {
       children,
-      width = 'medium'
+      width: maxWidth = 'medium'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
-    Component
+    Component,
+    componentProps,
+    reactElement
   } = useBox(_objectSpread({
+    className: styles.root,
+    maxWidth: maxWidth,
     width: 'full'
   }, props));
-  return _jsx(Component, {
-    className: clsx(styles.root, styles.width[width]),
+  if (reactElement) {
+    return cloneElement(reactElement, componentProps, children);
+  }
+  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     children: children
-  });
+  }));
 };

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

@@ -81,12 +81,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);
-        maxWidth?: ("fit-content" | "max-content" | {
-            mobile?: "fit-content" | "max-content" | undefined;
-            tablet?: "fit-content" | "max-content" | undefined;
-            desktop?: "fit-content" | "max-content" | undefined;
-            largeDesktop?: "fit-content" | "max-content" | undefined;
-        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "fit-content" | "max-content" | null>;
+        maxWidth?: ("small" | "medium" | "large" | "fit-content" | "max-content" | {
+            mobile?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+            tablet?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+            desktop?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+            largeDesktop?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+        } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "fit-content" | "max-content" | null>;
         minWidth?: ("auto" | "fit-content" | {
             mobile?: "auto" | "fit-content" | undefined;
             tablet?: "auto" | "fit-content" | undefined;

package/dist/{components/Box/argTypes.d.ts → stories/shared/argTypes-box.d.ts}

@@ -1,6 +1,6 @@
 import { ArgTypes } from '@storybook/react';
 import { type ComponentProps } from 'react';
-import { Box } from './Box';
+import { Box } from '../../components/Box/Box';
 export declare const scaleOptions: string[];
 export declare const boxArgTypes: Partial<ArgTypes<ComponentProps<typeof Box>>>;
-//# sourceMappingURL=argTypes.d.ts.map
+//# sourceMappingURL=argTypes-box.d.ts.map

package/dist/stories/shared/argTypes-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"argTypes-box.d.ts","sourceRoot":"","sources":["../../../lib/stories/shared/argTypes-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAI/C,eAAO,MAAM,YAAY,UAA8B,CAAC;AAuBxD,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAoErE,CAAC"}

package/dist/styles/sprinkles.css.d.ts

@@ -110,12 +110,12 @@ export declare const sprinklesResponsive: ((props: {
         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);
-    maxWidth?: ("fit-content" | "max-content" | {
-        mobile?: "fit-content" | "max-content" | undefined;
-        tablet?: "fit-content" | "max-content" | undefined;
-        desktop?: "fit-content" | "max-content" | undefined;
-        largeDesktop?: "fit-content" | "max-content" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "fit-content" | "max-content" | null>;
+    maxWidth?: ("small" | "medium" | "large" | "fit-content" | "max-content" | {
+        mobile?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+        tablet?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+        desktop?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+        largeDesktop?: "small" | "medium" | "large" | "fit-content" | "max-content" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "fit-content" | "max-content" | null>;
     minWidth?: ("auto" | "fit-content" | {
         mobile?: "auto" | "fit-content" | undefined;
         tablet?: "auto" | "fit-content" | undefined;

package/dist/styles/sprinkles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAkIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAkC,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAuCxD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;CAA0C,CAAC;AAE9E,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAAC,EAC1C,iBAAiB,GACjB,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,OAAO,CACT,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAmHF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAkIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAkC,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAuCxD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;CAA0C,CAAC;AAE9E,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAAC,EAC1C,iBAAiB,GACjB,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,OAAO,CACT,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAuHF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/styles/sprinkles.css.js

@@ -158,7 +158,10 @@ const responsiveProperties = defineProperties({
       full: '100%',
       auto: 'auto'
     }),
-    maxWidth: ['fit-content', 'max-content'],
+    maxWidth: _objectSpread(_objectSpread({}, tokens.contentWidth), {}, {
+      'fit-content': 'fit-content',
+      'max-content': 'max-content'
+    }),
     minWidth: ['auto', 'fit-content'],
     gap: gapSizesWithVar,
     columnGap: space,

package/dist/utils/sprinkles.d.ts

@@ -1,11 +1,18 @@
 import { type Sprinkles, type SprinklesLegacyColours, type SprinklesResponsive } from '../styles/sprinkles.css';
-export declare const isSprinklesProperty: (key: string) => boolean;
-export declare const isSprinklesLegacyColourProperty: (key: string) => boolean;
-export declare const isSprinklesResponsiveProperty: (key: string) => boolean;
-export declare const filterSprinklesProps: <T extends object>(props: T) => {
+type AnySprinklesKey = keyof Sprinkles | keyof SprinklesResponsive | keyof SprinklesLegacyColours;
+type RemainingProps<T extends object> = {
+    [K in keyof T as K extends AnySprinklesKey ? never : K]: T[K];
+};
+interface SortedProps<T extends object> {
     sprinklesProps: Sprinkles;
     sprinklesResponsiveProps: SprinklesResponsive;
     sprinklesLegacyColourProps: SprinklesLegacyColours;
-};
-export declare const filterNonSprinklesProps: <T extends object>(props: T) => { [K in keyof T]: T[K]; };
+    otherProps: RemainingProps<T>;
+}
+export declare const isSprinklesProperty: (key: string) => boolean;
+export declare const isSprinklesLegacyColourProperty: (key: string) => boolean;
+export declare const isSprinklesResponsiveProperty: (key: string) => boolean;
+export declare const filterNonSprinklesProps: <P extends object>(props: P) => RemainingProps<P>;
+export declare const filterPropsWithStyles: <P extends object>(props: P) => SortedProps<P>;
+export {};
 //# sourceMappingURL=sprinkles.d.ts.map

package/dist/utils/sprinkles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.d.ts","sourceRoot":"","sources":["../../lib/utils/sprinkles.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,SAAS,EAEd,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACxB,MAAM,yBAAyB,CAAC;AAKjC,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,YAE9C,CAAC;AAKF,eAAO,MAAM,+BAA+B,GAAI,KAAK,MAAM,YAI1D,CAAC;AAKF,eAAO,MAAM,6BAA6B,GAAI,KAAK,MAAM,YAExD,CAAC;AAQF,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC;oBAatC,SAAS;8BACC,mBAAmB;gCACjB,sBAAsB;CAEzD,CAAC;AAQH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC,QAe9D,CAAC,qBAEH,CAAC"}
+{"version":3,"file":"sprinkles.d.ts","sourceRoot":"","sources":["../../lib/utils/sprinkles.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,SAAS,EAEd,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACxB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,eAAe,GACjB,MAAM,SAAS,GACf,MAAM,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAGhC,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;KACtC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,eAAe,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC7D,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM;IACrC,cAAc,EAAE,SAAS,CAAC;IAC1B,wBAAwB,EAAE,mBAAmB,CAAC;IAC9C,0BAA0B,EAAE,sBAAsB,CAAC;IACnD,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC9B;AAKD,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,YAE9C,CAAC;AAKF,eAAO,MAAM,+BAA+B,GAAI,KAAK,MAAM,YAI1D,CAAC;AAKF,eAAO,MAAM,6BAA6B,GAAI,KAAK,MAAM,YAExD,CAAC;AAQF,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC,sBAYtC,CAAC;AAa7B,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,MAAM,EACrD,OAAO,CAAC,KACN,WAAW,CAAC,CAAC,CAgCf,CAAC"}

package/dist/utils/sprinkles.js

@@ -10,25 +10,38 @@ export const isSprinklesLegacyColourProperty = key => {
 export const isSprinklesResponsiveProperty = key => {
   return sprinklesResponsive.properties.has(key);
 };
-export const filterSprinklesProps = props => Object.entries(props).reduce((acc, _ref) => {
+export const filterNonSprinklesProps = props => Object.entries(props).reduce((acc, _ref) => {
   let [key, value] = _ref;
-  if (isSprinklesProperty(key)) {
-    acc.sprinklesProps[key] = value;
-  } else if (isSprinklesResponsiveProperty(key)) {
-    acc.sprinklesResponsiveProps[key] = value;
-  } else if (isSprinklesLegacyColourProperty(key)) {
-    acc.sprinklesLegacyColourProps[key] = value;
-  }
-  return acc;
-}, {
-  sprinklesProps: {},
-  sprinklesResponsiveProps: {},
-  sprinklesLegacyColourProps: {}
-});
-export const filterNonSprinklesProps = props => Object.entries(props).reduce((acc, _ref2) => {
-  let [key, value] = _ref2;
   if (!(isSprinklesProperty(key) || isSprinklesResponsiveProperty(key) || isSprinklesLegacyColourProperty(key))) {
     acc[key] = value;
   }
   return acc;
-}, {});
+}, {});
+export const filterPropsWithStyles = props => {
+  const acc = {
+    sprinklesProps: {},
+    sprinklesResponsiveProps: {},
+    sprinklesLegacyColourProps: {},
+    otherProps: {}
+  };
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key)) {
+      const value = props[key];
+      if (isSprinklesProperty(key)) {
+        acc.sprinklesProps[key] = value;
+      } else if (isSprinklesResponsiveProperty(key)) {
+        acc.sprinklesResponsiveProps[key] = value;
+      } else if (isSprinklesLegacyColourProperty(key)) {
+        acc.sprinklesLegacyColourProps[key] = value;
+      } else {
+        acc.otherProps[key] = value;
+      }
+    }
+  }
+  return {
+    sprinklesProps: acc.sprinklesProps,
+    sprinklesResponsiveProps: acc.sprinklesResponsiveProps,
+    sprinklesLegacyColourProps: acc.sprinklesLegacyColourProps,
+    otherProps: acc.otherProps
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.43.0-next.2",
+	"version": "4.43.0-next.4",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -50,8 +50,8 @@
 		"storybook:extract": "npx sb extract",
 		"storybook": "storybook dev -p 6006",
 		"storybook:build": "storybook build",
-		"test": "vitest --project=specs",
-		"test:ci": "yarn vitest run --no-cache --coverage --project=specs",
+		"test": "vitest --project=unit-tests",
+		"test:ci": "yarn vitest run --no-cache --coverage --project=unit-tests",
 		"test:a11y": "vitest run --coverage --project=storybook",
 		"typeEmit": "tsc -d --declarationDir dist --emitDeclarationOnly",
 		"watch": "tsc --watch",

package/dist/components/Box/argTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,UAA8B,CAAC;AAuBxD,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAoErE,CAAC"}

package/dist/components/Box/argTypes.js

@@ -1,81 +0,0 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { colourMap as baseColours } from "../../themes/base/colours.js";
-import { tokens } from "../../themes/base/tokens.js";
-export const scaleOptions = Object.values(tokens.space);
-const boxShadowOptions = Object.keys(tokens.elevation);
-const borderRadiusOptions = Object.keys(tokens.border.radius);
-const scaledProps = ['padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingRight', 'paddingLeft', 'margin', 'marginX', 'marginY', 'marginTop', 'marginRight', 'marginLeft'];
-const widthOptions = ['full'];
-const orderOptions = [0, 1, 2];
-export const boxArgTypes = _objectSpread({
-  backgroundColour: {
-    options: Object.keys(baseColours),
-    control: {
-      type: 'select'
-    }
-  },
-  boxShadow: {
-    options: boxShadowOptions,
-    control: {
-      type: 'select'
-    }
-  },
-  borderRadius: {
-    options: borderRadiusOptions,
-    control: {
-      type: 'select'
-    }
-  },
-  alignItems: {
-    options: ['flexStart', 'center', 'flexEnd', 'stretch'],
-    control: {
-      type: 'select'
-    }
-  },
-  justifyContent: {
-    options: ['flexStart', 'center', 'flexEnd', 'spaceBetween'],
-    control: {
-      type: 'select'
-    }
-  },
-  flexDirection: {
-    options: ['row', 'rowReverse', 'column', 'columnReverse'],
-    control: {
-      type: 'select'
-    }
-  },
-  flexShrink: {
-    defaultValue: undefined,
-    options: ['1']
-  },
-  pointerEvents: {
-    defaultValue: undefined,
-    options: ['none']
-  },
-  width: {
-    options: widthOptions,
-    defaultValue: null,
-    control: {
-      type: 'select'
-    }
-  },
-  order: {
-    options: orderOptions,
-    defaultValue: null,
-    control: {
-      type: 'select'
-    }
-  }
-}, scaledProps.reduce((argTypes, prop) => {
-  argTypes[prop] = {
-    options: scaleOptions,
-    control: {
-      type: 'select'
-    }
-  };
-  return argTypes;
-}, {}));