@autoguru/overdrive 4.42.0 → 4.43.0-next.1

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

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

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":"AACA,OAAO,EAEN,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAU,OAAO,EAAE,MAAM,YAAY,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"}
+{"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,KAAM,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACzD,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,KAAK,CAY5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Actions/Actions.js

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

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

@@ -7,8 +7,8 @@ declare const meta: {
     decorators: ((story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         children: React.ReactElement | React.ReactElement[];
         className?: string | undefined;
+        wrappingDirection?: "default" | "reverse" | undefined;
         noWrap?: boolean | undefined;
-        wrappingDirection?: keyof typeof import("../Columns/Columns.css").wrapping | undefined;
     }>) => React.JSX.Element)[];
 };
 export default meta;

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

@@ -10,5 +10,5 @@ export interface Props extends IntentStripeProps {
     onRequestClose?: ComponentProps<typeof Button>['onClick'];
 }
 export declare const Alert: FunctionComponent<Props>;
-export default Alert;
+export {};
 //# 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;AAGrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAK/C,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,CAwE1C,CAAC;AAEF,eAAe,KAAK,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;AAGrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAK/C,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,CAuE1C,CAAC"}

package/dist/components/Alert/Alert.js

@@ -3,9 +3,8 @@
 import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
+import { Box, boxStyles } from "../Box/index.js";
 import { Button } from "../Button/index.js";
-import { Column, Columns } from "../Columns/index.js";
 import { Icon } from "../Icon/index.js";
 import { IntentStripe } from "../IntentStripe/index.js";
 import { Text, useTextStyles } from "../Text/index.js";
@@ -45,35 +44,33 @@ export const Alert = _ref => {
     borderRadius: "1",
     boxShadow: inline ? 'none' : '4',
     padding: "2",
+    "data-od-component": "alert",
     children: [_jsx(IntentStripe, {
       intent: intent
-    }), _jsxs(Columns, {
-      noWrap: true,
-      spaceX: "2",
-      children: [_jsx(Column, {
-        noShrink: true,
-        alignSelf: "top",
+    }), _jsxs(Box, {
+      display: "flex",
+      gap: "2",
+      children: [_jsx(Box, {
+        alignSelf: "flex-start",
         children: _jsx(Icon, {
           icon: iconMapForIntent[intent],
           size: "medium",
-          className: useBoxStyles({
+          className: boxStyles({
             marginY: '2',
             marginLeft: '2'
           })
         })
-      }), _jsx(Column, {
-        grow: true,
+      }), _jsx(Box, {
+        alignSelf: "center",
         width: "auto",
-        alignSelf: "centre",
         className: useTextStyles({
           colour: 'dark'
         }),
         children: typeof children === 'string' ? _jsx(Text, {
           children: children
         }) : children
-      }), _jsx(Column, {
-        noShrink: true,
-        alignSelf: "top",
+      }), _jsx(Box, {
+        ml: "auto",
         children: dismissible && _jsx(Button, {
           minimal: true,
           rounded: true,
@@ -90,5 +87,4 @@ export const Alert = _ref => {
       })]
     })]
   });
-};
-export default Alert;
+};

package/dist/components/Anchor/Anchor.js

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, isValidElement } from 'react';
-import { useBoxStyles } from "../Box/index.js";
+import { boxStyles } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
 import { Inline } from "../Inline/index.js";
 import { Text, useTextStyles } from "../Text/index.js";
@@ -27,8 +27,8 @@ export const Anchor = _ref => {
     colour: 'link'
   });
   const props = _objectSpread({
-    className: clsx(styles.root, textStyles, useBoxStyles({
-      is: typeof Component === 'string' ? Component : undefined,
+    className: clsx(styles.root, textStyles, boxStyles({
+      as: typeof Component === 'string' ? Component : undefined,
       display: 'inline'
     }), className),
     disabled

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -391,8 +391,8 @@ const SuggestionsList = _ref4 => {
     suggestionListRef
   } = _ref4;
   return _jsxs(Box, {
-    ref: suggestionListRef,
     as: "ul",
+    ref: suggestionListRef,
     backgroundColour: "white",
     className: [styles.suggestionList.defaults, className],
     id: suggestionListId,
@@ -403,8 +403,8 @@ const SuggestionsList = _ref4 => {
     }), suggestions.map((suggestion, idx) => {
       const highlight = highlightIndex === idx;
       return _jsx(Box, {
-        ref: highlight ? highlightRef : undefined,
         as: "li",
+        ref: highlight ? highlightRef : undefined,
         id: getSuggestionId(suggestionListId, idx),
         role: "option",
         "aria-selected": highlight,

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

@@ -1,10 +1,7 @@
-import type { AllHTMLAttributes } from 'react';
-import * as React from 'react';
-import { ReactNode } from 'react';
-import type { BoxStyleProps } from './useBoxStyles';
-export interface Props extends BoxStyleProps, Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'width' | 'height' | 'className' | 'is'> {
-    children?: ReactNode;
-}
-export declare const Box: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
-export default Box;
+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;
+};
 //# 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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,WAAW,KAChB,SAAQ,aAAa,EACpB,IAAI,CACH,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAC9C;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAKD,eAAO,MAAM,GAAG,2EAoIf,CAAC;AAIF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAoBpD,eAAO,MAAM,GAAG;KAAI,CAAC,SAAS,WAAW,kCAGtC,WAAW,CAAC,CAAC,CAAC;;CAIhB,CAAC"}

package/dist/components/Box/Box.js

@@ -2,128 +2,23 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "is", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginLeft", "marginRight", "display", "width", "height", "position", "overflow", "userSelect", "textAlign", "pointerEvents", "borderColour", "borderColourX", "borderColourY", "borderColourTop", "borderColourRight", "borderColourBottom", "borderColourLeft", "borderWidth", "borderWidthX", "borderWidthY", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "boxShadow", "borderRadius", "backgroundColour", "colour", "opacity", "className", "alignItems", "order", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "children"];
+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 clsx from 'clsx';
-import * as React from 'react';
-import { forwardRef } from 'react';
-import { useBoxStyles } from "./useBoxStyles.js";
+import React from 'react';
+import { useBox } from "./useBox.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Box = forwardRef((_ref, ref) => {
+export const Box = _ref => {
   let {
-      as = 'div',
-      is = as,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      margin,
-      marginX,
-      marginY,
-      marginTop,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      display,
-      width,
-      height,
-      position,
-      overflow,
-      userSelect,
-      textAlign,
-      pointerEvents,
-      borderColour,
-      borderColourX,
-      borderColourY,
-      borderColourTop,
-      borderColourRight,
-      borderColourBottom,
-      borderColourLeft,
-      borderWidth,
-      borderWidthX,
-      borderWidthY,
-      borderWidthTop,
-      borderWidthRight,
-      borderWidthBottom,
-      borderWidthLeft,
-      boxShadow,
-      borderRadius,
-      backgroundColour,
-      colour,
-      opacity,
-      className = '',
-      alignItems,
-      order,
-      flexDirection,
-      flexGrow,
-      flexShrink,
-      flexWrap,
-      justifyContent,
       children
     } = _ref,
-    allOtherProps = _objectWithoutProperties(_ref, _excluded);
-  const cls = useBoxStyles({
-    is,
-    alignItems,
-    order,
-    backgroundColour,
-    colour,
-    borderColour,
-    borderColourBottom,
-    borderColourLeft,
-    borderColourRight,
-    borderColourTop,
-    borderColourX,
-    borderColourY,
-    borderRadius,
-    borderWidth,
-    borderWidthBottom,
-    borderWidthLeft,
-    borderWidthRight,
-    borderWidthTop,
-    borderWidthX,
-    borderWidthY,
-    boxShadow,
-    display,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    flexWrap,
-    height,
-    justifyContent,
-    margin,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    marginTop,
-    marginX,
-    marginY,
-    opacity,
-    overflow,
-    padding,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingX,
-    paddingY,
-    pointerEvents,
-    position,
-    textAlign,
-    userSelect,
-    width
-  });
-  const Component = is;
-  return _jsx(Component, _objectSpread(_objectSpread({
-    ref: ref,
-    className: clsx(cls, className)
-  }, allOtherProps), {}, {
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    Component,
+    componentProps
+  } = useBox(props);
+  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     children: children
   }));
-});
-Box.displayName = 'Box';
-export default Box;
+};
+Box.displayName = 'Box';

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

@@ -1,23 +1,6 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Box").Props & import("react").RefAttributes<HTMLElement>>;
-    args: {
-        as: "div";
-        children: string;
-        colour: "primary";
-        backgroundColour: "primary";
-        borderRadius: string;
-        borderColour: "light";
-        borderWidth: "1";
-        boxShadow: string;
-        display: "inlineFlex";
-        margin: undefined;
-        padding: "6";
-        textAlign: undefined;
-    };
-    argTypes: Partial<import("@storybook/react").ArgTypes<import("./Box").Props & import("react").RefAttributes<HTMLElement>>>;
-};
+import { Meta, StoryObj } from '@storybook/react';
+import { Box } from '.';
+declare const meta: Meta<typeof Box>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Standard: Story;

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,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMlD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;CAkBkB,CAAC;AAE7B,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"}
+{"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,kBAAkB,CAAC;AAElD,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC;AAExB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAgB1B,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"}

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

@@ -1 +1 @@
-{"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;AA0BxD,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAoErE,CAAC"}
+{"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

@@ -9,7 +9,7 @@ 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', 'none'];
+const widthOptions = ['full'];
 const orderOptions = [0, 1, 2];
 export const boxArgTypes = _objectSpread({
   backgroundColour: {

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

@@ -0,0 +1,5 @@
+import type { ElementType } from 'react';
+import type { BoxBasedProps, StyleProps } from './';
+export type BoxStylesProps<E extends ElementType = 'div'> = StyleProps & Omit<BoxBasedProps<E>, 'children'>;
+export declare const boxStyles: <E extends ElementType = "div">({ as, className, ...props }: BoxStylesProps<E>) => string;
+//# sourceMappingURL=boxStyles.d.ts.map

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

@@ -0,0 +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,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAEpD,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,GACrE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AA4BpC,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,6BAItD,cAAc,CAAC,CAAC,CAAC,WA2BnB,CAAC"}

package/dist/components/Box/boxStyles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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";
+const borderColorProps = ['borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'];
+const borderStyleProps = ['borderStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'];
+const borderWidthProps = ['borderWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'];
+export const boxStyles = _ref => {
+  var _as$toString;
+  let {
+      as,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const tagName = (_as$toString = as === null || as === void 0 ? void 0 : as.toString()) !== null && _as$toString !== void 0 ? _as$toString : 'div';
+  const resets = tagName in element ? element[tagName] : '';
+  const hasBorderStyle = borderStyleProps.some(key => !!props[key]);
+  const hasBorderColorOrWidth = [].concat(borderColorProps, borderWidthProps).some(key => !!props[key]);
+  const {
+    sprinklesProps,
+    sprinklesResponsiveProps,
+    sprinklesLegacyColourProps
+  } = filterSprinklesProps(props);
+  if (hasBorderColorOrWidth && !hasBorderStyle) {
+    sprinklesProps['borderStyle'] = 'solid';
+  }
+  return clsx(resets, sprinkles(sprinklesProps), sprinklesResponsive(sprinklesResponsiveProps), sprinklesLegacyColours(sprinklesLegacyColourProps), className);
+};

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

@@ -1,4 +1,4 @@
-export { Box, type Props as BoxProps } from './Box';
-export { useBoxStyles } from './useBoxStyles';
-export type { BoxStyleProps } from './useBoxStyles';
+export * from './Box';
+export * from './useBox';
+export { boxStyles } from './boxStyles';
 //# 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,KAAK,IAAI,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/Box/index.js

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

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

@@ -0,0 +1,22 @@
+import type { ClassValue as ClassName } from 'clsx';
+import type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';
+import type { Sprinkles, SprinklesResponsive, SprinklesLegacyColours } from '../../styles/sprinkles.css';
+export interface BoxBasedProps<E extends ElementType> extends PropsWithChildren {
+    as?: E;
+    className?: ClassName;
+    odComponent?: string;
+}
+export type StyleProps = Sprinkles & SprinklesResponsive & SprinklesLegacyColours;
+export type PolymorphicBoxProps<E extends ElementType, Props = object> = BoxBasedProps<E> & Omit<ComponentPropsWithRef<E>, keyof Props | 'as' | 'className'> & Props;
+export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicBoxProps<E, StyleProps>;
+export type ComponentProps<E extends ElementType> = Omit<ComponentPropsWithRef<E>, 'as'>;
+export declare const useBox: <E extends ElementType = "div">({ as, className, odComponent, testId, ...props }: UseBoxProps<E>) => {
+    Component: ElementType;
+    componentProps: {
+        className: string;
+    } & (Omit<UseBoxProps<E>, "className" | "as" | "odComponent" | "testId"> extends infer T extends object ? { [K in keyof T]: Omit<UseBoxProps<E>, "className" | "as" | "odComponent" | "testId">[K]; } : never) & {
+        [key: string]: string;
+    };
+    SemanticChild: ElementType | undefined;
+};
+//# sourceMappingURL=useBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AACpD,OAAO,KAAK,EACX,qBAAqB,EACrB,WAAW,EAEX,iBAAiB,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACX,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,MAAM,4BAA4B,CAAC;AAUpC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,WAAW,CACnD,SAAQ,iBAAiB;IAKzB,EAAE,CAAC,EAAE,CAAC,CAAC;IAIP,SAAS,CAAC,EAAE,SAAS,CAAC;IAItB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAGD,MAAM,MAAM,UAAU,GAAG,SAAS,GACjC,mBAAmB,GACnB,sBAAsB,CAAC;AAGxB,MAAM,MAAM,mBAAmB,CAC9B,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,IACX,aAAa,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,IAAI,GAAG,WAAW,CAAC,GAChE,KAAK,CAAC;AAGP,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,mBAAmB,CAC3E,CAAC,EACD,UAAU,CACV,CAAC;AAGF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CACvD,qBAAqB,CAAC,CAAC,CAAC,EACxB,IAAI,CACJ,CAAC;AAcF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,kDAMnD,WAAW,CAAC,CAAC,CAAC;;;;;;;;CAoChB,CAAC"}

package/dist/components/Box/useBox.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["as", "className", "odComponent", "testId"];
+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 { useDeepCompareMemo } from "../../hooks/index.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { filterNonSprinklesProps } from "../../utils/sprinkles.js";
+import { boxStyles } from "./boxStyles.js";
+const DEFAULT_TAG = 'div';
+const LIST_ITEM_TAG = 'li';
+const LIST_TAGS = ['ul', 'ol'];
+const OD_COMPONENT_ATTR = 'od-component';
+export const useBox = _ref => {
+  let {
+      as,
+      className,
+      odComponent,
+      testId
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : DEFAULT_TAG;
+  const isList = LIST_TAGS.includes(Component);
+  const SemanticChild = isList ? LIST_ITEM_TAG : undefined;
+  const style = useDeepCompareMemo(() => boxStyles(_objectSpread({
+    as,
+    className
+  }, props)), [className, props]);
+  const remainingProps = useDeepCompareMemo(() => _objectSpread(_objectSpread({}, filterNonSprinklesProps(props)), dataAttrs({
+    [OD_COMPONENT_ATTR]: odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
+    testId
+  })), [props]);
+  return {
+    Component,
+    componentProps: _objectSpread({
+      className: style
+    }, remainingProps),
+    SemanticChild
+  };
+};

package/dist/components/BulletText/BulletText.d.ts

@@ -1,10 +1,9 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { BoxStyleProps } from '../Box';
-export interface Props extends Partial<Pick<BoxStyleProps, 'as' | 'is'>> {
+import React, { type ElementType, type ReactNode } from 'react';
+import { type BoxBasedProps } from '../Box';
+export interface Props<E extends ElementType> extends BoxBasedProps<E> {
     bullet?: ReactNode;
     variant?: 'primary' | 'secondary';
-    children?: ReactNode;
 }
-export declare const BulletText: FunctionComponent<Props>;
+export declare const BulletText: <E extends ElementType>({ as, variant, children, bullet: Bullet, }: Props<E>) => React.JSX.Element;
 export default BulletText;
 //# sourceMappingURL=BulletText.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAO,aAAa,EAAE,MAAM,QAAQ,CAAC;AAM5C,MAAM,WAAW,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA2C/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,aAAa,EAAO,MAAM,QAAQ,CAAC;AAMjD,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,EAAE,4CAK/C,KAAK,CAAC,CAAC,CAAC,sBAqCV,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/BulletText/BulletText.js

@@ -1,8 +1,7 @@
 "use strict";
 
 import clsx from 'clsx';
-import * as React from 'react';
-import { isValidElement } from 'react';
+import React, { isValidElement } from 'react';
 import { Box } from "../Box/index.js";
 import { Inline } from "../Inline/index.js";
 import { Text } from "../Text/index.js";
@@ -10,17 +9,16 @@ import * as styles from "./BulletText.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BulletText = _ref => {
   let {
+    as,
     variant = 'primary',
     children,
-    as = 'div',
-    is: Component = as,
     bullet: Bullet = '•'
   } = _ref;
   return _jsxs(Inline, {
     noWrap: true,
     space: "3",
-    is: Component,
-    alignX: "flexStart",
+    as: as,
+    alignX: "flex-start",
     alignY: "center",
     children: [isValidElement(Bullet) ? _jsx(Box, {
       position: "relative",
@@ -42,14 +40,14 @@ export const BulletText = _ref => {
           [styles.primaryText]: variant === 'primary',
           [styles.secondaryText]: variant !== 'primary'
         }),
-        is: "span",
+        as: "span",
         size: "2",
         children: Bullet
       })
     }), _jsx(Box, {
       flexGrow: 1,
       children: _jsx(Text, {
-        is: "span",
+        as: "span",
         size: "4",
         display: "block",
         children: children

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BulletText } from '.';
 declare const meta: {
     title: string;
-    component: React.FunctionComponent<import("./BulletText").Props>;
+    component: <E extends React.ElementType>({ as, variant, children, bullet: Bullet, }: import("./BulletText").Props<E>) => React.JSX.Element;
     args: {
         as: "div";
         children: string;

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

@@ -1 +1 @@
-{"version":3,"file":"BulletText.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAE/B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;CAoByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC"}
+{"version":3,"file":"BulletText.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAE/B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;CAoByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAC"}