@autoguru/overdrive 4.43.9 → 4.43.10-next.1

package/dist/components/Actions/Actions.js

@@ -12,11 +12,11 @@ export const Actions = _ref => {
     noWrap,
     wrappingDirection
   } = _ref;
-  return _jsx(Columns, {
+  return /*#__PURE__*/_jsx(Columns, {
     space: "3",
     noWrap: noWrap,
     wrappingDirection: wrappingDirection,
-    children: Children.map(flattenChildren(children), child => _jsx(Column, {
+    children: Children.map(flattenChildren(children), child => /*#__PURE__*/_jsx(Column, {
       children: child
     }))
   });

package/dist/components/Alert/Alert.js

@@ -27,7 +27,7 @@ export const Alert = _ref => {
     onRequestClose,
     dismissible = typeof onRequestClose === 'function'
   } = _ref;
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     className: clsx(className, sprinklesLegacyText({
       color: intent
     }), {
@@ -43,14 +43,14 @@ export const Alert = _ref => {
     boxShadow: inline ? 'none' : '4',
     padding: "2",
     odComponent: "alert",
-    children: [_jsx(IntentStripe, {
+    children: [/*#__PURE__*/_jsx(IntentStripe, {
       intent: intent
-    }), _jsxs(Box, {
+    }), /*#__PURE__*/_jsxs(Box, {
       display: "flex",
       gap: "2",
-      children: [_jsx(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
         alignSelf: "start",
-        children: _jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: iconMapForIntent[intent],
           size: "medium",
           className: sprinkles({
@@ -58,25 +58,25 @@ export const Alert = _ref => {
             marginLeft: '2'
           })
         })
-      }), _jsx(Box, {
+      }), /*#__PURE__*/_jsx(Box, {
         alignSelf: "center",
         width: "auto",
         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, {
+          children: /*#__PURE__*/_jsx(Icon, {
             className: sprinkles({
               colour: 'muted'
             }),

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;AAG3C,OAAO,EACN,oBAAoB,EAGpB,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOtC,MAAM,WAAW,KAChB,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,CAC3B,EACD,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CA6C3C,CAAC;AAEF,eAAe,MAAM,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;AAMf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,MAAM,WAAW,KAChB,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,CAC3B,EACD,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,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

@@ -9,12 +9,12 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, isValidElement } from 'react';
 import { componentStyles } from "../../styles/componentStyles.js";
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/Icon.js";
 import { Inline } from "../Inline/Inline.js";
 import { Text } from "../Text/Text.js";
-import * as styles from "./Anchor.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Anchor = _ref => {
   let {
@@ -30,27 +30,27 @@ export const Anchor = _ref => {
     className: clsx(componentStyles({
       as: Component,
       colour: 'link',
-      display: 'inline'
-    }), styles.root, className),
+      display: 'inline-flex'
+    }), focusOutlineStyle, className),
     disabled
   }, dataAttrs({
     testid: testId
   })), rest);
-  const childs = _jsxs(Inline, {
+  const childs = /*#__PURE__*/_jsxs(Inline, {
     space: "2",
-    children: [icon && _jsx(Icon, {
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
       icon: icon,
       size: "small",
       className: sprinkles({
         colour: 'link'
       })
-    }), _jsx(Text, {
+    }), /*#__PURE__*/_jsx(Text, {
       weight: "bold",
       size: "4",
       colour: "link",
       children: children
     })]
   });
-  return isValidElement(Component) ? cloneElement(Component, props, childs) : createElement(Component, props, childs);
+  return /*#__PURE__*/isValidElement(Component) ? /*#__PURE__*/cloneElement(Component, props, childs) : /*#__PURE__*/createElement(Component, props, childs);
 };
 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,34 +490,38 @@ 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,
     onMouseDown: onRequestReset,
-    children: _jsx(Icon, {
+    children: /*#__PURE__*/_jsx(Icon, {
       size: size === 'large' ? size : 'medium',
       icon: CloseIcon
     })
-  }) : fieldIcon ? _jsx(Box, {
+  }) :
+  // 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
     }, inputEventHandlers), field), {}, {
@@ -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.d.ts

@@ -3,12 +3,23 @@ import { type BoxProps } from '../Box/Box';
 import type { StyledBadgeProps } from './Badge.css';
 type Colours = Exclude<StyledBadgeProps['colour'], undefined>;
 export interface BadgeProps extends Pick<BoxProps, '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'];
 }
+/**
+ * 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,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGhD,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,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAE3D,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,sBAyBZ,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGhD,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,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC3D,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;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,mDAOnB,UAAU,sBAyBZ,CAAC"}

package/dist/components/Badge/Badge.js

@@ -6,6 +6,12 @@ import React from 'react';
 import { Box } from "../Box/Box.js";
 import * as styles from "./Badge.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 const Badge = _ref => {
   let {
     label,
@@ -17,7 +23,7 @@ export const Badge = _ref => {
   } = _ref;
   !['string', 'number'].includes(typeof label) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Badge `label` can only contain strings or numbers') : invariant(false) : void 0;
   const inverted = look === 'inverted';
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     className: clsx([styles.styledBadge({
       colour,
       inverted,

package/dist/components/Box/Box.d.ts

@@ -2,10 +2,17 @@ import type { AllHTMLAttributes, ElementType, PropsWithChildren } from 'react';
 import React from 'react';
 import { type ComponentStylesProps } from '../../styles/componentStyles';
 import { OdComponent, TestId } from '../../types';
+/**
+ * Use CommonBoxProps to help consistently define additional utility props of a component
+ */
 export interface CommonBoxProps extends OdComponent, PropsWithChildren, TestId {
 }
 export interface BoxProps extends Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'>, CommonBoxProps, ComponentStylesProps {
+    /** Pass in the HTML element or JSX component that should be rendered for the box */
     as?: ElementType;
 }
+/**
+ * Box is a general purpose container with no specific semantics.
+ */
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEN,KAAK,oBAAoB,EACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMlD,MAAM,WAAW,cAChB,SAAQ,WAAW,EAClB,iBAAiB,EACjB,MAAM;CAAG;AAEX,MAAM,WAAW,QAChB,SAAQ,IAAI,CACV,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACjE,EACD,cAAc,EACd,oBAAoB;IAErB,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAKD,eAAO,MAAM,GAAG,8EA6Pf,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEN,KAAK,oBAAoB,EACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGlD;;GAEG;AACH,MAAM,WAAW,cAChB,SAAQ,WAAW,EAClB,iBAAiB,EACjB,MAAM;CAAG;AAEX,MAAM,WAAW,QAChB,SAAQ,IAAI,CACV,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACjE,EACD,cAAc,EACd,oBAAoB;IACrB,oFAAoF;IACpF,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,8EA6Pf,CAAC"}

package/dist/components/Box/Box.js

@@ -8,14 +8,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { forwardRef } from 'react';
 import { componentStyles } from "../../styles/componentStyles.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
+/**
+ * Use CommonBoxProps to help consistently define additional utility props of a component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Box = forwardRef((_ref, ref) => {
+/**
+ * Box is a general purpose container with no specific semantics.
+ */
+export const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as = 'div',
       children,
       className,
       odComponent,
       testId,
+      // style props
       display,
       height,
       maxWidth,
@@ -34,7 +41,9 @@ export const Box = forwardRef((_ref, ref) => {
       backgroundColour,
       boxShadow,
       color,
+      // modern semantic colour tokens
       colour,
+      // legacy colours
       fg,
       opacity,
       fontSize,
@@ -225,7 +234,7 @@ export const Box = forwardRef((_ref, ref) => {
     paddingRight,
     paddingTop
   });
-  return _jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, allOtherProps), dataAttrs({
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, allOtherProps), dataAttrs({
     'od-component': odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
     testid: testId
   })), {}, {

package/dist/components/Box/newBox/NewBox.d.ts

@@ -1,5 +1,28 @@
 import React, { type ElementType } from 'react';
 import { type UseBoxProps } from './useBox';
+/**
+ * A polymorphic Box component that provides a flexible container with styling capabilities, defaulting to a `<div>` element.
+ * Use the `as` prop to control the rendered HTML tag. The box component exposes design system tokens relative to each style
+ * prop.
+ *
+ * An alternative to the `as` prop is `asComponent` which allows a React element to render with the custom props
+ *
+ * Props include:
+ * - Sprinkles props (spacing, colors, layout, etc.)
+ * - Responsive props (arrays for different breakpoints)
+ * - Also accepts valid HTML attributes for the chosen HTML tag
+ *
+ * @example
+ * <Box as="section" mx="5" py="5" backgroundColor="accent">
+ *   Section content
+ * </Box>
+ *
+ * @example
+ * <Box display={['block', 'flex']} p={['3', '6', '8']}>Responsive padding</Box>
+ *
+ * @example
+ * <Box asComponent={<MyCustomThing />} borderColor="info" borderWidth="1" />
+ */
 export declare const NewBox: {
     <E extends ElementType = "div">({ children, ...props }: UseBoxProps<E>): React.JSX.Element;
     displayName: string;

package/dist/components/Box/newBox/NewBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/NewBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAyBpD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,kCAGzC,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}
+{"version":3,"file":"NewBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/newBox/NewBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,kCAGzC,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}

package/dist/components/Box/newBox/NewBox.js

@@ -7,6 +7,29 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { useBox } from "./useBox.js";
+/**
+ * A polymorphic Box component that provides a flexible container with styling capabilities, defaulting to a `<div>` element.
+ * Use the `as` prop to control the rendered HTML tag. The box component exposes design system tokens relative to each style
+ * prop.
+ *
+ * An alternative to the `as` prop is `asComponent` which allows a React element to render with the custom props
+ *
+ * Props include:
+ * - Sprinkles props (spacing, colors, layout, etc.)
+ * - Responsive props (arrays for different breakpoints)
+ * - Also accepts valid HTML attributes for the chosen HTML tag
+ *
+ * @example
+ * <Box as="section" mx="5" py="5" backgroundColor="accent">
+ *   Section content
+ * </Box>
+ *
+ * @example
+ * <Box display={['block', 'flex']} p={['3', '6', '8']}>Responsive padding</Box>
+ *
+ * @example
+ * <Box asComponent={<MyCustomThing />} borderColor="info" borderWidth="1" />
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const NewBox = _ref => {
   let {
@@ -19,9 +42,9 @@ export const NewBox = _ref => {
     reactElement
   } = useBox(props);
   if (reactElement) {
-    return cloneElement(reactElement, componentProps, children);
+    return /*#__PURE__*/cloneElement(reactElement, componentProps, children);
   }
-  return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     children: children
   }));
 };