@autoguru/overdrive 4.44.4-next.0 → 4.44.4

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

@@ -21,202 +21,197 @@ import * as styles from "./withEnhancedInput.css.js"; // The event handlers we'l
 // 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) {
+export const withEnhancedInput = (WrappingComponent, {
+  primitiveType = 'text',
+  withPrefixIcon = true,
+  withSuffixIcon = true,
+  defaultValue
+  // eslint-disable-next-line unicorn/no-object-as-default-parameter
+} = {
+  primitiveType: 'text',
+  defaultValue: void 0
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line react/display-name
+forwardRef((_ref, ref) => {
   let {
-    primitiveType = 'text',
-    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 (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/display-name
-    forwardRef((_ref, ref) => {
-      let {
-          // EnhanceInputPrimitiveProps
-          placeholder,
-          name,
-          id = name,
-          hintText,
-          disabled = false,
-          className,
-          isTouched,
-          isValid,
-          isLoading = false,
-          notch = true,
-          reserveHintSpace = false,
-          size = 'medium',
-          backgroundColour = 'transparent',
-          value: incomingValue = defaultValue || '',
-          onChange: incomingOnChange,
-          onReset,
-          onMouseLeave,
-          onMouseEnter,
-          onBlur,
-          onFocus,
-          onKeyDown,
-          prefixIcon,
-          suffixIcon,
-          wrapperRef,
-          autoFocus,
-          attach,
-          borderMerged
-        } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-      !!(prefixIcon && !withPrefixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'prefix icon is not supported for this component') : invariant(false) : void 0;
-      !!(suffixIcon && !withSuffixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'suffix icon is not supported for this component') : invariant(false) : void 0;
-      const [value, onChange] = useInputControlledState(incomingValue, incomingOnChange);
-      const [isActive, setActive] = useState(false);
-      const [isHovered, setIsHovered] = useState(false);
-      const isEmpty = primitiveType === 'date' && value === '' ? false : value === '';
-      const derivedColours = derivedColourIntent({
-        isValid,
-        isHovered,
-        isActive,
-        isTouched,
-        disabled
-      }, inputStateStyles);
-      const iconSize = size === 'small' ? 'medium' : size;
-      const inputItselfClassName = clsx(elementStyles({
-        as: primitiveType === 'textarea' ? 'textarea' : 'input',
-        backgroundColour,
-        width: 'full',
-        position: 'relative',
-        display: 'flex',
-        borderRadius: 'md'
-      }), styles.input.itself.root, styles.types[primitiveType], styles.inputItselfSize[size].root.any, styles.inputItselfSize[size].root[primitiveType], {
-        [styles.inputItselfSize[size].prefixed.any]: Boolean(prefixIcon),
-        [styles.inputItselfSize[size].prefixed[primitiveType]]: Boolean(prefixIcon),
-        [styles.inputItselfSize[size].suffixed.any]: Boolean(suffixIcon || isLoading),
-        [styles.inputItselfSize[size].suffixed[primitiveType]]: Boolean(suffixIcon || isLoading)
-      });
+      // EnhanceInputPrimitiveProps
+      placeholder,
+      name,
+      id = name,
+      hintText,
+      disabled = false,
+      className,
+      isTouched,
+      isValid,
+      isLoading = false,
+      notch = true,
+      reserveHintSpace = false,
+      size = 'medium',
+      backgroundColour = 'transparent',
+      value: incomingValue = defaultValue || '',
+      onChange: incomingOnChange,
+      onReset,
+      onMouseLeave,
+      onMouseEnter,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      prefixIcon,
+      suffixIcon,
+      wrapperRef,
+      autoFocus,
+      attach,
+      borderMerged
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  !!(prefixIcon && !withPrefixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'prefix icon is not supported for this component') : invariant(false) : void 0;
+  !!(suffixIcon && !withSuffixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'suffix icon is not supported for this component') : invariant(false) : void 0;
+  const [value, onChange] = useInputControlledState(incomingValue, incomingOnChange);
+  const [isActive, setActive] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const isEmpty = primitiveType === 'date' && value === '' ? false : value === '';
+  const derivedColours = derivedColourIntent({
+    isValid,
+    isHovered,
+    isActive,
+    isTouched,
+    disabled
+  }, inputStateStyles);
+  const iconSize = size === 'small' ? 'medium' : size;
+  const inputItselfClassName = clsx(elementStyles({
+    as: primitiveType === 'textarea' ? 'textarea' : 'input',
+    backgroundColour,
+    width: 'full',
+    position: 'relative',
+    display: 'flex',
+    borderRadius: 'md'
+  }), styles.input.itself.root, styles.types[primitiveType], styles.inputItselfSize[size].root.any, styles.inputItselfSize[size].root[primitiveType], {
+    [styles.inputItselfSize[size].prefixed.any]: Boolean(prefixIcon),
+    [styles.inputItselfSize[size].prefixed[primitiveType]]: Boolean(prefixIcon),
+    [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
-       */
+  /*
+  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,
-          isValid
-        },
-        size,
-        eventHandlers: {
-          onChange: wrapEvent(event => {
-            if (disabled) {
-              event.preventDefault();
-              return false;
-            }
-            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,
-          onMouseLeave,
-          onKeyDown,
-          onReset
-        },
-        field: {
-          name,
-          id,
-          disabled,
-          value,
-          autoFocus,
-          className: inputItselfClassName,
-          placeholder: notch ? undefined : placeholder,
-          ref
-        },
-        prefixed: Boolean(prefixIcon),
-        suffixed: Boolean(suffixIcon),
-        isLoading,
-        'aria-busy': isLoading || void 0
-      }, rest);
-      const onMouseOver = useCallback(() => {
-        setIsHovered(true);
-      }, []);
-      const onMouseOut = useCallback(() => {
-        setIsHovered(false);
-      }, []);
-      const iconStyles = sprinkles({
-        pointerEvents: 'none',
-        position: 'absolute'
-      });
-      return /*#__PURE__*/_jsxs(Box, {
+  // @ts-expect-error props not assignable to type
+  const wrappingComponent = _objectSpread({
+    validation: {
+      isTouched,
+      isValid
+    },
+    size,
+    eventHandlers: {
+      onChange: wrapEvent(event => {
+        if (disabled) {
+          event.preventDefault();
+          return false;
+        }
+        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,
+      onMouseLeave,
+      onKeyDown,
+      onReset
+    },
+    field: {
+      name,
+      id,
+      disabled,
+      value,
+      autoFocus,
+      className: inputItselfClassName,
+      placeholder: notch ? undefined : placeholder,
+      ref
+    },
+    prefixed: Boolean(prefixIcon),
+    suffixed: Boolean(suffixIcon),
+    isLoading,
+    'aria-busy': isLoading || void 0
+  }, rest);
+  const onMouseOver = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  const onMouseOut = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+  const iconStyles = sprinkles({
+    pointerEvents: 'none',
+    position: 'absolute'
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    width: "full",
+    className: className,
+    onMouseEnter: onMouseOver,
+    onMouseLeave: onMouseOut,
+    children: [/*#__PURE__*/_jsx(NotchedBase, {
+      id: id,
+      prefixed: Boolean(prefixIcon),
+      isEmpty: isEmpty,
+      size: size,
+      disabled: disabled,
+      notch: notch,
+      placeholder: placeholder,
+      attach: attach,
+      borderMerged: borderMerged,
+      isFocused: isActive,
+      isHovered: isHovered,
+      placeholderColourClassName: clsx({
+        [derivedColours.colour]: !isEmpty
+      }),
+      borderColourClassName: derivedColours.borderColour,
+      children: /*#__PURE__*/_jsxs(Box, {
+        ref: wrapperRef,
+        className: styles.inputWrapperSize[size].root[primitiveType],
         width: "full",
-        className: className,
-        onMouseEnter: onMouseOver,
-        onMouseLeave: onMouseOut,
-        children: [/*#__PURE__*/_jsx(NotchedBase, {
-          id: id,
-          prefixed: Boolean(prefixIcon),
-          isEmpty: isEmpty,
-          size: size,
-          disabled: disabled,
-          notch: notch,
-          placeholder: placeholder,
-          attach: attach,
-          borderMerged: borderMerged,
-          isFocused: isActive,
-          isHovered: isHovered,
-          placeholderColourClassName: clsx({
-            [derivedColours.colour]: !isEmpty
-          }),
-          borderColourClassName: derivedColours.borderColour,
-          children: /*#__PURE__*/_jsxs(Box, {
-            ref: wrapperRef,
-            className: styles.inputWrapperSize[size].root[primitiveType],
-            width: "full",
-            height: "full",
-            children: [prefixIcon ? /*#__PURE__*/_jsx(Icon, {
-              icon: prefixIcon,
-              size: iconSize,
-              className: clsx(iconStyles, styles.iconRoot, styles.prefixIcon, styles.iconSize[size], derivedColours.colour)
-            }) : 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 ? /*#__PURE__*/_jsx(Icon, {
-              icon: suffixIcon,
-              size: iconSize,
-              className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour)
-            }) : null, /*#__PURE__*/_jsx(WrappingComponent, _objectSpread({}, wrappingComponent))]
-          })
-        }), hintText || reserveHintSpace ? /*#__PURE__*/_jsx(HintText, {
-          className: derivedColours.colour,
-          hintText: hintText,
-          disabled: disabled,
-          reserveHintSpace: reserveHintSpace,
-          size: size
-        }) : null]
-      });
-    })
-  );
-};
+        height: "full",
+        children: [prefixIcon ? /*#__PURE__*/_jsx(Icon, {
+          icon: prefixIcon,
+          size: iconSize,
+          className: clsx(iconStyles, styles.iconRoot, styles.prefixIcon, styles.iconSize[size], derivedColours.colour)
+        }) : 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 ? /*#__PURE__*/_jsx(Icon, {
+          icon: suffixIcon,
+          size: iconSize,
+          className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour)
+        }) : null, /*#__PURE__*/_jsx(WrappingComponent, _objectSpread({}, wrappingComponent))]
+      })
+    }), hintText || reserveHintSpace ? /*#__PURE__*/_jsx(HintText, {
+      className: derivedColours.colour,
+      hintText: hintText,
+      disabled: disabled,
+      reserveHintSpace: reserveHintSpace,
+      size: size
+    }) : null]
+  });
+});
 const stateNodeGetter = styles => (isHovered, isActive) => {
   if (isHovered) return styles.hover;
   if (isActive) return styles.active;
   return styles.default;
 };
-const derivedColourIntent = (_ref2, styles) => {
-  let {
-    isTouched,
-    isValid,
-    disabled,
-    isHovered,
-    isActive
-  } = _ref2;
+const derivedColourIntent = ({
+  isTouched,
+  isValid,
+  disabled,
+  isHovered,
+  isActive
+}, styles) => {
   if (disabled) return styles.disabled;
   if (isTouched === true) {
     // Validation route

package/dist/hooks/useAnimationEvents/useAnimationEvents.js

@@ -3,12 +3,11 @@
 import { useEffect, useRef } from 'react';
 const finishEvents = ['animationend', 'transitionend', 'transitioncancel'];
 const startEvents = ['animationstart', 'transitionrun'];
-export const useAnimationEvents = _ref => {
-  let {
-    onAnimationStart: incomingOnAnimationStart = () => void 0,
-    onAnimationEnd: incomingOnAnimationEnd = () => void 0,
-    elementRef: incomingRef
-  } = _ref;
+export const useAnimationEvents = ({
+  onAnimationStart: incomingOnAnimationStart = () => void 0,
+  onAnimationEnd: incomingOnAnimationEnd = () => void 0,
+  elementRef: incomingRef
+}) => {
   const elementRef = incomingRef !== null && incomingRef !== void 0 && incomingRef.current ? incomingRef : useRef(null);
   const onAnimationStart = useRef(incomingOnAnimationStart);
   const onAnimationEnd = useRef(incomingOnAnimationEnd);

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.js

@@ -20,13 +20,12 @@ function useResponsiveValue(responsiveValue) {
   }, 1);
   return getEarliestKnownToken(responsiveValue, activeBP);
 }
-export const useAttachedBoxes = _ref => {
-  let {
-    count,
-    columnCount: incomingColumnCount,
-    gap = '1',
-    backgroundColour = 'gray900'
-  } = _ref;
+export const useAttachedBoxes = ({
+  count,
+  columnCount: incomingColumnCount,
+  gap = '1',
+  backgroundColour = 'gray900'
+}) => {
   const columnCount = useResponsiveValue(incomingColumnCount);
   const decimals = count / columnCount % 1;
   let colStart;
@@ -36,12 +35,12 @@ export const useAttachedBoxes = _ref => {
   const bottomLeftIndex = decimals ? Math.floor(count / columnCount) * columnCount : count - columnCount;
   return [Array.from({
     length: count
-  }).map((_, index) => _ref2 => {
+  }).map((_, index) => _ref => {
     let {
         children,
         className
-      } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+      } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
     isLastItem = index === count - 1;
     if (isLastItem && decimals) {
       //is last item and is not a perfect division

package/dist/hooks/useMedia/useMedia.js

@@ -4,8 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { useRuntimeTokens } from "../../components/OverdriveProvider/index.js";
 import { isBrowser } from "../../utils/index.js";
-export const useMedia = function (queries) {
-  let fallbackCase = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export const useMedia = (queries, fallbackCase = false) => {
   const {
     breakpoints
   } = useRuntimeTokens();

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.js

@@ -5,15 +5,14 @@ import { useTheme } from "../../components/OverdriveProvider/index.js";
 import { overdriveTokens } from "../../themes/theme.css.js";
 import { getThemeTokenValue } from "../../utils/css.js";
 import { useResponsiveValue } from "../useResponsiveValue/useResponsiveValue.js";
-export const useWindowHeightFill = _ref => {
-  let {
-    bottomGap = 'none',
-    includeMobile = false,
-    serverVhFallback = 100,
-    containerRef,
-    observedElementRef,
-    maxHeight
-  } = _ref;
+export const useWindowHeightFill = ({
+  bottomGap = 'none',
+  includeMobile = false,
+  serverVhFallback = 100,
+  containerRef,
+  observedElementRef,
+  maxHeight
+}) => {
   // Create an observer instance linked to the callback function
   const cappedHeight = useResponsiveValue([includeMobile,, true]);
   const {

package/dist/styles/sprinkles.css.js

@@ -38,24 +38,15 @@ const flexAlignmentsWithSpace = _objectSpread(_objectSpread({}, flexAlignments),
   'space-between': 'space-between',
   'space-evenly': 'space-evenly'
 });
-const intentForegroundColours = mapValues(tokens.colours.intent, _ref => {
-  let {
-    foreground
-  } = _ref;
-  return foreground;
-});
-const intentBackgroundColoursStandard = mapValues(tokens.colours.intent, _ref2 => {
-  let {
-    background
-  } = _ref2;
-  return background.standard;
-});
-const intentBorderColours = mapValues(tokens.colours.intent, _ref3 => {
-  let {
-    border
-  } = _ref3;
-  return border;
-});
+const intentForegroundColours = mapValues(tokens.colours.intent, ({
+  foreground
+}) => foreground);
+const intentBackgroundColoursStandard = mapValues(tokens.colours.intent, ({
+  background
+}) => background.standard);
+const intentBorderColours = mapValues(tokens.colours.intent, ({
+  border
+}) => border);
 const backgroundColours = _objectSpread(_objectSpread(_objectSpread({}, intentBackgroundColoursStandard), tokens.colours.gamut), {}, {
   transparent: 'transparent'
 });

package/dist/styles/typography.js

@@ -26,34 +26,31 @@ const headingSizeMap = {
 /**
  * Applies typography-related styling including font size and weight, has opinionated defaults.
  */
-export const typography = _ref => {
-  let {
-    align: textAlign,
-    breakWord = false,
-    color,
-    // modern semantic colour tokens
-    colour,
-    // legacy colours
-    noWrap = false,
-    size: text = DEFAULT_TEXT_SIZE,
-    strong = false,
-    transform: textTransform,
-    weight = DEFAULT_TEXT_WEIGHT,
-    wrap,
-    wordBreak
-  } = _ref;
-  return clsx(common, sprinkles({
-    color,
-    fontWeight: strong === true ? 'bold' : weight,
-    text,
-    textAlign,
-    textTransform,
-    textWrap: noWrap === true ? 'nowrap' : wrap,
-    wordBreak: breakWord === true ? 'break-word' : wordBreak
-  }), !color && sprinklesLegacyText({
-    color: colour !== null && colour !== void 0 ? colour : strong === true ? 'dark' : DEFAULT_TEXT_COLOUR
-  }));
-};
+export const typography = ({
+  align: textAlign,
+  breakWord = false,
+  color,
+  // modern semantic colour tokens
+  colour,
+  // legacy colours
+  noWrap = false,
+  size: text = DEFAULT_TEXT_SIZE,
+  strong = false,
+  transform: textTransform,
+  weight = DEFAULT_TEXT_WEIGHT,
+  wrap,
+  wordBreak
+}) => clsx(common, sprinkles({
+  color,
+  fontWeight: strong === true ? 'bold' : weight,
+  text,
+  textAlign,
+  textTransform,
+  textWrap: noWrap === true ? 'nowrap' : wrap,
+  wordBreak: breakWord === true ? 'break-word' : wordBreak
+}), !color && sprinklesLegacyText({
+  color: colour !== null && colour !== void 0 ? colour : strong === true ? 'dark' : DEFAULT_TEXT_COLOUR
+}));
 /**
  * Primary utility for styling typography, combines reset styles, style props and element props.
  * Also accepts a heading tag which will apply colour, font weight and size defaults.
@@ -75,7 +72,7 @@ export const typography = _ref => {
  *   breakWord: true
  * })
  */
-export function textStyles(_ref2) {
+export function textStyles(_ref) {
   let {
       as = 'span',
       className,
@@ -83,8 +80,8 @@ export function textStyles(_ref2) {
       size = isHeadingTag(as) ? headingSizeMap[as] : undefined,
       weight = isHeadingTag(as) ? 'bold' : undefined
       // remaining style props
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return clsx(resetStyles(as), typography(_objectSpread({
     colour,
     size,

package/dist/themes/helpers.js

@@ -25,14 +25,13 @@ import { colord } from 'colord';
  * ```
  */
 
-export const shadedColour = _ref => {
-  let {
-    colour,
-    intensity,
-    direction,
-    isDarkTheme,
-    transparency = 0
-  } = _ref;
+export const shadedColour = ({
+  colour,
+  intensity,
+  direction,
+  isDarkTheme,
+  transparency = 0
+}) => {
   const intensityValue = typeof intensity === 'string' ? Number(intensity) : intensity;
   const transparencyValue = typeof transparency === 'string' ? Number(transparency) : transparency;
   return colord(colour)[!isDarkTheme && direction === 'backward' || isDarkTheme && direction === 'forward' ? 'darken' : 'lighten'](intensityValue || void 0).alpha(typeof transparencyValue === 'number' ? 1 - transparencyValue : 1).toHex();
@@ -74,13 +73,12 @@ export const getContrastRatio = (colour1, colour2) => {
   const color2luminance = getColourLuminance(getRGBValues(colour2));
   return color1luminance > color2luminance ? (color2luminance + 0.05) / (color1luminance + 0.05) : (color1luminance + 0.05) / (color2luminance + 0.05);
 };
-export const passesAccessibilityContrast = _ref2 => {
-  let {
-    colour1,
-    colour2,
-    level,
-    textSize
-  } = _ref2;
+export const passesAccessibilityContrast = ({
+  colour1,
+  colour2,
+  level,
+  textSize
+}) => {
   const contrastRatio = getContrastRatio(colour1, colour2);
   if (textSize === 'LARGE') {
     return level === 'AAA' ? contrastRatio < 1 / 4.5 : contrastRatio < 1 / 3;