@autoguru/overdrive 4.43.5 → 4.43.6-next.1

package/dist/components/Actions/Actions.d.ts

@@ -1,9 +1,9 @@
-import { type FunctionComponent, type ReactElement } from 'react';
-import { type InlineProps } from '../Inline';
-export interface ActiontsProps extends Pick<InlineProps, 'noWrap'> {
+import { ComponentProps, FunctionComponent, ReactElement } from 'react';
+import { Columns } from '../Columns/Columns';
+export interface Props extends Partial<Pick<ComponentProps<typeof Columns>, 'noWrap' | 'wrappingDirection'>> {
     children: ReactElement | ReactElement[];
     className?: string;
-    wrappingDirection?: 'default' | 'reverse';
 }
-export declare const Actions: FunctionComponent<ActiontsProps>;
+export declare const Actions: FunctionComponent<Props>;
+export default Actions;
 //# sourceMappingURL=Actions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../lib/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACjE,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAC1C;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAYpD,CAAC"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../lib/components/Actions/Actions.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,MAAM,WAAW,KAChB,SAAQ,OAAO,CACd,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,QAAQ,GAAG,mBAAmB,CAAC,CACpE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAU5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Actions/Actions.js

@@ -1,7 +1,10 @@
 "use strict";
 
-import React from 'react';
-import { Inline } from "../Inline/index.js";
+import * as React from 'react';
+import { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import { Column } from "../Columns/Column.js";
+import { Columns } from "../Columns/Columns.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Actions = _ref => {
   let {
@@ -9,10 +12,13 @@ export const Actions = _ref => {
     noWrap,
     wrappingDirection
   } = _ref;
-  return _jsx(Inline, {
+  return _jsx(Columns, {
     space: "3",
     noWrap: noWrap,
-    reverse: wrappingDirection === 'reverse' ? true : undefined,
-    children: children
+    wrappingDirection: wrappingDirection,
+    children: Children.map(flattenChildren(children), child => _jsx(Column, {
+      children: child
+    }))
   });
-};
+};
+export default Actions;

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

@@ -3,12 +3,12 @@ import React from 'react';
 import { Actions } from './Actions';
 declare const meta: {
     title: string;
-    component: React.FunctionComponent<import("./Actions").ActiontsProps>;
+    component: React.FunctionComponent<import("./Actions").Props>;
     decorators: ((story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-vite").ReactRenderer, {
         children: React.ReactElement | React.ReactElement[];
         className?: string | undefined;
-        wrappingDirection?: "default" | "reverse" | undefined;
         noWrap?: boolean | undefined;
+        wrappingDirection?: "reverse" | "default" | undefined;
     }>) => React.JSX.Element)[];
 };
 export default meta;

package/dist/components/Alert/Alert.d.ts

@@ -2,13 +2,13 @@ import { ComponentProps, FunctionComponent, ReactNode } from 'react';
 import { Button } from '../Button/Button';
 import { IntentStripe } from '../IntentStripe/IntentStripe';
 type IntentStripeProps = ComponentProps<typeof IntentStripe>;
-export interface AlertProps extends IntentStripeProps {
+export interface Props extends IntentStripeProps {
     children?: ReactNode;
     className?: string;
     inline?: boolean;
     dismissible?: boolean;
     onRequestClose?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const Alert: FunctionComponent<AlertProps>;
-export {};
+export declare const Alert: FunctionComponent<Props>;
+export default Alert;
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAM5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAuE/C,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAM5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,KAAM,SAAQ,iBAAiB;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAsE1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -4,12 +4,12 @@ import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowClo
 import clsx from 'clsx';
 import * as React from 'react';
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/boxStyles.js";
+import { useBoxStyles } from "../Box/useBoxStyles.js";
 import { Button } from "../Button/Button.js";
 import { Icon } from "../Icon/Icon.js";
 import { IntentStripe } from "../IntentStripe/IntentStripe.js";
 import { Text } from "../Text/Text.js";
-import { textStyles } from "../Text/textStyles.js";
+import { useTextStyles } from "../Text/useTextStyles.js";
 import * as styles from "./Alert.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const iconMapForIntent = {
@@ -27,10 +27,10 @@ export const Alert = _ref => {
     onRequestClose,
     dismissible = typeof onRequestClose === 'function'
   } = _ref;
-  const dismissBtnStyles = textStyles({
+  const dismissBtnStyles = useTextStyles({
     colour: 'muted'
   });
-  const intentColourStyles = textStyles({
+  const intentColourStyles = useTextStyles({
     colour: intent
   });
   return _jsxs(Box, {
@@ -46,7 +46,6 @@ export const Alert = _ref => {
     borderRadius: "1",
     boxShadow: inline ? 'none' : '4',
     padding: "2",
-    "data-od-component": "alert",
     children: [_jsx(IntentStripe, {
       intent: intent
     }), _jsxs(Box, {
@@ -57,7 +56,7 @@ export const Alert = _ref => {
         children: _jsx(Icon, {
           icon: iconMapForIntent[intent],
           size: "medium",
-          className: boxStyles({
+          className: useBoxStyles({
             marginY: '2',
             marginLeft: '2'
           })
@@ -65,7 +64,7 @@ export const Alert = _ref => {
       }), _jsx(Box, {
         alignSelf: "center",
         width: "auto",
-        className: textStyles({
+        className: useTextStyles({
           colour: 'dark'
         }),
         children: typeof children === 'string' ? _jsx(Text, {
@@ -89,4 +88,5 @@ export const Alert = _ref => {
       })]
     })]
   });
-};
+};
+export default Alert;

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

@@ -4,7 +4,7 @@ import { Alert } from './Alert';
 type Intent = ComponentProps<typeof Alert>['intent'];
 declare const meta: {
     title: string;
-    component: React.FunctionComponent<import("./Alert").AlertProps>;
+    component: React.FunctionComponent<import("./Alert").Props>;
     args: {
         intent: "success";
     };

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

@@ -0,0 +1,2 @@
+export declare const root: string;
+//# sourceMappingURL=Anchor.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAGf,CAAC"}

package/dist/components/Anchor/Anchor.css.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Anchor/Anchor.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+export const root = style({
+  textDecoration: 'none',
+  cursor: 'pointer'
+}, "root");
+__vanilla_filescope__.endFileScope();

package/dist/components/Anchor/Anchor.d.ts

@@ -1,11 +1,12 @@
 import { IconType } from '@autoguru/icons';
-import React, { type ElementType } from 'react';
-import { type BoxLikeProps } from '../Box/useBox';
-declare const ANCHOR_TAG = "a";
-interface CustomProps {
+import { AnchorHTMLAttributes, ElementType, FunctionComponent, ReactElement, ReactNode } from 'react';
+export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'style' | 'is'> {
+    className?: string;
+    is?: ElementType | ReactElement;
+    disabled?: boolean;
+    children?: ReactNode;
     icon?: IconType;
 }
-export type AnchorProps<E extends ElementType = typeof ANCHOR_TAG> = BoxLikeProps<E, CustomProps>;
-export declare const Anchor: <E extends ElementType = typeof ANCHOR_TAG>({ as, children, icon, ...props }: AnchorProps<E>) => React.JSX.Element;
-export {};
+export declare const Anchor: FunctionComponent<Props>;
+export default Anchor;
 //# sourceMappingURL=Anchor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvE,QAAA,MAAM,UAAU,MAAM,CAAC;AAEvB,UAAU,WAAW;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,UAAU,IAChE,YAAY,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAK9B,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,OAAO,UAAU,EAAE,kCAK/D,WAAW,CAAC,CAAC,CAAC,sBAgChB,CAAC"}
+{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EACN,oBAAoB,EAGpB,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAChB,SAAQ,IAAI,CACX,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,CAC3B;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAyC3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Anchor/Anchor.js

@@ -2,50 +2,51 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "children", "icon"];
+const _excluded = ["className", "is", "disabled", "children", "icon"];
 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 React, { cloneElement } from 'react';
-import { Box } from "../Box/Box.js";
-import { useBox } from "../Box/useBox.js";
+import clsx from 'clsx';
+import * as React from 'react';
+import { cloneElement, createElement, isValidElement } from 'react';
+import { useBoxStyles } from "../Box/useBoxStyles.js";
 import { Icon } from "../Icon/Icon.js";
+import { Inline } from "../Inline/Inline.js";
+import { Text } from "../Text/Text.js";
+import { useTextStyles } from "../Text/useTextStyles.js";
+import * as styles from "./Anchor.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ANCHOR_TAG = 'a';
 export const Anchor = _ref => {
   let {
-      as = ANCHOR_TAG,
+      className = '',
+      is: Component = 'a',
+      disabled = false,
       children,
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    Component,
-    componentProps,
-    reactElement
-  } = useBox(_objectSpread(_objectSpread({}, props), {}, {
-    alignItems: 'center',
-    as,
-    odComponent: 'anchor'
-  }));
-  const Content = () => _jsxs(Box, {
-    as: "span",
-    alignItems: "center",
-    colour: "link",
-    display: "inline-flex",
-    fontSize: "4",
-    fontWeight: "bold",
-    gap: "2",
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const textStyles = useTextStyles({
+    colour: 'link'
+  });
+  const props = _objectSpread({
+    className: clsx(styles.root, textStyles, useBoxStyles({
+      is: typeof Component === 'string' ? Component : undefined,
+      display: 'inline'
+    }), className),
+    disabled
+  }, rest);
+  const childs = _jsxs(Inline, {
+    space: "2",
     children: [icon && _jsx(Icon, {
       icon: icon,
-      size: "small"
-    }), _jsx("span", {
+      size: "small",
+      className: textStyles
+    }), _jsx(Text, {
+      fontWeight: "bold",
+      size: "4",
+      colour: "link",
       children: children
     })]
   });
-  if (reactElement) {
-    return cloneElement(reactElement, componentProps, _jsx(Content, {}));
-  }
-  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
-    children: _jsx(Content, {})
-  }));
-};
+  return isValidElement(Component) ? cloneElement(Component, props, childs) : createElement(Component, props, childs);
+};
+export default Anchor;

package/dist/components/Anchor/Anchor.spec.d.ts

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

package/dist/components/Anchor/Anchor.spec.d.ts.map

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

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

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     tags: string[];
-    component: <E extends import("react").ElementType = "a">({ as, children, icon, ...props }: import("./Anchor").AnchorProps<E>) => import("react").JSX.Element;
+    component: import("react").FunctionComponent<import("./Anchor").Props>;
     args: {
         href: string;
         icon: string;

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -480,14 +480,14 @@ const AutoSuggestInputPrimitive = withEnhancedInput(_ref5 => {
     as: "button",
     paddingY: size === 'small' ? '1' : '3',
     paddingRight: size === 'small' ? '2' : '3',
-    flexShrink: "0",
+    flexShrink: 0,
     onMouseDown: onRequestReset,
     children: _jsx(Icon, {
       size: size === 'large' ? size : 'medium',
       icon: CloseIcon
     })
   }) : fieldIcon ? _jsx(Box, {
-    flexShrink: "0",
+    flexShrink: 0,
     paddingY: size === 'medium' ? '3' : '2',
     paddingRight: size === 'medium' ? '3' : '2',
     onClick: focusHandler,
@@ -505,7 +505,7 @@ const AutoSuggestInputPrimitive = withEnhancedInput(_ref5 => {
     className: className,
     children: [_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       as: "input",
-      flexGrow: "1"
+      flexGrow: 1
     }, inputEventHandlers), field), {}, {
       ref: handleRef,
       autoCapitalize: "none",

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

@@ -1,7 +1,10 @@
-import React, { type ElementType } from 'react';
-import { type UseBoxProps } from './useBox';
-export declare const Box: {
-    <E extends ElementType = "div">({ children, ...props }: UseBoxProps<E>): React.JSX.Element;
-    displayName: string;
-};
+import type { AllHTMLAttributes, ElementType, ReactNode } from 'react';
+import React from 'react';
+import { type BoxStylesProps } from './newBox/boxStyles';
+export interface BoxProps extends Omit<BoxStylesProps, 'as'>, Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'> {
+    as?: ElementType;
+    is?: ElementType;
+    children?: ReactNode;
+}
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAyBpD,eAAO,MAAM,GAAG;KAAI,CAAC,SAAS,WAAW,kCAGtC,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,QAChB,SAAQ,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,EACjC,IAAI,CACH,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACjE;IACF,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAKD,eAAO,MAAM,GAAG,8EA0Lf,CAAC"}

package/dist/components/Box/Box.js

@@ -2,27 +2,174 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children"];
+const _excluded = ["is", "as", "children", "className", "display", "width", "maxWidth", "minWidth", "height", "position", "overflow", "userSelect", "textAlign", "pointerEvents", "backgroundColour", "boxShadow", "color", "colour", "opacity", "borderRadius", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "borderColour", "borderColourX", "borderColourY", "borderColourTop", "borderColourRight", "borderColourBottom", "borderColourLeft", "borderWidth", "borderWidthX", "borderWidthY", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "alignItems", "order", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "justifySelf", "gap", "columnGap", "rowGap", "m", "mb", "ml", "mr", "mt", "mx", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginLeft", "marginRight", "p", "pb", "pl", "pr", "pt", "px", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight"];
 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 React, { cloneElement } from 'react';
-import { useBox } from "./useBox.js";
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { boxStyles } from "./newBox/boxStyles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Box = _ref => {
+export const Box = forwardRef((_ref, ref) => {
   let {
-      children
+      is = 'div',
+      as = is,
+      children,
+      className,
+      display,
+      width,
+      maxWidth,
+      minWidth,
+      height,
+      position,
+      overflow,
+      userSelect,
+      textAlign,
+      pointerEvents,
+      backgroundColour,
+      boxShadow,
+      color,
+      colour,
+      opacity,
+      borderRadius,
+      borderColor,
+      borderBottomColor,
+      borderLeftColor,
+      borderRightColor,
+      borderTopColor,
+      borderColour,
+      borderColourX,
+      borderColourY,
+      borderColourTop,
+      borderColourRight,
+      borderColourBottom,
+      borderColourLeft,
+      borderWidth,
+      borderWidthX,
+      borderWidthY,
+      borderWidthTop,
+      borderWidthRight,
+      borderWidthBottom,
+      borderWidthLeft,
+      alignItems,
+      order,
+      flexDirection,
+      flexGrow,
+      flexShrink,
+      flexWrap,
+      justifyContent,
+      justifySelf,
+      gap,
+      columnGap,
+      rowGap,
+      m,
+      mb,
+      ml,
+      mr,
+      mt,
+      mx,
+      margin,
+      marginX,
+      marginY,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      p,
+      pb,
+      pl,
+      pr,
+      pt,
+      px,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    Component,
-    componentProps,
-    reactElement
-  } = useBox(props);
-  if (reactElement) {
-    return cloneElement(reactElement, componentProps, children);
-  }
-  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    allOtherProps = _objectWithoutProperties(_ref, _excluded);
+  const cls = boxStyles({
+    as,
+    display,
+    width,
+    maxWidth,
+    minWidth,
+    height,
+    position,
+    overflow,
+    userSelect,
+    textAlign,
+    pointerEvents,
+    backgroundColour,
+    boxShadow,
+    color,
+    colour,
+    opacity,
+    borderRadius,
+    borderColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    borderTopColor,
+    borderColour,
+    borderColourX,
+    borderColourY,
+    borderColourTop,
+    borderColourRight,
+    borderColourBottom,
+    borderColourLeft,
+    borderWidth,
+    borderWidthX,
+    borderWidthY,
+    borderWidthTop,
+    borderWidthRight,
+    borderWidthBottom,
+    borderWidthLeft,
+    alignItems,
+    order,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    flexWrap,
+    justifyContent,
+    justifySelf,
+    gap,
+    columnGap,
+    rowGap,
+    m,
+    mb,
+    ml,
+    mr,
+    mt,
+    mx,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    p,
+    pb,
+    pl,
+    pr,
+    pt,
+    px,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  });
+  const Component = as;
+  return _jsx(Component, _objectSpread(_objectSpread({
+    ref: ref,
+    className: clsx(cls, className)
+  }, allOtherProps), {}, {
     children: children
   }));
-};
+});
 Box.displayName = 'Box';

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

@@ -6,5 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Standard: Story;
 export declare const ResponsiveProps: Story;
 export declare const DataAttributes: Story;
-export declare const ComponentAsProp: Story;
 //# sourceMappingURL=Box.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAiB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAKlC,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAKF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAiB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAKlC,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAKF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC"}

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

@@ -1,4 +1,4 @@
-export * from './Box';
-export * from './useBox';
-export * from './boxStyles';
+export { Box, type BoxProps } from './Box';
+export { useBoxStyles } from './useBoxStyles';
+export type { BoxStyleProps } from './useBoxStyles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Box/index.js

@@ -1,5 +1,4 @@
 "use strict";
 
-export * from "./Box.js";
-export * from "./useBox.js";
-export * from "./boxStyles.js";
+export { Box } from "./Box.js";
+export { useBoxStyles } from "./useBoxStyles.js";

package/dist/components/Box/newBox/NewBox.d.ts

@@ -0,0 +1,7 @@
+import React, { type ElementType } from 'react';
+import { type UseBoxProps } from './useBox';
+export declare const NewBox: {
+    <E extends ElementType = "div">({ children, ...props }: UseBoxProps<E>): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=NewBox.d.ts.map

package/dist/components/Box/newBox/NewBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/NewBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAyBpD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,kCAGzC,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}

package/dist/components/Box/newBox/NewBox.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { cloneElement } from 'react';
+import { useBox } from "./useBox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NewBox = _ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    Component,
+    componentProps,
+    reactElement
+  } = useBox(props);
+  if (reactElement) {
+    return cloneElement(reactElement, componentProps, children);
+  }
+  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    children: children
+  }));
+};
+NewBox.displayName = 'NewBox';