@autoguru/overdrive 4.45.2-next.0 → 4.46.0

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

@@ -5,36 +5,46 @@ __vanilla_filescope__.setFileScope("lib/components/OptionGrid/OptionGrid.css.ts"
 import { createContainer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { breakpoints } from "../../themes/makeTheme.js";
-import { overdriveTokens as tokens } from "../../themes/theme.css.js";
-import { interactionStyle, notDisabled, notSelected } from "../../utils/css.js"; // === Container styles
+import { overdriveTokens as tokens } from "../../themes/theme.css.js"; // === Container styles
 export const gridContainer = createContainer("gridContainer");
 export const gridContainerStyle = style({
-  containerName: gridContainer,
-  containerType: 'inline-size'
+  '@layer': {
+    [cssLayerComponent]: {
+      containerName: gridContainer,
+      containerType: 'inline-size'
+    }
+  }
 }, "gridContainerStyle");
 
-// == Grid styles
+// === Grid styles
+
 const minWidth1200 = '(min-width: 1200px)';
 const repeat2Col = 'repeat(2, 1fr)';
 const repeat3Col = 'repeat(3, 1fr)';
 const repeat4Col = 'repeat(4, 1fr)';
 const repeat5Col = 'repeat(5, 1fr)';
 const grid4ColStyle = style({
-  '@container': {
-    [`${gridContainer} (min-width: ${breakpoints.mobile})`]: {
-      gridTemplateColumns: repeat2Col
-    },
-    [`${gridContainer} (min-width: ${breakpoints.tablet})`]: {
-      gridTemplateColumns: repeat3Col
-    },
-    [`${gridContainer} (min-width: ${breakpoints.desktop})`]: {
-      gridTemplateColumns: repeat4Col
+  '@layer': {
+    [cssLayerComponent]: {
+      '@container': {
+        [`${gridContainer} (min-width: ${breakpoints.mobile})`]: {
+          gridTemplateColumns: repeat2Col
+        },
+        [`${gridContainer} (min-width: ${breakpoints.tablet})`]: {
+          gridTemplateColumns: repeat3Col
+        },
+        [`${gridContainer} (min-width: ${breakpoints.desktop})`]: {
+          gridTemplateColumns: repeat4Col
+        }
+      }
     }
   }
 }, "grid4ColStyle");
-export const styledGrid = recipe({
+export const gridVariants = recipe({
   base: sprinkles({
     display: 'grid',
     gridColumns: {
@@ -46,30 +56,42 @@ export const styledGrid = recipe({
     columns: {
       '1': {},
       '2': {
-        '@container': {
-          [`${gridContainer} (min-width: 640px)`]: {
-            gridTemplateColumns: repeat2Col
-          },
-          [`${gridContainer} ${minWidth1200}`]: {
-            gridTemplateColumns: repeat3Col
+        '@layer': {
+          [cssLayerComponent]: {
+            '@container': {
+              [`${gridContainer} (min-width: 640px)`]: {
+                gridTemplateColumns: repeat2Col
+              },
+              [`${gridContainer} ${minWidth1200}`]: {
+                gridTemplateColumns: repeat3Col
+              }
+            }
           }
         }
       },
       '3': {
-        '@container': {
-          [`${gridContainer} (min-width: 550px)`]: {
-            gridTemplateColumns: repeat2Col
-          },
-          [`${gridContainer} (min-width: ${breakpoints.desktop})`]: {
-            gridTemplateColumns: repeat3Col
+        '@layer': {
+          [cssLayerComponent]: {
+            '@container': {
+              [`${gridContainer} (min-width: 550px)`]: {
+                gridTemplateColumns: repeat2Col
+              },
+              [`${gridContainer} (min-width: ${breakpoints.desktop})`]: {
+                gridTemplateColumns: repeat3Col
+              }
+            }
           }
         }
       },
       '4': grid4ColStyle,
       '5': [grid4ColStyle, {
-        '@container': {
-          [`${gridContainer} ${minWidth1200}`]: {
-            gridTemplateColumns: repeat5Col
+        '@layer': {
+          [cssLayerComponent]: {
+            '@container': {
+              [`${gridContainer} ${minWidth1200}`]: {
+                gridTemplateColumns: repeat5Col
+              }
+            }
           }
         }
       }]
@@ -78,139 +100,179 @@ export const styledGrid = recipe({
   defaultVariants: {
     columns: '2'
   }
-}, "styledGrid");
+}, "gridVariants");
 // === Option item styles
+
 const optionTransition = style({
-  transition: 'background 100ms ease-in, border-color 100ms ease-in'
+  '@layer': {
+    [cssLayerComponent]: {
+      transition: 'background 100ms ease-in, border-color 100ms ease-in'
+    }
+  }
 }, "optionTransition");
-export const styledGridItem = recipe({
-  base: [{
-    alignItems: 'center',
-    backgroundColor: tokens.colours.background.body,
-    borderColor: tokens.border.colours.gray,
-    borderRadius: tokens.border.radius['md'],
-    borderStyle: 'solid',
-    borderWidth: tokens.border.width[1],
-    minHeight: '80px',
-    userSelect: 'none',
-    display: 'flex',
-    gap: tokens.space[2],
-    padding: `${tokens.space[3]} ${tokens.space[4]}`,
-    position: 'relative'
-  }, interactionStyle({
-    hover: {
-      cursor: 'pointer'
-    },
-    selected: {
+export const gridItemContainerStyle = style([sprinkles({
+  alignItems: 'center',
+  borderRadius: 'md',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  display: 'flex',
+  gap: '2',
+  px: '4',
+  py: '3',
+  position: 'relative',
+  userSelect: 'none'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
       backgroundColor: tokens.colours.background.body,
-      borderColor: tokens.border.colours.dark
+      borderColor: tokens.border.colours.gray,
+      minHeight: '80px'
     }
-  }), {
-    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
-      },
-      '&:hover:not([data-selected]), &[data-focus-visible]:not([data-selected])': {
-        backgroundColor: tokens.border.colours.light,
-        borderColor: tokens.border.colours.light
+  }
+}], "gridItemContainerStyle");
+export const gridItemStyle = style([gridItemContainerStyle, {
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: tokens.colours.background.body,
+      borderColor: tokens.border.colours.gray,
+      minHeight: '80px',
+      selectors: {
+        [selectors.hover]: {
+          cursor: 'pointer'
+        },
+        [selectors.selected]: {
+          backgroundColor: tokens.colours.background.body,
+          borderColor: tokens.border.colours.dark
+        },
+        [`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
+          backgroundColor: tokens.border.colours.light,
+          borderColor: tokens.border.colours.light
+        },
+        [`&[data-selected]:after`]: {
+          borderRadius: 'inherit',
+          content: '',
+          display: 'block',
+          height: '100%',
+          left: 0,
+          outlineColor: tokens.colours.gamut.black900,
+          outlineStyle: 'solid',
+          outlineWidth: tokens.border.width[2],
+          position: 'absolute',
+          top: 0,
+          width: '100%'
+        },
+        [selectors.disabled]: {
+          backgroundColor: tokens.colours.gamut.gray100,
+          borderColor: 'transparent',
+          color: tokens.colours.gamut.black500,
+          cursor: 'not-allowed'
+        }
       }
     }
-  }, optionTransition, focusOutlineStyle]
-}, "styledGridItem");
+  }
+}, optionTransition, focusOutlineStyle], "gridItemStyle");
+
 // === Indicator styles
-export const styleIndicator = style({
-  height: '26px',
-  width: '26px'
-}, "styleIndicator");
-export const styledCheckbox = recipe({
-  base: [{
-    borderColor: tokens.border.colours.gray,
-    borderRadius: tokens.border.radius['sm'],
-    borderStyle: 'solid',
-    borderWidth: tokens.border.width[1],
-    color: 'transparent'
-  }, interactionStyle({
-    selected: {
-      backgroundColor: tokens.colours.foreground.body,
-      color: tokens.colours.background.body
+
+export const indicatorStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      height: '26px',
+      width: '26px'
     }
-  }), {
-    selectors: {
-      [`&[data-hover]${notSelected}${notDisabled}, &[data-focus-visible]${notSelected}${notDisabled}`]: {
-        backgroundColor: tokens.colours.gamut.gray300,
-        color: tokens.colours.background.body
+  }
+}, "indicatorStyle");
+export const checkboxStyle = style([sprinkles({
+  alignItems: 'center',
+  borderColour: 'gray',
+  borderRadius: 'sm',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  display: 'flex',
+  flexShrink: '0',
+  justifyContent: 'center',
+  size: '6'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      color: 'transparent',
+      selectors: {
+        [selectors.selected]: {
+          backgroundColor: tokens.colours.foreground.body,
+          color: tokens.colours.background.body
+        },
+        [`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
+          backgroundColor: tokens.colours.gamut.gray300,
+          color: tokens.colours.background.body
+        },
+        [selectors.disabled]: {
+          borderColor: tokens.colours.gamut.gray200
+        }
       }
     }
-  }, sprinkles({
-    alignItems: 'center',
-    display: 'flex',
-    flexShrink: '0',
-    justifyContent: 'center',
-    size: '6'
-  }), optionTransition]
-}, "styledCheckbox");
+  }
+}, optionTransition], "checkboxStyle");
 const pseudoRadio = style({
-  selectors: {
-    '&:after': {
-      borderRadius: 'inherit',
-      content: '',
-      display: 'block',
-      height: '100%',
-      left: 0,
-      position: 'absolute',
-      top: 0,
-      transform: 'scale(0.475)',
-      width: '100%'
-    },
-    '&[data-hover]:after, &[data-focus-visible]:after': {
-      background: tokens.colours.gamut.gray200
-    },
-    '&[data-selected]:after': {
-      background: tokens.colours.gamut.white
+  '@layer': {
+    [cssLayerComponent]: {
+      selectors: {
+        '&:after': {
+          borderRadius: 'inherit',
+          content: '',
+          display: 'block',
+          height: '100%',
+          left: 0,
+          position: 'absolute',
+          top: 0,
+          transform: 'scale(0.475)',
+          width: '100%'
+        },
+        [`${selectors.hover}:after, ${selectors.focusVisible}:after`]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [`&[data-selected]:after`]: {
+          background: tokens.colours.gamut.white
+        }
+      }
     }
   }
 }, "pseudoRadio");
-export const styledRadioButton = recipe({
-  base: [{
-    backgroundColor: tokens.colours.background.body,
-    borderColor: tokens.border.colours.gray,
-    borderRadius: tokens.border.radius.full,
-    borderStyle: 'solid',
-    borderWidth: tokens.border.width[1],
-    position: 'relative'
-  }, interactionStyle({
-    selected: {
-      backgroundColor: tokens.colours.foreground.body,
-      borderColor: tokens.border.colours.dark
-    }
-  }), sprinkles({
-    alignItems: 'center',
-    size: '6'
-  }), {
-    selectors: {
-      '&[data-hover]:not([data-selected]),&[focus-visible]:not([data-selected])': {
-        backgroundColor: tokens.colours.gamut.gray300,
-        borderColor: tokens.colours.gamut.gray300
+export const radioButtonStyle = style([sprinkles({
+  alignItems: 'center',
+  borderRadius: 'full',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  position: 'relative',
+  size: '6'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: tokens.colours.background.body,
+      borderColor: tokens.border.colours.gray,
+      selectors: {
+        [selectors.selected]: {
+          backgroundColor: tokens.colours.foreground.body,
+          borderColor: tokens.border.colours.dark
+        },
+        [`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
+          backgroundColor: tokens.colours.gamut.gray300,
+          borderColor: tokens.colours.gamut.gray300
+        },
+        [selectors.disabled]: {
+          backgroundColor: tokens.colours.gamut.gray100,
+          borderColor: tokens.colours.gamut.gray200
+        }
       }
     }
-  }, pseudoRadio, optionTransition]
-}, "styledRadioButton");
+  }
+}, pseudoRadio, optionTransition], "radioButtonStyle");
+
 // === Label styles
 
-export const labelStyle = style({
-  fontSize: tokens.typography.size[4].fontSize
-}, "labelStyle");
-export const descriptionStyle = style({
-  fontSize: tokens.typography.size[2].fontSize
-}, "descriptionStyle");
+export const labelStyle = sprinkles({
+  fontSize: '4'
+});
+export const descriptionStyle = sprinkles({
+  fontSize: '2'
+});
 __vanilla_filescope__.endFileScope();

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

@@ -3,7 +3,7 @@ import { type ListBoxProps } from 'react-aria-components';
 import { type SelectionMode } from 'react-stately';
 import type { TestIdProp } from '../../types';
 import { type IconEl } from '../Icon';
-import { type StyledGridProps } from './OptionGrid.css';
+import { type GridVariants } from './OptionGrid.css';
 export interface OptionItem {
     name: string;
     label: string;
@@ -13,6 +13,10 @@ export interface OptionItem {
      */
     icon?: IconEl;
     description?: string;
+    /**
+     * Whether this option should be disabled
+     */
+    disabled?: boolean;
 }
 export interface OptionGridProps<T> extends Omit<ListBoxProps<T>, 'items'>, TestIdProp {
     /**
@@ -34,7 +38,11 @@ export interface OptionGridProps<T> extends Omit<ListBoxProps<T>, 'items'>, Test
     /**
      * Number of columns to display the options in
      */
-    columns?: StyledGridProps['columns'];
+    columns?: GridVariants['columns'];
+    /**
+     * Loading state
+     */
+    isLoading?: boolean;
 }
 /**
  * The OptionGrid is primarily used in the booking flow to provide large selectable tiles to the user. It is not a form
@@ -42,13 +50,16 @@ export interface OptionGridProps<T> extends Omit<ListBoxProps<T>, 'items'>, Test
  * and implements a listbox behaviour without wrapping an input element. It supports controlled and uncontrolled usage.
  * Following ARIA guidelines, the arrow keys can be used to navigate withing the group of options.
  *
+ * The ListBox implementation provides a Set of selected keys to the `onSelectionChange` handler. To preselect options
+ * in uncontrolled usage, simply provide a default selection using the `defaultSelectedKeys` prop.
  * See more details on react-aria [ListBox props](https://react-spectrum.adobe.com/react-aria/ListBox.html#listbox-1).
  *
- * Not yet implemented: disabled appearance, empty state, loading state, error state.
- *
  * Accessibility note: The ARIA spec prohibits listbox items from including interactive content such as buttons,
  * tooltips, etc. For these cases a completely different implementation is required (e.g. react-aria [GridList](
  * https://react-spectrum.adobe.com/react-aria/GridList.html))
  */
-export declare const OptionGrid: ({ className, columns, indicator, label, layout, selectionMode, testId, ...props }: OptionGridProps<OptionItem>) => React.JSX.Element;
+export declare const OptionGrid: {
+    ({ className, columns, indicator, isLoading, label, layout, selectionMode, testId, ...props }: OptionGridProps<OptionItem>): React.JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=OptionGrid.d.ts.map

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

@@ -1 +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;AAEnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EASN,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,eAAe,CAAC,CAAC,CACjC,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EACrC,UAAU;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,mFAUxB,eAAe,CAAC,UAAU,CAAC,sBA+E7B,CAAC"}
+{"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;AAEnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAG5C,OAAO,EAUN,KAAK,YAAY,EACjB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,MAAM,WAAW,eAAe,CAAC,CAAC,CACjC,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EACrC,UAAU;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU;mGAWpB,eAAe,CAAC,UAAU,CAAC;;CAgG7B,CAAC"}

package/dist/components/OptionGrid/OptionGrid.js

@@ -2,7 +2,7 @@
 
 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"];
+const _excluded = ["className", "columns", "indicator", "isLoading", "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 { CheckIcon } from '@autoguru/icons';
@@ -11,7 +11,8 @@ import React from 'react';
 import { ListBox, ListBoxItem, Text } from 'react-aria-components';
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
-import { descriptionStyle, gridContainerStyle, labelStyle, styledCheckbox, styledGrid, styledGridItem, styledRadioButton, styleIndicator } from "./OptionGrid.css.js";
+import { LoadingBox } from "../LoadingBox/LoadingBox.js";
+import { checkboxStyle, descriptionStyle, gridContainerStyle, gridItemContainerStyle, gridItemStyle, gridVariants, indicatorStyle, labelStyle, radioButtonStyle } from "./OptionGrid.css.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * The OptionGrid is primarily used in the booking flow to provide large selectable tiles to the user. It is not a form
@@ -19,10 +20,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * and implements a listbox behaviour without wrapping an input element. It supports controlled and uncontrolled usage.
  * Following ARIA guidelines, the arrow keys can be used to navigate withing the group of options.
  *
+ * The ListBox implementation provides a Set of selected keys to the `onSelectionChange` handler. To preselect options
+ * in uncontrolled usage, simply provide a default selection using the `defaultSelectedKeys` prop.
  * See more details on react-aria [ListBox props](https://react-spectrum.adobe.com/react-aria/ListBox.html#listbox-1).
  *
- * Not yet implemented: disabled appearance, empty state, loading state, error state.
- *
  * Accessibility note: The ARIA spec prohibits listbox items from including interactive content such as buttons,
  * tooltips, etc. For these cases a completely different implementation is required (e.g. react-aria [GridList](
  * https://react-spectrum.adobe.com/react-aria/GridList.html))
@@ -32,19 +33,36 @@ export const OptionGrid = _ref => {
       className,
       columns,
       indicator = 'checkbox',
+      isLoading = false,
       label,
       layout = 'grid',
       selectionMode = 'multiple',
       testId
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  if (isLoading) {
+    return /*#__PURE__*/_jsx("div", {
+      className: gridContainerStyle,
+      children: /*#__PURE__*/_jsx("div", {
+        className: gridVariants({
+          columns
+        }),
+        children: Array.from({
+          length: Number(columns) || 1
+        }, (_, idx) => /*#__PURE__*/_jsx("div", {
+          className: gridItemContainerStyle,
+          children: /*#__PURE__*/_jsx(LoadingBox, {})
+        }, idx))
+      })
+    });
+  }
   return /*#__PURE__*/_jsx("div", {
     className: gridContainerStyle,
     children: /*#__PURE__*/_jsx(ListBox, _objectSpread(_objectSpread(_objectSpread({
       "aria-label": label,
       layout: layout,
       selectionMode: selectionMode,
-      className: clsx([styledGrid({
+      className: clsx([gridVariants({
         columns
       }), className])
     }, dataAttrs({
@@ -52,13 +70,18 @@ export const OptionGrid = _ref => {
     })), props), {}, {
       children: ({
         description,
+        disabled,
         icon,
         label,
         name
-      }) => /*#__PURE__*/_jsx(ListBoxItem, {
-        className: styledGridItem(),
+      }) => /*#__PURE__*/_jsx(ListBoxItem, _objectSpread(_objectSpread({
+        className: gridItemStyle,
         id: name,
-        textValue: label,
+        isDisabled: disabled,
+        textValue: label
+      }, dataAttrs({
+        disabled
+      })), {}, {
         children: ({
           isFocusVisible,
           isHovered,
@@ -71,10 +94,11 @@ export const OptionGrid = _ref => {
               icon: icon,
               size: "100%"
             });
-            const styledIndicator = indicator === 'radio' ? styledRadioButton : styledCheckbox;
+            const styledIndicator = indicator === 'radio' ? radioButtonStyle : checkboxStyle;
             return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-              className: styledIndicator()
+              className: styledIndicator
             }, dataAttrs({
+              disabled,
               'focus-visible': isFocusVisible,
               hover: isHovered,
               selected: isSelected
@@ -86,7 +110,7 @@ export const OptionGrid = _ref => {
           };
           return /*#__PURE__*/_jsxs(_Fragment, {
             children: [hasIndicator && /*#__PURE__*/_jsx("div", {
-              className: styleIndicator,
+              className: indicatorStyle,
               children: /*#__PURE__*/_jsx(IndicatorIcon, {})
             }), /*#__PURE__*/_jsxs("div", {
               children: [/*#__PURE__*/_jsx(Text, {
@@ -103,7 +127,8 @@ export const OptionGrid = _ref => {
             })]
           });
         }
-      })
+      }))
     }))
   });
-};
+};
+OptionGrid.displayName = 'OptionGrid';

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

@@ -1,15 +1,7 @@
 export declare const groupStyle: string;
 export declare const groupLabelStyle: string;
 export declare const descriptionStyle: string;
-export declare const styledOptionItem: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
+export declare const optionItemStyle: string;
 export declare const itemLabelStyle: string;
-export declare const checkbox: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
+export declare const checkbox: string;
 //# sourceMappingURL=OptionList.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,QAA0C,CAAC;AAElE,eAAO,MAAM,eAAe,QAK1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAI3B,CAAC;AAIH,eAAO,MAAM,gBAAgB;;;;EA2C3B,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AAmBH,eAAO,MAAM,QAAQ;;;;EA2BnB,CAAC"}
+{"version":3,"file":"OptionList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAW3B,CAAC;AAGH,eAAO,MAAM,eAAe,QA4C1B,CAAC;AAEH,eAAO,MAAM,cAAc,QAIzB,CAAC;AAGH,eAAO,MAAM,QAAQ,QAmCnB,CAAC"}