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

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

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

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

package/dist/components/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;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"}
+{"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;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/Columns/Column.css.d.ts

@@ -0,0 +1,44 @@
+import { type RecipeVariants } from '@vanilla-extract/recipes';
+export declare const sprinklesColumnWidthResponsive: ((props: {
+    flexBasis?: ("full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | {
+        mobile?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+        tablet?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+        desktop?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+        largeDesktop?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | null>;
+}) => string) & {
+    properties: Set<"flexBasis">;
+};
+export type SprinklesColumnWidthResponsive = Parameters<typeof sprinklesColumnWidthResponsive>[0];
+export declare const columnStyle: import("@vanilla-extract/recipes").RuntimeFn<{
+    alignSelf: {
+        stretch: {
+            alignSelf: "stretch";
+        };
+        top: {
+            alignSelf: "flex-start";
+        };
+        center: {
+            alignSelf: "center";
+        };
+        bottom: {
+            alignSelf: "flex-end";
+        };
+    };
+    grow: {
+        true: {
+            flexGrow: number;
+        };
+        false: {
+            flexGrow: number;
+        };
+    };
+    noShrink: {
+        true: {
+            flexShrink: number;
+        };
+        false: {};
+    };
+}>;
+export type ColumnRecipeVariants = NonNullable<RecipeVariants<typeof columnStyle>>;
+//# sourceMappingURL=Column.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Column.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AA8BvE,eAAO,MAAM,8BAA8B;;;;;;;;;CAE1C,CAAC;AACF,MAAM,MAAM,8BAA8B,GAAG,UAAU,CACtD,OAAO,8BAA8B,CACrC,CAAC,CAAC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBtB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC7C,cAAc,CAAC,OAAO,WAAW,CAAC,CAClC,CAAC"}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Columns/Column.css.ts", "@autoguru/overdrive");
+import { recipe } from '@vanilla-extract/recipes';
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { responsiveConditions } from "../../styles/sprinkles.css.js";
+const getSizeStyle = scale => `${scale * 100}%`;
+const columnWidthResponsive = defineProperties({
+  '@layer': cssLayerComponent,
+  conditions: responsiveConditions,
+  defaultCondition: 'mobile',
+  responsiveArray: ['mobile', 'tablet', 'desktop', 'largeDesktop'],
+  properties: {
+    flexBasis: {
+      '1/2': getSizeStyle(1 / 2),
+      '1/3': getSizeStyle(1 / 3),
+      '2/3': getSizeStyle(2 / 3),
+      '1/4': getSizeStyle(1 / 4),
+      '3/4': getSizeStyle(3 / 4),
+      '1/5': getSizeStyle(1 / 5),
+      '2/5': getSizeStyle(2 / 5),
+      '3/5': getSizeStyle(3 / 5),
+      '4/5': getSizeStyle(4 / 5),
+      full: getSizeStyle(1),
+      auto: 'auto'
+    }
+  }
+});
+export const sprinklesColumnWidthResponsive = createSprinkles(columnWidthResponsive);
+export const columnStyle = recipe({
+  base: {},
+  variants: {
+    alignSelf: {
+      stretch: {
+        alignSelf: 'stretch'
+      },
+      top: {
+        alignSelf: 'flex-start'
+      },
+      center: {
+        alignSelf: 'center'
+      },
+      bottom: {
+        alignSelf: 'flex-end'
+      }
+    },
+    grow: {
+      true: {
+        flexGrow: 1
+      },
+      false: {
+        flexGrow: 0
+      }
+    },
+    noShrink: {
+      true: {
+        flexShrink: 0
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    grow: false,
+    noShrink: false
+  }
+}, "columnStyle");
+__vanilla_filescope__.endFileScope();

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

@@ -1,15 +1,13 @@
 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'];
+import { type BoxBasedProps, type StyleProps } from '../Box';
+import * as styles from './Column.css';
+export interface ColumnProps<E extends ElementType> extends BoxBasedProps<E>, styles.ColumnRecipeVariants {
+    order?: StyleProps['order'];
     ref?: Ref<E>;
-    width?: SprinklesResponsive['gridColumn'];
+    width?: styles.SprinklesColumnWidthResponsive['flexBasis'];
 }
 export declare const Column: {
-    <E extends ElementType>({ alignSelf, children, justifyContent, order, width, ...props }: ColumnProps<E>): React.JSX.Element;
+    <E extends ElementType>({ alignSelf, children, grow, noShrink, order, ref, width, ...boxProps }: 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":"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"}
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAEN,KAAK,aAAa,EAClB,KAAK,UAAU,EAGf,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,WAAW,CACjD,SAAQ,aAAa,CAAC,CAAC,CAAC,EACvB,MAAM,CAAC,oBAAoB;IAC5B,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,8BAA8B,CAAC,WAAW,CAAC,CAAC;CAC3D;AAQD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,2EASzC,WAAW,CAAC,CAAC,CAAC;;CAqChB,CAAC"}

package/dist/components/Columns/Column.js

@@ -2,36 +2,55 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["alignSelf", "children", "justifyContent", "order", "width"];
+const _excluded = ["alignSelf", "children", "grow", "noShrink", "order", "ref", "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 React from 'react';
+import { invariant } from '@autoguru/utilities';
+import React, { useContext } from 'react';
 import { Box, useBox } from "../Box/index.js";
+import * as styles from "./Column.css.js";
+import { ColumnContext } from "./Columns.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Column = _ref => {
   let {
       alignSelf,
       children,
-      justifyContent,
+      grow = false,
+      noShrink = false,
       order,
+      ref,
       width
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    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;
+  const {
+    isList,
+    spaceXCls,
+    spaceYCls
+  } = columnsContext;
   const {
     Component,
     componentProps
-  } = useBox(_objectSpread(_objectSpread({}, props), {}, {
-    justifyContent: 'center',
+  } = useBox(_objectSpread(_objectSpread({}, boxProps), {}, {
     display: 'flex',
     height: 'full',
     width: 'full'
   }));
   return _jsx(Box, {
-    alignSelf: alignSelf,
-    gridColumn: width,
-    justifyContent: justifyContent,
+    as: isList ? 'li' : 'div',
     order: order,
+    flexGrow: grow ? 1 : 0,
+    flexShrink: noShrink ? 0 : void 0,
+    className: [spaceXCls, spaceYCls, styles.sprinklesColumnWidthResponsive({
+      flexBasis: width
+    }), styles.columnStyle({
+      alignSelf,
+      grow,
+      noShrink
+    })],
     children: _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+      ref: ref,
       children: children
     }))
   });

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

@@ -0,0 +1,35 @@
+import { type RecipeVariants } from '@vanilla-extract/recipes';
+export declare const totalGridColumns = 12;
+export declare const columnStyle: import("@vanilla-extract/recipes").RuntimeFn<{
+    width: {
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '3/4': string;
+        '1/6': string;
+        '2/6': string;
+        '3/6': string;
+        '4/6': string;
+        full: string;
+        auto: string;
+    };
+}>;
+export declare const columnGridStyle: 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 ColumnGridStyle = NonNullable<RecipeVariants<typeof columnGridStyle>>;
+//# sourceMappingURL=ColumnGrid.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/ColumnGrid.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAIvE,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAiBtB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;EAsC1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,CACxC,cAAc,CAAC,OAAO,eAAe,CAAC,CACtC,CAAC"}

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

@@ -0,0 +1,71 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Columns/ColumnGrid.css.ts", "@autoguru/overdrive");
+import { recipe } from '@vanilla-extract/recipes';
+import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
+export const totalGridColumns = 12;
+export const columnStyle = recipe({
+  base: {},
+  variants: {
+    width: {
+      '1/2': `span ${totalGridColumns / 2}`,
+      '1/3': `span ${totalGridColumns / 3}`,
+      '2/3': `span ${totalGridColumns / 3 * 2}`,
+      '1/4': `span ${totalGridColumns / 4}`,
+      '3/4': `span ${totalGridColumns / 4 * 3}`,
+      '1/6': `span ${totalGridColumns / 6}`,
+      '2/6': `span ${totalGridColumns / 6 * 2}`,
+      '3/6': `span ${totalGridColumns / 6 * 3}`,
+      '4/6': `span ${totalGridColumns / 6 * 4}`,
+      full: `span ${totalGridColumns}`,
+      auto: 'auto'
+    }
+  }
+}, "columnStyle");
+export const columnGridStyle = recipe({
+  base: {
+    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'
+      })
+    }
+  },
+  defaultVariants: {
+    align: 'stretch',
+    noWrap: false
+  }
+}, "columnGridStyle");
+__vanilla_filescope__.endFileScope();

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

@@ -1,19 +1,37 @@
 import { type RecipeVariants } from '@vanilla-extract/recipes';
-export declare const columnWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const columnsStyle: import("@vanilla-extract/recipes").RuntimeFn<{
     align: {
-        stretch: string;
-        top: string;
-        center: string;
-        bottom: string;
+        stretch: {
+            alignContent: "stretch";
+            alignItems: "stretch";
+        };
+        top: {
+            alignContent: "flex-start";
+            alignItems: "flex-start";
+        };
+        center: {
+            alignContent: "center";
+            alignItems: "center";
+        };
+        bottom: {
+            alignContent: "flex-end";
+            alignItems: "flex-end";
+        };
     };
     noWrap: {
-        false: string;
-        true: string;
+        false: {
+            flexWrap: "wrap";
+        };
+        true: {
+            flexWrap: "nowrap";
+        };
     };
     wrappingDirection: {
-        default: string;
-        reverse: string;
+        default: {};
+        reverse: {
+            flexWrap: "wrap-reverse";
+        };
     };
 }>;
-export type ColumnWrapperVariants = NonNullable<RecipeVariants<typeof columnWrapper>>;
+export type ColumnsStyle = NonNullable<RecipeVariants<typeof columnsStyle>>;
 //# 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":"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"}
+{"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;AAEvE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC"}

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

@@ -3,51 +3,48 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Columns/Columns.css.ts", "@autoguru/overdrive");
 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)`
-  }],
+export const columnsStyle = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
   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'
-      })
+      stretch: {
+        alignContent: 'stretch',
+        alignItems: 'stretch'
+      },
+      top: {
+        alignContent: 'flex-start',
+        alignItems: 'flex-start'
+      },
+      center: {
+        alignContent: 'center',
+        alignItems: 'center'
+      },
+      bottom: {
+        alignContent: 'flex-end',
+        alignItems: 'flex-end'
+      }
     },
     noWrap: {
-      false: sprinklesResponsive({
+      false: {
         flexWrap: 'wrap'
-      }),
-      true: sprinklesResponsive({
+      },
+      true: {
         flexWrap: 'nowrap'
-      })
+      }
     },
     wrappingDirection: {
-      default: '',
-      reverse: sprinklesResponsive({
+      default: {},
+      reverse: {
         flexWrap: 'wrap-reverse'
-      })
+      }
     }
   },
   defaultVariants: {
-    align: 'stretch',
-    noWrap: false
+    wrappingDirection: 'default',
+    align: 'stretch'
   }
-}, "columnWrapper");
+}, "columnsStyle");
 __vanilla_filescope__.endFileScope();

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

@@ -1,15 +1,22 @@
-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'];
+import * as React from 'react';
+import { SprinklesResponsive } from '../../styles/sprinkles.css';
+import { type UseBoxProps } from '../Box';
+import * as styles from './Columns.css';
+type ResponsiveSpace = SprinklesResponsive['padding'];
+export interface ColumnsProps extends UseBoxProps {
+    align?: styles.ColumnsStyle['align'];
+    noWrap?: styles.ColumnsStyle['noWrap'];
+    space?: ResponsiveSpace;
+    spaceX?: ResponsiveSpace;
+    spaceY?: ResponsiveSpace;
+    wrappingDirection?: styles.ColumnsStyle['wrappingDirection'];
 }
-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;
-};
+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 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,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"}
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,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,kGAqEnB,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/components/Columns/Columns.js

@@ -2,45 +2,61 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["align", "as", "children", "className", "noWrap", "space", "spaceX", "spaceY", "wrappingDirection"];
+const _excluded = ["as", "className", "children", "space", "spaceX", "spaceY", "noWrap", "wrappingDirection", "align"];
 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 React from 'react';
+import * as React from 'react';
+import { createContext, forwardRef, useMemo } from 'react';
+import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
 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 Columns = _ref => {
+export const ColumnContext = createContext(null);
+export const Columns = forwardRef((_ref, ref) => {
   let {
-      align = 'stretch',
       as,
-      children,
       className,
-      noWrap,
+      children,
       space,
       spaceX,
       spaceY,
-      wrappingDirection = 'default'
+      noWrap,
+      wrappingDirection = 'default',
+      align = 'stretch'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    boxProps = _objectWithoutProperties(_ref, _excluded);
+  const resolvedSpaceX = useMemo(() => spaceX || space || 'none', [space, spaceX]);
+  const resolvedSpaceY = useMemo(() => spaceY || space || 'none', [space, spaceY]);
+  const marginLeftFix = useNegativeMarginLeft(resolvedSpaceX);
+  const marginTopFix = useNegativeMarginTop(resolvedSpaceY);
   const {
     Component,
     componentProps
-  } = useBox(_objectSpread({
+  } = useBox(_objectSpread(_objectSpread({}, boxProps), {}, {
     as,
-    className: [styles.columnWrapper({
+    className: [styles.columnsStyle({
       align,
       noWrap,
       wrappingDirection
-    }), sprinklesResponsive({
-      gap: space,
-      columnGap: spaceX,
-      rowGap: spaceY
-    }), className],
+    }), marginLeftFix, marginTopFix, className],
     odComponent: 'columns'
-  }, props));
+  }));
   return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
-    children: children
+    ref: ref,
+    children: _jsx(ColumnContext.Provider, {
+      value: useMemo(() => ({
+        spaceXCls: sprinklesResponsive({
+          paddingLeft: resolvedSpaceX
+        }),
+        spaceYCls: sprinklesResponsive({
+          paddingTop: resolvedSpaceY
+        }),
+        isList: typeof as === 'string' && ['ul', 'ol'].includes(as)
+      }), [as, resolvedSpaceX, resolvedSpaceY]),
+      children: children
+    })
   }));
-};
-Columns.displayName = 'Columns';
+});
+Columns.displayName = 'Columns';
+export default Columns;

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAU,OAAO,EAAE,MAAM,GAAG,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAwC9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,QAAQ,EAAE,KAqEtB,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,KAqE5B,CAAC"}
+{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAU,OAAO,EAAoB,MAAM,GAAG,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAwB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,QAAQ,EAAE,KAyDtB,CAAC;AAOF,eAAO,MAAM,cAAc,EAAE,KAsE5B,CAAC"}

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

@@ -16,9 +16,9 @@ declare const meta: {
         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;
+        testId?: string | undefined;
         type?: "submit" | "reset" | "button" | undefined | undefined;
         rounded?: boolean | undefined;
         minimal?: import("../Button/Button.css").ButtonMinimal | undefined;