@7shifts/sous-chef 3.50.0 → 4.0.0-beta.0

package/dist/index.js

@@ -5902,15 +5902,33 @@ var ToastContainer = function ToastContainer(_ref2) {
   });
 };
 
+var initialValue$1 = {
+  country: 'US'
+};
+var ProviderConfigContext = React.createContext(initialValue$1);
+var useProviderConfig = function useProviderConfig() {
+  var context = React.useContext(ProviderConfigContext);
+  if (!context) {
+    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
+  }
+  return context;
+};
+
 var SousChefProvider = function SousChefProvider(_ref) {
   var children = _ref.children,
     _ref$i18n = _ref.i18n,
-    i18n = _ref$i18n === void 0 ? en : _ref$i18n;
-  return React__default.createElement(TranslationsContext.Provider, {
+    i18n = _ref$i18n === void 0 ? en : _ref$i18n,
+    _ref$country = _ref.country,
+    country = _ref$country === void 0 ? 'US' : _ref$country;
+  return React__default.createElement(ProviderConfigContext.Provider, {
+    value: {
+      country: country
+    }
+  }, React__default.createElement(TranslationsContext.Provider, {
     value: {
       i18n: i18n
     }
-  }, React__default.createElement(ToastContainer, null), children);
+  }, React__default.createElement(ToastContainer, null), children));
 };
 
 var styles$a = {"data-table-header":"_1vpCK","data-table-header__item":"_dJWps","data-table-header__item--sortable":"_14AEw","data-table-header__itemfocus":"_2JSFR","data-table-header__item--action":"_29TM7","data-table-header__item-content":"_2Zpt5","data-table-header__item-content--right-align":"_3WtwH","data-table-header__sort-icon":"_3codU"};
@@ -6119,12 +6137,12 @@ var DATA_TABLE_SCROLL_STATES = {
 };
 var AMOUNT_OF_SKELETON_ROWS = 10;
 
-var initialValue$1 = {
+var initialValue$2 = {
   columns: [],
   numberOfRows: 0,
   state: DATA_TABLE_STATES.SKELETON_LOADING
 };
-var Context = React.createContext(initialValue$1);
+var Context = React.createContext(initialValue$2);
 var useDataTableContext = function useDataTableContext() {
   var context = React.useContext(Context);
   if (!context) {
@@ -8127,7 +8145,8 @@ var Calendar$1 = function Calendar(_ref) {
     disabledDays = _ref.disabledDays,
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
-    onMonthChange = _ref.onMonthChange;
+    onMonthChange = _ref.onMonthChange,
+    id = _ref.id;
   var _useDropdownContext = useDropdownContext(),
     isInsideDropdown = _useDropdownContext.isOpen;
   var translate = useTranslation();
@@ -8187,7 +8206,7 @@ var Calendar$1 = function Calendar(_ref) {
     fromYear: calendarDropdownFromYear,
     toYear: calendarDropdownToYear,
     disabled: disabledDays,
-    defaultMonth: initialMonth || selected,
+    defaultMonth: initialMonth || selected || undefined,
     showOutsideDays: true,
     weekStartsOn: weekStart,
     onMonthChange: onMonthChange,
@@ -8204,7 +8223,9 @@ var Calendar$1 = function Calendar(_ref) {
     }
   };
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$G['calendar']
+    className: styles$G['calendar'],
+    id: id,
+    tabIndex: 1
   }, React__default.createElement("div", {
     className: styles$G['calendar__overlay'],
     ref: function ref(_ref2) {
@@ -8217,7 +8238,7 @@ var Calendar$1 = function Calendar(_ref) {
     role: "dialog"
   }, mode === CALENDAR_MODE.DAY ? React__default.createElement(reactDayPicker.DayPicker, _extends({
     mode: "single",
-    selected: selected,
+    selected: selected || undefined,
     captionLayout: "dropdown-buttons"
   }, defaultProps)) : React__default.createElement(reactDayPicker.DayPicker, _extends({
     mode: "range",
@@ -9209,6 +9230,108 @@ var Accordion = function Accordion(props) {
   })));
 };
 
+var styles$R = {"action-list":"_9iCpw"};
+
+var ActionList = function ActionList(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$R['action-list'],
+    "data-testid": testId
+  }, children);
+};
+
+var style = {"action-list-item":"_n1vRf","action-list-item--disabled":"_1cHQz","action-list-item--interactive":"_T7LTs","action-list-item__actions":"_2DAEW"};
+
+var ActionListItemActions = function ActionListItemActions(_ref) {
+  var actions = _ref.actions,
+    disabled = _ref.disabled;
+  var kebabMenuItems = actions.filter(function (action) {
+    return !disabled && action.showInKebab === undefined || action.showInKebab;
+  });
+  var sideActions = actions.filter(function (action) {
+    return action.showInKebab === false;
+  });
+  return React__default.createElement(Inline, {
+    space: 12,
+    flexWrap: 'nowrap',
+    alignItems: 'center'
+  }, sideActions.map(function (action) {
+    return React__default.createElement(Button, _extends({
+      key: action.action,
+      onClick: disabled ? undefined : action.onAction,
+      theme: 'default',
+      disabled: disabled
+    }, action.buttonProps && action.buttonProps), action.label);
+  }), kebabMenuItems.length && React__default.createElement(KebabMenu, {
+    actions: kebabMenuItems
+  }));
+};
+
+var ActionListItem = function ActionListItem(_ref) {
+  var _classnames;
+  var title = _ref.title,
+    children = _ref.children,
+    icon = _ref.icon,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'info' : _ref$theme,
+    onAction = _ref.onAction,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    actions = _ref.actions,
+    suffix = _ref.suffix,
+    testId = _ref.testId;
+  var iconColor = function iconColor() {
+    if (theme === 'info') {
+      return disabled ? 'blueberry-300' : 'blueberry-400';
+    }
+    if (theme === 'warning') {
+      return disabled ? 'banana-300' : 'banana-400';
+    }
+    if (theme === 'success') {
+      return disabled ? 'mint-300' : 'mint-400';
+    }
+    if (theme === 'danger') {
+      return disabled ? 'radish-300' : 'radish-400';
+    }
+    if (theme === 'upsell') {
+      return disabled ? 'eggplant-300' : 'eggplant-400';
+    }
+    return undefined;
+  };
+  var bodyClassName = classnames(style['action-list-item'], (_classnames = {}, _classnames[style['action-list-item--interactive']] = !disabled && onAction, _classnames[style['action-list-item--disabled']] = disabled, _classnames));
+  return React__default.createElement("button", {
+    className: bodyClassName,
+    onClick: disabled ? undefined : onAction,
+    "data-testid": testId
+  }, React__default.createElement(Inline, {
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }, React__default.createElement(Inline, {
+    space: 12,
+    alignItems: 'flex-start'
+  }, React__default.cloneElement(icon, {
+    color: iconColor()
+  }), React__default.createElement(Stack, {
+    space: 4
+  }, React__default.createElement(Text, {
+    emphasis: 'bold'
+  }, title), children && React__default.createElement(Text, null, children))), React__default.createElement("div", {
+    className: classnames(style['action-list-item__actions'])
+  }, React__default.createElement(Inline, {
+    space: 32,
+    flexGrow: 3,
+    alignItems: 'center'
+  }, React__default.createElement(Text, {
+    color: disabled ? 'grey-300' : 'grey-400'
+  }, suffix), onAction && React__default.createElement(IconChevronRight, {
+    color: disabled ? 'grey-300' : 'grey-400'
+  }), actions && React__default.createElement(ActionListItemActions, {
+    actions: actions,
+    disabled: disabled
+  })))));
+};
+
 var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   var name = _ref.name,
     inputId = _ref.id,
@@ -9288,7 +9411,7 @@ var isReactSelectElement = function isReactSelectElement(element) {
   return typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
 };
 
-var styles$R = {"custom-control":"_1JTKu"};
+var styles$S = {"custom-control":"_1JTKu"};
 
 var _excluded$2D = ["children"];
 function CustomControl(_ref) {
@@ -9298,7 +9421,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$R['custom-control'],
+    className: styles$S['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -9466,7 +9589,7 @@ var CustomContainer = function CustomContainer(props) {
   }));
 };
 
-var styles$S = {"custom-menu-text-field":"_2bu6-","custom-menu-hr":"_1cgU7","custom-menu-div":"_1khlU"};
+var styles$T = {"custom-menu-text-field":"_2bu6-","custom-menu-hr":"_1cgU7","custom-menu-div":"_1khlU"};
 
 var _excluded$2F = ["children"];
 function CustomMenu(_ref) {
@@ -9525,15 +9648,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(Select.components.Menu, _extends({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$S['custom-menu-hr']
+    className: styles$T['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
-    className: styles$S['custom-menu-div']
+    className: styles$T['custom-menu-div']
   }, React__default.createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(styles$k['text-field'], styles$S['custom-menu-text-field']),
+    className: classnames(styles$k['text-field'], styles$T['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -9674,14 +9797,14 @@ var useSelectField = function useSelectField(_ref) {
   };
 };
 
-var styles$T = {"select-field__suffix":"_3MaoM"};
+var styles$U = {"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']
+    className: styles$U['select-field__suffix']
   }, props.suffix) : undefined;
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: props.prefix,
@@ -9717,9 +9840,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$U = {"date-filter":"_zaON7","date-filter--wide":"_2Rjup"};
+var styles$V = {"date-filter":"_zaON7","date-filter--wide":"_2Rjup"};
 
-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 styles$W = {"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',
@@ -9772,7 +9895,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     weekStart = _ref.weekStart,
     onClick = _ref.onClick;
   return React__default.createElement("button", {
-    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)),
+    className: classnames(styles$W['date-filter-display'], (_classnames = {}, _classnames[styles$W['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$W['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
     ref: ref
@@ -9780,7 +9903,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$V['date-filter-display__display-icon'])
+    className: classnames(styles$W['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
     color: "grey-400"
@@ -9791,7 +9914,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var styles$W = {"date-stepper":"_2tDB-","date-stepper--backward":"_9_2Mg","date-stepper--forward":"_j2INh"};
+var styles$X = {"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;
@@ -9820,7 +9943,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
     onChange = _ref.onChange,
     date = _ref.date;
   return React__default.createElement("button", {
-    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)),
+    className: classnames(styles$X['date-stepper'], (_classnames = {}, _classnames[styles$X['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$X['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -9849,7 +9972,7 @@ var DateFilter = function DateFilter(_ref) {
   }, [setCalendarOpen]);
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$U['date-filter'], (_classnames = {}, _classnames[styles$U['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$V['date-filter'], (_classnames = {}, _classnames[styles$V['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -9889,7 +10012,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$X = {"segmented-control":"_2cjh7","segmented-control__button":"_9hSoW","segmented-control__button--selected":"_2E6yG","segmented-control__divider":"_sIHGt"};
+var styles$Y = {"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,
@@ -9903,7 +10026,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
     return index === options.length - 1;
   };
   return React__default.createElement("div", {
-    className: styles$X['segmented-control'],
+    className: styles$Y['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -9913,16 +10036,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$X['segmented-control__button'], (_classnames = {}, _classnames[styles$X['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$Y['segmented-control__button'], (_classnames = {}, _classnames[styles$Y['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$X['segmented-control__divider'])
+      className: classnames(styles$Y['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$Y = {"form--standard-size":"_q1oFJ"};
+var styles$Z = {"form--standard-size":"_q1oFJ"};
 
-var styles$Z = {"form-section":"_3Sc6g","form-section__title":"_39X-5","form-section__subtitle":"_pwBR_","form-section--no-margin":"_PFp2d"};
+var styles$_ = {"form-section":"_3Sc6g","form-section__title":"_39X-5","form-section__subtitle":"_pwBR_","form-section--no-margin":"_PFp2d"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -9936,12 +10059,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$Z['form-section__title'])
+    className: classnames(styles$_['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$Z['form-section__subtitle'])
+    className: classnames(styles$_['form-section__subtitle'])
   }, subtitle)), children);
   return React__default.createElement("div", {
-    className: classnames(styles$Z['form-section'], (_classnames = {}, _classnames[styles$Z['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
+    className: classnames(styles$_['form-section'], (_classnames = {}, _classnames[styles$_['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
     "data-testid": testId
   }, as === 'card' ? React__default.createElement(Card$1, {
     testId: testId && testId + "-card"
@@ -9960,7 +10083,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$_ = {"form-footer":"_347bi"};
+var styles$$ = {"form-footer":"_347bi"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$primary2, _actions$secondary, _actions$tertiary;
@@ -9994,7 +10117,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$_['form-footer']),
+    className: classnames(styles$$['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -10032,12 +10155,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$Y['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$Z['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$$ = {"form-row":"_3TNiX"};
+var styles$10 = {"form-row":"_3TNiX"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -10065,7 +10188,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$$['form-row']
+    extraClass: styles$10['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -10074,7 +10197,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$10 = {"text-field":"_eyfGn","text-field--focus":"_3BfOP","text-field--disabled":"_lPUzt","text-field--invalid":"__21bv","text-field__toolbar":"_hyTnb"};
+var styles$11 = {"text-field":"_eyfGn","text-field--focus":"_3BfOP","text-field--disabled":"_lPUzt","text-field--invalid":"__21bv","text-field__toolbar":"_hyTnb"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = React.useRef(null);
@@ -10145,7 +10268,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$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)),
+    className: classnames(styles$11['text-field'], (_classnames = {}, _classnames[styles$11['text-field--invalid']] = hasError, _classnames[styles$11['text-field--disabled']] = disabled, _classnames[styles$11['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -10178,7 +10301,7 @@ var TextAreaField = function TextAreaField(_ref) {
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default.createElement("div", {
-    className: styles$10['text-field__toolbar'],
+    className: styles$11['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -10207,7 +10330,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = React.forwardRef(TextFieldElement);
 
-var styles$11 = {"pill-select-field":"_3q2nh","pill-select-field__custom-input":"_W4HpY"};
+var styles$12 = {"pill-select-field":"_3q2nh","pill-select-field__custom-input":"_W4HpY"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -10293,7 +10416,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$11['pill-select-field']
+      className: styles$12['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -10313,7 +10436,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$11['pill-select-field__custom-input']
+      className: styles$12['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -10355,9 +10478,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$12 = {"label":"_3QyeH","label--truncate":"_2hmzQ","radio-group-field__label":"_thT22"};
+var styles$13 = {"label":"_3QyeH","label--truncate":"_2hmzQ","radio-group-field__label":"_thT22"};
 
-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 styles$14 = {"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;
@@ -10374,7 +10497,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$13['radio-group-box-option']
+    className: styles$14['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -10385,7 +10508,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$13['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$13['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
+    className: classnames(styles$14['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$14['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -10394,13 +10517,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: classnames(styles$13['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$13['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
+    className: classnames(styles$14['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$14['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
   }, label), caption && React__default.createElement("div", {
-    className: classnames(styles$13['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$13['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
+    className: classnames(styles$14['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$14['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
   }, caption)))));
 };
 
-var styles$14 = {"radio-group-option":"_DFbQ0","radio-group-option__caption":"_kt7KQ","radio-group-option__custom-input":"_1aaPx"};
+var styles$15 = {"radio-group-option":"_DFbQ0","radio-group-option__caption":"_kt7KQ","radio-group-option__custom-input":"_1aaPx"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -10420,7 +10543,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$14['radio-group-option']
+    className: styles$15['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -10431,11 +10554,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("span", {
-    className: styles$14['radio-group-option__custom-input']
+    className: styles$15['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$14['radio-group-option__caption']
+    className: styles$15['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -10565,7 +10688,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$12['radio-group-field__label']
+    className: styles$13['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -10578,16 +10701,16 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-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$16 = {"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$16 = {"password-criteria":"_1XvvK","password-criteria--invalid":"_1cNVk"};
+var styles$17 = {"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$16['password-criteria'], (_classnames = {}, _classnames[styles$16['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$17['password-criteria'], (_classnames = {}, _classnames[styles$17['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -10666,11 +10789,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: styles$15['password-container']
+    className: styles$16['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$15['text-field'], (_classnames = {}, _classnames[styles$15['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$16['text-field'], (_classnames = {}, _classnames[styles$16['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -10682,7 +10805,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$15['password-toggle'],
+    className: styles$16['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -10788,7 +10911,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   })));
 };
 
-var styles$17 = {"custom-list":"_12jq3"};
+var styles$18 = {"custom-list":"_12jq3"};
 
 var _excluded$2H = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 var CustomList = function CustomList(_ref) {
@@ -10804,7 +10927,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(Select.components.MenuList, _extends({}, props), React__default.createElement(React.Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$17['custom-list']
+    className: styles$18['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
@@ -10917,9 +11040,12 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
       error: error !== undefined ? controllers.error : formikState.error,
       value: value !== undefined ? controllers.value : formikState.value,
       onChange: _onChange ? controllers.onChange : function (newValue) {
-        formik.setFieldValue(name, newValue === undefined ? null : dateFns.startOfDay(newValue));
+        formik.setFieldValue(name, newValue === undefined || !dateFns.isDate(newValue) ? null : dateFns.startOfDay(newValue));
       },
-      onBlur: _onBlur ? controllers.onBlur : function () {
+      onBlur: _onBlur ? function () {
+        formik.setFieldTouched(name);
+        controllers.onBlur();
+      } : function () {
         formik.setFieldTouched(name);
       }
     });
@@ -10929,6 +11055,117 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
 
 var inputStyles = {"text-field":"_10EFd","date-field":"_33Mhr","text-field--invalid":"_3iXEe","date-field--invalid":"_iupg8","text-field--prefixed":"_2lxID","date-field--prefixed":"_Ukc0m","text-field--suffixed":"_2AI5V","date-field--suffixed":"_3P7jE"};
 
+var DEFAULT_SLOTS = 'dMy';
+var maskfy = function maskfy(params) {
+  var value = params.value,
+    format = params.format,
+    _params$slots = params.slots,
+    slots = _params$slots === void 0 ? DEFAULT_SLOTS : _params$slots,
+    cursorPosition = params.cursorPosition;
+  var formatCursorPosition = format[cursorPosition.selectionStart];
+  var isInAnchorPosition = !slots.includes(formatCursorPosition);
+  var isDeletingAnchor = value.length < format.length && isInAnchorPosition;
+  var _calculateCursorPosit = calculateCursorPosition(_extends({}, params, {
+      isDeletingAnchor: isDeletingAnchor
+    })),
+    selectionStart = _calculateCursorPosit[0],
+    selectionEnd = _calculateCursorPosit[1];
+  return {
+    maskedValue: calculateMask(_extends({}, params, {
+      isDeletingAnchor: isDeletingAnchor
+    })),
+    cursorPosition: {
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd
+    }
+  };
+};
+var calculateMask = function calculateMask(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    _ref$slots = _ref.slots,
+    slots = _ref$slots === void 0 ? DEFAULT_SLOTS : _ref$slots,
+    isDeletingAnchor = _ref.isDeletingAnchor,
+    cursorPosition = _ref.cursorPosition;
+  var slotsSet = new Set(slots);
+  var accept = new RegExp('\\d', 'g');
+  var inputMatches = value.match(accept) || [];
+  var _calculateDigitReplac = calculateDigitReplacement(slots, format, inputMatches.length, cursorPosition),
+    isReplacingDigit = _calculateDigitReplac.isReplacingDigit,
+    isReplacingAt = _calculateDigitReplac.isReplacingAt;
+  if (isReplacingDigit) {
+    inputMatches.splice(isReplacingAt, 1);
+  }
+  if (isDeletingAnchor) {
+    inputMatches.pop();
+  }
+  var maskedValue = Array.from(format, function (character) {
+    return inputMatches[0] === character || slotsSet.has(character) ? inputMatches.shift() || character : character;
+  });
+  return maskedValue.join('');
+};
+var calculateCursorPosition = function calculateCursorPosition(params) {
+  var value = params.value,
+    format = params.format,
+    cursorPosition = params.cursorPosition,
+    _params$slots2 = params.slots,
+    slots = _params$slots2 === void 0 ? DEFAULT_SLOTS : _params$slots2;
+  var slotsSet = new Set(slots);
+  var prev = function (j) {
+    return Array.from(format, function (c, i) {
+      return slotsSet.has(c) ? j = i + 1 : j;
+    });
+  }(0);
+  var first = [].concat(format).findIndex(function (c) {
+    return slotsSet.has(c);
+  });
+  var calculatedCursorRange = [cursorPosition.selectionStart, cursorPosition.selectionEnd].map(function (position) {
+    var valueCharacters = calculateMask(_extends({}, params, {
+      value: value.slice(0, position)
+    })).split('');
+    var slotIndex = valueCharacters.findIndex(function (character) {
+      return slotsSet.has(character);
+    });
+    if (slotIndex < 0) {
+      return prev[prev.length - 1];
+    }
+    return slotIndex;
+  });
+  return calculatedCursorRange;
+};
+var calculateDigitReplacement = function calculateDigitReplacement(slots, format, amountOfDigitsTyped, cursorPosition) {
+  var slotsRegExp = new RegExp("[" + slots.split('').join('|') + "]", 'g');
+  var slotsMatches = format.match(slotsRegExp) || [];
+  var isReplacingDigit = amountOfDigitsTyped > slotsMatches.length;
+  var getCharacterPosition = function getCharacterPosition() {
+    var formatUntilTheCursorPoint = format.slice(0, cursorPosition.selectionStart);
+    var slotsFormatSlicedMatches = formatUntilTheCursorPoint.match(slotsRegExp) || [];
+    return slotsFormatSlicedMatches.length;
+  };
+  return {
+    isReplacingDigit: isReplacingDigit,
+    isReplacingAt: isReplacingDigit ? getCharacterPosition() : 0
+  };
+};
+
+var useFieldMask = function useFieldMask(format) {
+  var maskfyField = function maskfyField(input) {
+    var _maskfy = maskfy({
+        value: input.value,
+        format: format,
+        cursorPosition: {
+          selectionStart: input.selectionStart,
+          selectionEnd: input.selectionEnd
+        }
+      }),
+      maskedValue = _maskfy.maskedValue,
+      cursorPosition = _maskfy.cursorPosition;
+    input.value = maskedValue.toUpperCase();
+    input.setSelectionRange(cursorPosition.selectionStart, cursorPosition.selectionEnd);
+  };
+  return maskfyField;
+};
+
 var DateField = function DateField(_ref) {
   var _classnames;
   var name = _ref.name,
@@ -10951,6 +11188,8 @@ var DateField = function DateField(_ref) {
     onMonthChange = _ref.onMonthChange,
     testId = _ref.testId,
     weekStart = _ref.weekStart;
+  var calendarId = name + "-calendar";
+  var maskfy = useFieldMask(format);
   var inputRef = React.useRef(null);
   var _useState = React.useState(false),
     showCalendar = _useState[0],
@@ -10963,17 +11202,15 @@ var DateField = function DateField(_ref) {
     onBlur: onBlur,
     error: error
   });
-  var _useState2 = React.useState(function () {
-      if (defaultValue) {
-        return formatDate(defaultValue, format);
-      }
-      if (controllers.value) {
-        return formatDate(controllers.value, format);
-      }
-      return '';
-    }),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
+  var getDefaultValue = function getDefaultValue() {
+    if (defaultValue) {
+      return formatDate(defaultValue, format);
+    }
+    if (controllers.value) {
+      return formatDate(controllers.value, format);
+    }
+    return '';
+  };
   var hasError = controllers.error;
   var fieldProps = {
     name: name,
@@ -10993,10 +11230,11 @@ var DateField = function DateField(_ref) {
     return undefined;
   };
   React.useEffect(function () {
-    if (!controllers.value && !!inputValue) {
-      setInputValue('');
+    if (!controllers.value && inputRef.current) {
+      inputRef.current.value = '';
     }
   }, [controllers.value]);
+  var selectedDate = getSelectedDate();
   var onClickOutside = React.useCallback(function () {
     return setShowCalendar(false);
   }, [setShowCalendar]);
@@ -11015,31 +11253,47 @@ var DateField = function DateField(_ref) {
     ref: inputRef,
     readOnly: readOnly,
     disabled: disabled,
-    onFocus: function onFocus() {
-      return setShowCalendar(true);
+    onFocus: function onFocus(e) {
+      setShowCalendar(true);
+      maskfy(e.target);
     },
     onClick: function onClick() {
       return setShowCalendar(true);
     },
     placeholder: placeholder || format.toUpperCase(),
     onChange: function onChange(event) {
+      maskfy(event.target);
       var parsedDate = parseDate(event.target.value, format);
       if (parsedDate) {
         controllers.onChange(parsedDate);
       }
-      setInputValue(event.target.value);
     },
-    onBlur: controllers.onBlur,
-    maxLength: format.length,
-    value: inputValue
+    onBlur: function onBlur(event) {
+      setTimeout(function () {
+        var calendar = document.getElementById(calendarId);
+        var parsedDate = parseDate(event.target.value, format);
+        controllers.onBlur();
+        if (!calendar || calendar.contains(document.activeElement)) {
+          if (!parsedDate) {
+            controllers.onChange(null);
+          }
+          return;
+        }
+        setShowCalendar(false);
+      }, 100);
+    },
+    defaultValue: getDefaultValue()
   })), showCalendar && React__default.createElement(Calendar$1, {
     onSelect: function onSelect(date) {
       var _inputRef$current;
-      setInputValue(formatDate(date, format));
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.value = formatDate(date, format);
       controllers.onChange(date);
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     },
-    selected: getSelectedDate(),
+    selected: selectedDate,
     anchorRef: inputRef,
     onClickOutside: onClickOutside,
     disabledDays: function disabledDays(day) {
@@ -11047,7 +11301,9 @@ var DateField = function DateField(_ref) {
     },
     initialMonth: initialMonth,
     onMonthChange: onMonthChange,
-    weekStart: weekStart
+    weekStart: weekStart,
+    key: selectedDate ? formatDate(selectedDate, format) : '',
+    id: calendarId
   }));
 };
 
@@ -11109,7 +11365,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-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 styles$19 = {"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"};
 
@@ -11126,7 +11382,8 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
     onMonthChange = _ref.onMonthChange,
-    mode = _ref.mode;
+    mode = _ref.mode,
+    id = _ref.id;
   var translate = useTranslation();
   var position = CALENDAR_PLACEMENT.BOTTOM;
   var _useState = React.useState(null),
@@ -11164,13 +11421,16 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
   };
   var endDateProps = {
     defaultMonth: initialMonth || end || start,
-    fromMonth: start
+    fromMonth: start,
+    month: end
   };
   var datePickerProps = mode === 'start-date' ? startDateProps : endDateProps;
   var DAYS = getDays(translate);
   var MONTH_NAMES = getMonths(translate);
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$G['calendar']
+    className: styles$G['calendar'],
+    id: id,
+    tabIndex: 1
   }, React__default.createElement("div", {
     className: styles$G['calendar__overlay'],
     ref: function ref(_ref2) {
@@ -11233,6 +11493,8 @@ var FromDate = function FromDate(_ref) {
     showCalendar = _useState[0],
     setShowCalendar = _useState[1];
   var inputRef = React.useRef(null);
+  var maskfy = useFieldMask(format);
+  var calendarId = name + "-start-calendar";
   var disabledDaysChecks = end ? [{
     after: end
   }] : [];
@@ -11259,13 +11521,43 @@ var FromDate = function FromDate(_ref) {
     "data-testid": testId && testId + "-from-date",
     type: "text",
     ref: inputRef,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
+      setShowCalendar(true);
+      maskfy(e.target);
+    },
+    onClick: function onClick() {
       return setShowCalendar(true);
     },
-    value: start ? formatDate(start, format) : '',
-    placeholder: placeholder
+    placeholder: placeholder || format.toUpperCase(),
+    defaultValue: start ? formatDate(start, format) : '',
+    onChange: function onChange(event) {
+      maskfy(event.target);
+      var parsedDate = parseDate(event.target.value, format);
+      if (parsedDate) {
+        handleChange(parsedDate);
+      }
+    },
+    onBlur: function onBlur(event) {
+      setTimeout(function () {
+        var calendar = document.getElementById(calendarId);
+        var parsedDate = parseDate(event.target.value, format);
+        if (!calendar || calendar.contains(document.activeElement)) {
+          if (!parsedDate) {
+            onChange(null);
+          }
+          return;
+        }
+        setShowCalendar(false);
+      }, 100);
+    }
   }), showCalendar && React__default.createElement(DateRangeCalendar, {
-    onSelect: handleChange,
+    onSelect: function onSelect(date) {
+      handleChange(date);
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.value = formatDate(date, format);
+    },
     onClickOutside: onClickOutside,
     anchorRef: inputRef,
     start: start,
@@ -11273,7 +11565,8 @@ var FromDate = function FromDate(_ref) {
     disabledDays: disabledDaysChecks,
     weekStart: weekStart,
     maxDays: maxDays,
-    mode: "start-date"
+    mode: "start-date",
+    id: calendarId
   }));
 };
 
@@ -11288,12 +11581,23 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     maxDays = _ref.maxDays,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
-    onChange = _ref.onChange,
-    onBlur = _ref.onBlur,
+    _onChange = _ref.onChange,
+    _onBlur = _ref.onBlur,
     testId = _ref.testId;
   var _useState = React.useState(false),
     showCalendar = _useState[0],
     setShowCalendar = _useState[1];
+  var maskfy = useFieldMask(format);
+  var calendarId = name + "-start-calendar";
+  var inputRef = ref;
+  React.useEffect(function () {
+    if (!inputRef || !inputRef.current) {
+      return;
+    }
+    if (!end && inputRef.current.value !== '') {
+      inputRef.current.value = '';
+    }
+  }, [end, inputRef]);
   var disabledDaysChecks = start ? [{
     before: start
   }] : [];
@@ -11304,6 +11608,18 @@ var ToDateElement = function ToDateElement(_ref, ref) {
       disabledDaysChecks.push(disabledDays);
     }
   }
+  var isValidDate = function isValidDate(value) {
+    if (!value) {
+      return false;
+    }
+    if (!start) {
+      return true;
+    }
+    if (start > value) {
+      return false;
+    }
+    return true;
+  };
   var onClickOutside = React.useCallback(function () {
     return setShowCalendar(false);
   }, [setShowCalendar]);
@@ -11315,14 +11631,45 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     "data-testid": testId && testId + "-to-date",
     type: "text",
     ref: ref,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
+      setShowCalendar(true);
+      maskfy(e.target);
+    },
+    onClick: function onClick() {
       return setShowCalendar(true);
     },
-    value: end ? formatDate(end, format) : '',
-    placeholder: placeholder,
-    onBlur: onBlur
+    placeholder: placeholder || format.toUpperCase(),
+    defaultValue: end ? formatDate(end, format) : '',
+    onChange: function onChange(event) {
+      maskfy(event.target);
+      var parsedDate = parseDate(event.target.value, format);
+      if (isValidDate(parsedDate)) {
+        _onChange(parsedDate);
+      }
+    },
+    onBlur: function onBlur(event) {
+      setTimeout(function () {
+        var calendar = document.getElementById(calendarId);
+        var parsedDate = parseDate(event.target.value, format);
+        _onBlur();
+        if (!calendar || calendar.contains(document.activeElement)) {
+          if (!isValidDate(parsedDate)) {
+            event.target.value = '';
+            _onChange(null);
+          }
+          return;
+        }
+        setShowCalendar(false);
+      }, 100);
+    }
   }), showCalendar && React__default.createElement(DateRangeCalendar, {
-    onSelect: onChange,
+    onSelect: function onSelect(date) {
+      _onChange(date);
+      if (!inputRef || !inputRef.current) {
+        return;
+      }
+      inputRef.current.value = formatDate(date, format);
+    },
     onClickOutside: onClickOutside,
     anchorRef: ref,
     start: start,
@@ -11330,7 +11677,8 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     disabledDays: disabledDaysChecks,
     weekStart: weekStart,
     maxDays: maxDays,
-    mode: "end-date"
+    mode: "end-date",
+    id: calendarId
   }));
 };
 var ToDate = React.forwardRef(ToDateElement);
@@ -11351,7 +11699,7 @@ var DateRangeField = function DateRangeField(_ref) {
     placeholder = _ref.placeholder,
     disabled = _ref.disabled,
     _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$weekStart = _ref.weekStart,
     weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
     maxDays = _ref.maxDays,
@@ -11377,7 +11725,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$18['date-range-field'], (_classnames = {}, _classnames[styles$18['date-range-field--invalid']] = hasError, _classnames[styles$18['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$19['date-range-field'], (_classnames = {}, _classnames[styles$19['date-range-field--invalid']] = hasError, _classnames[styles$19['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -11396,8 +11744,8 @@ var DateRangeField = function DateRangeField(_ref) {
     readOnly: readOnly,
     onChange: function onChange(val) {
       return controllers.onChange({
-        start: val,
-        end: end
+        start: val || undefined,
+        end: undefined
       });
     },
     onDayClick: function onDayClick() {
@@ -11423,7 +11771,7 @@ var DateRangeField = function DateRangeField(_ref) {
     onChange: function onChange(val) {
       return controllers.onChange({
         start: start,
-        end: val
+        end: val || undefined
       });
     },
     ref: toInputRef,
@@ -11698,7 +12046,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = React.forwardRef(TimeFieldElement);
 var TimeField = React.forwardRef(TimeFieldElement);
 
-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 styles$1a = {"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,
@@ -11803,7 +12151,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
   };
   var timeRangeDuration = getDuration(end, start, subtractDuration);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    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)),
+    className: classnames(styles$1a['time-range-field'], (_classnames = {}, _classnames[styles$1a['time-range-field--invalid']] = hasError, _classnames[styles$1a['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(TimeRangeStart, {
     startTime: startTime,
@@ -11831,7 +12179,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
   })));
 };
 
-var styles$1a = {"currency-field__mask-display":"_2K8Ob"};
+var styles$1b = {"currency-field__mask-display":"_2K8Ob"};
 
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
@@ -11898,7 +12246,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
       inputProps.onFocus(e);
     }
   }))), showMask && !!inputProps.value && React__default.createElement("div", {
-    className: styles$1a['currency-field__mask-display'],
+    className: styles$1b['currency-field__mask-display'],
     style: {
       marginLeft: displayPadding
     }
@@ -11994,7 +12342,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$1b = {"phone-field":"_1uJbR","phone-field__flag":"_Fc99X","phone-field__input--with-square-borders":"_1zowl"};
+var styles$1c = {"phone-field":"_1uJbR","phone-field__flag":"_Fc99X","phone-field__input--with-square-borders":"_1zowl"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -12003,7 +12351,8 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
     _onChange = _ref.onChange,
     _onBlur = _ref.onBlur,
     error = _ref.error,
-    onMenuInputFocus = _ref.onMenuInputFocus;
+    onMenuInputFocus = _ref.onMenuInputFocus,
+    defaultCountry = _ref.defaultCountry;
   var _useFormContext = useFormContext(),
     formik = _useFormContext.formik;
   var id = useFieldId({
@@ -12032,6 +12381,28 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
     }
   };
   var formikState = getFormikState(name, formik);
+  var phoneFieldValue = formik && formikState && !value ? formikState.value : value;
+  var _useProviderConfig = useProviderConfig(),
+    country = _useProviderConfig.country;
+  var parseMeta = function parseMeta(value) {
+    if (value === '') {
+      return {
+        country: defaultCountry || country,
+        phone: ''
+      };
+    }
+    var phone = libphonenumberJs.parsePhoneNumber(value);
+    var formatedPhone = new libphonenumberJs.AsYouType(phone.country).input(value.replace('+' + phone.countryCallingCode, ''));
+    return {
+      country: phone.country,
+      phone: formatedPhone
+    };
+  };
+  var _useState = React.useState(function () {
+      return parseMeta(phoneFieldValue || '');
+    }),
+    meta = _useState[0],
+    setMeta = _useState[1];
   if (formik && formikState) {
     controllers = _extends({}, controllers, {
       error: error ? controllers.error : formikState.error,
@@ -12056,11 +12427,14 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
       }
     });
   }
-  return controllers;
+  return _extends({}, controllers, {
+    metaData: meta,
+    changeMeta: setMeta
+  });
 };
 
 var usePhoneField = function usePhoneField(_ref) {
-  var _classnames, _controllers$value;
+  var _classnames;
   var autoFocus = _ref.autoFocus,
     disabled = _ref.disabled,
     error = _ref.error,
@@ -12074,14 +12448,16 @@ var usePhoneField = function usePhoneField(_ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     ref = _ref.ref,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    defaultCountry = _ref.defaultCountry;
   var controllers = usePhoneFieldControllers({
     error: error,
     id: id,
     name: name,
     onChange: onChange,
     onBlur: onBlur,
-    value: value
+    value: value,
+    defaultCountry: defaultCountry
   });
   var hasError = !!controllers.error;
   var inputProps = {
@@ -12100,7 +12476,7 @@ var usePhoneField = function usePhoneField(_ref) {
     ref: ref,
     size: 1,
     type: 'text',
-    value: (_controllers$value = controllers.value) === null || _controllers$value === void 0 ? void 0 : _controllers$value.phone
+    value: controllers.metaData.phone
   };
   var fieldProps = {
     caption: caption,
@@ -12112,7 +12488,9 @@ var usePhoneField = function usePhoneField(_ref) {
   return {
     inputProps: inputProps,
     fieldProps: fieldProps,
-    fieldValue: controllers.value
+    fieldValue: controllers.value,
+    metaData: controllers.metaData,
+    changeMeta: controllers.changeMeta
   };
 };
 
@@ -12855,7 +13233,7 @@ var COUNTRIES = {
 };
 var COUNTRY_CODES = Object.keys(COUNTRIES);
 
-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 styles$1d = {"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"};
 
@@ -12866,15 +13244,15 @@ var CountrySelector = function CountrySelector(_ref) {
     hasError = _ref.hasError,
     disabled = _ref.disabled;
   return React__default.createElement("div", {
-    className: classnames(styles$1c['country-selector'], (_classNames = {}, _classNames[styles$1c['country-selector--with-error']] = hasError, _classNames[styles$1c['country-selector--disabled']] = disabled, _classNames))
+    className: classnames(styles$1d['country-selector'], (_classNames = {}, _classNames[styles$1d['country-selector--with-error']] = hasError, _classNames[styles$1d['country-selector--disabled']] = disabled, _classNames))
   }, React__default.createElement(Dropdown, {
     trigger: React__default.createElement("div", {
-      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))
+      className: classnames(styles$1d['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$1d['country-selector__trigger--with-error']] = hasError, _classNames2[styles$1d['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$1c['country-selector__trigger-flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$1d['country-selector__trigger-flag'])
     }), React__default.createElement(IconChevronDown, {
       color: "grey-400",
       size: "medium"
@@ -12891,7 +13269,7 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$1c['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$1d['country-selector__flag'])
     }), React__default.createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }))));
 };
@@ -12908,14 +13286,15 @@ var PhoneField = function PhoneField(_ref) {
     })),
     inputProps = _usePhoneField.inputProps,
     fieldProps = _usePhoneField.fieldProps,
-    fieldValue = _usePhoneField.fieldValue;
-  var selectedCountry = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.country;
+    metaData = _usePhoneField.metaData,
+    changeMeta = _usePhoneField.changeMeta;
+  var selectedCountry = metaData.country;
   var handleCountryChange = function handleCountryChange(countryCode) {
-    inputProps.onChange({
+    changeMeta({
       country: countryCode,
-      phone: '',
-      internationalPhone: ''
+      phone: ''
     });
+    inputProps.onChange('');
     if (inputRef.current) {
       inputRef.current.focus();
     }
@@ -12923,11 +13302,22 @@ var PhoneField = function PhoneField(_ref) {
   var handlePhoneChange = function handlePhoneChange(e) {
     var formatedPhone = new libphonenumberJs.AsYouType(selectedCountry).input(e.target.value);
     e.target.value = formatedPhone;
-    inputProps.onChange({
+    var internationalPhone = '';
+    var parseError = null;
+    try {
+      var phoneNumber = libphonenumberJs.parsePhoneNumber(e.target.value, selectedCountry);
+      internationalPhone = phoneNumber.number;
+    } catch (error) {
+      parseError = error;
+    }
+    if (parseError && parseError.message === 'TOO_LONG') {
+      return;
+    }
+    changeMeta({
       country: selectedCountry,
-      phone: formatedPhone,
-      internationalPhone: ''
+      phone: formatedPhone
     });
+    inputProps.onChange(internationalPhone);
   };
   var handlePhoneBlur = function handlePhoneBlur(e) {
     var internationalPhone = '';
@@ -12937,33 +13327,11 @@ var PhoneField = function PhoneField(_ref) {
     } catch (error) {
       console.warn("PhoneField: " + error);
     }
-    var value = {
-      country: selectedCountry,
-      phone: e.target.value,
-      internationalPhone: internationalPhone
-    };
-    inputProps.onChange(value);
-    inputProps.onBlur(value);
+    inputProps.onChange(internationalPhone);
+    inputProps.onBlur(internationalPhone);
   };
-  React.useEffect(function () {
-    if (Boolean(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone) && (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.phone) === '') {
-      var formatedPhone = '';
-      try {
-        var phoneNumber = libphonenumberJs.parsePhoneNumber(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone);
-        formatedPhone = new libphonenumberJs.AsYouType(selectedCountry).input(phoneNumber.nationalNumber);
-      } catch (error) {
-        console.warn("PhoneField: " + error);
-      }
-      var value = {
-        country: selectedCountry,
-        phone: formatedPhone,
-        internationalPhone: fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone
-      };
-      inputProps.onChange(value);
-    }
-  }, [fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone]);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: styles$1b['phone-field']
+    className: styles$1c['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -12974,17 +13342,17 @@ var PhoneField = function PhoneField(_ref) {
       space: 4,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$1b['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$1c['country-selector__flag'])
     }), React__default.createElement("span", null, "+", libphonenumberJs.getCountryCallingCode(selectedCountry))) : "+" + libphonenumberJs.getCountryCallingCode(selectedCountry)
   }, React__default.createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames(inputProps.className, (_classNames = {}, _classNames[styles$1b['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames(inputProps.className, (_classNames = {}, _classNames[styles$1c['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));
 };
 
-var styles$1d = {"badge":"_1QLaK","badge--warning":"_qsFWw","badge--danger":"_359Cc","badge--success":"_2AOEK","badge--info":"_1mLjf","badge--numeric":"_2bb5N"};
+var styles$1e = {"badge":"_1QLaK","badge--warning":"_qsFWw","badge--danger":"_359Cc","badge--success":"_2AOEK","badge--info":"_1mLjf","badge--numeric":"_2bb5N"};
 
 var _excluded$2N = ["children", "theme", "title", "testId"];
 var BadgeElement = function BadgeElement(_ref, forwardedRef) {
@@ -13005,16 +13373,16 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", _extends({
-    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[styles$1d['badge--numeric']] = Number.isFinite(children), _classnames)),
+    className: classnames(styles$1e['badge'], (_classnames = {}, _classnames[styles$1e['badge--success']] = theme === 'success', _classnames[styles$1e['badge--danger']] = theme === 'danger', _classnames[styles$1e['badge--info']] = theme === 'info', _classnames[styles$1e['badge--warning']] = theme === 'warning', _classnames[styles$1e['badge--numeric']] = Number.isFinite(children), _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
 };
 var Badge = React.forwardRef(BadgeElement);
 
-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$1f = {"avatar":"_1X7La","avatar__container":"_ZiKiO","avatar--small":"_o5x6S","avatar__badge":"_NN8-D","avatar--medium":"_VxW5y","avatar--large":"_ec7jQ","avatar--extra-large":"_3VS00"};
 
-var styles$1f = {"avatar-image":"_bbI2F"};
+var styles$1g = {"avatar-image":"_bbI2F"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -13036,7 +13404,7 @@ var AvatarImage = function AvatarImage(_ref) {
     });
   }
   return React__default.createElement("div", {
-    className: styles$1f['avatar-image']
+    className: styles$1g['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -13101,9 +13469,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$1e['avatar__container'])
+    className: classnames(styles$1f['avatar__container'])
   }, React__default.createElement("div", {
-    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)),
+    className: classnames(styles$1f['avatar'], (_classnames = {}, _classnames[styles$1f['avatar--small']] = size === 'small', _classnames[styles$1f['avatar--medium']] = size === 'medium', _classnames[styles$1f['avatar--large']] = size === 'large', _classnames[styles$1f['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -13116,7 +13484,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$1e['avatar__badge']
+    className: styles$1f['avatar__badge']
   }, badge)));
 };
 
@@ -13129,7 +13497,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$1g = {"chip":"_3e7Of","chip--marketing":"_2ZlMr","chip--success":"_g3pvh","chip--upsell":"_3GeNC","chip--warning":"_2jbr_","chip--info":"_1rrIw","chip--danger":"_1fKe8"};
+var styles$1h = {"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;
@@ -13139,11 +13507,11 @@ var Chip = function Chip(_ref) {
     testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    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))
+    className: classnames(styles$1h['chip'], (_classnames = {}, _classnames[styles$1h['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$1h['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$1h['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$1h['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$1h['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$1h['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$1h = {"pill":"_1vA9B","pill--default":"_2mTVo","pill--success":"_3CYqE","pill--danger":"_1WFdK","pill--warning":"_1Mp_n","pill--info":"_10zFn"};
+var styles$1i = {"pill":"_1vA9B","pill--default":"_2mTVo","pill--success":"_3CYqE","pill--danger":"_1WFdK","pill--warning":"_1Mp_n","pill--info":"_10zFn"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -13161,7 +13529,7 @@ var Pill = function Pill(_ref) {
     testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    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))
+    className: classnames(styles$1i['pill'], (_classnames = {}, _classnames[styles$1i['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$1i['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$1i['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$1i['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$1i['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
@@ -13171,7 +13539,7 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-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 styles$1j = {"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;
@@ -13189,10 +13557,10 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   var _useModalContext = useModalContext(),
     isInsideModal = _useModalContext.isModalMounted;
   return React__default.createElement("div", {
-    className: classnames(styles$1i['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1i['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
+    className: classnames(styles$1j['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1j['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
     "data-testid": testId
   }, React__default.createElement("div", {
-    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))
+    className: classnames(styles$1j['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$1j['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$1j['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement(Text, {
@@ -13201,7 +13569,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$1i['empty-state-container-inline__body']
+    className: styles$1j['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
     marginTop: 12
@@ -13212,7 +13580,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }), caption && React__default.createElement(Text, {
     as: "caption"
   }, caption))), React__default.createElement("div", {
-    className: styles$1i['empty-state-container-inline__image']
+    className: styles$1j['empty-state-container-inline__image']
   }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
@@ -13247,7 +13615,7 @@ var EmptyStateContainer = function EmptyStateContainer(_ref) {
   });
 };
 
-var styles$1j = {"paywall--as-card":"_3kFM9","paywall--as-card--centered":"_3kmTB"};
+var styles$1k = {"paywall--as-card":"_3kFM9","paywall--as-card--centered":"_3kmTB"};
 
 var Paywall = function Paywall(props) {
   var header = props.header,
@@ -13277,13 +13645,13 @@ var Paywall = function Paywall(props) {
       onClose: onClose,
       actions: onClose ? [] : undefined
     }, React__default.createElement("div", {
-      className: classnames(styles$1j['paywall--as-card'], (_classnames = {}, _classnames[styles$1j['paywall--as-card--centered']] = size === 'small', _classnames))
+      className: classnames(styles$1k['paywall--as-card'], (_classnames = {}, _classnames[styles$1k['paywall--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));
   }
   return emptyStateContainer;
 };
 
-var styles$1k = {"empty-state--as-card":"_DrBEi","empty-state--as-card--centered":"_3YbH7"};
+var styles$1l = {"empty-state--as-card":"_DrBEi","empty-state--as-card--centered":"_3YbH7"};
 
 var EmptyState = function EmptyState(props) {
   var header = props.header,
@@ -13312,13 +13680,15 @@ var EmptyState = function EmptyState(props) {
       onClose: onClose,
       actions: onClose ? [] : undefined
     }, React__default.createElement("div", {
-      className: classnames(styles$1k['empty-state--as-card'], (_classnames = {}, _classnames[styles$1k['empty-state--as-card--centered']] = size === 'small', _classnames))
+      className: classnames(styles$1l['empty-state--as-card'], (_classnames = {}, _classnames[styles$1l['empty-state--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));
   }
   return emptyStateContainer;
 };
 
 exports.Accordion = Accordion;
+exports.ActionList = ActionList;
+exports.ActionListItem = ActionListItem;
 exports.AsyncSelectField = AsyncSelectField$1;
 exports.Avatar = Avatar;
 exports.Badge = Badge;