@autoguru/overdrive 4.35.2 → 4.37.0

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":"AAGA,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;AAE5C,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,sBA+EzC,CAAC"}

package/dist/components/OptionGrid/OptionGrid.js

@@ -0,0 +1,101 @@
+"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 { CheckIcon } from '@autoguru/icons';
+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 { 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(Icon, {
+                icon: CheckIcon
+              })
+            }));
+          };
+          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/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"}

package/dist/components/OptionList/OptionList.css.js

@@ -0,0 +1,111 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/OptionList/OptionList.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 { tokens } from 'lib/themes/base/tokens';
+import { focusOutline } from "../../styles/focusOutline.css.js";
+import { odStyle } from "../../styles/sprinkles.css.js";
+export const styleGroup = odStyle({
+  marginTop: '6'
+});
+export const styleGroupLabel = odStyle({
+  font: 'xxl',
+  fontWeight: 'bold',
+  marginBottom: '3'
+});
+export const styleDescription = odStyle({
+  color: 'gray400',
+  font: 'md'
+});
+const buttonBorderRadius = tokens.border.radius['2'];
+const optionBorders = style({
+  selectors: {
+    ['&+&']: {
+      borderTopStyle: 'none'
+    },
+    ['&:first-child']: {
+      borderTopLeftRadius: buttonBorderRadius,
+      borderTopRightRadius: buttonBorderRadius
+    },
+    ['&:last-child']: {
+      borderBottomLeftRadius: buttonBorderRadius,
+      borderBottomRightRadius: buttonBorderRadius
+    }
+  }
+}, "optionBorders");
+export const styledOptionItem = recipe({
+  base: [{
+    userSelect: 'none'
+  }, odStyle({
+    background: {
+      initial: 'white',
+      hover: 'gray200',
+      focusVisible: 'gray200',
+      disabled: 'white'
+    },
+    borderColor: 'gray',
+    borderStyle: 'solid',
+    borderWidth: '1',
+    cursor: {
+      hover: 'pointer',
+      disabled: 'default'
+    },
+    display: 'flex',
+    gap: '2',
+    outlineColor: 'link',
+    outlineStyle: 'solid',
+    outlineOffset: 'md',
+    outlineWidth: {
+      initial: 'none',
+      focusVisible: 'default'
+    },
+    paddingX: '4',
+    paddingY: '3',
+    width: '100%'
+  }), optionBorders]
+}, "styledOptionItem");
+const checkboxHovered = style({
+  selectors: {
+    [`${styledOptionItem.classNames.base}:hover &:not([data-checked]):not([data-disabled])`]: {
+      color: tokens.colours.background.body,
+      background: tokens.colours.gamut.gray300,
+      transitionDuration: '15ms'
+    }
+  }
+}, "checkboxHovered");
+const checkboxTransition = style({
+  transitionProperty: 'background',
+  transitionTimingFunction: 'ease-in',
+  transitionDuration: '80ms'
+}, "checkboxTransition");
+export const checkbox = recipe({
+  base: [odStyle(_objectSpread(_objectSpread({
+    alignItems: 'center',
+    background: {
+      initial: 'white',
+      checked: 'gray900'
+    },
+    borderColor: {
+      initial: 'gray',
+      checked: 'dark'
+    },
+    borderStyle: 'solid',
+    borderRadius: '1',
+    borderWidth: '1',
+    color: {
+      initial: 'transparent',
+      checked: 'white'
+    },
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'center'
+  }, focusOutline), {}, {
+    size: '6'
+  })), checkboxTransition, checkboxHovered]
+}, "checkbox");
+__vanilla_filescope__.endFileScope();

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { type AriaCheckboxGroupProps } from 'react-aria';
+import { type CheckboxGroupState } from 'react-stately';
+import type { WithTestId } from '../../types';
+type ElementAttributes = Pick<React.ComponentPropsWithRef<'div'>, 'className' | 'ref' | 'style'>;
+export interface OptionListProps extends AriaCheckboxGroupProps, ElementAttributes {
+    label: AriaCheckboxGroupProps['label'];
+    description?: AriaCheckboxGroupProps['description'];
+    children?: React.ReactNode;
+    name?: AriaCheckboxGroupProps['name'];
+    defaultValue?: AriaCheckboxGroupProps['defaultValue'];
+    value?: AriaCheckboxGroupProps['value'];
+    onChange?: AriaCheckboxGroupProps['onChange'];
+}
+export declare const OptionListContext: React.Context<CheckboxGroupState | null>;
+export declare const OptionList: {
+    (props: WithTestId<OptionListProps>): React.JSX.Element;
+    Item: {
+        (props: {
+            value: string;
+            id?: string | undefined;
+            name?: string | undefined;
+            children?: React.ReactNode;
+            autoFocus?: boolean | undefined;
+            'aria-controls'?: string | undefined;
+            'aria-describedby'?: string | undefined;
+            'aria-details'?: string | undefined;
+            'aria-errormessage'?: string | undefined;
+            'aria-label'?: string | undefined;
+            'aria-labelledby'?: string | undefined;
+            onFocus?: ((e: React.FocusEvent<Element, Element>) => void) | undefined;
+            onBlur?: ((e: React.FocusEvent<Element, Element>) => void) | undefined;
+            onChange?: ((isSelected: boolean) => void) | undefined;
+            onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+            onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+            isDisabled?: boolean | undefined;
+            isReadOnly?: boolean | undefined;
+            onFocusChange?: ((isFocused: boolean) => void) | undefined;
+            excludeFromTabOrder?: boolean | undefined;
+            isRequired?: boolean | undefined;
+            isInvalid?: boolean | undefined;
+            validationState?: import("react-stately").ValidationState | undefined;
+            validationBehavior?: "aria" | "native" | undefined;
+            validate?: ((value: boolean) => true | import("@react-types/shared").ValidationError | null | undefined) | undefined;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    ItemSplitLabel: {
+        ({ children, content }: import("./OptionListItem").SplitLabelProps): React.JSX.Element | null;
+        displayName: string;
+    };
+};
+export {};
+//# sourceMappingURL=OptionList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,KAAK,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,KAAK,kBAAkB,EAAyB,MAAM,eAAe,CAAC;AAE/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAU9C,KAAK,iBAAiB,GAAG,IAAI,CAC5B,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,WAAW,GAAG,KAAK,GAAG,OAAO,CAC7B,CAAC;AAEF,MAAM,WAAW,eAChB,SAAQ,sBAAsB,EAC7B,iBAAiB;IAIlB,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAIpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,CAAC;IAItD,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAKxC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,0CAAiD,CAAC;AAchF,eAAO,MAAM,UAAU;YAAW,WAAW,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B5D,CAAC"}

package/dist/components/OptionList/OptionList.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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, { createContext } from 'react';
+import { useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { styleDescription, styleGroup, styleGroupLabel } from "./OptionList.css.js";
+import { OptionListItem, ItemSplitLabel } from "./OptionListItem.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const OptionListContext = createContext(null);
+export const OptionList = props => {
+  const {
+    children,
+    className,
+    description,
+    label,
+    ref,
+    style
+  } = props;
+  const elementAttrs = {
+    ref,
+    className,
+    style
+  };
+  const state = useCheckboxGroupState(props);
+  const {
+    groupProps,
+    labelProps,
+    descriptionProps
+  } = useCheckboxGroup(props, state);
+  return _jsxs("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, groupProps), elementAttrs), dataAttrs({
+    'test-id': props.testId
+  })), {}, {
+    children: [_jsx("div", _objectSpread(_objectSpread({}, labelProps), {}, {
+      className: styleGroupLabel,
+      children: label
+    })), description && _jsx("div", _objectSpread(_objectSpread({}, descriptionProps), {}, {
+      className: styleDescription,
+      children: description
+    })), _jsx(OptionListContext.Provider, {
+      value: state,
+      children: _jsx("div", {
+        className: styleGroup,
+        children: children
+      })
+    })]
+  }));
+};
+OptionList.Item = OptionListItem;
+OptionList.ItemSplitLabel = ItemSplitLabel;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type AriaCheckboxGroupItemProps } from 'react-aria';
+type FilteredCheckboxProps = Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;
+export declare const OptionListItem: {
+    (props: FilteredCheckboxProps): React.JSX.Element;
+    displayName: string;
+};
+export interface SplitLabelProps {
+    children?: React.ReactNode;
+    content?: string[];
+}
+export declare const ItemSplitLabel: {
+    ({ children, content }: SplitLabelProps): React.JSX.Element | null;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=OptionListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionListItem.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAIN,KAAK,0BAA0B,EAC/B,MAAM,YAAY,CAAC;AAUpB,KAAK,qBAAqB,GAAG,IAAI,CAChC,0BAA0B,EAC1B,iBAAiB,CACjB,CAAC;AAMF,eAAO,MAAM,cAAc;YAAW,qBAAqB;;CAuC1D,CAAC;AAIF,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAI3B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAKD,eAAO,MAAM,cAAc;4BAA2B,eAAe;;CAepE,CAAC"}

package/dist/components/OptionList/OptionListItem.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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';
+import React, { useContext, useRef } from 'react';
+import { useCheckboxGroupItem, useFocusRing, mergeProps } from 'react-aria';
+import { odStyle } from "../../styles/sprinkles.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Icon } from "../Icon/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { OptionListContext } from "./OptionList.js";
+import { checkbox, styledOptionItem } from "./OptionList.css.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const OptionListItem = props => {
+  const ref = useRef(null);
+  const state = useContext(OptionListContext);
+  const {
+    inputProps,
+    isSelected
+  } = useCheckboxGroupItem(props, state, ref);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+  return _jsxs("label", _objectSpread(_objectSpread({
+    className: styledOptionItem()
+  }, dataAttrs({
+    'focus-visible': isFocusVisible
+  })), {}, {
+    children: [_jsx(VisuallyHidden, {
+      children: _jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
+        ref: ref
+      }))
+    }), _jsxs("div", {
+      className: odStyle({
+        display: 'flex',
+        gap: '2',
+        width: '100%'
+      }),
+      children: [_jsx("div", _objectSpread(_objectSpread({
+        className: checkbox()
+      }, dataAttrs({
+        checked: isSelected
+      })), {}, {
+        children: _jsx(Icon, {
+          icon: CheckIcon
+        })
+      })), _jsx("div", {
+        className: odStyle({
+          alignSelf: 'center',
+          font: 'sm',
+          width: '100%'
+        }),
+        children: props.children
+      })]
+    })]
+  }));
+};
+OptionListItem.displayName = 'OptionList.Item';
+export const ItemSplitLabel = _ref => {
+  let {
+    children,
+    content
+  } = _ref;
+  if (!children && !content) return null;
+  return _jsx("div", {
+    className: odStyle({
+      display: 'flex',
+      gap: '2',
+      justifyContent: 'space-between'
+    }),
+    children: children !== null && children !== void 0 ? children : content === null || content === void 0 ? void 0 : content.map((item, idx) => _jsx("span", {
+      children: item
+    }, idx))
+  });
+};
+ItemSplitLabel.displayName = 'OptionList.ItemSplitLabel';

package/dist/components/OutsideClick/OutsideClick.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, ReactElement, RefObject } from 'react';
-export declare const useOutsideClick: (refs: Array<RefObject<HTMLElement>>, onClickAway: () => void) => void;
+export declare const useOutsideClick: (refs: Array<RefObject<HTMLElement | null>>, onClickAway: () => void) => void;
 export interface Props {
     children: ReactElement;
     onOutsideClick?(): void;