@autoguru/overdrive 4.44.4-next.0 → 4.44.4

package/dist/components/DropDown/DropDownOptionsList.js

@@ -6,23 +6,20 @@ import { Box } from "../Box/index.js";
 import { Stack } from "../Stack/index.js";
 import * as styles from "./DropDownOptionsList.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DropDownOptionsList = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx(Box, {
-    ref: ref,
-    className: styles.root,
-    children: /*#__PURE__*/_jsx(Box, {
-      className: styles.list,
-      overflow: "auto",
-      children: /*#__PURE__*/_jsx(Stack, {
-        dividers: true,
-        width: "full",
-        space: "none",
-        children: children
-      })
+export const DropDownOptionsList = /*#__PURE__*/forwardRef(({
+  children
+}, ref) => /*#__PURE__*/_jsx(Box, {
+  ref: ref,
+  className: styles.root,
+  children: /*#__PURE__*/_jsx(Box, {
+    className: styles.list,
+    overflow: "auto",
+    children: /*#__PURE__*/_jsx(Stack, {
+      dividers: true,
+      width: "full",
+      space: "none",
+      children: children
     })
-  });
-});
+  })
+}));
 DropDownOptionsList.displayName = 'DropDownOptionsList';

package/dist/components/Flex/flex.js

@@ -1,29 +1,26 @@
 "use strict";
 
 import { sprinkles } from "../../styles/sprinkles.css.js";
-export const inlinePropMapping = _ref => {
-  let {
-    align,
-    center,
-    end,
-    fullWidth,
-    gap,
-    noWrap,
-    justify,
-    reverse,
-    spaceBetween,
-    start
-  } = _ref;
-  return {
-    alignItems: justify,
-    display: 'flex',
-    flexDirection: reverse && 'row-reverse' || 'row',
-    flexWrap: noWrap === true ? 'nowrap' : 'wrap',
-    gap,
-    justifyContent: align !== null && align !== void 0 ? align : start && 'start' || center && 'center' || end && 'end' || spaceBetween && 'space-between' || 'start',
-    width: fullWidth === true ? 'full' : undefined
-  };
-};
+export const inlinePropMapping = ({
+  align,
+  center,
+  end,
+  fullWidth,
+  gap,
+  noWrap,
+  justify,
+  reverse,
+  spaceBetween,
+  start
+}) => ({
+  alignItems: justify,
+  display: 'flex',
+  flexDirection: reverse && 'row-reverse' || 'row',
+  flexWrap: noWrap === true ? 'nowrap' : 'wrap',
+  gap,
+  justifyContent: align !== null && align !== void 0 ? align : start && 'start' || center && 'center' || end && 'end' || spaceBetween && 'space-between' || 'start',
+  width: fullWidth === true ? 'full' : undefined
+});
 
 /**
  * Creates a horizontal layout, convenience function for use with `className`.
@@ -44,24 +41,21 @@ export const inline = props => sprinkles(inlinePropMapping(props));
 
 // ---
 
-export const stackPropMapping = _ref2 => {
-  let {
-    align,
-    center,
-    end,
-    gap,
-    justify,
-    reverse,
-    start
-  } = _ref2;
-  return {
-    alignItems: align !== null && align !== void 0 ? align : start && 'start' || center && 'center' || end && 'end' || undefined,
-    display: 'flex',
-    flexDirection: reverse && 'column-reverse' || 'column',
-    gap,
-    justifyContent: justify
-  };
-};
+export const stackPropMapping = ({
+  align,
+  center,
+  end,
+  gap,
+  justify,
+  reverse,
+  start
+}) => ({
+  alignItems: align !== null && align !== void 0 ? align : start && 'start' || center && 'center' || end && 'end' || undefined,
+  display: 'flex',
+  flexDirection: reverse && 'column-reverse' || 'column',
+  gap,
+  justifyContent: justify
+});
 
 /**
  * Creates a vertical layout, convenience function for use with `className`.

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.js

@@ -20,19 +20,18 @@ import { Stack } from "../Stack/Stack.js";
 import * as styles from "./HorizontalAutoScroller.css.js";
 import { useHorizontalAutoScroller } from "./useHorizontalAutoScroller.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const HorizontalAutoScroller = _ref => {
-  let {
-    sliderProgressColour = 'primary',
-    noControls = false,
-    space = '5',
-    durationSeconds = 10,
-    children,
-    itemsPerPage: incomingItemsPerPage,
-    paused: incomingIsPaused,
-    activePage: incomingActivePage,
-    columnWidth = '1/2',
-    className
-  } = _ref;
+export const HorizontalAutoScroller = ({
+  sliderProgressColour = 'primary',
+  noControls = false,
+  space = '5',
+  durationSeconds = 10,
+  children,
+  itemsPerPage: incomingItemsPerPage,
+  paused: incomingIsPaused,
+  activePage: incomingActivePage,
+  columnWidth = '1/2',
+  className
+}) => {
   const incomingItems = useMemo(() => flattenChildren(children), [children]);
   const [activeIndex, setActiveIndex] = useState(incomingActivePage);
   const [itemsRef, setItemsRef] = useState();

package/dist/components/HorizontalAutoScroller/useHorizontalAutoScroller.js

@@ -64,14 +64,13 @@ const stateReducer = (prevState, action) => {
       }
   }
 };
-export const useHorizontalAutoScroller = _ref => {
-  let {
-    itemsRef,
-    itemsPerPage = 1,
-    paused: incomingIsPaused = false,
-    activePage: incomingActivePage = null,
-    onChange = () => void 0
-  } = _ref;
+export const useHorizontalAutoScroller = ({
+  itemsRef,
+  itemsPerPage = 1,
+  paused: incomingIsPaused = false,
+  activePage: incomingActivePage = null,
+  onChange = () => void 0
+}) => {
   const [{
     pageCount,
     activePage,

package/dist/components/Icon/Icon.js

@@ -8,14 +8,13 @@ import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
 import { Box } from "../Box/Box.js";
 import * as styles from "./Icon.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Icon = _ref => {
+export const Icon = ({
+  className,
+  icon,
+  size = 'small',
+  display = 'block'
+}) => {
   var _icon$props$ariaLabe;
-  let {
-    className,
-    icon,
-    size = 'small',
-    display = 'block'
-  } = _ref;
   useNullCheck(icon, 'Icon component received an empty icon prop.');
   const iconElement = /*#__PURE__*/cloneElement(icon, {
     className: elementStyles({

package/dist/components/Image/ImageServerProvider.js

@@ -33,28 +33,24 @@ const defaultValue = {
 // @ts-expect-error type does not allow `null`
 const imageServerCtx = /*#__PURE__*/createContext(null);
 export const useImageServer = () => useContext(imageServerCtx);
-export const ImageServerProvider = _ref => {
-  let {
-    children,
-    srcUrlMapper = defaultValue.srcUrlMapper,
-    getWidthValue = defaultValue.getWidthValue,
-    widthMap = defaultValue.widthMap
-  } = _ref;
-  const generateSrcSet = useCallback(_ref2 => {
-    let {
+export const ImageServerProvider = ({
+  children,
+  srcUrlMapper = defaultValue.srcUrlMapper,
+  getWidthValue = defaultValue.getWidthValue,
+  widthMap = defaultValue.widthMap
+}) => {
+  const generateSrcSet = useCallback(({
+    quality,
+    src
+  }) => 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
-    } = _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,
-        width
-      })} ${width}w`;
-    }).join(', ');
-  }, [widthMap, srcUrlMapper, getWidthValue]);
+      src,
+      width
+    })} ${width}w`;
+  }).join(', '), [widthMap, srcUrlMapper, getWidthValue]);
   return /*#__PURE__*/_jsx(imageServerCtx.Provider, {
     value: useMemo(() => ({
       widthMap,

package/dist/components/Inline/Inline.js

@@ -6,10 +6,9 @@ import { Box } from "../Box/Box.js";
 import { LIST_MAP } from "../Stack/Stack.js";
 import { Text } from "../Text/Text.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Divider = _ref => {
-  let {
-    children
-  } = _ref;
+const Divider = ({
+  children
+}) => {
   if (!children) return null;
   if (typeof children === 'boolean') return /*#__PURE__*/_jsx(Text, {
     "aria-hidden": true,
@@ -49,17 +48,16 @@ const Divider = _ref => {
  *   <Text>Link 2</Text>
  * </Inline>
  */
-export const Inline = _ref2 => {
-  let {
-    as = 'div',
-    alignX,
-    alignY = 'center',
-    children,
-    dividers,
-    noWrap,
-    space = '2',
-    width
-  } = _ref2;
+export const Inline = ({
+  as = 'div',
+  alignX,
+  alignY = 'center',
+  children,
+  dividers,
+  noWrap,
+  space = '2',
+  width
+}) => {
   const items = useMemo(() => flattenChildren(children), [children]);
   if (items.length === 0) {
     return null;

package/dist/components/IntentStripe/IntentStripe.js

@@ -4,16 +4,13 @@ import * as React from 'react';
 import { Box } from "../Box/index.js";
 import * as styles from "./IntentStripe.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const IntentStripe = _ref => {
-  let {
-    className = '',
-    intent = 'success'
-  } = _ref;
-  return /*#__PURE__*/_jsx(Box, {
-    className: [className, styles.intentBox],
-    position: "absolute",
-    height: "full",
-    backgroundColour: intent,
-    odComponent: "intent-stripe"
-  });
-};
+export const IntentStripe = ({
+  className = '',
+  intent = 'success'
+}) => /*#__PURE__*/_jsx(Box, {
+  className: [className, styles.intentBox],
+  position: "absolute",
+  height: "full",
+  backgroundColour: intent,
+  odComponent: "intent-stripe"
+});

package/dist/components/LinearProgressIndicator/LinearProgressIndicator.js

@@ -5,10 +5,9 @@ import { memo } from 'react';
 import { Box } from "../Box/index.js";
 import * as styles from "./LinearProgressIndicator.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const LinearProgressIndicator = /*#__PURE__*/memo(_ref => {
-  let {
-    className = ''
-  } = _ref;
+export const LinearProgressIndicator = /*#__PURE__*/memo(({
+  className = ''
+}) => {
   return /*#__PURE__*/_jsx(Box, {
     position: "relative",
     overflow: "hidden",

package/dist/components/Meta/Meta.js

@@ -6,24 +6,21 @@ import { Inline } from "../Inline/Inline.js";
 import { Text } from "../Text/Text.js";
 import * as styles from "./Meta.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Meta = _ref => {
-  let {
-    icon,
-    label,
-    variant = 'primary',
-    breakWord
-  } = _ref;
-  return /*#__PURE__*/_jsxs(Inline, {
-    noWrap: true,
-    as: "span",
-    space: "2",
-    alignY: "center",
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
-      icon: icon,
-      className: styles.variant[variant]
-    }), /*#__PURE__*/_jsx(Text, {
-      breakWord: breakWord,
-      children: label
-    })]
-  });
-};
+export const Meta = ({
+  icon,
+  label,
+  variant = 'primary',
+  breakWord
+}) => /*#__PURE__*/_jsxs(Inline, {
+  noWrap: true,
+  as: "span",
+  space: "2",
+  alignY: "center",
+  children: [icon && /*#__PURE__*/_jsx(Icon, {
+    icon: icon,
+    className: styles.variant[variant]
+  }), /*#__PURE__*/_jsx(Text, {
+    breakWord: breakWord,
+    children: label
+  })]
+});

package/dist/components/Modal/Modal.js

@@ -68,17 +68,16 @@ const reducer = (prevState, action) => {
       }
   }
 };
-export const Modal = _ref => {
-  let {
-    isOpen,
-    hideBackdrop = false,
-    disableBackdropClick = false,
-    ref,
-    noThemedWrapper,
-    container,
-    onRequestClose,
-    children
-  } = _ref;
+export const Modal = ({
+  isOpen,
+  hideBackdrop = false,
+  disableBackdropClick = false,
+  ref,
+  noThemedWrapper,
+  container,
+  onRequestClose,
+  children
+}) => {
   const [state, dispatch] = useReducer(reducer, 'INITIAL');
   const handleBackdropClick = useEventCallback(event => {
     if (event.target !== event.currentTarget) return;
@@ -125,12 +124,12 @@ export const Modal = _ref => {
     }) : null
   });
 };
-export const withModal = WrappedComponent => _ref2 => {
+export const withModal = WrappedComponent => _ref => {
   let {
       onRequestClose,
       isOpen
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   // TODO: Deprecate me
   process.env.NODE_ENV !== "production" ? warning(false, 'Using withModal is now an anti-pattern. Use <Modal /> instead') : void 0;
   return /*#__PURE__*/_jsx(Modal, {

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

@@ -1 +1 @@
-{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,WAAW,iBAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAqC7D,CAAC"}
+{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,GAAG,EAAiB,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,WAAW,iBAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AASD,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoC7D,CAAC"}

package/dist/components/NumberBubble/NumberBubble.js

@@ -5,20 +5,16 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["value", "textColour", "rawNumbers"];
 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';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { sprinkles } from "../../styles/index.js";
+import { textStyles } from "../../styles/typography.js";
 import { toPrettyBigNumber } from "../../utils/number.js";
-import { Box } from "../Box/Box.js";
-import { Text } from "../Text/Text.js";
-import * as styles from "./NumberBubble.css.js";
+import { useBox } from "../Box/useBox/useBox.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const valuePaddingMap = {
-  SMALL: '2',
-  MEDIUM: '3',
-  LARGE: '4',
-  X_LARGE: '5'
+const sizeMap = {
+  SMALL: '4',
+  MEDIUM: '6',
+  LARGE: '7'
 };
 export const NumberBubble = _ref => {
   let {
@@ -28,26 +24,29 @@ export const NumberBubble = _ref => {
     } = _ref,
     boxProps = _objectWithoutProperties(_ref, _excluded);
   const size = useMemo(() => {
-    if (value > 9 && value < 100) return 'MEDIUM';
-    if (value > 99 && value < 9999) return 'LARGE';
-    if (value >= 9999) return 'LARGE';
-    return 'SMALL';
+    if (value < 10) return 'SMALL';
+    if (value >= 10 && value < 100) return 'MEDIUM';
+    return 'LARGE';
   }, [value]);
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
-    borderRadius: "full",
-    backgroundColour: "gray900",
-    display: "inline-block",
-    position: "relative",
-    padding: valuePaddingMap[size],
-    odComponent: "number-bubble"
-  }, boxProps), {}, {
-    children: /*#__PURE__*/_jsx(Text, {
-      size: "2",
-      strong: true,
-      className: clsx(styles.bubbleText, sprinkles({
-        position: 'absolute'
-      })),
-      colour: textColour,
+  const {
+    Component,
+    componentProps
+  } = useBox(_objectSpread({
+    odComponent: 'number-bubble',
+    alignItems: 'center',
+    backgroundColour: 'gray900',
+    borderRadius: 'full',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    size: sizeMap[size]
+  }, boxProps));
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    children: /*#__PURE__*/_jsx("span", {
+      className: textStyles({
+        size: '2',
+        colour: textColour,
+        strong: true
+      }),
       children: rawNumbers ? value : toPrettyBigNumber(value)
     })
   }));

package/dist/components/NumberInput/useNumberInputBehaviours.js

@@ -1,15 +1,14 @@
 "use strict";
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-export const useNumberInputBehaviours = _ref => {
-  let {
-    ref,
-    preventMouseWheel,
-    onBlur: incomingOnBlur,
-    onFocus: incomingOnFocus,
-    onChange: incomingOnChange,
-    value
-  } = _ref;
+export const useNumberInputBehaviours = ({
+  ref,
+  preventMouseWheel,
+  onBlur: incomingOnBlur,
+  onFocus: incomingOnFocus,
+  onChange: incomingOnChange,
+  value
+}) => {
   const inputRef = useRef(ref === null || ref === void 0 ? void 0 : ref.current);
   const [isFocused, setIsFocused] = useState(false);
   const [displayValue, setDisplayValue] = useState(value);

package/dist/components/OptionGrid/OptionGrid.js

@@ -50,64 +50,60 @@ export const OptionGrid = _ref => {
     }, dataAttrs({
       testid: testId
     })), props), {}, {
-      children: _ref2 => {
-        let {
-          description,
-          icon,
-          label,
-          name
-        } = _ref2;
-        return /*#__PURE__*/_jsx(ListBoxItem, {
-          className: styledGridItem(),
-          id: name,
-          textValue: label,
-          children: _ref3 => {
-            let {
-              isFocusVisible,
-              isHovered,
-              isSelected
-            } = _ref3;
-            const hasIndicator = indicator !== 'none';
-            const hasNoInteraction = !isFocusVisible && !isHovered && !isSelected;
-            const IndicatorIcon = () => {
-              if (icon && hasNoInteraction) return /*#__PURE__*/_jsx(Icon, {
-                icon: icon,
-                size: "100%"
-              });
-              const styledIndicator = indicator === 'radio' ? styledRadioButton : styledCheckbox;
-              return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-                className: styledIndicator()
-              }, dataAttrs({
-                'focus-visible': isFocusVisible,
-                hover: isHovered,
-                selected: isSelected
-              })), {}, {
-                children: indicator === 'checkbox' && /*#__PURE__*/_jsx(Icon, {
-                  icon: CheckIcon
-                })
-              }));
-            };
-            return /*#__PURE__*/_jsxs(_Fragment, {
-              children: [hasIndicator && /*#__PURE__*/_jsx("div", {
-                className: styleIndicator,
-                children: /*#__PURE__*/_jsx(IndicatorIcon, {})
-              }), /*#__PURE__*/_jsxs("div", {
-                children: [/*#__PURE__*/_jsx(Text, {
-                  slot: "label",
-                  elementType: "div",
-                  className: labelStyle,
-                  children: label
-                }), description && /*#__PURE__*/_jsx(Text, {
-                  slot: "description",
-                  elementType: "div",
-                  className: descriptionStyle,
-                  children: description
-                })]
-              })]
+      children: ({
+        description,
+        icon,
+        label,
+        name
+      }) => /*#__PURE__*/_jsx(ListBoxItem, {
+        className: styledGridItem(),
+        id: name,
+        textValue: label,
+        children: ({
+          isFocusVisible,
+          isHovered,
+          isSelected
+        }) => {
+          const hasIndicator = indicator !== 'none';
+          const hasNoInteraction = !isFocusVisible && !isHovered && !isSelected;
+          const IndicatorIcon = () => {
+            if (icon && hasNoInteraction) return /*#__PURE__*/_jsx(Icon, {
+              icon: icon,
+              size: "100%"
             });
-          }
-        });
-      }
+            const styledIndicator = indicator === 'radio' ? styledRadioButton : styledCheckbox;
+            return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+              className: styledIndicator()
+            }, dataAttrs({
+              'focus-visible': isFocusVisible,
+              hover: isHovered,
+              selected: isSelected
+            })), {}, {
+              children: indicator === 'checkbox' && /*#__PURE__*/_jsx(Icon, {
+                icon: CheckIcon
+              })
+            }));
+          };
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [hasIndicator && /*#__PURE__*/_jsx("div", {
+              className: styleIndicator,
+              children: /*#__PURE__*/_jsx(IndicatorIcon, {})
+            }), /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx(Text, {
+                slot: "label",
+                elementType: "div",
+                className: labelStyle,
+                children: label
+              }), description && /*#__PURE__*/_jsx(Text, {
+                slot: "description",
+                elementType: "div",
+                className: descriptionStyle,
+                children: description
+              })]
+            })]
+          });
+        }
+      })
     }))
   });
 };