@7shifts/sous-chef 3.42.0 → 3.43.0

package/dist/index.modern.js

@@ -61,7 +61,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 = {
@@ -561,7 +567,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 = useState(false),
     isVisible = _useState[0],
     setIsVisible = _useState[1];
@@ -586,6 +593,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)),
@@ -620,7 +628,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 = useRef(null);
   var containerRef = forwardedRef || internalRef;
@@ -693,7 +702,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) {
@@ -8912,6 +8922,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 = 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,
@@ -8991,7 +9082,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) {
@@ -9001,7 +9092,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(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
     }
@@ -9168,7 +9259,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) {
@@ -9227,15 +9318,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(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",
@@ -9425,9 +9516,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',
@@ -9480,7 +9571,7 @@ var DateFilterDisplay = 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
@@ -9488,7 +9579,7 @@ var DateFilterDisplay = 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"
@@ -9499,7 +9590,7 @@ var DateFilterDisplay = 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;
@@ -9528,7 +9619,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);
     }
@@ -9554,7 +9645,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, {
@@ -9596,7 +9687,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,
@@ -9610,7 +9701,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;
@@ -9620,16 +9711,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;
@@ -9643,12 +9734,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"
@@ -9667,7 +9758,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;
@@ -9701,7 +9792,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
@@ -9739,12 +9830,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%';
@@ -9772,7 +9863,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,
@@ -9781,7 +9872,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 = useRef(null);
@@ -9852,7 +9943,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)) {
@@ -9885,7 +9976,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) {
@@ -9914,7 +10005,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = 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,
@@ -10000,7 +10091,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,
@@ -10020,7 +10111,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));
   })));
 };
@@ -10062,9 +10153,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;
@@ -10081,7 +10172,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,
@@ -10092,7 +10183,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",
@@ -10101,13 +10192,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,
@@ -10127,7 +10218,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,
@@ -10138,11 +10229,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)));
@@ -10272,7 +10363,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, {
@@ -10285,16 +10376,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, {
@@ -10371,11 +10462,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",
@@ -10387,7 +10478,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",
@@ -10493,7 +10584,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) {
@@ -10509,7 +10600,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, _extends({}, props), React__default.createElement(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')))));
 };
 
@@ -10813,7 +10904,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"};
 
@@ -11073,7 +11164,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",
@@ -11386,7 +11477,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = forwardRef(TimeFieldElement);
 var TimeField = 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,
@@ -11488,7 +11579,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,
@@ -11515,7 +11606,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;
@@ -11582,7 +11673,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
     }
@@ -11678,7 +11769,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,
@@ -12539,7 +12630,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"};
 
@@ -12550,15 +12641,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"
@@ -12575,7 +12666,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)));
   }))));
 };
@@ -12647,7 +12738,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,
@@ -12658,17 +12749,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, "+", getCountryCallingCode(selectedCountry))) : "+" + 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) {
@@ -12689,16 +12780,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 = 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,
@@ -12720,7 +12811,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
@@ -12785,9 +12876,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
     },
@@ -12800,7 +12891,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)));
 };
 
@@ -12813,7 +12904,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;
@@ -12823,11 +12914,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',
@@ -12845,7 +12936,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);
 };
 
@@ -12855,7 +12946,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;
@@ -12873,10 +12964,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, {
@@ -12885,7 +12976,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
@@ -12896,7 +12987,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),
@@ -12931,7 +13022,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,
@@ -12960,13 +13051,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,
@@ -12994,11 +13085,11 @@ 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;
 };
 
-export { AsyncSelectField$1 as AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar$1 as Calendar, CalloutCard, Card$1 as Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable$1 as DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal$1 as HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls$1 as PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField$1 as SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
+export { Accordion, AsyncSelectField$1 as AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar$1 as Calendar, CalloutCard, Card$1 as Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable$1 as DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal$1 as HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls$1 as PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField$1 as SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
 //# sourceMappingURL=index.modern.js.map