@autoguru/overdrive 4.42.0-next.1 → 4.43.0-next.0

package/dist/components/Button/Button.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { dataAttrs } from "../../utils/dataAttrs.js";
-import { Box, useBoxStyles } from "../Box/index.js";
+import { Box, boxStyles } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
 import { ProgressSpinner } from "../ProgressSpinner/index.js";
 import { useTextStyles } from "../Text/index.js";
@@ -84,9 +84,9 @@ export const Button = forwardRef((_ref, ref) => {
     disabled: disabled || isLoading,
     'aria-label': isLoading ? language.loading : ariaLabel,
     'data-loading': isLoading ? '' : undefined,
-    className: clsx(useBoxStyles({
-      is: typeof Component === 'string' ? Component : undefined,
-      display: 'inlineBlock',
+    className: clsx(boxStyles({
+      as: typeof Component === 'string' ? Component : undefined,
+      display: 'inline-block',
       overflow: 'hidden',
       borderRadius: getBorderRadius(rounded),
       textAlign: 'center',

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAUvD,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC;AAE3B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAKF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAuHF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC;AAE3B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAKF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AA2FF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}

package/dist/components/ColourInput/ColourInput.js

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { warning } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
+import { Box, boxStyles } from "../Box/index.js";
 import { Text } from "../Text/index.js";
 import { withEnhancedInput } from "../private/InputBase/index.js";
 import * as styles from "./ColourInput.css.js";
@@ -36,7 +36,7 @@ export const ColourInput = withEnhancedInput(_ref => {
       display: "flex",
       height: "full",
       alignItems: "center",
-      justifyContent: "spaceAround",
+      justifyContent: "space-around",
       flexShrink: 0,
       pointerEvents: "none",
       position: "absolute",
@@ -49,12 +49,12 @@ export const ColourInput = withEnhancedInput(_ref => {
       })
     }), _jsx(Text, {
       display: "block",
-      className: clsx(styles.valueText, styles.valueTextSize[size], useBoxStyles({
+      className: clsx(styles.valueText, styles.valueTextSize[size], boxStyles({
         position: 'absolute'
       })),
       children: field.value
     }), _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-      is: "input",
+      as: "input",
       type: "color",
       flexGrow: 1
     }, eventHandlers), field), rest), {}, {

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

@@ -1,16 +1,15 @@
-import * as React from 'react';
-import { ComponentProps, ReactNode } from 'react';
-import { ResponsiveProp } from '../../utils/responsiveProps.css';
-import { Box } from '../Box';
-import * as styles from './Column.css';
-export interface Props extends Omit<ComponentProps<typeof Box>, 'width' | 'css'> {
-    width?: ResponsiveProp<keyof typeof styles.width>;
-    noShrink?: boolean;
-    grow?: boolean;
-    alignSelf?: keyof typeof styles.align;
-    className?: string;
-    children: ReactNode | ReactNode[];
+import React, { type ElementType, type Ref } from 'react';
+import { type SprinklesResponsive } from '../../styles/sprinkles.css';
+import { type BoxBasedProps } from '../Box';
+export interface ColumnProps<E extends ElementType> extends BoxBasedProps<E> {
+    alignSelf?: SprinklesResponsive['alignSelf'];
+    justifyContent?: SprinklesResponsive['justifyContent'];
+    order?: SprinklesResponsive['order'];
+    ref?: Ref<E>;
+    width?: SprinklesResponsive['gridColumn'];
 }
-export declare const Column: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
-export default Column;
+export declare const Column: {
+    <E extends ElementType>({ alignSelf, children, justifyContent, order, width, ...props }: ColumnProps<E>): React.JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=Column.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,SAAS,EAAc,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,MAAM,wFAmDlB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAO,KAAK,aAAa,EAA4B,MAAM,QAAQ,CAAC;AAE3E,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7C,cAAc,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACvD,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACb,KAAK,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,mEAOzC,WAAW,CAAC,CAAC,CAAC;;CAmBhB,CAAC"}

package/dist/components/Columns/Column.js

@@ -2,52 +2,38 @@
 
 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 = ["alignSelf", "children", "justifyContent", "order", "width"];
 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 * as React from 'react';
-import { forwardRef, useContext } from 'react';
-import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
-import { Box } from "../Box/index.js";
-import * as styles from "./Column.css.js";
-import { ColumnContext } from "./Columns.js";
+import React from 'react';
+import { Box, useBox } from "../Box/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Column = forwardRef((_ref, ref) => {
+export const Column = _ref => {
   let {
-      className = '',
-      children,
-      width,
       alignSelf,
-      is,
-      noShrink = false,
-      grow = false,
-      order
+      children,
+      justifyContent,
+      order,
+      width
     } = _ref,
-    boxProps = _objectWithoutProperties(_ref, _excluded);
-  const columnsContext = useContext(ColumnContext);
-  !(columnsContext !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Column must be wrapped inside a Columns element') : invariant(false) : void 0;
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
-    isList,
-    spaceXCls,
-    spaceYCls
-  } = columnsContext;
+    Component,
+    componentProps
+  } = useBox(_objectSpread(_objectSpread({}, props), {}, {
+    justifyContent: 'center',
+    display: 'flex',
+    height: 'full',
+    width: 'full'
+  }));
   return _jsx(Box, {
-    is: isList ? 'li' : 'div',
+    alignSelf: alignSelf,
+    gridColumn: width,
+    justifyContent: justifyContent,
     order: order,
-    flexGrow: grow ? 1 : 0,
-    flexShrink: noShrink ? 0 : void 0,
-    className: [spaceXCls, spaceYCls, resolveResponsiveStyle(width, styles.width), styles.align[alignSelf]],
-    children: _jsx(Box, _objectSpread(_objectSpread({
-      ref: ref,
-      is: is,
-      display: "flex",
-      width: "full",
-      height: "full",
-      className: className
-    }, boxProps), {}, {
+    children: _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
       children: children
     }))
   });
-});
-export default Column;
+};
+Column.displayName = 'Column';

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

@@ -1,7 +1,19 @@
-export declare const space: {
-    spaceX: Record<string | number, any>;
-    spaceY: Record<string | number, any>;
-};
-export declare const wrapping: Record<"wrap" | "noWrap" | "reverseWrap", string>;
-export declare const align: Record<"bottom" | "top" | "stretch" | "centre", string>;
+import { type RecipeVariants } from '@vanilla-extract/recipes';
+export declare const columnWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    align: {
+        stretch: string;
+        top: string;
+        center: string;
+        bottom: string;
+    };
+    noWrap: {
+        false: string;
+        true: string;
+    };
+    wrappingDirection: {
+        default: string;
+        reverse: string;
+    };
+}>;
+export type ColumnWrapperVariants = NonNullable<RecipeVariants<typeof columnWrapper>>;
 //# sourceMappingURL=Columns.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK;;;CAGjB,CAAC;AAEF,eAAO,MAAM,QAAQ,mDAUnB,CAAC;AAEH,eAAO,MAAM,KAAK,yDAiBhB,CAAC"}
+{"version":3,"file":"Columns.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAOvE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;EAwCxB,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAC9C,cAAc,CAAC,OAAO,aAAa,CAAC,CACpC,CAAC"}

package/dist/components/Columns/Columns.css.js

@@ -2,40 +2,52 @@
 
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Columns/Columns.css.ts", "@autoguru/overdrive");
-import { styleVariants } from '@vanilla-extract/css';
-import { overdriveTokens as vars } from "../../themes/theme.css.js";
-import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
-export const space = {
-  spaceX: makeResponsiveStyle(vars.space, 'paddingLeft'),
-  spaceY: makeResponsiveStyle(vars.space, 'paddingTop')
-};
-export const wrapping = styleVariants({
-  wrap: {
-    flexWrap: 'wrap'
+import { recipe } from '@vanilla-extract/recipes';
+import { sprinklesResponsive, totalGridColumns } from "../../styles/sprinkles.css.js";
+export const columnWrapper = recipe({
+  base: [sprinklesResponsive({
+    display: 'grid'
+  }), {
+    gridAutoFlow: 'row',
+    gridTemplateColumns: `repeat(${totalGridColumns}, [col-start] 1fr)`
+  }],
+  variants: {
+    align: {
+      stretch: sprinklesResponsive({
+        alignItems: 'stretch',
+        alignContent: 'stretch'
+      }),
+      top: sprinklesResponsive({
+        alignItems: 'flex-start',
+        alignContent: 'flex-start'
+      }),
+      center: sprinklesResponsive({
+        alignItems: 'center',
+        alignContent: 'center'
+      }),
+      bottom: sprinklesResponsive({
+        alignItems: 'flex-end',
+        alignContent: 'flex-end'
+      })
+    },
+    noWrap: {
+      false: sprinklesResponsive({
+        flexWrap: 'wrap'
+      }),
+      true: sprinklesResponsive({
+        flexWrap: 'nowrap'
+      })
+    },
+    wrappingDirection: {
+      default: '',
+      reverse: sprinklesResponsive({
+        flexWrap: 'wrap-reverse'
+      })
+    }
   },
-  noWrap: {
-    flexWrap: 'nowrap'
-  },
-  reverseWrap: {
-    flexWrap: 'wrap-reverse'
-  }
-}, "wrapping");
-export const align = styleVariants({
-  stretch: {
-    alignContent: 'stretch',
-    alignItems: 'stretch'
-  },
-  top: {
-    alignContent: 'flex-start',
-    alignItems: 'flex-start'
-  },
-  centre: {
-    alignContent: 'center',
-    alignItems: 'center'
-  },
-  bottom: {
-    alignContent: 'flex-end',
-    alignItems: 'flex-end'
+  defaultVariants: {
+    align: 'stretch',
+    noWrap: false
   }
-}, "align");
+}, "columnWrapper");
 __vanilla_filescope__.endFileScope();

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

@@ -1,26 +1,15 @@
-import * as React from 'react';
-import { ComponentProps, ReactNode } from 'react';
-import type { ThemeTokens as Tokens } from '../../themes';
-import { ResponsiveProp } from '../../utils/responsiveProps.css';
-import { Box } from '../Box';
-import * as styles from './Columns.css';
-export interface Props extends Omit<ComponentProps<typeof Box>, 'css'> {
-    className?: string;
-    columns?: number;
-    space?: ResponsiveProp<keyof Tokens['space']>;
-    spaceX?: ResponsiveProp<keyof typeof styles.space.spaceX>;
-    spaceY?: ResponsiveProp<keyof typeof styles.space.spaceY>;
-    noWrap?: boolean;
-    wrappingDirection?: keyof typeof styles.wrapping;
-    align?: keyof typeof styles.align;
-    children?: ReactNode;
+import React, { type ElementType } from 'react';
+import { type SprinklesResponsive } from '../../styles/sprinkles.css';
+import { type PolymorphicBoxProps } from '../Box';
+import type { ColumnWrapperVariants } from './Columns.css';
+export interface ColumnsBaseProps extends ColumnWrapperVariants {
+    space?: SprinklesResponsive['gap'];
+    spaceX?: SprinklesResponsive['columnGap'];
+    spaceY?: SprinklesResponsive['rowGap'];
 }
-interface ColumnContextValue {
-    spaceXCls: any;
-    spaceYCls: any;
-    isList: boolean;
-}
-export declare const ColumnContext: React.Context<ColumnContextValue | null>;
-export declare const Columns: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
-export default Columns;
+export type StyledColumnsProps<E extends ElementType> = PolymorphicBoxProps<E, ColumnsBaseProps>;
+export declare const Columns: {
+    <E extends ElementType>({ align, as, children, className, noWrap, space, spaceX, spaceY, wrappingDirection, ...props }: StyledColumnsProps<E>): React.JSX.Element;
+    displayName: string;
+};
 //# 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":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAGd,SAAS,EAET,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,KAAK,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC3B,SAAS,MAAC;IACV,SAAS,MAAC;IACV,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAE5E,eAAO,MAAM,OAAO,wFAmEnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEN,KAAK,mBAAmB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,mBAAmB,EAA4B,MAAM,QAAQ,CAAC;AAG5E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB;IAK9D,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAKnC,MAAM,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAK1C,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACvC;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI,mBAAmB,CAC1E,CAAC,EACD,gBAAgB,CAChB,CAAC;AA8BF,eAAO,MAAM,OAAO;KAAI,CAAC,SAAS,WAAW,kGAW1C,kBAAkB,CAAC,CAAC,CAAC;;CAqBvB,CAAC"}

package/dist/components/Columns/Columns.js

@@ -2,54 +2,45 @@
 
 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"];
+const _excluded = ["align", "as", "children", "className", "noWrap", "space", "spaceX", "spaceY", "wrappingDirection"];
 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 { createContext, forwardRef, useMemo } from 'react';
-import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
-import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
-import { Box } from "../Box/index.js";
+import React from 'react';
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
+import { useBox } from "../Box/index.js";
 import * as styles from "./Columns.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ColumnContext = createContext(null);
-export const Columns = forwardRef((_ref, ref) => {
+export const Columns = _ref => {
   let {
-      className = '',
+      align = 'stretch',
+      as,
       children,
+      className,
+      noWrap,
       space,
       spaceX,
       spaceY,
-      noWrap,
-      wrappingDirection = 'default',
-      align = 'stretch',
-      is
+      wrappingDirection = 'default'
     } = _ref,
-    boxProps = _objectWithoutProperties(_ref, _excluded);
-  const resolvedSpaceX = spaceX || space || ['none'];
-  const resolvedSpaceY = spaceY || space || ['none'];
-  const marginLeftFix = useNegativeMarginLeft(resolvedSpaceX);
-  const marginTopFix = useNegativeMarginTop(resolvedSpaceY);
-  return _jsx(Box, _objectSpread(_objectSpread({
-    ref: ref,
-    is: is,
-    display: "flex",
-    flexDirection: "row",
-    className: clsx(marginLeftFix, marginTopFix, styles.align[align], className, {
-      [styles.wrapping.wrap]: !noWrap,
-      [styles.wrapping.noWrap]: noWrap,
-      [styles.wrapping.reverseWrap]: wrappingDirection === 'reverse'
-    })
-  }, boxProps), {}, {
-    children: _jsx(ColumnContext.Provider, {
-      value: useMemo(() => ({
-        spaceXCls: resolveResponsiveStyle(resolvedSpaceX, styles.space.spaceX),
-        spaceYCls: resolveResponsiveStyle(resolvedSpaceY, styles.space.spaceY),
-        isList: typeof is === 'string' && ['ul', 'ol'].includes(is)
-      }), [resolvedSpaceX, resolvedSpaceY, styles]),
-      children: children
-    })
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    Component,
+    componentProps
+  } = useBox(_objectSpread({
+    as,
+    className: [styles.columnWrapper({
+      align,
+      noWrap,
+      wrappingDirection
+    }), sprinklesResponsive({
+      gap: space,
+      columnGap: spaceX,
+      rowGap: spaceY
+    }), className],
+    odComponent: 'columns'
+  }, props));
+  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    children: children
   }));
-});
-export default Columns;
+};
+Columns.displayName = 'Columns';