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

package/dist/components/Tooltip/Tooltip.js

@@ -3,103 +3,82 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useEffect, useRef, useState, useId } from 'react';
-import { sprinkles } from "../../styles/sprinkles.css.js";
+import { invariant } from '@autoguru/utilities';
+import React, { Children, cloneElement, isValidElement } from 'react';
+import { useTooltip } from "../../hooks/useTooltip/useTooltip.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
-import { Box } from "../Box/Box.js";
-import { Positioner } from "../Positioner/Positioner.js";
 import { EAlignment } from "../Positioner/alignment.js";
-import { Text } from "../Text/Text.js";
 import * as styles from "./Tooltip.css.js";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  medium: '2',
-  large: '3'
-};
+/**
+ * Renders a tooltip that appears when the user hovers over or focuses on the trigger element.
+ *
+ * If the provided children are not keyboard-focusable, you can supply set `wrapper` to true to
+ * ensure keyboard accessibility. You can also give a tag name to the `wrapper` prop.
+ *
+ * This component can operate in either controlled or uncontrolled mode:
+ * - In uncontrolled mode, it opens on hover/focus and can auto-close after a specified delay.
+ * - In controlled mode, its visibility is managed externally via the `isOpen` prop.
+ */
 export const Tooltip = _ref => {
   let {
     alignment = EAlignment.RIGHT,
-    isOpen: incomingIsOpen,
+    isOpen,
     label,
     children,
     size = 'medium',
     closeAfter = null,
-    testId
+    testId,
+    wrapper
   } = _ref;
-  const tooltipId = useId();
-  const [isOpen, setIsOpen] = useState(incomingIsOpen);
-  const triggerRef = useRef(null);
-  const tooltipRef = useRef(null);
-  const leaveTimer = useRef(null);
-  const enterHandler = useCallback(() => {
-    if (leaveTimer.current) {
-      clearTimeout(leaveTimer.current);
-    }
-    setIsOpen(true);
-  }, [setIsOpen]);
-  const leaveHandler = useCallback(() => {
-    leaveTimer.current = setTimeout(() => {
-      setIsOpen(false);
-    }, 1e3 / 2);
-  }, [setIsOpen]);
-  const focusHandler = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen]);
-  const blurHandler = useCallback(() => {
-    setIsOpen(false);
-  }, [setIsOpen]);
-  useEffect(() => {
-    let timeout;
-    if (isOpen && typeof closeAfter === 'number') {
-      timeout = setTimeout(() => setIsOpen(false), closeAfter);
-    }
-    return () => {
-      if (timeout) clearTimeout(timeout);
-    };
-  }, [closeAfter, isOpen]);
-  if (!label) return _jsx(_Fragment, {
+  const {
+    PositionedTooltip,
+    triggerRef,
+    triggerProps
+  } = useTooltip({
+    isOpen,
+    closeAfter
+  });
+
+  // return early if no label provided
+  if (!label) return /*#__PURE__*/_jsx(_Fragment, {
     children: children
   });
-  return _jsxs(_Fragment, {
-    children: [_jsx("span", _objectSpread(_objectSpread({
-      ref: triggerRef,
-      onMouseEnter: enterHandler,
-      onMouseLeave: leaveHandler,
-      onFocus: focusHandler,
-      onBlur: blurHandler,
-      tabIndex: 0,
-      className: sprinkles({
-        display: 'inline-block'
-      }),
-      "aria-describedby": isOpen ? tooltipId : undefined
-    }, dataAttrs({
-      testid: testId
-    })), {}, {
-      children: children
-    })), _jsx(Positioner, {
-      triggerRef: triggerRef,
-      alignment: alignment,
-      isOpen: typeof incomingIsOpen === 'boolean' ? incomingIsOpen : isOpen,
-      children: _jsx(Box, {
-        id: tooltipId,
-        ref: tooltipRef,
+
+  // return wrapped output
+  if (wrapper) {
+    const TagName = typeof wrapper === 'string' ? wrapper : 'span';
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(TagName, _objectSpread(_objectSpread(_objectSpread({
+        ref: triggerRef
+      }, triggerProps), {}, {
+        tabIndex: 0
+      }, dataAttrs({
+        testid: testId
+      })), {}, {
+        children: children
+      })), /*#__PURE__*/_jsx(PositionedTooltip, {
+        alignment: alignment,
         className: styles.root,
-        width: "full",
-        pointerEvents: "none",
-        userSelect: "none",
-        overflow: "hidden",
-        borderRadius: "1",
-        boxShadow: "4",
-        backgroundColour: "gray900",
-        paddingY: "2",
-        paddingX: "3",
-        role: "tooltip",
-        children: _jsx(Text, {
-          size: sizeMap[size],
-          colour: "white",
-          children: label
-        })
-      })
+        label: label,
+        size: size
+      })]
+    });
+  }
+  ! /*#__PURE__*/isValidElement(children) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tooltips without a wrapper should have a single child component') : invariant(false) : void 0;
+  if (! /*#__PURE__*/isValidElement(children)) return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+
+  // nested React component which receices spread props
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/cloneElement(Children.only(children), _objectSpread(_objectSpread({}, triggerProps), {}, {
+      ref: triggerRef
+    })), /*#__PURE__*/_jsx(PositionedTooltip, {
+      alignment: alignment,
+      className: styles.root,
+      label: label,
+      size: size
     })]
   });
 };

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

@@ -1,2 +1,2 @@
-export { Tooltip } from './Tooltip';
+export { Tooltip, type TooltipProps } from './Tooltip';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC"}

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

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { type BoxProps } from '../Box/Box';
 type VisuallyHiddenProps = Pick<BoxProps, 'as' | 'children'>;
+/**
+ * Wrap any content or components with `<VisuallyHidden>` to apply styling that ensure the child content is not
+ * visually displayed on the screen but is still present in the DOM/accessibility tree for assitive technology.
+ * Use the `as` prop to change the rendered html tag.
+ */
 export declare const VisuallyHidden: ({ children, ...props }: VisuallyHiddenProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=VisuallyHidden.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAIhD,KAAK,mBAAmB,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;AAO7D,eAAO,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,sBAIzE,CAAC"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../lib/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAIhD,KAAK,mBAAmB,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,sBAIzE,CAAC"}

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -9,12 +9,17 @@ import * as React from 'react';
 import { Box } from "../Box/Box.js";
 import { visuallyHidden } from "./VisuallyHidden.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Wrap any content or components with `<VisuallyHidden>` to apply styling that ensure the child content is not
+ * visually displayed on the screen but is still present in the DOM/accessibility tree for assitive technology.
+ * Use the `as` prop to change the rendered html tag.
+ */
 export const VisuallyHidden = _ref => {
   let {
       children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
     className: visuallyHidden,
     odComponent: "visually-hidden",
     children: children

package/dist/components/private/CheckableBase/CheckableBase.css.js

@@ -39,6 +39,8 @@ export const disabled = style({
   opacity: 0.6,
   pointerEvents: 'none'
 }, "disabled");
+
+// no longer is in use in Overdrive
 export const checkableItem = style({
   selectors: {
     [`${nativeInput}:focus:checked ~${checkable} &`]: {

package/dist/components/private/CheckableBase/CheckableBase.js

@@ -7,7 +7,7 @@ import { Text } from "../../Text/Text.js";
 import { textStyles } from "../../Text/textStyles.js";
 import * as styles from "./CheckableBase.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CheckableBase = forwardRef((_ref, ref) => {
+export const CheckableBase = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     className = '',
     label = '',
@@ -27,7 +27,7 @@ export const CheckableBase = forwardRef((_ref, ref) => {
   };
   const nakedLabel = ['string', 'number'].includes(typeof label);
   const id = useId();
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
@@ -39,7 +39,7 @@ export const CheckableBase = forwardRef((_ref, ref) => {
     className: [styles.root, resetStyles('button'), className, {
       [styles.disabled]: disabled
     }],
-    children: [_jsx(Box, {
+    children: [/*#__PURE__*/_jsx(Box, {
       ref: ref,
       id: id,
       as: "input",
@@ -57,14 +57,14 @@ export const CheckableBase = forwardRef((_ref, ref) => {
       className: [resetStyles('button'), styles.nativeInput],
       onClick: handleClick,
       onChange: onChange
-    }), _jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       position: "relative",
       className: [styles.checkable, resetStyles('button')],
       children: children
-    }), _jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       as: "label",
       htmlFor: id,
       width: "full",
@@ -74,7 +74,7 @@ export const CheckableBase = forwardRef((_ref, ref) => {
       }), {
         [styles.label.disabled]: disabled
       }],
-      children: nakedLabel ? _jsx(Text, {
+      children: nakedLabel ? /*#__PURE__*/_jsx(Text, {
         as: "span",
         children: label
       }) : label

package/dist/components/private/CheckableBase/useCheckableStyles.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated import the `CheckableBase.css` file directly
+ */
 export declare const useCheckableStyles: () => {
     checkableItem: string;
 };

package/dist/components/private/CheckableBase/useCheckableStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckableStyles.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/useCheckableStyles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,EAAE,MAAM;IACtC,aAAa,EAAE,MAAM,CAAC;CAGrB,CAAC"}
+{"version":3,"file":"useCheckableStyles.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/useCheckableStyles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM;IACtC,aAAa,EAAE,MAAM,CAAC;CAGrB,CAAC"}

package/dist/components/private/CheckableBase/useCheckableStyles.js

@@ -1,6 +1,9 @@
 "use strict";
 
 import * as styles from "./CheckableBase.css.js";
+/**
+ * @deprecated import the `CheckableBase.css` file directly
+ */
 export const useCheckableStyles = () => ({
   checkableItem: styles.checkableItem
 });

package/dist/components/private/InputBase/HintText.js

@@ -16,7 +16,7 @@ export const HintText = _ref => {
   } = _ref;
   if (!hintText && !reserveHintSpace) return null;
   const showHintText = !disabled && hintText;
-  return _jsx(Text, {
+  return /*#__PURE__*/_jsx(Text, {
     as: "p",
     size: size === 'large' ? '4' : '2',
     colour: "unset",

package/dist/components/private/InputBase/NotchedBase.js

@@ -25,7 +25,7 @@ export const NotchedBase = _ref => {
   } = _ref;
   const labelRef = useRef(null);
   const shouldMerge = !isFocused && !isHovered;
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     position: "relative",
     width: "full",
     padding: "none",
@@ -43,7 +43,7 @@ export const NotchedBase = _ref => {
       [styles.bordersAttach.complete.BOTTOM]: !notch && attach === 'BOTTOM',
       [styles.bordersAttach.complete.ALL]: !notch && attach === 'ALL'
     }),
-    children: [children, notch && _jsxs(Box, {
+    children: [children, notch && /*#__PURE__*/_jsxs(Box, {
       className: clsx(styles.borders.root.default, {
         [styles.borders.root.disabled]: disabled
       }),
@@ -53,7 +53,7 @@ export const NotchedBase = _ref => {
       width: "full",
       height: "full",
       textAlign: "left",
-      children: [_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: clsx(styles.borders.leading, borderColourClassName, {
           [styles.bordersMerged.complete.LEFT]: shouldMerge && borderMerged === 'LEFT',
           [styles.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',
@@ -63,14 +63,14 @@ export const NotchedBase = _ref => {
           [styles.bordersAttach.flatCorners.BOTTOM_LEFT]: attach === 'LEFT' || attach === 'BOTTOM' || attach === 'ALL',
           [styles.largeBorder]: size === 'large'
         })
-      }), _jsxs("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         className: clsx(styles.borders.middle, borderColourClassName, size === 'large' && styles.largeBorderY),
-        children: [_jsx(Box, {
+        children: [/*#__PURE__*/_jsx(Box, {
           display: isEmpty || placeholder.length === 0 ? 'none' : 'block',
           paddingX: "2",
           className: [styles.labelStyle.base, styles.labelStyle[size], styles.notchGapPlaceholder.base, styles.notchGapPlaceholder[size]],
           children: placeholder
-        }), _jsx(Box, {
+        }), /*#__PURE__*/_jsx(Box, {
           ref: labelRef,
           as: "label",
           pointerEvents: "none",
@@ -91,7 +91,7 @@ export const NotchedBase = _ref => {
           }),
           children: placeholder
         })]
-      }), _jsx("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: clsx(styles.borders.trailing, borderColourClassName, {
           [styles.bordersMerged.complete.RIGHT]: shouldMerge && borderMerged === 'RIGHT',
           [styles.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',

package/dist/components/private/InputBase/withEnhancedInput.css.js

@@ -119,6 +119,7 @@ export const inputItselfSize = {
         padding: '12px 25px',
         '::placeholder': {
           fontSize: vars.typography.size['7'].fontSize
+          // lineHeight: vars.typography.size['6'].lineHeight,
         }
       },
       textarea: {

package/dist/components/private/InputBase/withEnhancedInput.d.ts

@@ -4,7 +4,7 @@ import { Box } from '../../Box/Box';
 import { NotchedBase } from './NotchedBase';
 import type { InputSize } from './withEnhancedInput.css';
 type ElementTypes = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-type NativeAttributes<E extends ElementTypes> = Omit<InputHTMLAttributes<E>, 'as' | 'color' | 'height' | 'is' | 'placeholder' | 'size' | 'width'>;
+type NativeAttributes<E extends ElementTypes> = Omit<InputHTMLAttributes<E>, 'color' | 'height' | 'is' | 'placeholder' | 'size' | 'width'>;
 export interface EventHandlers<E extends ElementTypes> {
     onChange?: ChangeEventHandler<E>;
     onBlur?: FocusEventHandler<E>;

package/dist/components/private/InputBase/withEnhancedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/private/InputBase/withEnhancedInput.js

@@ -16,7 +16,10 @@ import { ProgressSpinner } from "../../ProgressSpinner/ProgressSpinner.js";
 import { HintText } from "./HintText.js";
 import * as inputStateStyles from "./InputState.css.js";
 import { NotchedBase } from "./NotchedBase.js";
-import * as styles from "./withEnhancedInput.css.js";
+import * as styles from "./withEnhancedInput.css.js"; // The event handlers we'll allow the wrapped component to bind too
+// The props we'll give the end consumer to send
+// An amalgamation of the HoC props, event handlers and the consumer props.
+// The final props we send into thw wrapping component
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const withEnhancedInput = function (WrappingComponent) {
   let {
@@ -24,12 +27,17 @@ export const withEnhancedInput = function (WrappingComponent) {
     withPrefixIcon = true,
     withSuffixIcon = true,
     defaultValue
+    // eslint-disable-next-line unicorn/no-object-as-default-parameter
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     primitiveType: 'text',
     defaultValue: void 0
   };
-  return (forwardRef((_ref, ref) => {
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/display-name
+    forwardRef((_ref, ref) => {
       let {
+          // EnhanceInputPrimitiveProps
           placeholder,
           name,
           id = name,
@@ -86,6 +94,17 @@ export const withEnhancedInput = function (WrappingComponent) {
         [styles.inputItselfSize[size].suffixed.any]: Boolean(suffixIcon || isLoading),
         [styles.inputItselfSize[size].suffixed[primitiveType]]: Boolean(suffixIcon || isLoading)
       });
+
+      /*
+      Need to disable the type assertion here, as ts has no idea that P and an omitted P without its properties is just P
+      @see https://stackoverflow.com/a/53951825/2609301
+      	type P = {firstName: string}
+      type A = P
+      type B = Omit<P, 'firstName'>
+      	A & B != A _or_ P & Omit<P, 'firstName'> != P
+       */
+
+      // @ts-expect-error props not assignable to type
       const wrappingComponent = _objectSpread({
         validation: {
           isTouched,
@@ -100,6 +119,8 @@ export const withEnhancedInput = function (WrappingComponent) {
             }
             return true;
           }, onChange),
+          // Until https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within is more stable, the below
+          // will wrap now
           onFocus: wrapEvent(() => setActive(true), onFocus),
           onBlur: wrapEvent(() => setActive(false), onBlur),
           onMouseEnter,
@@ -132,12 +153,12 @@ export const withEnhancedInput = function (WrappingComponent) {
         pointerEvents: 'none',
         position: 'absolute'
       });
-      return _jsxs(Box, {
+      return /*#__PURE__*/_jsxs(Box, {
         width: "full",
         className: className,
         onMouseEnter: onMouseOver,
         onMouseLeave: onMouseOut,
-        children: [_jsx(NotchedBase, {
+        children: [/*#__PURE__*/_jsx(NotchedBase, {
           id: id,
           prefixed: Boolean(prefixIcon),
           isEmpty: isEmpty,
@@ -153,26 +174,26 @@ export const withEnhancedInput = function (WrappingComponent) {
             [derivedColours.colour]: !isEmpty
           }),
           borderColourClassName: derivedColours.borderColour,
-          children: _jsxs(Box, {
+          children: /*#__PURE__*/_jsxs(Box, {
             ref: wrapperRef,
             className: styles.inputWrapperSize[size].root[primitiveType],
             width: "full",
             height: "full",
-            children: [prefixIcon ? _jsx(Icon, {
+            children: [prefixIcon ? /*#__PURE__*/_jsx(Icon, {
               icon: prefixIcon,
               size: iconSize,
               className: clsx(iconStyles, styles.iconRoot, styles.prefixIcon, styles.iconSize[size], derivedColours.colour)
-            }) : null, isLoading ? _jsx(ProgressSpinner, {
+            }) : null, isLoading ? /*#__PURE__*/_jsx(ProgressSpinner, {
               colour: "default",
               size: size === 'large' ? size : undefined,
               className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size])
-            }) : null, suffixIcon && !isLoading ? _jsx(Icon, {
+            }) : null, suffixIcon && !isLoading ? /*#__PURE__*/_jsx(Icon, {
               icon: suffixIcon,
               size: iconSize,
               className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour)
-            }) : null, _jsx(WrappingComponent, _objectSpread({}, wrappingComponent))]
+            }) : null, /*#__PURE__*/_jsx(WrappingComponent, _objectSpread({}, wrappingComponent))]
           })
-        }), hintText || reserveHintSpace ? _jsx(HintText, {
+        }), hintText || reserveHintSpace ? /*#__PURE__*/_jsx(HintText, {
           className: derivedColours.colour,
           hintText: hintText,
           disabled: disabled,
@@ -198,6 +219,7 @@ const derivedColourIntent = (_ref2, styles) => {
   } = _ref2;
   if (disabled) return styles.disabled;
   if (isTouched === true) {
+    // Validation route
     const node = stateNodeGetter(isValid ? styles.success : styles.error);
     return node(isHovered, isActive);
   }

package/dist/hooks/index.d.ts

@@ -4,6 +4,7 @@ export * from './useDeepCompareMemo';
 export * from './useDocumentBodyStyles';
 export * from './useNegativeMargin';
 export * from './useResponsiveValue';
+export * from './useTooltip';
 export * from './useWindowHeightFill';
 export * from './useWindowScrollLock';
 export * from './useMedia';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -6,6 +6,7 @@ export * from "./useDeepCompareMemo/index.js";
 export * from "./useDocumentBodyStyles/index.js";
 export * from "./useNegativeMargin/index.js";
 export * from "./useResponsiveValue/index.js";
+export * from "./useTooltip/index.js";
 export * from "./useWindowHeightFill/index.js";
 export * from "./useWindowScrollLock/index.js";
 export * from "./useMedia/index.js";

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.js

@@ -44,10 +44,11 @@ export const useAttachedBoxes = _ref => {
       rest = _objectWithoutProperties(_ref2, _excluded);
     isLastItem = index === count - 1;
     if (isLastItem && decimals) {
+      //is last item and is not a perfect division
       colStart = Math.round(decimals / (1 / columnCount));
       extend = Math.round((1 - decimals) / (1 / columnCount));
     }
-    return _jsx(Box, _objectSpread(_objectSpread({
+    return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
       backgroundColour: backgroundColour,
       className: clsx(className, {
         [styles.grid.topLeft]: index === 0,

package/dist/hooks/useDeepCompareMemo/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * A custom hook that works like useMemo but uses deep comparison instead of reference equality.
+ * This is particularily useful for components with many props that are not individually destructured
+ */
 export declare function useDeepCompareMemo<T>(factory: () => T, dependencies: React.DependencyList): T;
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/useDeepCompareMemo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useDeepCompareMemo/index.ts"],"names":[],"mappings":"AAOA,wBAAgB,kBAAkB,CAAC,CAAC,EACnC,OAAO,EAAE,MAAM,CAAC,EAChB,YAAY,EAAE,KAAK,CAAC,cAAc,GAChC,CAAC,CAeH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useDeepCompareMemo/index.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EACnC,OAAO,EAAE,MAAM,CAAC,EAChB,YAAY,EAAE,KAAK,CAAC,cAAc,GAChC,CAAC,CAeH"}

package/dist/hooks/useDeepCompareMemo/index.js

@@ -2,12 +2,24 @@
 
 import { isEqual } from 'es-toolkit';
 import { useRef } from 'react';
+
+/**
+ * A custom hook that works like useMemo but uses deep comparison instead of reference equality.
+ * This is particularily useful for components with many props that are not individually destructured
+ */
 export function useDeepCompareMemo(factory, dependencies) {
+  // Store the current value
   const ref = useRef(factory());
+  // Store the previous dependencies
   const prevDeps = useRef(dependencies);
+
+  // Only update if deps have changed based on deep comparison
   if (!isEqual(prevDeps.current, dependencies)) {
     ref.current = factory();
+    // Update the previous dependencies
     prevDeps.current = dependencies;
   }
+
+  // Return the memoized value
   return ref.current;
 }

package/dist/hooks/useMedia/useMedia.js

@@ -20,6 +20,7 @@ export const useMedia = function (queries) {
       const removeHandlersFn = matchers.map((matcher, idx) => {
         const handler = e => {
           if (!isMounted) return;
+          // eslint-disable-next-line sonarjs/no-nested-functions
           setMatches(prevState => {
             const newState = _toConsumableArray(prevState);
             newState[idx] = e.matches;

package/dist/hooks/useResponsiveValue/useResponsiveValue.js

@@ -5,7 +5,9 @@ import { useMedia } from "../../hooks/useMedia/useMedia.js";
 import { isBrowser } from "../../utils/index.js";
 import { getEarliestKnownToken } from "../../utils/resolveResponsiveProps.js";
 export function useResponsiveValue(responsiveValue, serverFallbackCase) {
-  if (!isBrowser) return serverFallbackCase || null;
+  if (!isBrowser)
+    // This is ok as it will only run on server
+    return serverFallbackCase || null;
   if (!Array.isArray(responsiveValue)) return responsiveValue;
   const activeBP = useMedia(['mobile', 'tablet', 'desktop', 'largeDesktop']).reduce((activeBreakPoint, current, index) => {
     if (current) activeBreakPoint = index + 1;

package/dist/hooks/useTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { useTooltip, type UseTooltipProps, type ToolTipSize, } from './useTooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useTooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,WAAW,GAChB,MAAM,cAAc,CAAC"}

package/dist/hooks/useTooltip/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { useTooltip } from "./useTooltip.js";