@autoguru/overdrive 4.44.2 → 4.44.3

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

@@ -1,16 +1,5 @@
-import type { AllHTMLAttributes, ElementType, PropsWithChildren } from 'react';
 import React from 'react';
-import { type ElementStylesProps } from '../../styles/elementStyles';
-import { OdComponent, TestId } from '../../types';
-/**
- * Use CommonBoxProps to help consistently define additional utility props of a component
- */
-export interface CommonBoxProps extends OdComponent, PropsWithChildren, TestId {
-}
-export interface BoxProps extends Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'>, CommonBoxProps, ElementStylesProps {
-    /** Pass in the HTML element or JSX component that should be rendered for the box */
-    as?: ElementType;
-}
+import { type UseBoxProps as BoxProps } from './useBox/useBox';
 /**
  * The Box component provides powerful responsive style props to a given tag, defaulting to a `<div>` element.
  * Style props are generated from the design tokens, are fully type-safe, and reuse utility classes.
@@ -29,5 +18,8 @@ export interface BoxProps extends Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'c
  * @example
  * <Box as={<MyCustomThing />} borderColor="info" borderWidth="1" />
  */
-export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export { type UseBoxProps as BoxProps } from './useBox/useBox';
 //# 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,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGlD;;GAEG;AACH,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;IACnB,oFAAoF;IACpF,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,GAAG,8EA6Pf,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAU,KAAK,WAAW,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEvE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,GAAG;;qCAUf,CAAC;AAIF,OAAO,EAAE,KAAK,WAAW,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/Box/Box.js

@@ -2,16 +2,11 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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"];
+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, { forwardRef } from 'react';
-import { elementStyles } from "../../styles/elementStyles.js";
-import { dataAttrs } from "../../utils/dataAttrs.js";
-/**
- * Use CommonBoxProps to help consistently define additional utility props of a component
- */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { useBox } from "./useBox/useBox.js";
 /**
  * The Box component provides powerful responsive style props to a given tag, defaulting to a `<div>` element.
  * Style props are generated from the design tokens, are fully type-safe, and reuse utility classes.
@@ -30,230 +25,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @example
  * <Box as={<MyCustomThing />} borderColor="info" borderWidth="1" />
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      as = 'div',
-      children,
-      className,
-      odComponent,
-      testId,
-      // style props
-      display,
-      height,
-      maxWidth,
-      minWidth,
-      overflow,
-      overflowX,
-      overflowY,
-      pointerEvents,
-      position,
-      size,
-      userSelect,
-      useVar,
-      width,
-      bg,
-      backgroundColor,
-      backgroundColour,
-      boxShadow,
-      color,
-      // modern semantic colour tokens
-      colour,
-      // legacy colours
-      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
+      children
     } = _ref,
-    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 /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, allOtherProps), dataAttrs({
-    'od-component': odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
-    testid: testId
-  })), {}, {
-    className: allClasses,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    Component,
+    componentProps
+  } = useBox(props);
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     ref: ref,
     children: children
   }));

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

@@ -1,4 +1,3 @@
-export { Box, type BoxProps } from './Box';
-export { elementStyles as useBoxStyles } from '../../styles/elementStyles';
-export type { ElementStylesProps as BoxStyleProps } from '../../styles/elementStyles';
+export * from './Box';
+export * from './useBox/useBox';
 //# 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,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC3E,YAAY,EAAE,kBAAkB,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC"}

package/dist/components/Box/index.js

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

package/dist/components/Box/{newBox/NewBox.d.ts → polymorphicBox/PolymorphicBox.d.ts}

@@ -1,5 +1,5 @@
 import React, { type ElementType } from 'react';
-import { type UseBoxProps } from './useBox';
+import { type UseBoxProps } from './usePolymorphicBox';
 /**
  * A polymorphic Box component that provides a flexible container with styling capabilities, defaulting to a `<div>` element.
  * Use the `as` prop to control the rendered HTML tag. The box component exposes design system tokens relative to each style
@@ -23,8 +23,8 @@ import { type UseBoxProps } from './useBox';
  * @example
  * <Box asComponent={<MyCustomThing />} borderColor="info" borderWidth="1" />
  */
-export declare const NewBox: {
+export declare const PolymorphicBox: {
     <E extends ElementType = "div">({ children, ...props }: UseBoxProps<E>): React.JSX.Element;
     displayName: string;
 };
-//# sourceMappingURL=NewBox.d.ts.map
+//# sourceMappingURL=PolymorphicBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PolymorphicBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/polymorphicBox/PolymorphicBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,cAAc;KAAI,CAAC,SAAS,WAAW,kCAGjD,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}

package/dist/components/Box/{newBox/NewBox.js → polymorphicBox/PolymorphicBox.js}

@@ -6,7 +6,7 @@ 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 { usePolymorphicBox } from "./usePolymorphicBox.js";
 /**
  * A polymorphic Box component that provides a flexible container with styling capabilities, defaulting to a `<div>` element.
  * Use the `as` prop to control the rendered HTML tag. The box component exposes design system tokens relative to each style
@@ -31,7 +31,7 @@ import { useBox } from "./useBox.js";
  * <Box asComponent={<MyCustomThing />} borderColor="info" borderWidth="1" />
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const NewBox = _ref => {
+export const PolymorphicBox = _ref => {
   let {
       children
     } = _ref,
@@ -40,7 +40,7 @@ export const NewBox = _ref => {
     Component,
     componentProps,
     reactElement
-  } = useBox(props);
+  } = usePolymorphicBox(props);
   if (reactElement) {
     return /*#__PURE__*/cloneElement(reactElement, componentProps, children);
   }
@@ -48,4 +48,4 @@ export const NewBox = _ref => {
     children: children
   }));
 };
-NewBox.displayName = 'NewBox';
+PolymorphicBox.displayName = 'PolymorphicBox';

package/dist/components/Box/{newBox/useBox.d.ts → polymorphicBox/usePolymorphicBox.d.ts}

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactElement } from 'react';
 import { type ElementStylesProps } from '../../../styles/elementStyles';
 import type { Sprinkles } from '../../../styles/sprinkles.css';
-import type { CommonBoxProps } from '../Box';
+import type { ConsistentComponentProps } from '../../../types';
 export type BoxStylesProps<E extends ElementType = 'div'> = AsPolyProp<E> & Pick<ElementStylesProps, 'className'> & Sprinkles;
 export type BoxStylesReturn<P extends object> = [string, P];
 /** Extract the ref type for a polymorphic component based on the provided element type */
@@ -23,12 +23,12 @@ export type PropsToOmit<C extends ElementType, P> = keyof (AsPolyProp<C> & P);
  */
 export type PolymorphicComponentProps<C extends ElementType, Props = object> = PropsWithChildren<Props & AsPolyProp<C> & RefPolyProp<C>> & Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 /** Polymorphic box props that merge sprinkles style props and the HTML element props */
-export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, CommonBoxProps & Sprinkles>;
+export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, ConsistentComponentProps & Sprinkles>;
 /**
  * Define custom props similar to Box with polymorphic, common and style props.
  * Component props will take take precedent over style props and can overwrite them
  */
-export type BoxLikeProps<E extends ElementType, P = object> = PolymorphicComponentProps<E, Omit<Sprinkles, keyof P> & CommonBoxProps & P>;
+export type BoxLikeProps<E extends ElementType, P = object> = PolymorphicComponentProps<E, Omit<Sprinkles, keyof P> & ConsistentComponentProps & P>;
 /**
  * The Overdrive component primitive to expose a flexible HTML element as a fully typesafe React component
  * that provides intrinsic props as well as style props from vanilla-extract sprinkles.
@@ -39,10 +39,10 @@ export type BoxLikeProps<E extends ElementType, P = object> = PolymorphicCompone
  * if JSX was passed in the `as` prop and `cloneElement` will need to be used. `SemanticChild` is only defined
  * depending on the HTML tag.
  */
-export declare const useBox: <E extends ElementType = "div">({ as: _as, className: _className, odComponent, testId, ...props }: UseBoxProps<E>) => {
+export declare const usePolymorphicBox: <E extends ElementType = "div">({ as: _as, className: _className, odComponent, testId, ...props }: UseBoxProps<E>) => {
     Component: ElementType;
     componentProps: ComponentPropsWithRef<E>;
     reactElement: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     SemanticChild: ElementType | undefined;
 };
-//# sourceMappingURL=useBox.d.ts.map
+//# sourceMappingURL=usePolymorphicBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePolymorphicBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/polymorphicBox/usePolymorphicBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAU/D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GACrC,SAAS,CAAC;AAEX,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAE5D,0FAA0F;AAC1F,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAC/C,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAEjC,gGAAgG;AAChG,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,EAAE,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC;CAGtB,CAAC;AAEF,uFAAuF;AACvF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI;IAChD,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9E;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,CACpC,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,IACX,iBAAiB,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,GAC5D,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAE1D,wFAAwF;AACxF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACpD,yBAAyB,CAAC,CAAC,EAAE,wBAAwB,GAAG,SAAS,CAAC,CAAC;AAEpE;;;GAGG;AACH,MAAM,MAAM,YAAY,CACvB,CAAC,SAAS,WAAW,EACrB,CAAC,GAAG,MAAM,IACP,yBAAyB,CAC5B,CAAC,EACD,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,CAAC,CACvD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAM9D,WAAW,CAAC,CAAC,CAAC;;;;;CAmChB,CAAC"}

package/dist/components/Box/{newBox/useBox.js → polymorphicBox/usePolymorphicBox.js}

@@ -9,8 +9,7 @@ import { isValidElement } from 'react';
 import { useDeepCompareMemo } from "../../../hooks/index.js";
 import { elementStyles } from "../../../styles/elementStyles.js";
 import { dataAttrs } from "../../../utils/dataAttrs.js";
-import { filterPropsWithStyles } from "../../../utils/sprinkles.js";
-// defaults
+import { filterPropsWithStyles } from "../../../utils/sprinkles.js"; // defaults
 const DEFAULT_TAG = 'div';
 const LIST_ITEM_TAG = 'li';
 const LIST_TAGS = ['ul', 'ol'];
@@ -47,7 +46,7 @@ const OD_COMPONENT_ATTR = 'od-component';
  * if JSX was passed in the `as` prop and `cloneElement` will need to be used. `SemanticChild` is only defined
  * depending on the HTML tag.
  */
-export const useBox = _ref => {
+export const usePolymorphicBox = _ref => {
   let {
       as: _as,
       className: _className,