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

package/dist/index.modern.js

@@ -5898,15 +5898,33 @@ var ToastContainer = function ToastContainer(_ref2) {
   });
 };
 
+var initialValue$1 = {
+  country: 'US'
+};
+var ProviderConfigContext = createContext(initialValue$1);
+var useProviderConfig = function useProviderConfig() {
+  var context = 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"};
@@ -6115,12 +6133,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 = createContext(initialValue$1);
+var Context = createContext(initialValue$2);
 var useDataTableContext = function useDataTableContext() {
   var context = useContext(Context);
   if (!context) {
@@ -8123,7 +8141,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();
@@ -8183,7 +8202,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,
@@ -8200,7 +8219,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) {
@@ -8213,7 +8234,7 @@ var Calendar$1 = function Calendar(_ref) {
     role: "dialog"
   }, mode === CALENDAR_MODE.DAY ? React__default.createElement(DayPicker, _extends({
     mode: "single",
-    selected: selected,
+    selected: selected || undefined,
     captionLayout: "dropdown-buttons"
   }, defaultProps)) : React__default.createElement(DayPicker, _extends({
     mode: "range",
@@ -9205,6 +9226,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,
@@ -9284,7 +9407,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) {
@@ -9294,7 +9417,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$R['custom-control'],
+    className: styles$S['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -9462,7 +9585,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) {
@@ -9521,15 +9644,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(components.Menu, _extends({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$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",
@@ -9670,14 +9793,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,
@@ -9713,9 +9836,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',
@@ -9768,7 +9891,7 @@ var DateFilterDisplay = 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
@@ -9776,7 +9899,7 @@ var DateFilterDisplay = 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"
@@ -9787,7 +9910,7 @@ var DateFilterDisplay = 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;
@@ -9816,7 +9939,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);
     }
@@ -9845,7 +9968,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, {
@@ -9885,7 +10008,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,
@@ -9899,7 +10022,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;
@@ -9909,16 +10032,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;
@@ -9932,12 +10055,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"
@@ -9956,7 +10079,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;
@@ -9990,7 +10113,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
@@ -10028,12 +10151,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%';
@@ -10061,7 +10184,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,
@@ -10070,7 +10193,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 = useRef(null);
@@ -10141,7 +10264,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)) {
@@ -10174,7 +10297,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) {
@@ -10203,7 +10326,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = 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,
@@ -10289,7 +10412,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,
@@ -10309,7 +10432,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));
   })));
 };
@@ -10351,9 +10474,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;
@@ -10370,7 +10493,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,
@@ -10381,7 +10504,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",
@@ -10390,13 +10513,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,
@@ -10416,7 +10539,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,
@@ -10427,11 +10550,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)));
@@ -10561,7 +10684,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, {
@@ -10574,16 +10697,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, {
@@ -10662,11 +10785,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",
@@ -10678,7 +10801,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",
@@ -10784,7 +10907,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) {
@@ -10800,7 +10923,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$17['custom-list']
+    className: styles$18['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
@@ -10913,9 +11036,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 : startOfDay$1(newValue));
+        formik.setFieldValue(name, newValue === undefined || !isDate(newValue) ? null : startOfDay$1(newValue));
       },
-      onBlur: _onBlur ? controllers.onBlur : function () {
+      onBlur: _onBlur ? function () {
+        formik.setFieldTouched(name);
+        controllers.onBlur();
+      } : function () {
         formik.setFieldTouched(name);
       }
     });
@@ -10925,6 +11051,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,
@@ -10947,6 +11184,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 = useRef(null);
   var _useState = useState(false),
     showCalendar = _useState[0],
@@ -10959,17 +11198,15 @@ var DateField = function DateField(_ref) {
     onBlur: onBlur,
     error: error
   });
-  var _useState2 = 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,
@@ -10989,10 +11226,11 @@ var DateField = function DateField(_ref) {
     return undefined;
   };
   useEffect(function () {
-    if (!controllers.value && !!inputValue) {
-      setInputValue('');
+    if (!controllers.value && inputRef.current) {
+      inputRef.current.value = '';
     }
   }, [controllers.value]);
+  var selectedDate = getSelectedDate();
   var onClickOutside = useCallback(function () {
     return setShowCalendar(false);
   }, [setShowCalendar]);
@@ -11011,31 +11249,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) {
@@ -11043,7 +11297,9 @@ var DateField = function DateField(_ref) {
     },
     initialMonth: initialMonth,
     onMonthChange: onMonthChange,
-    weekStart: weekStart
+    weekStart: weekStart,
+    key: selectedDate ? formatDate(selectedDate, format) : '',
+    id: calendarId
   }));
 };
 
@@ -11105,7 +11361,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"};
 
@@ -11122,7 +11378,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 = useState(null),
@@ -11160,13 +11417,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) {
@@ -11229,6 +11489,8 @@ var FromDate = function FromDate(_ref) {
     showCalendar = _useState[0],
     setShowCalendar = _useState[1];
   var inputRef = useRef(null);
+  var maskfy = useFieldMask(format);
+  var calendarId = name + "-start-calendar";
   var disabledDaysChecks = end ? [{
     after: end
   }] : [];
@@ -11255,13 +11517,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,
@@ -11269,7 +11561,8 @@ var FromDate = function FromDate(_ref) {
     disabledDays: disabledDaysChecks,
     weekStart: weekStart,
     maxDays: maxDays,
-    mode: "start-date"
+    mode: "start-date",
+    id: calendarId
   }));
 };
 
@@ -11284,12 +11577,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 = useState(false),
     showCalendar = _useState[0],
     setShowCalendar = _useState[1];
+  var maskfy = useFieldMask(format);
+  var calendarId = name + "-start-calendar";
+  var inputRef = ref;
+  useEffect(function () {
+    if (!inputRef || !inputRef.current) {
+      return;
+    }
+    if (!end && inputRef.current.value !== '') {
+      inputRef.current.value = '';
+    }
+  }, [end, inputRef]);
   var disabledDaysChecks = start ? [{
     before: start
   }] : [];
@@ -11300,6 +11604,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 = useCallback(function () {
     return setShowCalendar(false);
   }, [setShowCalendar]);
@@ -11311,14 +11627,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,
@@ -11326,7 +11673,8 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     disabledDays: disabledDaysChecks,
     weekStart: weekStart,
     maxDays: maxDays,
-    mode: "end-date"
+    mode: "end-date",
+    id: calendarId
   }));
 };
 var ToDate = forwardRef(ToDateElement);
@@ -11347,7 +11695,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,
@@ -11373,7 +11721,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",
@@ -11392,8 +11740,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() {
@@ -11419,7 +11767,7 @@ var DateRangeField = function DateRangeField(_ref) {
     onChange: function onChange(val) {
       return controllers.onChange({
         start: start,
-        end: val
+        end: val || undefined
       });
     },
     ref: toInputRef,
@@ -11694,7 +12042,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = forwardRef(TimeFieldElement);
 var TimeField = 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,
@@ -11799,7 +12147,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,
@@ -11827,7 +12175,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;
@@ -11894,7 +12242,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
     }
@@ -11990,7 +12338,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,
@@ -11999,7 +12347,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({
@@ -12028,6 +12377,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 = parsePhoneNumber(value);
+    var formatedPhone = new AsYouType(phone.country).input(value.replace('+' + phone.countryCallingCode, ''));
+    return {
+      country: phone.country,
+      phone: formatedPhone
+    };
+  };
+  var _useState = useState(function () {
+      return parseMeta(phoneFieldValue || '');
+    }),
+    meta = _useState[0],
+    setMeta = _useState[1];
   if (formik && formikState) {
     controllers = _extends({}, controllers, {
       error: error ? controllers.error : formikState.error,
@@ -12052,11 +12423,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,
@@ -12070,14 +12444,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 = {
@@ -12096,7 +12472,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,
@@ -12108,7 +12484,9 @@ var usePhoneField = function usePhoneField(_ref) {
   return {
     inputProps: inputProps,
     fieldProps: fieldProps,
-    fieldValue: controllers.value
+    fieldValue: controllers.value,
+    metaData: controllers.metaData,
+    changeMeta: controllers.changeMeta
   };
 };
 
@@ -12851,7 +13229,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"};
 
@@ -12862,15 +13240,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"
@@ -12887,7 +13265,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)));
   }))));
 };
@@ -12904,14 +13282,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();
     }
@@ -12919,11 +13298,22 @@ var PhoneField = function PhoneField(_ref) {
   var handlePhoneChange = function handlePhoneChange(e) {
     var formatedPhone = new AsYouType(selectedCountry).input(e.target.value);
     e.target.value = formatedPhone;
-    inputProps.onChange({
+    var internationalPhone = '';
+    var parseError = null;
+    try {
+      var phoneNumber = 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 = '';
@@ -12933,33 +13323,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);
   };
-  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 = parsePhoneNumber(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone);
-        formatedPhone = new 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,
@@ -12970,17 +13338,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, "+", getCountryCallingCode(selectedCountry))) : "+" + 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) {
@@ -13001,16 +13369,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 = 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,
@@ -13032,7 +13400,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
@@ -13097,9 +13465,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
     },
@@ -13112,7 +13480,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)));
 };
 
@@ -13125,7 +13493,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;
@@ -13135,11 +13503,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',
@@ -13157,7 +13525,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);
 };
 
@@ -13167,7 +13535,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;
@@ -13185,10 +13553,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, {
@@ -13197,7 +13565,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
@@ -13208,7 +13576,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),
@@ -13243,7 +13611,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,
@@ -13273,13 +13641,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,
@@ -13308,11 +13676,11 @@ 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;
 };
 
-export { Accordion, AsyncSelectField$1 as AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar$1 as Calendar, CalloutCard, Card$1 as Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable$1 as DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal$1 as HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls$1 as PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField$1 as SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
+export { Accordion, ActionList, ActionListItem, AsyncSelectField$1 as AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar$1 as Calendar, CalloutCard, Card$1 as Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable$1 as DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal$1 as HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls$1 as PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField$1 as SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
 //# sourceMappingURL=index.modern.js.map