@7shifts/sous-chef 3.42.0 → 3.43.0

package/dist/index.js

@@ -65,7 +65,13 @@ var COLORS = {
   'grey-300': 'var(--color-grey-300)',
   'grey-400': 'var(--color-grey-400)',
   'grey-500': 'var(--color-grey-500)',
-  'grey-600': 'var(--color-grey-600)'
+  'grey-600': 'var(--color-grey-600)',
+  'oat-100': 'var(--color-oat-100)',
+  'oat-200': 'var(--color-oat-200)',
+  'oat-300': 'var(--color-oat-300)',
+  'oat-400': 'var(--color-oat-400)',
+  'oat-500': 'var(--color-oat-500)',
+  'oat-600': 'var(--color-oat-600)'
 };
 
 var ZINDEX = {
@@ -565,7 +571,8 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
     onFocusIn = _ref.onFocusIn,
     onFocusOut = _ref.onFocusOut,
     extraClass = _ref.extraClass,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    maxHeight = _ref.maxHeight;
   var _useState = React.useState(false),
     isVisible = _useState[0],
     setIsVisible = _useState[1];
@@ -590,6 +597,7 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
   }, React__default.createElement("div", {
     ref: tooltipRef,
     style: _extends({}, position.overlay, {
+      maxHeight: maxHeight,
       zIndex: getZIndex('tooltip')
     }),
     className: classnames(styles$4['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$4['tooltip-overlay--visible']] = isVisible, _classnames[styles$4['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$4['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
@@ -624,7 +632,8 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     onClose = _ref.onClose,
     onVisibleChange = _ref.onVisibleChange,
     children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    maxHeight = _ref.maxHeight;
   var checkIsMounted = useIsMounted();
   var internalRef = React.useRef(null);
   var containerRef = forwardedRef || internalRef;
@@ -697,7 +706,8 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
         closeTooltip();
       },
       extraClass: extraClass,
-      testId: testId
+      testId: testId,
+      maxHeight: maxHeight
     }, theme === TOOLTIP_THEME.BLACK && !header ? null : overlay) : null;
   };
   if (React__default.Children.count(children) === 1) {
@@ -8916,6 +8926,87 @@ var DataTable$1 = function DataTable(_ref) {
   })), React__default.createElement(Pagination, null));
 };
 
+var styles$P = {"accordion-item":"_3uthQ","accordion-item__link":"_23CMa","accordion-item__header":"_3LzWR","accordion-item__icon":"_34Ht7","accordion-item__icon--active":"_1D8Hh","accordion-item__content":"_1Ocs0","accordion-item__content--active":"_fCEkR"};
+
+var AccordionItem = function AccordionItem(props) {
+  var item = props.item,
+    isOpen = props.isOpen,
+    handleAccordionItemOpen = props.handleAccordionItemOpen;
+  var id = item.id,
+    title = item.title,
+    content = item.content;
+  var isFocusedByClickRef = React__default.useRef(false);
+  return React__default.createElement("div", {
+    className: styles$P['accordion-item']
+  }, React__default.createElement("button", {
+    className: styles$P['accordion-item__header'],
+    onClick: function onClick() {
+      if (isOpen) {
+        handleAccordionItemOpen(null);
+      } else {
+        handleAccordionItemOpen(item);
+      }
+    },
+    id: id,
+    onFocus: function onFocus() {
+      if (!isFocusedByClickRef.current) {
+        handleAccordionItemOpen(item);
+      }
+    },
+    onBlur: function onBlur() {
+      isFocusedByClickRef.current = false;
+    },
+    onMouseDown: function onMouseDown() {
+      isFocusedByClickRef.current = true;
+    },
+    "data-testid": "" + ('accordion-item-' + id + '-anchor')
+  }, React__default.createElement(Inline, {
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, React__default.createElement(Text, {
+    color: "grey-500",
+    emphasis: "bold"
+  }, title), React__default.createElement(IconChevronDown, {
+    className: styles$P["accordion-item__icon" + (isOpen ? '--active' : '')],
+    color: 'grey-400'
+  }))), React__default.createElement("div", {
+    "data-testid": "" + (isOpen ? 'accordion-item-' + id + '-open' : 'accordion-item-' + id + '-closed'),
+    className: styles$P["accordion-item__content" + (isOpen ? '--active' : '')]
+  }, React__default.createElement(Text, {
+    color: "grey-500"
+  }, content)));
+};
+
+var styles$Q = {"accordion":"_31JZJ"};
+
+var Accordion = function Accordion(props) {
+  var items = props.items,
+    onExpand = props.onExpand;
+  var _useState = React.useState(),
+    activeId = _useState[0],
+    setActiveId = _useState[1];
+  var handleAccordionItemOpen = function handleAccordionItemOpen(item) {
+    setActiveId(item ? item.id : null);
+    item && onExpand && onExpand(item);
+  };
+  if (items.length < 1) {
+    return null;
+  }
+  return React__default.createElement("div", {
+    className: styles$Q['accordion']
+  }, items.map(function (item, index) {
+    var id = item.id || index.toString();
+    return React__default.createElement(AccordionItem, {
+      key: id,
+      item: _extends({}, item, {
+        id: id
+      }),
+      isOpen: id == activeId,
+      handleAccordionItemOpen: handleAccordionItemOpen
+    });
+  }));
+};
+
 var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   var name = _ref.name,
     inputId = _ref.id,
@@ -8995,7 +9086,7 @@ var isReactSelectElement = function isReactSelectElement(element) {
   return typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
 };
 
-var styles$P = {"custom-control":"_1JTKu"};
+var styles$R = {"custom-control":"_1JTKu"};
 
 var _excluded$2D = ["children"];
 function CustomControl(_ref) {
@@ -9005,7 +9096,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$P['custom-control'],
+    className: styles$R['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -9172,7 +9263,7 @@ var CustomContainer = function CustomContainer(props) {
   }));
 };
 
-var styles$Q = {"custom-menu-text-field":"_2bu6-","custom-menu-hr":"_1cgU7","custom-menu-div":"_1khlU"};
+var styles$S = {"custom-menu-text-field":"_2bu6-","custom-menu-hr":"_1cgU7","custom-menu-div":"_1khlU"};
 
 var _excluded$2F = ["children"];
 function CustomMenu(_ref) {
@@ -9231,15 +9322,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(Select.components.Menu, _extends({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$Q['custom-menu-hr']
+    className: styles$S['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
-    className: styles$Q['custom-menu-div']
+    className: styles$S['custom-menu-div']
   }, React__default.createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(styles$k['text-field'], styles$Q['custom-menu-text-field']),
+    className: classnames(styles$k['text-field'], styles$S['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -9429,9 +9520,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$R = {"date-filter":"_zaON7","date-filter--wide":"_2Rjup"};
+var styles$T = {"date-filter":"_zaON7","date-filter--wide":"_2Rjup"};
 
-var styles$S = {"date-filter-display":"_2UNAw","date-filter-display--non-interactive":"_vFZYw","date-filter-display--wide":"_3y3-I","date-filter-display__display-icon":"_1WTh3"};
+var styles$U = {"date-filter-display":"_2UNAw","date-filter-display--non-interactive":"_vFZYw","date-filter-display--wide":"_3y3-I","date-filter-display__display-icon":"_1WTh3"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -9484,7 +9575,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     weekStart = _ref.weekStart,
     onClick = _ref.onClick;
   return React__default.createElement("button", {
-    className: classnames(styles$S['date-filter-display'], (_classnames = {}, _classnames[styles$S['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$S['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    className: classnames(styles$U['date-filter-display'], (_classnames = {}, _classnames[styles$U['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$U['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
     ref: ref
@@ -9492,7 +9583,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$S['date-filter-display__display-icon'])
+    className: classnames(styles$U['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
     color: "grey-400"
@@ -9503,7 +9594,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var styles$T = {"date-stepper":"_2tDB-","date-stepper--backward":"_9_2Mg","date-stepper--forward":"_j2INh"};
+var styles$V = {"date-stepper":"_2tDB-","date-stepper--backward":"_9_2Mg","date-stepper--forward":"_j2INh"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -9532,7 +9623,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
     onChange = _ref.onChange,
     date = _ref.date;
   return React__default.createElement("button", {
-    className: classnames(styles$T['date-stepper'], (_classnames = {}, _classnames[styles$T['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$T['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames(styles$V['date-stepper'], (_classnames = {}, _classnames[styles$V['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$V['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -9558,7 +9649,7 @@ var DateFilter = function DateFilter(_ref) {
   };
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$R['date-filter'], (_classnames = {}, _classnames[styles$R['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$T['date-filter'], (_classnames = {}, _classnames[styles$T['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -9600,7 +9691,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$U = {"segmented-control":"_2cjh7","segmented-control__button":"_9hSoW","segmented-control__button--selected":"_2E6yG","segmented-control__divider":"_sIHGt"};
+var styles$W = {"segmented-control":"_2cjh7","segmented-control__button":"_9hSoW","segmented-control__button--selected":"_2E6yG","segmented-control__divider":"_sIHGt"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -9614,7 +9705,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
     return index === options.length - 1;
   };
   return React__default.createElement("div", {
-    className: styles$U['segmented-control'],
+    className: styles$W['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -9624,16 +9715,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$U['segmented-control__button'], (_classnames = {}, _classnames[styles$U['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$W['segmented-control__button'], (_classnames = {}, _classnames[styles$W['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$U['segmented-control__divider'])
+      className: classnames(styles$W['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$V = {"form--standard-size":"_q1oFJ"};
+var styles$X = {"form--standard-size":"_q1oFJ"};
 
-var styles$W = {"form-section":"_3Sc6g","form-section__title":"_39X-5","form-section__subtitle":"_pwBR_","form-section--no-margin":"_PFp2d"};
+var styles$Y = {"form-section":"_3Sc6g","form-section__title":"_39X-5","form-section__subtitle":"_pwBR_","form-section--no-margin":"_PFp2d"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -9647,12 +9738,12 @@ var FormSection = function FormSection(_ref) {
   var content = React__default.createElement(Stack, null, React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
-    className: classnames(styles$W['form-section__title'])
+    className: classnames(styles$Y['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$W['form-section__subtitle'])
+    className: classnames(styles$Y['form-section__subtitle'])
   }, subtitle)), children);
   return React__default.createElement("div", {
-    className: classnames(styles$W['form-section'], (_classnames = {}, _classnames[styles$W['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
+    className: classnames(styles$Y['form-section'], (_classnames = {}, _classnames[styles$Y['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
     "data-testid": testId
   }, as === 'card' ? React__default.createElement(Card$1, {
     testId: testId && testId + "-card"
@@ -9671,7 +9762,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$X = {"form-footer":"_347bi"};
+var styles$Z = {"form-footer":"_347bi"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$primary2, _actions$secondary, _actions$tertiary;
@@ -9705,7 +9796,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default.Children.count(children) === 1 && React__default.isValidElement(children) && children.type === Inline;
   return React__default.createElement("div", {
-    className: classnames(styles$X['form-footer']),
+    className: classnames(styles$Z['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -9743,12 +9834,12 @@ var Form = function Form(_ref) {
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$V['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$X['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$Y = {"form-row":"_3TNiX"};
+var styles$_ = {"form-row":"_3TNiX"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -9776,7 +9867,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$Y['form-row']
+    extraClass: styles$_['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -9785,7 +9876,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$Z = {"text-field":"_eyfGn","text-field--focus":"_3BfOP","text-field--disabled":"_lPUzt","text-field--invalid":"__21bv","text-field__toolbar":"_hyTnb"};
+var styles$$ = {"text-field":"_eyfGn","text-field--focus":"_3BfOP","text-field--disabled":"_lPUzt","text-field--invalid":"__21bv","text-field__toolbar":"_hyTnb"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = React.useRef(null);
@@ -9856,7 +9947,7 @@ var TextAreaField = function TextAreaField(_ref) {
     textAreaRef = _useGrowTextAreaRef.ref,
     updateHeight = _useGrowTextAreaRef.updateHeight;
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$Z['text-field'], (_classnames = {}, _classnames[styles$Z['text-field--invalid']] = hasError, _classnames[styles$Z['text-field--disabled']] = disabled, _classnames[styles$Z['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$$['text-field'], (_classnames = {}, _classnames[styles$$['text-field--invalid']] = hasError, _classnames[styles$$['text-field--disabled']] = disabled, _classnames[styles$$['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -9889,7 +9980,7 @@ var TextAreaField = function TextAreaField(_ref) {
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default.createElement("div", {
-    className: styles$Z['text-field__toolbar'],
+    className: styles$$['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -9918,7 +10009,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = React.forwardRef(TextFieldElement);
 
-var styles$_ = {"pill-select-field":"_3q2nh","pill-select-field__custom-input":"_W4HpY"};
+var styles$10 = {"pill-select-field":"_3q2nh","pill-select-field__custom-input":"_W4HpY"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -10004,7 +10095,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$_['pill-select-field']
+      className: styles$10['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -10024,7 +10115,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$_['pill-select-field__custom-input']
+      className: styles$10['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -10066,9 +10157,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$$ = {"label":"_3QyeH","label--truncate":"_2hmzQ","radio-group-field__label":"_thT22"};
+var styles$11 = {"label":"_3QyeH","label--truncate":"_2hmzQ","radio-group-field__label":"_thT22"};
 
-var styles$10 = {"label":"_3hIRY","label--truncate":"_21YgL","caption":"_2RJol","radio-group-box-option":"_1md_9","radio-group-box-option__box":"_3mCob","radio-group-box-option__box--disabled":"_USbFw","radio-group-box-option__label":"_kl23S","radio-group-box-option__label--disabled":"_2-e0g","radio-group-box-option__caption":"_2CvoH","radio-group-box-option__caption--disabled":"_2l2PZ"};
+var styles$12 = {"label":"_3hIRY","label--truncate":"_21YgL","caption":"_2RJol","radio-group-box-option":"_1md_9","radio-group-box-option__box":"_3mCob","radio-group-box-option__box--disabled":"_USbFw","radio-group-box-option__label":"_kl23S","radio-group-box-option__label--disabled":"_2-e0g","radio-group-box-option__caption":"_2CvoH","radio-group-box-option__caption--disabled":"_2l2PZ"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var _classNames, _classNames2, _classNames3;
@@ -10085,7 +10176,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$10['radio-group-box-option']
+    className: styles$12['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -10096,7 +10187,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("div", {
-    className: classnames(styles$10['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$10['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
+    className: classnames(styles$12['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$12['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -10105,13 +10196,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: classnames(styles$10['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$10['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
+    className: classnames(styles$12['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$12['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
   }, label), caption && React__default.createElement("div", {
-    className: classnames(styles$10['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$10['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
+    className: classnames(styles$12['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$12['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
   }, caption)))));
 };
 
-var styles$11 = {"radio-group-option":"_DFbQ0","radio-group-option__caption":"_kt7KQ","radio-group-option__custom-input":"_1aaPx"};
+var styles$13 = {"radio-group-option":"_DFbQ0","radio-group-option__caption":"_kt7KQ","radio-group-option__custom-input":"_1aaPx"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -10131,7 +10222,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$11['radio-group-option']
+    className: styles$13['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -10142,11 +10233,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("span", {
-    className: styles$11['radio-group-option__custom-input']
+    className: styles$13['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$11['radio-group-option__caption']
+    className: styles$13['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -10276,7 +10367,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$$['radio-group-field__label']
+    className: styles$11['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -10289,16 +10380,16 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$12 = {"text-field":"_2XkkE","text-field--invalid":"_354dw","text-field--prefixed":"_1QOpO","text-field--suffixed":"_34_V4","password-container":"_3uwnl","password-toggle":"_3-YzT"};
+var styles$14 = {"text-field":"_2XkkE","text-field--invalid":"_354dw","text-field--prefixed":"_1QOpO","text-field--suffixed":"_34_V4","password-container":"_3uwnl","password-toggle":"_3-YzT"};
 
-var styles$13 = {"password-criteria":"_1XvvK","password-criteria--invalid":"_1cNVk"};
+var styles$15 = {"password-criteria":"_1XvvK","password-criteria--invalid":"_1cNVk"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
   var met = _ref.met,
     children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$13['password-criteria'], (_classnames = {}, _classnames[styles$13['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$15['password-criteria'], (_classnames = {}, _classnames[styles$15['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -10375,11 +10466,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: styles$12['password-container']
+    className: styles$14['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$12['text-field'], (_classnames = {}, _classnames[styles$12['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$14['text-field'], (_classnames = {}, _classnames[styles$14['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -10391,7 +10482,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$12['password-toggle'],
+    className: styles$14['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -10497,7 +10588,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   })));
 };
 
-var styles$14 = {"custom-list":"_12jq3"};
+var styles$16 = {"custom-list":"_12jq3"};
 
 var _excluded$2H = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 var CustomList = function CustomList(_ref) {
@@ -10513,7 +10604,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(Select.components.MenuList, _extends({}, props), React__default.createElement(React.Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$14['custom-list']
+    className: styles$16['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
@@ -10817,7 +10908,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$15 = {"text-field":"_vgwnU","date-range-field":"_LZvMX","text-field--invalid":"_38CI6","text-field--prefixed":"_XbfGt","text-field--suffixed":"_Ewpkr","date-range-field--invalid":"_3YxJl","date-range-field--disabled":"_2HD_U"};
+var styles$17 = {"text-field":"_vgwnU","date-range-field":"_LZvMX","text-field--invalid":"_38CI6","text-field--prefixed":"_XbfGt","text-field--suffixed":"_Ewpkr","date-range-field--invalid":"_3YxJl","date-range-field--disabled":"_2HD_U"};
 
 var calendarStyles = {"root":"_9qjsN","table":"_3-vS3","caption":"_3fAtI","head_cell":"_2x1hd","day_today":"_1e7Xn","day_outside":"_arG8m","nav_button":"_3IW93","day_range_middle":"_2KlYu","day_range_start":"_rPkLU","day_range_end":"_2cUU7"};
 
@@ -11077,7 +11168,7 @@ var DateRangeField = function DateRangeField(_ref) {
     start = _controllers$value.start,
     end = _controllers$value.end;
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$15['date-range-field'], (_classnames = {}, _classnames[styles$15['date-range-field--invalid']] = hasError, _classnames[styles$15['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$17['date-range-field'], (_classnames = {}, _classnames[styles$17['date-range-field--invalid']] = hasError, _classnames[styles$17['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -11390,7 +11481,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = React.forwardRef(TimeFieldElement);
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var styles$16 = {"text-field":"_pPDKc","time-range-field":"_rSyiE","text-field--invalid":"_RpUv1","text-field--prefixed":"_3Pvnr","text-field--suffixed":"_1VgCQ","time-range-field--invalid":"_2KzVO","time-range-field--disabled":"_xDHMe"};
+var styles$18 = {"text-field":"_pPDKc","time-range-field":"_rSyiE","text-field--invalid":"_RpUv1","text-field--prefixed":"_3Pvnr","text-field--suffixed":"_1VgCQ","time-range-field--invalid":"_2KzVO","time-range-field--disabled":"_xDHMe"};
 
 var TimeRangeEnd = function TimeRangeEnd(_ref) {
   var startTime = _ref.startTime,
@@ -11492,7 +11583,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
   };
   var timeRangeDuration = getDuration(end, start);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$16['time-range-field'], (_classnames = {}, _classnames[styles$16['time-range-field--invalid']] = hasError, _classnames[styles$16['time-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$18['time-range-field'], (_classnames = {}, _classnames[styles$18['time-range-field--invalid']] = hasError, _classnames[styles$18['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(TimeRangeStart, {
     startTime: startTime,
@@ -11519,7 +11610,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
   })));
 };
 
-var styles$17 = {"currency-field__mask-display":"_2K8Ob"};
+var styles$19 = {"currency-field__mask-display":"_2K8Ob"};
 
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
@@ -11586,7 +11677,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
       inputProps.onFocus(e);
     }
   }))), showMask && !!inputProps.value && React__default.createElement("div", {
-    className: styles$17['currency-field__mask-display'],
+    className: styles$19['currency-field__mask-display'],
     style: {
       marginLeft: displayPadding
     }
@@ -11682,7 +11773,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$18 = {"phone-field":"_1uJbR","phone-field__flag":"_Fc99X","phone-field__input--with-square-borders":"_1zowl"};
+var styles$1a = {"phone-field":"_1uJbR","phone-field__flag":"_Fc99X","phone-field__input--with-square-borders":"_1zowl"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -12543,7 +12634,7 @@ var COUNTRIES = {
 };
 var COUNTRY_CODES = Object.keys(COUNTRIES);
 
-var styles$19 = {"country-selector":"_2T1pu","country-selector--with-error":"_1OxwW","country-selector__trigger":"_3mUO5","country-selector--disabled":"_10MbE","country-selector__trigger--with-error":"_5Dh7e","country-selector__trigger--disabled":"_2myDP","country-selector__trigger-flag":"_IHf11","country-selector__flag":"_1KMRs"};
+var styles$1b = {"country-selector":"_2T1pu","country-selector--with-error":"_1OxwW","country-selector__trigger":"_3mUO5","country-selector--disabled":"_10MbE","country-selector__trigger--with-error":"_5Dh7e","country-selector__trigger--disabled":"_2myDP","country-selector__trigger-flag":"_IHf11","country-selector__flag":"_1KMRs"};
 
 var flagIcons = {"fi":"_M2doN","fis":"_3vbi0","fi-ac":"_30baC","fi-ad":"_3ZYxj","fi-ae":"_2LJGN","fi-af":"_lqly3","fi-ag":"_B1gnt","fi-ai":"_1NIqt","fi-al":"_20Sg9","fi-am":"_JXRFR","fi-ao":"_3dUc_","fi-ar":"_2zSuY","fi-as":"_31Bje","fi-at":"_1_3ab","fi-au":"_3ifhl","fi-aw":"_3H9aN","fi-ax":"_3A_KZ","fi-az":"_2ObKm","fi-ba":"_3v41n","fi-bb":"_1fjfa","fi-bd":"_24NEp","fi-be":"_3AF8j","fi-bf":"_2jlZh","fi-bg":"_2ACy1","fi-bh":"_298rj","fi-bi":"_AP8aY","fi-bj":"_1SvG2","fi-bl":"_10exo","fi-bm":"_dPwTT","fi-bn":"_1e3FY","fi-bo":"_1P6lb","fi-bq":"_3yLu_","fi-br":"_2reHT","fi-bs":"_34VqI","fi-bt":"_3L-ek","fi-bw":"_2P46Z","fi-by":"_3k3ji","fi-bz":"_Wm-7Z","fi-ca":"_3mCU8","fi-cc":"_1TnnA","fi-cd":"_1n3mG","fi-cf":"_mRVOk","fi-cg":"_3yqWy","fi-ch":"_S-QqO","fi-ci":"_3yq28","fi-ck":"_1MnXX","fi-cl":"_2BAiD","fi-cm":"_17muc","fi-cn":"_zHGeX","fi-co":"_2xeW0","fi-cr":"_2PCnB","fi-cu":"_BFNAl","fi-cv":"_G2jRt","fi-cw":"_1grh-","fi-cx":"_1QOKC","fi-cy":"_3ld7b","fi-cz":"_bN_Fv","fi-de":"_280yy","fi-dj":"_3cZp9","fi-dk":"_23TZO","fi-dm":"_1sbTf","fi-do":"_1M5wH","fi-dz":"_2cicq","fi-ec":"_3caqA","fi-ee":"_3ZCIU","fi-eg":"_23ytE","fi-eh":"_pmU44","fi-er":"_1B8BU","fi-es":"_2jhKE","fi-et":"_sk0P2","fi-fi":"_1SEmk","fi-fj":"_sSQMg","fi-fk":"_27XSg","fi-fm":"_ClziM","fi-fo":"_uI-xC","fi-fr":"_M2iAw","fi-ga":"_2dwxx","fi-gb":"_1e-nA","fi-gd":"_2RZeE","fi-ge":"_2EvCn","fi-gf":"_3IH4K","fi-gg":"_1Jcke","fi-gh":"_2EPke","fi-gi":"_12Nbn","fi-gl":"_3__lH","fi-gm":"_2V2JG","fi-gn":"_1snaM","fi-gp":"_3Ra5n","fi-gq":"_3sbjK","fi-gr":"_-xgIE","fi-gt":"_1IL-n","fi-gu":"_X2BnD","fi-gw":"_183f_","fi-gy":"_3euCo","fi-hk":"_3vkSA","fi-hn":"_2wum3","fi-hr":"_394Be","fi-ht":"_2SZVb","fi-hu":"_1LPfs","fi-id":"_XxFIw","fi-ie":"_38xYb","fi-il":"_xsU9l","fi-im":"_1hyCQ","fi-in":"_1WZwW","fi-io":"_2OqV4","fi-iq":"_wS2T_","fi-ir":"_2gomh","fi-is":"_1DFTj","fi-it":"_2xqL9","fi-je":"_1YQZ8","fi-jm":"_2e2gd","fi-jo":"_3SD_b","fi-jp":"_2iU8m","fi-ke":"_2HTh-","fi-kg":"_P_BgY","fi-kh":"_3cL-5","fi-ki":"_UVsN_","fi-km":"_5_aHV","fi-kn":"_1ytYB","fi-kp":"_3h4nD","fi-kr":"_5Ayl_","fi-kw":"_11J0K","fi-ky":"_3JNZj","fi-kz":"_odoDB","fi-la":"_1NsIw","fi-lb":"_3sNSR","fi-lc":"_qIIiy","fi-li":"_2EYin","fi-lk":"_YC0sS","fi-lr":"_3M5Be","fi-ls":"_3mNd-","fi-lt":"_3Lod8","fi-lu":"_PADgP","fi-lv":"_1edmr","fi-ly":"_2Qaxl","fi-ma":"_3woQF","fi-mc":"_3Tcvg","fi-md":"_304sg","fi-me":"_3Y4qN","fi-mf":"_2Ta4d","fi-mg":"_3cyLg","fi-mh":"_3oa6y","fi-mk":"_2JG9M","fi-ml":"_E244m","fi-mm":"_3vntQ","fi-mn":"_1NFiz","fi-mo":"_17P3Y","fi-mp":"_2TsiM","fi-mq":"_1y2tW","fi-mr":"_hmY4g","fi-ms":"_2Rj7s","fi-mt":"_1nmC4","fi-mu":"_xO9Yk","fi-mv":"_13arY","fi-mw":"_2NJbp","fi-mx":"_3jDAz","fi-my":"_1R-kq","fi-mz":"_2JrIx","fi-na":"_2bezu","fi-nc":"_RXHw0","fi-ne":"_17FYh","fi-nf":"_2f17Z","fi-ng":"_pkj4b","fi-ni":"_2M9Kl","fi-nl":"_XP4Cy","fi-no":"_vWBdS","fi-np":"_3HCj0","fi-nr":"_35I9J","fi-nu":"_1qVGc","fi-nz":"_3sy04","fi-om":"_1ru-J","fi-pa":"_gVRbx","fi-pe":"_rPJml","fi-pf":"_b_9in","fi-pg":"_3svVP","fi-ph":"_qf4jP","fi-pk":"_ETc1B","fi-pl":"_2iKV_","fi-pm":"_3rKup","fi-pr":"_18qkQ","fi-ps":"_2QUjB","fi-pt":"_3XlFj","fi-pw":"_2-I7x","fi-py":"_2VRS9","fi-qa":"_XL4IN","fi-re":"_1Heg1","fi-ro":"_9Ds_F","fi-rs":"_2NBRF","fi-ru":"_27vE7","fi-rw":"_15XW2","fi-sa":"_2FNqc","fi-sb":"_nZ0tS","fi-sc":"_2c7r2","fi-sd":"_31SMO","fi-se":"_2g80W","fi-sg":"_1fXM6","fi-sh":"_3jXVn","fi-si":"_1dCS9","fi-sj":"_Fw6EH","fi-sk":"_3ZIrQ","fi-sl":"_2CXXP","fi-sm":"_9Z6OF","fi-sn":"_27QPB","fi-so":"_3u0ej","fi-sr":"_aWap6","fi-ss":"_jgut9","fi-st":"_1ZG6d","fi-sv":"_1LyCh","fi-sx":"_29HpR","fi-sy":"_36XMC","fi-sz":"_uhQEf","fi-ta":"_1VKa_","fi-tc":"_1zZqn","fi-td":"_zPDQp","fi-tg":"_1uL0e","fi-th":"_2hgJx","fi-tj":"_3wIE0","fi-tk":"_2duh0","fi-tl":"_2KUDp","fi-tm":"_2CfPc","fi-tn":"_2P42O","fi-to":"_2WFbJ","fi-tr":"_3Az7i","fi-tt":"_1pNPS","fi-tv":"_1pgP-","fi-tw":"_2ctah","fi-tz":"_3LhmF","fi-ua":"_ySobg","fi-ug":"_L0cww","fi-us":"_1dJbI","fi-uy":"_1mu4a","fi-uz":"_2jO3C","fi-va":"_3Wjh-","fi-vc":"_2SLDw","fi-ve":"_33s_c","fi-vg":"_14DB7","fi-vi":"_yup8e","fi-vn":"_2mLwZ","fi-vu":"_32cC-","fi-wf":"_2a5ap","fi-ws":"_3wY8H","fi-xk":"_3X7px","fi-ye":"_16y86","fi-yt":"_4eJM-","fi-za":"_3c6fy","fi-zm":"_21Ocp","fi-zw":"_2GLu6"};
 
@@ -12554,15 +12645,15 @@ var CountrySelector = function CountrySelector(_ref) {
     hasError = _ref.hasError,
     disabled = _ref.disabled;
   return React__default.createElement("div", {
-    className: classnames(styles$19['country-selector'], (_classNames = {}, _classNames[styles$19['country-selector--with-error']] = hasError, _classNames[styles$19['country-selector--disabled']] = disabled, _classNames))
+    className: classnames(styles$1b['country-selector'], (_classNames = {}, _classNames[styles$1b['country-selector--with-error']] = hasError, _classNames[styles$1b['country-selector--disabled']] = disabled, _classNames))
   }, React__default.createElement(Dropdown, {
     trigger: React__default.createElement("div", {
-      className: classnames(styles$19['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$19['country-selector__trigger--with-error']] = hasError, _classNames2[styles$19['country-selector__trigger--disabled']] = disabled, _classNames2))
+      className: classnames(styles$1b['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$1b['country-selector__trigger--with-error']] = hasError, _classNames2[styles$1b['country-selector__trigger--disabled']] = disabled, _classNames2))
     }, React__default.createElement(Inline, {
       space: 8,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$19['country-selector__trigger-flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$1b['country-selector__trigger-flag'])
     }), React__default.createElement(IconChevronDown, {
       color: "grey-400",
       size: "medium"
@@ -12579,7 +12670,7 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$19['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$1b['country-selector__flag'])
     }), React__default.createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }))));
 };
@@ -12651,7 +12742,7 @@ var PhoneField = function PhoneField(_ref) {
     }
   }, [fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone]);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: styles$18['phone-field']
+    className: styles$1a['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -12662,17 +12753,17 @@ var PhoneField = function PhoneField(_ref) {
       space: 4,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$18['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$1a['country-selector__flag'])
     }), React__default.createElement("span", null, "+", libphonenumberJs.getCountryCallingCode(selectedCountry))) : "+" + libphonenumberJs.getCountryCallingCode(selectedCountry)
   }, React__default.createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames(inputProps.className, (_classNames = {}, _classNames[styles$18['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames(inputProps.className, (_classNames = {}, _classNames[styles$1a['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));
 };
 
-var styles$1a = {"badge":"_1QLaK","badge--warning":"_qsFWw","badge--danger":"_359Cc","badge--success":"_2AOEK","badge--info":"_1mLjf"};
+var styles$1c = {"badge":"_1QLaK","badge--warning":"_qsFWw","badge--danger":"_359Cc","badge--success":"_2AOEK","badge--info":"_1mLjf"};
 
 var _excluded$2N = ["children", "theme", "title", "testId"];
 var BadgeElement = function BadgeElement(_ref, forwardedRef) {
@@ -12693,16 +12784,16 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", _extends({
-    className: classnames(styles$1a['badge'], (_classnames = {}, _classnames[styles$1a['badge--success']] = theme === 'success', _classnames[styles$1a['badge--danger']] = theme === 'danger', _classnames[styles$1a['badge--info']] = theme === 'info', _classnames[styles$1a['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$1c['badge'], (_classnames = {}, _classnames[styles$1c['badge--success']] = theme === 'success', _classnames[styles$1c['badge--danger']] = theme === 'danger', _classnames[styles$1c['badge--info']] = theme === 'info', _classnames[styles$1c['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
 };
 var Badge = React.forwardRef(BadgeElement);
 
-var styles$1b = {"avatar":"_1X7La","avatar__container":"_ZiKiO","avatar--small":"_o5x6S","avatar__badge":"_NN8-D","avatar--medium":"_VxW5y","avatar--large":"_ec7jQ","avatar--extra-large":"_3VS00"};
+var styles$1d = {"avatar":"_1X7La","avatar__container":"_ZiKiO","avatar--small":"_o5x6S","avatar__badge":"_NN8-D","avatar--medium":"_VxW5y","avatar--large":"_ec7jQ","avatar--extra-large":"_3VS00"};
 
-var styles$1c = {"avatar-image":"_bbI2F"};
+var styles$1e = {"avatar-image":"_bbI2F"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -12724,7 +12815,7 @@ var AvatarImage = function AvatarImage(_ref) {
     });
   }
   return React__default.createElement("div", {
-    className: styles$1c['avatar-image']
+    className: styles$1e['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -12789,9 +12880,9 @@ var Avatar = function Avatar(_ref) {
     defaultProfilePictureColors = _useState2[0];
   var backgroundColor = url ? COLORS['grey-200'] : getColor(color);
   return React__default.createElement("div", {
-    className: classnames(styles$1b['avatar__container'])
+    className: classnames(styles$1d['avatar__container'])
   }, React__default.createElement("div", {
-    className: classnames(styles$1b['avatar'], (_classnames = {}, _classnames[styles$1b['avatar--small']] = size === 'small', _classnames[styles$1b['avatar--medium']] = size === 'medium', _classnames[styles$1b['avatar--large']] = size === 'large', _classnames[styles$1b['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$1d['avatar'], (_classnames = {}, _classnames[styles$1d['avatar--small']] = size === 'small', _classnames[styles$1d['avatar--medium']] = size === 'medium', _classnames[styles$1d['avatar--large']] = size === 'large', _classnames[styles$1d['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -12804,7 +12895,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$1b['avatar__badge']
+    className: styles$1d['avatar__badge']
   }, badge)));
 };
 
@@ -12817,7 +12908,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$1d = {"chip":"_3e7Of","chip--marketing":"_2ZlMr","chip--success":"_g3pvh","chip--upsell":"_3GeNC","chip--warning":"_2jbr_","chip--info":"_1rrIw","chip--danger":"_1fKe8"};
+var styles$1f = {"chip":"_3e7Of","chip--marketing":"_2ZlMr","chip--success":"_g3pvh","chip--upsell":"_3GeNC","chip--warning":"_2jbr_","chip--info":"_1rrIw","chip--danger":"_1fKe8"};
 
 var Chip = function Chip(_ref) {
   var _classnames;
@@ -12827,11 +12918,11 @@ var Chip = function Chip(_ref) {
     testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$1d['chip'], (_classnames = {}, _classnames[styles$1d['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$1d['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$1d['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$1d['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$1d['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$1d['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$1f['chip'], (_classnames = {}, _classnames[styles$1f['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$1f['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$1f['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$1f['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$1f['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$1f['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$1e = {"pill":"_1vA9B","pill--default":"_2mTVo","pill--success":"_3CYqE","pill--danger":"_1WFdK","pill--warning":"_1Mp_n","pill--info":"_10zFn"};
+var styles$1g = {"pill":"_1vA9B","pill--default":"_2mTVo","pill--success":"_3CYqE","pill--danger":"_1WFdK","pill--warning":"_1Mp_n","pill--info":"_10zFn"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -12849,7 +12940,7 @@ var Pill = function Pill(_ref) {
     testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$1e['pill'], (_classnames = {}, _classnames[styles$1e['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$1e['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$1e['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$1e['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$1e['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$1g['pill'], (_classnames = {}, _classnames[styles$1g['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$1g['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$1g['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$1g['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$1g['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
@@ -12859,7 +12950,7 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-var styles$1f = {"empty-state-container-inline":"_1AdW7","empty-state-container-inline--inside-modal":"_Y1L-A","empty-state-container-inline__content":"_1E308","empty-state-container-inline__content--full-page":"_P5jRb","empty-state-container-inline__content--inline-horizontal":"_vkAs2","empty-state-container-inline__body":"_1o2PF","empty-state-container-inline__image":"_mfMlg"};
+var styles$1h = {"empty-state-container-inline":"_1AdW7","empty-state-container-inline--inside-modal":"_Y1L-A","empty-state-container-inline__content":"_1E308","empty-state-container-inline__content--full-page":"_P5jRb","empty-state-container-inline__content--inline-horizontal":"_vkAs2","empty-state-container-inline__body":"_1o2PF","empty-state-container-inline__image":"_mfMlg"};
 
 var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   var _classNames, _classnames;
@@ -12877,10 +12968,10 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   var _useModalContext = useModalContext(),
     isInsideModal = _useModalContext.isModalMounted;
   return React__default.createElement("div", {
-    className: classnames(styles$1f['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1f['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
+    className: classnames(styles$1h['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1h['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
     "data-testid": testId
   }, React__default.createElement("div", {
-    className: classnames(styles$1f['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$1f['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$1f['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
+    className: classnames(styles$1h['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$1h['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$1h['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement(Text, {
@@ -12889,7 +12980,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$1f['empty-state-container-inline__body']
+    className: styles$1h['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
     marginTop: 12
@@ -12900,7 +12991,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }), caption && React__default.createElement(Text, {
     as: "caption"
   }, caption))), React__default.createElement("div", {
-    className: styles$1f['empty-state-container-inline__image']
+    className: styles$1h['empty-state-container-inline__image']
   }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
@@ -12935,7 +13026,7 @@ var EmptyStateContainer = function EmptyStateContainer(_ref) {
   });
 };
 
-var styles$1g = {"paywall--as-card":"_3kFM9","paywall--as-card--centered":"_3kmTB"};
+var styles$1i = {"paywall--as-card":"_3kFM9","paywall--as-card--centered":"_3kmTB"};
 
 var Paywall = function Paywall(props) {
   var header = props.header,
@@ -12964,13 +13055,13 @@ var Paywall = function Paywall(props) {
     return React__default.createElement(Card$1, {
       onClose: onClose
     }, React__default.createElement("div", {
-      className: classnames(styles$1g['paywall--as-card'], (_classnames = {}, _classnames[styles$1g['paywall--as-card--centered']] = size === 'small', _classnames))
+      className: classnames(styles$1i['paywall--as-card'], (_classnames = {}, _classnames[styles$1i['paywall--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));
   }
   return emptyStateContainer;
 };
 
-var styles$1h = {"empty-state--as-card":"_DrBEi","empty-state--as-card--centered":"_3YbH7"};
+var styles$1j = {"empty-state--as-card":"_DrBEi","empty-state--as-card--centered":"_3YbH7"};
 
 var EmptyState = function EmptyState(props) {
   var header = props.header,
@@ -12998,12 +13089,13 @@ var EmptyState = function EmptyState(props) {
     return React__default.createElement(Card$1, {
       onClose: onClose
     }, React__default.createElement("div", {
-      className: classnames(styles$1h['empty-state--as-card'], (_classnames = {}, _classnames[styles$1h['empty-state--as-card--centered']] = size === 'small', _classnames))
+      className: classnames(styles$1j['empty-state--as-card'], (_classnames = {}, _classnames[styles$1j['empty-state--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));
   }
   return emptyStateContainer;
 };
 
+exports.Accordion = Accordion;
 exports.AsyncSelectField = AsyncSelectField$1;
 exports.Avatar = Avatar;
 exports.Badge = Badge;