@autoguru/overdrive 4.44.1 → 4.44.2-next.0

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 React, { type ComponentProps, type ReactElement } from 'react';
+import { Columns } from '../Columns/Columns';
+export interface ActionsProps 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: ({ children, noWrap, wrappingDirection, }: ActionsProps) => React.JSX.Element;
+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":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,MAAM,WAAW,YAChB,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,GAAI,0CAIrB,YAAY,sBAMd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Actions/Actions.js

@@ -1,7 +1,9 @@
 "use strict";
 
-import React from 'react';
-import { Inline } from "../Inline/index.js";
+import React, { 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 +11,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/Alert/Alert.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 import { Button } from '../Button/Button';
 import { IntentStripe } from '../IntentStripe/IntentStripe';
 type IntentStripeProps = ComponentProps<typeof IntentStripe>;
@@ -9,6 +9,6 @@ export interface AlertProps extends IntentStripeProps {
     dismissible?: boolean;
     onRequestClose?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const Alert: FunctionComponent<AlertProps>;
-export {};
+export declare const Alert: ({ children, className, intent, inline, onRequestClose, dismissible, }: AlertProps) => React.JSX.Element;
+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":"AASA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAK5D,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,GAAI,uEAOnB,UAAU,sBA6DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -2,14 +2,14 @@
 
 import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
-import * as React from 'react';
+import React from 'react';
+import { sprinkles } from "../../styles/index.js";
+import { sprinklesLegacyText } from "../../styles/typography.css.js";
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/boxStyles.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 * as styles from "./Alert.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const iconMapForIntent = {
@@ -27,14 +27,10 @@ export const Alert = _ref => {
     onRequestClose,
     dismissible = typeof onRequestClose === 'function'
   } = _ref;
-  const dismissBtnStyles = textStyles({
-    colour: 'muted'
-  });
-  const intentColourStyles = textStyles({
-    colour: intent
-  });
   return _jsxs(Box, {
-    className: clsx(className, intentColourStyles, {
+    className: clsx(className, sprinklesLegacyText({
+      color: intent
+    }), {
       [styles.contained]: !inline
     }),
     role: "alert",
@@ -46,18 +42,18 @@ export const Alert = _ref => {
     borderRadius: "1",
     boxShadow: inline ? 'none' : '4',
     padding: "2",
-    "data-od-component": "alert",
+    odComponent: "alert",
     children: [_jsx(IntentStripe, {
       intent: intent
     }), _jsxs(Box, {
       display: "flex",
       gap: "2",
       children: [_jsx(Box, {
-        alignSelf: "flex-start",
+        alignSelf: "start",
         children: _jsx(Icon, {
           icon: iconMapForIntent[intent],
           size: "medium",
-          className: boxStyles({
+          className: sprinkles({
             marginY: '2',
             marginLeft: '2'
           })
@@ -65,7 +61,7 @@ export const Alert = _ref => {
       }), _jsx(Box, {
         alignSelf: "center",
         width: "auto",
-        className: textStyles({
+        className: sprinkles({
           colour: 'dark'
         }),
         children: typeof children === 'string' ? _jsx(Text, {
@@ -81,7 +77,9 @@ export const Alert = _ref => {
           "aria-label": "close",
           onClick: onRequestClose,
           children: _jsx(Icon, {
-            className: dismissBtnStyles,
+            className: sprinkles({
+              colour: 'muted'
+            }),
             icon: WindowCloseIcon,
             size: "medium"
           })
@@ -89,4 +87,5 @@ export const Alert = _ref => {
       })]
     })]
   });
-};
+};
+export default Alert;

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';
+import type { TestId } from '../../types';
+export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'as' | 'children' | 'is' | 'style'>, TestId {
+    as?: 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;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAO1C,MAAM,WAAW,KAChB,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,IAAI,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,CAClC,EACD,MAAM;IACP,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CA4C3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Anchor/Anchor.js

@@ -2,32 +2,39 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "children", "icon"];
+const _excluded = ["className", "as", "disabled", "testId", "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 clsx from 'clsx';
+import * as React from 'react';
+import { cloneElement, createElement, isValidElement } from 'react';
+import { elementStyles } from "../../styles/index.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Box } from "../Box/Box.js";
-import { useBox } from "../Box/useBox.js";
 import { Icon } from "../Icon/Icon.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,
+      as: Component = ANCHOR_TAG,
+      disabled = false,
+      testId,
       children,
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    Component,
-    componentProps,
-    reactElement
-  } = useBox(_objectSpread(_objectSpread({}, props), {}, {
-    alignItems: 'center',
-    as,
-    odComponent: 'anchor'
-  }));
-  const Content = () => _jsxs(Box, {
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread(_objectSpread({
+    className: clsx(elementStyles({
+      as: Component,
+      colour: 'link',
+      display: 'inline'
+    }), className),
+    disabled
+  }, dataAttrs({
+    testid: testId
+  })), rest);
+  const content = _jsxs(Box, {
     as: "span",
     alignItems: "center",
     colour: "link",
@@ -42,10 +49,6 @@ export const Anchor = _ref => {
       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, content) : createElement(Component, props, content);
+};
+export default Anchor;

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/Badge/Badge.css.d.ts

@@ -13,15 +13,15 @@ export declare const styledBadge: import("@vanilla-extract/recipes").RuntimeFn<{
     };
     size: {
         small: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-            fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
         };
         standard: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})`;
         };
         large: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-            padding: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})`;
+            padding: `var(--${string})`;
         };
     };
 }>;

package/dist/components/Badge/Badge.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { WithTestId } from '../../types';
+import type { TestId } from '../../types';
 import type { StyledBadgeProps } from './Badge.css';
 type Colours = Exclude<StyledBadgeProps['colour'], undefined>;
-export interface BadgeProps {
+export interface BadgeProps extends TestId {
     label: string;
     colour?: Colours;
     className?: string;
     look?: 'standard' | 'inverted';
     size?: StyledBadgeProps['size'];
 }
-export declare const Badge: ({ label, colour, look, size, className, testId, }: WithTestId<BadgeProps>) => React.JSX.Element;
+export declare const Badge: ({ label, colour, look, size, className, testId, }: BadgeProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,KAAK,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAU;IAE1B,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAE/B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,KAAK,GAAI,mDAOnB,UAAU,CAAC,UAAU,CAAC,sBAwBxB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,KAAK,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,MAAM;IAEzC,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAE/B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAChC;AAOD,eAAO,MAAM,KAAK,GAAI,mDAOnB,UAAU,sBAyBZ,CAAC"}

package/dist/components/Badge/Badge.js

@@ -1,13 +1,9 @@
 "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 { invariant } from '@autoguru/utilities';
 import clsx from 'clsx';
 import React from 'react';
-import { dataAttrs } from "../../utils/dataAttrs.js";
-import { Box } from "../Box/index.js";
+import { Box } from "../Box/Box.js";
 import * as styles from "./Badge.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Badge = _ref => {
@@ -21,16 +17,15 @@ export const Badge = _ref => {
   } = _ref;
   !['string', 'number'].includes(typeof label) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Badge `label` can only contain strings or numbers') : invariant(false) : void 0;
   const inverted = look === 'inverted';
-  return _jsx(Box, _objectSpread(_objectSpread({
+  return _jsx(Box, {
     className: clsx([styles.styledBadge({
       colour,
       inverted,
       size
     }), className]),
-    borderRadius: "1"
-  }, dataAttrs({
-    'test-id': testId
-  })), {}, {
+    borderRadius: "1",
+    odComponent: "badge",
+    testId: testId,
     children: label
-  }));
+  });
 };

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

@@ -1,7 +1,11 @@
-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, PropsWithChildren } from 'react';
+import React from 'react';
+import { type StyledElementProps } from '../../styles';
+import { OdComponent, TestId } from '../../types';
+export interface CommonBoxProps extends OdComponent, PropsWithChildren, TestId {
+}
+export interface BoxProps extends Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'>, CommonBoxProps, StyledElementProps {
+    as?: ElementType;
+}
+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":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMlD,MAAM,WAAW,cAChB,SAAQ,WAAW,EAClB,iBAAiB,EACjB,MAAM;CAAG;AAEX,MAAM,WAAW,QAChB,SAAQ,IAAI,CACV,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACjE,EACD,cAAc,EACd,kBAAkB;IAEnB,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAoBD,eAAO,MAAM,GAAG,8EA6Pf,CAAC"}

package/dist/components/Box/Box.js

@@ -2,27 +2,236 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children"];
+const _excluded = ["as", "children", "className", "odComponent", "testId", "display", "height", "maxWidth", "minWidth", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "size", "userSelect", "useVar", "width", "bg", "backgroundColor", "backgroundColour", "boxShadow", "color", "colour", "fg", "opacity", "fontSize", "fontWeight", "lineHeight", "text", "textAlign", "textWrap", "borderRadius", "borderColor", "borderStyle", "borderWidth", "borderWidthX", "borderWidthY", "borderBottomColor", "borderBottomStyle", "borderBottomWidth", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderTopColor", "borderTopStyle", "borderTopWidth", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "borderColour", "borderColourX", "borderColourY", "borderBottomColour", "borderLeftColour", "borderRightColour", "borderTopColour", "alignContent", "alignItems", "alignSelf", "columnGap", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "gap", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumns", "justifyContent", "placeItems", "rowGap", "order", "m", "mb", "ml", "mr", "mt", "mx", "my", "margin", "marginX", "marginY", "marginBottom", "marginLeft", "marginRight", "marginTop", "p", "pb", "pl", "pr", "pt", "px", "py", "padding", "paddingX", "paddingY", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop"];
 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 React, { forwardRef } from 'react';
+import { elementStyles } from "../../styles/index.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Box = _ref => {
+export const Box = forwardRef((_ref, ref) => {
   let {
-      children
+      as = 'div',
+      children,
+      className,
+      odComponent,
+      testId,
+      display,
+      height,
+      maxWidth,
+      minWidth,
+      overflow,
+      overflowX,
+      overflowY,
+      pointerEvents,
+      position,
+      size,
+      userSelect,
+      useVar,
+      width,
+      bg,
+      backgroundColor,
+      backgroundColour,
+      boxShadow,
+      color,
+      colour,
+      fg,
+      opacity,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      text,
+      textAlign,
+      textWrap,
+      borderRadius,
+      borderColor,
+      borderStyle,
+      borderWidth,
+      borderWidthX,
+      borderWidthY,
+      borderBottomColor,
+      borderBottomStyle,
+      borderBottomWidth,
+      borderLeftColor,
+      borderLeftStyle,
+      borderLeftWidth,
+      borderRightColor,
+      borderRightStyle,
+      borderRightWidth,
+      borderTopColor,
+      borderTopStyle,
+      borderTopWidth,
+      borderWidthTop,
+      borderWidthRight,
+      borderWidthBottom,
+      borderWidthLeft,
+      borderColour,
+      borderColourX,
+      borderColourY,
+      borderBottomColour,
+      borderLeftColour,
+      borderRightColour,
+      borderTopColour,
+      alignContent,
+      alignItems,
+      alignSelf,
+      columnGap,
+      flexDirection,
+      flexGrow,
+      flexShrink,
+      flexWrap,
+      gap,
+      gridAutoColumns,
+      gridAutoFlow,
+      gridAutoRows,
+      gridColumns,
+      justifyContent,
+      placeItems,
+      rowGap,
+      order,
+      m,
+      mb,
+      ml,
+      mr,
+      mt,
+      mx,
+      my,
+      margin,
+      marginX,
+      marginY,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      marginTop,
+      p,
+      pb,
+      pl,
+      pr,
+      pt,
+      px,
+      py,
+      padding,
+      paddingX,
+      paddingY,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop
     } = _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 Component = as;
+  const allClasses = elementStyles({
+    as,
+    className,
+    display,
+    height,
+    maxWidth,
+    minWidth,
+    overflow,
+    overflowX,
+    overflowY,
+    pointerEvents,
+    position,
+    size,
+    userSelect,
+    useVar,
+    width,
+    bg,
+    backgroundColor,
+    backgroundColour,
+    boxShadow,
+    color,
+    colour,
+    fg,
+    opacity,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    text,
+    textAlign,
+    textWrap,
+    borderRadius,
+    borderColor,
+    borderStyle,
+    borderWidth,
+    borderWidthX,
+    borderWidthY,
+    borderBottomColor,
+    borderBottomStyle,
+    borderBottomWidth,
+    borderLeftColor,
+    borderLeftStyle,
+    borderLeftWidth,
+    borderRightColor,
+    borderRightStyle,
+    borderRightWidth,
+    borderTopColor,
+    borderTopStyle,
+    borderTopWidth,
+    borderWidthTop,
+    borderWidthRight,
+    borderWidthBottom,
+    borderWidthLeft,
+    borderColour,
+    borderColourX,
+    borderColourY,
+    borderBottomColour,
+    borderLeftColour,
+    borderRightColour,
+    borderTopColour,
+    alignContent,
+    alignItems,
+    alignSelf,
+    columnGap,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    flexWrap,
+    gap,
+    gridAutoColumns,
+    gridAutoFlow,
+    gridAutoRows,
+    gridColumns,
+    justifyContent,
+    placeItems,
+    rowGap,
+    order,
+    m,
+    mb,
+    ml,
+    mr,
+    mt,
+    mx,
+    my,
+    margin,
+    marginX,
+    marginY,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    p,
+    pb,
+    pl,
+    pr,
+    pt,
+    px,
+    py,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  });
+  return _jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, allOtherProps), dataAttrs({
+    'od-component': odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
+    testid: testId
+  })), {}, {
+    className: allClasses,
+    ref: ref,
     children: children
   }));
-};
+});
 Box.displayName = 'Box';

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 { componentStyles as useBoxStyles } from '../../styles/componentStyles';
+export type { ComponentStylesProps as BoxStyleProps } from '../../styles/componentStyles';
 //# sourceMappingURL=index.d.ts.map