@autoguru/overdrive 4.43.7 → 4.43.8-next.1

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,KAAM,SAAQ,iBAAiB;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAsE1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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;AAKrE,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,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,CAoE1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -4,12 +4,12 @@ import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowClo
 import clsx from 'clsx';
 import * as React from 'react';
 import { sprinkles } from "../../styles/index.js";
+import { sprinklesLegacyText } from "../../styles/typography.css.js";
 import { Box } from "../Box/Box.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 { useTextStyles } from "../Text/useTextStyles.js";
 import * as styles from "./Alert.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const iconMapForIntent = {
@@ -27,14 +27,10 @@ export const Alert = _ref => {
     onRequestClose,
     dismissible = typeof onRequestClose === 'function'
   } = _ref;
-  const dismissBtnStyles = useTextStyles({
-    colour: 'muted'
-  });
-  const intentColourStyles = useTextStyles({
-    colour: intent
-  });
   return _jsxs(Box, {
-    className: clsx(className, intentColourStyles, {
+    className: clsx(className, sprinklesLegacyText({
+      color: intent
+    }), {
       [styles.contained]: !inline
     }),
     role: "alert",
@@ -46,6 +42,7 @@ export const Alert = _ref => {
     borderRadius: "1",
     boxShadow: inline ? 'none' : '4',
     padding: "2",
+    odComponent: "alert",
     children: [_jsx(IntentStripe, {
       intent: intent
     }), _jsxs(Box, {
@@ -64,7 +61,7 @@ export const Alert = _ref => {
       }), _jsx(Box, {
         alignSelf: "center",
         width: "auto",
-        className: useTextStyles({
+        className: sprinkles({
           colour: 'dark'
         }),
         children: typeof children === 'string' ? _jsx(Text, {
@@ -80,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"
           })

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

@@ -1,6 +1,7 @@
 import { IconType } from '@autoguru/icons';
 import { AnchorHTMLAttributes, ElementType, FunctionComponent, ReactElement, ReactNode } from 'react';
-export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'style' | 'is'> {
+import { BoxProps } from '../Box/Box';
+export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'style' | 'is'>, Pick<BoxProps, 'testId'> {
     className?: string;
     is?: ElementType | ReactElement;
     disabled?: boolean;

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,CAsC3C,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;AAKf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOtC,MAAM,WAAW,KAChB,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,CAC3B,EACD,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;IACzB,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,CA6C3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Anchor/Anchor.js

@@ -2,17 +2,18 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "is", "disabled", "children", "icon"];
+const _excluded = ["className", "is", "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 clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, isValidElement } from 'react';
-import { componentStyles } from "../../styles/index.js";
+import { componentStyles } from "../../styles/componentStyles.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/Icon.js";
 import { Inline } from "../Inline/Inline.js";
 import { Text } from "../Text/Text.js";
-import { useTextStyles } from "../Text/useTextStyles.js";
 import * as styles from "./Anchor.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Anchor = _ref => {
@@ -20,28 +21,31 @@ export const Anchor = _ref => {
       className = '',
       is: Component = 'a',
       disabled = false,
+      testId,
       children,
       icon
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const textStyles = useTextStyles({
-    colour: 'link'
-  });
-  const props = _objectSpread({
+  const props = _objectSpread(_objectSpread({
     className: clsx(componentStyles({
       as: Component,
+      colour: 'link',
       display: 'inline'
-    }), styles.root, textStyles, className),
+    }), styles.root, className),
     disabled
-  }, rest);
+  }, dataAttrs({
+    testid: testId
+  })), rest);
   const childs = _jsxs(Inline, {
     space: "2",
     children: [icon && _jsx(Icon, {
       icon: icon,
       size: "small",
-      className: textStyles
+      className: sprinkles({
+        colour: 'link'
+      })
     }), _jsx(Text, {
-      fontWeight: "bold",
+      weight: "bold",
       size: "4",
       colour: "link",
       children: children

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

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { WithTestId } from '../../types';
+import { type BoxProps } from '../Box/Box';
 import type { StyledBadgeProps } from './Badge.css';
 type Colours = Exclude<StyledBadgeProps['colour'], undefined>;
-export interface BadgeProps {
+export interface BadgeProps extends Pick<BoxProps, '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,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGhD,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,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAE3D,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,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,16 +1,11 @@
-import { type ClassValue as ClassName } from 'clsx';
-import type { AllHTMLAttributes, ElementType, PropsWithChildren, ReactNode } from 'react';
+import type { AllHTMLAttributes, ElementType, PropsWithChildren } from 'react';
 import React from 'react';
-import { type BoxStylesProps } from './newBox/boxStyles';
-export interface CommonBoxProps extends PropsWithChildren {
-    className?: ClassName;
-    odComponent?: string;
-    testId?: string;
+import { type ComponentStylesProps } from '../../styles/componentStyles';
+import { OdComponent, TestId } from '../../types';
+export interface CommonBoxProps extends OdComponent, PropsWithChildren, TestId {
 }
-export interface BoxProps extends CommonBoxProps, Omit<BoxStylesProps, 'as'>, Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'> {
+export interface BoxProps extends Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'>, CommonBoxProps, ComponentStylesProps {
     as?: ElementType;
-    is?: ElementType;
-    children?: ReactNode;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AAC1D,OAAO,KAAK,EACX,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,MAAM,OAAO,CAAC;AACf,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAKzD,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IAIxD,SAAS,CAAC,EAAE,SAAS,CAAC;IAItB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,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"}
+{"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,oBAAoB,EACzB,MAAM,8BAA8B,CAAC;AACtC,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,oBAAoB;IAErB,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAKD,eAAO,MAAM,GAAG,8EA6Pf,CAAC"}

package/dist/components/Box/Box.js

@@ -2,22 +2,18 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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"];
+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 clsx from 'clsx';
 import React, { forwardRef } from 'react';
-import { borderReset } from "../../styles/element.css.js";
-import { elementResetStyles } from "../../styles/elementStyles.js";
-import { sprinkles } from "../../styles/sprinkles.css.js";
+import { componentStyles } from "../../styles/componentStyles.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,
+      as = 'div',
       children,
-      className: _className,
+      className,
       odComponent,
       testId,
       display,
@@ -99,6 +95,7 @@ export const Box = forwardRef((_ref, ref) => {
       mr,
       mt,
       mx,
+      my,
       margin,
       marginX,
       marginY,
@@ -112,6 +109,7 @@ export const Box = forwardRef((_ref, ref) => {
       pr,
       pt,
       px,
+      py,
       padding,
       paddingX,
       paddingY,
@@ -122,8 +120,9 @@ export const Box = forwardRef((_ref, ref) => {
     } = _ref,
     allOtherProps = _objectWithoutProperties(_ref, _excluded);
   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({
+  const allClasses = componentStyles({
+    as,
+    className,
     display,
     height,
     maxWidth,
@@ -203,6 +202,7 @@ export const Box = forwardRef((_ref, ref) => {
     mr,
     mt,
     mx,
+    my,
     margin,
     marginX,
     marginY,
@@ -216,6 +216,7 @@ export const Box = forwardRef((_ref, ref) => {
     pr,
     pt,
     px,
+    py,
     padding,
     paddingX,
     paddingY,
@@ -224,12 +225,11 @@ export const Box = forwardRef((_ref, ref) => {
     paddingRight,
     paddingTop
   });
-  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
+    testid: testId
   })), {}, {
-    className: className,
+    className: allClasses,
     ref: ref,
     children: children
   }));

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

@@ -1,4 +1,4 @@
 export { Box, type BoxProps } from './Box';
-export { useBoxStyles } from './useBoxStyles';
-export type { BoxStyleProps } from './useBoxStyles';
+export { componentStyles as useBoxStyles } from '../../styles/componentStyles';
+export type { ComponentStylesProps as BoxStyleProps } from '../../styles/componentStyles';
 //# 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,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,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,eAAe,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC/E,YAAY,EAAE,oBAAoB,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/components/Box/index.js

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

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

@@ -1,6 +1,9 @@
 import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactElement } from 'react';
+import { type ComponentStylesProps } from '../../../styles/componentStyles';
+import type { Sprinkles } from '../../../styles/sprinkles.css';
 import type { CommonBoxProps } from '../Box';
-import { type StyleProps } from './boxStyles';
+export type BoxStylesProps<E extends ElementType = 'div'> = AsPolyProp<E> & Pick<ComponentStylesProps, 'className'> & Sprinkles;
+export type BoxStylesReturn<P extends object> = [string, P];
 export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
 export type AsPolyProp<C extends ElementType> = {
     as?: C | ReactElement;
@@ -10,8 +13,8 @@ export type RefPolyProp<C extends ElementType> = {
 };
 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>>;
-export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, CommonBoxProps & StyleProps>;
-export type BoxLikeProps<E extends ElementType, P = object> = PolymorphicComponentProps<E, Omit<StyleProps, keyof P> & CommonBoxProps & P>;
+export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, CommonBoxProps & Sprinkles>;
+export type BoxLikeProps<E extends ElementType, P = object> = PolymorphicComponentProps<E, Omit<Sprinkles, keyof P> & CommonBoxProps & P>;
 export declare const useBox: <E extends ElementType = "div">({ as: _as, className: _className, odComponent, testId, ...props }: UseBoxProps<E>) => {
     Component: ElementType;
     componentProps: ComponentPropsWithRef<E>;

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

@@ -1 +1 @@
-{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,EAA8B,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAS1E,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAC/C,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAGjC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,EAAE,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC;CAGtB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI;IAChD,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CACxB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAO9E,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;AAG1D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACpD,yBAAyB,CAAC,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,CAAC;AAM3D,MAAM,MAAM,YAAY,CACvB,CAAC,SAAS,WAAW,EACrB,CAAC,GAAG,MAAM,IACP,yBAAyB,CAC5B,CAAC,EACD,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,GAAG,cAAc,GAAG,CAAC,CAC9C,CAAC;AAYF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAMnD,WAAW,CAAC,CAAC,CAAC;;;;;CAmChB,CAAC"}
+{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/useBox.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,oBAAoB,EACzB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAQ7C,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,GACvC,SAAS,CAAC;AAEX,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAG5D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAC/C,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAGjC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,EAAE,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC;CAGtB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI;IAChD,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CACxB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAO9E,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;AAG1D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACpD,yBAAyB,CAAC,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC;AAM1D,MAAM,MAAM,YAAY,CACvB,CAAC,SAAS,WAAW,EACrB,CAAC,GAAG,MAAM,IACP,yBAAyB,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,cAAc,GAAG,CAAC,CAAC,CAAC;AAYhF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAMnD,WAAW,CAAC,CAAC,CAAC;;;;;CAmChB,CAAC"}

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

@@ -7,8 +7,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { isValidElement } from 'react';
 import { useDeepCompareMemo } from "../../../hooks/index.js";
+import { componentStyles } from "../../../styles/componentStyles.js";
 import { dataAttrs } from "../../../utils/dataAttrs.js";
-import { boxStylesWithFilteredProps } from "./boxStyles.js";
+import { filterPropsWithStyles } from "../../../utils/sprinkles.js";
 const DEFAULT_TAG = 'div';
 const LIST_ITEM_TAG = 'li';
 const LIST_TAGS = ['ul', 'ol'];
@@ -29,13 +30,23 @@ export const useBox = _ref => {
   const {
     className,
     baseProps
-  } = useDeepCompareMemo(() => boxStylesWithFilteredProps(_objectSpread({
-    as,
-    className: _className
-  }, props)), [as, _className, props]);
+  } = useDeepCompareMemo(() => {
+    const {
+      sprinklesProps,
+      baseProps
+    } = filterPropsWithStyles(props);
+    const className = componentStyles(_objectSpread({
+      as,
+      className: _className
+    }, sprinklesProps));
+    return {
+      className,
+      baseProps
+    };
+  }, [as, _className, props]);
   const componentProps = _objectSpread(_objectSpread(_objectSpread({}, baseProps), dataAttrs({
     [OD_COMPONENT_ATTR]: odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
-    testId
+    testid: testId
   })), {}, {
     className
   });

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

@@ -1 +1 @@
-{"version":3,"file":"BulletList.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletList/BulletList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAOjE,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAmBzD,CAAC"}
+{"version":3,"file":"BulletList.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletList/BulletList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAOjE,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoBzD,CAAC"}

package/dist/components/BulletList/BulletList.js

@@ -18,6 +18,7 @@ export const BulletList = _ref => {
     className: clsx(className, styles.root, {
       [styles.firstOccurrence]: stack === -1
     }),
+    odComponent: "bullet-list",
     children: _jsx(BulletListContext.Provider, {
       value: stack + 1 >= bulletMap.length ? 0 : stack + 1,
       children: children

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import { IconType } from '@autoguru/icons';
 import * as React from 'react';
 import { type AriaAttributes, type ComponentPropsWithRef, type ElementType, type ReactElement } from 'react';
+import type { TestId } from '../../types';
 import type { StyledButtonProps } from './Button.css';
 type ButtonPrimitive = ComponentPropsWithRef<'button'>;
 type AllowedChildren = string | IconType;
@@ -8,7 +9,7 @@ declare const defaultEnglish: {
     readonly loading: "loading";
 };
 type TextContent = keyof typeof defaultEnglish;
-export interface ButtonProps extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'>, StyledButtonProps {
+export interface ButtonProps extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'>, StyledButtonProps, TestId {
     children: AllowedChildren | AllowedChildren[];
     disabled?: boolean;
     is?: ElementType | ReactElement;
@@ -18,6 +19,6 @@ export interface ButtonProps extends Pick<ButtonPrimitive, 'id' | 'onClick' | 't
     withDoubleClicks?: boolean;
     lang?: Partial<Record<TextContent, string>>;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & import("../../types").TestId & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EASN,KAAK,cAAc,EAEnB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAElE,KAAK,eAAe,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACvD,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,WAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,EAClC,iBAAiB;IAClB,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAI9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAItB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAI3B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AA2BD,eAAO,MAAM,MAAM,sHA6KlB,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EASN,KAAK,cAAc,EAEnB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAO1C,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAElE,KAAK,eAAe,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACvD,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,WAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,EAClC,iBAAiB,EACjB,MAAM;IACP,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAI9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAItB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAI3B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AA2BD,eAAO,MAAM,MAAM,uFA4KlB,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/components/Button/Button.js

@@ -7,11 +7,11 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { componentStyles } from "../../styles/index.js";
+import { typographyStyles } from "../../styles/typography.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Box } from "../Box/Box.js";
 import { Icon } from "../Icon/Icon.js";
 import { ProgressSpinner } from "../ProgressSpinner/ProgressSpinner.js";
-import { useTextStyles } from "../Text/useTextStyles.js";
 import * as styles from "./Button.css.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DOUBLE_CLICK_DETECTION_PERIOD = 700;
@@ -78,13 +78,12 @@ export const Button = forwardRef((_ref, ref) => {
     if (rounded) return 'rounded';
     return 'default';
   }, [isSingleIconChild, rounded]);
-  const props = {
+  const props = _objectSpread(_objectSpread({
     type: Component === 'button' ? type : undefined,
     id,
     onClick,
     disabled: disabled || isLoading,
     'aria-label': isLoading ? language.loading : ariaLabel,
-    'data-loading': isLoading ? '' : undefined,
     className: clsx(componentStyles({
       as: Component,
       display: 'inline-block',
@@ -96,18 +95,22 @@ export const Button = forwardRef((_ref, ref) => {
       paddingX: getPadding(size, isLoading),
       width: isFullWidth ? 'full' : undefined,
       pointerEvents: functionallyDisabled ? 'none' : undefined
-    }), useTextStyles({
+    }), typographyStyles({
       colour: 'white',
-      fontWeight: fontWeight[size],
+      weight: fontWeight[size],
       size: fontSize[size]
     }), styles.button({
       size,
       shape,
       intent: variant,
       minimal
-    }), className),
+    }), className)
+  }, dataAttrs({
+    loading: isLoading,
+    testid: testId
+  })), {}, {
     ref
-  };
+  });
   const buttonContents = useMemo(() => {
     var _maybeIconProps$size;
     return _jsx(_Fragment, {
@@ -146,16 +149,13 @@ export const Button = forwardRef((_ref, ref) => {
       className: [styles.body, styles.hiddenContent],
       children: buttonContents
     })]
-  }) : _jsx(Box, _objectSpread(_objectSpread({
+  }) : _jsx(Box, {
     height: "full",
     alignItems: "center",
     justifyContent: "center",
-    className: styles.body
-  }, dataAttrs({
-    'data-testid': testId
-  })), {}, {
+    className: styles.body,
     children: buttonContents
-  }));
+  });
   return isValidElement(Component) ? cloneElement(Component, _objectSpread({}, props), child) : createElement(Component, _objectSpread({}, props), child);
 });
 Button.displayName = 'Button';

package/dist/components/Columns/Column.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "width", "alignSelf", "is", "noShrink", "grow", "order"];
+const _excluded = ["className", "children", "width", "alignSelf", "as", "noShrink", "grow", "order"];
 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';
@@ -18,7 +18,7 @@ export const Column = forwardRef((_ref, ref) => {
       children,
       width,
       alignSelf,
-      is,
+      as,
       noShrink = false,
       grow = false,
       order
@@ -43,7 +43,7 @@ export const Column = forwardRef((_ref, ref) => {
     })],
     children: _jsx(Box, _objectSpread(_objectSpread({
       ref: ref,
-      as: is,
+      as: as,
       display: "flex",
       width: "full",
       height: "full",

package/dist/components/Columns/Columns.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "space", "spaceX", "spaceY", "noWrap", "wrappingDirection", "align", "is", "as"];
+const _excluded = ["className", "children", "space", "spaceX", "spaceY", "noWrap", "wrappingDirection", "align", "as"];
 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';
@@ -24,8 +24,7 @@ export const Columns = forwardRef((_ref, ref) => {
       noWrap,
       wrappingDirection = 'default',
       align = 'stretch',
-      is,
-      as = is
+      as
     } = _ref,
     boxProps = _objectWithoutProperties(_ref, _excluded);
   const resolvedSpaceX = useMemo(() => spaceX || space || ['none'], [space, spaceX]);
@@ -41,7 +40,8 @@ export const Columns = forwardRef((_ref, ref) => {
       align,
       noWrap,
       wrappingDirection
-    }), className)
+    }), className),
+    odComponent: "columns"
   }, boxProps), {}, {
     children: _jsx(ColumnContext.Provider, {
       value: useMemo(() => ({