@kaizen/components 1.19.1 → 1.20.0

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SuccessIcon = require('./SuccessIcon-03b801a8.js');
+var SuccessIcon = require('./SuccessIcon-4baf498a.js');
 var React = require('react');
 var classnames = require('classnames');
 var draftBadge = require('@kaizen/draft-badge');
@@ -8,6 +8,11 @@ var loadingSpinner = require('@kaizen/loading-spinner');
 var reactFocusOn = require('react-focus-on');
 var reactPopper = require('react-popper');
 var datePicker = require('@kaizen/date-picker');
+var formatDateAsNumeral = require('@kaizen/date-picker/src/utils/formatDateAsNumeral');
+var isDisabledDate = require('@kaizen/date-picker/src/utils/isDisabledDate');
+var isSelectingDayInCalendar = require('@kaizen/date-picker/src/utils/isSelectingDayInCalendar');
+var parseDateFromNumeralFormatValue = require('@kaizen/date-picker/src/utils/parseDateFromNumeralFormatValue');
+var parseDateFromTextFormatValue = require('@kaizen/date-picker/src/utils/parseDateFromTextFormatValue');
 var draftForm = require('@kaizen/draft-form');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var validateDate$1 = require('@kaizen/date-picker/src/utils/validateDate');
@@ -15,9 +20,7 @@ var draftTooltip = require('@kaizen/draft-tooltip');
 var getLocale = require('@kaizen/date-picker/src/utils/getLocale');
 var formatDateAsText = require('@kaizen/date-picker/src/utils/formatDateAsText');
 var Calendar = require('@kaizen/date-picker/src/_subcomponents/Calendar');
-var useDateInputHandlers = require('@kaizen/date-picker/src/hooks/useDateInputHandlers');
 var isInvalidDate = require('@kaizen/date-picker/src/utils/isInvalidDate');
-var parseDateFromTextFormatValue = require('@kaizen/date-picker/src/utils/parseDateFromTextFormatValue');
 var a11y = require('@kaizen/a11y');
 var DateInput = require('@kaizen/date-picker/src/_subcomponents/DateInput');
 var listbox = require('@react-aria/listbox');
@@ -41,8 +44,11 @@ var reactIntl = require('react-intl');
 var designTokens = require('@kaizen/design-tokens');
 var draftTag = require('@kaizen/draft-tag');
 var brand = require('@kaizen/brand');
+var draftIllustration = require('@kaizen/draft-illustration');
+var hostedAssets = require('@kaizen/hosted-assets');
+var responsive = require('@kaizen/responsive');
 
-var styles$G = {"button":"GenericButton-module_button__6UapT","reversed":"GenericButton-module_reversed__sRTZQ","working":"GenericButton-module_working__gROAQ","content":"GenericButton-module_content__h36L5","default":"GenericButton-module_default__yF6Jf","primary":"GenericButton-module_primary__CSbSO","destructive":"GenericButton-module_destructive__Y8pS7","secondary":"GenericButton-module_secondary__nZsK3","small":"GenericButton-module_small__IcZLk","container":"GenericButton-module_container__e4NCq","label":"GenericButton-module_label__-ejZ4","fullWidth":"GenericButton-module_fullWidth__X-uKZ","iconWrapper":"GenericButton-module_iconWrapper__U5NdE","additionalContentWrapper":"GenericButton-module_additionalContentWrapper__N1-lS","loadingSpinner":"GenericButton-module_loadingSpinner__1iVkw","centeredLoadingSpinner":"GenericButton-module_centeredLoadingSpinner__zsCEe","hidden":"GenericButton-module_hidden__Bz0T6"};
+var styles$I = {"button":"GenericButton-module_button__6UapT","reversed":"GenericButton-module_reversed__sRTZQ","working":"GenericButton-module_working__gROAQ","content":"GenericButton-module_content__h36L5","default":"GenericButton-module_default__yF6Jf","primary":"GenericButton-module_primary__CSbSO","destructive":"GenericButton-module_destructive__Y8pS7","secondary":"GenericButton-module_secondary__nZsK3","small":"GenericButton-module_small__IcZLk","container":"GenericButton-module_container__e4NCq","label":"GenericButton-module_label__-ejZ4","fullWidth":"GenericButton-module_fullWidth__X-uKZ","iconWrapper":"GenericButton-module_iconWrapper__U5NdE","additionalContentWrapper":"GenericButton-module_additionalContentWrapper__N1-lS","loadingSpinner":"GenericButton-module_loadingSpinner__1iVkw","centeredLoadingSpinner":"GenericButton-module_centeredLoadingSpinner__zsCEe","hidden":"GenericButton-module_hidden__Bz0T6"};
 
 var getCustomProps = function(props) {
   var keys = Object.keys(props).filter(function(k) {
@@ -72,7 +78,7 @@ var GenericButton = React.forwardRef(function(props, ref) {
     }
     return renderButton(props, buttonRef);
   };
-  return React.createElement("span", { className: classnames(styles$G.container, props.fullWidth && styles$G.fullWidth), "aria-live": "polite" }, determineButtonRenderer());
+  return React.createElement("span", { className: classnames(styles$I.container, props.fullWidth && styles$I.fullWidth), "aria-live": "polite" }, determineButtonRenderer());
 });
 GenericButton.defaultProps = {
   iconPosition: "start",
@@ -124,12 +130,12 @@ var renderLink = function(props, ref) {
 };
 var buttonClass = function(props) {
   var isDefault = !props.primary && !props.destructive && !props.secondary;
-  return classnames(styles$G.button, isDefault && styles$G["default"], props.primary && styles$G.primary, props.destructive && styles$G.destructive, props.secondary && styles$G.secondary, props.size && styles$G[props.size], props.reversed && styles$G.reversed, props.iconButton && styles$G.iconButton, props.working && styles$G.working, (props.directionalLink || props.paginationLink) && styles$G.circleButton, props.directionalLink && styles$G.directionalLink, props.paginationLink && styles$G.paginationLink, props.isActive && styles$G.isPaginationLinkActive, props.classNameOverride);
+  return classnames(styles$I.button, isDefault && styles$I["default"], props.primary && styles$I.primary, props.destructive && styles$I.destructive, props.secondary && styles$I.secondary, props.size && styles$I[props.size], props.reversed && styles$I.reversed, props.iconButton && styles$I.iconButton, props.working && styles$I.working, (props.directionalLink || props.paginationLink) && styles$I.circleButton, props.directionalLink && styles$I.directionalLink, props.paginationLink && styles$I.paginationLink, props.isActive && styles$I.isPaginationLinkActive, props.classNameOverride);
 };
 var renderLoadingSpinner = function() {
   return React.createElement(
     "div",
-    { className: styles$G.loadingSpinner },
+    { className: styles$I.loadingSpinner },
     React.createElement(loadingSpinner.LoadingSpinner, { accessibilityLabel: "", size: "sm" })
   );
 };
@@ -138,16 +144,16 @@ var renderWorkingContent = function(props) {
     return React.createElement(
       React.Fragment,
       null,
-      React.createElement("span", { className: styles$G.hidden, "aria-hidden": "true" }, renderDefaultContent(props)),
-      React.createElement("span", { className: styles$G.centeredLoadingSpinner }, renderLoadingSpinner())
+      React.createElement("span", { className: styles$I.hidden, "aria-hidden": "true" }, renderDefaultContent(props)),
+      React.createElement("span", { className: styles$I.centeredLoadingSpinner }, renderLoadingSpinner())
     );
   }
   return React.createElement(
     React.Fragment,
     null,
     props.iconPosition !== "end" && renderLoadingSpinner(),
-    React.createElement("span", { className: styles$G.label }, props.workingLabel),
-    props.additionalContent && React.createElement("span", { className: styles$G.additionalContentWrapper }, props.additionalContent),
+    React.createElement("span", { className: styles$I.label }, props.workingLabel),
+    props.additionalContent && React.createElement("span", { className: styles$I.additionalContentWrapper }, props.additionalContent),
     props.iconPosition === "end" && renderLoadingSpinner()
   );
 };
@@ -156,8 +162,8 @@ var renderDefaultContent = function(props) {
     React.Fragment,
     null,
     props.icon && props.iconPosition !== "end" && renderIcon(props.icon),
-    (!props.icon || !props.iconButton) && React.createElement("span", { className: styles$G.label }, props.label),
-    props.additionalContent && React.createElement("span", { className: styles$G.additionalContentWrapper }, props.additionalContent),
+    (!props.icon || !props.iconButton) && React.createElement("span", { className: styles$I.label }, props.label),
+    props.additionalContent && React.createElement("span", { className: styles$I.additionalContentWrapper }, props.additionalContent),
     renderBadge(props),
     props.icon && props.iconPosition === "end" && renderIcon(props.icon)
   );
@@ -172,10 +178,10 @@ var renderBadge = function(props) {
   return React.createElement(draftBadge.Badge, { variant, reversed }, text);
 };
 var renderContent = function(props) {
-  return React.createElement("span", { className: styles$G.content }, props.working ? renderWorkingContent(props) : renderDefaultContent(props));
+  return React.createElement("span", { className: styles$I.content }, props.working ? renderWorkingContent(props) : renderDefaultContent(props));
 };
 var renderIcon = function(icon) {
-  return React.createElement("span", { className: styles$G.iconWrapper }, icon);
+  return React.createElement("span", { className: styles$I.iconWrapper }, icon);
 };
 var generateAriaLabel = function(props) {
   if (props.working && props.workingLabelHidden) {
@@ -210,19 +216,19 @@ var ClearIcon = function(props) {
   );
 };
 
-var styles$F = {"clearButton":"ClearButton-module_clearButton__CSOIc","default":"ClearButton-module_default__lBJxw","reversed":"ClearButton-module_reversed__0I2DC"};
+var styles$H = {"clearButton":"ClearButton-module_clearButton__CSOIc","default":"ClearButton-module_default__lBJxw","reversed":"ClearButton-module_reversed__0I2DC"};
 
 var ClearButton$1 = function(_a) {
   var classNameOverride = _a.classNameOverride, _b = _a.isReversed, isReversed = _b === void 0 ? false : _b, restProps = SuccessIcon.__rest(_a, ["classNameOverride", "isReversed"]);
   return React.createElement(
     "button",
-    SuccessIcon.__assign({ type: "button", "aria-label": "clear", className: classnames(styles$F.clearButton, isReversed ? styles$F.reversed : styles$F["default"], classNameOverride) }, restProps),
+    SuccessIcon.__assign({ type: "button", "aria-label": "clear", className: classnames(styles$H.clearButton, isReversed ? styles$H.reversed : styles$H["default"], classNameOverride) }, restProps),
     React.createElement(ClearIcon, { role: "presentation" })
   );
 };
 ClearButton$1.displayName = "ClearButton";
 
-var styles$E = {"filterPopover":"FilterPopover-module_filterPopover__OgOEM"};
+var styles$G = {"filterPopover":"FilterPopover-module_filterPopover__OgOEM"};
 
 var FilterPopover = function(_a) {
   var children = _a.children, referenceElement = _a.referenceElement, popperOptions = _a.popperOptions, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "referenceElement", "popperOptions", "classNameOverride"]);
@@ -235,7 +241,7 @@ var FilterPopover = function(_a) {
       }
     }
   ], placement: "bottom-start" }, popperOptions)), popperStyles = _c.styles, popperAttributes = _c.attributes;
-  return React.createElement("div", SuccessIcon.__assign({ ref: setPopperElement, style: popperStyles === null || popperStyles === void 0 ? void 0 : popperStyles.popper }, popperAttributes === null || popperAttributes === void 0 ? void 0 : popperAttributes.popper, { className: classnames(styles$E.filterPopover, classNameOverride), role: "dialog", "aria-modal": "true" }, restProps), children);
+  return React.createElement("div", SuccessIcon.__assign({ ref: setPopperElement, style: popperStyles === null || popperStyles === void 0 ? void 0 : popperStyles.popper }, popperAttributes === null || popperAttributes === void 0 ? void 0 : popperAttributes.popper, { className: classnames(styles$G.filterPopover, classNameOverride), role: "dialog", "aria-modal": "true" }, restProps), children);
 };
 FilterPopover.displayName = "FilterPopover";
 
@@ -280,11 +286,11 @@ var Filter = function(_a) {
 };
 Filter.displayName = "Filter";
 
-var styles$D = {"filterContents":"FilterContents-module_filterContents__uNUpd"};
+var styles$F = {"filterContents":"FilterContents-module_filterContents__uNUpd"};
 
 var FilterContents = function(_a) {
   var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("div", SuccessIcon.__assign({ className: classnames(styles$D.filterContents, classNameOverride) }, restProps), children);
+  return React.createElement("div", SuccessIcon.__assign({ className: classnames(styles$F.filterContents, classNameOverride) }, restProps), children);
 };
 FilterContents.displayName = "FilterContents";
 
@@ -507,15 +513,65 @@ var transformDateToInputValue = function(date, disabledDays, locale) {
   return date ? datePicker.formatDateAsText(date, disabledDays, locale) : "";
 };
 
-var styles$C = {"labelledMessage":"LabelledMessage-module_labelledMessage__8hqzY","labelSeparator":"LabelledMessage-module_labelSeparator__f3zFN"};
+var useDateInputHandlers = function(_a) {
+  var locale = _a.locale, disabledDays = _a.disabledDays, setInputValue = _a.setInputValue, onDateChange = _a.onDateChange, onDateSubmit = _a.onDateSubmit, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
+  var isValidDate = function(date) {
+    return !datePicker.isInvalidDate(date) && !isDisabledDate.isDisabledDate(date, disabledDays);
+  };
+  var handleChange = function(e) {
+    setInputValue(e.currentTarget.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+  var handleFocus = function(e) {
+    var date = parseDateFromTextFormatValue.parseDateFromTextFormatValue(e.currentTarget.value, locale);
+    if (!datePicker.isInvalidDate(date)) {
+      var newInputValue = formatDateAsNumeral.formatDateAsNumeral(date, locale);
+      setInputValue(newInputValue);
+    }
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  };
+  var handleBlur = function(e) {
+    if (isSelectingDayInCalendar.isSelectingDayInCalendar(e.relatedTarget))
+      return;
+    if (e.currentTarget.value === "") {
+      onDateChange(void 0);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+      return;
+    }
+    var date = parseDateFromNumeralFormatValue.parseDateFromNumeralFormatValue(e.currentTarget.value, locale);
+    if (isValidDate(date)) {
+      var newInputValue = datePicker.formatDateAsText(date, disabledDays, locale);
+      setInputValue(newInputValue);
+    }
+    onDateChange(date);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+  var handleKeyDown = function(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      var date = parseDateFromNumeralFormatValue.parseDateFromNumeralFormatValue(e.currentTarget.value, locale);
+      onDateChange(date);
+      onDateSubmit === null || onDateSubmit === void 0 ? void 0 : onDateSubmit(date);
+    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+  };
+  return {
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  };
+};
+
+var styles$E = {"labelledMessage":"LabelledMessage-module_labelledMessage__8hqzY","labelSeparator":"LabelledMessage-module_labelSeparator__f3zFN"};
 
 var LabelledMessage = function(_a) {
   var label = _a.label, message = _a.message;
   return React.createElement(
     "span",
-    { className: styles$C.labelledMessage },
+    { className: styles$E.labelledMessage },
     React.createElement("span", null, label),
-    React.createElement("span", { className: styles$C.labelSeparator }, ":"),
+    React.createElement("span", { className: styles$E.labelSeparator }, ":"),
     React.createElement("span", null, message)
   );
 };
@@ -526,7 +582,7 @@ var formatDescriptionInputFormat = function(locale) {
   return (_a = locale.formatLong) === null || _a === void 0 ? void 0 : _a.date({ width: "short" }).toLowerCase();
 };
 
-var styles$B = {"dateInputDescription":"DateInputDescription-module_dateInputDescription__-ONK8","dateInputFormatContainer":"DateInputDescription-module_dateInputFormatContainer__6hP6K"};
+var styles$D = {"dateInputDescription":"DateInputDescription-module_dateInputDescription__-ONK8","dateInputFormatContainer":"DateInputDescription-module_dateInputFormatContainer__6hP6K"};
 
 var DateInputDescription = function(_a) {
   var description = _a.description, locale = _a.locale;
@@ -540,11 +596,11 @@ var DateInputDescription = function(_a) {
   if (hasCustomDescription) {
     return React.createElement(
       "span",
-      { className: styles$B.dateInputDescription },
+      { className: styles$D.dateInputDescription },
       React.createElement("span", null, description),
       React.createElement(
         "span",
-        { className: styles$B.dateInputFormatContainer },
+        { className: styles$D.dateInputFormatContainer },
         "(",
         React.createElement(LabelledMessage, { label: translatedInputFormatMessage, message: formatDescriptionInputFormat(locale) }),
         ")"
@@ -555,7 +611,7 @@ var DateInputDescription = function(_a) {
 };
 DateInputDescription.displayName = "DateInputDescription";
 
-var styles$A = {"disabled":"DateInputField-module_disabled__Lf9TS"};
+var styles$C = {"disabled":"DateInputField-module_disabled__Lf9TS"};
 
 var DateInputField = React.forwardRef(function(_a, ref) {
   var id = _a.id, labelText = _a.labelText, description = _a.description, disabled = _a.disabled, _b = _a.isReversed, isReversed = _b === void 0 ? false : _b, validationMessage = _a.validationMessage, locale = _a.locale, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["id", "labelText", "description", "disabled", "isReversed", "validationMessage", "locale", "classNameOverride"]);
@@ -568,12 +624,12 @@ var DateInputField = React.forwardRef(function(_a, ref) {
     null,
     React.createElement(datePicker.DateInput, SuccessIcon.__assign({ ref, id, labelText: labelText || "Date", "aria-describedby": inputDescribedBy, "aria-errormessage": errorMessageId, "aria-invalid": dateIsInvalid, autoComplete: "off", disabled, status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status, classNameOverride }, restProps)),
     validationMessage && React.createElement(draftForm.FieldMessage, { id: errorMessageId, message: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.message, status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status, reversed: isReversed }),
-    React.createElement(draftForm.FieldMessage, { id: descriptionId, message: React.createElement(DateInputDescription, { description, locale }), reversed: isReversed, classNameOverride: disabled ? styles$A.disabled : void 0 })
+    React.createElement(draftForm.FieldMessage, { id: descriptionId, message: React.createElement(DateInputDescription, { description, locale }), reversed: isReversed, classNameOverride: disabled ? styles$C.disabled : void 0 })
   );
 });
 DateInputField.displayName = "DateInputField";
 
-var filterDatePickerFieldReducer = function(state, action) {
+var filterDatePickerFieldReducer$1 = function(state, action) {
   switch (action.type) {
     case "update_selected_date":
       return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { selectedDate: action.date, inputValue: action.inputValue === void 0 ? state.inputValue : action.inputValue, startMonth: action.date && !datePicker.isInvalidDate(action.date) ? action.date : /* @__PURE__ */ new Date() });
@@ -584,7 +640,7 @@ var filterDatePickerFieldReducer = function(state, action) {
   }
 };
 
-var styles$z = {"filterDatePickerField":"FilterDatePickerField-module_filterDatePickerField__KvWHu"};
+var styles$B = {"filterDatePickerField":"FilterDatePickerField-module_filterDatePickerField__KvWHu"};
 
 var FilterDatePickerField = function(_a) {
   var id = _a.id, inputProps = _a.inputProps, propsLocale = _a.locale, defaultMonth = _a.defaultMonth, selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, onDateSubmit = _a.onDateSubmit, disabledDays = _a.disabledDays, description = _a.description, validationMessage = _a.validationMessage, onValidate = _a.onValidate, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["id", "inputProps", "locale", "defaultMonth", "selectedDate", "onDateChange", "onDateSubmit", "disabledDays", "description", "validationMessage", "onValidate", "classNameOverride"]);
@@ -602,7 +658,7 @@ var FilterDatePickerField = function(_a) {
     dateValidation.updateValidation(validationResponse);
     return newDate;
   };
-  var _b = React.useReducer(filterDatePickerFieldReducer, {
+  var _b = React.useReducer(filterDatePickerFieldReducer$1, {
     selectedDate,
     inputValue: transformDateToInputValue(selectedDate, disabledDays, locale) || "",
     startMonth: selectedDate && !datePicker.isInvalidDate(selectedDate) ? selectedDate : defaultMonth || /* @__PURE__ */ new Date()
@@ -610,7 +666,7 @@ var FilterDatePickerField = function(_a) {
   var handleDateChange = function(date) {
     onDateChange(date);
   };
-  var inputDateHandlers = datePicker.useDateInputHandlers(SuccessIcon.__assign({ locale, disabledDays, setInputValue: function(value) {
+  var inputDateHandlers = useDateInputHandlers(SuccessIcon.__assign({ locale, disabledDays, setInputValue: function(value) {
     dispatch({
       type: "update_input_field",
       inputValue: value
@@ -621,10 +677,11 @@ var FilterDatePickerField = function(_a) {
       type: "update_selected_date",
       date: newDate
     });
-    if (newDate && !datePicker.isInvalidDate(newDate)) {
-      onDateSubmit === null || onDateSubmit === void 0 ? void 0 : onDateSubmit(newDate);
-    }
     handleDateChange(newDate);
+  }, onDateSubmit: function(date) {
+    if (!datePicker.isInvalidDate(date)) {
+      onDateSubmit === null || onDateSubmit === void 0 ? void 0 : onDateSubmit(date);
+    }
   } }, inputProps));
   var handleCalendarSelect = function(date) {
     var inputValue = transformDateToInputValue(date, disabledDays, locale);
@@ -645,7 +702,7 @@ var FilterDatePickerField = function(_a) {
   }, []);
   return React.createElement(
     "div",
-    SuccessIcon.__assign({ className: classnames(styles$z.filterDatePickerField, classNameOverride) }, restProps),
+    SuccessIcon.__assign({ className: classnames(styles$B.filterDatePickerField, classNameOverride) }, restProps),
     React.createElement(DateInputField, SuccessIcon.__assign({ id: "".concat(id, "--input"), locale, value: state.inputValue, description, validationMessage: dateValidation.validationMessage }, inputDateHandlers, inputProps)),
     React.createElement(datePicker.CalendarSingle, { disabled: disabledDays, locale, selected: state.selectedDate, onSelect: handleCalendarSelect, month: state.startMonth, onMonthChange: function(value) {
       return dispatch({ type: "navigate_months", date: value });
@@ -751,15 +808,15 @@ var isRefObject = function(ref) {
   return ref !== null && "current" in ref;
 };
 
-var styles$y = {"filterButtonBase":"FilterButtonBase-module_filterButtonBase__505sK"};
+var styles$A = {"filterButtonBase":"FilterButtonBase-module_filterButtonBase__505sK"};
 
 var FilterButtonBase = React.forwardRef(function(_a, ref) {
   var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("button", SuccessIcon.__assign({ ref, type: "button", className: classnames(styles$y.filterButtonBase, classNameOverride) }, restProps), children);
+  return React.createElement("button", SuccessIcon.__assign({ ref, type: "button", className: classnames(styles$A.filterButtonBase, classNameOverride) }, restProps), children);
 });
 FilterButtonBase.displayName = "FilterButtonBase";
 
-var styles$x = {"filterButton":"FilterButton-module_filterButton__Q2dMX","labelContainer":"FilterButton-module_labelContainer__5G-MD","hasSelectedValues":"FilterButton-module_hasSelectedValues__dyQkL","labelSeparator":"FilterButton-module_labelSeparator__xrkAx"};
+var styles$z = {"filterButton":"FilterButton-module_filterButton__Q2dMX","labelContainer":"FilterButton-module_labelContainer__5G-MD","hasSelectedValues":"FilterButton-module_hasSelectedValues__dyQkL","labelSeparator":"FilterButton-module_labelSeparator__xrkAx"};
 
 var FilterButton = React.forwardRef(function(_a, ref) {
   var label = _a.label, selectedValue = _a.selectedValue, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["label", "selectedValue", "isOpen", "classNameOverride"]);
@@ -768,15 +825,15 @@ var FilterButton = React.forwardRef(function(_a, ref) {
   var selectedValuesLabel = selectedValue;
   return React.createElement(
     FilterButtonBase,
-    SuccessIcon.__assign({ ref: triggerRef, classNameOverride: classnames(styles$x.filterButton, classNameOverride), "aria-haspopup": "true", "aria-expanded": isOpen }, restProps),
-    React.createElement("span", { className: styles$x.labelContainer }, selectedValuesLabel ? React.createElement(
+    SuccessIcon.__assign({ ref: triggerRef, classNameOverride: classnames(styles$z.filterButton, classNameOverride), "aria-haspopup": "true", "aria-expanded": isOpen }, restProps),
+    React.createElement("span", { className: styles$z.labelContainer }, selectedValuesLabel ? React.createElement(
       React.Fragment,
       null,
       React.createElement(
         "span",
-        { className: styles$x.hasSelectedValues },
+        { className: styles$z.hasSelectedValues },
         React.createElement("span", null, label),
-        React.createElement("span", { className: styles$x.labelSeparator }, ":")
+        React.createElement("span", { className: styles$z.labelSeparator }, ":")
       ),
       React.createElement("span", null, selectedValuesLabel)
     ) : label),
@@ -785,7 +842,7 @@ var FilterButton = React.forwardRef(function(_a, ref) {
 });
 FilterButton.displayName = "FilterButton";
 
-var styles$w = {"buttonGroup":"ButtonGroup-module_buttonGroup__bsy2X","child":"ButtonGroup-module_child__K6AP-","firstChild":"ButtonGroup-module_firstChild__uEn1j","lastChild":"ButtonGroup-module_lastChild__Vicsx"};
+var styles$y = {"buttonGroup":"ButtonGroup-module_buttonGroup__bsy2X","child":"ButtonGroup-module_child__K6AP-","firstChild":"ButtonGroup-module_firstChild__uEn1j","lastChild":"ButtonGroup-module_lastChild__Vicsx"};
 
 var isFilterButton = function(node) {
   return React.isValidElement(node) && node.type === FilterButtonBase;
@@ -793,11 +850,11 @@ var isFilterButton = function(node) {
 var ButtonGroup = function(_a) {
   var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
   var childCount = React.Children.count(children);
-  var containerProps = SuccessIcon.__assign({ role: "group", className: classnames(styles$w.buttonGroup, classNameOverride) }, restProps);
+  var containerProps = SuccessIcon.__assign({ role: "group", className: classnames(styles$y.buttonGroup, classNameOverride) }, restProps);
   if (childCount === 1)
     return React.createElement("div", SuccessIcon.__assign({}, containerProps), children);
   return React.createElement("div", SuccessIcon.__assign({}, containerProps), React.Children.map(children, function(child, index) {
-    var buttonClassNames = classnames(styles$w.child, index === 0 && styles$w.firstChild, index === childCount - 1 && styles$w.lastChild, child.props.classNameOverride);
+    var buttonClassNames = classnames(styles$y.child, index === 0 && styles$y.firstChild, index === childCount - 1 && styles$y.lastChild, child.props.classNameOverride);
     if (child.type === draftTooltip.Tooltip) {
       var button = child.props.children;
       if (isFilterButton(button)) {
@@ -865,7 +922,7 @@ var FilterBarDatePicker = function(_a) {
 };
 FilterBarDatePicker.displayName = "FilterBar.DatePicker";
 
-var styles$v = {"dateRangeDisplayLabel":"DateRangeDisplayLabel-module_dateRangeDisplayLabel__Gsq1R"};
+var styles$x = {"dateRangeDisplayLabel":"DateRangeDisplayLabel-module_dateRangeDisplayLabel__Gsq1R"};
 
 var DateRangeDisplayLabel = function(_a) {
   var dateRange = _a.dateRange, locale = _a.locale;
@@ -873,7 +930,7 @@ var DateRangeDisplayLabel = function(_a) {
   var formattedDateTo = formatDateAsText.formatDateAsText(dateRange.to, void 0, locale);
   return React.createElement(
     "span",
-    { className: styles$v.dateRangeDisplayLabel },
+    { className: styles$x.dateRangeDisplayLabel },
     React.createElement("span", null, formattedDateFrom),
     React.createElement("span", null, "-"),
     React.createElement("span", null, formattedDateTo)
@@ -881,7 +938,7 @@ var DateRangeDisplayLabel = function(_a) {
 };
 DateRangeDisplayLabel.displayName = "DateRangeDisplayLabel";
 
-var styles$u = {"fieldMessageList":"DateRangeValidationMessage-module_fieldMessageList__UluZx"};
+var styles$w = {"fieldMessageList":"DateRangeValidationMessage-module_fieldMessageList__UluZx"};
 
 var DateRangeValidationMessage = function(_a) {
   var validationMessage = _a.validationMessage, dateStartId = _a.dateStartId, dateEndId = _a.dateEndId, isReversed = _a.isReversed;
@@ -893,7 +950,7 @@ var DateRangeValidationMessage = function(_a) {
     if (dateStart.status === dateEnd.status) {
       return React.createElement(draftForm.FieldMessage, { message: React.createElement(
         "ul",
-        { className: styles$u.fieldMessageList },
+        { className: styles$w.fieldMessageList },
         React.createElement("li", { id: dateStartId }, dateStart.message),
         React.createElement("li", { id: dateEndId }, dateEnd.message)
       ), status: dateStart.status || dateEnd.status, reversed: isReversed });
@@ -915,7 +972,7 @@ var DateRangeValidationMessage = function(_a) {
 };
 DateRangeValidationMessage.displayName = "DateRangeValidationMessage";
 
-var styles$t = {"dateRangeInputContainer":"DateRangeInputField-module_dateRangeInputContainer__KGDB1","inputStartDate":"DateRangeInputField-module_inputStartDate__3nwlg","inputEndDate":"DateRangeInputField-module_inputEndDate__ZvUwZ","disabled":"DateRangeInputField-module_disabled__iPMZ-"};
+var styles$v = {"dateRangeInputContainer":"DateRangeInputField-module_dateRangeInputContainer__KGDB1","inputStartDate":"DateRangeInputField-module_inputStartDate__3nwlg","inputEndDate":"DateRangeInputField-module_inputEndDate__ZvUwZ","disabled":"DateRangeInputField-module_disabled__iPMZ-"};
 
 var DateRangeInputField = React.forwardRef(function(_a, ref) {
   var _b, _c;
@@ -935,21 +992,42 @@ var DateRangeInputField = React.forwardRef(function(_a, ref) {
     SuccessIcon.__assign({ className: classNameOverride }, restProps),
     React.createElement(
       "fieldset",
-      { className: styles$t.dateRangeInputContainer },
+      { className: styles$v.dateRangeInputContainer },
       React.createElement(
         "legend",
         null,
         React.createElement(a11y.VisuallyHidden, null, legend)
       ),
-      React.createElement(DateInput.DateInput, SuccessIcon.__assign({ ref: inputStartDateRef, id: "".concat(id, "--from"), "aria-describedby": dateStartInputDescribedBy, "aria-errormessage": dateStartErrorMessageId, "aria-invalid": dateStartIsInvalid, autoComplete: "off", disabled, status: (_b = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart) === null || _b === void 0 ? void 0 : _b.status }, inputStartDateProps, { classNameOverride: classnames(styles$t.inputStartDate, inputStartDateProps.classNameOverride) })),
-      React.createElement(DateInput.DateInput, SuccessIcon.__assign({ ref: inputEndDateRef, id: "".concat(id, "--to"), "aria-describedby": dateEndInputDescribedBy, "aria-errormessage": dateEndErrorMessageId, "aria-invalid": dateEndIsInvalid, autoComplete: "off", disabled, status: (_c = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd) === null || _c === void 0 ? void 0 : _c.status }, inputEndDateProps, { classNameOverride: classnames(styles$t.inputEndDate, inputEndDateProps.classNameOverride) }))
+      React.createElement(DateInput.DateInput, SuccessIcon.__assign({ ref: inputStartDateRef, id: "".concat(id, "--from"), "aria-describedby": dateStartInputDescribedBy, "aria-errormessage": dateStartErrorMessageId, "aria-invalid": dateStartIsInvalid, autoComplete: "off", disabled, status: (_b = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart) === null || _b === void 0 ? void 0 : _b.status }, inputStartDateProps, { classNameOverride: classnames(styles$v.inputStartDate, inputStartDateProps.classNameOverride) })),
+      React.createElement(DateInput.DateInput, SuccessIcon.__assign({ ref: inputEndDateRef, id: "".concat(id, "--to"), "aria-describedby": dateEndInputDescribedBy, "aria-errormessage": dateEndErrorMessageId, "aria-invalid": dateEndIsInvalid, autoComplete: "off", disabled, status: (_c = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd) === null || _c === void 0 ? void 0 : _c.status }, inputEndDateProps, { classNameOverride: classnames(styles$v.inputEndDate, inputEndDateProps.classNameOverride) }))
     ),
     validationMessage && React.createElement(DateRangeValidationMessage, { validationMessage, isReversed, dateStartId: dateStartErrorMessageId, dateEndId: dateEndErrorMessageId }),
-    React.createElement(draftForm.FieldMessage, { id: descriptionId, message: React.createElement(DateInputDescription, { description, locale }), reversed: isReversed, classNameOverride: disabled ? styles$t.disabled : void 0 })
+    React.createElement(draftForm.FieldMessage, { id: descriptionId, message: React.createElement(DateInputDescription, { description, locale }), reversed: isReversed, classNameOverride: disabled ? styles$v.disabled : void 0 })
   );
 });
 DateRangeInputField.displayName = "DateRangeInputField";
 
+var filterDatePickerFieldReducer = function(state, action) {
+  switch (action.type) {
+    case "update_selected_start_date":
+      return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { selectedStartDate: action.date, inputStartValue: action.inputValue === void 0 ? state.inputStartValue : action.inputValue, startMonth: action.date && !datePicker.isInvalidDate(action.date) ? action.date : /* @__PURE__ */ new Date() });
+    case "update_selected_end_date":
+      return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { selectedEndDate: action.date, inputEndValue: action.inputValue === void 0 ? state.inputEndValue : action.inputValue });
+    case "navigate_months":
+      return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { startMonth: action.date && !datePicker.isInvalidDate(action.date) ? action.date : /* @__PURE__ */ new Date() });
+    case "update_input_start_field":
+      return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { inputStartValue: action.inputValue });
+    case "update_input_end_field":
+      return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { inputEndValue: action.inputValue });
+  }
+};
+
+var isValidRange = function(startDate, endDate) {
+  if (startDate && endDate)
+    return startDate <= endDate;
+  return false;
+};
+
 var validateEndDateBeforeStartDate = function(_a) {
   var startDate = _a.startDate, startDateFieldLabel = _a.startDateFieldLabel, endDate = _a.endDate, endDateInputValue = _a.endDateInputValue;
   var baseResponse = {
@@ -961,13 +1039,13 @@ var validateEndDateBeforeStartDate = function(_a) {
     isEmpty: false,
     isValidDate: true
   };
-  if (endDate < startDate) {
+  if (!isValidRange(startDate, endDate)) {
     return {
       validationResponse: SuccessIcon.__assign(SuccessIcon.__assign({}, baseResponse), { validationMessage: {
         status: "error",
         message: 'Cannot be earlier than the selection in "'.concat(getNodeText(startDateFieldLabel), '"')
       } }),
-      newDate: void 0
+      newDate: endDate
     };
   }
   return {
@@ -1023,7 +1101,7 @@ var useStartDateValidation = function(args) {
   };
 };
 
-var styles$s = {"filterDateRangePickerField":"FilterDateRangePickerField-module_filterDateRangePickerField__1gCr0","dateRangeInputField":"FilterDateRangePickerField-module_dateRangeInputField__XFvb-"};
+var styles$u = {"filterDateRangePickerField":"FilterDateRangePickerField-module_filterDateRangePickerField__1gCr0","dateRangeInputField":"FilterDateRangePickerField-module_dateRangeInputField__XFvb-"};
 
 var FilterDateRangePickerField = function(_a) {
   var id = _a.id, label = _a.label, propsLocale = _a.locale, defaultMonth = _a.defaultMonth, selectedRange = _a.selectedRange, onRangeChange = _a.onRangeChange, disabledDays = _a.disabledDays, inputStartDateProps = _a.inputStartDateProps, inputEndDateProps = _a.inputEndDateProps, description = _a.description, validationMessage = _a.validationMessage, onValidate = _a.onValidate, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["id", "label", "locale", "defaultMonth", "selectedRange", "onRangeChange", "disabledDays", "inputStartDateProps", "inputEndDateProps", "description", "validationMessage", "onValidate", "classNameOverride"]);
@@ -1044,13 +1122,6 @@ var FilterDateRangePickerField = function(_a) {
   var transformDateToInputValue = function(date) {
     return date ? formatDateAsText.formatDateAsText(date, disabledDays, locale) : "";
   };
-  var rangeStart = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from;
-  var rangeEnd = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to;
-  var transformedStartDate = transformDateToInputValue(rangeStart);
-  var transformedEndDate = transformDateToInputValue(rangeEnd);
-  var _b = React.useState(rangeStart && !isInvalidDate.isInvalidDate(rangeStart) ? rangeStart : defaultMonth || /* @__PURE__ */ new Date()), startMonth = _b[0], setStartMonth = _b[1];
-  var _c = React.useState(transformedStartDate), inputStartDateValue = _c[0], setInputStartDateValue = _c[1];
-  var _d = React.useState(transformedEndDate), inputEndDateValue = _d[0], setInputEndDateValue = _d[1];
   var handleDateRangeChange = function(dateRange) {
     onRangeChange(dateRange);
   };
@@ -1060,67 +1131,122 @@ var FilterDateRangePickerField = function(_a) {
     validationMessage: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart,
     onValidate: onValidate === null || onValidate === void 0 ? void 0 : onValidate.dateStart
   });
-  var validateStartDate = function(date) {
-    return dateStartValidation.validateDate({
-      date,
-      inputValue: inputStartDateValue
-    });
-  };
   var dateEndValidation = useEndDateValidation({
     inputLabel: inputEndDateLabel,
     disabledDays,
     validationMessage: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd,
     onValidate: onValidate === null || onValidate === void 0 ? void 0 : onValidate.dateEnd
   });
-  var validateEndDate = function(date) {
+  var validateStartDate = function(date, inputValue) {
+    return dateStartValidation.validateDate({
+      date,
+      inputValue
+    });
+  };
+  var validateEndDate = function(date, inputValue) {
     return dateEndValidation.validateDate({
       endDate: date,
-      endDateInputValue: inputEndDateValue,
+      endDateInputValue: inputValue,
       startDate: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from,
       startDateFieldLabel: inputStartDateLabel
     });
   };
-  var inputStartDateHandlers = useDateInputHandlers.useDateInputHandlers(SuccessIcon.__assign({ locale, disabledDays, setInputValue: setInputStartDateValue, onDateChange: function(date) {
-    var newDate = validateStartDate(date);
-    var endDate = parseDateFromTextFormatValue.parseDateFromTextFormatValue(inputEndDateValue, locale);
-    if (newDate && !isInvalidDate.isInvalidDate(endDate)) {
-      var newEndDate = dateEndValidation.validateEndDateBeforeStartDate({
+  var _b = React.useReducer(filterDatePickerFieldReducer, {
+    selectedStartDate: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from,
+    selectedEndDate: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to,
+    inputStartValue: transformDateToInputValue(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from),
+    inputEndValue: transformDateToInputValue(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to),
+    startMonth: (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !isInvalidDate.isInvalidDate(selectedRange.from) ? selectedRange.from : defaultMonth || /* @__PURE__ */ new Date()
+  }), state = _b[0], dispatch = _b[1];
+  var inputStartDateHandlers = useDateInputHandlers(SuccessIcon.__assign({ locale, disabledDays, setInputValue: function(value) {
+    dispatch({
+      type: "update_input_start_field",
+      inputValue: value
+    });
+  }, onDateChange: function(date) {
+    var newDate = validateStartDate(date, state.inputStartValue);
+    var endDate = parseDateFromTextFormatValue.parseDateFromTextFormatValue(state.inputEndValue, locale);
+    var isRangeValid = isValidRange(newDate, endDate);
+    dispatch({
+      type: "update_selected_start_date",
+      date: newDate
+    });
+    dispatch({
+      type: "update_selected_end_date",
+      date: isRangeValid ? endDate : void 0
+    });
+    handleDateRangeChange({
+      from: newDate,
+      to: isRangeValid ? endDate : void 0
+    });
+    if (newDate && endDate && !isInvalidDate.isInvalidDate(endDate)) {
+      dateEndValidation.validateEndDateBeforeStartDate({
         startDate: newDate,
         startDateFieldLabel: inputStartDateLabel,
         endDate,
-        endDateInputValue: inputEndDateValue
+        endDateInputValue: state.inputEndValue
       });
-      handleDateRangeChange({ from: newDate, to: newEndDate });
-    } else {
-      handleDateRangeChange({ from: newDate, to: rangeEnd });
     }
-    if (newDate)
-      setStartMonth(newDate);
   } }, inputStartDateProps));
-  var inputEndDateHandlers = useDateInputHandlers.useDateInputHandlers(SuccessIcon.__assign({ locale, disabledDays, setInputValue: setInputEndDateValue, onDateChange: function(date) {
-    var newDate = validateEndDate(date);
-    handleDateRangeChange({ from: rangeStart, to: newDate });
+  var inputEndDateHandlers = useDateInputHandlers(SuccessIcon.__assign({ locale, disabledDays, setInputValue: function(value) {
+    dispatch({
+      type: "update_input_end_field",
+      inputValue: value
+    });
+  }, onDateChange: function(date) {
+    var startDate = state.selectedStartDate;
+    var newEndDate = validateEndDate(date, state.inputEndValue);
+    var isRangeValid = isValidRange(startDate, newEndDate);
+    dispatch({
+      type: "update_selected_end_date",
+      date: isRangeValid ? newEndDate : void 0
+    });
+    handleDateRangeChange({
+      from: startDate,
+      to: isRangeValid ? newEndDate : void 0
+    });
   } }, inputEndDateProps));
   var handleCalendarSelectRange = function(range) {
-    var newStartDate = validateStartDate(range === null || range === void 0 ? void 0 : range.from);
-    var newEndDate = validateEndDate(range === null || range === void 0 ? void 0 : range.to);
-    setInputStartDateValue(transformDateToInputValue(newStartDate));
-    setInputEndDateValue(transformDateToInputValue(newEndDate));
+    var inputStartValue = transformDateToInputValue(range === null || range === void 0 ? void 0 : range.from);
+    var inputEndValue = transformDateToInputValue(range === null || range === void 0 ? void 0 : range.to);
+    var newStartDate = validateStartDate(range === null || range === void 0 ? void 0 : range.from, inputStartValue);
+    var newEndDate = validateEndDate(range === null || range === void 0 ? void 0 : range.to, inputEndValue);
+    dispatch({
+      type: "update_selected_start_date",
+      date: newStartDate,
+      inputValue: inputStartValue
+    });
+    dispatch({
+      type: "update_selected_end_date",
+      date: newEndDate,
+      inputValue: inputEndValue
+    });
     handleDateRangeChange({ from: newStartDate, to: newEndDate });
   };
   React.useEffect(function() {
-    var newStartDate = validateStartDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from);
-    var newEndDate = validateEndDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to);
+    var newStartDate = validateStartDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, state.inputStartValue);
+    var newEndDate = validateEndDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, state.inputEndValue);
+    if (newStartDate && !isValidRange(newStartDate, newEndDate)) {
+      dispatch({
+        type: "update_selected_end_date",
+        date: void 0
+      });
+    }
     handleDateRangeChange({ from: newStartDate, to: newEndDate });
   }, []);
   return React.createElement(
     "div",
-    SuccessIcon.__assign({ className: classnames(styles$s.filterDateRangePickerField, classNameOverride) }, restProps),
-    React.createElement(DateRangeInputField, { id: "".concat(id, "--input"), legend: label, inputStartDateProps: SuccessIcon.__assign(SuccessIcon.__assign({ labelText: inputStartDateLabel, value: inputStartDateValue }, inputStartDateProps), inputStartDateHandlers), inputEndDateProps: SuccessIcon.__assign(SuccessIcon.__assign({ labelText: inputEndDateLabel, value: inputEndDateValue }, inputEndDateProps), inputEndDateHandlers), locale, description, validationMessage: {
+    SuccessIcon.__assign({ className: classnames(styles$u.filterDateRangePickerField, classNameOverride) }, restProps),
+    React.createElement(DateRangeInputField, { id: "".concat(id, "--input"), legend: label, inputStartDateProps: SuccessIcon.__assign(SuccessIcon.__assign({ labelText: inputStartDateLabel, value: state.inputStartValue }, inputStartDateProps), inputStartDateHandlers), inputEndDateProps: SuccessIcon.__assign(SuccessIcon.__assign({ labelText: inputEndDateLabel, value: state.inputEndValue }, inputEndDateProps), inputEndDateHandlers), locale, description, validationMessage: {
       dateStart: dateStartValidation.validationMessage,
       dateEnd: dateEndValidation.validationMessage
-    }, classNameOverride: styles$s.dateRangeInputField }),
-    React.createElement(Calendar.CalendarRange, { disabled: disabledDays, locale, selected: selectedRange, onSelect: handleCalendarSelectRange, month: startMonth, onMonthChange: setStartMonth })
+    }, classNameOverride: styles$u.dateRangeInputField }),
+    React.createElement(Calendar.CalendarRange, { disabled: disabledDays, locale, selected: {
+      from: state.selectedStartDate,
+      to: state.selectedEndDate
+    }, onSelect: handleCalendarSelectRange, month: state.startMonth, onMonthChange: function(value) {
+      return dispatch({ type: "navigate_months", date: value });
+    } })
   );
 };
 FilterDateRangePickerField.displayName = "FilterDateRangePickerField";
@@ -1134,7 +1260,7 @@ var FilterDateRangePicker = function(_a) {
   return React.createElement(
     Filter,
     { isOpen, setIsOpen, renderTrigger: function(triggerProps) {
-      return renderTrigger(SuccessIcon.__assign({ selectedValue: isCompleteDateRange(selectedRange) ? React.createElement(DateRangeDisplayLabel, { dateRange: selectedRange, locale: getLocale.getLocale(locale) }) : void 0, label }, triggerProps));
+      return renderTrigger(SuccessIcon.__assign({ selectedValue: isCompleteDateRange(selectedRange) && isValidRange(selectedRange.from, selectedRange.to) ? React.createElement(DateRangeDisplayLabel, { dateRange: selectedRange, locale: getLocale.getLocale(locale) }) : void 0, label }, triggerProps));
     } },
     React.createElement(
       FilterContents,
@@ -1223,7 +1349,7 @@ var useSelectionContext = function() {
 var SelectionConsumer = SelectionContext.Consumer;
 SelectionProvider.displayName = "SelectionProvider";
 
-var styles$r = {"listBox":"ListBox-module_listBox__UNOzJ","overflown":"ListBox-module_overflown__ATtxj","hidden":"ListBox-module_hidden__tQP6S"};
+var styles$t = {"listBox":"ListBox-module_listBox__UNOzJ","overflown":"ListBox-module_overflown__ATtxj","hidden":"ListBox-module_hidden__tQP6S"};
 
 var getItemsFromKeys = function(items, keys) {
   var itemKeys = Array.from(keys);
@@ -1272,43 +1398,43 @@ var ListBox$1 = function(_a) {
       React.Fragment,
       null,
       React.createElement("div", null, children(itemsState)),
-      React.createElement("ul", { ref: listRef, className: styles$r.hidden })
+      React.createElement("ul", { ref: listRef, className: styles$t.hidden })
     );
   }
-  return React.createElement("ul", SuccessIcon.__assign({}, listBoxProps, { ref: listRef, className: classnames(styles$r.listBox, isOverflown && styles$r.overflown) }), children(itemsState));
+  return React.createElement("ul", SuccessIcon.__assign({}, listBoxProps, { ref: listRef, className: classnames(styles$t.listBox, isOverflown && styles$t.overflown) }), children(itemsState));
 };
 ListBox$1.displayName = "FilterMultiSelect.ListBox";
 
-var styles$q = {"listBoxSection":"ListBoxSection-module_listBoxSection__zH8wd"};
+var styles$s = {"listBoxSection":"ListBoxSection-module_listBoxSection__zH8wd"};
 
 var ListBoxSection$1 = function(_a) {
   var items = _a.items, sectionName = _a.sectionName, children = _a.children;
-  return React.createElement("div", { "aria-label": sectionName, className: styles$q.listBoxSection }, Array.from(items).map(function(node) {
+  return React.createElement("div", { "aria-label": sectionName, className: styles$s.listBoxSection }, Array.from(items).map(function(node) {
     return node != void 0 && children(node);
   }));
 };
 ListBoxSection$1.displayName = "FilterMultiSelect.ListBoxSection";
 
-var styles$p = {"container":"LoadMoreButton-module_container__5VoUY"};
+var styles$r = {"container":"LoadMoreButton-module_container__5VoUY"};
 
 var LoadMoreButton = function(props) {
   return React.createElement(
     "div",
-    { className: styles$p.container },
+    { className: styles$r.container },
     React.createElement(button$1.Button, SuccessIcon.__assign({}, props, { fullWidth: true }))
   );
 };
 LoadMoreButton.displayName = "FilterMultiSelect.LoadMoreButton";
 
-var styles$o = {"footer":"MenuFooter-module_footer__EAJQH"};
+var styles$q = {"footer":"MenuFooter-module_footer__EAJQH"};
 
 var MenuFooter = function(_a) {
   var children = _a.children;
-  return React.createElement("div", { className: styles$o.footer }, children);
+  return React.createElement("div", { className: styles$q.footer }, children);
 };
 MenuFooter.displayName = "FilterMultiSelect.MenuFooter";
 
-var styles$n = {"loadingInput":"MenuLoadingSkeleton-module_loadingInput__XjXUs","loadingContainer":"MenuLoadingSkeleton-module_loadingContainer__Re0NU"};
+var styles$p = {"loadingInput":"MenuLoadingSkeleton-module_loadingInput__XjXUs","loadingContainer":"MenuLoadingSkeleton-module_loadingContainer__Re0NU"};
 
 var MenuLoadingSkeleton = function(_a) {
   var _b = _a.isAnimated, isAnimated = _b === void 0 ? false : _b;
@@ -1317,8 +1443,8 @@ var MenuLoadingSkeleton = function(_a) {
     null,
     React.createElement(
       "div",
-      { className: styles$n.loadingContainer },
-      React.createElement(loadingSkeleton.LoadingInput, { classNameOverride: styles$n.loadingInput, isAnimated }),
+      { className: styles$p.loadingContainer },
+      React.createElement(loadingSkeleton.LoadingInput, { classNameOverride: styles$p.loadingInput, isAnimated }),
       React.createElement(loadingSkeleton.LoadingParagraph, { isAnimated }),
       React.createElement(loadingSkeleton.LoadingParagraph, { isAnimated }),
       React.createElement(loadingSkeleton.LoadingParagraph, { isAnimated }),
@@ -1344,7 +1470,7 @@ var CheckIcon = function(props) {
 };
 CheckIcon.displayName = "CheckIcon";
 
-var styles$m = {"icon":"MultiSelectOption-module_icon__rmfL-","option":"MultiSelectOption-module_option__1vbfi","badge":"MultiSelectOption-module_badge__VbnQR","isFocused":"MultiSelectOption-module_isFocused__XhwMs","isDisabled":"MultiSelectOption-module_isDisabled__FKH9f","badgeContainer":"MultiSelectOption-module_badgeContainer__6Xw7E","isSelected":"MultiSelectOption-module_isSelected__dXmuK"};
+var styles$o = {"icon":"MultiSelectOption-module_icon__rmfL-","option":"MultiSelectOption-module_option__1vbfi","badge":"MultiSelectOption-module_badge__VbnQR","isFocused":"MultiSelectOption-module_isFocused__XhwMs","isDisabled":"MultiSelectOption-module_isDisabled__FKH9f","badgeContainer":"MultiSelectOption-module_badgeContainer__6Xw7E","isSelected":"MultiSelectOption-module_isSelected__dXmuK"};
 
 var MultiSelectOption = function(_a) {
   var _b, _c, _d;
@@ -1358,32 +1484,32 @@ var MultiSelectOption = function(_a) {
   }, []);
   return React.createElement(
     "li",
-    SuccessIcon.__assign({}, utils.mergeProps(optionProps, focusProps), { ref, className: classnames(styles$m.option, isSelected && styles$m.isSelected, isFocusVisible && styles$m.isFocusVisible, isDisabled && styles$m.isDisabled), "aria-label": (_b = item.value) === null || _b === void 0 ? void 0 : _b.label, "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : void 0 }),
-    React.createElement("span", { className: classnames(styles$m.icon, isSelected && styles$m.isSelected) }, isSelected && React.createElement(CheckIcon, { role: "presentation" })),
+    SuccessIcon.__assign({}, utils.mergeProps(optionProps, focusProps), { ref, className: classnames(styles$o.option, isSelected && styles$o.isSelected, isFocusVisible && styles$o.isFocusVisible, isDisabled && styles$o.isDisabled), "aria-label": (_b = item.value) === null || _b === void 0 ? void 0 : _b.label, "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : void 0 }),
+    React.createElement("span", { className: classnames(styles$o.icon, isSelected && styles$o.isSelected) }, isSelected && React.createElement(CheckIcon, { role: "presentation" })),
     item.rendered,
     ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && React.createElement(
       "span",
-      { id: countElementId, className: styles$m.badgeContainer },
-      React.createElement(draftBadge.Badge, { classNameOverride: styles$m.badge }, item.value.count),
+      { id: countElementId, className: styles$o.badgeContainer },
+      React.createElement(draftBadge.Badge, { classNameOverride: styles$o.badge }, item.value.count),
       React.createElement(a11y.VisuallyHidden, null, " available")
     )
   );
 };
 MultiSelectOption.displayName = "FilterMultiSelect.Option";
 
-var styles$l = {"container":"NoResults-module_container__itPph"};
+var styles$n = {"container":"NoResults-module_container__itPph"};
 
 var NoResults = function(_a) {
   var children = _a.children, restProps = SuccessIcon.__rest(_a, ["children"]);
   return React.createElement(
     "div",
-    SuccessIcon.__assign({ className: styles$l.container }, restProps),
+    SuccessIcon.__assign({ className: styles$n.container }, restProps),
     React.createElement(typography.Paragraph, { variant: "extra-small", color: "dark-reduced-opacity" }, children)
   );
 };
 NoResults.displayName = "FilterMultiSelect.NoResults";
 
-var styles$k = {"menuPopup":"MenuPopup-module_menuPopup__JlPk3"};
+var styles$m = {"menuPopup":"MenuPopup-module_menuPopup__JlPk3"};
 
 var MenuPopup = function(_a) {
   var isLoading = _a.isLoading, loadingSkeleton = _a.loadingSkeleton, children = _a.children;
@@ -1397,7 +1523,7 @@ var MenuPopup = function(_a) {
     isOpen: menuTriggerState.isOpen,
     isDismissable: true
   }, overlayRef).overlayProps;
-  return menuTriggerState.isOpen ? React.createElement("div", SuccessIcon.__assign({}, overlayProps, { ref: overlayRef, className: styles$k.menuPopup }), isLoading && loadingSkeleton ? React.createElement(
+  return menuTriggerState.isOpen ? React.createElement("div", SuccessIcon.__assign({}, overlayProps, { ref: overlayRef, className: styles$m.menuPopup }), isLoading && loadingSkeleton ? React.createElement(
     React.Fragment,
     null,
     React.createElement(overlays.DismissButton, { onDismiss: onClose }),
@@ -1465,7 +1591,7 @@ var SearchIcon = function(props) {
 };
 SearchIcon.displayName = "SearchIcon";
 
-var styles$j = {"wrapper":"InputSearch-module_wrapper__hs-4L","input":"InputSearch-module_input__dNBbc","hasEndIconAdornment":"InputSearch-module_hasEndIconAdornment__AbK33","focusRing":"InputSearch-module_focusRing__IjP-5","startIconAdornment":"InputSearch-module_startIconAdornment__80-z0","loadingSpinner":"InputSearch-module_loadingSpinner__JrFST","endIconAdornment":"InputSearch-module_endIconAdornment__mgwQC","disabled":"InputSearch-module_disabled__gA9sy","default":"InputSearch-module_default__9VM-U","secondary":"InputSearch-module_secondary__ndOXK","reversed":"InputSearch-module_reversed__v8hfk"};
+var styles$l = {"wrapper":"InputSearch-module_wrapper__hs-4L","input":"InputSearch-module_input__dNBbc","hasEndIconAdornment":"InputSearch-module_hasEndIconAdornment__AbK33","focusRing":"InputSearch-module_focusRing__IjP-5","startIconAdornment":"InputSearch-module_startIconAdornment__80-z0","loadingSpinner":"InputSearch-module_loadingSpinner__JrFST","endIconAdornment":"InputSearch-module_endIconAdornment__mgwQC","disabled":"InputSearch-module_disabled__gA9sy","default":"InputSearch-module_default__9VM-U","secondary":"InputSearch-module_secondary__ndOXK","reversed":"InputSearch-module_reversed__v8hfk"};
 
 var InputSearch = function(props) {
   var value = props.value, onChange = props.onChange, onClear = props.onClear, classNameOverride = props.classNameOverride, disabled = props.disabled, _a = props.reversed, reversed = _a === void 0 ? false : _a, _b = props.loading, loading = _b === void 0 ? false : _b, _c = props.secondary, secondary = _c === void 0 ? false : _c, restProps = SuccessIcon.__rest(props, ["value", "onChange", "onClear", "classNameOverride", "disabled", "reversed", "loading", "secondary"]);
@@ -1477,16 +1603,16 @@ var InputSearch = function(props) {
   };
   return React.createElement(
     "div",
-    { className: classnames(styles$j.wrapper, secondary ? styles$j.secondary : styles$j["default"], reversed && styles$j.reversed, disabled && styles$j.disabled, value && styles$j.hasEndIconAdornment, classNameOverride) },
-    React.createElement("div", { className: styles$j.startIconAdornment }, loading ? React.createElement(loadingSpinner.LoadingSpinner, { accessibilityLabel: "", size: "sm", classNameOverride: styles$j.loadingSpinner }) : React.createElement(SearchIcon, { role: "presentation" })),
-    React.createElement("input", SuccessIcon.__assign({ ref: inputRef, type: "search", className: styles$j.input, disabled, value, onChange, readOnly: onChange === void 0 }, restProps)),
-    React.createElement("div", { className: styles$j.focusRing }),
-    value && React.createElement(ClearButton$1, { isReversed: reversed, onClick: handleOnClear, disabled, classNameOverride: styles$j.endIconAdornment, "aria-label": "clear search" })
+    { className: classnames(styles$l.wrapper, secondary ? styles$l.secondary : styles$l["default"], reversed && styles$l.reversed, disabled && styles$l.disabled, value && styles$l.hasEndIconAdornment, classNameOverride) },
+    React.createElement("div", { className: styles$l.startIconAdornment }, loading ? React.createElement(loadingSpinner.LoadingSpinner, { accessibilityLabel: "", size: "sm", classNameOverride: styles$l.loadingSpinner }) : React.createElement(SearchIcon, { role: "presentation" })),
+    React.createElement("input", SuccessIcon.__assign({ ref: inputRef, type: "search", className: styles$l.input, disabled, value, onChange, readOnly: onChange === void 0 }, restProps)),
+    React.createElement("div", { className: styles$l.focusRing }),
+    value && React.createElement(ClearButton$1, { isReversed: reversed, onClick: handleOnClear, disabled, classNameOverride: styles$l.endIconAdornment, "aria-label": "clear search" })
   );
 };
 InputSearch.displayName = "InputSearch";
 
-var styles$i = {"inputSearchContainer":"SearchInput-module_inputSearchContainer__2TCSY"};
+var styles$k = {"inputSearchContainer":"SearchInput-module_inputSearchContainer__2TCSY"};
 
 var SearchInput = function(_a) {
   var label = _a.label, id = _a.id, isLoading = _a.isLoading;
@@ -1502,20 +1628,20 @@ var SearchInput = function(_a) {
   }, [id]);
   return React.createElement(
     "div",
-    { className: styles$i.inputSearchContainer },
+    { className: styles$k.inputSearchContainer },
     React.createElement(InputSearch, { id: inputId, "aria-label": label !== null && label !== void 0 ? label : "Filter options by search query", secondary: true, placeholder: "Search\u2026", value: searchQuery, onChange: handleChange, onClear: handleClear, loading: isLoading })
   );
 };
 SearchInput.displayName = "FilterMultiSelect.SearchInput";
 
-var styles$h = {"divider":"SectionDivider-module_divider__zlsWs"};
+var styles$j = {"divider":"SectionDivider-module_divider__zlsWs"};
 
 var SectionDivider$1 = function() {
-  return React.createElement(draftDivider.Divider, { classNameOverride: styles$h.divider, variant: "canvas" });
+  return React.createElement(draftDivider.Divider, { classNameOverride: styles$j.divider, variant: "canvas" });
 };
 SectionDivider$1.displayName = "FilterMultiSelect.SectionDivider";
 
-var styles$g = {"button":"SelectionControlButton-module_button__F6wec","isDisabled":"SelectionControlButton-module_isDisabled__lYOrG"};
+var styles$i = {"button":"SelectionControlButton-module_button__F6wec","isDisabled":"SelectionControlButton-module_isDisabled__lYOrG"};
 
 var ClearButton = function() {
   var selectionState = useSelectionContext().selectionState;
@@ -1526,7 +1652,7 @@ var ClearButton = function() {
   }));
   return React.createElement(
     "button",
-    { type: "button", className: classnames(styles$g.button, isDisabled && styles$g.isDisabled), "aria-disabled": isDisabled, onClick: function() {
+    { type: "button", className: classnames(styles$i.button, isDisabled && styles$i.isDisabled), "aria-disabled": isDisabled, onClick: function() {
       !isDisabled && selectionState.selectionManager.setSelectedKeys(selectedOptions.filter(function(option) {
         return !filteredOptions.includes(option);
       }));
@@ -1544,7 +1670,7 @@ var SelectAllButton = function() {
   var filteredOptions = Array.from(selectionState.collection.getKeys()).filter(function(key) {
     return !disabledOptions.includes(key);
   });
-  return React.createElement("button", { type: "button", className: classnames(styles$g.button, selectionState.selectionManager.isSelectAll && styles$g.isDisabled), "aria-disabled": selectionState.selectionManager.isSelectAll, onClick: function() {
+  return React.createElement("button", { type: "button", className: classnames(styles$i.button, selectionState.selectionManager.isSelectAll && styles$i.isDisabled), "aria-disabled": selectionState.selectionManager.isSelectAll, onClick: function() {
     return !selectionState.selectionManager.isSelectAll && selectionState.selectionManager.setSelectedKeys(SuccessIcon.__spreadArray(SuccessIcon.__spreadArray([], selectedOptions, true), filteredOptions, true));
   } }, "Select all");
 };
@@ -1713,18 +1839,18 @@ var SelectProvider = function(_a) {
   return React.createElement(SelectContext.Provider, { value: { state } }, children);
 };
 
-var styles$f = {"listBox":"ListBox-module_listBox__FQ9sQ","focus":"ListBox-module_focus__Tm-jn"};
+var styles$h = {"listBox":"ListBox-module_listBox__FQ9sQ","focus":"ListBox-module_focus__Tm-jn"};
 
 var ListBox = function(_a) {
   var children = _a.children, menuProps = _a.menuProps, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "menuProps", "classNameOverride"]);
   var state = useSelectContext().state;
   var ref = React.useRef(null);
   var listBoxProps = listbox.useListBox(SuccessIcon.__assign(SuccessIcon.__assign({}, menuProps), { disallowEmptySelection: true, autoFocus: "first" }), state, ref).listBoxProps;
-  return React.createElement("ul", SuccessIcon.__assign({ ref, className: classnames(styles$f.listBox, classNameOverride) }, listBoxProps, restProps), children);
+  return React.createElement("ul", SuccessIcon.__assign({ ref, className: classnames(styles$h.listBox, classNameOverride) }, listBoxProps, restProps), children);
 };
 ListBox.displayName = "ListBox";
 
-var styles$e = {"icon":"Option-module_icon__0ECp6","option":"Option-module_option__U-MsL","isFocusVisible":"Option-module_isFocusVisible__yYC7y","disabled":"Option-module_disabled__RV081","isSelected":"Option-module_isSelected__L3nhB"};
+var styles$g = {"icon":"Option-module_icon__0ECp6","option":"Option-module_option__U-MsL","isFocusVisible":"Option-module_isFocusVisible__yYC7y","disabled":"Option-module_disabled__RV081","isSelected":"Option-module_isSelected__L3nhB"};
 
 var Option = function(_a) {
   var item = _a.item, classNameOverride = _a.classNameOverride, props = SuccessIcon.__rest(_a, ["item", "classNameOverride"]);
@@ -1734,14 +1860,14 @@ var Option = function(_a) {
   var _c = focus.useFocusRing(), isFocusVisible = _c.isFocusVisible, focusProps = _c.focusProps;
   return React.createElement(
     "li",
-    SuccessIcon.__assign({}, utils.mergeProps(optionProps, focusProps, props), { ref, className: classnames(styles$e.option, isSelected && styles$e.isSelected, isFocusVisible && styles$e.isFocusVisible, isDisabled && styles$e.disabled, classNameOverride), "aria-label": item.textValue }),
+    SuccessIcon.__assign({}, utils.mergeProps(optionProps, focusProps, props), { ref, className: classnames(styles$g.option, isSelected && styles$g.isSelected, isFocusVisible && styles$g.isFocusVisible, isDisabled && styles$g.disabled, classNameOverride), "aria-label": item.textValue }),
     item.rendered,
-    React.createElement("span", { className: classnames(styles$e.icon, isSelected && styles$e.isSelected) }, isSelected && React.createElement(CheckIcon, { inheritSize: true, role: "presentation" }))
+    React.createElement("span", { className: classnames(styles$g.icon, isSelected && styles$g.isSelected) }, isSelected && React.createElement(CheckIcon, { inheritSize: true, role: "presentation" }))
   );
 };
 Option.displayName = "Option";
 
-var styles$d = {"sectionWrapper":"ListBoxSection-module_sectionWrapper__NYQwa","sectionHeading":"ListBoxSection-module_sectionHeading__KiOi1","sectionList":"ListBoxSection-module_sectionList__xiPZY"};
+var styles$f = {"sectionWrapper":"ListBoxSection-module_sectionWrapper__NYQwa","sectionHeading":"ListBoxSection-module_sectionHeading__KiOi1","sectionList":"ListBoxSection-module_sectionList__xiPZY"};
 
 var ListBoxSection = function(_a) {
   var section = _a.section;
@@ -1754,9 +1880,9 @@ var ListBoxSection = function(_a) {
     null,
     React.createElement(
       "li",
-      SuccessIcon.__assign({}, itemProps, { className: styles$d.sectionWrapper }),
-      section.rendered && React.createElement(typography.Heading, SuccessIcon.__assign({ tag: "span", variant: "heading-6" }, headingProps, { classNameOverride: styles$d.sectionHeading }), section.rendered),
-      React.createElement("ul", SuccessIcon.__assign({}, groupProps, { className: styles$d.sectionList }), Array.from(section.childNodes).map(function(item) {
+      SuccessIcon.__assign({}, itemProps, { className: styles$f.sectionWrapper }),
+      section.rendered && React.createElement(typography.Heading, SuccessIcon.__assign({ tag: "span", variant: "heading-6" }, headingProps, { classNameOverride: styles$f.sectionHeading }), section.rendered),
+      React.createElement("ul", SuccessIcon.__assign({}, groupProps, { className: styles$f.sectionList }), Array.from(section.childNodes).map(function(item) {
         return React.createElement(Option, { key: item.key, item });
       }))
     )
@@ -1797,10 +1923,10 @@ var Overlay = function(_a) {
 };
 Overlay.displayName = "Overlay";
 
-var styles$c = {"divider":"SectionDivider-module_divider__-idrC"};
+var styles$e = {"divider":"SectionDivider-module_divider__-idrC"};
 
 var SectionDivider = function() {
-  return React.createElement(draftDivider.Divider, { classNameOverride: styles$c.divider, variant: "canvas" });
+  return React.createElement(draftDivider.Divider, { classNameOverride: styles$e.divider, variant: "canvas" });
 };
 SectionDivider.displayName = "SectionDivider";
 
@@ -1814,7 +1940,7 @@ var transformSelectItemToCollectionElement = function(item) {
   }) : React.createElement(collections.Item, { key: item.value }, item.label);
 };
 
-var styles$b = {"filterContents":"FilterSelect-module_filterContents__2LknZ"};
+var styles$d = {"filterContents":"FilterSelect-module_filterContents__2LknZ"};
 
 var FilterSelect = function(_a) {
   var isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, label = _a.label, children = _a.children, items = _a.items, classNameOverride = _a.classNameOverride, selectedKey = _a.selectedKey, restProps = SuccessIcon.__rest(_a, ["isOpen", "setIsOpen", "renderTrigger", "label", "children", "items", "classNameOverride", "selectedKey"]);
@@ -1847,7 +1973,7 @@ var FilterSelect = function(_a) {
       }, onMount: setTriggerRef, classNameOverride },
       React.createElement(
         FilterContents,
-        { classNameOverride: styles$b.filterContents },
+        { classNameOverride: styles$d.filterContents },
         React.createElement(
           SelectProvider,
           { state },
@@ -1925,25 +2051,25 @@ var AddFiltersMenu = function() {
 };
 AddFiltersMenu.displayName = "FilterBar.AddFiltersMenu";
 
-var styles$a = {"clearAllButton":"ClearAllButton-module_clearAllButton__luhgk"};
+var styles$c = {"clearAllButton":"ClearAllButton-module_clearAllButton__luhgk"};
 
 var ClearAllButton = function() {
   var clearAllFilters = useFilterBarContext().clearAllFilters;
-  return React.createElement(Button, { label: "Clear all", "aria-label": "Clear all filters", classNameOverride: styles$a.clearAllButton, secondary: true, onClick: clearAllFilters });
+  return React.createElement(Button, { label: "Clear all", "aria-label": "Clear all filters", classNameOverride: styles$c.clearAllButton, secondary: true, onClick: clearAllFilters });
 };
 ClearAllButton.displayName = "FilterBar.ClearAllButton";
 
-var styles$9 = {"filterBar":"FilterBar-module_filterBar__qMeNj","filtersContainer":"FilterBar-module_filtersContainer__AlFGD"};
+var styles$b = {"filterBar":"FilterBar-module_filterBar__qMeNj","filtersContainer":"FilterBar-module_filtersContainer__AlFGD"};
 
 var FilterBar = function(_a) {
   var filters = _a.filters, classNameOverride = _a.classNameOverride, providerProps = SuccessIcon.__rest(_a, ["filters", "classNameOverride"]);
   return React.createElement(FilterBarProvider, SuccessIcon.__assign({ filters }, providerProps), function(activeFilters) {
     return React.createElement(
       "div",
-      { className: classnames(styles$9.filterBar, classNameOverride) },
+      { className: classnames(styles$b.filterBar, classNameOverride) },
       React.createElement(
         "div",
-        { className: styles$9.filtersContainer },
+        { className: styles$b.filtersContainer },
         Object.values(activeFilters).map(function(_a2) {
           var id = _a2.id, Component = _a2.Component;
           return (
@@ -2402,15 +2528,15 @@ var KaizenProvider = function(_a) {
 };
 KaizenProvider.displayName = "KaizenProvider";
 
-var styles$8 = {"footerRoot":"FooterRoot-module_footerRoot__bvMSa"};
+var styles$a = {"footerRoot":"FooterRoot-module_footerRoot__bvMSa"};
 
 var FooterRoot = function(_a) {
   var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("footer", SuccessIcon.__assign({ className: classnames(styles$8.footerRoot, classNameOverride) }, restProps), children);
+  return React.createElement("footer", SuccessIcon.__assign({ className: classnames(styles$a.footerRoot, classNameOverride) }, restProps), children);
 };
 FooterRoot.displayName = "Workflow.FooterRoot";
 
-var styles$7 = {"stepsContainer":"ProgressStepper-module_stepsContainer__kh4S2","stepList":"ProgressStepper-module_stepList__ToKVO","step":"ProgressStepper-module_step__5Zakx","stepContent":"ProgressStepper-module_stepContent__brp8m","stepIndicator":"ProgressStepper-module_stepIndicator__vAWW6","stepName":"ProgressStepper-module_stepName__21rPP","stepIcon":"ProgressStepper-module_stepIcon__eW-Ps","stepDivider":"ProgressStepper-module_stepDivider__SaO4y","stepperDescription":"ProgressStepper-module_stepperDescription__XT8Ra"};
+var styles$9 = {"stepsContainer":"ProgressStepper-module_stepsContainer__kh4S2","stepList":"ProgressStepper-module_stepList__ToKVO","step":"ProgressStepper-module_step__5Zakx","stepContent":"ProgressStepper-module_stepContent__brp8m","stepIndicator":"ProgressStepper-module_stepIndicator__vAWW6","stepName":"ProgressStepper-module_stepName__21rPP","stepIcon":"ProgressStepper-module_stepIcon__eW-Ps","stepDivider":"ProgressStepper-module_stepDivider__SaO4y","stepperDescription":"ProgressStepper-module_stepperDescription__XT8Ra"};
 
 var getStepStatus = function(isComplete, isCurrentStep, step, index) {
   if (isComplete) {
@@ -2435,34 +2561,34 @@ var ProgressStepper = function(_a) {
   var currentStepIndex = steps.indexOf(stepName);
   return React.createElement(
     "div",
-    { className: styles$7.stepsContainer },
-    React.createElement("ol", SuccessIcon.__assign({ className: styles$7.stepList }, restprops, { "aria-labelledby": "stepper-description" }), steps.map(function(step, index) {
+    { className: styles$9.stepsContainer },
+    React.createElement("ol", SuccessIcon.__assign({ className: styles$9.stepList }, restprops, { "aria-labelledby": "stepper-description" }), steps.map(function(step, index) {
       var isCurrentStep = currentStepIndex === index;
       var isCompletedStep = index < currentStepIndex || isComplete;
       var _a2 = getStepStatus(isCompletedStep, isCurrentStep, step, index), accessibleName = _a2.accessibleName, Icon = _a2.icon;
       return React.createElement(
         "li",
-        { className: styles$7.step, key: "".concat(index, "-").concat(step), "aria-current": isCurrentStep },
+        { className: styles$9.step, key: "".concat(index, "-").concat(step), "aria-current": isCurrentStep },
         React.createElement(
           "div",
-          { className: styles$7.stepContent },
+          { className: styles$9.stepContent },
           React.createElement("span", { className: "sr-only" }, accessibleName),
-          React.createElement(typography.Paragraph, { classNameOverride: styles$7.stepName, variant: "small", color: "white", "aria-hidden": true }, step),
+          React.createElement(typography.Paragraph, { classNameOverride: styles$9.stepName, variant: "small", color: "white", "aria-hidden": true }, step),
           React.createElement(
             "div",
-            { className: styles$7.stepIndicator },
-            React.createElement("span", { className: styles$7.stepIcon }, Icon)
+            { className: styles$9.stepIndicator },
+            React.createElement("span", { className: styles$9.stepIcon }, Icon)
           ),
           index < steps.length - 1 && React.createElement("div", { className: classnames([
-            styles$7.stepDivider,
-            isCompletedStep && styles$7.completedStep
+            styles$9.stepDivider,
+            isCompletedStep && styles$9.completedStep
           ]) })
         )
       );
     })),
     React.createElement(
       typography.Paragraph,
-      { classNameOverride: styles$7.stepperDescription, variant: "small", color: "white", id: "stepper-description" },
+      { classNameOverride: styles$9.stepperDescription, variant: "small", color: "white", id: "stepper-description" },
       "Step ",
       currentStepIndex + 1,
       " of ",
@@ -2472,13 +2598,13 @@ var ProgressStepper = function(_a) {
 };
 ProgressStepper.displayName = "Workflow.ProgressStepper";
 
-var styles$6 = {"footerAction":"FooterActions-module_footerAction__H-bdq","footerActionPrevious":"FooterActions-module_footerActionPrevious__yyzsX","footerActionNext":"FooterActions-module_footerActionNext__GIowc"};
+var styles$8 = {"footerAction":"FooterActions-module_footerAction__H-bdq","footerActionPrevious":"FooterActions-module_footerActionPrevious__yyzsX","footerActionNext":"FooterActions-module_footerActionNext__GIowc"};
 
 var FooterAction = function(_a) {
   var _b = _a.actionType, actionType = _b === void 0 ? "Previous" : _b, action = _a.action, restProps = SuccessIcon.__rest(_a, ["actionType", "action"]);
   return React.createElement("div", SuccessIcon.__assign({ className: classnames([
-    styles$6.footerAction,
-    styles$6["footerAction".concat(actionType)]
+    styles$8.footerAction,
+    styles$8["footerAction".concat(actionType)]
   ]) }, restProps), action);
 };
 FooterAction.displayName = "Workflow.FooterActions";
@@ -2495,19 +2621,19 @@ var Footer = function(_a) {
 };
 Footer.displayName = "Workflow.Footer";
 
-var styles$5 = {"titles":"Titles-module_titles__tO9dZ","pageTitle":"Titles-module_pageTitle__7-ui0","prefix":"Titles-module_prefix__vV-WW","status":"Titles-module_status__RvbTg"};
+var styles$7 = {"titles":"Titles-module_titles__tO9dZ","pageTitle":"Titles-module_pageTitle__7-ui0","prefix":"Titles-module_prefix__vV-WW","status":"Titles-module_status__RvbTg"};
 
 var Titles = function(_a) {
   var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, restProps = SuccessIcon.__rest(_a, ["workflowName", "stepName", "status"]);
   return React.createElement(
     "div",
-    SuccessIcon.__assign({ className: styles$5.titles }, restProps),
+    SuccessIcon.__assign({ className: styles$7.titles }, restProps),
     React.createElement(
       typography.Heading,
-      { variant: "heading-1", tag: "h1", color: "dark", classNameOverride: styles$5.pageTitle },
+      { variant: "heading-1", tag: "h1", color: "dark", classNameOverride: styles$7.pageTitle },
       React.createElement(
         typography.Heading,
-        { classNameOverride: styles$5.prefix, variant: "heading-6", tag: "span", color: "dark-reduced-opacity" },
+        { classNameOverride: styles$7.prefix, variant: "heading-6", tag: "span", color: "dark-reduced-opacity" },
         workflowName,
         React.createElement("span", { className: "sr-only" }, ":")
       ),
@@ -2516,40 +2642,40 @@ var Titles = function(_a) {
     status && // status may need to be update by a fetch
     React.createElement(
       "div",
-      { className: styles$5.status },
+      { className: styles$7.status },
       React.createElement(draftTag.Tag, { inline: true, variant: (status === null || status === void 0 ? void 0 : status.variant) || "statusDraft" }, status === null || status === void 0 ? void 0 : status.content)
     )
   );
 };
 Titles.displayName = "Workflow.Titles";
 
-var styles$4 = {"actions":"Actions-module_actions__2Zdtd"};
+var styles$6 = {"actions":"Actions-module_actions__2Zdtd"};
 
 var Actions = function(_a) {
   var headerActions = _a.headerActions, restProps = SuccessIcon.__rest(_a, ["headerActions"]);
-  return React.createElement("div", SuccessIcon.__assign({ className: styles$4.actions }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function(action, index) {
+  return React.createElement("div", SuccessIcon.__assign({ className: styles$6.actions }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function(action, index) {
     return React.createElement(action.type, SuccessIcon.__assign({ key: "header-actions ".concat(index) }, action.props));
   }));
 };
 Actions.displayName = "Workflow.Actions";
 
-var styles$3 = {"branding":"Branding-module_branding__Oayqr","logo":"Branding-module_logo__rTXU9"};
+var styles$5 = {"branding":"Branding-module_branding__Oayqr","logo":"Branding-module_logo__rTXU9"};
 
 var Branding = function(_a) {
   var _b = _a.variant, variant = _b === void 0 ? "logo-horizontal" : _b, alt = _a.alt;
   return React.createElement(
     "div",
-    { className: styles$3.branding },
-    React.createElement(brand.Brand, { classNameOverride: styles$3.logo, variant, alt })
+    { className: styles$5.branding },
+    React.createElement(brand.Brand, { classNameOverride: styles$5.logo, variant, alt })
   );
 };
 Branding.displayName = "Workflow.Branding";
 
-var styles$2 = {"root":"Root-module_root__cfRZi"};
+var styles$4 = {"root":"Root-module_root__cfRZi"};
 
 var HeaderRoot = function(_a) {
   var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("header", SuccessIcon.__assign({ className: classnames(styles$2.root, classNameOverride) }, restProps), children);
+  return React.createElement("header", SuccessIcon.__assign({ className: classnames(styles$4.root, classNameOverride) }, restProps), children);
 };
 HeaderRoot.displayName = "Workflow.HeaderRoot";
 
@@ -2565,19 +2691,19 @@ var Header = function(_a) {
 };
 Header.displayName = "Workflow.Header";
 
-var styles$1 = {"main":"Main-module_main__H-zGJ"};
+var styles$3 = {"main":"Main-module_main__H-zGJ"};
 
 var Main = function(_a) {
   var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("main", SuccessIcon.__assign({ className: classnames([styles$1.main, classNameOverride]) }, restProps), children);
+  return React.createElement("main", SuccessIcon.__assign({ className: classnames([styles$3.main, classNameOverride]) }, restProps), children);
 };
 Main.displayName = "Workflow.Main";
 
-var styles = {"wrapper":"Wrapper-module_wrapper__EUUEZ"};
+var styles$2 = {"wrapper":"Wrapper-module_wrapper__EUUEZ"};
 
 var Wrapper = function(_a) {
   var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("div", SuccessIcon.__assign({ className: classnames(styles.wrapper, classNameOverride) }, restProps), children);
+  return React.createElement("div", SuccessIcon.__assign({ className: classnames(styles$2.wrapper, classNameOverride) }, restProps), children);
 };
 Wrapper.displayName = "Workflow.Wrapper";
 
@@ -2599,8 +2725,272 @@ var Workflow = Object.assign(WorkflowComponent, {
   Wrapper
 });
 
+var styles$1 = {"body":"BrandMoment-module_body__J4lls","informative":"BrandMoment-module_informative__Qvwcd","positive":"BrandMoment-module_positive__78wqJ","negative":"BrandMoment-module_negative__atXal","container":"BrandMoment-module_container__4ORHI","header":"BrandMoment-module_header__EAP5Q","main":"BrandMoment-module_main__cdWko","mainInner":"BrandMoment-module_mainInner__xsFA6","left":"BrandMoment-module_left__ZHJiM","leftInner":"BrandMoment-module_leftInner__TY5DY","right":"BrandMoment-module_right__B-PR2","rightInner":"BrandMoment-module_rightInner__XvQ5Y","subtitle":"BrandMoment-module_subtitle__z9PL8","title":"BrandMoment-module_title__GrdAR","textBody":"BrandMoment-module_textBody__W6LvQ","secondaryAction":"BrandMoment-module_secondaryAction__d18oJ","actions":"BrandMoment-module_actions__Z3NrK","footer":"BrandMoment-module_footer__vSeX1","footerInner":"BrandMoment-module_footerInner__Wt9Rt","poweredByContainer":"BrandMoment-module_poweredByContainer__OkhVN","footerTextContainer":"BrandMoment-module_footerTextContainer__8iin9","poweredByLogo":"BrandMoment-module_poweredByLogo__w6M7o"};
+
+var BrandMoment = function(_a) {
+  var mood = _a.mood, illustration = _a.illustration, header = _a.header, body = _a.body, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, text = _a.text, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["mood", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+  var queries = responsive.useMediaQueries().queries;
+  return React.createElement(
+    "div",
+    SuccessIcon.__assign({ className: classnames(styles$1.body, styles$1[mood], classNameOverride) }, restProps),
+    React.createElement("header", { className: styles$1.header }, header),
+    React.createElement(
+      "main",
+      { className: styles$1.main },
+      React.createElement(
+        "div",
+        { className: styles$1.container },
+        React.createElement(
+          "div",
+          { className: styles$1.mainInner },
+          React.createElement(
+            "div",
+            { className: styles$1.left },
+            React.createElement("div", { className: styles$1.leftInner }, illustration)
+          ),
+          React.createElement(
+            "div",
+            { className: styles$1.right },
+            React.createElement(
+              "div",
+              { className: styles$1.rightInner },
+              text.subtitle && React.createElement(typography.Heading, { variant: "heading-3", tag: "h1", classNameOverride: styles$1.subtitle }, text.subtitle),
+              React.createElement(typography.Heading, { variant: "display-0", tag: text.subtitle ? "h2" : "h1", classNameOverride: styles$1.title }, text.title),
+              text.body && React.createElement(typography.Paragraph, { variant: "intro-lede", classNameOverride: styles$1.textBody }, text.body),
+              body && React.createElement("div", { className: styles$1.textBody }, body),
+              React.createElement(
+                "div",
+                { className: styles$1.actions },
+                primaryAction && React.createElement(Button, SuccessIcon.__assign({ primary: true, fullWidth: queries.isSmall }, primaryAction)),
+                secondaryAction && React.createElement(
+                  "div",
+                  { className: styles$1.secondaryAction },
+                  React.createElement(Button, SuccessIcon.__assign({ secondary: true, fullWidth: queries.isSmall }, secondaryAction))
+                )
+              )
+            )
+          )
+        )
+      )
+    ),
+    text.footer && React.createElement(
+      "footer",
+      { className: styles$1.footer },
+      React.createElement(
+        "div",
+        { className: styles$1.container },
+        React.createElement(
+          "div",
+          { className: styles$1.footerInner },
+          React.createElement(
+            "div",
+            { className: styles$1.poweredByContainer },
+            React.createElement(typography.Paragraph, { variant: "extra-small", color: "dark-reduced-opacity" }, "Powered by"),
+            React.createElement(
+              "a",
+              { href: "https://www.cultureamp.com", className: styles$1.poweredByLogo },
+              React.createElement("img", { src: hostedAssets.assetUrl("brand/logo-horizontal-default.svg"), alt: "Culture Amp" })
+            )
+          ),
+          React.createElement(
+            "div",
+            { className: styles$1.footerTextContainer },
+            React.createElement(typography.Paragraph, { variant: "extra-small" }, text.footer)
+          )
+        )
+      )
+    )
+  );
+};
+BrandMoment.displayName = "BrandMoment";
+
+var ArrowRightIcon = function(props) {
+  return React.createElement(
+    SuccessIcon.SVG,
+    SuccessIcon.__assign({}, props),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "m12.5 5-1.179 1.179 2.987 2.987H2.5v1.667h11.808l-2.987 2.988L12.5 15l5-5.001z" })
+  );
+};
+ArrowRightIcon.displayName = "ArrowRightIcon";
+
+var EmailIcon = function(props) {
+  return React.createElement(
+    SuccessIcon.SVG,
+    SuccessIcon.__assign({}, props),
+    React.createElement("path", { fill: "currentColor", fillRule: "nonzero", d: "M16.4 3.5H3.6c-.88 0-1.592.72-1.592 1.6L2 14.7c0 .88.72 1.6 1.6 1.6h12.8c.88 0 1.6-.72 1.6-1.6V5.1c0-.88-.72-1.6-1.6-1.6Zm0 3.2-6.4 4-6.4-4V5.1l6.4 4 6.4-4v1.6Z" })
+  );
+};
+EmailIcon.displayName = "EmailIcon";
+
+var useErrorMessages = function(code) {
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var translationsMap = {
+    400: {
+      title: formatMessage({
+        id: "kzErrorPage.400.title",
+        defaultMessage: "Your request has slipped into the void",
+        description: "Heading for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.400.message",
+        defaultMessage: "Sorry but your request couldn\u2019t be completed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    401: {
+      title: formatMessage({
+        id: "kzErrorPage.401.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.401.message",
+        defaultMessage: "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    403: {
+      title: formatMessage({
+        id: "kzErrorPage.403.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.403.message",
+        defaultMessage: "Sorry but it looks like you don\u2019t have permission to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    404: {
+      title: formatMessage({
+        id: "kzErrorPage.404.title",
+        defaultMessage: "Missing pages are one of life's mysteries",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.404.message",
+        defaultMessage: "Sorry but we can't fing the page you're looking for. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    422: {
+      title: formatMessage({
+        id: "kzErrorPage.422.title",
+        defaultMessage: "Change never comes easy",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.422.message",
+        defaultMessage: "Sorry but your change couldn't be made. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    500: {
+      title: formatMessage({
+        id: "kzErrorPage.500.title",
+        defaultMessage: "Something's gone wrong on our side",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.500",
+        defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    502: {
+      title: formatMessage({
+        id: "kzErrorPage.502.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.502.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    503: {
+      title: formatMessage({
+        id: "kzErrorPage.503.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.503.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    504: {
+      title: formatMessage({
+        id: "kzErrorPage.504.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.504.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    }
+  };
+  return translationsMap[code] || {
+    title: "",
+    message: ""
+  };
+};
+
+var styles = {"paragraphPadding":"ErrorPage-module_paragraphPadding__-L-qy"};
+
+var getMailToHref = function(code) {
+  var supportEmail = "support@cultureamp.com";
+  var subject = "Houston we have a problem";
+  var body = "Hi there,\n\nI received a ".concat(code, " error page while I was trying to...");
+  return encodeURI("mailto:".concat(supportEmail, "?subject=").concat(subject, "&amp;body=").concat(body));
+};
+var HOME_HREF = "/app/home";
+function ErrorPage(_a) {
+  var code = _a.code, title = _a.title, message = _a.message, callToAction = _a.callToAction, classNameOverride = _a.classNameOverride;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var content = useErrorMessages(code);
+  var actions = {
+    primary: { href: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.homeHref) || HOME_HREF },
+    secondary: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.onContactSupport) ? { onClick: callToAction.onContactSupport } : { href: getMailToHref(code) }
+  };
+  return React.createElement(
+    "div",
+    { className: classnames(classNameOverride) },
+    React.createElement(BrandMoment, { header: React.createElement(React.Fragment, null), body: React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        "div",
+        { className: styles.paragraphPadding },
+        React.createElement(typography.Paragraph, { variant: "intro-lede" }, message || content.message)
+      ),
+      React.createElement(
+        typography.Paragraph,
+        { color: "dark-reduced-opacity", variant: "small" },
+        React.createElement(i18nReactIntl.FormattedMessage, { id: "kzErrorPage.errorCode", defaultMessage: "Error code {code}", values: { code } })
+      )
+    ), illustration: React.createElement(draftIllustration.BrandMomentError, { isAnimated: true, loop: true }), mood: "negative", primaryAction: SuccessIcon.__assign(SuccessIcon.__assign({}, actions.primary), { icon: React.createElement(ArrowRightIcon, { role: "presentation" }), iconPosition: "end", label: formatMessage({
+      id: "kzErrorPage.goToHome",
+      defaultMessage: "Go to Home",
+      description: "Home button label"
+    }) }), secondaryAction: SuccessIcon.__assign(SuccessIcon.__assign({}, actions.secondary), { icon: React.createElement(EmailIcon, { role: "presentation" }), label: formatMessage({
+      id: "kzErrorPage",
+      defaultMessage: "Contact support",
+      description: "Label for contact button"
+    }) }), text: {
+      title: title || content.title
+    } })
+  );
+}
+ErrorPage.displayName = "ErrorPage";
+
 exports.Button = Button;
 exports.ClearButton = ClearButton$1;
+exports.ErrorPage = ErrorPage;
 exports.Filter = Filter;
 exports.FilterBar = FilterBar;
 exports.FilterBarProvider = FilterBarProvider;