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

package/dist/components/ProgressBarGroup/ProgressBarGroup.js

@@ -17,23 +17,23 @@ export const ProgressBarGroup = _ref => {
   } = _ref;
   const hasPrefixLabels = Array.isArray(prefixLabels);
   const hasSuffixLabels = Array.isArray(suffixLabels);
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     className: styles.root,
     alignItems: "center",
     style: {
       gridTemplateColumns: `${hasPrefixLabels ? 'auto ' : ''}1fr${hasSuffixLabels ? ' auto' : ''}`
     },
     odComponent: "progress-bar-group",
-    children: values.map((value, idx) => _jsxs(Fragment, {
-      children: [_jsx(Text, {
+    children: values.map((value, idx) => /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
         size: "3",
         colour: "light",
         className: styles.label,
         children: hasPrefixLabels ? prefixLabels[idx] : ''
-      }), _jsx(ProgressBar, {
+      }), /*#__PURE__*/_jsx(ProgressBar, {
         colour: colour,
         value: value / count
-      }), _jsx(Text, {
+      }), /*#__PURE__*/_jsx(Text, {
         size: "3",
         colour: "light",
         children: hasSuffixLabels ? suffixLabels[idx] : ''

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -12,17 +12,17 @@ export const ProgressSpinner = _ref => {
     colour = 'primary',
     size = 'medium'
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     className: [styles.size[size].circular, styles.colours[colour], className],
     odComponent: "progress-spinner",
-    children: _jsx("svg", {
+    children: /*#__PURE__*/_jsx("svg", {
       className: clsx(componentStyles({
         as: 'svg',
         display: 'block',
         overflow: 'hidden'
       }), styles.circular),
       viewBox: "25 25 50 50",
-      children: _jsx("circle", {
+      children: /*#__PURE__*/_jsx("circle", {
         className: clsx(styles.path, styles.size[size].path),
         cx: "50",
         cy: "50",

package/dist/components/Radio/Radio.js

@@ -9,7 +9,7 @@ import { checkableIndicator } from "../private/CheckableBase/CheckableBase.css.j
 import * as styles from "./Radio.css.js";
 import { useRadioContext } from "./RadioGroup.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Radio = forwardRef((_ref, ref) => {
+export const Radio = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     value,
     className = '',
@@ -22,7 +22,7 @@ export const Radio = forwardRef((_ref, ref) => {
     var _radioContext$radioSe;
     return (_radioContext$radioSe = radioContext.radioSelected) === null || _radioContext$radioSe === void 0 ? void 0 : _radioContext$radioSe.call(radioContext, value);
   };
-  return _jsxs(CheckableBase, {
+  return /*#__PURE__*/_jsxs(CheckableBase, {
     ref: ref,
     inputType: "radio",
     className: className,
@@ -32,11 +32,11 @@ export const Radio = forwardRef((_ref, ref) => {
     disabled: disabled,
     checked: isChecked,
     handleClick: handleClick,
-    children: [_jsx(Box, {
+    children: [/*#__PURE__*/_jsx(Box, {
       className: clsx(checkableIndicator, styles.radio, {
         [styles.radioSelected]: isChecked
       })
-    }), _jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       className: clsx(styles.inner, {
         [styles.innerSelected]: isChecked
       })

package/dist/components/Radio/RadioGroup.js

@@ -3,9 +3,9 @@
 import React, { createContext, forwardRef, useContext, useMemo } from 'react';
 import { Box } from "../Box/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const RadioContext = createContext(null);
+export const RadioContext = /*#__PURE__*/createContext(null);
 export const useRadioContext = () => useContext(RadioContext);
-export const RadioGroup = forwardRef((_ref, ref) => {
+export const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     name,
     value,
@@ -18,9 +18,9 @@ export const RadioGroup = forwardRef((_ref, ref) => {
     inputName: name,
     radioSelected: onChange
   }), [value, name, onChange]);
-  return _jsx(RadioContext.Provider, {
+  return /*#__PURE__*/_jsx(RadioContext.Provider, {
     value: contextValue,
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       ref: ref,
       position: "relative",
       display: "flex",

package/dist/components/ScrollPane/ScrollPane.js

@@ -10,13 +10,13 @@ import React, { forwardRef } from 'react';
 import { Box } from "../Box/index.js";
 import * as styles from "./ScrollPane.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ScrollPane = forwardRef((_ref, ref) => {
+export const ScrollPane = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       className = '',
       rounded = false
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Box, _objectSpread({
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
     ref: ref,
     overflow: "auto",
     className: clsx(className, styles.root, {

package/dist/components/SearchBar/SearchBar.d.ts

@@ -10,10 +10,27 @@ interface SearchBarProps extends AriaSearchFieldProps, TestId {
     onChange?: AriaSearchFieldProps['onChange'];
     isDisabled?: AriaSearchFieldProps['isDisabled'];
     maxLength?: AriaSearchFieldProps['maxLength'];
+    /**
+     * The placeholder text is also used as the aria-label since the SearchBar does not have a label element
+     */
     placeholder: string;
+    /**
+     * Language content override
+     */
     lang?: Partial<Record<TextContent, string>>;
+    /**
+     * Optional forwarded ref for the input element (React 19)
+     */
     ref?: React.Ref<HTMLInputElement>;
 }
+/**
+ * Oversized search bar implemented via the react-aria `useSearchField` hook
+ * ([docs](https://react-spectrum.adobe.com/react-aria/useSearchField.html)). This search bar is used primarily in
+ * combination with the `OptionGrid` in order to filter displayed options and can be reset once text is entered.
+ *
+ * This field does not have a visible label, so an placeholder text is used as `aria-label`.
+ * It is recommended to use the `onChange` prop to handle the input content, uncontrolled.
+ */
 export declare const SearchBar: (componentProps: SearchBarProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=SearchBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMN,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAY1C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,UAAU,cAAe,SAAQ,oBAAoB,EAAE,MAAM;IAC5D,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAI9C,WAAW,EAAE,MAAM,CAAC;IAIpB,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAI5C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAClC;AAoBD,eAAO,MAAM,SAAS,GAAI,gBAAgB,cAAc,sBAiEvD,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMN,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAY1C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,UAAU,cAAe,SAAQ,oBAAoB,EAAE,MAAM;IAC5D,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAClC;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,gBAAgB,cAAc,sBAiEvD,CAAC"}

package/dist/components/SearchBar/SearchBar.js

@@ -21,12 +21,21 @@ const ReactAriaButton = props => {
   const {
     buttonProps
   } = useButton(props, ref);
-  return _jsx("button", _objectSpread(_objectSpread({}, buttonProps), {}, {
+  return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({}, buttonProps), {}, {
     className: props.className,
     ref: ref,
     children: props.children
   }));
 };
+
+/**
+ * Oversized search bar implemented via the react-aria `useSearchField` hook
+ * ([docs](https://react-spectrum.adobe.com/react-aria/useSearchField.html)). This search bar is used primarily in
+ * combination with the `OptionGrid` in order to filter displayed options and can be reset once text is entered.
+ *
+ * This field does not have a visible label, so an placeholder text is used as `aria-label`.
+ * It is recommended to use the `onChange` prop to handle the input content, uncontrolled.
+ */
 export const SearchBar = componentProps => {
   var _ref;
   const {
@@ -57,16 +66,19 @@ export const SearchBar = componentProps => {
   };
   const ClearButton = () => {
     if (state.value === '') return null;
-    return _jsx(ReactAriaButton, _objectSpread(_objectSpread({
+    return /*#__PURE__*/_jsx(ReactAriaButton, _objectSpread(_objectSpread({
       className: styledClearButton({})
     }, clearButtonProps), {}, {
-      children: _jsx(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         icon: CloseIcon,
         size: "100%"
       })
     }));
   };
-  return (_jsxs("div", _objectSpread(_objectSpread({
+  return (
+    /*#__PURE__*/
+    // this is a pass-through for mouse/touch interaction, the interactive element is keyboard focusable
+    _jsxs("div", _objectSpread(_objectSpread({
       className: styledSearchBar({}),
       onClick: handleWrapperClick,
       ref: refWrapper
@@ -76,17 +88,17 @@ export const SearchBar = componentProps => {
       'focus-visible': isFocusVisible,
       testid: props.testId
     })), {}, {
-      children: [_jsx("div", {
-        children: _jsx(Icon, {
+      children: [/*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: MagnifyIcon,
           size: "large"
         })
-      }), _jsxs("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         className: fieldWrapper,
-        children: [_jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
+        children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
           className: styledInput({}),
           ref: mergeRefs([refInput, refForwarded])
-        })), _jsx(ClearButton, {})]
+        })), /*#__PURE__*/_jsx(ClearButton, {})]
       })]
     }))
   );

package/dist/components/Section/Section.d.ts

@@ -1,9 +1,9 @@
-import React, { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, FunctionComponent, ReactNode } from 'react';
 import { Box } from '../Box/Box';
 import * as styles from './Section.css';
-export interface SectionProps extends Pick<ComponentProps<typeof Box>, 'paddingX' | 'ref'> {
+export interface Props extends Pick<ComponentProps<typeof Box>, 'paddingX' | 'ref'> {
     width?: keyof typeof styles.width;
     children?: ReactNode;
 }
-export declare const Section: ({ children, width, paddingX, ref, }: SectionProps) => React.JSX.Element;
+export declare const Section: FunctionComponent<Props>;
 //# sourceMappingURL=Section.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../lib/components/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,YAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,qCAKrB,YAAY,sBASd,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../lib/components/Section/Section.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAc5C,CAAC"}

package/dist/components/Section/Section.js

@@ -1,6 +1,7 @@
 "use strict";
 
-import React from 'react';
+import clsx from 'clsx';
+import * as React from 'react';
 import { Box } from "../Box/Box.js";
 import * as styles from "./Section.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,9 +12,9 @@ export const Section = _ref => {
     paddingX,
     ref
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
-    className: [styles.root, styles.width[width]],
+    className: clsx(styles.root, styles.width[width]),
     width: "full",
     paddingX: paddingX,
     children: children

package/dist/components/SelectInput/SelectInput.js

@@ -26,28 +26,28 @@ export const SelectInput = withEnhancedInput(_ref => {
       fieldIcon = ChevronDownIcon
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     flexWrap: "nowrap",
     alignItems: "center",
     justifyContent: "center",
     position: "relative",
-    children: [_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    children: [/*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       as: "select",
-      flexGrow: "1"
+      flexGrow: 1
     }, eventHandlers), field), rest), {}, {
       className: [styles.input, styles.paddedInput, field.className],
       autoComplete: "off"
-    })), isLoading ? null : _jsx(Box, {
+    })), isLoading ? null : /*#__PURE__*/_jsx(Box, {
       className: clsx(styles.arrow, field.disabled && styles.arrowDisabled),
       display: "flex",
       alignItems: "center",
       height: "full",
       marginRight: size === 'medium' ? '4' : '2',
-      flexShrink: "0",
+      flexShrink: 0,
       pointerEvents: "none",
       position: "absolute",
-      children: _jsx(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         size: size === 'large' ? size : 'medium',
         icon: fieldIcon
       })

package/dist/components/SimplePagination/SimplePagination.js

@@ -7,7 +7,7 @@ import { Button } from "../Button/Button.js";
 import { Icon } from "../Icon/Icon.js";
 import { Inline } from "../Inline/Inline.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export let EChangeDirection = function (EChangeDirection) {
+export let EChangeDirection = /*#__PURE__*/function (EChangeDirection) {
   EChangeDirection["Previous"] = "previous";
   EChangeDirection["Next"] = "next";
   return EChangeDirection;
@@ -21,13 +21,13 @@ export const SimplePagination = _ref => {
   const handleClick = direction => () => {
     onChange(direction);
   };
-  return _jsxs(Inline, {
+  return /*#__PURE__*/_jsxs(Inline, {
     as: "nav",
     space: "6",
     "aria-label": "pagination",
     alignX: "center",
     alignY: "center",
-    children: [_jsx(Button, {
+    children: [/*#__PURE__*/_jsx(Button, {
       rounded: true,
       withDoubleClicks: true,
       disabled: !hasPrevious,
@@ -35,11 +35,11 @@ export const SimplePagination = _ref => {
       variant: "secondary",
       "aria-label": "previous page",
       onClick: handleClick(EChangeDirection.Previous),
-      children: _jsx(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         size: "medium",
         icon: ChevronLeftIcon
       })
-    }), _jsx(Button, {
+    }), /*#__PURE__*/_jsx(Button, {
       rounded: true,
       withDoubleClicks: true,
       disabled: !hasNext,
@@ -47,7 +47,7 @@ export const SimplePagination = _ref => {
       variant: "secondary",
       "aria-label": "next page",
       onClick: handleClick(EChangeDirection.Next),
-      children: _jsx(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         size: "medium",
         icon: ChevronRightIcon
       })

package/dist/components/SliderProgress/ProgressStep.js

@@ -6,7 +6,7 @@ import { useAnimationEvents } from "../../hooks/useAnimationEvents/index.js";
 import { Box } from "../Box/index.js";
 import * as styles from "./ProgressStep.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ProgressStep = memo(_ref => {
+export const ProgressStep = /*#__PURE__*/memo(_ref => {
   let {
     className = '',
     paused,
@@ -21,16 +21,16 @@ export const ProgressStep = memo(_ref => {
   } = useAnimationEvents({
     onAnimationEnd: useCallback(() => !hasPassed && isActive && onFinished(), [isActive, hasPassed, onFinished])
   });
-  return _jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     className: className,
     position: "relative",
-    children: [_jsx(Box, {
+    children: [/*#__PURE__*/_jsx(Box, {
       ref: elementRef,
       position: "absolute",
       display: hasPassed ? 'none' : 'block',
       className: [styles.item, styles.empty],
       backgroundColour: backgroundColour
-    }), _jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       ref: elementRef,
       position: "absolute",
       display: isActive || hasPassed ? 'block' : 'none',

package/dist/components/SliderProgress/SliderProgress.js

@@ -6,7 +6,7 @@ import { memo } from 'react';
 import { ProgressStep } from "./ProgressStep.js";
 import * as styles from "./SliderProgress.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SliderProgress = memo(_ref => {
+export const SliderProgress = /*#__PURE__*/memo(_ref => {
   let {
     className = '',
     paused,
@@ -16,14 +16,14 @@ export const SliderProgress = memo(_ref => {
     backgroundColour,
     onRequestNext
   } = _ref;
-  return _jsx("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: clsx(className, styles.root),
     style: {
       gridTemplateColumns: `repeat(${totalCount}, 1fr)`
     },
     children: Array.from({
       length: totalCount
-    }).fill('').map((_, index) => _jsx(ProgressStep, {
+    }).fill('').map((_, index) => /*#__PURE__*/_jsx(ProgressStep, {
       className: styles.step,
       paused: paused,
       duration: duration,

package/dist/components/Stack/Divider.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+export declare const Divider: FunctionComponent;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Stack/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,eAAO,MAAM,OAAO,EAAE,iBAIrB,CAAC"}

package/dist/components/Stack/Divider.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import * as React from 'react';
+import { Box } from "../Box/Box.js";
+import * as styles from "./Divider.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Divider = () => /*#__PURE__*/_jsx(Box, {
+  position: "relative",
+  children: /*#__PURE__*/_jsx(Box, {
+    position: "absolute",
+    className: styles.hr
+  })
+});

package/dist/components/Stack/Stack.d.ts

@@ -1,15 +1,11 @@
-import React, { type ReactNode } from 'react';
-import type { Sprinkles } from '../../styles/sprinkles.css';
+import { FunctionComponent, ReactNode } from 'react';
 import { type BoxProps } from '../Box/Box';
-export interface StackProps extends Pick<BoxProps, 'as' | 'width' | 'alignItems'> {
-    children: ReactNode | ReactNode[];
+import * as styles from './Stack.css';
+export interface Props extends Pick<BoxProps, 'as' | 'width' | 'alignItems'> {
+    space?: keyof typeof styles.child.spaces;
     className?: string;
     dividers?: boolean;
-    space?: Sprinkles['padding'];
+    children: ReactNode | ReactNode[];
 }
-export declare const LIST_MAP: {
-    readonly ol: "li";
-    readonly ul: "li";
-};
-export declare const Stack: ({ alignItems, as, className, children, dividers, space, width, }: StackProps) => React.JSX.Element | null;
+export declare const Stack: FunctionComponent<Props>;
 //# sourceMappingURL=Stack.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,UAChB,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC;IACrD,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ;;;CAGX,CAAC;AA4BX,eAAO,MAAM,KAAK,GAAI,kEAQnB,UAAU,6BAuCZ,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAOD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CA0C1C,CAAC"}

package/dist/components/Stack/Stack.js

@@ -1,46 +1,46 @@
 "use strict";
 
-import React, { Children, useMemo } from 'react';
+import * as React from 'react';
+import { Children } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 import { Box } from "../Box/Box.js";
-import * as styles from "./Divider.css.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const LIST_MAP = {
-  ol: 'li',
-  ul: 'li'
-};
-const Divider = () => _jsx("hr", {
-  className: styles.hr
-});
+import { Divider } from "./Divider.js";
+import * as styles from "./Stack.css.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const supportedListTypes = ['ul', 'ol'];
 export const Stack = _ref => {
   let {
-    alignItems,
     as = 'div',
-    className,
+    space = '2',
     children,
+    alignItems,
+    width,
     dividers = false,
-    space = '2',
-    width
+    className = ''
   } = _ref;
-  const items = useMemo(() => flattenChildren(children), [children]);
-  if (items.length === 0) {
-    return null;
+  const items = flattenChildren(children);
+  if (items.length < 2) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: items
+    });
   }
-  const childEl = typeof as === 'string' && as in LIST_MAP ? LIST_MAP[as] : 'div';
-  return _jsx(Box, {
+  let listItem = 'div';
+  if (typeof as === 'string') listItem = supportedListTypes.includes(as) ? 'li' : 'div';
+  return /*#__PURE__*/_jsx(Box, {
     as: as,
     className: className,
-    display: "flex",
-    flexDirection: "column",
-    gap: space,
-    odComponent: "stack",
     width: width,
-    children: Children.map(items, (child, idx) => child && _jsxs(Box, {
+    children: Children.map(items, (child, idx) => /*#__PURE__*/_jsxs(Box, {
+      as: listItem,
+      display: alignItems ? 'flex' : void 0,
+      flexDirection: "column",
       alignItems: alignItems,
-      as: childEl,
-      display: alignItems ? 'flex' : undefined,
-      flexDirection: alignItems ? 'column' : undefined,
-      children: [dividers && idx > 0 && _jsx(Divider, {}), child]
+      className: [styles.child.default, dividers ? undefined : styles.child.spaces[space]],
+      children: [dividers && idx > 0 ? /*#__PURE__*/_jsx(Box, {
+        paddingY: space,
+        width: "full",
+        children: /*#__PURE__*/_jsx(Divider, {})
+      }) : null, child]
     }))
   });
 };

package/dist/components/StandardModal/StandardModal.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentProps, FunctionComponent } from 'react';
 import { Modal } from '../Modal/Modal';
 export declare enum ESize {
-    Skinny = "skinny",
-    Narrow = "narrow",
+    Skinny = "skinny",// 420px wide
+    Narrow = "narrow",// 600px wide
     Standard = "standard"
 }
 type Size = 'skinny' | 'narrow' | 'standard';

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

@@ -1 +1 @@
-{"version":3,"file":"StandardModal.d.ts","sourceRoot":"","sources":["../../../lib/components/StandardModal/StandardModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAKvC,oBAAY,KAAK;IAChB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,KAAK,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IACvE,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA+H/D,CAAC"}
+{"version":3,"file":"StandardModal.d.ts","sourceRoot":"","sources":["../../../lib/components/StandardModal/StandardModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAKvC,oBAAY,KAAK;IAChB,MAAM,WAAW,CAAE,aAAa;IAChC,MAAM,WAAW,CAAE,aAAa;IAChC,QAAQ,aAAa;CACrB;AAED,KAAK,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IACvE,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA+H/D,CAAC"}

package/dist/components/StandardModal/StandardModal.js

@@ -13,10 +13,12 @@ import { Modal } from "../Modal/Modal.js";
 import { textStyles } from "../Text/textStyles.js";
 import * as styles from "./StandardModal.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export let ESize = function (ESize) {
+export let ESize = /*#__PURE__*/function (ESize) {
   ESize["Skinny"] = "skinny";
+  // 420px wide
   ESize["Narrow"] = "narrow";
-  ESize["Standard"] = "standard";
+  // 600px wide
+  ESize["Standard"] = "standard"; // 800px wide
   return ESize;
 }({});
 export const StandardModal = _ref => {
@@ -51,13 +53,13 @@ export const StandardModal = _ref => {
       };
     }, [isOpen]);
   }
-  return _jsx(Modal, {
+  return /*#__PURE__*/_jsx(Modal, {
     isOpen: isOpen,
     ref: ref,
     noThemedWrapper: noThemedWrapper,
     container: container,
     onRequestClose: onRequestClose,
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       className: styles.container,
       height: "full",
       display: "flex",
@@ -67,7 +69,7 @@ export const StandardModal = _ref => {
       role: "none presentation",
       onMouseDown: unlockModal,
       onClick: backdropHandler,
-      children: _jsxs(Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         as: "article",
         overflow: "hidden",
         role: "dialog",
@@ -84,7 +86,7 @@ export const StandardModal = _ref => {
         }, {
           [styles.modalSizeSkinny]: size === 'skinny'
         }, className]),
-        children: [_jsxs(Box, {
+        children: [/*#__PURE__*/_jsxs(Box, {
           as: "header",
           flexShrink: "0",
           position: "relative",
@@ -97,21 +99,21 @@ export const StandardModal = _ref => {
           paddingRight: "2",
           borderWidthBottom: "1",
           borderColour: "light",
-          children: [_jsx(Box, {
+          children: [/*#__PURE__*/_jsx(Box, {
             flexGrow: "0",
             id: titleId,
-            children: _jsx(Heading, {
+            children: /*#__PURE__*/_jsx(Heading, {
               as: "h4",
               children: title
             })
-          }), _jsx(Button, {
+          }), /*#__PURE__*/_jsx(Button, {
             minimal: true,
             rounded: true,
             variant: "secondary",
             size: "small",
             "aria-label": "close",
             onClick: closeButtonHandler,
-            children: _jsx(Icon, {
+            children: /*#__PURE__*/_jsx(Icon, {
               className: textStyles({
                 colour: 'muted'
               }),
@@ -119,7 +121,7 @@ export const StandardModal = _ref => {
               size: "medium"
             })
           })]
-        }), _jsx(Box, {
+        }), /*#__PURE__*/_jsx(Box, {
           as: "main",
           display: "flex",
           flexDirection: "column",