@autoguru/overdrive 4.43.6-next.0 → 4.43.6-next.10

package/dist/components/Alert/Alert.js

@@ -3,8 +3,8 @@
 import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
+import { sprinkles } from "../../styles/index.js";
 import { Box } from "../Box/Box.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";
@@ -52,11 +52,11 @@ export const Alert = _ref => {
       display: "flex",
       gap: "2",
       children: [_jsx(Box, {
-        alignSelf: "flex-start",
+        alignSelf: "start",
         children: _jsx(Icon, {
           icon: iconMapForIntent[intent],
           size: "medium",
-          className: useBoxStyles({
+          className: sprinkles({
             marginY: '2',
             marginLeft: '2'
           })

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;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"}
+{"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,CAsC3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

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/useBoxStyles.js";
+import { componentStyles } from "../../styles/index.js";
 import { Icon } from "../Icon/Icon.js";
 import { Inline } from "../Inline/Inline.js";
 import { Text } from "../Text/Text.js";
@@ -28,10 +28,10 @@ export const Anchor = _ref => {
     colour: 'link'
   });
   const props = _objectSpread({
-    className: clsx(styles.root, textStyles, useBoxStyles({
-      is: typeof Component === 'string' ? Component : undefined,
+    className: clsx(componentStyles({
+      as: Component,
       display: 'inline'
-    }), className),
+    }), styles.root, textStyles, className),
     disabled
   }, rest);
   const childs = _jsxs(Inline, {

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

@@ -1,7 +1,8 @@
 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'> {
+import type { CommonBoxProps } from './newBox/useBox';
+export interface BoxProps extends CommonBoxProps, Omit<BoxStylesProps, 'as'>, Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'> {
     as?: ElementType;
     is?: ElementType;
     children?: ReactNode;

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,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"}
+{"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;AAO1C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,QAChB,SAAQ,cAAc,EACrB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,EAC1B,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;IAEjB,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAKD,eAAO,MAAM,GAAG,8EA8Rf,CAAC"}

package/dist/components/Box/Box.js

@@ -2,65 +2,97 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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"];
+const _excluded = ["is", "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", "margin", "marginX", "marginY", "marginBottom", "marginLeft", "marginRight", "marginTop", "p", "pb", "pl", "pr", "pt", "px", "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 clsx from 'clsx';
 import React, { forwardRef } from 'react';
-import { boxStyles } from "./newBox/boxStyles.js";
+import { borderReset } from "../../styles/reset.css.js";
+import { elementResetStyles } from "../../styles/resetStyles.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Box = forwardRef((_ref, ref) => {
   let {
       is = 'div',
       as = is,
       children,
-      className,
+      className: _className,
+      odComponent,
+      testId,
       display,
-      width,
+      height,
       maxWidth,
       minWidth,
-      height,
-      position,
       overflow,
-      userSelect,
-      textAlign,
+      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,
-      borderColour,
-      borderColourX,
-      borderColourY,
-      borderColourTop,
-      borderColourRight,
-      borderColourBottom,
-      borderColourLeft,
-      borderWidth,
-      borderWidthX,
-      borderWidthY,
+      borderTopStyle,
+      borderTopWidth,
       borderWidthTop,
       borderWidthRight,
       borderWidthBottom,
       borderWidthLeft,
+      borderColour,
+      borderColourX,
+      borderColourY,
+      borderBottomColour,
+      borderLeftColour,
+      borderRightColour,
+      borderTopColour,
+      alignContent,
       alignItems,
-      order,
+      alignSelf,
+      columnGap,
       flexDirection,
       flexGrow,
       flexShrink,
       flexWrap,
-      justifyContent,
-      justifySelf,
       gap,
-      columnGap,
+      gridAutoColumns,
+      gridAutoFlow,
+      gridAutoRows,
+      gridColumns,
+      justifyContent,
+      placeItems,
       rowGap,
+      order,
       m,
       mb,
       ml,
@@ -70,10 +102,10 @@ export const Box = forwardRef((_ref, ref) => {
       margin,
       marginX,
       marginY,
-      marginTop,
       marginBottom,
       marginLeft,
       marginRight,
+      marginTop,
       p,
       pb,
       pl,
@@ -83,60 +115,88 @@ export const Box = forwardRef((_ref, ref) => {
       padding,
       paddingX,
       paddingY,
-      paddingTop,
       paddingBottom,
       paddingLeft,
-      paddingRight
+      paddingRight,
+      paddingTop
     } = _ref,
     allOtherProps = _objectWithoutProperties(_ref, _excluded);
-  const cls = boxStyles({
-    as,
+  const Component = as;
+  const hasBorder = Boolean(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);
+  const styles = sprinkles({
     display,
-    width,
+    height,
     maxWidth,
     minWidth,
-    height,
-    position,
     overflow,
-    userSelect,
-    textAlign,
+    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,
-    borderColour,
-    borderColourX,
-    borderColourY,
-    borderColourTop,
-    borderColourRight,
-    borderColourBottom,
-    borderColourLeft,
-    borderWidth,
-    borderWidthX,
-    borderWidthY,
+    borderTopStyle,
+    borderTopWidth,
     borderWidthTop,
     borderWidthRight,
     borderWidthBottom,
     borderWidthLeft,
+    borderColour,
+    borderColourX,
+    borderColourY,
+    borderBottomColour,
+    borderLeftColour,
+    borderRightColour,
+    borderTopColour,
+    alignContent,
     alignItems,
-    order,
+    alignSelf,
+    columnGap,
     flexDirection,
     flexGrow,
     flexShrink,
     flexWrap,
-    justifyContent,
-    justifySelf,
     gap,
-    columnGap,
+    gridAutoColumns,
+    gridAutoFlow,
+    gridAutoRows,
+    gridColumns,
+    justifyContent,
+    placeItems,
     rowGap,
+    order,
     m,
     mb,
     ml,
@@ -146,10 +206,10 @@ export const Box = forwardRef((_ref, ref) => {
     margin,
     marginX,
     marginY,
-    marginTop,
     marginBottom,
     marginLeft,
     marginRight,
+    marginTop,
     p,
     pb,
     pl,
@@ -159,16 +219,18 @@ export const Box = forwardRef((_ref, ref) => {
     padding,
     paddingX,
     paddingY,
-    paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight
+    paddingRight,
+    paddingTop
   });
-  const Component = as;
-  return _jsx(Component, _objectSpread(_objectSpread({
+  const className = clsx(elementResetStyles(as), hasBorder && borderReset, styles, _className);
+  return _jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, allOtherProps), dataAttrs({
+    'od-component': odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
+    testId
+  })), {}, {
+    className: className,
     ref: ref,
-    className: clsx(cls, className)
-  }, allOtherProps), {}, {
     children: children
   }));
 });