@autoguru/overdrive 4.43.9-next.0 → 4.43.10-next.0

package/dist/components/OptionList/OptionListItem.js

@@ -13,6 +13,10 @@ import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { OptionListContext } from "./OptionList.js";
 import { checkbox, itemLabelStyle, styledOptionItem } from "./OptionList.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The OptionListItem is used to populate OptionList. They are outlined with a large interactive area and flexible
+ * label content layout.
+ */
 export const OptionListItem = props => {
   const ref = useRef(null);
   const state = useContext(OptionListContext);
@@ -24,30 +28,30 @@ export const OptionListItem = props => {
     isFocusVisible,
     focusProps
   } = useFocusRing();
-  return _jsxs("label", _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs("label", _objectSpread(_objectSpread({
     className: styledOptionItem()
   }, dataAttrs({
     'focus-visible': isFocusVisible
   })), {}, {
-    children: [_jsx(VisuallyHidden, {
-      children: _jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
+    children: [/*#__PURE__*/_jsx(VisuallyHidden, {
+      children: /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
         ref: ref
       }))
-    }), _jsxs("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: sprinkles({
         display: 'flex',
         gap: '2',
         width: 'full'
       }),
-      children: [_jsx("div", _objectSpread(_objectSpread({
+      children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
         className: checkbox()
       }, dataAttrs({
         checked: isSelected
       })), {}, {
-        children: _jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: CheckIcon
         })
-      })), _jsx("div", {
+      })), /*#__PURE__*/_jsx("div", {
         className: itemLabelStyle,
         children: props.children
       })]
@@ -55,19 +59,22 @@ export const OptionListItem = props => {
   }));
 };
 OptionListItem.displayName = 'OptionList.Item';
+/**
+ * Helper component part to display a checkbox button label with a second column justified to the end
+ */
 export const ItemSplitLabel = _ref => {
   let {
     children,
     content
   } = _ref;
   if (!children && !content) return null;
-  return _jsx("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: sprinkles({
       display: 'flex',
       gap: '2',
       justifyContent: 'space-between'
     }),
-    children: children !== null && children !== void 0 ? children : content === null || content === void 0 ? void 0 : content.map(item => _jsx("span", {
+    children: children !== null && children !== void 0 ? children : content === null || content === void 0 ? void 0 : content.map(item => /*#__PURE__*/_jsx("span", {
       children: item
     }, item))
   });

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

@@ -1,3 +1,2 @@
 export declare const root: Record<"default" | "firstOccurrence", string>;
-export declare const item: string;
 //# sourceMappingURL=OrderedList.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrderedList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OrderedList/OrderedList.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,+CAOf,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC"}
+{"version":3,"file":"OrderedList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OrderedList/OrderedList.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,+CAOf,CAAC"}

package/dist/components/OrderedList/OrderedList.css.js

@@ -2,7 +2,7 @@
 
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/OrderedList/OrderedList.css.ts", "@autoguru/overdrive");
-import { style, styleVariants } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const root = styleVariants({
   default: {
@@ -12,11 +12,4 @@ export const root = styleVariants({
     paddingLeft: `calc(${vars.space['6']} * 2)`
   }
 }, "root");
-export const item = style({
-  selectors: {
-    '& + &': {
-      marginTop: vars.space['2']
-    }
-  }
-}, "item");
 __vanilla_filescope__.endFileScope();

package/dist/components/OrderedList/OrderedList.d.ts

@@ -1,6 +1,6 @@
-import { type FunctionComponent, type OlHTMLAttributes, ReactNode } from 'react';
+import { FunctionComponent, OlHTMLAttributes, ReactNode } from 'react';
 type ListStyleType = 'decimal' | 'lower-roman' | 'lower-alpha' | 'upper-alpha';
-export interface OrderedListProps extends Pick<OlHTMLAttributes<HTMLOListElement>, 'start'> {
+export interface Props extends Pick<OlHTMLAttributes<HTMLOListElement>, 'start'> {
     type?: ListStyleType;
     className?: string;
     children?: ReactNode;
@@ -9,8 +9,8 @@ export interface ItemProps {
     className?: string;
     children?: ReactNode;
 }
-export declare const OrderedList: FunctionComponent<OrderedListProps> & {
+export declare const OrderedList: FunctionComponent<Props> & {
     Item: FunctionComponent<ItemProps>;
 };
-export {};
+export default OrderedList;
 //# sourceMappingURL=OrderedList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrderedList.d.ts","sourceRoot":"","sources":["../../../lib/components/OrderedList/OrderedList.tsx"],"names":[],"mappings":"AACA,OAAc,EAEb,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,SAAS,EAET,MAAM,OAAO,CAAC;AAQf,KAAK,aAAa,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CAAC;AAU/E,MAAM,WAAW,gBAChB,SAAQ,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAID,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAC/D,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CA+BnC,CAAC"}
+{"version":3,"file":"OrderedList.d.ts","sourceRoot":"","sources":["../../../lib/components/OrderedList/OrderedList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEN,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EAET,MAAM,OAAO,CAAC;AAQf,KAAK,aAAa,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CAAC;AAU/E,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAID,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IACpD,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CA+BnC,CAAC;AAUF,eAAe,WAAW,CAAC"}

package/dist/components/OrderedList/OrderedList.js

@@ -1,18 +1,19 @@
 "use strict";
 
 import clsx from 'clsx';
-import React, { createContext, useContext } from 'react';
+import * as React from 'react';
+import { createContext, useContext } from 'react';
 import { typographyStyles } from "../../styles/typography.css.js";
 import { Box } from "../Box/Box.js";
 import { Stack } from "../Stack/Stack.js";
 import * as styles from "./OrderedList.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const cycles = ['decimal', 'lower-roman', 'lower-alpha', 'upper-alpha', 'lower-roman'];
-const OrderedListContext = createContext(-1);
+const OrderedListContext = /*#__PURE__*/createContext(-1);
 export const OrderedList = _ref => {
   let {
     children,
-    className,
+    className = '',
     type = null,
     start
   } = _ref;
@@ -23,7 +24,7 @@ export const OrderedList = _ref => {
   } else {
     myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
   }
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "ol",
     paddingLeft: "6",
     marginTop: myCycle > 0 ? '2' : 'none',
@@ -37,9 +38,9 @@ export const OrderedList = _ref => {
     },
     start: start,
     odComponent: "ordered-list",
-    children: _jsx(OrderedListContext.Provider, {
+    children: /*#__PURE__*/_jsx(OrderedListContext.Provider, {
       value: myCycle,
-      children: _jsx(Stack, {
+      children: /*#__PURE__*/_jsx(Stack, {
         space: "2",
         children: children
       })
@@ -48,13 +49,14 @@ export const OrderedList = _ref => {
 };
 const Item = _ref2 => {
   let {
-    className,
+    className = '',
     children
   } = _ref2;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "li",
     className: className,
     children: children
   });
 };
-OrderedList.Item = Item;
+OrderedList.Item = Item;
+export default OrderedList;

package/dist/components/OutsideClick/OutsideClick.js

@@ -5,6 +5,8 @@ import { Children, cloneElement, useEffect, useRef } from 'react';
 import { noop } from "../../utils/index.js";
 export const useOutsideClick = (refs, onClickAway) => {
   const callbackRef = useRef(onClickAway);
+
+  // So we don't have to re-bind events when a callback gets updated, simply call the callback when the event fires.
   useEffect(() => {
     callbackRef.current = onClickAway;
   }, [onClickAway]);
@@ -36,7 +38,8 @@ export const OutsideClick = _ref => {
   const hasRef = Object.prototype.hasOwnProperty.call(child.props, 'ref');
   process.env.NODE_ENV !== "production" ? warning(!hasRef, 'This component overrides the child ref, use with caution.') : void 0;
   useOutsideClick([rootClickRef], onOutsideClick);
-  return cloneElement(child, {
+  return /*#__PURE__*/cloneElement(child, {
+    // @ts-expect-error Object literal may only specify known properties, and 'ref' does not exist in type
     ref: rootClickRef
   });
 };

package/dist/components/OverdriveProvider/FallbackProvider.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @deprecated `<OverdriveProvider>` includes the theme context and theme overrides
+ */
 export declare const FallbackProvider: ({ children }: React.PropsWithChildren) => React.JSX.Element;
 //# sourceMappingURL=FallbackProvider.d.ts.map

package/dist/components/OverdriveProvider/FallbackProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/FallbackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,gBAAgB,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAMrE,CAAC"}
+{"version":3,"file":"FallbackProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/FallbackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAMrE,CAAC"}

package/dist/components/OverdriveProvider/FallbackProvider.js

@@ -2,13 +2,17 @@
 
 import { warning } from '@autoguru/utilities';
 import React from 'react';
+
+/**
+ * @deprecated `<OverdriveProvider>` includes the theme context and theme overrides
+ */
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export const FallbackProvider = _ref => {
   let {
     children
   } = _ref;
   process.env.NODE_ENV !== "production" ? warning(false, 'This application is using a provider which is now deprecated. The theme context and overrides are available from <OverdriveProvider>') : void 0;
-  return _jsx(_Fragment, {
+  return /*#__PURE__*/_jsx(_Fragment, {
     children: children
   });
 };

package/dist/components/OverdriveProvider/OverdriveProvider.d.ts

@@ -8,10 +8,15 @@ import { type ColorOverrides } from './useColorOverrides';
 type ThemeContract = typeof overdriveTokens;
 type PortalMountPoint = React.RefObject<HTMLElement | null>;
 export interface ProviderProps {
+    /** The theme object to be used throughout the application */
     theme?: typeof baseTheme;
+    /** Custom breakpoints for responsive design */
     breakpoints?: BreakPoints;
+    /** When true, prevents applying theme styles at the body level */
     noBodyLevelTheming?: boolean;
+    /** Custom colour overrides for select theme tokens */
     colorOverrides?: Partial<ColorOverrides>;
+    /** Reference to an HTML element where portals should be mounted */
     portalMountPoint?: PortalMountPoint;
     children?: React.ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7E,KAAK,aAAa,GAAG,OAAO,eAAe,CAAC;AAC5C,KAAK,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAE5D,MAAM,WAAW,aAAa;IAE7B,KAAK,CAAC,EAAE,OAAO,SAAS,CAAC;IAEzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAEzC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,gBAAgB,GAAG,kBAAkB,CAAC;IAClE,UAAU,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC;CACpB;AAMD,eAAO,MAAM,QAAQ,uBAIpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,aAInC,CAAC;AAUF,eAAO,MAAM,QAAQ,GAAI,yFAOtB,aAAa,sBAyDf,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAK7B,CAAC"}
+{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7E,KAAK,aAAa,GAAG,OAAO,eAAe,CAAC;AAC5C,KAAK,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC7B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,SAAS,CAAC;IACzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,gBAAgB,GAAG,kBAAkB,CAAC;IAClE,UAAU,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC;CACpB;AAMD,eAAO,MAAM,QAAQ,uBAIpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,aAInC,CAAC;AAUF,eAAO,MAAM,QAAQ,GAAI,yFAOtB,aAAa,sBAyDf,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAK7B,CAAC"}

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -11,8 +11,8 @@ import { makeRuntimeTokens } from "../../themes/makeTheme.js";
 import { isBrowser } from "../../utils/index.js";
 import { useColorOverrides } from "./useColorOverrides.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const OverdriveContext = createContext(null);
-const RuntimeTokensContext = createContext(null);
+const OverdriveContext = /*#__PURE__*/createContext(null);
+const RuntimeTokensContext = /*#__PURE__*/createContext(null);
 const msgInvariantError = "You haven't used an `<OverdriveProvider>`.";
 export const useTheme = () => {
   const context = useContext(OverdriveContext);
@@ -46,6 +46,8 @@ export const Provider = _ref => {
     portalMountPoint,
     vars: theme.vars
   }), [colorOverrides, portalMountPoint, styles, theme]);
+
+  // Body Level Theming
   useEffect(() => {
     if (!isBrowser || noBodyLevelTheming || document.body.classList.contains(theme.themeRef)) return;
     document.body.classList.add(theme.themeRef);
@@ -53,17 +55,19 @@ export const Provider = _ref => {
       document.body.classList.remove(theme.themeRef);
     };
   }, [noBodyLevelTheming, theme]);
+
+  // Check portal mount point ref
   useEffect(() => {
     if (portalMountPoint !== null && portalMountPoint !== void 0 && portalMountPoint.current && !isSafeElement(portalMountPoint.current)) {
       console.error('Unsafe portal mount point detected');
       portalMountPoint.current = null;
     }
   }, [portalMountPoint]);
-  return _jsx(OverdriveContext.Provider, {
+  return /*#__PURE__*/_jsx(OverdriveContext.Provider, {
     value: themeValues,
-    children: _jsx(RuntimeTokensContext.Provider, {
+    children: /*#__PURE__*/_jsx(RuntimeTokensContext.Provider, {
       value: runtimeTokens,
-      children: _jsx("div", {
+      children: /*#__PURE__*/_jsx("div", {
         className: theme.themeRef,
         style: styles,
         "data-od-component": "provider",
@@ -72,6 +76,6 @@ export const Provider = _ref => {
     })
   });
 };
-export const OverdriveProvider = React.memo(props => _jsx(Provider, _objectSpread({}, props)), (prevProps, nextProps) => {
+export const OverdriveProvider = /*#__PURE__*/React.memo(props => /*#__PURE__*/_jsx(Provider, _objectSpread({}, props)), (prevProps, nextProps) => {
   return isEqual(prevProps, nextProps);
 });

package/dist/components/OverdriveProvider/ThemeOverrideDebugger.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useMemo } from 'react';
-import { passesAccessibilityContrast } from "../../themes/helpers.js";
+import { passesAccessibilityContrast } from "../../themes/helpers.js"; // import { ColourInput } from '../ColourInput';
 import { Column, Columns } from "../Columns/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -27,7 +27,7 @@ export const ThemeOverrideDebugger = () => {
     level: 'AAA',
     textSize: 'LARGE'
   }), [colorForeground, colorBackground]);
-  return _jsx(Columns, {
+  return /*#__PURE__*/_jsx(Columns, {
     space: "3",
     style: {
       position: 'fixed',
@@ -40,13 +40,13 @@ export const ThemeOverrideDebugger = () => {
       boxShadow: '0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%)',
       borderRadius: '4px'
     },
-    children: _jsx(Column, {
-      children: _jsxs(Stack, {
-        children: [_jsxs(Text, {
+    children: /*#__PURE__*/_jsx(Column, {
+      children: /*#__PURE__*/_jsxs(Stack, {
+        children: [/*#__PURE__*/_jsxs(Text, {
           children: ["AA: ", passesAA ? 'PASSED' : 'FAILED']
-        }), _jsxs(Text, {
+        }), /*#__PURE__*/_jsxs(Text, {
           children: ["AAA: ", passesAAA ? 'PASSED' : 'FAILED']
-        }), _jsx(Text, {
+        }), /*#__PURE__*/_jsx(Text, {
           colour: "primary",
           children: themeName
         })]

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

@@ -1,4 +1,5 @@
 export { OverdriveProvider, useRuntimeTokens, useTheme, } from './OverdriveProvider';
 export { FallbackProvider as ThemeProvider, FallbackProvider as ThemeOverrideProvider, } from './FallbackProvider';
-export { ThemeOverrideDebugger, ThemeOverrideDebugger as ThemeAnalyser, } from './ThemeOverrideDebugger';
+export { ThemeOverrideDebugger, // backwards compat only
+ThemeOverrideDebugger as ThemeAnalyser, } from './ThemeOverrideDebugger';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,GACR,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACN,gBAAgB,IAAI,aAAa,EACjC,gBAAgB,IAAI,qBAAqB,GACzC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACN,qBAAqB,EACrB,qBAAqB,IAAI,aAAa,GACtC,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,GACR,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACN,gBAAgB,IAAI,aAAa,EACjC,gBAAgB,IAAI,qBAAqB,GACzC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACN,qBAAqB,EAAE,wBAAwB;AAC/C,qBAAqB,IAAI,aAAa,GACtC,MAAM,yBAAyB,CAAC"}

package/dist/components/OverdriveProvider/index.js

@@ -2,4 +2,6 @@
 
 export { OverdriveProvider, useRuntimeTokens, useTheme } from "./OverdriveProvider.js";
 export { FallbackProvider as ThemeProvider, FallbackProvider as ThemeOverrideProvider } from "./FallbackProvider.js";
-export { ThemeOverrideDebugger, ThemeOverrideDebugger as ThemeAnalyser } from "./ThemeOverrideDebugger.js";
+export { ThemeOverrideDebugger,
+// backwards compat only
+ThemeOverrideDebugger as ThemeAnalyser } from "./ThemeOverrideDebugger.js";

package/dist/components/OverdriveProvider/useColorOverrides.d.ts

@@ -1,3 +1,4 @@
+/** valid colour override keys */
 declare const colorOverrideKeys: readonly ["primaryBackground", "primaryBackgroundMild", "primaryBackgroundStrong", "primaryBorder", "primaryForeground"];
 export type ColorOverrides = Record<(typeof colorOverrideKeys)[number], string>;
 export declare const useColorOverrides: (overrides: Partial<ColorOverrides> | undefined, themeMode: string) => {

package/dist/components/OverdriveProvider/useColorOverrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useColorOverrides.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/useColorOverrides.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,iBAAiB,0HAMb,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAYhF,eAAO,MAAM,iBAAiB,GAC7B,WAAW,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,EAC9C,WAAW,MAAM;;CAgEjB,CAAC"}
+{"version":3,"file":"useColorOverrides.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/useColorOverrides.ts"],"names":[],"mappings":"AAMA,iCAAiC;AACjC,QAAA,MAAM,iBAAiB,0HAMb,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAYhF,eAAO,MAAM,iBAAiB,GAC7B,WAAW,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,EAC9C,WAAW,MAAM;;CAgEjB,CAAC"}

package/dist/components/OverdriveProvider/useColorOverrides.js

@@ -4,6 +4,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useMemo } from 'react';
 import { shadedColour } from "../../themes/helpers.js";
 import { overdriveTokens } from "../../themes/theme.css.js";
+/** valid colour override keys */
 const colorOverrideKeys = ['primaryBackground', 'primaryBackgroundMild', 'primaryBackgroundStrong', 'primaryBorder', 'primaryForeground'];
 const isValidColor = color => {
   try {
@@ -40,22 +41,30 @@ export const useColorOverrides = (overrides, themeMode) => {
         intensity: 0.1
       });
     }
+    // slightly messy use of ts-expect-error but assignInlineVars only generates css vars to apply to a container
+    // any property that is undefined will not have an inline css var generated
     return assignInlineVars(overdriveTokens, {
       colours: {
         intent: {
           primary: {
             background: {
+              //@ts-expect-error no undefined
               standard: (_overrides$primaryBac = overrides.primaryBackground) !== null && _overrides$primaryBac !== void 0 ? _overrides$primaryBac : undefined,
+              //@ts-expect-error no undefined
               mild: (_mildPrimary = mildPrimary) !== null && _mildPrimary !== void 0 ? _mildPrimary : undefined,
+              //@ts-expect-error no undefined
               strong: (_strongPrimary = strongPrimary) !== null && _strongPrimary !== void 0 ? _strongPrimary : undefined
             },
+            //@ts-expect-error no undefined
             foreground: (_overrides$primaryFor = overrides.primaryForeground) !== null && _overrides$primaryFor !== void 0 ? _overrides$primaryFor : undefined,
+            //@ts-expect-error no undefined
             border: (_overrides$primaryBor = overrides.primaryBorder) !== null && _overrides$primaryBor !== void 0 ? _overrides$primaryBor : undefined
           }
         }
       },
       typography: {
         colour: {
+          //@ts-expect-error no undefined
           primary: (_overrides$primaryBac2 = overrides.primaryBackground) !== null && _overrides$primaryBac2 !== void 0 ? _overrides$primaryBac2 : undefined
         }
       }

package/dist/components/Pagination/Bubble.js

@@ -17,7 +17,7 @@ export const Bubble = _ref => {
   } = _ref;
   let backgroundColour = 'transparent';
   if (selected) backgroundColour = 'green900';else if (disabled) backgroundColour = 'gray200';
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "button",
     backgroundColour: backgroundColour,
     display: "flex",

package/dist/components/Pagination/Pagination.js

@@ -19,7 +19,7 @@ const NavButton = _ref => {
     label = '',
     onClick = noop
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "button",
     "aria-disabled": disabled,
     "aria-label": label,
@@ -39,7 +39,7 @@ const NavButton = _ref => {
       [styles.disabled]: disabled
     }),
     onClick: onClick,
-    children: _jsx(Icon, {
+    children: /*#__PURE__*/_jsx(Icon, {
       size: "medium",
       icon: icon
     })
@@ -49,18 +49,18 @@ const Loading = _ref2 => {
   let {
     placeholderBubblesNum = 3
   } = _ref2;
-  return _jsxs(Inline, {
+  return /*#__PURE__*/_jsxs(Inline, {
     as: "span",
     space: "3",
-    children: [_jsx(NavButton, {
+    children: [/*#__PURE__*/_jsx(NavButton, {
       disabled: true,
       icon: ChevronLeftIcon
     }), Array.from({
       length: placeholderBubblesNum
-    }).fill('').map((_, index) => _jsx(Bubble, {
+    }).fill('').map((_, index) => /*#__PURE__*/_jsx(Bubble, {
       disabled: true,
       className: styles.disabled
-    }, index)), _jsx(NavButton, {
+    }, index)), /*#__PURE__*/_jsx(NavButton, {
       disabled: true,
       icon: ChevronRightIcon
     })]
@@ -82,28 +82,28 @@ export const Pagination = _ref3 => {
     });
   }, [numPages]);
   const allowedActive = useMemo(() => withinBoundaries(activePage, numPages), [activePage, numPages]);
-  return !loading && total && pageSize && activePage && numPagesDisplayed ? _jsxs(Inline, {
+  return !loading && total && pageSize && activePage && numPagesDisplayed ? /*#__PURE__*/_jsxs(Inline, {
     as: "nav",
     space: "3",
     "aria-label": "pagination",
-    children: [_jsx(NavButton, {
+    children: [/*#__PURE__*/_jsx(NavButton, {
       disabled: activePage <= 1,
       label: "navigate back",
       icon: ChevronLeftIcon,
       onClick: handleClick(activePage - 1)
-    }), buildPagesList(numPages, allowedActive, numPagesDisplayed, numPages - numPagesDisplayed).map(num => _jsx(Bubble, {
+    }), buildPagesList(numPages, allowedActive, numPagesDisplayed, numPages - numPagesDisplayed).map(num => /*#__PURE__*/_jsx(Bubble, {
       gap: num < 0,
       selected: allowedActive === num,
       "aria-current": allowedActive === num ? 'page' : 'false',
       onClick: handleClick(num),
       children: num
-    }, num)), _jsx(NavButton, {
+    }, num)), /*#__PURE__*/_jsx(NavButton, {
       disabled: activePage >= numPages,
       label: "navigate forward",
       icon: ChevronRightIcon,
       onClick: handleClick(allowedActive + 1)
     })]
-  }) : _jsx(Loading, {
+  }) : /*#__PURE__*/_jsx(Loading, {
     placeholderBubblesNum: 3
   });
 };

package/dist/components/Portal/Portal.js

@@ -17,11 +17,14 @@ function Portal(_ref, ref) {
   } = useTheme();
   const [mountPoint, setMountPoint] = useState(null);
   const [mountNode, setMountNode] = useState(null);
+
+  // use local state to set the mount point if it populates after the component mounts
   useEffect(() => {
     if (!isBrowser || !(portalMountPoint !== null && portalMountPoint !== void 0 && portalMountPoint.current)) return;
     if (mountPoint !== portalMountPoint.current) {
       setMountPoint(portalMountPoint.current);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [portalMountPoint === null || portalMountPoint === void 0 ? void 0 : portalMountPoint.current]);
   useLayoutEffect(() => {
     if (!isBrowser) return;
@@ -41,10 +44,10 @@ function Portal(_ref, ref) {
     };
   }, [ref, mountNode]);
   if (!mountNode) return null;
-  return noThemedWrapper ? createPortal(children, mountNode) : createPortal(_jsx("div", {
+  return noThemedWrapper ? /*#__PURE__*/createPortal(children, mountNode) : /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
     className: themeClass,
     children: children
   }), mountNode);
 }
-const _Portal = forwardRef(Portal);
+const _Portal = /*#__PURE__*/forwardRef(Portal);
 export { _Portal as Portal };

package/dist/components/Positioner/Positioner.js

@@ -42,6 +42,8 @@ export const Positioner = _ref => {
   const placement = convertPlacement(alignment);
   const referenceRef = useRef(null);
   const popperInstanceRef = React.useRef(null);
+
+  // Whenever this component get's re-rendered, we want to proc an update to the popper instance.
   useEffect(() => {
     if (popperInstanceRef.current) {
       popperInstanceRef.current.update();
@@ -49,6 +51,8 @@ export const Positioner = _ref => {
   });
   const handleOpen = useCallback(() => {
     if (!referenceRef.current || !triggerRef.current || !isOpen) return;
+
+    // Delete the old instance, because we are about to create it again.
     if (popperInstanceRef.current) popperInstanceRef.current.destroy();
     const popper = createPopper(triggerRef.current, referenceRef.current, {
       placement,
@@ -64,23 +68,35 @@ export const Positioner = _ref => {
   const handleClose = () => {
     if (!popperInstanceRef.current) return;
     popperInstanceRef.current.destroy();
+    // GC the popper instance
     setRef(popperInstanceRef, null);
   };
+
+  /*
+  When one the handleOpen reference changes, we want to fire it off again,
+  and when we un-mount to destroy the instance also.
+   */
   useEffect(() => {
     handleOpen();
   }, [handleOpen]);
+
+  // Close when component un-mounts;
   useEffect(() => () => void handleClose(), []);
   useEffect(() => {
     if (!isOpen) {
       handleClose();
     }
   }, [isOpen]);
+
+  // Gets applied to the positioner div, that on mount will run this callback
   const handleRef = useCallback(node => {
     setRef(referenceRef, node);
     handleOpen();
   }, [handleOpen]);
-  return _jsx(Portal, {
-    children: _jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
+  /* eslint-enable react-hooks/rules-of-hooks */
+
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
       ref: handleRef,
       position: "fixed",
       className: styles.root,

package/dist/components/Positioner/alignment.js

@@ -1,6 +1,6 @@
 "use strict";
 
-export let EAlignment = function (EAlignment) {
+export let EAlignment = /*#__PURE__*/function (EAlignment) {
   EAlignment["TOP"] = "top";
   EAlignment["TOP_LEFT"] = "top_left";
   EAlignment["TOP_RIGHT"] = "top_right";

package/dist/components/ProgressBar/ProgressBar.js

@@ -3,7 +3,7 @@
 import { clamp } from '@autoguru/utilities';
 import * as React from 'react';
 import { Box } from "../Box/index.js";
-import * as styles from "./ProgressBar.css.js";
+import * as styles from "./ProgressBar.css.js"; // TODO: These should use the intent verbs
 import { jsx as _jsx } from "react/jsx-runtime";
 const colours = ['red', 'green', 'blue', 'yellow', 'neutral'];
 const backgroundColorMap = {
@@ -18,12 +18,12 @@ export const ProgressBar = _ref => {
     value = 0,
     colour = 'green'
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     className: styles.container,
     borderRadius: "1",
     backgroundColour: "gray100",
     odComponent: "progress-bar",
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       borderRadius: "1",
       backgroundColour: backgroundColorMap[colour],
       className: [styles.bar, styles.container],