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

package/dist/components/EditableText/EditableText.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "color", "colour", "size", "display", "value", "onFocus", "onBlur", "onKeyDown", "onModeChange", "tabIndex", "onChange", "type"];
+const _excluded = ["as", "colour", "size", "display", "value", "onFocus", "onBlur", "onKeyDown", "onModeChange", "tabIndex", "onChange", "type"];
 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 clsx from 'clsx';
@@ -14,11 +14,10 @@ import * as inputStyles from "../private/InputBase/withEnhancedInput.css.js";
 import * as styles from "./EditableText.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const numberInputValuePattern = /^\d*\.?\d*$/;
-export const EditableText = forwardRef((_ref, ref) => {
+export const EditableText = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _inputRef$current;
   let {
-      as,
-      color,
+      as: is,
       colour = 'muted',
       size,
       display = 'inline-block',
@@ -44,8 +43,10 @@ export const EditableText = forwardRef((_ref, ref) => {
   };
   const onChange = useCallback(e => {
     const changeValue = e.currentTarget.value;
+    // eslint-disable-next-line unicorn/prefer-at
     const lastChar = changeValue.charAt(changeValue.length - 1);
     if (type === 'number' && !numberInputValuePattern.test(lastChar)) {
+      // If the last entered character is not a digit or '.', don't update the state
       return;
     }
     if (mode === 'INPUT') {
@@ -54,7 +55,7 @@ export const EditableText = forwardRef((_ref, ref) => {
     if (typeof incomingOnChange === 'function') incomingOnChange(e);
   }, [incomingOnChange, type, mode]);
   const baseStyle = textStyles({
-    as,
+    as: is,
     colour,
     size
   });
@@ -64,7 +65,7 @@ export const EditableText = forwardRef((_ref, ref) => {
       setWidth(textRef.current.clientWidth);
     }
   }, [textRef.current, inputValue]);
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
     display: display,
     tabIndex: tabIndex,
@@ -87,7 +88,7 @@ export const EditableText = forwardRef((_ref, ref) => {
         onRequestModeChange('TEXT');
       }
     },
-    children: [mode === 'INPUT' && _jsx(Box, _objectSpread(_objectSpread({
+    children: [mode === 'INPUT' && /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
       as: "input"
     }, inputProps), {}, {
       autoFocus: true,
@@ -99,11 +100,10 @@ export const EditableText = forwardRef((_ref, ref) => {
       style: {
         width
       }
-    })), _jsx(Text, {
+    })), /*#__PURE__*/_jsx(Text, {
       noWrap: true,
       ref: textRef,
-      as: as,
-      color: color,
+      as: is,
       colour: colour,
       size: size,
       className: clsx(baseStyle, styles.text, {

package/dist/components/FillHeightBox/FillHeightBox.js

@@ -21,6 +21,7 @@ export const FillHeightBox = _ref => {
     scrollPaneProps = _objectWithoutProperties(_ref, _excluded);
   const containerRef = React.useRef(null);
   const containerHeight = useWindowHeightFill({
+    // @ts-expect-error containerRef can be nul
     containerRef,
     includeMobile,
     observedElementRef,
@@ -28,7 +29,7 @@ export const FillHeightBox = _ref => {
     serverVhFallback,
     maxHeight
   });
-  return _jsx(ScrollPane, _objectSpread(_objectSpread({}, scrollPaneProps), {}, {
+  return /*#__PURE__*/_jsx(ScrollPane, _objectSpread(_objectSpread({}, scrollPaneProps), {}, {
     ref: containerRef,
     style: _objectSpread(_objectSpread({}, style), {}, {
       maxHeight: containerHeight

package/dist/components/Flyout/Flyout.d.ts

@@ -1,4 +1,4 @@
-import React, { type ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 import { Positioner } from '../Positioner/Positioner';
-export declare const Flyout: ({ children, triggerRef, isOpen, alignment, triggerOffset, ...rest }: ComponentProps<typeof Positioner>) => React.JSX.Element;
+export declare const Flyout: FunctionComponent<ComponentPropsWithoutRef<typeof Positioner>>;
 //# sourceMappingURL=Flyout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flyout.d.ts","sourceRoot":"","sources":["../../../lib/components/Flyout/Flyout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,eAAO,MAAM,MAAM,GAAI,qEAOpB,cAAc,CAAC,OAAO,UAAU,CAAC,sBAmBnC,CAAC"}
+{"version":3,"file":"Flyout.d.ts","sourceRoot":"","sources":["../../../lib/components/Flyout/Flyout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIzE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,iBAAiB,CACrC,wBAAwB,CAAC,OAAO,UAAU,CAAC,CAoB3C,CAAC"}

package/dist/components/Flyout/Flyout.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["children", "triggerRef", "isOpen", "alignment", "triggerOffset"];
 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 from 'react';
+import * as React from 'react';
 import { Box } from "../Box/Box.js";
 import { Positioner } from "../Positioner/Positioner.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,13 +18,13 @@ export const Flyout = _ref => {
       triggerOffset
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Positioner, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Positioner, _objectSpread(_objectSpread({
     triggerRef: triggerRef,
     isOpen: isOpen,
     alignment: alignment,
     triggerOffset: triggerOffset
   }, rest), {}, {
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       overflow: "hidden",
       backgroundColour: "white",
       boxShadow: "4",

package/dist/components/Heading/Heading.d.ts

@@ -4,6 +4,11 @@ import { type TextStyleProps } from '../Text/textStyles';
 export type HeadingTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface HeadingProps extends Omit<BoxProps, keyof TextStyleProps>, Omit<TextStyleProps, 'as'> {
     as?: HeadingTags;
+    /** @deprecated Prefer `as` */
+    is?: HeadingTags;
 }
-export declare const Heading: ({ as, align, breakWord, children, className, color, colour, noWrap, size, transform, weight, ...props }: HeadingProps) => React.JSX.Element;
+/**
+ * Heading renders an <h1... h6> with default font size and weight
+ */
+export declare const Heading: ({ is, as, align, breakWord, children, className, color, colour, noWrap, size, transform, weight, ...props }: HeadingProps) => React.JSX.Element;
 //# sourceMappingURL=Heading.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../lib/components/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAErE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElE,MAAM,WAAW,YAChB,SAAQ,IAAI,CAAC,QAAQ,EAAE,MAAM,cAAc,CAAC,EAC3C,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC;IAC3B,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAcD,eAAO,MAAM,OAAO,GAAI,yGAarB,YAAY,sBAoBd,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../lib/components/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAErE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElE,MAAM,WAAW,YAChB,SAAQ,IAAI,CAAC,QAAQ,EAAE,MAAM,cAAc,CAAC,EAC3C,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC;IAC3B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,8BAA8B;IAC9B,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAWD;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,6GAcrB,YAAY,sBAoBd,CAAC"}

package/dist/components/Heading/Heading.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "align", "breakWord", "children", "className", "color", "colour", "noWrap", "size", "transform", "weight"];
+const _excluded = ["is", "as", "align", "breakWord", "children", "className", "color", "colour", "noWrap", "size", "transform", "weight"];
 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 from 'react';
@@ -17,22 +17,29 @@ const defaultSizeMap = {
   h5: '3',
   h6: '2'
 };
+
+/**
+ * Heading renders an <h1... h6> with default font size and weight
+ */
 export const Heading = _ref => {
   let {
-      as = 'h1',
+      is = 'h1',
+      as = is,
       align,
       breakWord,
       children,
       className,
       color,
+      // semantic tokens
       colour = color ? undefined : 'dark',
+      // legacy intentional tokens
       noWrap,
       size = defaultSizeMap[as],
       transform,
       weight = 'bold'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
     as: as,
     color: color,
     className: [textStyles({

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.d.ts

@@ -3,7 +3,7 @@ import { Column } from '../Columns/Column';
 import { Columns } from '../Columns/Columns';
 import { SliderProgress } from '../SliderProgress/SliderProgress';
 import { UseHorizontalAutoScrollerProps } from './useHorizontalAutoScroller';
-export interface HorizontalAutoScrollerProps extends Pick<ComponentProps<typeof Columns>, 'space'>, Omit<UseHorizontalAutoScrollerProps, 'itemsRef'> {
+export interface Props extends Pick<ComponentProps<typeof Columns>, 'space'>, Omit<UseHorizontalAutoScrollerProps, 'itemsRef'> {
     durationSeconds?: number;
     className?: string;
     columnWidth?: ComponentProps<typeof Column>['width'];
@@ -11,6 +11,6 @@ export interface HorizontalAutoScrollerProps extends Pick<ComponentProps<typeof
     noControls?: boolean;
     children: ReactNode | ReactNode[];
 }
-export declare const HorizontalAutoScroller: FunctionComponent<HorizontalAutoScrollerProps>;
+export declare const HorizontalAutoScroller: FunctionComponent<Props>;
 export default HorizontalAutoScroller;
 //# sourceMappingURL=HorizontalAutoScroller.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalAutoScroller.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,cAAc,EACd,iBAAiB,EACjB,SAAS,EAGT,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAG7C,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAIlE,OAAO,EAEN,8BAA8B,EAC9B,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,2BAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,OAAO,CAAC,EACpD,IAAI,CAAC,8BAA8B,EAAE,UAAU,CAAC;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;IACrD,oBAAoB,CAAC,EAAE,cAAc,CACpC,OAAO,cAAc,CACrB,CAAC,kBAAkB,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAiB,CACrD,2BAA2B,CAmK3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"HorizontalAutoScroller.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,cAAc,EACd,iBAAiB,EACjB,SAAS,EAGT,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAG7C,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAIlE,OAAO,EAEN,8BAA8B,EAC9B,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,OAAO,CAAC,EACpD,IAAI,CAAC,8BAA8B,EAAE,UAAU,CAAC;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;IACrD,oBAAoB,CAAC,EAAE,cAAc,CACpC,OAAO,cAAc,CACrB,CAAC,kBAAkB,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,KAAK,CAkK3D,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.js

@@ -38,7 +38,7 @@ export const HorizontalAutoScroller = _ref => {
   const [itemsRef, setItemsRef] = useState();
   const items = useMemo(() => {
     const itemsRef = [];
-    const list = incomingItems.map((item, index) => _jsx(Column, {
+    const list = incomingItems.map((item, index) => /*#__PURE__*/_jsx(Column, {
       ref: el => {
         if (el) itemsRef.push(el);
       },
@@ -46,7 +46,7 @@ export const HorizontalAutoScroller = _ref => {
       width: columnWidth,
       justifyContent: "stretch",
       alignSelf: "stretch",
-      children: _jsx(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         width: "full",
         className: clsx(styles.item, {
           [styles.active]: index === activeIndex
@@ -76,18 +76,19 @@ export const HorizontalAutoScroller = _ref => {
   });
   const handlers = useSwipeable({
     onSwiped: eventData => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       eventData.dir === 'Left' ? next() : prev();
     }
   });
   if (items.length < 2) {
-    return _jsx(_Fragment, {
+    return /*#__PURE__*/_jsx(_Fragment, {
       children: items
     });
   }
-  return _jsxs(Stack, {
+  return /*#__PURE__*/_jsxs(Stack, {
     className: className,
     space: "5",
-    children: [_jsxs(Box, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
       overflow: "hidden",
       position: "relative"
     }, handlers), {}, {
@@ -98,13 +99,13 @@ export const HorizontalAutoScroller = _ref => {
       onTouchStart: pause,
       onTouchEnd: resume,
       onClick: onClick,
-      children: [noControls ? null : _jsx(Box, {
+      children: [noControls ? null : /*#__PURE__*/_jsx(Box, {
         className: [styles.controllerBtn, styles.prevBtn],
         display: "flex",
         alignItems: "center",
         justifyContent: "start",
         position: "absolute",
-        children: _jsx(Button, {
+        children: /*#__PURE__*/_jsx(Button, {
           rounded: true,
           onClick: event => {
             event.stopPropagation();
@@ -112,32 +113,32 @@ export const HorizontalAutoScroller = _ref => {
             prev();
           },
           variant: "secondary",
-          children: _jsx(Icon, {
+          children: /*#__PURE__*/_jsx(Icon, {
             icon: ChevronLeftIcon
           })
         })
-      }), _jsxs(Columns, {
+      }), /*#__PURE__*/_jsxs(Columns, {
         ref: containerRef,
         overflow: "hidden",
         noWrap: true,
         width: "full",
         space: space,
-        children: [noControls ? null : _jsx(Column, {
+        children: [noControls ? null : /*#__PURE__*/_jsx(Column, {
           noShrink: true,
           className: styles.controllerCol,
-          children: _jsx("span", {})
-        }), items, noControls ? null : _jsx(Column, {
+          children: /*#__PURE__*/_jsx("span", {})
+        }), items, noControls ? null : /*#__PURE__*/_jsx(Column, {
           noShrink: true,
           className: styles.controllerCol,
-          children: _jsx("span", {})
+          children: /*#__PURE__*/_jsx("span", {})
         })]
-      }), noControls ? null : _jsx(Box, {
+      }), noControls ? null : /*#__PURE__*/_jsx(Box, {
         className: [styles.controllerBtn, styles.nextBtn],
         display: "flex",
         alignItems: "center",
         justifyContent: "flexEnd",
         position: "absolute",
-        children: _jsx(Button, {
+        children: /*#__PURE__*/_jsx(Button, {
           rounded: true,
           onClick: event => {
             event.stopPropagation();
@@ -145,14 +146,14 @@ export const HorizontalAutoScroller = _ref => {
             next();
           },
           variant: "secondary",
-          children: _jsx(Icon, {
+          children: /*#__PURE__*/_jsx(Icon, {
             icon: ChevronRightIcon
           })
         })
       })]
-    })), _jsx(Section, {
+    })), /*#__PURE__*/_jsx(Section, {
       width: "small",
-      children: _jsx(SliderProgress, {
+      children: /*#__PURE__*/_jsx(SliderProgress, {
         backgroundColour: sliderProgressColour,
         duration: `${durationSeconds}s`,
         paused: paused,

package/dist/components/Icon/Icon.js

@@ -17,7 +17,7 @@ export const Icon = _ref => {
     display = 'block'
   } = _ref;
   useNullCheck(icon, 'Icon component received an empty icon prop.');
-  const iconElement = cloneElement(icon, {
+  const iconElement = /*#__PURE__*/cloneElement(icon, {
     className: componentStyles({
       as: 'svg',
       display: 'block',
@@ -27,7 +27,7 @@ export const Icon = _ref => {
     'aria-label': (_icon$props$ariaLabe = icon.props['aria-label']) !== null && _icon$props$ariaLabe !== void 0 ? _icon$props$ariaLabe : undefined,
     'aria-hidden': icon.props['aria-label'] ? undefined : true
   });
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     as: "span",
     display: display,
     className: [resolveResponsiveStyle(size, styles.size), className],

package/dist/components/Image/Image.d.ts

@@ -1,6 +1,9 @@
 import type { ComponentProps, FunctionComponent } from 'react';
 import { ResponsiveImage } from './ResponsiveImage';
 export interface ImageProps extends ComponentProps<typeof ResponsiveImage> {
+    /**
+     * If set to true, no size/quality optimisation will be done even when `ImageServerProvider` has been defined upstream.
+     **/
     unoptimised?: boolean;
 }
 export declare const Image: FunctionComponent<ImageProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC;IAIzE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAS9C,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC;IACzE;;QAEI;IACJ,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAS9C,CAAC"}

package/dist/components/Image/Image.js

@@ -16,7 +16,7 @@ export const Image = _ref => {
       imageWidth
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return useImageServer() && !unoptimised ? _jsx(ResponsiveImage, _objectSpread({
+  return useImageServer() && !unoptimised ? /*#__PURE__*/_jsx(ResponsiveImage, _objectSpread({
     imageWidth: imageWidth
-  }, props)) : _jsx(SimpleImage, _objectSpread({}, props));
+  }, props)) : /*#__PURE__*/_jsx(SimpleImage, _objectSpread({}, props));
 };

package/dist/components/Image/ImageServerProvider.js

@@ -24,10 +24,14 @@ export const widthMap = {
 const defaultValue = {
   widthMap,
   getWidthValue: width => widthMap[width],
+  // @ts-expect-error type does not allow `null`
   srcUrlMapper: null,
+  // @ts-expect-error type does not allow `null`
   generateSrcSet: null
 };
-const imageServerCtx = createContext(null);
+
+// @ts-expect-error type does not allow `null`
+const imageServerCtx = /*#__PURE__*/createContext(null);
 export const useImageServer = () => useContext(imageServerCtx);
 export const ImageServerProvider = _ref => {
   let {
@@ -43,6 +47,7 @@ export const ImageServerProvider = _ref => {
     } = _ref2;
     return Object.keys(widthMap).map(key => {
       const width = getWidthValue === null || getWidthValue === void 0 ? void 0 : getWidthValue(key);
+      // @ts-expect-error width could be undefined
       return `${srcUrlMapper({
         quality,
         src,
@@ -50,7 +55,7 @@ export const ImageServerProvider = _ref => {
       })} ${width}w`;
     }).join(', ');
   }, [widthMap, srcUrlMapper, getWidthValue]);
-  return _jsx(imageServerCtx.Provider, {
+  return /*#__PURE__*/_jsx(imageServerCtx.Provider, {
     value: useMemo(() => ({
       widthMap,
       srcUrlMapper,

package/dist/components/Image/ResponsiveImage.d.ts

@@ -3,8 +3,30 @@ import { ResponsiveProp } from '../../utils/responsiveProps.css';
 import { widthMap } from './ImageServerProvider';
 import { SimpleImage } from './SimpleImage';
 export interface ResponsiveImageProps extends Omit<ComponentProps<typeof SimpleImage>, 'sizes'> {
+    /**
+     * Only effective if `ImageServerProvider` is defined upstream.
+     * Not to be confused with the `width` of the image tag. `imageWidth` is purely to do with the
+     * intrinsic size of the image asset coming back from the Image Server and does not change the layout size of the `img` tag
+     * If `imageWidth` is provided, it will be exactly used and no automatic `srcSet` will be defined and `sizes` will have no effect.
+     * `imageWidth` can be a single value e.g. `4` to be used for all screen sizes or an array to be used for responsive values e.g. `[4, ,6, 8]`
+     **/
     imageWidth: ResponsiveProp<keyof typeof widthMap>;
+    /**
+     * Only effective if `ImageServerProvider` is defined upstream.
+     * A vw value e.g. `80vw` or an array of vw values `['100vw', ,'50vw', '30vw']` to be used as responsive.
+     * When defined, browser will pick the closest match from srcSet based on viewport width size.
+     * Just like `imageWidth` sizes has no effect on the `img` tag layout size and is purely to do with the
+     * intrinsic size of the image asset coming back from the Image Server.
+     * in `['100vw', ,'50vw', '30vw']` browser will fetch the best image asset to cover
+     * the whole width of mobile and tablet devices, 50% of desktop screen width 30% of a large desktop screen width irrespective
+     * of the size of img tag on the page. So a `100vh` set for a large desktop might fetch a `3840px` wide
+     * asset even if the image only occupies 10px of the page width.
+     **/
     sizes: ResponsiveProp<string>;
+    /**
+     * Only effective if `ImageServerProvider` is defined upstream.
+     * A number between 1 and 100 to be used by the image server for the quality of image returned.
+     **/
     quality?: number;
 }
 export declare const ResponsiveImage: FunctionComponent<ResponsiveImageProps>;

package/dist/components/Image/ResponsiveImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,oBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IAQzD,UAAU,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAalD,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAM9B,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CA6CnE,CAAC"}
+{"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,oBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IACzD;;;;;;QAMI;IACJ,UAAU,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAElD;;;;;;;;;;QAUI;IACJ,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAE9B;;;QAGI;IACJ,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CA6CnE,CAAC"}

package/dist/components/Image/ResponsiveImage.js

@@ -30,6 +30,7 @@ export const ResponsiveImage = _ref => {
   } = useImageServer();
   const src = useMemo(() => srcUrlMapper({
     src: incomingSrc,
+    // @ts-expect-error Cannot invoke an object which is possibly 'undefined'
     width: getWidthValue(imageWidth),
     quality
   }), [incomingSrc, imageWidth, quality, srcUrlMapper, getWidthValue]);
@@ -37,7 +38,7 @@ export const ResponsiveImage = _ref => {
     src: incomingSrc,
     quality
   }), [incomingSrc, quality]);
-  return _jsx(SimpleImage, _objectSpread({
+  return /*#__PURE__*/_jsx(SimpleImage, _objectSpread({
     sizes: sizes || void 0,
     srcSet: srcset,
     src: src

package/dist/components/Image/SimpleImage.d.ts

@@ -1,10 +1,28 @@
 import { FunctionComponent, ReactElement } from 'react';
 export interface SimpleImageProps extends Partial<Omit<HTMLImageElement, 'loading' | 'className' | 'width' | 'height'>> {
     src: string;
+    /**
+     * If set to true, image lazy loading is disabled.
+     **/
     eager?: boolean;
+    /**
+     * Can be manually defined as a normal `srcset` img tag attribute but will be automatically set for
+     * all available sizes when an `ImageServerProvider` is defined upstream.
+     **/
     srcSet?: string;
+    /**
+     * When set to true image async decoding by the browser is disabled.
+     * Async decoding of the image reduces delay in presenting other content.
+     **/
     syncDecoding?: boolean;
+    /**
+     * Only effective if `ImageServerProvider` is defined upstream.
+     * Will be set as `width` attribute on the `img` tag
+     **/
     width?: string;
+    /**
+     * Will be set as `height` attribute on the `img` tag
+     **/
     height?: string;
     className?: string;
     fallbackComponent?: ReactElement;

package/dist/components/Image/SimpleImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/SimpleImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,gBAChB,SAAQ,OAAO,CACd,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,CACpE;IACD,GAAG,EAAE,MAAM,CAAC;IAKZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAMvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iBAAiB,CAAC,EAAE,YAAY,CAAC;CACjC;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAgC3D,CAAC"}
+{"version":3,"file":"SimpleImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/SimpleImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,gBAChB,SAAQ,OAAO,CACd,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,CACpE;IACD,GAAG,EAAE,MAAM,CAAC;IAEZ;;QAEI;IACJ,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;QAGI;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;QAGI;IACJ,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;QAGI;IACJ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;QAEI;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iBAAiB,CAAC,EAAE,YAAY,CAAC;CACjC;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAgC3D,CAAC"}

package/dist/components/Image/SimpleImage.js

@@ -15,7 +15,7 @@ export const SimpleImage = _ref => {
       className = '',
       src,
       srcSet,
-      fallbackComponent
+      fallbackComponent // Add this line
     } = _ref,
     imgProps = _objectWithoutProperties(_ref, _excluded);
   const [hasError, setHasError] = useState(false);
@@ -23,9 +23,13 @@ export const SimpleImage = _ref => {
     setHasError(true);
   };
   if (hasError && fallbackComponent) {
+    // Render fallback component
     return fallbackComponent;
   }
-  return (_jsx("img", _objectSpread({
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error cross origin prop type
+    _jsx("img", _objectSpread({
       loading: eager ? 'eager' : 'lazy',
       decoding: syncDecoding ? 'sync' : 'async',
       className: className,

package/dist/components/Inline/Inline.d.ts

@@ -1,13 +1,16 @@
-import { type FunctionComponent, type ReactNode } from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
+import type { FunctionComponent } from 'react';
+import { ReactNode } from 'react';
+import type { ThemeTokens as Tokens } from '../../themes';
+import type { ResponsiveProp } from '../../utils/responsiveProps.css';
 import { type BoxProps } from '../Box/Box';
 export interface InlineProps extends Pick<BoxProps, 'as' | 'width'> {
-    alignX?: Sprinkles['justifyContent'];
-    alignY?: Sprinkles['alignItems'];
+    space?: ResponsiveProp<keyof Tokens['space']>;
+    alignY?: BoxProps['alignItems'];
+    alignX?: BoxProps['justifyContent'];
+    noWrap?: boolean;
     children: ReactNode;
     dividers?: boolean | ReactNode;
-    noWrap?: boolean;
-    space?: Sprinkles['gap'];
 }
 export declare const Inline: FunctionComponent<InlineProps>;
+export default Inline;
 //# sourceMappingURL=Inline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../lib/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEb,KAAK,iBAAiB,EAGtB,KAAK,SAAS,EAEd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,OAAO,CAAC;IAIlE,MAAM,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAKrC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAKjC,QAAQ,EAAE,SAAS,CAAC;IAIpB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IAKjB,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;CACzB;AAkCD,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAsDjD,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../lib/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAE7D,OAAO,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAO5D,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,OAAO,CAAC;IAClE,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B;AAOD,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA8DjD,CAAC;AAgBF,eAAe,MAAM,CAAC"}