@7shifts/sous-chef 4.5.1 → 4.6.0

package/dist/index.js

@@ -16,6 +16,10 @@ var libphonenumberJs = require('libphonenumber-js');
 var Select = require('react-select');
 var AsyncSelect = require('react-select/async');
 var dateFns = require('date-fns');
+var getDay = require('date-fns/getDay');
+var getDate = require('date-fns/getDate');
+var getDaysInMonth = require('date-fns/getDaysInMonth');
+var differenceInCalendarWeeks = require('date-fns/differenceInCalendarWeeks');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,6 +53,10 @@ var startOfDay__default = /*#__PURE__*/_interopDefaultLegacy(startOfDay);
 var originalStylers__default = /*#__PURE__*/_interopDefaultLegacy(originalStylers);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var AsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(AsyncSelect);
+var getDay__default = /*#__PURE__*/_interopDefaultLegacy(getDay);
+var getDate__default = /*#__PURE__*/_interopDefaultLegacy(getDate);
+var getDaysInMonth__default = /*#__PURE__*/_interopDefaultLegacy(getDaysInMonth);
+var differenceInCalendarWeeks__default = /*#__PURE__*/_interopDefaultLegacy(differenceInCalendarWeeks);
 
 // This file is automatically generated by 'scripts/tokens/build-colors.sh'
 // Do not edit this file directly, if you need to add a color modify 'src/foundation/tokens/color/_color-tokens.scss'
@@ -300,7 +308,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var styles$1A = {"flex":"_GFHBy","flex__item":"_TOxU5","flex__item--flexible":"_oppLW","align-center":"_bC2qU","align-end":"_9qCMz","align-start":"_06gN4","justify-center":"_9gxO4","justify-end":"_33FAJ","justify-space-between":"_lg-h2","justify-start":"_xjZcn","inline-flex":"_3yyLA"};
+var styles$1C = {"flex":"_GFHBy","flex__item":"_TOxU5","flex__item--flexible":"_oppLW","align-center":"_bC2qU","align-end":"_9qCMz","align-start":"_06gN4","justify-center":"_9gxO4","justify-end":"_33FAJ","justify-space-between":"_lg-h2","justify-start":"_xjZcn","inline-flex":"_3yyLA"};
 
 var usePositionStyles = function usePositionStyles(_ref) {
   var m = _ref.m,
@@ -419,7 +427,7 @@ var Flex = function Flex(_ref) {
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var positionStyles = usePositionStyles(positionProps);
-  var className = classnames__default["default"](styles$1A['flex'], extraClass, (_classNames = {}, _classNames[styles$1A['align-start']] = alignItems === 'flex-start', _classNames[styles$1A['align-end']] = alignItems === 'flex-end', _classNames[styles$1A['align-center']] = alignItems === 'center', _classNames[styles$1A['justify-start']] = justifyContent === 'start', _classNames[styles$1A['justify-end']] = justifyContent === 'end', _classNames[styles$1A['justify-center']] = justifyContent === 'center', _classNames[styles$1A['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1A['inline-flex']] = inlineFlex, _classNames));
+  var className = classnames__default["default"](styles$1C['flex'], extraClass, (_classNames = {}, _classNames[styles$1C['align-start']] = alignItems === 'flex-start', _classNames[styles$1C['align-end']] = alignItems === 'flex-end', _classNames[styles$1C['align-center']] = alignItems === 'center', _classNames[styles$1C['justify-start']] = justifyContent === 'start', _classNames[styles$1C['justify-end']] = justifyContent === 'end', _classNames[styles$1C['justify-center']] = justifyContent === 'center', _classNames[styles$1C['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1C['inline-flex']] = inlineFlex, _classNames));
   var items = React__default["default"].Children.toArray(children).filter(Boolean);
   var gap = typeof space === 'object' ? space.row + "px " + space.column + "px" : space;
   return React__default["default"].createElement("div", _extends({
@@ -435,7 +443,7 @@ var Flex = function Flex(_ref) {
     var _classNames2;
     return React__default["default"].createElement("div", {
       key: i,
-      className: classnames__default["default"](styles$1A['flex__item'], (_classNames2 = {}, _classNames2[styles$1A['flex__item--flexible']] = flexItems, _classNames2)),
+      className: classnames__default["default"](styles$1C['flex__item'], (_classNames2 = {}, _classNames2[styles$1C['flex__item--flexible']] = flexItems, _classNames2)),
       style: {
         flex: flex ? flex[i] || '0 1 auto' : '0 1 auto'
       }
@@ -457,7 +465,7 @@ var Stack = function Stack(_ref) {
   }));
 };
 
-var styles$1z = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
+var styles$1B = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
 
 var _excluded$ek = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
@@ -480,7 +488,7 @@ var Toggle = function Toggle(_ref) {
   return React__default["default"].createElement(Stack, {
     space: 8
   }, React__default["default"].createElement("label", _extends({}, dataProps, {
-    className: styles$1z['toggle']
+    className: styles$1B['toggle']
   }), React__default["default"].createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -489,11 +497,11 @@ var Toggle = function Toggle(_ref) {
     id: id,
     "data-testid": testId
   }), React__default["default"].createElement("span", {
-    className: styles$1z['toggle__switch']
+    className: styles$1B['toggle__switch']
   }), label && React__default["default"].createElement("span", {
-    className: styles$1z['toggle__label']
+    className: styles$1B['toggle__label']
   }, label)), caption && React__default["default"].createElement("span", {
-    className: styles$1z['toggle__caption']
+    className: styles$1B['toggle__caption']
   }, caption));
 };
 
@@ -513,7 +521,7 @@ var SPINNER_THEMES = {
   PRIDE: 'pride'
 };
 
-var styles$1y = {"spinner":"_memxT","rotator":"_QieGp","spinner--block":"_VoFzz","path":"_KSRP9","dash":"_RyBY2","path--mint":"_-sIZJ","path--disabled":"_3fox0","path--contrast":"_VteKz","path--pride":"_7rzsv"};
+var styles$1A = {"spinner":"_memxT","rotator":"_QieGp","spinner--block":"_VoFzz","path":"_KSRP9","dash":"_RyBY2","path--mint":"_-sIZJ","path--disabled":"_3fox0","path--contrast":"_VteKz","path--pride":"_7rzsv"};
 
 var Spinner = function Spinner(_ref) {
   var _classnames;
@@ -526,9 +534,9 @@ var Spinner = function Spinner(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'spinner' : _ref$testId;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1y['spinner--block']] = block, _classnames))
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1A['spinner--block']] = block, _classnames))
   }, React__default["default"].createElement("svg", {
-    className: styles$1y['spinner'],
+    className: styles$1A['spinner'],
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
     height: size,
@@ -603,7 +611,7 @@ var Spinner = function Spinner(_ref) {
     offset: "1",
     stopColor: "#760088"
   }))), React__default["default"].createElement("circle", {
-    className: classnames__default["default"](styles$1y['path'], styles$1y["path--" + theme]),
+    className: classnames__default["default"](styles$1A['path'], styles$1A["path--" + theme]),
     fill: "none",
     strokeWidth: "6",
     strokeLinecap: "round",
@@ -613,9 +621,9 @@ var Spinner = function Spinner(_ref) {
   })));
 };
 
-var styles$1x = {"tooltip":"_Ydu2O"};
+var styles$1z = {"tooltip":"_Ydu2O"};
 
-var styles$1w = {"tooltip-overlay":"_7fQon","tooltip-overlay--visible":"_a-BND","tooltip-overlay--black-theme":"_UUdng","tooltip-overlay--white-theme":"_brSNX","tooltip-overlay__header":"_uP8x7","tooltip-overlay-arrow":"_MjV6R","tooltip-overlay-arrow--top":"_TQqwB","tooltip-overlay-arrow--bottom":"_pgdKl","tooltip-overlay-arrow--visible":"_Zob-W","tooltip-overlay-arrow--black-theme":"_FXaBf","tooltip-overlay-arrow--white-theme":"_FyPu8"};
+var styles$1y = {"tooltip-overlay":"_7fQon","tooltip-overlay--visible":"_a-BND","tooltip-overlay--black-theme":"_UUdng","tooltip-overlay--white-theme":"_brSNX","tooltip-overlay__header":"_uP8x7","tooltip-overlay-arrow":"_MjV6R","tooltip-overlay-arrow--top":"_TQqwB","tooltip-overlay-arrow--bottom":"_pgdKl","tooltip-overlay-arrow--visible":"_Zob-W","tooltip-overlay-arrow--black-theme":"_FXaBf","tooltip-overlay-arrow--white-theme":"_FyPu8"};
 
 var TOOLTIP_THEME = {
   BLACK: 'black',
@@ -814,15 +822,15 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
       maxHeight: maxHeight,
       zIndex: getZIndex('tooltip')
     }),
-    className: classnames__default["default"](styles$1w['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1w['tooltip-overlay--visible']] = isVisible, _classnames[styles$1w['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1w['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
+    className: classnames__default["default"](styles$1y['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1y['tooltip-overlay--visible']] = isVisible, _classnames[styles$1y['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1y['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
     onMouseEnter: onFocusIn,
     onMouseLeave: onFocusOut
   }, React__default["default"].createElement(Stack, {
     space: 8
   }, header && React__default["default"].createElement("div", {
-    className: styles$1w['tooltip-overlay__header']
+    className: styles$1y['tooltip-overlay__header']
   }, header), children)), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1w['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1w['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1w['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1w['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1w['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1w['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
+    className: classnames__default["default"](styles$1y['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1y['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1y['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1y['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1y['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1y['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
     style: _extends({}, position.arrow, {
       zIndex: getZIndex('tooltip')
     }),
@@ -940,7 +948,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     }), overlayElement);
   }
   return React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1x['tooltip'])
+    className: classnames__default["default"](styles$1z['tooltip'])
   }, commonProps, {
     ref: containerRef
   }), children, overlayElement);
@@ -950,7 +958,7 @@ var isTooltipCompatible = function isTooltipCompatible(element) {
   return React__default["default"].isValidElement(element) && typeof element.type === 'string';
 };
 
-var styles$1v = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
+var styles$1x = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
 
 var BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -1045,7 +1053,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    className: classnames__default["default"](styles$1v['button'], (_classnames = {}, _classnames[styles$1v['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1v['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1v['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1v['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1v['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1v['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1v['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1v['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1v['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1v['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1v['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1v['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1v['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1v['button--loading']] = loading, _classnames[styles$1v['button--icon-only']] = isIconOnly, _classnames[styles$1v['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1v['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
+    className: classnames__default["default"](styles$1x['button'], (_classnames = {}, _classnames[styles$1x['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1x['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1x['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1x['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1x['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1x['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1x['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1x['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1x['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1x['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1x['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1x['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1x['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1x['button--loading']] = loading, _classnames[styles$1x['button--icon-only']] = isIconOnly, _classnames[styles$1x['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1x['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -1058,7 +1066,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     space: 8,
     alignItems: "center"
   }, children), loading && React__default["default"].createElement("div", {
-    className: styles$1v['button__spinner']
+    className: styles$1x['button__spinner']
   }, React__default["default"].createElement(Spinner, {
     theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   })));
@@ -1068,7 +1076,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
       overlay: title,
       ref: ref
     }, title && disabled ? React__default["default"].createElement("div", {
-      className: styles$1v['disabled-button-wrapper']
+      className: styles$1x['disabled-button-wrapper']
     }, ButtonElementResult) : ButtonElementResult)
   );
 };
@@ -10125,9 +10133,9 @@ var IconGreatMonochromatic = React.forwardRef(function (_ref, ref) {
 });
 IconGreatMonochromatic.displayName = 'IconGreatMonochromatic';
 
-var styles$1u = {"pagination-controls":"_S1co-"};
+var styles$1w = {"pagination-controls":"_S1co-"};
 
-var styles$1t = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
+var styles$1v = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
 
 var KeyboardKey = function KeyboardKey(_ref) {
   var _classNames;
@@ -10135,9 +10143,9 @@ var KeyboardKey = function KeyboardKey(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'dark' : _ref$theme;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1t['keyboard-key'], (_classNames = {}, _classNames[styles$1t['keyboard-key--light']] = theme === 'light', _classNames))
+    className: classnames__default["default"](styles$1v['keyboard-key'], (_classNames = {}, _classNames[styles$1v['keyboard-key--light']] = theme === 'light', _classNames))
   }, React__default["default"].createElement("span", {
-    className: styles$1t['keyboard-key__character']
+    className: styles$1v['keyboard-key__character']
   }, children));
 };
 
@@ -10343,7 +10351,7 @@ var PaginationControls = function PaginationControls(_ref) {
     }
   });
   return React__default["default"].createElement("div", _extends({}, dataProps, {
-    className: styles$1u['pagination-controls'],
+    className: styles$1w['pagination-controls'],
     "data-testid": testId
   }), React__default["default"].createElement(Button, {
     disabled: !hasPrevious,
@@ -10373,7 +10381,7 @@ var LINK_TARGET = {
   BLANK: '_blank'
 };
 
-var styles$1s = {"link":"_EiQ4c","link--contrast":"_weJDR"};
+var styles$1u = {"link":"_EiQ4c","link--contrast":"_weJDR"};
 
 var _excluded$bq = ["href", "target", "theme", "onClick", "children"];
 var Link = function Link(_ref) {
@@ -10390,7 +10398,7 @@ var Link = function Link(_ref) {
     dataProps = _getDataProps.dataProps;
   var ref = React__default["default"].useRef(null);
   return React__default["default"].createElement("a", _extends({}, dataProps, {
-    className: classnames__default["default"](styles$1s['link'], (_classNames = {}, _classNames[styles$1s['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1s['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
+    className: classnames__default["default"](styles$1u['link'], (_classNames = {}, _classNames[styles$1u['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1u['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
     href: href,
     target: target,
     onClick: onClick,
@@ -10413,7 +10421,7 @@ var useDropdownContext = function useDropdownContext() {
   return React__default["default"].useContext(DropdownContext);
 };
 
-var styles$1r = {"dropdown-pane":"_sp-pT"};
+var styles$1t = {"dropdown-pane":"_sp-pT"};
 
 var DROPDOWN_PANE_PADDING = 14;
 var calculateOverlayPosition$1 = function calculateOverlayPosition(triggerPosition, triggerOffsetHeight, panePosition, alignment) {
@@ -10551,7 +10559,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
   useKeyPress(['Escape'], onToggleDropdown);
   var overflow = maxHeight ? 'auto' : undefined;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1r['dropdown-pane'], (_classNames = {}, _classNames[styles$1r['dropdown-pane--with-padding']] = true, _classNames['dropdown-pane--custom-width'] = width !== undefined, _classNames)),
+    className: classnames__default["default"](styles$1t['dropdown-pane'], (_classNames = {}, _classNames[styles$1t['dropdown-pane--with-padding']] = true, _classNames['dropdown-pane--custom-width'] = width !== undefined, _classNames)),
     style: _extends({}, position, {
       width: width,
       maxHeight: maxHeight,
@@ -10580,7 +10588,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$1q = {"dropdown__trigger":"_AktVc"};
+var styles$1s = {"dropdown__trigger":"_AktVc"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -10591,7 +10599,7 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$1p = {"label":"_zv4ua","label--truncate":"_FPyID"};
+var styles$1r = {"label":"_zv4ua","label--truncate":"_FPyID"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
@@ -10644,7 +10652,7 @@ var Label = function Label(_ref) {
   var LabelElement = React__default["default"].createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames__default["default"](styles$1p['label'], (_classNames = {}, _classNames[styles$1p['label--truncate']] = shouldTruncate, _classNames))
+    className: classnames__default["default"](styles$1r['label'], (_classNames = {}, _classNames[styles$1r['label--truncate']] = shouldTruncate, _classNames))
   }, children);
   if (showTooltip) {
     return React__default["default"].createElement(Tooltip, {
@@ -10655,18 +10663,18 @@ var Label = function Label(_ref) {
   return LabelElement;
 };
 
-var styles$1o = {"caption":"_Qrxg5"};
+var styles$1q = {"caption":"_Qrxg5"};
 
 var Caption = function Caption(_ref) {
   var fieldId = _ref.fieldId,
     children = _ref.children;
   return React__default["default"].createElement("div", {
     id: fieldId && fieldId + "-describer",
-    className: styles$1o['caption']
+    className: styles$1q['caption']
   }, children);
 };
 
-var styles$1n = {"error-message":"_eS4YO"};
+var styles$1p = {"error-message":"_eS4YO"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
@@ -10674,7 +10682,7 @@ var ErrorMessage = function ErrorMessage(_ref) {
     testId = _ref.testId;
   return React__default["default"].createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$1n['error-message'],
+    className: styles$1p['error-message'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     space: 8,
@@ -10711,7 +10719,7 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$1m = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text--italic":"_NgSTT","text--underline":"_ouqVK","text--dotted-underline":"_zZ55-","text--monospace":"_Vi-V1","text--line-through":"_psV6T","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
+var styles$1o = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text--italic":"_NgSTT","text--underline":"_ouqVK","text--dotted-underline":"_zZ55-","text--monospace":"_Vi-V1","text--line-through":"_psV6T","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
 
 var _excluded$bp = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 var TextComponent = function TextComponent(_ref, ref) {
@@ -10737,7 +10745,7 @@ var TextComponent = function TextComponent(_ref, ref) {
       color: getColor(color),
       textWrap: textWrap
     }, positionStyles),
-    className: classnames__default["default"](styles$1m['text'], (_classnames = {}, _classnames[styles$1m['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1m['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1m['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1m['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1m['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1m['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1m['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1m['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1m['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1m['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1m['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1m['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1m['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1m['text__span']] = as === TEXT_TYPES.SPAN, _classnames)),
+    className: classnames__default["default"](styles$1o['text'], (_classnames = {}, _classnames[styles$1o['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1o['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1o['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1o['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1o['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1o['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1o['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1o['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1o['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1o['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1o['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1o['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1o['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1o['text__span']] = as === TEXT_TYPES.SPAN, _classnames)),
     'data-testid': testId
   }, dataProps, other, {
     ref: ref
@@ -10752,21 +10760,21 @@ var Text = React.forwardRef(TextComponent);
 var Bold = function Bold(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1m['text--bold'], styles$1m['text'])
+    className: classnames__default["default"](styles$1o['text--bold'], styles$1o['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1m['text--underline'], styles$1m['text'])
+    className: classnames__default["default"](styles$1o['text--underline'], styles$1o['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1m['text--italic'], styles$1m['text'])
+    className: classnames__default["default"](styles$1o['text--italic'], styles$1o['text'])
   }, children);
 };
 
@@ -10915,7 +10923,7 @@ var useFieldControllers = function useFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$1l = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
+var styles$1n = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
 
 var _excluded$bn = ["autoComplete", "autoFocus", "defaultValue", "disabled", "error", "id", "maxLength", "name", "caption", "label", "onBlur", "onChange", "onFocus", "onKeyDown", "placeholder", "value", "ref", "testId"];
 var useTextField = function useTextField(_ref) {
@@ -10955,7 +10963,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$1l['text-field'], (_classnames = {}, _classnames[styles$1l['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1n['text-field'], (_classnames = {}, _classnames[styles$1n['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -10985,7 +10993,7 @@ var useTextField = function useTextField(_ref) {
   };
 };
 
-var styles$1k = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
+var styles$1m = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -11020,16 +11028,16 @@ var AffixContainer = function AffixContainer(_ref) {
   if (!hasPrefix && !hasSuffix) {
     return children;
   }
-  var classes = classnames__default["default"](styles$1k['affix-container'], (_classnames = {}, _classnames[styles$1k['affix-container--prefixed']] = hasPrefix, _classnames[styles$1k['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames__default["default"](styles$1m['affix-container'], (_classnames = {}, _classnames[styles$1m['affix-container--prefixed']] = hasPrefix, _classnames[styles$1m['affix-container--suffixed']] = hasSuffix, _classnames));
   return React__default["default"].createElement("div", {
     className: classes,
     ref: container,
     "data-testid": testId
   }, hasPrefix && React__default["default"].createElement("div", {
-    className: styles$1k['prefix'],
+    className: styles$1m['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default["default"].createElement("div", {
-    className: styles$1k['suffix'],
+    className: styles$1m['suffix'],
     ref: suffixElement
   }, suffix));
 };
@@ -11238,7 +11246,7 @@ var Dropdown = function Dropdown(_ref) {
       paneRef: paneRef
     }
   }, triggerIsKnownButton ? React__default["default"].cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default["default"].createElement("button", _extends({}, triggerProps, {
-    className: styles$1q['dropdown__trigger'],
+    className: styles$1s['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default["default"].createElement(DropdownPane, {
@@ -11252,7 +11260,7 @@ var Dropdown = function Dropdown(_ref) {
   }, children));
 };
 
-var styles$1j = {"dropdown-list":"_91hvH","dropdown-list__item":"_NrB4V","dropdown-list__item--hover":"_aMs9c"};
+var styles$1l = {"dropdown-list":"_91hvH","dropdown-list__item":"_NrB4V","dropdown-list__item--hover":"_aMs9c"};
 
 var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
   var startIndex = 0;
@@ -11407,19 +11415,19 @@ var checkIsComponent = function checkIsComponent(element, config) {
   return isComponent;
 };
 
-var styles$1i = {"dropdown-list-divider":"_ISJ4M"};
+var styles$1k = {"dropdown-list-divider":"_ISJ4M"};
 
 var DropdownListDivider = function DropdownListDivider(_ref) {
   var testId = _ref.testId;
   return React__default["default"].createElement("div", {
-    className: styles$1i['dropdown-list-divider'],
+    className: styles$1k['dropdown-list-divider'],
     "data-testid": testId
   });
 };
 
-var styles$1h = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item__caption":"_7EI7m","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__prefix":"_dpo67","dropdown-list-item__suffix":"_ObP6B","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY","dropdown-list-item__suffix-spot":"_UA23u","dropdown-list-item__suffix-button":"_rvaeI"};
+var styles$1j = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item__caption":"_7EI7m","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__prefix":"_dpo67","dropdown-list-item__suffix":"_ObP6B","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY","dropdown-list-item__suffix-spot":"_UA23u","dropdown-list-item__suffix-button":"_rvaeI"};
 
-var styles$1g = {"dropdown-submenu":"_X4fIx"};
+var styles$1i = {"dropdown-submenu":"_X4fIx"};
 
 var DropdownSubmenu = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -11438,7 +11446,7 @@ var DropdownSubmenu = React.forwardRef(function (_ref, ref) {
     // so no keyboard handler is needed.
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     React__default["default"].createElement("div", {
-      className: styles$1g['dropdown-submenu'],
+      className: styles$1i['dropdown-submenu'],
       "data-submenu-direction": direction,
       style: position || DEFAULT_POSITION,
       onMouseEnter: openSubmenu,
@@ -11641,20 +11649,20 @@ var DropdownListItem = function DropdownListItem(_ref) {
     onClick && onClick(e);
   };
   var childrenContainer = React__default["default"].createElement("div", {
-    className: styles$1h['dropdown-list-item__container']
+    className: styles$1j['dropdown-list-item__container']
   }, prefix && React__default["default"].createElement("div", {
-    className: styles$1h['dropdown-list-item__prefix']
+    className: styles$1j['dropdown-list-item__prefix']
   }, prefix), React__default["default"].createElement("div", {
-    className: styles$1h['dropdown-list-item__content']
+    className: styles$1j['dropdown-list-item__content']
   }, React__default["default"].createElement(Stack, {
     space: 0,
     flex: [1]
   }, children, caption && React__default["default"].createElement("div", {
-    className: styles$1h['dropdown-list-item__caption']
+    className: styles$1j['dropdown-list-item__caption']
   }, caption))), (suffix || submenu) && React__default["default"].createElement("div", {
-    className: styles$1h['dropdown-list-item__suffix']
+    className: styles$1j['dropdown-list-item__suffix']
   }, suffix && openSubmenuOnSuffixClick && submenu ? React__default["default"].createElement("button", {
-    className: styles$1h['dropdown-list-item__suffix-button'],
+    className: styles$1j['dropdown-list-item__suffix-button'],
     onClick: function onClick(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -11665,19 +11673,19 @@ var DropdownListItem = function DropdownListItem(_ref) {
     "aria-label": "Open submenu",
     disabled: disabled
   }, suffix) : suffix, submenu && !suffix && React__default["default"].createElement("div", {
-    className: styles$1h['dropdown-list-item__suffix-spot']
+    className: styles$1j['dropdown-list-item__suffix-spot']
   }), submenu && !openSubmenuOnSuffixClick && React__default["default"].createElement(IconChevronRight, {
     size: "small"
   })));
   var linkItem = href && (reloadDocument ? React__default["default"].createElement("a", {
     href: href,
-    className: styles$1h['dropdown-list-item__link'],
+    className: styles$1j['dropdown-list-item__link'],
     target: target,
     tabIndex: -1
   }, childrenContainer) : React__default["default"].createElement(reactRouterDom.Link, {
     to: href,
     target: target,
-    className: styles$1h['dropdown-list-item__link'],
+    className: styles$1j['dropdown-list-item__link'],
     reloadDocument: false,
     tabIndex: -1,
     "data-testid": testId
@@ -11685,7 +11693,7 @@ var DropdownListItem = function DropdownListItem(_ref) {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$1h['dropdown-list-item'], (_classNames = {}, _classNames[styles$1h['dropdown-list-item--selected']] = selected, _classNames[styles$1h['dropdown-list-item--disabled']] = disabled, _classNames)),
+      className: classnames__default["default"](styles$1j['dropdown-list-item'], (_classNames = {}, _classNames[styles$1j['dropdown-list-item--selected']] = selected, _classNames[styles$1j['dropdown-list-item--disabled']] = disabled, _classNames)),
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
       },
@@ -11827,7 +11835,7 @@ var DropdownList = function DropdownList(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightItemIndex]);
   return React__default["default"].createElement("ul", {
-    className: styles$1j['dropdown-list'],
+    className: styles$1l['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default["default"].Children.toArray(children).filter(Boolean).map(function (child, index) {
@@ -11839,7 +11847,7 @@ var DropdownList = function DropdownList(_ref) {
     var divider = (_items$index2 = items[index]) == null ? void 0 : _items$index2.divider;
     return React__default["default"].createElement("li", {
       key: index,
-      className: classnames__default["default"](styles$1j['dropdown-list__item'], (_classNames = {}, _classNames[styles$1j['dropdown-list__item--hover']] = focusedItem === index && isInteractive, _classNames)),
+      className: classnames__default["default"](styles$1l['dropdown-list__item'], (_classNames = {}, _classNames[styles$1l['dropdown-list__item--hover']] = focusedItem === index && isInteractive, _classNames)),
       onMouseEnter: divider ? undefined : function () {
         return setFocusOnItem(index);
       },
@@ -11865,7 +11873,7 @@ var KebabMenu = function KebabMenu(_ref) {
   })));
 };
 
-var styles$1f = {"card":"_TXXpM","card__body":"_C3waP","card__body--interactive":"_uc-GV","card--focus":"_ft0I1","card__body--focus":"_wx2MU","card__body--disabled":"_TQDZH","card__body--with-kebab":"_kkYit","card__kebab":"_xrEdS","card__kebab--disabled":"_0WiOn","card__close":"_yODES","card__close--disabled":"_Vqf6o"};
+var styles$1h = {"card":"_TXXpM","card__body":"_C3waP","card__body--interactive":"_uc-GV","card--focus":"_ft0I1","card__body--focus":"_wx2MU","card__body--disabled":"_TQDZH","card__body--with-kebab":"_kkYit","card__kebab":"_xrEdS","card__kebab--disabled":"_0WiOn","card__close":"_yODES","card__close--disabled":"_Vqf6o"};
 
 var CardContext = React.createContext({
   isCardMounted: false
@@ -11900,19 +11908,19 @@ var Card = function Card(_ref) {
       isCardMounted: true
     }
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1f['card']),
+    className: classnames__default["default"](styles$1h['card']),
     style: positionStyles
   }, dataProps), onClick ? React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$1f['card__body'], styles$1f['card__body--interactive'], (_classnames = {}, _classnames[styles$1f['card__body--disabled']] = disabled, _classnames[styles$1f['card__body--focus']] = isSelected, _classnames[styles$1f['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames__default["default"](styles$1h['card__body'], styles$1h['card__body--interactive'], (_classnames = {}, _classnames[styles$1h['card__body--disabled']] = disabled, _classnames[styles$1h['card__body--focus']] = isSelected, _classnames[styles$1h['card__body--with-kebab']] = actions, _classnames)),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick,
     disabled: disabled
   }, children) : React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1f['card__body'], (_classnames2 = {}, _classnames2[styles$1f['card__body--disabled']] = disabled, _classnames2[styles$1f['card__body--focus']] = isSelected, _classnames2[styles$1f['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames__default["default"](styles$1h['card__body'], (_classnames2 = {}, _classnames2[styles$1h['card__body--disabled']] = disabled, _classnames2[styles$1h['card__body--focus']] = isSelected, _classnames2[styles$1h['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1f['card__kebab'], (_classnames3 = {}, _classnames3[styles$1f['card__kebab--disabled']] = disabled, _classnames3))
+    className: classnames__default["default"](styles$1h['card__kebab'], (_classnames3 = {}, _classnames3[styles$1h['card__kebab--disabled']] = disabled, _classnames3))
   }, React__default["default"].createElement(KebabMenu, {
     actions: onClose ? actions.concat({
       action: 'dismiss',
@@ -11920,14 +11928,14 @@ var Card = function Card(_ref) {
       onAction: onClose
     }) : actions
   })), !actions && onClose && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1f['card__close'], (_classnames4 = {}, _classnames4[styles$1f['card__close--disabled']] = disabled, _classnames4))
+    className: classnames__default["default"](styles$1h['card__close'], (_classnames4 = {}, _classnames4[styles$1h['card__close--disabled']] = disabled, _classnames4))
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
   }, React__default["default"].createElement(IconTimes, null)))));
 };
 
-var styles$1e = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
+var styles$1g = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
 
 /**
  * @deprecated Use `<EmptyState as='card' />` instead
@@ -11947,7 +11955,7 @@ var CalloutCard = function CalloutCard(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: 12
   }, React__default["default"].createElement("div", {
-    className: styles$1e['callout-card__header']
+    className: styles$1g['callout-card__header']
   }, React__default["default"].createElement(Text, {
     as: "body",
     color: "primary-color"
@@ -11962,7 +11970,7 @@ var CalloutCard = function CalloutCard(_ref) {
     alt: String(title) + String(header),
     width: "354px"
   })), onClose && React__default["default"].createElement("div", {
-    className: styles$1e['callout-card__close']
+    className: styles$1g['callout-card__close']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
@@ -11977,7 +11985,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$1d = {"breadcrumb-item":"_fo7-A"};
+var styles$1f = {"breadcrumb-item":"_fo7-A"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -11991,24 +11999,24 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   // This is neessary to support older versions of react-router-dom
   return reloadDocument ? React__default["default"].createElement("a", {
     href: href,
-    className: styles$1d['breadcrumb-item'],
+    className: styles$1f['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default["default"].createElement(reactRouterDom.Link, {
     to: href,
-    className: styles$1d['breadcrumb-item'],
+    className: styles$1f['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$1c = {"page-breadcrumbs":"_QjIgc"};
+var styles$1e = {"page-breadcrumbs":"_QjIgc"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default["default"].createElement("div", {
-    className: styles$1c['page-breadcrumbs']
+    className: styles$1e['page-breadcrumbs']
   }, React__default["default"].createElement(Breadcrumbs, null, items));
 };
 var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
@@ -12030,7 +12038,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$1b = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
+var styles$1d = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -12052,7 +12060,7 @@ var Page = function Page(_ref) {
   var hasHeader = title || actions;
   var hasPageBlocks = hasHeader || banner || filterBar;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1b['page'], (_classNames = {}, _classNames[styles$1b['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$1b['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames__default["default"](styles$1d['page'], (_classNames = {}, _classNames[styles$1d['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$1d['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default["default"].createElement(Stack, {
     space: 20
@@ -12072,15 +12080,15 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default["default"].createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
-var styles$1a = {"page-layout":"_Scw7-","page-layout__nav-container":"_v--DF","page-layout__nav-list":"_dJeZe","page-layout__content":"_hHi70","page-layout__side-nav-content":"_vTMjp"};
+var styles$1c = {"page-layout":"_Scw7-","page-layout__nav-container":"_v--DF","page-layout__nav-list":"_dJeZe","page-layout__content":"_hHi70","page-layout__side-nav-content":"_vTMjp"};
 
-var styles$19 = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
+var styles$1b = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
 
-var styles$18 = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
+var styles$1a = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
 
-var styles$17 = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B"};
+var styles$19 = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B"};
 
-var styles$16 = {"header":"_tgpG9","header__close-button":"_b1dgU","sub-header":"_c2nm4"};
+var styles$18 = {"header":"_tgpG9","header__close-button":"_b1dgU","sub-header":"_c2nm4"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -12089,7 +12097,7 @@ var ModalHeader = function ModalHeader(_ref) {
     loading = _ref.loading;
   if (!header && !subHeader) {
     return onClose ? React__default["default"].createElement("div", {
-      className: styles$16['header__close-button']
+      className: styles$18['header__close-button']
     }, React__default["default"].createElement(Button, {
       theme: "link-icon",
       onClick: onClose,
@@ -12105,13 +12113,13 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default["default"].createElement("span", {
-    className: styles$16['header']
+    className: styles$18['header']
   }, header), onClose && React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose,
     disabled: loading
   }, React__default["default"].createElement(IconTimes, null))), subHeader && React__default["default"].createElement("div", {
-    className: styles$16['sub-header']
+    className: styles$18['sub-header']
   }, subHeader));
 };
 
@@ -12168,14 +12176,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$17['overlay'],
-      afterOpen: styles$17['overlay--after-open'],
-      beforeClose: styles$17['overlay--before-close']
+      base: styles$19['overlay'],
+      afterOpen: styles$19['overlay--after-open'],
+      beforeClose: styles$19['overlay--before-close']
     },
     className: {
-      base: styles$17['content'],
-      afterOpen: styles$17['content--after-open'],
-      beforeClose: styles$17['content--before-close']
+      base: styles$19['content'],
+      afterOpen: styles$19['content--after-open'],
+      beforeClose: styles$19['content--before-close']
     },
     data: dataProps
   }, React__default["default"].createElement(ModalHeader, {
@@ -12219,7 +12227,7 @@ var useScrollShadow = function useScrollShadow() {
   };
 };
 
-var styles$15 = {"modal-body":"_4YK4k","modal-body--with-scroll-shadow":"_wo1vv","modal-body__inner-div":"_9u6xC"};
+var styles$17 = {"modal-body":"_4YK4k","modal-body--with-scroll-shadow":"_wo1vv","modal-body__inner-div":"_9u6xC"};
 
 var ModalBody = function ModalBody(_ref) {
   var _classNames;
@@ -12229,15 +12237,15 @@ var ModalBody = function ModalBody(_ref) {
     ref = _useScrollShadow.ref,
     showScrollShadow = _useScrollShadow.showScrollShadow;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$15['modal-body'], (_classNames = {}, _classNames[styles$15['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    className: classnames__default["default"](styles$17['modal-body'], (_classNames = {}, _classNames[styles$17['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
     ref: ref,
     "data-testid": testId
   }, React__default["default"].createElement("div", {
-    className: styles$15['modal-body__inner-div']
+    className: styles$17['modal-body__inner-div']
   }, children));
 };
 
-var styles$14 = {"modal-footer":"_bezlP","tertiary-container":"_EdqHx"};
+var styles$16 = {"modal-footer":"_bezlP","tertiary-container":"_EdqHx"};
 
 var updateButtonProps$1 = function updateButtonProps(button, newProps) {
   if (!button) {
@@ -12277,7 +12285,7 @@ var ModalFooter = function ModalFooter(_ref) {
     }, React__default["default"].createElement(Inline, {
       justifyContent: "space-between"
     }, React__default["default"].createElement("div", {
-      className: classnames__default["default"]((_classnames = {}, _classnames[styles$14['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames__default["default"]((_classnames = {}, _classnames[styles$16['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default["default"].createElement("div", null)), React__default["default"].createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -12293,7 +12301,7 @@ var FooterContainer = function FooterContainer(_ref2) {
     displayName: 'Inline'
   });
   return React__default["default"].createElement("div", {
-    className: styles$14['modal-footer'],
+    className: styles$16['modal-footer'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     justifyContent: "end",
@@ -12306,7 +12314,7 @@ var dayOverridesStyles = {"root":"_et9Fs","table":"_l7Mis","caption":"_XGu8K","h
 
 var weekOverridesStyles = {"root":"_QLSA6","table":"_96jgF","caption":"_4ySMr","head_cell":"_2AoB4","day_today":"_Snv-V","day_outside":"_Zf-6C","nav_button":"_iOY4h","day_range_middle":"_e0lOH","day_range_start":"_4N7l-","day_range_end":"_fMjHG","row":"_GqE-5"};
 
-var styles$13 = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
+var styles$15 = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse__default["default"](str, format, new Date(), {
@@ -12402,6 +12410,50 @@ var CALENDAR_PLACEMENT = {
   TOP: 'top'
 };
 
+var HIGHLIGHT_SHAPE = {
+  CIRCLE: 'circle',
+  CIRCLE_DASHED: 'circle-dashed',
+  SQUARE: 'square',
+  SQUARE_DASHED: 'square-dashed',
+  OCTAGON: 'octagon',
+  STAR: 'star'
+};
+var DEFAULT_HIGHLIGHT_THEME = 'success';
+var DEFAULT_HIGHLIGHT_SHAPE = 'circle';
+var toMatcherArray = function toMatcherArray(dates) {
+  return Array.isArray(dates) ? dates : [dates];
+};
+/**
+ * Turns the public `highlightedDays` array into per-group react-day-picker
+ * modifiers. When a day matches more than one group, the earliest group in
+ * the array wins its indicator (later groups' matchers exclude days already
+ * owned by an earlier group), so each day renders a single shape.
+ */
+var getHighlightModifiers = function getHighlightModifiers(groups) {
+  var priorMatchers = [];
+  return groups.map(function (group, index) {
+    var _group$shape, _group$theme;
+    var ownMatchers = toMatcherArray(group.dates);
+    // Snapshot of every earlier group's matchers, used to enforce
+    // first-group-wins precedence on overlapping days.
+    var earlier = priorMatchers.slice();
+    priorMatchers.push(ownMatchers);
+    return {
+      key: "highlighted-" + index,
+      matcher: function matcher(date) {
+        return reactDayPicker.isMatch(date, ownMatchers) && !earlier.some(function (matchers) {
+          return reactDayPicker.isMatch(date, matchers);
+        });
+      },
+      shape: (_group$shape = group.shape) != null ? _group$shape : DEFAULT_HIGHLIGHT_SHAPE,
+      theme: (_group$theme = group.theme) != null ? _group$theme : DEFAULT_HIGHLIGHT_THEME,
+      label: group.label
+    };
+  });
+};
+
+var styles$14 = {"day_highlight":"_ucr9m","theme-success":"_mLAwT","theme-danger":"_Uji-g","theme-warning":"_pe9ss","theme-info":"_OfzGg","theme-upsell":"_Pywaj","theme-neutral":"_5WRkx","shape-circle":"_0LzN8","legendShape":"_N-Dl4","shape-circle-dashed":"_eCqCU","shape-square":"_-pO-1","shape-square-dashed":"_7PoYh","shape-octagon":"_ywc-V","shape-star":"_vF4Ka","legend":"_iB2Db","legendItem":"_YauE7","legendLabel":"_lMmc7"};
+
 var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
   if (!calendarDimensions) {
     return {
@@ -12453,6 +12505,238 @@ var getVerticalPosition = function getVerticalPosition(anchorPosition, placement
     };
   }
 };
+/**
+ * Builds the DayPicker `modifiers`/`modifiersClassNames` for the given
+ * highlight groups, plus the resolved items for the legend. Shared by every
+ * calendar component so highlights look and behave identically.
+ */
+var buildHighlightDayPickerProps = function buildHighlightDayPickerProps(highlightedDays) {
+  var items = highlightedDays ? getHighlightModifiers(Array.isArray(highlightedDays) ? highlightedDays : [highlightedDays]) : [];
+  if (!items.length) {
+    return {
+      items: items
+    };
+  }
+  var modifiers = {};
+  var modifiersClassNames = {};
+  items.forEach(function (_ref) {
+    var key = _ref.key,
+      matcher = _ref.matcher,
+      shape = _ref.shape,
+      theme = _ref.theme;
+    modifiers[key] = matcher;
+    modifiersClassNames[key] = classnames__default["default"](styles$14.day_highlight, styles$14["shape-" + shape], styles$14["theme-" + theme]);
+  });
+  return {
+    modifiers: modifiers,
+    modifiersClassNames: modifiersClassNames,
+    items: items
+  };
+};
+
+var styles$13 = {"calendar-highlights":"_TjAon","calendar-highlights__item":"_BbYmq","calendar-highlights__shape":"_utSi-","calendar-highlights__shape--square":"_mP9vd","calendar-highlights__shape--circle":"_6zlZT"};
+
+/** Legend rendered beneath a calendar, one row item per highlight group. */
+var CalendarHighlights = function CalendarHighlights(_ref) {
+  var highlights = _ref.highlights;
+  if (!highlights.length) {
+    return null;
+  }
+  return React__default["default"].createElement("div", {
+    className: styles$13['calendar-highlights']
+  }, React__default["default"].createElement(Inline, {
+    flexWrap: "wrap",
+    space: {
+      column: 12,
+      row: 8
+    },
+    alignItems: "center",
+    justifyContent: "center"
+  }, highlights.map(function (_ref2) {
+    var label = _ref2.label,
+      shape = _ref2.shape,
+      theme = _ref2.theme;
+    return React__default["default"].createElement("div", {
+      key: label,
+      className: styles$13['calendar-highlights__item']
+    }, React__default["default"].createElement(Shape, {
+      shape: shape,
+      theme: theme
+    }), React__default["default"].createElement("span", null, label));
+  })));
+};
+var Shape = function Shape(_ref3) {
+  var shape = _ref3.shape,
+    theme = _ref3.theme;
+  switch (shape) {
+    case 'square':
+      return React__default["default"].createElement("div", {
+        className: classnames__default["default"](styles$13['calendar-highlights__shape'], styles$13['calendar-highlights__shape--square']),
+        style: {
+          borderColor: COLORS[theme + "-color"]
+        }
+      });
+    case 'square-dashed':
+      return React__default["default"].createElement("div", {
+        className: styles$13['calendar-highlights__shape']
+      }, React__default["default"].createElement(SquareDashedShape, {
+        theme: theme
+      }));
+    case 'circle':
+      return React__default["default"].createElement("div", {
+        className: classnames__default["default"](styles$13['calendar-highlights__shape'], styles$13['calendar-highlights__shape--circle']),
+        style: {
+          borderColor: COLORS[theme + "-color"]
+        }
+      });
+    case 'circle-dashed':
+      return React__default["default"].createElement("div", {
+        className: "" + styles$13['calendar-highlights__shape']
+      }, React__default["default"].createElement(CircleDashedShape, {
+        theme: theme
+      }));
+    case 'octagon':
+      return React__default["default"].createElement("div", {
+        className: "" + styles$13['calendar-highlights__shape']
+      }, React__default["default"].createElement(OctagonShape, {
+        theme: theme
+      }));
+    case 'star':
+      return React__default["default"].createElement("div", {
+        className: "" + styles$13['calendar-highlights__shape']
+      }, React__default["default"].createElement(StarShape, {
+        theme: theme
+      }));
+    default:
+      return React__default["default"].createElement("div", {
+        className: styles$13['calendar-highlight__shape']
+      }, shape);
+  }
+};
+var SquareDashedShape = function SquareDashedShape(_ref4) {
+  var theme = _ref4.theme;
+  return React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12"
+  }, React__default["default"].createElement("rect", {
+    x: "0",
+    y: "0",
+    width: "5",
+    height: "5",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("rect", {
+    x: "3",
+    y: "3",
+    width: "2",
+    height: "2",
+    fill: COLORS['surface-container']
+  }), React__default["default"].createElement("rect", {
+    x: "7",
+    y: "0",
+    width: "5",
+    height: "5",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("rect", {
+    x: "7",
+    y: "3",
+    width: "2",
+    height: "2",
+    fill: COLORS['surface-container']
+  }), React__default["default"].createElement("rect", {
+    x: "0",
+    y: "7",
+    width: "5",
+    height: "5",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("rect", {
+    x: "3",
+    y: "7",
+    width: "2",
+    height: "2",
+    fill: COLORS['surface-container']
+  }), React__default["default"].createElement("rect", {
+    x: "7",
+    y: "7",
+    width: "5",
+    height: "5",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("rect", {
+    x: "7",
+    y: "7",
+    width: "2",
+    height: "2",
+    fill: COLORS['surface-container']
+  }));
+};
+var CircleDashedShape = function CircleDashedShape(_ref5) {
+  var theme = _ref5.theme;
+  return React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12"
+  }, React__default["default"].createElement("path", {
+    d: "M 6.000 3.000 L 6.000 0.500 A 5.5 5.5 0 0 1 7.700 0.769 L 6.927 3.147 A 3.0 3.0 0 0 0 6.000 3.000 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 7.763 3.573 L 9.233 1.550 A 5.5 5.5 0 0 1 10.450 2.767 L 8.427 4.237 A 3.0 3.0 0 0 0 7.763 3.573 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 8.853 5.073 L 11.231 4.300 A 5.5 5.5 0 0 1 11.500 6.000 L 9.000 6.000 A 3.0 3.0 0 0 0 8.853 5.073 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 8.853 6.927 L 11.231 7.700 A 5.5 5.5 0 0 1 10.450 9.233 L 8.427 7.763 A 3.0 3.0 0 0 0 8.853 6.927 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 7.763 8.427 L 9.233 10.450 A 5.5 5.5 0 0 1 7.700 11.231 L 6.927 8.853 A 3.0 3.0 0 0 0 7.763 8.427 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 6.000 9.000 L 6.000 11.500 A 5.5 5.5 0 0 1 4.300 11.231 L 5.073 8.853 A 3.0 3.0 0 0 0 6.000 9.000 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 4.237 8.427 L 2.767 10.450 A 5.5 5.5 0 0 1 1.550 9.233 L 3.573 7.763 A 3.0 3.0 0 0 0 4.237 8.427 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 3.147 6.927 L 0.769 7.700 A 5.5 5.5 0 0 1 0.500 6.000 L 3.000 6.000 A 3.0 3.0 0 0 0 3.147 6.927 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 3.147 5.073 L 0.769 4.300 A 5.5 5.5 0 0 1 1.550 2.767 L 3.573 4.237 A 3.0 3.0 0 0 0 3.147 5.073 Z",
+    fill: COLORS[theme + "-color"]
+  }), React__default["default"].createElement("path", {
+    d: "M 4.237 3.573 L 2.767 1.550 A 5.5 5.5 0 0 1 4.300 0.769 L 5.073 3.147 A 3.0 3.0 0 0 0 4.237 3.573 Z",
+    fill: COLORS[theme + "-color"]
+  }));
+};
+var OctagonShape = function OctagonShape(_ref6) {
+  var theme = _ref6.theme;
+  return React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none"
+  }, React__default["default"].createElement("path", {
+    d: "M10.4971 4.13281L10.499 7.86035L7.86621 10.4971L4.13867 10.499L1.50195 7.86621L1.5 4.13867L4.13281 1.50195L7.86035 1.5L10.4971 4.13281Z",
+    stroke: COLORS[theme + "-color"],
+    strokeWidth: "3"
+  }));
+};
+var StarShape = function StarShape(_ref7) {
+  var theme = _ref7.theme;
+  return React__default["default"].createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default["default"].createElement("path", {
+    d: "M6.72168 2.82812L7.09082 3.36719L7.73242 3.24707L8.98926 3.00977L8.75293 4.26758L8.63281 4.90918L9.17188 5.27832L10.2275 6L9.17188 6.72168L8.63281 7.09082L8.75293 7.73242L8.98926 8.98926L7.73242 8.75293L7.09082 8.63281L6.72168 9.17188L6 10.2275L5.27832 9.17188L4.90918 8.63281L4.26758 8.75293L3.00977 8.98926L3.24707 7.73242L3.36719 7.09082L2.82812 6.72168L1.77148 6L2.82812 5.27832L3.36719 4.90918L3.24707 4.26758L3.00977 3.00977L4.26758 3.24707L4.90918 3.36719L5.27832 2.82812L6 1.77148L6.72168 2.82812Z",
+    stroke: COLORS[theme + "-color"],
+    strokeWidth: "2"
+  }));
+};
 
 /**Calendar overlay component*/
 var Calendar = function Calendar(_ref) {
@@ -12467,6 +12751,7 @@ var Calendar = function Calendar(_ref) {
     onSelect = _ref.onSelect,
     onClickOutside = _ref.onClickOutside,
     disabledDays = _ref.disabledDays,
+    highlightedDays = _ref.highlightedDays,
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
     onMonthChange = _ref.onMonthChange;
@@ -12520,8 +12805,11 @@ var Calendar = function Calendar(_ref) {
   var styleOverrides = mode === CALENDAR_MODE.WEEK ? weekOverridesStyles : dayOverridesStyles;
   var MONTH_NAMES = getMonths(translate);
   var DAYS = getDays(translate);
+  var highlight = buildHighlightDayPickerProps(highlightedDays);
   var defaultProps = {
     classNames: _extends({}, originalStylers__default["default"], styleOverrides),
+    modifiers: highlight.modifiers,
+    modifiersClassNames: highlight.modifiersClassNames,
     onDayClick: function onDayClick(day, activeModifiers) {
       var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
         return modifier.includes('disabled');
@@ -12550,9 +12838,9 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$13['calendar']
+    className: styles$15['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$13['calendar__overlay'],
+    className: styles$15['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -12569,7 +12857,9 @@ var Calendar = function Calendar(_ref) {
     mode: "range",
     selected: selectedRange,
     captionLayout: "dropdown-buttons"
-  }, defaultProps)))));
+  }, defaultProps)), React__default["default"].createElement(CalendarHighlights, {
+    highlights: highlight.items
+  }))));
 };
 
 var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
@@ -12835,7 +13125,7 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$18['badge'], (_classnames = {}, _classnames[styles$18['badge--success']] = theme === 'success', _classnames[styles$18['badge--danger']] = theme === 'danger', _classnames[styles$18['badge--info']] = theme === 'info', _classnames[styles$18['badge--warning']] = theme === 'warning', _classnames[styles$18['badge--numeric']] = Number.isFinite(children), _classnames)),
+    className: classnames__default["default"](styles$1a['badge'], (_classnames = {}, _classnames[styles$1a['badge--success']] = theme === 'success', _classnames[styles$1a['badge--danger']] = theme === 'danger', _classnames[styles$1a['badge--info']] = theme === 'info', _classnames[styles$1a['badge--warning']] = theme === 'warning', _classnames[styles$1a['badge--numeric']] = Number.isFinite(children), _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -12846,23 +13136,23 @@ var MenuItem = function MenuItem(_ref) {
   var _classNames, _classNames2;
   var menu = _ref.menu;
   return React__default["default"].createElement("li", {
-    className: classnames__default["default"](styles$19['menu-item'], (_classNames = {}, _classNames[styles$19['menu-item--with-badge']] = !!menu.suffix, _classNames))
+    className: classnames__default["default"](styles$1b['menu-item'], (_classNames = {}, _classNames[styles$1b['menu-item--with-badge']] = !!menu.suffix, _classNames))
   }, menu.reloadDocument ? React__default["default"].createElement("a", {
     href: menu.to,
-    className: classnames__default["default"]((_classNames2 = {}, _classNames2[styles$19['menu-item--active']] = menu.isActive, _classNames2))
+    className: classnames__default["default"]((_classNames2 = {}, _classNames2[styles$1b['menu-item--active']] = menu.isActive, _classNames2))
   }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
-    className: styles$19['menu-item__badge']
+    className: styles$1b['menu-item__badge']
   }, React__default["default"].createElement(Badge, null, menu.suffix))) : React__default["default"].createElement(reactRouterDom.NavLink, {
     to: menu.to,
     // @ts-expect-error This is only available on v5
-    activeClassName: styles$19['menu-item--active'],
+    activeClassName: styles$1b['menu-item--active'],
     className: function className(_ref2) {
       var isActive = _ref2.isActive;
-      return isActive ? styles$19['menu-item--active'] : '';
+      return isActive ? styles$1b['menu-item--active'] : '';
     },
     exact: true
   }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
-    className: styles$19['menu-item__badge']
+    className: styles$1b['menu-item__badge']
   }, React__default["default"].createElement(Badge, null, menu.suffix))));
 };
 
@@ -12872,9 +13162,9 @@ var PageLayout = function PageLayout(_ref) {
     menu = _ref.menu,
     sideNavContent = _ref.sideNavContent;
   return React__default["default"].createElement("div", {
-    className: styles$1a['page-layout']
+    className: styles$1c['page-layout']
   }, React__default["default"].createElement("div", {
-    className: styles$1a['page-layout__nav-container']
+    className: styles$1c['page-layout__nav-container']
   }, React__default["default"].createElement(Stack, {
     space: 12
   }, React__default["default"].createElement(Text, {
@@ -12883,7 +13173,7 @@ var PageLayout = function PageLayout(_ref) {
     ml: 20,
     mr: 35
   }, title), React__default["default"].createElement("ul", {
-    className: styles$1a['page-layout__nav-list']
+    className: styles$1c['page-layout__nav-list']
   }, menu.filter(function (menu) {
     return !('isVisible' in menu) || (menu == null ? void 0 : menu.isVisible) === true;
   }).map(function (menuItem, index) {
@@ -12892,9 +13182,9 @@ var PageLayout = function PageLayout(_ref) {
       menu: menuItem
     });
   })), sideNavContent && React__default["default"].createElement("div", {
-    className: styles$1a['page-layout__side-nav-content']
+    className: styles$1c['page-layout__side-nav-content']
   }, sideNavContent))), React__default["default"].createElement("div", {
-    className: styles$1a['page-layout__content']
+    className: styles$1c['page-layout__content']
   }, children));
 };
 
@@ -15097,7 +15387,7 @@ var CreateInputForm = function CreateInputForm(_ref) {
     flex: [1],
     flexItems: true
   }, React__default["default"].createElement("input", {
-    className: classnames__default["default"](styles$1l['text-field'], inputClassName),
+    className: classnames__default["default"](styles$1n['text-field'], inputClassName),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -15581,9 +15871,9 @@ var CalendarMonth = function CalendarMonth(_ref) {
   }
   var MONTHS = [].concat(Array(12).keys());
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$13['calendar']
+    className: styles$15['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$13['calendar__overlay'],
+    className: styles$15['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -15663,6 +15953,7 @@ var DateFilter = function DateFilter(_ref) {
     weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
     value = _ref.value,
     onChange = _ref.onChange,
+    highlightedDays = _ref.highlightedDays,
     testId = _ref.testId;
   var calendarAnchorRef = React.useRef(null);
   var _useState = React.useState(false),
@@ -15719,6 +16010,7 @@ var DateFilter = function DateFilter(_ref) {
     anchorRef: calendarAnchorRef,
     weekStart: weekStart,
     mode: mode,
+    highlightedDays: highlightedDays,
     position: "bottom"
   }));
 };
@@ -16896,6 +17188,7 @@ var DateField = function DateField(_ref) {
     inputId = _ref.id,
     value = _ref.value,
     _disabledDays = _ref.disabledDays,
+    highlightedDays = _ref.highlightedDays,
     initialMonth = _ref.initialMonth,
     _ref$format = _ref.format,
     format = _ref$format === void 0 ? 'MM/dd/yyyy' : _ref$format,
@@ -17015,6 +17308,7 @@ var DateField = function DateField(_ref) {
     disabledDays: function disabledDays(day) {
       return _disabledDays ? _disabledDays(setToMidnight(day)) : false;
     },
+    highlightedDays: highlightedDays,
     initialMonth: initialMonth,
     onMonthChange: onMonthChange,
     weekStart: weekStart
@@ -17094,6 +17388,7 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
     onSelect = _ref.onSelect,
     onClickOutside = _ref.onClickOutside,
     disabledDays = _ref.disabledDays,
+    highlightedDays = _ref.highlightedDays,
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
     onMonthChange = _ref.onMonthChange,
@@ -17144,10 +17439,11 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
   var datePickerProps = mode === 'start-date' ? startDateProps : endDateProps;
   var DAYS = getDays(translate);
   var MONTH_NAMES = getMonths(translate);
+  var highlight = buildHighlightDayPickerProps(highlightedDays);
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$13['calendar']
+    className: styles$15['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$13['calendar__overlay'],
+    className: styles$15['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -17171,6 +17467,8 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
       to: end
     },
     disabled: disabledDays,
+    modifiers: highlight.modifiers,
+    modifiersClassNames: highlight.modifiersClassNames,
     showOutsideDays: true,
     weekStartsOn: weekStart,
     max: maxDays,
@@ -17186,7 +17484,9 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
         return DAYS[date.getDay()].substring(0, 2);
       }
     }
-  }, datePickerProps)))));
+  }, datePickerProps)), React__default["default"].createElement(CalendarHighlights, {
+    highlights: highlight.items
+  }))));
 };
 
 var FromDate = function FromDate(_ref) {
@@ -17194,6 +17494,7 @@ var FromDate = function FromDate(_ref) {
     id = _ref.id,
     format = _ref.format,
     disabledDays = _ref.disabledDays,
+    highlightedDays = _ref.highlightedDays,
     start = _ref.start,
     end = _ref.end,
     placeholder = _ref.placeholder,
@@ -17246,6 +17547,7 @@ var FromDate = function FromDate(_ref) {
     start: start,
     end: end,
     disabledDays: disabledDaysChecks,
+    highlightedDays: highlightedDays,
     weekStart: weekStart,
     maxDays: maxDays,
     mode: "start-date"
@@ -17256,6 +17558,7 @@ var ToDateElement = function ToDateElement(_ref, ref) {
   var name = _ref.name,
     format = _ref.format,
     disabledDays = _ref.disabledDays,
+    highlightedDays = _ref.highlightedDays,
     start = _ref.start,
     end = _ref.end,
     placeholder = _ref.placeholder,
@@ -17303,6 +17606,7 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     start: start,
     end: end,
     disabledDays: disabledDaysChecks,
+    highlightedDays: highlightedDays,
     weekStart: weekStart,
     maxDays: maxDays,
     mode: "end-date"
@@ -17317,6 +17621,7 @@ var DateRangeField = function DateRangeField(_ref) {
     inputId = _ref.id,
     value = _ref.value,
     disabledDays = _ref.disabledDays,
+    highlightedDays = _ref.highlightedDays,
     _ref$format = _ref.format,
     format = _ref$format === void 0 ? 'MM/dd/yyyy' : _ref$format,
     onChange = _ref.onChange,
@@ -17369,6 +17674,7 @@ var DateRangeField = function DateRangeField(_ref) {
     maxDays: maxDays,
     disabled: disabled,
     disabledDays: typeof disabledDays === 'object' && ('start' in disabledDays || 'end' in disabledDays) ? (_disabledDays$start = disabledDays.start) != null ? _disabledDays$start : undefined : disabledDays,
+    highlightedDays: highlightedDays,
     readOnly: readOnly,
     onChange: function onChange(val) {
       return controllers.onChange({
@@ -17394,6 +17700,7 @@ var DateRangeField = function DateRangeField(_ref) {
     maxDays: maxDays,
     disabled: disabled,
     disabledDays: typeof disabledDays === 'object' && ('start' in disabledDays || 'end' in disabledDays) ? (_disabledDays$end = disabledDays.end) != null ? _disabledDays$end : undefined : disabledDays,
+    highlightedDays: highlightedDays,
     readOnly: readOnly,
     onBlur: controllers.onBlur,
     onChange: function onChange(val) {
@@ -17414,6 +17721,7 @@ var WeekField = function WeekField(_ref) {
     inputId = _ref.id,
     value = _ref.value,
     _disabledDays = _ref.disabledDays,
+    highlightedDays = _ref.highlightedDays,
     initialMonth = _ref.initialMonth,
     _ref$format = _ref.format,
     format = _ref$format === void 0 ? 'MM/dd/yyyy' : _ref$format,
@@ -17502,6 +17810,7 @@ var WeekField = function WeekField(_ref) {
     disabledDays: function disabledDays(day) {
       return _disabledDays ? _disabledDays(setToMidnight(day)) : false;
     },
+    highlightedDays: highlightedDays,
     initialMonth: initialMonth,
     mode: "week",
     weekStart: weekStart
@@ -18205,7 +18514,7 @@ var usePhoneField = function usePhoneField(_ref) {
     'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
     'aria-invalid': hasError,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$1l['text-field'], (_classnames = {}, _classnames[styles$1l['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1n['text-field'], (_classnames = {}, _classnames[styles$1n['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     id: controllers.id,
@@ -19392,6 +19701,66 @@ var ColorFieldElement = function ColorFieldElement(props, ref) {
 };
 var ColorField = React.forwardRef(ColorFieldElement);
 
+/**
+ * Matches the nth occurrence of a weekday within its month.
+ *
+ * @example nthWeekdayOfMonth(1, 1)       // first Monday of every month
+ * @example nthWeekdayOfMonth(5, 'last')  // last Friday of every month
+ */
+var nthWeekdayOfMonth = function nthWeekdayOfMonth(weekday, nth) {
+  return function (date) {
+    if (getDay__default["default"](date) !== weekday) {
+      return false;
+    }
+    var dayOfMonth = getDate__default["default"](date);
+    if (nth === 'last') {
+      // No further occurrence of this weekday fits in the month.
+      return dayOfMonth + 7 > getDaysInMonth__default["default"](date);
+    }
+    var occurrence = Math.floor((dayOfMonth - 1) / 7) + 1;
+    return occurrence === nth;
+  };
+};
+/**
+ * Matches a weekday on a repeating week interval, aligned to `from`.
+ *
+ * @example everyOtherWeekday(5, { from: firstPayDay })  // every other Friday
+ * @example everyOtherWeekday(1, { interval: 3 })        // every third Monday
+ */
+var everyOtherWeekday = function everyOtherWeekday(weekday, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _options = options,
+    from = _options.from,
+    _options$interval = _options.interval,
+    interval = _options$interval === void 0 ? 2 : _options$interval;
+  return function (date) {
+    if (getDay__default["default"](date) !== weekday) {
+      return false;
+    }
+    if (!from) {
+      return true;
+    }
+    var weeks = differenceInCalendarWeeks__default["default"](startOfDay__default["default"](date), startOfDay__default["default"](from));
+    // Normalise to a non-negative remainder so dates before `from`
+    // still align correctly.
+    return (weeks % interval + interval) % interval === 0;
+  };
+};
+/** Matches the first day of every month. */
+var firstOfMonth = function firstOfMonth() {
+  return function (date) {
+    return getDate__default["default"](date) === 1;
+  };
+};
+/** Matches the last day of every month. */
+var lastOfMonth = function lastOfMonth() {
+  return function (date) {
+    return getDate__default["default"](date) === getDaysInMonth__default["default"](date);
+  };
+};
+
 var isValidPhoneNumber = function isValidPhoneNumber(value) {
   return !value || libphonenumberJs.isValidPhoneNumber(value);
 };
@@ -63305,6 +63674,7 @@ exports.FormFeedback = FormFeedback;
 exports.FormFooter = FormFooter;
 exports.FormRow = FormRow;
 exports.FormSection = FormSection;
+exports.HIGHLIGHT_SHAPE = HIGHLIGHT_SHAPE;
 exports.HintModal = HintModal;
 exports.IconAddressBook = IconAddressBook;
 exports.IconAnalytics = IconAnalytics;
@@ -64240,7 +64610,11 @@ exports.Tooltip = Tooltip;
 exports.Underline = Underline;
 exports.WeekField = WeekField;
 exports.ZINDEX = ZINDEX;
+exports.everyOtherWeekday = everyOtherWeekday;
+exports.firstOfMonth = firstOfMonth;
 exports.isValidPhoneNumber = isValidPhoneNumber;
+exports.lastOfMonth = lastOfMonth;
+exports.nthWeekdayOfMonth = nthWeekdayOfMonth;
 exports.toast = toast;
 exports.useDataTableContext = useDataTableContext;
 //# sourceMappingURL=index.js.map