@autoguru/overdrive 4.35.1 → 4.36.0

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":"AACA,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,76 @@
+"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, { 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 { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { IconTick } from "./IconTick.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(IconTick, {})
+      })), _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/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAgC,MAAM,YAAY,CAAC;AAMrE,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,eAAe,GACxC,IAAI,CACH,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,UAAU,CACxC,GAAG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAiEjD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAgB,MAAM,YAAY,CAAC;AAOrD,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,eAAe,GACxC,IAAI,CACH,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,UAAU,CACxC,GAAG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAiEjD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Switch/Switch.js

@@ -9,9 +9,10 @@ import { useToggleState } from '@react-stately/toggle';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useRef } from 'react';
-import { useSwitch, useFocusRing, VisuallyHidden } from 'react-aria';
+import { useSwitch, useFocusRing } from 'react-aria';
 import { Box, useBoxStyles } from "../Box/index.js";
 import { useTextStyles } from "../Text/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import * as styles from "./Switch.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Switch = _ref => {

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

@@ -1,2 +1,2 @@
-export declare const root: string;
+export declare const visuallyHidden: string;
 //# sourceMappingURL=VisuallyHidden.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.css.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAKf,CAAC"}
+{"version":3,"file":"VisuallyHidden.css.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAWzB,CAAC"}

package/dist/components/VisuallyHidden/VisuallyHidden.css.js

@@ -3,10 +3,16 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/VisuallyHidden/VisuallyHidden.css.ts", "@autoguru/overdrive");
 import { style } from '@vanilla-extract/css';
-export const root = style({
+export const visuallyHidden = style({
   clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
   height: 1,
+  margin: -1,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  userSelect: 'none',
   whiteSpace: 'nowrap',
   width: 1
-}, "root");
+}, "visuallyHidden");
 __vanilla_filescope__.endFileScope();

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,9 +1,6 @@
-import { ComponentPropsWithoutRef, FunctionComponent, ReactNode } from 'react';
-import { Box } from '../Box';
-export interface Props {
-    is?: ComponentPropsWithoutRef<typeof Box>['is'];
-    children?: ReactNode;
-}
-export declare const VisuallyHidden: FunctionComponent<Props>;
+import * as React from 'react';
+import { type BoxProps } from '../Box';
+type VisuallyHiddenProps = Pick<BoxProps, 'as' | 'children' | 'is'>;
+export declare const VisuallyHidden: ({ children, ...props }: VisuallyHiddenProps) => React.JSX.Element;
 export default VisuallyHidden;
 //# sourceMappingURL=VisuallyHidden.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,MAAM,WAAW,KAAK;IACrB,EAAE,CAAC,EAAE,wBAAwB,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,KAAK,CAUnD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI5C,KAAK,mBAAmB,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;AAOpE,eAAO,MAAM,cAAc,2BAA4B,mBAAmB,sBAIzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -1,21 +1,22 @@
 "use strict";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["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 * as React from 'react';
 import { Box } from "../Box/index.js";
-import * as styles from "./VisuallyHidden.css.js";
+import { visuallyHidden } from "./VisuallyHidden.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const VisuallyHidden = _ref => {
   let {
-    children,
-    is
-  } = _ref;
-  return _jsx(Box, {
-    is: is,
-    position: "absolute",
-    overflow: "hidden",
-    userSelect: "none",
-    className: styles.root,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return _jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
+    className: visuallyHidden,
     children: children
-  });
+  }));
 };
 export default VisuallyHidden;

package/dist/stories/helpers/index.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { type Sprinkles } from '../../styles/sprinkles.css';
+import { type ODStyle } from '../../styles/sprinkles.css';
 import { type RecipeStackProps } from '../../styles/stack.css';
 import { type VariantColourSwatchProps } from './styles.css';
 type ElementAttributes = React.ComponentPropsWithoutRef<'div'>;
 type FilteredAttributes = Pick<ElementAttributes, 'className' | 'style'>;
 type ComponentProps<P> = React.PropsWithChildren<P & FilteredAttributes>;
-export declare const Box: ({ children, className, style, ...props }: ComponentProps<Sprinkles>) => React.JSX.Element;
-type StackSprinkles = Pick<Sprinkles, 'alignItems' | 'flexDirection' | 'flexWrap' | 'gap' | 'justifyContent'>;
+export declare const Box: ({ children, className, style, ...props }: ComponentProps<ODStyle>) => React.JSX.Element;
+type StackSprinkles = Pick<ODStyle, 'alignItems' | 'flexDirection' | 'flexWrap' | 'gap' | 'justifyContent'>;
 export declare const Stack: ({ alignItems, children, className, flexDirection, flexWrap, gap, horizontal, justifyContent, space, style, ...props }: ComponentProps<StackSprinkles & RecipeStackProps>) => React.JSX.Element;
-type ColourSwatchProps = ComponentProps<Omit<Sprinkles, 'size'> & VariantColourSwatchProps>;
+type ColourSwatchProps = ComponentProps<Omit<ODStyle, 'size'> & VariantColourSwatchProps>;
 export declare const ColourSwatch: ({ shape, size, ...props }: ColourSwatchProps) => React.JSX.Element;
-export { type Sprinkles } from '../../styles/sprinkles.css';
+export { type ODStyle } from '../../styles/sprinkles.css';
 //# sourceMappingURL=index.d.ts.map

package/dist/stories/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/stories/helpers/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAS,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAEN,KAAK,wBAAwB,EAC7B,MAAM,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAC/D,KAAK,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC;AACzE,KAAK,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;AAEzE,eAAO,MAAM,GAAG,6CAKb,eAAe,SAAS,CAAC,sBAI3B,CAAC;AAEF,KAAK,cAAc,GAAG,IAAI,CACzB,SAAS,EACT,YAAY,GAAG,eAAe,GAAG,UAAU,GAAG,KAAK,GAAG,gBAAgB,CACtE,CAAC;AACF,eAAO,MAAM,KAAK,0HAYf,eAAe,cAAc,GAAG,gBAAgB,CAAC,sBAkBnD,CAAC;AAEF,KAAK,iBAAiB,GAAG,cAAc,CACtC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAClD,CAAC;AACF,eAAO,MAAM,YAAY,8BAA+B,iBAAiB,sBAExE,CAAC;AAEF,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/stories/helpers/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAS,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAEN,KAAK,wBAAwB,EAC7B,MAAM,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAC/D,KAAK,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC;AACzE,KAAK,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;AAEzE,eAAO,MAAM,GAAG,6CAKb,eAAe,OAAO,CAAC,sBAIzB,CAAC;AAEF,KAAK,cAAc,GAAG,IAAI,CACzB,OAAO,EACP,YAAY,GAAG,eAAe,GAAG,UAAU,GAAG,KAAK,GAAG,gBAAgB,CACtE,CAAC;AACF,eAAO,MAAM,KAAK,0HAYf,eAAe,cAAc,GAAG,gBAAgB,CAAC,sBAkBnD,CAAC;AAEF,KAAK,iBAAiB,GAAG,cAAc,CACtC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAChD,CAAC;AACF,eAAO,MAAM,YAAY,8BAA+B,iBAAiB,sBAExE,CAAC;AAEF,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/styles/focusOutline.css.d.ts

@@ -0,0 +1,3 @@
+import { ODStyle } from './sprinkles.css';
+export declare const focusOutline: ODStyle;
+//# sourceMappingURL=focusOutline.css.d.ts.map

package/dist/styles/focusOutline.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusOutline.css.d.ts","sourceRoot":"","sources":["../../lib/styles/focusOutline.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,eAAO,MAAM,YAAY,EAAE,OAK1B,CAAC"}

package/dist/styles/focusOutline.css.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/styles/focusOutline.css.ts", "@autoguru/overdrive");
+export const focusOutline = {
+  outlineColor: 'link',
+  outlineStyle: 'solid',
+  outlineOffset: 'md',
+  outlineWidth: {
+    initial: 'none',
+    focusVisible: 'default'
+  }
+};
+__vanilla_filescope__.endFileScope();