@autoguru/overdrive 4.35.2 → 4.36.0

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

@@ -2,7 +2,7 @@ import type { AllHTMLAttributes } from 'react';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import type { BoxStyleProps } from './useBoxStyles';
-export interface Props extends BoxStyleProps, Omit<AllHTMLAttributes<HTMLElement>, 'width' | 'height' | 'className' | 'is'> {
+export interface Props extends BoxStyleProps, Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'width' | 'height' | 'className' | 'is'> {
     children?: ReactNode;
 }
 export declare const Box: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,WAAW,KAChB,SAAQ,aAAa,EACpB,IAAI,CACH,iBAAiB,CAAC,WAAW,CAAC,EAC9B,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CACvC;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAKD,eAAO,MAAM,GAAG,2EAiIf,CAAC;AAIF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,WAAW,KAChB,SAAQ,aAAa,EACpB,IAAI,CACH,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAC9C;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAKD,eAAO,MAAM,GAAG,2EAoIf,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/dist/components/Box/Box.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["is", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginLeft", "marginRight", "display", "width", "height", "position", "overflow", "userSelect", "textAlign", "pointerEvents", "borderColour", "borderColourX", "borderColourY", "borderColourTop", "borderColourRight", "borderColourBottom", "borderColourLeft", "borderWidth", "borderWidthX", "borderWidthY", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "boxShadow", "borderRadius", "backgroundColour", "colour", "opacity", "className", "alignItems", "order", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "children"];
+const _excluded = ["as", "is", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginLeft", "marginRight", "display", "width", "height", "position", "overflow", "userSelect", "textAlign", "pointerEvents", "borderColour", "borderColourX", "borderColourY", "borderColourTop", "borderColourRight", "borderColourBottom", "borderColourLeft", "borderWidth", "borderWidthX", "borderWidthY", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "boxShadow", "borderRadius", "backgroundColour", "colour", "opacity", "className", "alignItems", "order", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "children"];
 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';
@@ -12,7 +12,8 @@ import { useBoxStyles } from "./useBoxStyles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Box = forwardRef((_ref, ref) => {
   let {
-      is: Component = 'div',
+      as = 'div',
+      is = as,
       padding,
       paddingX,
       paddingY,
@@ -66,7 +67,7 @@ export const Box = forwardRef((_ref, ref) => {
     } = _ref,
     allOtherProps = _objectWithoutProperties(_ref, _excluded);
   const cls = useBoxStyles({
-    is: Component,
+    is,
     alignItems,
     order,
     backgroundColour,
@@ -116,6 +117,7 @@ export const Box = forwardRef((_ref, ref) => {
     userSelect,
     width
   });
+  const Component = is;
   return _jsx(Component, _objectSpread(_objectSpread({
     ref: ref,
     className: clsx(cls, className)

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

@@ -1,4 +1,4 @@
-export { Box } from './Box';
+export { Box, type Props as BoxProps } from './Box';
 export { useBoxStyles } from './useBoxStyles';
 export type { BoxStyleProps } from './useBoxStyles';
 //# 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,MAAM,OAAO,CAAC;AAC5B,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,KAAK,IAAI,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import type { JSXElementConstructor } from 'react';
+import type { ElementType } from 'react';
 import { Tokens } from '../../themes/tokens';
 import { ResponsiveProp } from '../../utils/responsiveProps.css';
 import * as styles from './useBoxStyles.css';
@@ -48,7 +48,8 @@ interface Flex {
     justifyContent?: ResponsiveProp<keyof typeof styles.justifyContent>;
 }
 export interface BoxStyleProps extends Padding, Margin, Border, Flex {
-    is?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+    as?: ElementType;
+    is?: ElementType;
     boxShadow?: ResponsiveProp<keyof typeof styles.boxShadow>;
     display?: keyof typeof styles.display;
     position?: keyof typeof styles.position;
@@ -63,6 +64,6 @@ export interface BoxStyleProps extends Padding, Margin, Border, Flex {
     pointerEvents?: keyof typeof styles.pointerEvents;
     className?: Parameters<typeof clsx>[0];
 }
-export declare const useBoxStyles: ({ is, display, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginX, marginY, marginTop, marginBottom, marginLeft, marginRight, boxShadow, borderWidth, borderWidthX, borderWidthY, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft, borderColour, borderColourX, borderColourY, borderColourTop, borderColourRight, borderColourBottom, borderColourLeft, borderRadius, backgroundColour, colour, opacity, width, height, position, overflow, userSelect, textAlign, pointerEvents, alignItems, order, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, className, }: BoxStyleProps) => string;
+export declare const useBoxStyles: ({ as, is, display, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginX, marginY, marginTop, marginBottom, marginLeft, marginRight, boxShadow, borderWidth, borderWidthX, borderWidthY, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft, borderColour, borderColourX, borderColourY, borderColourTop, borderColourRight, borderColourBottom, borderColourLeft, borderRadius, backgroundColour, colour, opacity, width, height, position, overflow, userSelect, textAlign, pointerEvents, alignItems, order, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, className, }: BoxStyleProps) => string;
 export default useBoxStyles;
 //# sourceMappingURL=useBoxStyles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBoxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useBoxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.ts"],"names":[],"mappings":"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"}

package/dist/components/Box/useBoxStyles.js

@@ -6,7 +6,8 @@ import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
 import * as styles from "./useBoxStyles.css.js";
 export const useBoxStyles = _ref => {
   let {
-    is,
+    as,
+    is = as,
     display,
     padding,
     paddingX,

package/dist/components/Icon/Icon.d.ts

@@ -3,11 +3,12 @@ import type { FunctionComponent, ReactElement, SVGAttributes } from 'react';
 import { ResponsiveProp } from '../../utils/responsiveProps.css';
 import type { BoxStyleProps } from '../Box';
 import * as styles from './Icon.css';
+export type IconEl = IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'>;
 export interface Props {
     display?: Extract<BoxStyleProps['display'], 'block' | 'inlineBlock'>;
     className?: string;
     size?: ResponsiveProp<keyof typeof styles.size | string>;
-    icon: IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'>;
+    icon: IconEl;
 }
 export declare const Icon: FunctionComponent<Props>;
 export default Icon;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CA0BzC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;AAE/E,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CA0BzC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1,2 +1,2 @@
-export { Icon } from './Icon';
+export { Icon, type IconEl, type Props as IconProps } from './Icon';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,KAAK,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -0,0 +1,31 @@
+import { type RecipeVariants } from '@vanilla-extract/recipes';
+export declare const styledGridContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    columns: {
+        '1': {};
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+    };
+}>;
+export type StyledGridContainerProps = NonNullable<RecipeVariants<typeof styledGridContainer>>;
+export declare const styledGridItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+export type StyledGridItemProps = NonNullable<RecipeVariants<typeof styledGridItem>>;
+export declare const styleIndicator: string;
+export declare const styledCheckbox: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+export type StyledCheckboxProps = NonNullable<RecipeVariants<typeof styledCheckbox>>;
+export declare const styledRadioButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+export type StyledRadioButtonProps = NonNullable<RecipeVariants<typeof styledRadioButton>>;
+//# sourceMappingURL=OptionGrid.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAOvE,eAAO,MAAM,mBAAmB;;;;;;;;EA8B9B,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,WAAW,CACjD,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAC1C,CAAC;AAyBF,eAAO,MAAM,cAAc;;;;EAkCzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAGF,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;EA2BzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAwBF,eAAO,MAAM,iBAAiB;;;;EAoB5B,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAC/C,cAAc,CAAC,OAAO,iBAAiB,CAAC,CACxC,CAAC"}

package/dist/components/OptionGrid/OptionGrid.css.js

@@ -0,0 +1,192 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/OptionGrid/OptionGrid.css.ts", "@autoguru/overdrive");
+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 { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { focusOutline } from "../../styles/focusOutline.css.js";
+import { odStyle } from "../../styles/sprinkles.css.js";
+import { tokens } from "../../themes/base/tokens.js";
+export const styledGridContainer = recipe({
+  base: odStyle({
+    display: {
+      mobile: 'flex'
+    },
+    flexDirection: {
+      mobile: 'column'
+    },
+    gap: '3'
+  }),
+  variants: {
+    columns: {
+      '1': {},
+      '2': odStyle({
+        display: {
+          tablet: 'grid'
+        },
+        gridColumns: {
+          tablet: '2'
+        }
+      }),
+      '3': odStyle({
+        display: {
+          tablet: 'grid'
+        },
+        gridColumns: {
+          tablet: '2',
+          desktop: '3'
+        }
+      }),
+      '4': odStyle({
+        display: {
+          tablet: 'grid'
+        },
+        gridColumns: {
+          tablet: '3',
+          desktop: '4'
+        }
+      }),
+      '5': odStyle({
+        display: {
+          tablet: 'grid'
+        },
+        gridColumns: {
+          tablet: '3',
+          desktop: '5'
+        }
+      })
+    }
+  },
+  defaultVariants: {
+    columns: '2'
+  }
+}, "styledGridContainer");
+const optionTransition = style({
+  transition: 'background 80ms ease-in'
+}, "optionTransition");
+const pseudoThickBorder = style({
+  selectors: {
+    '&[data-selected]:after': {
+      outlineColor: tokens.colours.gamut.black900,
+      outlineStyle: 'solid',
+      outlineWidth: tokens.border.width[2],
+      borderRadius: 'inherit',
+      content: '',
+      display: 'block',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0
+    }
+  }
+}, "pseudoThickBorder");
+export const styledGridItem = recipe({
+  base: [{
+    minHeight: '80px',
+    userSelect: 'none'
+  }, odStyle(_objectSpread(_objectSpread({
+    alignItems: 'center',
+    background: {
+      initial: 'white',
+      focusVisible: 'gray200',
+      hover: 'gray200',
+      selected: 'white'
+    },
+    borderColor: {
+      initial: 'gray',
+      focusVisible: 'light',
+      hover: 'light',
+      selected: 'dark'
+    },
+    borderRadius: '2',
+    borderStyle: 'solid',
+    borderWidth: '1',
+    cursor: {
+      hover: 'pointer'
+    },
+    display: 'flex'
+  }, focusOutline), {}, {
+    gap: '2',
+    paddingX: '4',
+    paddingY: '3',
+    position: 'relative'
+  })), optionTransition, pseudoThickBorder]
+}, "styledGridItem");
+export const styleIndicator = style({
+  height: '26px',
+  width: '26px'
+}, "styleIndicator");
+export const styledCheckbox = recipe({
+  base: [odStyle({
+    alignItems: 'center',
+    background: {
+      initial: 'white',
+      focusVisible: 'gray300',
+      hover: 'gray300',
+      selected: 'gray900'
+    },
+    borderColor: {
+      initial: 'gray',
+      selected: 'dark'
+    },
+    borderRadius: '1',
+    borderStyle: 'solid',
+    borderWidth: '1',
+    color: {
+      initial: 'transparent',
+      focusVisible: 'white',
+      hover: 'white',
+      selected: 'white'
+    },
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    size: '6'
+  }), optionTransition]
+}, "styledCheckbox");
+const pseudoRadio = style({
+  selectors: {
+    '&:after': {
+      borderRadius: 'inherit',
+      content: '',
+      display: 'block',
+      position: 'absolute',
+      transform: 'scale(0.475)',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0
+    },
+    '&[data-hover]:after, &[data-focus-visible]:after': {
+      background: tokens.colours.gamut.gray200
+    },
+    '&[data-selected]:after': {
+      background: tokens.colours.gamut.white
+    }
+  }
+}, "pseudoRadio");
+export const styledRadioButton = recipe({
+  base: [odStyle({
+    alignItems: 'center',
+    background: {
+      initial: 'white',
+      hover: 'gray300',
+      focusVisible: 'gray300',
+      selected: 'gray900'
+    },
+    borderColor: {
+      initial: 'gray',
+      selected: 'dark'
+    },
+    borderRadius: 'full',
+    borderStyle: 'solid',
+    borderWidth: '1',
+    position: 'relative',
+    size: '6'
+  }), pseudoRadio, optionTransition]
+}, "styledRadioButton");
+__vanilla_filescope__.endFileScope();

package/dist/components/OptionGrid/OptionGrid.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type ListBoxProps } from 'react-aria-components';
+import { type SelectionMode } from 'react-stately';
+import type { WithTestId } from '../../types';
+import { type IconEl } from '../Icon';
+import { type StyledGridContainerProps } from './OptionGrid.css';
+export interface OptionItem {
+    name: string;
+    label: string;
+    value?: string;
+    icon?: IconEl;
+    description?: string;
+}
+export interface OptionGridProps<T> extends Omit<ListBoxProps<T>, 'items'> {
+    label: string;
+    items: OptionItem[];
+    indicator?: 'none' | 'checkbox' | 'radio';
+    selectionMode?: SelectionMode;
+    columns?: StyledGridContainerProps['columns'];
+}
+export declare const OptionGrid: ({ className, columns, indicator, label, layout, selectionMode, testId, ...props }: WithTestId<OptionGridProps<OptionItem>>) => React.JSX.Element;
+//# sourceMappingURL=OptionGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIN,KAAK,YAAY,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAG5C,OAAO,EAMN,KAAK,wBAAwB,EAC7B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IAIzE,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,UAAU,EAAE,CAAC;IAIpB,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAI1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAI9B,OAAO,CAAC,EAAE,wBAAwB,CAAC,SAAS,CAAC,CAAC;CAC9C;AAgBD,eAAO,MAAM,UAAU,sFASpB,WAAW,gBAAgB,UAAU,CAAC,CAAC,sBA6EzC,CAAC"}

package/dist/components/OptionGrid/OptionGrid.js

@@ -0,0 +1,99 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "columns", "indicator", "label", "layout", "selectionMode", "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 React from 'react';
+import { ListBox, ListBoxItem, Text } from 'react-aria-components';
+import { odStyle } from "../../styles/sprinkles.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Icon } from "../Icon/index.js";
+import { IconTick } from "../OptionList/IconTick.js";
+import { styledCheckbox, styledGridContainer, styledGridItem, styledRadioButton, styleIndicator } from "./OptionGrid.css.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const OptionGrid = _ref => {
+  let {
+      className,
+      columns,
+      indicator = 'checkbox',
+      label,
+      layout = 'grid',
+      selectionMode = 'multiple',
+      testId
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return _jsx(ListBox, _objectSpread(_objectSpread(_objectSpread({
+    "aria-label": label,
+    layout: layout,
+    selectionMode: selectionMode,
+    className: clsx([styledGridContainer({
+      columns
+    }), className])
+  }, dataAttrs({
+    'test-id': testId
+  })), props), {}, {
+    children: _ref2 => {
+      let {
+        description,
+        icon,
+        label,
+        name
+      } = _ref2;
+      return _jsx(ListBoxItem, {
+        className: styledGridItem(),
+        id: name,
+        textValue: label,
+        children: _ref3 => {
+          let {
+            isFocusVisible,
+            isHovered,
+            isSelected
+          } = _ref3;
+          const hasIndicator = indicator !== 'none';
+          const hasNoInteraction = !isFocusVisible && !isHovered && !isSelected;
+          const IndicatorIcon = () => {
+            if (icon && hasNoInteraction) return _jsx(Icon, {
+              icon: icon,
+              size: "100%"
+            });
+            const styledIndicator = indicator === 'radio' ? styledRadioButton : styledCheckbox;
+            return _jsx("div", _objectSpread(_objectSpread({
+              className: styledIndicator()
+            }, dataAttrs({
+              'focus-visible': isFocusVisible,
+              hover: isHovered,
+              selected: isSelected
+            })), {}, {
+              children: indicator === 'checkbox' && _jsx(IconTick, {})
+            }));
+          };
+          return _jsxs(_Fragment, {
+            children: [hasIndicator && _jsx("div", {
+              className: styleIndicator,
+              children: _jsx(IndicatorIcon, {})
+            }), _jsxs("div", {
+              children: [_jsx(Text, {
+                slot: "label",
+                elementType: "div",
+                className: odStyle({
+                  fontSize: 'md'
+                }),
+                children: label
+              }), description && _jsx(Text, {
+                slot: "description",
+                elementType: "div",
+                className: odStyle({
+                  fontSize: 'xs'
+                }),
+                children: description
+              })]
+            })]
+          });
+        }
+      });
+    }
+  }));
+};

package/dist/components/OptionList/IconTick.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const IconTick: () => React.JSX.Element;
+//# sourceMappingURL=IconTick.d.ts.map

package/dist/components/OptionList/IconTick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTick.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/IconTick.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,QAAQ,yBAgBpB,CAAC"}

package/dist/components/OptionList/IconTick.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const IconTick = () => _jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  "aria-hidden": true,
+  children: _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.2887 7.42963L8.48942 14.2289L4.71179 10.3673L6.08136 8.99777L8.48942 11.4801L13.9191 6.06006L15.2887 7.42963Z",
+    fill: "currentColor"
+  })
+});

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

@@ -0,0 +1,14 @@
+export declare const styleGroup: string;
+export declare const styleGroupLabel: string;
+export declare const styleDescription: string;
+export declare const styledOptionItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+export declare const checkbox: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+//# sourceMappingURL=OptionList.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,QAA8B,CAAC;AAEtD,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAG3B,CAAC;AAoBH,eAAO,MAAM,gBAAgB;;;;EA4B3B,CAAC;AAoBH,eAAO,MAAM,QAAQ;;;;EAmBnB,CAAC"}