@autoguru/overdrive 4.32.0 → 4.33.0

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AAK1D,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CACrC;AAcD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAmD1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AAK1D,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CACrC;AAoBD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAmD1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Badge/Badge.js

@@ -7,14 +7,14 @@ import { useTextStyles } from "../Text/index.js";
 import * as styles from "./Badge.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const paddingXMap = {
-  'small': '1',
-  'standard': '1',
-  'large': '4'
+  small: '1',
+  standard: '1',
+  large: '4'
 };
 const paddingYMap = {
-  'small': '1',
-  'standard': '1',
-  'large': '4'
+  small: '1',
+  standard: '1',
+  large: '4'
 };
 export const Badge = _ref => {
   let {

package/dist/components/Image/stories.js

@@ -3,6 +3,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import isChromatic from 'chromatic/isChromatic';
 import * as React from 'react';
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -10,7 +11,8 @@ import { ImageServerProvider, widthMap } from "./ImageServerProvider.js";
 import { Image } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const sizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
+const sizeOptions = isChromatic() ? ['8'] : ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
+const qualityOptions = isChromatic() ? ['70'] : [1, 20, 40, 60, 80, 100];
 export default {
   title: 'Foundation/Image/Image',
   component: Image,
@@ -124,7 +126,7 @@ const AllQualityTemplate = args => _jsx(ImageServerProvider, {
     },
     children: _jsx(Stack, {
       space: "5",
-      children: [1, 20, 40, 60, 80, 100].map(quality => _jsxs(Stack, {
+      children: qualityOptions.map(quality => _jsxs(Stack, {
         space: "1",
         children: [_jsxs(Text, {
           children: ["Quality: ", _jsx(Text, {

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAc5D,UAAU,KACT,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,EAC9D,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,oTA+CvB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAc5D,UAAU,KACT,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,EAC9D,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,oTA8CvB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,5 +1,7 @@
-export declare const handle: Record<"transition" | "default", string>;
+export declare const handle: Record<"transition" | "default" | "disabled", string>;
 export declare const toggled: string;
+export declare const untoggled: string;
 export declare const disabled: Record<"default" | "toggled", string>;
+export declare const focus: string;
 export declare const root: string;
 //# sourceMappingURL=Switch.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,0CAcjB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAEH,eAAO,MAAM,QAAQ,uCAkBnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAUf,CAAC"}
+{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,uDA0BjB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAEH,eAAO,MAAM,SAAS,QAUpB,CAAC;AAEH,eAAO,MAAM,QAAQ,uCAmBnB,CAAC;AAEH,eAAO,MAAM,KAAK,QAEhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAWf,CAAC"}

package/dist/components/Switch/Switch.css.js

@@ -5,51 +5,79 @@ __vanilla_filescope__.setFileScope("lib/components/Switch/Switch.css.ts", "@auto
 import { style, styleVariants } from '@vanilla-extract/css';
 import { themeContractVars as vars } from "../../themes/theme.css.js";
 const handleSize = '24px';
-const handleOffset = '2px';
+const handleOffset = '3px';
 const borderSize = '1px';
 export const handle = styleVariants({
+  disabled: {
+    border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.mild)
+  },
   default: {
-    borderColor: vars.border.colours.gray,
+    borderSize: "".concat(borderSize),
     top: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
-    left: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
-    width: "".concat(handleSize),
-    height: "".concat(handleSize),
+    left: "calc(1.5 * ".concat(handleOffset, ")"),
+    width: "calc(".concat(handleSize, " - (2 * ").concat(handleOffset, "))"),
+    height: "calc(".concat(handleSize, " - (2 * ").concat(handleOffset, "))"),
     transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
-    willChange: 'transform'
+    willChange: 'transform',
+    selectors: {
+      '&:hover': {
+        transform: 'scale(0.9)'
+      }
+    }
   },
   transition: {
     transform: "translateX(calc(".concat(handleSize, " - (2 * ").concat(handleOffset, ")))"),
-    borderColor: vars.colours.intent.primary.background.strong
+    selectors: {
+      '&:hover': {
+        transform: "translateX(calc(".concat(handleSize, " - (2 * ").concat(handleOffset, "))) scale(0.9)")
+      }
+    }
   }
 }, "handle");
 export const toggled = style({
-  borderColor: vars.colours.intent.primary.background.strong,
-  backgroundColor: vars.colours.intent.primary.background.standard
+  border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.strong),
+  backgroundColor: vars.colours.intent.primary.background.strong
 }, "toggled");
+export const untoggled = style({
+  border: "".concat(borderSize, " solid color-mix(in oklch, ").concat(vars.colours.intent.primary.background.standard, ", transparent 60%)"),
+  backgroundColor: vars.colours.intent.primary.background.mild,
+  transition: '0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
+  selectors: {
+    '&:hover': {
+      borderColor: vars.colours.intent.primary.background.strong,
+      backgroundColor: vars.colours.intent.primary.background.strong
+    }
+  }
+}, "untoggled");
 export const disabled = styleVariants({
   default: {
     selectors: {
       '&[aria-disabled=true]': {
         cursor: 'not-allowed',
-        borderColor: vars.border.colours.light,
-        backgroundColor: vars.border.colours.light
+        border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.mild),
+        backgroundColor: 'white'
       }
     }
   },
   toggled: {
     selectors: {
       '&[aria-disabled=true]': {
-        borderColor: vars.border.colours.light,
-        backgroundColor: vars.colours.intent.primary.background.mild
+        cursor: 'not-allowed',
+        border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.mild),
+        backgroundColor: 'white'
       }
     }
   }
 }, "disabled");
+export const focus = style({
+  outline: "calc(".concat(handleOffset, " - ").concat(borderSize, ") solid ").concat(vars.colours.intent.brand.background.standard)
+}, "focus");
 export const root = style({
-  width: "calc((2 * ".concat(handleSize, ") + ").concat(handleOffset, " - 2 * ").concat(borderSize, ")"),
-  height: "calc(".concat(handleSize, " + (").concat(handleOffset, " * 2))"),
+  width: "calc((2 * ".concat(handleSize, ") - 2 * ").concat(borderSize, ")"),
+  height: "".concat(handleSize),
+  top: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
+  left: "calc(1.5 * ".concat(handleOffset, ")"),
   transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
-  border: "".concat(borderSize, " solid ").concat(vars.border.colours.light),
   selectors: {
     ["&:not(".concat(disabled.default, "):not(").concat(disabled.toggled, "):focus")]: {
       borderColor: vars.colours.intent.information.background.standard

package/dist/components/Switch/Switch.d.ts

@@ -1,10 +1,11 @@
 import { AnchorHTMLAttributes, FunctionComponent } from 'react';
-export interface Props extends Omit<AnchorHTMLAttributes<HTMLButtonElement>, 'children' | 'style' | 'is' | 'onChange'> {
+import { useSwitch } from 'react-aria';
+type AriaSwitchProps = Parameters<typeof useSwitch>[0];
+export type SwitchProps = AriaSwitchProps & Omit<AnchorHTMLAttributes<HTMLButtonElement>, 'children' | 'style' | 'is' | 'onChange'> & {
     className?: string;
     disabled?: boolean;
     toggled?: boolean;
-    onChange?(value: boolean): void;
-}
-export declare const Switch: FunctionComponent<Props>;
+};
+export declare const Switch: FunctionComponent;
 export default Switch;
 //# sourceMappingURL=Switch.d.ts.map

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":"AAEA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAO7E,MAAM,WAAW,KAChB,SAAQ,IAAI,CACX,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,UAAU,CACxC;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAwD3C,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,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,iBAiEpB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Switch/Switch.js

@@ -2,63 +2,80 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "disabled", "toggled", "onChange"];
+const _excluded = ["className", "disabled", "toggled", "isSelected", "isDisabled"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useToggleState } from '@react-stately/toggle';
 import clsx from 'clsx';
 import * as React from 'react';
-import { useCallback } from 'react';
+import { useRef } from 'react';
+import { useSwitch, useFocusRing, VisuallyHidden } from 'react-aria';
 import { Box, useBoxStyles } from "../Box/index.js";
 import { useTextStyles } from "../Text/index.js";
 import * as styles from "./Switch.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const Switch = _ref => {
   let {
-      className = '',
-      disabled = false,
-      toggled = false,
-      onChange
+      className,
+      disabled,
+      toggled,
+      isSelected,
+      isDisabled
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const onToggle = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    if (typeof onChange === 'function') {
-      onChange(!toggled);
-    }
-  }, [disabled, toggled]);
-  return _jsx(Box, _objectSpread(_objectSpread({
-    is: "button"
-  }, rest), {}, {
-    className: clsx(styles.root, useTextStyles({
-      size: '5'
-    }), {
-      [styles.toggled]: toggled,
-      [styles.disabled.default]: disabled,
-      [styles.disabled.toggled]: toggled && disabled
-    }, className),
-    tabIndex: disabled ? -1 : void 0,
-    borderRadius: "pill",
-    position: "relative",
-    "aria-disabled": disabled,
-    "aria-label": "toggle ".concat(toggled ? 'on' : 'off'),
-    onClick: onToggle,
-    children: _jsx(Box, {
-      borderWidth: "1",
-      position: "absolute",
-      borderRadius: "pill",
-      backgroundColour: "white",
-      padding: "none",
-      boxShadow: "2",
-      className: clsx(styles.handle.default, useBoxStyles({
-        is: 'button'
-      }), useTextStyles({
-        colour: 'white'
+    incomingProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread(_objectSpread({}, incomingProps), {}, {
+    isDisabled: isDisabled || disabled,
+    isSelected: isSelected || toggled
+  });
+  const state = useToggleState(props);
+  const ref = useRef(null);
+  const {
+    inputProps
+  } = useSwitch(props, state, ref);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+  return _jsxs("label", {
+    children: [_jsx(VisuallyHidden, {
+      children: _jsx("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), focusProps), {}, {
+        ref: ref
+      }))
+    }), _jsx(Box, {
+      className: clsx(styles.root, useTextStyles({
+        size: '5'
       }), {
-        [styles.handle.transition]: toggled
+        [styles.disabled.default]: inputProps.disabled,
+        [styles.disabled.toggled]: state.isSelected && inputProps.disabled,
+        [styles.toggled]: state.isSelected,
+        [styles.untoggled]: !state.isSelected,
+        [styles.focus]: isFocusVisible
+      }, className),
+      tabIndex: inputProps.disabled ? -1 : void 0,
+      borderRadius: "pill",
+      position: "relative",
+      "aria-disabled": inputProps.disabled,
+      "aria-label": "toggle ".concat(state.isSelected ? 'on' : 'off'),
+      children: _jsx(Box, {
+        borderWidth: "1",
+        position: "absolute",
+        borderRadius: "pill",
+        backgroundColour: "white",
+        padding: "none",
+        pointerEvents: inputProps.disabled ? 'none' : void 0,
+        boxShadow: "2",
+        className: clsx(styles.handle.default, useBoxStyles({
+          is: 'button'
+        }), useTextStyles({
+          colour: 'white'
+        }), {
+          [styles.handle.transition]: state.isSelected,
+          [styles.handle.default]: inputProps.disabled,
+          [styles.handle.disabled]: inputProps.disabled
+        })
       })
-    })
-  }));
+    }), props.children]
+  });
 };
 export default Switch;

package/dist/components/Switch/stories.js

@@ -1,8 +1,7 @@
 "use strict";
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["onChange", "value"];
+import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { action } from '@storybook/addon-actions';
@@ -14,39 +13,30 @@ export default {
   component: Switch
 };
 const Template = _ref => {
-  let {
-      onChange: incomingOnChange,
-      value
-    } = _ref,
-    args = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Switch, _objectSpread({
-    onChange: stepValue => {
-      setValue(stepValue);
-      incomingOnChange(stepValue);
-    },
-    value: value
-  }, args));
+  let args = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return _jsx(Switch, _objectSpread({}, args));
 };
 const standardProps = {
-  disabled: false,
-  toggled: false,
-  onChange: action('onChange')
+  isDisabled: false,
+  isSelected: false,
+  onChange: action('onChange'),
+  className: 'toggleButton-class'
 };
 export const untoggled = Template.bind(standardProps);
 untoggled.args = standardProps;
 const untoggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
-  disabled: true
+  isDisabled: true
 });
 export const untoggledDisabled = Template.bind(untoggledDisabledProps);
 untoggledDisabled.args = untoggledDisabledProps;
 const toggledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
-  toggled: true
+  isSelected: true
 });
 export const toggled = Template.bind(toggledProps);
 toggled.args = toggledProps;
 const toggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
-  toggled: true,
-  disabled: true
+  isSelected: true,
+  isDisabled: true
 });
 export const toggledDisabled = Template.bind(toggledDisabledProps);
 toggledDisabled.args = toggledDisabledProps;

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

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../lib/components/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,aAAa,uWA6BzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../lib/components/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,aAAa,uWA2BzB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/themes/neutral/tokens.js

@@ -115,7 +115,7 @@ export const tokens = {
       primary: {
         background: {
           standard: colours.black['900'],
-          mild: colours.black['400'],
+          mild: colours.black['300'],
           strong: colours.black['900']
         },
         foreground: white,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.32.0",
+	"version": "4.33.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -42,32 +42,36 @@
 		"@autoguru/tsconfig": "1.0.80",
 		"@autoguru/utilities": "1.1.1",
 		"@popperjs/core": "2.11.6",
+		"@react-stately/toggle": "3.7.7",
 		"@types/react": "^18.0.17",
 		"@types/react-dom": "^18.0.6",
-		"@vanilla-extract/dynamic": "^2.0.3",
+		"@vanilla-extract/dynamic": "^2.1.2",
 		"clsx": "1.2.1",
 		"colord": "2.9.3",
-		"csstype": "3.1.1",
+		"csstype": "^3.1.3",
 		"deepmerge": "^4.2.2",
 		"eslint-plugin-jest": "26.9.0",
 		"intersection-observer": "^0.12.2",
 		"react": "^18.2.0",
+		"react-aria": "3.34.2",
 		"react-dom": "^18.2.0",
 		"react-focus-lock": "2.9.4",
 		"react-intersection-observer": "^9.4.3",
 		"react-keyed-flatten-children": "1.3.0",
 		"react-swipeable": "^7.0.0",
+		"react-types": "0.1.0",
 		"webpack": "5.77.0"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": "^1.7.28",
 		"@autoguru/utilities": "^1.0.98",
 		"@popperjs/core": "^2.10.2",
-		"@vanilla-extract/dynamic": "^2.0.3",
+		"@vanilla-extract/dynamic": "^2.1.2",
 		"clsx": "^1.1.1",
 		"colord": "^2.0.1",
-		"csstype": "^3.0.7",
+		"csstype": "^3.1.3",
 		"react": ">=16.8",
+		"react-aria": "3.34.2",
 		"react-dom": ">=16.8",
 		"react-focus-lock": "^2.5.0",
 		"react-intersection-observer": ">=9.4.3",