@7shifts/sous-chef 3.47.0 → 3.48.0-beta.0

package/dist/index.modern.js

@@ -7163,13 +7163,14 @@ var TextComponent = function TextComponent(_ref, ref) {
   var _getPositionProps = getPositionProps(rest),
     positionProps = _getPositionProps.positionProps,
     otherProps = _getPositionProps.otherProps;
+  var positionStyles = usePositionStyles(positionProps);
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var elementProps = _extends({
     style: _extends({
       color: getColor(color),
       textWrap: textWrap
-    }, positionProps),
+    }, positionStyles),
     className: classnames(styles$p['text'], (_classnames = {}, _classnames[styles$p['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$p['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$p['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$p['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$p['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$p['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$p['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$p['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$p['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$p['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$p['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
     'data-testid': testId
   }, dataProps, {
@@ -9632,12 +9633,18 @@ var useSelectField = function useSelectField(_ref) {
   };
 };
 
+var styles$T = {"select-field__suffix":"_3MaoM"};
+
 var SelectField$1 = function SelectField(props) {
   var _useSelectField = useSelectField(props),
     fieldProps = _useSelectField.fieldProps,
     selectProps = _useSelectField.selectProps;
+  var suffixWithMargin = props.suffix ? React__default.createElement("div", {
+    className: styles$T['select-field__suffix']
+  }, props.suffix) : undefined;
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
-    prefix: props.prefix
+    prefix: props.prefix,
+    suffix: suffixWithMargin
   }, React__default.createElement(Select, _extends({}, selectProps))));
 };
 
@@ -9669,9 +9676,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$T = {"date-filter":"_zaON7","date-filter--wide":"_2Rjup"};
+var styles$U = {"date-filter":"_zaON7","date-filter--wide":"_2Rjup"};
 
-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 styles$V = {"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',
@@ -9724,7 +9731,7 @@ var DateFilterDisplay = forwardRef(function (_ref, ref) {
     weekStart = _ref.weekStart,
     onClick = _ref.onClick;
   return React__default.createElement("button", {
-    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)),
+    className: classnames(styles$V['date-filter-display'], (_classnames = {}, _classnames[styles$V['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$V['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
     ref: ref
@@ -9732,7 +9739,7 @@ var DateFilterDisplay = forwardRef(function (_ref, ref) {
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$U['date-filter-display__display-icon'])
+    className: classnames(styles$V['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
     color: "grey-400"
@@ -9743,7 +9750,7 @@ var DateFilterDisplay = forwardRef(function (_ref, ref) {
   })));
 });
 
-var styles$V = {"date-stepper":"_2tDB-","date-stepper--backward":"_9_2Mg","date-stepper--forward":"_j2INh"};
+var styles$W = {"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;
@@ -9772,7 +9779,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
     onChange = _ref.onChange,
     date = _ref.date;
   return React__default.createElement("button", {
-    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)),
+    className: classnames(styles$W['date-stepper'], (_classnames = {}, _classnames[styles$W['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$W['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -9801,7 +9808,7 @@ var DateFilter = function DateFilter(_ref) {
   }, [setCalendarOpen]);
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$T['date-filter'], (_classnames = {}, _classnames[styles$T['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$U['date-filter'], (_classnames = {}, _classnames[styles$U['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -9841,7 +9848,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$W = {"segmented-control":"_2cjh7","segmented-control__button":"_9hSoW","segmented-control__button--selected":"_2E6yG","segmented-control__divider":"_sIHGt"};
+var styles$X = {"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,
@@ -9855,7 +9862,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
     return index === options.length - 1;
   };
   return React__default.createElement("div", {
-    className: styles$W['segmented-control'],
+    className: styles$X['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -9865,16 +9872,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$W['segmented-control__button'], (_classnames = {}, _classnames[styles$W['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$X['segmented-control__button'], (_classnames = {}, _classnames[styles$X['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$W['segmented-control__divider'])
+      className: classnames(styles$X['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$X = {"form--standard-size":"_q1oFJ"};
+var styles$Y = {"form--standard-size":"_q1oFJ"};
 
-var styles$Y = {"form-section":"_3Sc6g","form-section__title":"_39X-5","form-section__subtitle":"_pwBR_","form-section--no-margin":"_PFp2d"};
+var styles$Z = {"form-section":"_3Sc6g","form-section__title":"_39X-5","form-section__subtitle":"_pwBR_","form-section--no-margin":"_PFp2d"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -9888,12 +9895,12 @@ var FormSection = function FormSection(_ref) {
   var content = React__default.createElement(Stack, null, (title || subtitle) && React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
-    className: classnames(styles$Y['form-section__title'])
+    className: classnames(styles$Z['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$Y['form-section__subtitle'])
+    className: classnames(styles$Z['form-section__subtitle'])
   }, subtitle)), children);
   return React__default.createElement("div", {
-    className: classnames(styles$Y['form-section'], (_classnames = {}, _classnames[styles$Y['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
+    className: classnames(styles$Z['form-section'], (_classnames = {}, _classnames[styles$Z['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
     "data-testid": testId
   }, as === 'card' ? React__default.createElement(Card$1, {
     testId: testId && testId + "-card"
@@ -9912,7 +9919,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$Z = {"form-footer":"_347bi"};
+var styles$_ = {"form-footer":"_347bi"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$primary2, _actions$secondary, _actions$tertiary;
@@ -9946,7 +9953,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$Z['form-footer']),
+    className: classnames(styles$_['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -9984,12 +9991,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$X['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$Y['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$_ = {"form-row":"_3TNiX"};
+var styles$$ = {"form-row":"_3TNiX"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -10017,7 +10024,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$_['form-row']
+    extraClass: styles$$['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -10026,7 +10033,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$$ = {"text-field":"_eyfGn","text-field--focus":"_3BfOP","text-field--disabled":"_lPUzt","text-field--invalid":"__21bv","text-field__toolbar":"_hyTnb"};
+var styles$10 = {"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);
@@ -10097,7 +10104,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$$['text-field'], (_classnames = {}, _classnames[styles$$['text-field--invalid']] = hasError, _classnames[styles$$['text-field--disabled']] = disabled, _classnames[styles$$['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$10['text-field'], (_classnames = {}, _classnames[styles$10['text-field--invalid']] = hasError, _classnames[styles$10['text-field--disabled']] = disabled, _classnames[styles$10['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -10130,7 +10137,7 @@ var TextAreaField = function TextAreaField(_ref) {
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default.createElement("div", {
-    className: styles$$['text-field__toolbar'],
+    className: styles$10['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -10159,7 +10166,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = forwardRef(TextFieldElement);
 
-var styles$10 = {"pill-select-field":"_3q2nh","pill-select-field__custom-input":"_W4HpY"};
+var styles$11 = {"pill-select-field":"_3q2nh","pill-select-field__custom-input":"_W4HpY"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -10245,7 +10252,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$10['pill-select-field']
+      className: styles$11['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -10265,7 +10272,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$10['pill-select-field__custom-input']
+      className: styles$11['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -10307,9 +10314,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$11 = {"label":"_3QyeH","label--truncate":"_2hmzQ","radio-group-field__label":"_thT22"};
+var styles$12 = {"label":"_3QyeH","label--truncate":"_2hmzQ","radio-group-field__label":"_thT22"};
 
-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 styles$13 = {"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;
@@ -10326,7 +10333,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$12['radio-group-box-option']
+    className: styles$13['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -10337,7 +10344,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$12['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$12['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
+    className: classnames(styles$13['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$13['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -10346,13 +10353,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: classnames(styles$12['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$12['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
+    className: classnames(styles$13['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$13['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
   }, label), caption && React__default.createElement("div", {
-    className: classnames(styles$12['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$12['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
+    className: classnames(styles$13['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$13['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
   }, caption)))));
 };
 
-var styles$13 = {"radio-group-option":"_DFbQ0","radio-group-option__caption":"_kt7KQ","radio-group-option__custom-input":"_1aaPx"};
+var styles$14 = {"radio-group-option":"_DFbQ0","radio-group-option__caption":"_kt7KQ","radio-group-option__custom-input":"_1aaPx"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -10372,7 +10379,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$13['radio-group-option']
+    className: styles$14['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -10383,11 +10390,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("span", {
-    className: styles$13['radio-group-option__custom-input']
+    className: styles$14['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$13['radio-group-option__caption']
+    className: styles$14['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -10517,7 +10524,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$11['radio-group-field__label']
+    className: styles$12['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -10530,16 +10537,16 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-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$15 = {"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$15 = {"password-criteria":"_1XvvK","password-criteria--invalid":"_1cNVk"};
+var styles$16 = {"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$15['password-criteria'], (_classnames = {}, _classnames[styles$15['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$16['password-criteria'], (_classnames = {}, _classnames[styles$16['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -10616,11 +10623,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: styles$14['password-container']
+    className: styles$15['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$14['text-field'], (_classnames = {}, _classnames[styles$14['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$15['text-field'], (_classnames = {}, _classnames[styles$15['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -10632,7 +10639,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$14['password-toggle'],
+    className: styles$15['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -10738,7 +10745,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   })));
 };
 
-var styles$16 = {"custom-list":"_12jq3"};
+var styles$17 = {"custom-list":"_12jq3"};
 
 var _excluded$2H = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 var CustomList = function CustomList(_ref) {
@@ -10754,7 +10761,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$16['custom-list']
+    className: styles$17['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
@@ -11059,7 +11066,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-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 styles$18 = {"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"};
 
@@ -11327,7 +11334,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$17['date-range-field'], (_classnames = {}, _classnames[styles$17['date-range-field--invalid']] = hasError, _classnames[styles$17['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$18['date-range-field'], (_classnames = {}, _classnames[styles$18['date-range-field--invalid']] = hasError, _classnames[styles$18['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -11641,7 +11648,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = forwardRef(TimeFieldElement);
 var TimeField = forwardRef(TimeFieldElement);
 
-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 styles$19 = {"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,
@@ -11743,7 +11750,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$18['time-range-field'], (_classnames = {}, _classnames[styles$18['time-range-field--invalid']] = hasError, _classnames[styles$18['time-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$19['time-range-field'], (_classnames = {}, _classnames[styles$19['time-range-field--invalid']] = hasError, _classnames[styles$19['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(TimeRangeStart, {
     startTime: startTime,
@@ -11770,7 +11777,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
   })));
 };
 
-var styles$19 = {"currency-field__mask-display":"_2K8Ob"};
+var styles$1a = {"currency-field__mask-display":"_2K8Ob"};
 
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
@@ -11837,7 +11844,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
       inputProps.onFocus(e);
     }
   }))), showMask && !!inputProps.value && React__default.createElement("div", {
-    className: styles$19['currency-field__mask-display'],
+    className: styles$1a['currency-field__mask-display'],
     style: {
       marginLeft: displayPadding
     }
@@ -11933,7 +11940,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$1a = {"phone-field":"_1uJbR","phone-field__flag":"_Fc99X","phone-field__input--with-square-borders":"_1zowl"};
+var styles$1b = {"phone-field":"_1uJbR","phone-field__flag":"_Fc99X","phone-field__input--with-square-borders":"_1zowl"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -12794,7 +12801,7 @@ var COUNTRIES = {
 };
 var COUNTRY_CODES = Object.keys(COUNTRIES);
 
-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 styles$1c = {"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"};
 
@@ -12805,15 +12812,15 @@ var CountrySelector = function CountrySelector(_ref) {
     hasError = _ref.hasError,
     disabled = _ref.disabled;
   return React__default.createElement("div", {
-    className: classnames(styles$1b['country-selector'], (_classNames = {}, _classNames[styles$1b['country-selector--with-error']] = hasError, _classNames[styles$1b['country-selector--disabled']] = disabled, _classNames))
+    className: classnames(styles$1c['country-selector'], (_classNames = {}, _classNames[styles$1c['country-selector--with-error']] = hasError, _classNames[styles$1c['country-selector--disabled']] = disabled, _classNames))
   }, React__default.createElement(Dropdown, {
     trigger: React__default.createElement("div", {
-      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))
+      className: classnames(styles$1c['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$1c['country-selector__trigger--with-error']] = hasError, _classNames2[styles$1c['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$1b['country-selector__trigger-flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$1c['country-selector__trigger-flag'])
     }), React__default.createElement(IconChevronDown, {
       color: "grey-400",
       size: "medium"
@@ -12830,7 +12837,7 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$1b['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$1c['country-selector__flag'])
     }), React__default.createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }))));
 };
@@ -12902,7 +12909,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$1a['phone-field']
+    className: styles$1b['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -12913,17 +12920,17 @@ var PhoneField = function PhoneField(_ref) {
       space: 4,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$1a['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$1b['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$1a['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames(inputProps.className, (_classNames = {}, _classNames[styles$1b['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));
 };
 
-var styles$1c = {"badge":"_1QLaK","badge--warning":"_qsFWw","badge--danger":"_359Cc","badge--success":"_2AOEK","badge--info":"_1mLjf"};
+var styles$1d = {"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) {
@@ -12944,16 +12951,16 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", _extends({
-    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)),
+    className: classnames(styles$1d['badge'], (_classnames = {}, _classnames[styles$1d['badge--success']] = theme === 'success', _classnames[styles$1d['badge--danger']] = theme === 'danger', _classnames[styles$1d['badge--info']] = theme === 'info', _classnames[styles$1d['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
 };
 var Badge = forwardRef(BadgeElement);
 
-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$1e = {"avatar":"_1X7La","avatar__container":"_ZiKiO","avatar--small":"_o5x6S","avatar__badge":"_NN8-D","avatar--medium":"_VxW5y","avatar--large":"_ec7jQ","avatar--extra-large":"_3VS00"};
 
-var styles$1e = {"avatar-image":"_bbI2F"};
+var styles$1f = {"avatar-image":"_bbI2F"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -12975,7 +12982,7 @@ var AvatarImage = function AvatarImage(_ref) {
     });
   }
   return React__default.createElement("div", {
-    className: styles$1e['avatar-image']
+    className: styles$1f['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -13040,9 +13047,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$1d['avatar__container'])
+    className: classnames(styles$1e['avatar__container'])
   }, React__default.createElement("div", {
-    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)),
+    className: classnames(styles$1e['avatar'], (_classnames = {}, _classnames[styles$1e['avatar--small']] = size === 'small', _classnames[styles$1e['avatar--medium']] = size === 'medium', _classnames[styles$1e['avatar--large']] = size === 'large', _classnames[styles$1e['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -13055,7 +13062,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$1d['avatar__badge']
+    className: styles$1e['avatar__badge']
   }, badge)));
 };
 
@@ -13068,7 +13075,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$1f = {"chip":"_3e7Of","chip--marketing":"_2ZlMr","chip--success":"_g3pvh","chip--upsell":"_3GeNC","chip--warning":"_2jbr_","chip--info":"_1rrIw","chip--danger":"_1fKe8"};
+var styles$1g = {"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;
@@ -13078,11 +13085,11 @@ var Chip = function Chip(_ref) {
     testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    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))
+    className: classnames(styles$1g['chip'], (_classnames = {}, _classnames[styles$1g['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$1g['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$1g['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$1g['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$1g['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$1g['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$1g = {"pill":"_1vA9B","pill--default":"_2mTVo","pill--success":"_3CYqE","pill--danger":"_1WFdK","pill--warning":"_1Mp_n","pill--info":"_10zFn"};
+var styles$1h = {"pill":"_1vA9B","pill--default":"_2mTVo","pill--success":"_3CYqE","pill--danger":"_1WFdK","pill--warning":"_1Mp_n","pill--info":"_10zFn"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -13100,7 +13107,7 @@ var Pill = function Pill(_ref) {
     testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    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))
+    className: classnames(styles$1h['pill'], (_classnames = {}, _classnames[styles$1h['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$1h['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$1h['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$1h['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$1h['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
@@ -13110,7 +13117,7 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-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 styles$1i = {"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;
@@ -13128,10 +13135,10 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   var _useModalContext = useModalContext(),
     isInsideModal = _useModalContext.isModalMounted;
   return React__default.createElement("div", {
-    className: classnames(styles$1h['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1h['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
+    className: classnames(styles$1i['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1i['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
     "data-testid": testId
   }, React__default.createElement("div", {
-    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))
+    className: classnames(styles$1i['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$1i['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$1i['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement(Text, {
@@ -13140,7 +13147,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$1h['empty-state-container-inline__body']
+    className: styles$1i['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
     marginTop: 12
@@ -13151,7 +13158,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }), caption && React__default.createElement(Text, {
     as: "caption"
   }, caption))), React__default.createElement("div", {
-    className: styles$1h['empty-state-container-inline__image']
+    className: styles$1i['empty-state-container-inline__image']
   }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
@@ -13186,7 +13193,7 @@ var EmptyStateContainer = function EmptyStateContainer(_ref) {
   });
 };
 
-var styles$1i = {"paywall--as-card":"_3kFM9","paywall--as-card--centered":"_3kmTB"};
+var styles$1j = {"paywall--as-card":"_3kFM9","paywall--as-card--centered":"_3kmTB"};
 
 var Paywall = function Paywall(props) {
   var header = props.header,
@@ -13216,13 +13223,13 @@ var Paywall = function Paywall(props) {
       onClose: onClose,
       actions: onClose ? [] : undefined
     }, React__default.createElement("div", {
-      className: classnames(styles$1i['paywall--as-card'], (_classnames = {}, _classnames[styles$1i['paywall--as-card--centered']] = size === 'small', _classnames))
+      className: classnames(styles$1j['paywall--as-card'], (_classnames = {}, _classnames[styles$1j['paywall--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));
   }
   return emptyStateContainer;
 };
 
-var styles$1j = {"empty-state--as-card":"_DrBEi","empty-state--as-card--centered":"_3YbH7"};
+var styles$1k = {"empty-state--as-card":"_DrBEi","empty-state--as-card--centered":"_3YbH7"};
 
 var EmptyState = function EmptyState(props) {
   var header = props.header,
@@ -13251,7 +13258,7 @@ var EmptyState = function EmptyState(props) {
       onClose: onClose,
       actions: onClose ? [] : undefined
     }, React__default.createElement("div", {
-      className: classnames(styles$1j['empty-state--as-card'], (_classnames = {}, _classnames[styles$1j['empty-state--as-card--centered']] = size === 'small', _classnames))
+      className: classnames(styles$1k['empty-state--as-card'], (_classnames = {}, _classnames[styles$1k['empty-state--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));
   }
   return emptyStateContainer;