@autoguru/overdrive 4.44.1 → 4.44.2-next.1

package/dist/components/Actions/Actions.d.ts

@@ -1,9 +1,9 @@
-import { type FunctionComponent, type ReactElement } from 'react';
-import { type InlineProps } from '../Inline';
-export interface ActiontsProps extends Pick<InlineProps, 'noWrap'> {
+import React, { type ComponentProps, type ReactElement } from 'react';
+import { Columns } from '../Columns/Columns';
+export interface ActionsProps extends Partial<Pick<ComponentProps<typeof Columns>, 'noWrap' | 'wrappingDirection'>> {
     children: ReactElement | ReactElement[];
     className?: string;
-    wrappingDirection?: 'default' | 'reverse';
 }
-export declare const Actions: FunctionComponent<ActiontsProps>;
+export declare const Actions: ({ children, noWrap, wrappingDirection, }: ActionsProps) => React.JSX.Element;
+export default Actions;
 //# sourceMappingURL=Actions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../lib/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACjE,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAC1C;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAYpD,CAAC"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../lib/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,MAAM,WAAW,YAChB,SAAQ,OAAO,CACd,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,QAAQ,GAAG,mBAAmB,CAAC,CACpE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,GAAI,0CAIrB,YAAY,sBAMd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Actions/Actions.js

@@ -1,7 +1,9 @@
 "use strict";
 
-import React from 'react';
-import { Inline } from "../Inline/index.js";
+import React, { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import { Column } from "../Columns/Column.js";
+import { Columns } from "../Columns/Columns.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Actions = _ref => {
   let {
@@ -9,10 +11,13 @@ export const Actions = _ref => {
     noWrap,
     wrappingDirection
   } = _ref;
-  return _jsx(Inline, {
+  return /*#__PURE__*/_jsx(Columns, {
     space: "3",
     noWrap: noWrap,
-    reverse: wrappingDirection === 'reverse' ? true : undefined,
-    children: children
+    wrappingDirection: wrappingDirection,
+    children: Children.map(flattenChildren(children), child => /*#__PURE__*/_jsx(Column, {
+      children: child
+    }))
   });
-};
+};
+export default Actions;

package/dist/components/Alert/Alert.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 import { Button } from '../Button/Button';
 import { IntentStripe } from '../IntentStripe/IntentStripe';
 type IntentStripeProps = ComponentProps<typeof IntentStripe>;
@@ -9,6 +9,6 @@ export interface AlertProps extends IntentStripeProps {
     dismissible?: boolean;
     onRequestClose?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const Alert: FunctionComponent<AlertProps>;
-export {};
+export declare const Alert: ({ children, className, intent, inline, onRequestClose, dismissible, }: AlertProps) => React.JSX.Element;
+export default Alert;
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAM5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAuE/C,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAK5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,GAAI,uEAOnB,UAAU,sBA6DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -2,14 +2,14 @@
 
 import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
-import * as React from 'react';
+import React from 'react';
+import { sprinkles } from "../../styles/index.js";
+import { sprinklesLegacyText } from "../../styles/typography.css.js";
 import { Box } from "../Box/Box.js";
-import { boxStyles } from "../Box/boxStyles.js";
 import { Button } from "../Button/Button.js";
 import { Icon } from "../Icon/Icon.js";
 import { IntentStripe } from "../IntentStripe/IntentStripe.js";
 import { Text } from "../Text/Text.js";
-import { textStyles } from "../Text/textStyles.js";
 import * as styles from "./Alert.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const iconMapForIntent = {
@@ -27,14 +27,10 @@ export const Alert = _ref => {
     onRequestClose,
     dismissible = typeof onRequestClose === 'function'
   } = _ref;
-  const dismissBtnStyles = textStyles({
-    colour: 'muted'
-  });
-  const intentColourStyles = textStyles({
-    colour: intent
-  });
-  return _jsxs(Box, {
-    className: clsx(className, intentColourStyles, {
+  return /*#__PURE__*/_jsxs(Box, {
+    className: clsx(className, sprinklesLegacyText({
+      color: intent
+    }), {
       [styles.contained]: !inline
     }),
     role: "alert",
@@ -46,42 +42,44 @@ export const Alert = _ref => {
     borderRadius: "1",
     boxShadow: inline ? 'none' : '4',
     padding: "2",
-    "data-od-component": "alert",
-    children: [_jsx(IntentStripe, {
+    odComponent: "alert",
+    children: [/*#__PURE__*/_jsx(IntentStripe, {
       intent: intent
-    }), _jsxs(Box, {
+    }), /*#__PURE__*/_jsxs(Box, {
       display: "flex",
       gap: "2",
-      children: [_jsx(Box, {
-        alignSelf: "flex-start",
-        children: _jsx(Icon, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        alignSelf: "start",
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: iconMapForIntent[intent],
           size: "medium",
-          className: boxStyles({
+          className: sprinkles({
             marginY: '2',
             marginLeft: '2'
           })
         })
-      }), _jsx(Box, {
+      }), /*#__PURE__*/_jsx(Box, {
         alignSelf: "center",
         width: "auto",
-        className: textStyles({
+        className: sprinkles({
           colour: 'dark'
         }),
-        children: typeof children === 'string' ? _jsx(Text, {
+        children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
           children: children
         }) : children
-      }), _jsx(Box, {
+      }), /*#__PURE__*/_jsx(Box, {
         ml: "auto",
-        children: dismissible && _jsx(Button, {
+        children: dismissible && /*#__PURE__*/_jsx(Button, {
           minimal: true,
           rounded: true,
           variant: "secondary",
           size: "small",
           "aria-label": "close",
           onClick: onRequestClose,
-          children: _jsx(Icon, {
-            className: dismissBtnStyles,
+          children: /*#__PURE__*/_jsx(Icon, {
+            className: sprinkles({
+              colour: 'muted'
+            }),
             icon: WindowCloseIcon,
             size: "medium"
           })
@@ -89,4 +87,5 @@ export const Alert = _ref => {
       })]
     })]
   });
-};
+};
+export default Alert;

package/dist/components/Anchor/Anchor.d.ts

@@ -1,11 +1,12 @@
 import { IconType } from '@autoguru/icons';
-import React, { type ElementType } from 'react';
-import { type BoxLikeProps } from '../Box/useBox';
-declare const ANCHOR_TAG = "a";
-interface CustomProps {
+import { AnchorHTMLAttributes, ElementType, FunctionComponent, ReactElement, ReactNode } from 'react';
+import type { TestId } from '../../types';
+export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'as' | 'children' | 'is' | 'style'>, TestId {
+    as?: ElementType | ReactElement;
+    disabled?: boolean;
+    children?: ReactNode;
     icon?: IconType;
 }
-export type AnchorProps<E extends ElementType = typeof ANCHOR_TAG> = BoxLikeProps<E, CustomProps>;
-export declare const Anchor: <E extends ElementType = typeof ANCHOR_TAG>({ as, children, icon, ...props }: AnchorProps<E>) => React.JSX.Element;
-export {};
+export declare const Anchor: FunctionComponent<Props>;
+export default Anchor;
 //# sourceMappingURL=Anchor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvE,QAAA,MAAM,UAAU,MAAM,CAAC;AAEvB,UAAU,WAAW;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,UAAU,IAChE,YAAY,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAK9B,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,OAAO,UAAU,EAAE,kCAK/D,WAAW,CAAC,CAAC,CAAC,sBAgChB,CAAC"}
+{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EACN,oBAAoB,EAGpB,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM1C,MAAM,WAAW,KAChB,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,IAAI,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,CAClC,EACD,MAAM;IACP,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CA6C3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Anchor/Anchor.js

@@ -2,32 +2,40 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "children", "icon"];
+const _excluded = ["className", "as", "disabled", "testId", "children", "icon"];
 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, { cloneElement } from 'react';
+import clsx from 'clsx';
+import * as React from 'react';
+import { cloneElement, createElement, isValidElement } from 'react';
+import { elementStyles } from "../../styles/index.js";
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Box } from "../Box/Box.js";
-import { useBox } from "../Box/useBox.js";
 import { Icon } from "../Icon/Icon.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ANCHOR_TAG = 'a';
 export const Anchor = _ref => {
   let {
-      as = ANCHOR_TAG,
+      className,
+      as: Component = ANCHOR_TAG,
+      disabled = false,
+      testId,
       children,
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    Component,
-    componentProps,
-    reactElement
-  } = useBox(_objectSpread(_objectSpread({}, props), {}, {
-    alignItems: 'center',
-    as,
-    odComponent: 'anchor'
-  }));
-  const Content = () => _jsxs(Box, {
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread(_objectSpread({
+    className: clsx(elementStyles({
+      as: Component,
+      colour: 'link',
+      display: 'inline-flex'
+    }), focusOutlineStyle, className),
+    disabled
+  }, dataAttrs({
+    testid: testId
+  })), rest);
+  const content = /*#__PURE__*/_jsxs(Box, {
     as: "span",
     alignItems: "center",
     colour: "link",
@@ -35,17 +43,13 @@ export const Anchor = _ref => {
     fontSize: "4",
     fontWeight: "bold",
     gap: "2",
-    children: [icon && _jsx(Icon, {
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
       icon: icon,
       size: "small"
-    }), _jsx("span", {
+    }), /*#__PURE__*/_jsx("span", {
       children: children
     })]
   });
-  if (reactElement) {
-    return cloneElement(reactElement, componentProps, _jsx(Content, {}));
-  }
-  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
-    children: _jsx(Content, {})
-  }));
-};
+  return /*#__PURE__*/isValidElement(Component) ? /*#__PURE__*/cloneElement(Component, props, content) : /*#__PURE__*/createElement(Component, props, content);
+};
+export default Anchor;

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -10,6 +10,7 @@ const _excluded = ["autoFocus", "autoWidth", "inlineOptions", "fieldIcon", "sugg
   _excluded6 = ["onReset"];
 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; }
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 import { ChevronDownIcon, CloseIcon } from '@autoguru/icons';
 import { wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
@@ -28,7 +29,7 @@ import { withEnhancedInput } from "../private/InputBase/index.js";
 import * as styles from "./AutoSuggest.css.js";
 import { useLayoutSuggestionVisible } from "./useLayoutSuggestionVisible.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var ActionTypes = function (ActionTypes) {
+var ActionTypes = /*#__PURE__*/function (ActionTypes) {
   ActionTypes[ActionTypes["INPUT_CHANGE"] = 0] = "INPUT_CHANGE";
   ActionTypes[ActionTypes["INPUT_ESCAPE"] = 1] = "INPUT_ESCAPE";
   ActionTypes[ActionTypes["INPUT_ENTER"] = 2] = "INPUT_ENTER";
@@ -43,6 +44,7 @@ var ActionTypes = function (ActionTypes) {
 }(ActionTypes || {});
 const inputReducerFactory = suggestions => (prevState, action) => {
   switch (action.type) {
+    // eslint-disable-next-line sonarjs/prefer-default-last
     default:
     case ActionTypes.INPUT_CHANGE:
       {
@@ -114,7 +116,7 @@ const inputReducerFactory = suggestions => (prevState, action) => {
       }
   }
 };
-export const AutoSuggest = forwardRef(function AutoSuggest(_ref, ref) {
+export const AutoSuggest = /*#__PURE__*/forwardRef(function AutoSuggest(_ref, ref) {
   let {
       autoFocus = false,
       autoWidth = false,
@@ -173,7 +175,7 @@ export const AutoSuggest = forwardRef(function AutoSuggest(_ref, ref) {
     }, incomingOnFocus),
     onBlur: wrapEvent(() => setIsFocused(false), incomingOnBlur)
   }, textInputProps);
-  return !inlineOptions && !isDesktop && showModal ? _jsx(AutoSuggestFullscreenInput, _objectSpread(_objectSpread({}, props), {}, {
+  return !inlineOptions && !isDesktop && showModal ? /*#__PURE__*/_jsx(AutoSuggestFullscreenInput, _objectSpread(_objectSpread({}, props), {}, {
     attach: "NONE",
     borderMerged: "NONE",
     isFocused: isFocused,
@@ -181,7 +183,7 @@ export const AutoSuggest = forwardRef(function AutoSuggest(_ref, ref) {
     fieldIcon: fieldIcon,
     autoFocus: autoFocus,
     closeModal: closeModal
-  })) : _jsx(AutoSuggestInput, _objectSpread(_objectSpread({
+  })) : /*#__PURE__*/_jsx(AutoSuggestInput, _objectSpread(_objectSpread({
     ref: inputRef
   }, props), {}, {
     isFocused: isFocused,
@@ -191,7 +193,7 @@ export const AutoSuggest = forwardRef(function AutoSuggest(_ref, ref) {
     autoWidth: autoWidth
   }));
 });
-const AutoSuggestFullscreenInput = forwardRef(function AutoSuggestFullscreenInput(_ref2, ref) {
+const AutoSuggestFullscreenInput = /*#__PURE__*/forwardRef(function AutoSuggestFullscreenInput(_ref2, ref) {
   let {
       closeModal
     } = _ref2,
@@ -204,29 +206,29 @@ const AutoSuggestFullscreenInput = forwardRef(function AutoSuggestFullscreenInpu
       cancelAnimationFrame(cb);
     };
   }, [setShowPortal]);
-  return showPortal ? _jsx(Portal, {
-    children: _jsxs("div", {
+  return showPortal ? /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsxs("div", {
       className: styles.fullScreenRoot,
-      children: [_jsx(AutoSuggestInput, _objectSpread(_objectSpread({
+      children: [/*#__PURE__*/_jsx(AutoSuggestInput, _objectSpread(_objectSpread({
         ref: ref
       }, props), {}, {
         className: styles.fullScreenInput,
         inlineOptions: true,
         noScroll: true
-      })), _jsx(Button, {
+      })), /*#__PURE__*/_jsx(Button, {
         minimal: true,
         rounded: true,
         className: styles.fullScreenCloseBtn,
         size: "medium",
         onClick: closeModal,
-        children: _jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: CloseIcon
         })
       })]
     })
   }) : null;
 });
-const AutoSuggestInput = forwardRef(function AutoSuggestInput(_ref3, ref) {
+const AutoSuggestInput = /*#__PURE__*/forwardRef(function AutoSuggestInput(_ref3, ref) {
   var _state$previewText;
   let {
       inlineOptions = false,
@@ -260,18 +262,18 @@ const AutoSuggestInput = forwardRef(function AutoSuggestInput(_ref3, ref) {
   });
   const shouldOpenFlyout = suggestions.length > 0 && state.isFlyoutOpen;
   useLayoutSuggestionVisible(state.highlightIndex, highlightRef, suggestionListRef);
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     role: "combobox",
     "aria-label": textInputProps.placeholder,
     "aria-expanded": shouldOpenFlyout,
     "aria-owns": suggestionListId,
     "aria-haspopup": "listbox",
     width: "full",
-    children: [_jsx(Box, {
+    children: [/*#__PURE__*/_jsx(Box, {
       backgroundColour: "white",
       borderRadius: "sm",
       className: styles.input,
-      children: _jsx(AutoSuggestInputPrimitive, _objectSpread(_objectSpread({
+      children: /*#__PURE__*/_jsx(AutoSuggestInputPrimitive, _objectSpread(_objectSpread({
         className: className,
         size: size,
         isFocused: isFocused,
@@ -308,7 +310,11 @@ const AutoSuggestInput = forwardRef(function AutoSuggestInput(_ref3, ref) {
         }), onFocus),
         onBlur: wrapEvent(() => {
           var _suggestions$state$hi;
-          if (state.highlightIndex > -1 && state.highlightIndex && state.previewText === ((_suggestions$state$hi = suggestions[state.highlightIndex]) === null || _suggestions$state$hi === void 0 ? void 0 : _suggestions$state$hi.text) && typeof onChange === 'function') onChange(suggestions[state.highlightIndex]);
+          if (state.highlightIndex > -1 &&
+          /*
+          	Cheap trick to check if an arrow or click was used or not. We only _commit_ if a click or arrow
+          	 */
+          state.highlightIndex && state.previewText === ((_suggestions$state$hi = suggestions[state.highlightIndex]) === null || _suggestions$state$hi === void 0 ? void 0 : _suggestions$state$hi.text) && typeof onChange === 'function') onChange(suggestions[state.highlightIndex]);
           dispatch({
             type: ActionTypes.INPUT_BLUR
           });
@@ -344,7 +350,7 @@ const AutoSuggestInput = forwardRef(function AutoSuggestInput(_ref3, ref) {
           }
         }, onKeyDown)
       }))
-    }), inlineOptions ? _jsx(SuggestionsList, {
+    }), inlineOptions ? /*#__PURE__*/_jsx(SuggestionsList, {
       suggestionListRef: suggestionListRef,
       suggestionListId: suggestionListId,
       placeholder: textInputProps.placeholder,
@@ -355,14 +361,14 @@ const AutoSuggestInput = forwardRef(function AutoSuggestInput(_ref3, ref) {
       className: noScroll ? styles.suggestionList.inlineOptionsNoScroll : styles.suggestionList.inlineOptions,
       dispatch: dispatch,
       onChange: onChange
-    }) : _jsx(SuggestionListFlyout, {
+    }) : /*#__PURE__*/_jsx(SuggestionListFlyout, {
       id: suggestionListId,
       autoWidth: autoWidth,
       triggerRef: triggerRef,
       alignment: EAlignment.BOTTOM_LEFT,
       isOpen: shouldOpenFlyout,
       triggerOffset: 1,
-      children: _jsx(SuggestionsList, {
+      children: /*#__PURE__*/_jsx(SuggestionsList, {
         className: styles.suggestionList.blockOptions,
         suggestionListRef: suggestionListRef,
         suggestionListId: suggestionListId,
@@ -390,7 +396,7 @@ const SuggestionsList = _ref4 => {
     dispatch,
     suggestionListRef
   } = _ref4;
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     as: "ul",
     ref: suggestionListRef,
     backgroundColour: "white",
@@ -398,11 +404,11 @@ const SuggestionsList = _ref4 => {
     id: suggestionListId,
     "aria-label": placeholder,
     role: "listbox",
-    children: [_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: styles.spacer
     }), suggestions.map((suggestion, idx) => {
       const highlight = highlightIndex === idx;
-      return _jsx(Box, {
+      return /*#__PURE__*/_jsx(Box, {
         as: "li",
         ref: highlight ? highlightRef : undefined,
         id: getSuggestionId(suggestionListId, idx),
@@ -412,9 +418,15 @@ const SuggestionsList = _ref4 => {
         className: clsx(styles.suggestionListItem.default, {
           [styles.suggestionListItem.skipped]: suggestion.skip
         }),
-        onMouseDown: event => event.preventDefault(),
+        onMouseDown: event => /* This is so a blur doesnt fire from the input when you click */
+        event.preventDefault(),
         onMouseMove: () => {
           if (suggestion.skip) return;
+
+          /*
+          This has to be mouse move, so if you're hovering an item, and then arrow keys, we =
+          dont want yo trigger a mouse enter and highlight it instead
+           */
           dispatch({
             type: ActionTypes.SUGGESTION_MOUSE_ENTER,
             index: idx
@@ -433,7 +445,7 @@ const SuggestionsList = _ref4 => {
           value: suggestion
         })
       }, suggestion.text.concat(String(idx)));
-    }), _jsx("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: styles.spacer
     })]
   });
@@ -465,6 +477,8 @@ const AutoSuggestInputPrimitive = withEnhancedInput(_ref5 => {
       onReset
     } = eventHandlers,
     inputEventHandlers = _objectWithoutProperties(eventHandlers, _excluded6);
+
+  // TODO: Eventually build a forkedRef helper for this
   const handleRef = useCallback(node => {
     if (field.ref) setRef(field.ref, node);
     setRef(ref, node);
@@ -476,36 +490,40 @@ const AutoSuggestInputPrimitive = withEnhancedInput(_ref5 => {
       return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
     }, 100);
   }, [onReset, focusTimeout]);
-  const suffix = useMemo(() => isLoading ? null : field.value && isFocused ? _jsx(Box, {
+  const suffix = useMemo(() =>
+  // eslint-disable-next-line sonarjs/no-nested-conditional
+  isLoading ? null : field.value && isFocused ? /*#__PURE__*/_jsx(Box, {
     as: "button",
     paddingY: size === 'small' ? '1' : '3',
     paddingRight: size === 'small' ? '2' : '3',
-    flexShrink: "0",
+    flexShrink: 0,
     onMouseDown: onRequestReset,
-    children: _jsx(Icon, {
+    children: /*#__PURE__*/_jsx(Icon, {
       size: size === 'large' ? size : 'medium',
       icon: CloseIcon
     })
-  }) : fieldIcon ? _jsx(Box, {
-    flexShrink: "0",
+  }) :
+  // eslint-disable-next-line sonarjs/no-nested-conditional
+  fieldIcon ? /*#__PURE__*/_jsx(Box, {
+    flexShrink: 0,
     paddingY: size === 'medium' ? '3' : '2',
     paddingRight: size === 'medium' ? '3' : '2',
     onClick: focusHandler,
-    children: _jsx(Icon, {
+    children: /*#__PURE__*/_jsx(Icon, {
       size: size === 'large' ? size : 'medium',
       icon: fieldIcon
     })
   }) : null, [field.value, isLoading, fieldIcon, isFocused, onRequestReset]);
   useEffect(() => () => focusTimeout ? clearTimeout(focusTimeout) : void 0, []);
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     flexWrap: "nowrap",
     alignItems: "center",
     justifyContent: "center",
     className: className,
-    children: [_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    children: [/*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       as: "input",
-      flexGrow: "1"
+      flexGrow: 1
     }, inputEventHandlers), field), {}, {
       ref: handleRef,
       autoCapitalize: "none",
@@ -532,14 +550,14 @@ const SuggestionListFlyout = _ref6 => {
     autoWidth,
     children
   } = _ref6;
-  return _jsx(Positioner, {
+  return /*#__PURE__*/_jsx(Positioner, {
     id: id,
     triggerRef: triggerRef,
     alignment: alignment,
     isOpen: isOpen,
     triggerOffset: triggerOffset,
     role: "listbox",
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       borderWidth: "1",
       borderColour: "gray",
       borderRadius: "md",
@@ -558,7 +576,7 @@ const defaultItemRenderer = _ref7 => {
     value,
     highlight
   } = _ref7;
-  return _jsx(DefaultSuggestion, {
+  return /*#__PURE__*/_jsx(DefaultSuggestion, {
     highlight: highlight,
     text: value.text
   });
@@ -568,11 +586,11 @@ const DefaultSuggestion = _ref8 => {
     text,
     highlight
   } = _ref8;
-  return _jsx("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: clsx(styles.suggestion, {
       [styles.suggestionHighlight]: highlight
     }),
-    children: _jsx(Text, {
+    children: /*#__PURE__*/_jsx(Text, {
       as: "span",
       children: text
     })

package/dist/components/AutoSuggest/useLayoutSuggestionVisible.js

@@ -4,6 +4,7 @@ import { useLayoutEffect } from 'react';
 import { isBrowser } from "../../utils/index.js";
 export const useLayoutSuggestionVisible = (highlightIndex, highlightRef, suggestionListRef) => {
   if (isBrowser) {
+    // Its okay to wrap this... As the value wont change once rendered.
     useLayoutEffect(() => {
       if (highlightRef.current && suggestionListRef.current && highlightIndex > -1) {
         const highlightItem = highlightRef.current;

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

@@ -13,15 +13,15 @@ export declare const styledBadge: import("@vanilla-extract/recipes").RuntimeFn<{
     };
     size: {
         small: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-            fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
         };
         standard: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})`;
         };
         large: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-            padding: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})`;
+            padding: `var(--${string})`;
         };
     };
 }>;

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

@@ -1,14 +1,24 @@
 import React from 'react';
-import type { WithTestId } from '../../types';
+import type { TestId } from '../../types';
 import type { StyledBadgeProps } from './Badge.css';
 type Colours = Exclude<StyledBadgeProps['colour'], undefined>;
-export interface BadgeProps {
+export interface BadgeProps extends TestId {
+    /** The text content */
     label: string;
+    /** The color of the badge */
     colour?: Colours;
+    /** Override class name with additional styles */
     className?: string;
+    /** The visual style of the badge */
     look?: 'standard' | 'inverted';
+    /** Select the badge size */
     size?: StyledBadgeProps['size'];
 }
-export declare const Badge: ({ label, colour, look, size, className, testId, }: WithTestId<BadgeProps>) => React.JSX.Element;
+/**
+ * The Badge component displays a label using intentional colour themes. The colours and sizes are configuable.
+ *
+ * To apply badge styling to an element directly the `styledBadge` recipe can be used.
+ */
+export declare const Badge: ({ label, colour, look, size, className, testId, }: BadgeProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

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,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,KAAK,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAU;IAE1B,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAE/B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,KAAK,GAAI,mDAOnB,UAAU,CAAC,UAAU,CAAC,sBAwBxB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,KAAK,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,MAAM;IACzC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,mDAOnB,UAAU,sBAyBZ,CAAC"}