@autoguru/overdrive 4.43.0-next.4 → 4.43.0-next.5

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

@@ -1,5 +1,5 @@
 import type { ElementType } from 'react';
-import type { AsPolyProp, CustomProps, StyleProps } from './';
-export type BoxStylesProps<E extends ElementType = 'div'> = AsPolyProp<E> & Pick<CustomProps, 'className'> & StyleProps;
+import type { AsPolyProp, CommonBoxProps, StyleProps } from './';
+export type BoxStylesProps<E extends ElementType = 'div'> = AsPolyProp<E> & Pick<CommonBoxProps, 'className'> & StyleProps;
 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

@@ -1 +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,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAE9D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,GAC9B,UAAU,CAAC;AA4BZ,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,6BAItD,cAAc,CAAC,CAAC,CAAC,WA4BnB,CAAC"}
+{"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,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAEjE,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,GACjC,UAAU,CAAC;AA4BZ,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,6BAItD,cAAc,CAAC,CAAC,CAAC,WA4BnB,CAAC"}

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

@@ -2,7 +2,7 @@ import type { ClassValue as ClassName } from 'clsx';
 import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactElement } from 'react';
 import type { Sprinkles, SprinklesResponsive, SprinklesLegacyColours } from '../../styles/sprinkles.css';
 export type StyleProps = Sprinkles & SprinklesResponsive & SprinklesLegacyColours;
-export interface CustomProps extends PropsWithChildren {
+export interface CommonBoxProps extends PropsWithChildren {
     className?: ClassName;
     odComponent?: string;
     testId?: string;
@@ -16,7 +16,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, CustomProps & StyleProps>;
+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 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/useBox.d.ts.map

@@ -1 +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,EAEN,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACX,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,UAAU,GAAG,SAAS,GACjC,mBAAmB,GACnB,sBAAsB,CAAC;AAMxB,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IAIrD,SAAS,CAAC,EAAE,SAAS,CAAC;IAItB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,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;CACtB,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,WAAW,GAAG,UAAU,CAAC,CAAC;AAkBxD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAMnD,WAAW,CAAC,CAAC,CAAC;;;;;CA2ChB,CAAC"}
+{"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,EAEN,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACX,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,UAAU,GAAG,SAAS,GACjC,mBAAmB,GACnB,sBAAsB,CAAC;AAMxB,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,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;CACtB,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;AAkBF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAMnD,WAAW,CAAC,CAAC,CAAC;;;;;CA2ChB,CAAC"}

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

@@ -1,23 +1,24 @@
-import { IconType } from '@autoguru/icons';
-import * as React from 'react';
-import { type AriaAttributes, type ComponentPropsWithRef, type ElementType, type ReactElement } from 'react';
+import React, { type ComponentRef, type ForwardedRef, type ElementType, type ReactElement } from 'react';
+import { BoxLikeProps } from '../Box';
 import type { StyledButtonProps } from './Button.css';
-type ButtonPrimitive = ComponentPropsWithRef<'button'>;
-type AllowedChildren = string | IconType;
 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 {
-    children: AllowedChildren | AllowedChildren[];
+export interface ButtonProps extends StyledButtonProps {
     disabled?: boolean;
-    is?: ElementType | ReactElement;
     isLoading?: boolean;
     isFullWidth?: boolean;
     rounded?: boolean;
     withDoubleClicks?: boolean;
     lang?: Partial<Record<TextContent, string>>;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & import("../../types").TestId & React.RefAttributes<HTMLButtonElement>>;
+export type ButtonPolyProps<E extends React.ElementType> = BoxLikeProps<E, ButtonProps>;
+export type ButtonForwardRefReturn = (<E extends ElementType = 'button'>(props: ButtonPolyProps<E> & {
+    ref?: ForwardedRef<ComponentRef<E>>;
+}) => ReactElement | null) & {
+    displayName?: string;
+};
+export declare const Button: ButtonForwardRefReturn;
 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;AAWf,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;AAiCD,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,KAAK,EAAE,EAEb,KAAK,YAAY,EACjB,KAAK,YAAY,EAQjB,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,YAAY,EAA4B,MAAM,QAAQ,CAAC;AAMrE,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAIlE,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IAIrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAGD,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,YAAY,CACtE,CAAC,EACD,WAAW,CACX,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,CAAC,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EACtE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC/D,YAAY,GAAG,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAiCrD,eAAO,MAAM,MAAM,EAqLd,sBAAsB,CAAC;AAI5B,eAAe,MAAM,CAAC"}

package/dist/components/Button/Button.js

@@ -1,13 +1,13 @@
 "use strict";
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["as", "children", "className", "disabled", "id", "withDoubleClicks", "isLoading", "isFullWidth", "lang", "minimal", "onClick", "rounded", "size", "type", "variant", "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 clsx from 'clsx';
-import * as React from 'react';
-import { cloneElement, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { dataAttrs } from "../../utils/dataAttrs.js";
-import { Box, boxStyles } from "../Box/index.js";
+import { Box, useBox } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
 import { ProgressSpinner } from "../ProgressSpinner/index.js";
 import { useTextStyles } from "../Text/index.js";
@@ -35,24 +35,27 @@ const fontWeight = {
 };
 export const Button = forwardRef((_ref, ref) => {
   let {
-    children,
-    className = '',
-    disabled = false,
-    id,
-    is: Component = 'button',
-    withDoubleClicks = false,
-    isLoading = false,
-    isFullWidth = false,
-    lang,
-    minimal = false,
-    onClick: incomingOnClick,
-    rounded = false,
-    size = 'medium',
-    type = 'button',
-    variant = 'secondary',
-    'aria-label': ariaLabel,
-    testId
-  } = _ref;
+      as = 'button',
+      children,
+      className,
+      disabled = false,
+      id,
+      withDoubleClicks = false,
+      isLoading = false,
+      isFullWidth = false,
+      lang,
+      minimal = false,
+      onClick: incomingOnClick,
+      rounded = false,
+      size = 'medium',
+      type,
+      variant = 'secondary',
+      testId
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    'aria-label': ariaLabel
+  } = props;
   const language = _objectSpread(_objectSpread({}, defaultEnglish), lang);
   const {
     isSingleIconChild,
@@ -77,25 +80,15 @@ export const Button = forwardRef((_ref, ref) => {
     if (rounded) return 'rounded';
     return 'default';
   }, [isSingleIconChild, rounded]);
-  const props = {
-    type: Component === 'button' ? type : undefined,
-    id,
-    onClick,
-    disabled: disabled || isLoading,
-    'aria-label': isLoading ? language.loading : ariaLabel,
-    'data-loading': isLoading ? '' : undefined,
-    className: clsx(boxStyles({
-      as: typeof Component === 'string' ? Component : undefined,
-      display: 'inline-block',
-      overflow: 'hidden',
-      borderRadius: getBorderRadius(rounded),
-      textAlign: 'center',
-      borderWidth: 'none',
-      paddingY: 'none',
-      paddingX: getPadding(size, isLoading),
-      width: isFullWidth ? 'full' : void 0,
-      pointerEvents: functionallyDisabled ? 'none' : void 0
-    }), useTextStyles({
+  const {
+    Component,
+    componentProps,
+    reactElement
+  } = useBox(_objectSpread(_objectSpread({}, props), {}, {
+    as,
+    borderRadius: getBorderRadius(rounded),
+    borderWidth: 'none',
+    className: [useTextStyles({
       colour: 'white',
       fontWeight: fontWeight[size],
       size: fontSize[size]
@@ -104,9 +97,23 @@ export const Button = forwardRef((_ref, ref) => {
       shape,
       intent: variant,
       minimal
-    }), className),
-    ref
-  };
+    }), className],
+    disabled: disabled || isLoading,
+    display: 'inline-block',
+    id,
+    onClick,
+    overflow: 'hidden',
+    paddingX: getPadding(size, isLoading),
+    paddingY: 'none',
+    pointerEvents: functionallyDisabled ? 'none' : undefined,
+    ref,
+    textAlign: 'center',
+    type: as === 'button' ? type !== null && type !== void 0 ? type : 'button' : undefined,
+    width: isFullWidth ? 'full' : undefined,
+    'aria-label': isLoading ? language.loading : ariaLabel
+  }, dataAttrs({
+    loading: isLoading ? '' : undefined
+  })));
   const buttonContents = useMemo(() => {
     var _maybeIconProps$size;
     return _jsx(_Fragment, {
@@ -155,7 +162,13 @@ export const Button = forwardRef((_ref, ref) => {
   })), {}, {
     children: buttonContents
   }));
-  return isValidElement(Component) ? cloneElement(Component, _objectSpread({}, props), child) : createElement(Component, _objectSpread({}, props), child);
+  if (reactElement) {
+    cloneElement(reactElement, componentProps, child);
+  }
+  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    ref: ref,
+    children: child
+  }));
 });
 Button.displayName = 'Button';
 export default Button;

package/dist/components/Columns/Columns.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { type ComponentRef, type ElementType, type ForwardedRef, type ReactElement } from 'react';
 import { SprinklesResponsive } from '../../styles/sprinkles.css';
-import { type UseBoxProps } from '../Box';
+import { type BoxLikeProps } from '../Box';
 import * as styles from './Columns.css';
 type ResponsiveSpace = SprinklesResponsive['padding'];
-export interface ColumnsProps extends UseBoxProps {
+export interface ColumnsProps {
     align?: styles.ColumnsStyle['align'];
     noWrap?: styles.ColumnsStyle['noWrap'];
     space?: ResponsiveSpace;
@@ -11,12 +11,18 @@ export interface ColumnsProps extends UseBoxProps {
     spaceY?: ResponsiveSpace;
     wrappingDirection?: styles.ColumnsStyle['wrappingDirection'];
 }
+export type ColumnsPolyProps<E extends React.ElementType> = BoxLikeProps<E, ColumnsProps>;
+export type ColumnsForwardRefReturn = (<E extends ElementType = 'div'>(props: ColumnsPolyProps<E> & {
+    ref?: ForwardedRef<ComponentRef<E>>;
+}) => ReactElement | null) & {
+    displayName?: string;
+};
 interface ColumnContextValue {
     spaceXCls: string;
     spaceYCls: string;
     isList: boolean;
 }
 export declare const ColumnContext: React.Context<ColumnContextValue | null>;
-export declare const Columns: React.ForwardRefExoticComponent<Omit<ColumnsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Columns: ColumnsForwardRefReturn;
 export default Columns;
 //# sourceMappingURL=Columns.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAMhF,OAAO,EACN,mBAAmB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAElD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,KAAK,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,WAAW;IAIhD,KAAK,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAIrC,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAIvC,KAAK,CAAC,EAAE,eAAe,CAAC;IAIxB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,iBAAiB,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;CAC7D;AAED,UAAU,kBAAkB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAgC5E,eAAO,MAAM,OAAO,kGA8EnB,CAAC;AAIF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKb,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAMf,OAAO,EACN,mBAAmB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,YAAY,EAA4B,MAAM,QAAQ,CAAC;AAErE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,KAAK,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAEtD,MAAM,WAAW,YAAY;IAI5B,KAAK,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAIrC,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAIvC,KAAK,CAAC,EAAE,eAAe,CAAC;IAIxB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,iBAAiB,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;CAC7D;AAGD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,YAAY,CACvE,CAAC,EACD,YAAY,CACZ,CAAC;AAGF,MAAM,MAAM,uBAAuB,GAAG,CAAC,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EACpE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAChE,YAAY,GAAG,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,UAAU,kBAAkB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAgC5E,eAAO,MAAM,OAAO,EA8Ef,uBAAuB,CAAC;AAI7B,eAAe,OAAO,CAAC"}

package/dist/components/Columns/Columns.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const ColumnContext = createContext(null);
 export const Columns = forwardRef((_ref, ref) => {
   let {
-      as,
+      as = 'div',
       className,
       children,
       space,
@@ -40,7 +40,8 @@ export const Columns = forwardRef((_ref, ref) => {
       noWrap,
       wrappingDirection
     }), marginLeftFix, marginTopFix, className],
-    odComponent: 'columns'
+    odComponent: 'columns',
+    ref
   }));
   const contextValue = useMemo(() => ({
     spaceXCls: sprinklesResponsive({
@@ -52,9 +53,7 @@ export const Columns = forwardRef((_ref, ref) => {
     isList: typeof as === 'string' && ['ul', 'ol'].includes(as)
   }), [as, resolvedSpaceX, resolvedSpaceY]);
   if (reactElement) {
-    return cloneElement(reactElement, _objectSpread(_objectSpread({}, componentProps), {}, {
-      ref
-    }), _jsx(ColumnContext.Provider, {
+    return cloneElement(reactElement, componentProps, _jsx(ColumnContext.Provider, {
       value: contextValue,
       children: children
     }));

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

@@ -5,34 +5,21 @@ declare const meta: {
     title: string;
     component: React.FunctionComponent<import("./DropDown").Props>;
     decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
         children: React.ReactNode;
         label: string;
         icon?: import("@autoguru/icons").IconType | undefined;
         isOpen?: boolean | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
-        size?: import("../Button/Button.css").ButtonSize | undefined;
-        disabled?: boolean | undefined;
-        key?: React.Key | null | undefined;
-        id?: string | undefined | undefined;
-        ref?: React.Ref<HTMLButtonElement> | undefined;
-        className?: string | undefined | undefined;
-        testId?: string | undefined;
-        lang?: Partial<Record<"loading", string>> | undefined;
-        "aria-label"?: string | undefined | undefined;
-        type?: "submit" | "reset" | "button" | undefined | undefined;
-        rounded?: boolean | undefined;
-        minimal?: import("../Button/Button.css").ButtonMinimal | undefined;
-        isLoading?: boolean | undefined;
-        isFullWidth?: boolean | undefined;
-        withDoubleClicks?: boolean | undefined;
-        variant?: import("../Button/Button.css").ButtonIntent | undefined;
+        onClick?: ComponentProps<typeof Button>["onClick"];
         alignment: any;
     }>) => React.JSX.Element)[];
     args: {
         label: string;
         children: undefined;
-        size: "medium";
-        variant: "primary";
+        size: string;
+        variant: string;
     };
     argTypes: {
         size: {

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAMnC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCF,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,EAAE;;;;;;;CAoBjB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC"}
+{"version":3,"file":"DropDown.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAMnC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCF,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,EAAE;;;;;;;CAoBjB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC"}

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

@@ -17,7 +17,7 @@ declare const _default: {
             disable: boolean;
         };
     };
-    argTypes: Partial<import("@storybook/react").ArgTypes<import("..").CustomProps & {
+    argTypes: Partial<import("@storybook/react").ArgTypes<import("..").CommonBoxProps & {
         borderRadius?: "1" | "none" | "min" | "sm" | "md" | "lg" | "xl" | "2xl" | "pill" | "full" | undefined;
         borderBottomColor?: "body" | "accent" | "hard" | "soft" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
         borderLeftColor?: "body" | "accent" | "hard" | "soft" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
@@ -391,7 +391,7 @@ declare const _default: {
         } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | null>;
     } & import("../../styles/sprinkles.css").SprinklesLegacyColours & import("..").AsPolyProp<React.ElementType> & import("..").RefPolyProp<React.ElementType> & {
         children?: React.ReactNode | undefined;
-    } & Omit<Omit<any, "ref">, "colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "userSelect" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "bg" | "fg" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "borderColour" | "gridColumns" | "p" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml" | "as" | keyof import("..").CustomProps>>>;
+    } & Omit<Omit<any, "ref">, "colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "userSelect" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "bg" | "fg" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "borderColour" | "gridColumns" | "p" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml" | "as" | keyof import("..").CommonBoxProps>>>;
 };
 export default _default;
 type Story = StoryObj<typeof LoadingBox>;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Section } from '.';
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<import("../Box").CustomProps & {
+    component: React.FunctionComponent<import("../Box").CommonBoxProps & {
         borderRadius?: "1" | "none" | "min" | "sm" | "md" | "lg" | "xl" | "2xl" | "pill" | "full" | undefined;
         borderBottomColor?: "body" | "accent" | "hard" | "soft" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
         borderLeftColor?: "body" | "accent" | "hard" | "soft" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
@@ -377,7 +377,7 @@ declare const _default: {
         } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | null>;
     } & import("../../styles/sprinkles.css").SprinklesLegacyColours & import("../Box").AsPolyProp<"div"> & import("../Box").RefPolyProp<"div"> & {
         children?: React.ReactNode | undefined;
-    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "userSelect" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "bg" | "fg" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "borderColour" | "gridColumns" | "p" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml" | "as" | keyof import("../Box").CustomProps> & import("./Section").SectionProps>;
+    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "userSelect" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "bg" | "fg" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "borderColour" | "gridColumns" | "p" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml" | "as" | keyof import("../Box").CommonBoxProps> & import("./Section").SectionProps>;
     argTypes: {
         paddingX: import("@storybook/core/csf").InputType | undefined;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.43.0-next.4",
+	"version": "4.43.0-next.5",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",