@7shifts/sous-chef 4.12.0 → 4.13.0

package/dist/index.js

@@ -12368,9 +12368,9 @@ var styles$1j = {"page-layout":"_Scw7-","page-layout__nav-container":"_v--DF","p
 
 var styles$1i = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
 
-var styles$1h = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
+var styles$1h = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP","badge--dot":"_OcpK5","badge--with-border":"_-5FpP"};
 
-var styles$1g = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B","overlay--draggable":"_6SSP8","content--draggable":"_5rHXj","draggable-inner":"_cq2CU"};
+var styles$1g = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B","content--with-tab-list":"_DMdi7","overlay--draggable":"_6SSP8","content--draggable":"_5rHXj","draggable-inner":"_cq2CU","draggable-inner--with-tab-list":"_V4Rz2"};
 
 var styles$1f = {"modal-header":"_VRlTj","modal-header__header":"_GH74U","modal-header__sub-header":"_OlX-6","modal-header--with-shadow":"_brFTl","modal-header__close-button":"_LTnd3","modal-header__top-bar":"_7V-hB","modal-header__top-bar--with-image":"_docda"};
 
@@ -12379,7 +12379,8 @@ var ModalContext = React.createContext({
   modalBodyRef: {
     current: null
   },
-  draggable: false
+  draggable: false,
+  hasTabList: false
 });
 var useModalContext = function useModalContext() {
   var context = React.useContext(ModalContext);
@@ -12427,13 +12428,17 @@ var ModalHeader = function ModalHeader(_ref) {
     subHeader = _ref.subHeader,
     onClose = _ref.onClose,
     loading = _ref.loading,
-    imageSrc = _ref.imageSrc;
+    imageSrc = _ref.imageSrc,
+    iconBar = _ref.iconBar;
   var _useModalContext = useModalContext(),
-    modalBodyRef = _useModalContext.modalBodyRef;
+    modalBodyRef = _useModalContext.modalBodyRef,
+    hasTabList = _useModalContext.hasTabList;
   var _useScrollDetector = useScrollDetector(modalBodyRef),
     hasScrollTop = _useScrollDetector.hasScrollTop;
+  var iconBarTheme = imageSrc ? 'link-contrast' : 'link-icon';
+  var themedIconBar = iconBar ? _injectButtonTheme(iconBar, iconBarTheme) : null;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1f['modal-header'], (_classNames = {}, _classNames[styles$1f['modal-header--with-shadow']] = hasScrollTop, _classNames))
+    className: classnames__default["default"](styles$1f['modal-header'], (_classNames = {}, _classNames[styles$1f['modal-header--with-shadow']] = hasScrollTop && !hasTabList, _classNames))
   }, React__default["default"].createElement(Stack, {
     space: 0
   }, React__default["default"].createElement("div", {
@@ -12441,7 +12446,7 @@ var ModalHeader = function ModalHeader(_ref) {
     style: imageSrc ? {
       backgroundImage: "url(" + imageSrc + ")"
     } : undefined
-  }, onClose && React__default["default"].createElement(Button, {
+  }, themedIconBar, onClose && React__default["default"].createElement(Button, {
     theme: imageSrc ? 'link-contrast' : 'link-icon',
     onClick: onClose,
     disabled: loading
@@ -12451,6 +12456,40 @@ var ModalHeader = function ModalHeader(_ref) {
     className: styles$1f['modal-header__sub-header']
   }, subHeader)));
 };
+var _injectButtonTheme = function injectButtonTheme(node, theme) {
+  if (Array.isArray(node)) {
+    return node.map(function (child) {
+      return _injectButtonTheme(child, theme);
+    });
+  }
+  if (!React__default["default"].isValidElement(node)) return node;
+  if (node.type === Button) {
+    return React__default["default"].cloneElement(node, {
+      theme: theme
+    });
+  }
+  if (node.type === React__default["default"].Fragment) {
+    var children = React__default["default"].Children.map(node.props.children, function (child) {
+      return _injectButtonTheme(child, theme);
+    });
+    return React__default["default"].cloneElement(node, {}, children);
+  }
+  return node;
+};
+
+var styles$1e = {"tab-zone":"_4hqPT","tab-zone--with-shadow":"_dorMR"};
+
+var ModalTabZone = function ModalTabZone(_ref) {
+  var _cx;
+  var children = _ref.children;
+  var _useModalContext = useModalContext(),
+    modalBodyRef = _useModalContext.modalBodyRef;
+  var _useScrollDetector = useScrollDetector(modalBodyRef),
+    hasScrollTop = _useScrollDetector.hasScrollTop;
+  return React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$1e['tab-zone'], (_cx = {}, _cx[styles$1e['tab-zone--with-shadow']] = hasScrollTop, _cx))
+  }, children);
+};
 
 var DEFAULT_WIDTH = 566;
 var DEFAULT_HEIGHT = 266;
@@ -12540,7 +12579,7 @@ function useDraggableModal(_ref) {
   };
 }
 
-var _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId", "imageSrc", "draggable", "initialPosition"];
+var _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId", "imageSrc", "draggable", "initialPosition", "tabList", "iconBar"];
 // react-draggable declares `props: DraggableProps` on the class instance, overriding
 // the `React.Component<Partial<DraggableProps>>` generic. This cast restores the
 // intended partial-props behaviour for JSX usage.
@@ -12550,6 +12589,7 @@ var DRAG_HANDLE_CLASS = 'modal-drag-handle';
  * Modal is a focused overlay that interrupts the current experience and demands the user's attention. It blocks all interaction with the rest of the page until the user responds — making it best suited for decisions, confirmations, and self-contained flows where that level of focus is warranted.
  */
 var Modal = function Modal(_ref) {
+  var _cx;
   var children = _ref.children,
     header = _ref.header,
     subHeader = _ref.subHeader,
@@ -12569,6 +12609,8 @@ var Modal = function Modal(_ref) {
     _ref$draggable = _ref.draggable,
     draggable = _ref$draggable === void 0 ? false : _ref$draggable,
     initialPosition = _ref.initialPosition,
+    tabList = _ref.tabList,
+    iconBar = _ref.iconBar,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$bk);
   var _useDraggableModal = useDraggableModal({
       width: width,
@@ -12603,27 +12645,24 @@ var Modal = function Modal(_ref) {
       removeDataPrefix: true
     }),
     dataProps = _getDataProps.dataProps;
-  var modalContent = React__default["default"].createElement(React.Fragment, null, draggable ? React__default["default"].createElement("div", {
-    className: DRAG_HANDLE_CLASS
-  }, React__default["default"].createElement(ModalHeader, {
-    header: header,
-    subHeader: subHeader,
-    onClose: onClose,
-    loading: loading,
-    imageSrc: imageSrc
-  })) : React__default["default"].createElement(ModalHeader, {
+  var modalHeader = React__default["default"].createElement(ModalHeader, {
     header: header,
     subHeader: subHeader,
     onClose: onClose,
     loading: loading,
-    imageSrc: imageSrc
-  }), React__default["default"].createElement(ModalContext.Provider, {
+    imageSrc: imageSrc,
+    iconBar: iconBar
+  });
+  var modalContent = React__default["default"].createElement(ModalContext.Provider, {
     value: {
       isModalMounted: true,
       modalBodyRef: modalBodyRef,
-      draggable: draggable
+      draggable: draggable,
+      hasTabList: !!tabList
     }
-  }, children));
+  }, draggable ? React__default["default"].createElement("div", {
+    className: DRAG_HANDLE_CLASS
+  }, modalHeader) : modalHeader, tabList && React__default["default"].createElement(ModalTabZone, null, tabList), children);
   return React__default["default"].createElement(ReactModal__default["default"], {
     isOpen: true,
     testId: testId,
@@ -12641,7 +12680,7 @@ var Modal = function Modal(_ref) {
       beforeClose: styles$1g['overlay--before-close']
     },
     className: {
-      base: classnames__default["default"](styles$1g['content'], draggable && styles$1g['content--draggable']),
+      base: classnames__default["default"](styles$1g['content'], draggable && styles$1g['content--draggable'], tabList && styles$1g['content--with-tab-list']),
       afterOpen: styles$1g['content--after-open'],
       beforeClose: styles$1g['content--before-close']
     },
@@ -12652,7 +12691,7 @@ var Modal = function Modal(_ref) {
     bounds: draggableBounds
   }, React__default["default"].createElement("div", {
     ref: draggableCallbackRef,
-    className: styles$1g['draggable-inner'],
+    className: classnames__default["default"](styles$1g['draggable-inner'], (_cx = {}, _cx[styles$1g['draggable-inner--with-tab-list']] = !!tabList, _cx)),
     style: {
       width: width,
       height: height,
@@ -12665,23 +12704,25 @@ Modal.setAppElement = function (rootElement) {
   ReactModal__default["default"].setAppElement(rootElement);
 };
 
-var styles$1e = {"modal-body":"_4YK4k"};
+var styles$1d = {"modal-body":"_4YK4k","modal-body--tab-mode":"_2-PSE"};
 
 var ModalBody = function ModalBody(_ref) {
+  var _classNames;
   var children = _ref.children,
     testId = _ref.testId;
   var _useModalContext = useModalContext(),
-    modalBodyRef = _useModalContext.modalBodyRef;
+    modalBodyRef = _useModalContext.modalBodyRef,
+    hasTabList = _useModalContext.hasTabList;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1e['modal-body']),
+    className: classnames__default["default"](styles$1d['modal-body'], (_classNames = {}, _classNames[styles$1d['modal-body--tab-mode']] = hasTabList, _classNames)),
     "data-testid": testId,
     ref: modalBodyRef
   }, React__default["default"].createElement("div", {
-    className: styles$1e['modal-body__inner-div']
+    className: styles$1d['modal-body__inner-div']
   }, children));
 };
 
-var styles$1d = {"modal-footer":"_bezlP","modal-footer--with-shadow":"_hC4vb"};
+var styles$1c = {"modal-footer":"_bezlP","modal-footer--with-shadow":"_hC4vb","modal-footer--tab-mode":"_o1kk7"};
 
 var updateButtonProps$1 = function updateButtonProps(button, newProps) {
   if (!button) {
@@ -12731,7 +12772,8 @@ var FooterContainer = function FooterContainer(_ref2) {
   var children = _ref2.children,
     testId = _ref2.testId;
   var _useModalContext = useModalContext(),
-    modalBodyRef = _useModalContext.modalBodyRef;
+    modalBodyRef = _useModalContext.modalBodyRef,
+    hasTabList = _useModalContext.hasTabList;
   var _useScrollDetector = useScrollDetector(modalBodyRef),
     hasScrollBottom = _useScrollDetector.hasScrollBottom;
   var childrenItens = React__default["default"].Children.toArray(children);
@@ -12740,7 +12782,7 @@ var FooterContainer = function FooterContainer(_ref2) {
     displayName: 'Inline'
   });
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1d['modal-footer'], (_classNames = {}, _classNames[styles$1d['modal-footer--with-shadow']] = hasScrollBottom, _classNames)),
+    className: classnames__default["default"](styles$1c['modal-footer'], (_classNames = {}, _classNames[styles$1c['modal-footer--with-shadow']] = hasScrollBottom, _classNames[styles$1c['modal-footer--tab-mode']] = hasTabList, _classNames)),
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     justifyContent: "end",
@@ -12753,7 +12795,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$1c = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
+var styles$1b = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse__default["default"](str, format, new Date(), {
@@ -12894,7 +12936,7 @@ var getHighlightModifiers = function getHighlightModifiers(groups) {
   });
 };
 
-var styles$1b = {"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 styles$1a = {"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) {
@@ -12967,7 +13009,7 @@ var buildHighlightDayPickerProps = function buildHighlightDayPickerProps(highlig
       shape = _ref.shape,
       theme = _ref.theme;
     modifiers[key] = matcher;
-    modifiersClassNames[key] = classnames__default["default"](styles$1b.day_highlight, styles$1b["shape-" + shape], styles$1b["theme-" + theme]);
+    modifiersClassNames[key] = classnames__default["default"](styles$1a.day_highlight, styles$1a["shape-" + shape], styles$1a["theme-" + theme]);
   });
   return {
     modifiers: modifiers,
@@ -12976,7 +13018,7 @@ var buildHighlightDayPickerProps = function buildHighlightDayPickerProps(highlig
   };
 };
 
-var styles$1a = {"calendar-highlights":"_TjAon","calendar-highlights__item":"_BbYmq","calendar-highlights__shape":"_utSi-","calendar-highlights__shape--square":"_mP9vd","calendar-highlights__shape--circle":"_6zlZT"};
+var styles$19 = {"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) {
@@ -12985,7 +13027,7 @@ var CalendarHighlights = function CalendarHighlights(_ref) {
     return null;
   }
   return React__default["default"].createElement("div", {
-    className: styles$1a['calendar-highlights']
+    className: styles$19['calendar-highlights']
   }, React__default["default"].createElement(Inline, {
     flexWrap: "wrap",
     space: {
@@ -13000,7 +13042,7 @@ var CalendarHighlights = function CalendarHighlights(_ref) {
       theme = _ref2.theme;
     return React__default["default"].createElement("div", {
       key: label,
-      className: styles$1a['calendar-highlights__item']
+      className: styles$19['calendar-highlights__item']
     }, React__default["default"].createElement(Shape, {
       shape: shape,
       theme: theme
@@ -13013,45 +13055,45 @@ var Shape = function Shape(_ref3) {
   switch (shape) {
     case 'square':
       return React__default["default"].createElement("div", {
-        className: classnames__default["default"](styles$1a['calendar-highlights__shape'], styles$1a['calendar-highlights__shape--square']),
+        className: classnames__default["default"](styles$19['calendar-highlights__shape'], styles$19['calendar-highlights__shape--square']),
         style: {
           borderColor: COLORS[theme + "-color"]
         }
       });
     case 'square-dashed':
       return React__default["default"].createElement("div", {
-        className: styles$1a['calendar-highlights__shape']
+        className: styles$19['calendar-highlights__shape']
       }, React__default["default"].createElement(SquareDashedShape, {
         theme: theme
       }));
     case 'circle':
       return React__default["default"].createElement("div", {
-        className: classnames__default["default"](styles$1a['calendar-highlights__shape'], styles$1a['calendar-highlights__shape--circle']),
+        className: classnames__default["default"](styles$19['calendar-highlights__shape'], styles$19['calendar-highlights__shape--circle']),
         style: {
           borderColor: COLORS[theme + "-color"]
         }
       });
     case 'circle-dashed':
       return React__default["default"].createElement("div", {
-        className: "" + styles$1a['calendar-highlights__shape']
+        className: "" + styles$19['calendar-highlights__shape']
       }, React__default["default"].createElement(CircleDashedShape, {
         theme: theme
       }));
     case 'octagon':
       return React__default["default"].createElement("div", {
-        className: "" + styles$1a['calendar-highlights__shape']
+        className: "" + styles$19['calendar-highlights__shape']
       }, React__default["default"].createElement(OctagonShape, {
         theme: theme
       }));
     case 'star':
       return React__default["default"].createElement("div", {
-        className: "" + styles$1a['calendar-highlights__shape']
+        className: "" + styles$19['calendar-highlights__shape']
       }, React__default["default"].createElement(StarShape, {
         theme: theme
       }));
     default:
       return React__default["default"].createElement("div", {
-        className: styles$1a['calendar-highlight__shape']
+        className: styles$19['calendar-highlight__shape']
       }, shape);
   }
 };
@@ -13282,9 +13324,9 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$1c['calendar']
+    className: styles$1b['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$1c['calendar__overlay'],
+    className: styles$1b['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -13348,7 +13390,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$19 = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
+var styles$18 = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
 
 var _excluded$bj = ["name", "id", "checked", "indeterminate", "onChange", "onBlur", "label", "caption", "error", "disabled", "testId"];
 /** A simple check box with an option beside it. Allows the user to confirm a statement or enable an option with a simple boolean action. Use for things like agreeing to terms, or enabling one or more options in a list (where multiple selections are allowed). */
@@ -13382,7 +13424,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, otherProps), React__default["default"].createElement("div", {
-    className: styles$19['check-box-field']
+    className: styles$18['check-box-field']
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
@@ -13396,12 +13438,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default["default"].createElement("span", {
-    className: styles$19['check-box-field__custom-input']
+    className: styles$18['check-box-field__custom-input']
   })), label && React__default["default"].createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default["default"].createElement("div", {
-    className: styles$19['check-box-field__caption']
+    className: styles$18['check-box-field__caption']
   }, React__default["default"].createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default["default"].createElement(ErrorMessage, {
@@ -13441,7 +13483,7 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 };
 
-var styles$18 = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
+var styles$17 = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
 
 var _excluded$bi = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId", "onSetDoNotShowAgainStatus", "hideDoNotShowAgainCheckbox"];
 /**
@@ -13516,22 +13558,22 @@ var HintModal = function HintModal(_ref) {
     closeTimeoutMS: 200,
     contentLabel: "Modal",
     className: {
-      base: styles$18['hint-modal'],
-      afterOpen: styles$18['hint-modal--after-open'],
-      beforeClose: styles$18['hint-modal--before-close']
+      base: styles$17['hint-modal'],
+      afterOpen: styles$17['hint-modal--after-open'],
+      beforeClose: styles$17['hint-modal--before-close']
     },
-    overlayClassName: styles$18['hint-modal__overlay']
+    overlayClassName: styles$17['hint-modal__overlay']
   }, React__default["default"].createElement("div", {
-    className: styles$18['hint-modal__close-button']
+    className: styles$17['hint-modal__close-button']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: handleOnClose
   }, React__default["default"].createElement(IconTimes, null))), mediaUrl && React__default["default"].createElement("img", {
-    className: styles$18['hint-modal__image'],
+    className: styles$17['hint-modal__image'],
     src: mediaUrl,
     alt: String(header)
   }), React__default["default"].createElement("div", {
-    className: styles$18['hint-modal__body']
+    className: styles$17['hint-modal__body']
   }, React__default["default"].createElement(Stack, {
     justifyContent: "space-between"
   }, React__default["default"].createElement(Stack, {
@@ -13596,29 +13638,51 @@ var useModalPosition = function useModalPosition(modalWidth, modalHeight) {
   return [position, updatePosition];
 };
 
-var _excluded$bh = ["children", "theme", "title", "testId"];
+var AvatarContext = React.createContext({
+  size: null
+});
+var useAvatarContext = function useAvatarContext() {
+  return React.useContext(AvatarContext);
+};
+
+var _excluded$bh = ["children", "theme", "title", "size", "testId"];
 var BadgeElement = function BadgeElement(_ref, forwardedRef) {
   var _classnames;
   var children = _ref.children,
     theme = _ref.theme,
     title = _ref.title,
+    _ref$size = _ref.size,
+    sizeProp = _ref$size === void 0 ? 'default' : _ref$size,
     testId = _ref.testId,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$bh);
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
+  var _useAvatarContext = useAvatarContext(),
+    avatarSize = _useAvatarContext.size;
+  var isInsideSmallAvatar = avatarSize === 'small' || avatarSize === 'medium';
+  var size = isInsideSmallAvatar ? 'dot' : sizeProp;
+  var withBorder = avatarSize !== null;
+  var isDot = size === 'dot';
   React.useLayoutEffect(function () {
-    if (typeof ref !== 'function' && ref.current && React__default["default"].isValidElement(children) && typeof (children == null ? void 0 : children.type) !== 'string' && typeof (children == null ? void 0 : children.type) !== 'number') {
-      ref.current.style.height = ref.current.offsetWidth + 'px';
+    if (typeof ref === 'function' || !ref.current) return;
+    if (!isDot && React__default["default"].isValidElement(children) && typeof (children == null ? void 0 : children.type) !== 'string' && typeof (children == null ? void 0 : children.type) !== 'number') {
+      ref.current.style.padding = '0';
+      ref.current.style.width = ref.current.offsetHeight + 'px';
+    } else if (isDot) {
+      ref.current.style.padding = '';
+      ref.current.style.width = '';
     }
   });
   return React__default["default"].createElement(Tooltip, {
     overlay: title,
     ref: ref
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1h['badge'], (_classnames = {}, _classnames[styles$1h['badge--success']] = theme === 'success', _classnames[styles$1h['badge--danger']] = theme === 'danger', _classnames[styles$1h['badge--info']] = theme === 'info', _classnames[styles$1h['badge--warning']] = theme === 'warning', _classnames[styles$1h['badge--numeric']] = Number.isFinite(children), _classnames)),
+    className: classnames__default["default"](styles$1h['badge'], (_classnames = {}, _classnames[styles$1h['badge--success']] = theme === 'success', _classnames[styles$1h['badge--danger']] = theme === 'danger', _classnames[styles$1h['badge--info']] = theme === 'info', _classnames[styles$1h['badge--warning']] = theme === 'warning', _classnames[styles$1h['badge--numeric']] = !isDot && Number.isFinite(children), _classnames[styles$1h['badge--dot']] = isDot, _classnames[styles$1h['badge--with-border']] = withBorder, _classnames)),
     ref: ref,
     "data-testid": testId
-  }, otherProps), children));
+  }, otherProps), isDot ? null : React__default["default"].isValidElement(children) && typeof children.type !== 'string' && typeof children.type !== 'number' ? React__default["default"].cloneElement(children, {
+    size: 'small'
+  }) : children));
 };
 /**
  * Badge is a small circular indicator used to draw attention to something associated with another element — a count, a status, or a quick action.
@@ -13687,7 +13751,7 @@ var TOAST_THEME = {
 };
 var TOAST_CONTAINER_ID = 'sous-chef-toast';
 
-var styles$17 = {"toast":"_iSC5P","toast--danger":"_OWpOG","toast__text":"_4JJwF"};
+var styles$16 = {"toast":"_iSC5P","toast--danger":"_OWpOG","toast__text":"_4JJwF"};
 
 var toast = function toast(text, theme, options) {
   var _classNames;
@@ -13710,7 +13774,7 @@ var toast = function toast(text, theme, options) {
     onActionClick: onActionClick
   }) : text;
   reactToastify.toast(content, _extends({
-    className: classnames__default["default"](styles$17['toast'], (_classNames = {}, _classNames[styles$17['toast--danger']] = theme === TOAST_THEME.DANGER, _classNames)),
+    className: classnames__default["default"](styles$16['toast'], (_classNames = {}, _classNames[styles$16['toast--danger']] = theme === TOAST_THEME.DANGER, _classNames)),
     containerId: TOAST_CONTAINER_ID
   }, options));
 };
@@ -13738,7 +13802,7 @@ var ToastContainer = function ToastContainer(_ref3) {
   var _ref3$containerId = _ref3.containerId,
     containerId = _ref3$containerId === void 0 ? TOAST_CONTAINER_ID : _ref3$containerId;
   return React__default["default"].createElement(reactToastify.ToastContainer, {
-    bodyClassName: styles$17['toast__text'],
+    bodyClassName: styles$16['toast__text'],
     hideProgressBar: true,
     draggable: false,
     transition: reactToastify.Slide,
@@ -13818,7 +13882,7 @@ var SousChefProvider = function SousChefProvider(_ref) {
   }, React__default["default"].createElement(ToastContainer, null), children));
 };
 
-var styles$16 = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__item-content--has-description":"_vgjHE","data-table-header__sort-icon":"_-xiIl"};
+var styles$15 = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__item-content--has-description":"_vgjHE","data-table-header__sort-icon":"_-xiIl"};
 
 var SORT_ORDER = {
   ASC: 'asc',
@@ -14011,7 +14075,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     },
     id: tableId + "-header"
   }, React__default["default"].createElement("tr", {
-    className: styles$16['data-table-header']
+    className: styles$15['data-table-header']
   }, columns.filter(function (column) {
     return !column.hidden;
   }).map(function (column) {
@@ -14021,7 +14085,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var isRightAligned = column.isRightAligned;
     var hasDescription = !!column.description;
     return React__default["default"].createElement("th", {
-      className: classnames__default["default"]((_classnames = {}, _classnames[styles$16['data-table-header__item']] = true, _classnames[styles$16['data-table-header__item--sortable']] = isSortable, _classnames)),
+      className: classnames__default["default"]((_classnames = {}, _classnames[styles$15['data-table-header__item']] = true, _classnames[styles$15['data-table-header__item--sortable']] = isSortable, _classnames)),
       style: {
         flex: column.size || 1,
         backgroundColor: backgroundColor
@@ -14036,14 +14100,14 @@ var DataTableHeader = function DataTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$16['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$16['data-table-header__item-content--right-align']] = isRightAligned, _classnames2), (_classnames3 = {}, _classnames3[styles$16['data-table-header__item-content--has-description']] = hasDescription, _classnames3))
+      className: classnames__default["default"](styles$15['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$15['data-table-header__item-content--right-align']] = isRightAligned, _classnames2), (_classnames3 = {}, _classnames3[styles$15['data-table-header__item-content--has-description']] = hasDescription, _classnames3))
     }, wrapWithTooltip(column), isSortable && React__default["default"].createElement("span", {
-      className: styles$16['data-table-header__sort-icon']
+      className: styles$15['data-table-header__sort-icon']
     }, React__default["default"].createElement(HeaderSortIcon, {
       sortDirection: sortDir
     }))));
   }), showActionMenu && React__default["default"].createElement("th", {
-    className: classnames__default["default"](styles$16['data-table-header__item'], styles$16['data-table-header__item--action'])
+    className: classnames__default["default"](styles$15['data-table-header__item'], styles$15['data-table-header__item--action'])
   }))));
 };
 var wrapWithTooltip = function wrapWithTooltip(column) {
@@ -14057,9 +14121,9 @@ var wrapWithTooltip = function wrapWithTooltip(column) {
   return column.label;
 };
 
-var styles$15 = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
+var styles$14 = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
 
-var styles$14 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fake-border--fixed-scroll":"_C5CU0","data-table-scroll-fake-border--top":"_L5fRB","data-table-scroll-fake-border--bottom":"_omhE4","data-table-scroll-fake-border__left":"_mpDFy","data-table-scroll-fake-border__left--top":"_G3b-p","data-table-scroll-fake-border__left--bottom":"_YUMxZ","data-table-scroll-fake-border__right":"_xUVcY","data-table-scroll-fake-border__right--top":"_BE0hn","data-table-scroll-fake-border__right--bottom":"_UtFdB"};
+var styles$13 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fake-border--fixed-scroll":"_C5CU0","data-table-scroll-fake-border--top":"_L5fRB","data-table-scroll-fake-border--bottom":"_omhE4","data-table-scroll-fake-border__left":"_mpDFy","data-table-scroll-fake-border__left--top":"_G3b-p","data-table-scroll-fake-border__left--bottom":"_YUMxZ","data-table-scroll-fake-border__right":"_xUVcY","data-table-scroll-fake-border__right--top":"_BE0hn","data-table-scroll-fake-border__right--bottom":"_UtFdB"};
 
 var useTableHeaderHeight = function useTableHeaderHeight(isShowingColumns) {
   var _useDataTableContext = useDataTableContext(),
@@ -14114,16 +14178,16 @@ var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
   var hasFixedScroll = useDetectFixedScroll();
   var backgroundColor = useBackgroundColor();
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$14['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$14['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$14['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames[styles$14['data-table-scroll-fake-border--fixed-scroll']] = hasFixedScroll, _classNames)),
+    className: classnames__default["default"](styles$13['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$13['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$13['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames[styles$13['data-table-scroll-fake-border--fixed-scroll']] = hasFixedScroll, _classNames)),
     style: {
       // @ts-expect-error This difines a custom CSS variable
       '--corner-background-color': backgroundColor,
       top: placement === 'top' ? headerHeight : undefined
     }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$14['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$14['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$14['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
+    className: classnames__default["default"](styles$13['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$13['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$13['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$14['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$14['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$14['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3)),
+    className: classnames__default["default"](styles$13['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$13['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$13['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3)),
     "data-background-color": "red"
   }));
 };
@@ -14140,7 +14204,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$13 = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner__icon--multiline":"_uJl2Y","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
+var styles$12 = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner__icon--multiline":"_uJl2Y","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
 
 /** Infers theme prop for Sous Chef Button CTAs if not explicitly passed, default is hollow, primaryCTA is Upsell if banner theme is Upsell*/
 var ButtonCTA$1 = function ButtonCTA(_ref) {
@@ -14161,7 +14225,7 @@ var ButtonCTA$1 = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$12 = {"banner__caption":"_S--Ce"};
+var styles$11 = {"banner__caption":"_S--Ce"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -14192,7 +14256,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default["default"].createElement("div", {
-    className: styles$12['banner__caption']
+    className: styles$11['banner__caption']
   }, caption));
 };
 
@@ -14245,13 +14309,13 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$13['banner'], (_classnames = {}, _classnames[styles$13['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$13['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$13['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$13['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$13['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$13['banner--single-line']] = !multiLine, _classnames)),
+    className: classnames__default["default"](styles$12['banner'], (_classnames = {}, _classnames[styles$12['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$12['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$12['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$12['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$12['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$12['banner--single-line']] = !multiLine, _classnames)),
     style: positionStyles
   }, React__default["default"].createElement(Inline, {
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$13['banner__icon'], (_classnames2 = {}, _classnames2[styles$13['banner__icon--multiline']] = multiLine, _classnames2))
+    className: classnames__default["default"](styles$12['banner__icon'], (_classnames2 = {}, _classnames2[styles$12['banner__icon--multiline']] = multiLine, _classnames2))
   }, icon != null ? icon : React__default["default"].createElement(InlineBannerIcon, {
     theme: theme
   })), React__default["default"].createElement(Layout, {
@@ -14261,9 +14325,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default["default"].createElement("div", {
-    className: styles$13['banner__title']
+    className: styles$12['banner__title']
   }, title), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$13['banner__body'], (_classnames3 = {}, _classnames3[styles$13['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames3))
+    className: classnames__default["default"](styles$12['banner__body'], (_classnames3 = {}, _classnames3[styles$12['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames3))
   }, children), primaryButton && React__default["default"].createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -14271,7 +14335,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default["default"].createElement("div", {
-    className: styles$13['banner__close']
+    className: styles$12['banner__close']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     type: "button",
@@ -14287,7 +14351,7 @@ var MICRO_BANNER_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$11 = {"micro-banner":"_fRjhT","micro-banner__icon":"_UZMd0","micro-banner__content":"_mJAeX","micro-banner__content--no-icon":"_ZFsBE","micro-banner__content--no-button":"_UN43A","micro-banner__button":"_bTamw","micro-banner--info":"_ULD-f","micro-banner--success":"_5MitA","micro-banner--danger":"_8wmuB","micro-banner--warning":"_515OI","micro-banner--upsell":"_EfwcL"};
+var styles$10 = {"micro-banner":"_fRjhT","micro-banner__icon":"_UZMd0","micro-banner__content":"_mJAeX","micro-banner__content--no-icon":"_ZFsBE","micro-banner__content--no-button":"_UN43A","micro-banner__button":"_bTamw","micro-banner--info":"_ULD-f","micro-banner--success":"_5MitA","micro-banner--danger":"_8wmuB","micro-banner--warning":"_515OI","micro-banner--upsell":"_EfwcL"};
 
 var MicroBannerIcon = function MicroBannerIcon(_ref) {
   var theme = _ref.theme;
@@ -14351,14 +14415,14 @@ var MicroBanner = function MicroBanner(_ref) {
     otherProps = _getPositionProps.otherProps;
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
-  var themeClass = styles$11["micro-banner--" + theme];
-  var contentClass = classnames__default["default"](styles$11['micro-banner__content'], hideIcon && styles$11['micro-banner__content--no-icon'], !primaryButton && styles$11['micro-banner__content--no-button']);
+  var themeClass = styles$10["micro-banner--" + theme];
+  var contentClass = classnames__default["default"](styles$10['micro-banner__content'], hideIcon && styles$10['micro-banner__content--no-icon'], !primaryButton && styles$10['micro-banner__content--no-button']);
   return React__default["default"].createElement("div", _extends({
     "data-testid": testId,
-    className: classnames__default["default"](styles$11['micro-banner'], themeClass),
+    className: classnames__default["default"](styles$10['micro-banner'], themeClass),
     style: positionProps
   }, dataProps), !hideIcon && React__default["default"].createElement("div", {
-    className: styles$11['micro-banner__icon'],
+    className: styles$10['micro-banner__icon'],
     "data-testid": (testId || 'micro-banner') + "-icon"
   }, icon != null ? icon : React__default["default"].createElement(MicroBannerIcon, {
     theme: theme
@@ -14369,7 +14433,7 @@ var MicroBanner = function MicroBanner(_ref) {
   }, title), React__default["default"].createElement(Text, {
     as: 'caption'
   }, children)), primaryButton && React__default["default"].createElement("div", {
-    className: styles$11['micro-banner__button']
+    className: styles$10['micro-banner__button']
   }, React__default["default"].createElement(ButtonCTA, {
     button: primaryButton,
     bannerTheme: theme
@@ -14384,7 +14448,7 @@ var PERSISTENT_BANNER_THEME = {
   SUCCESS: 'success'
 };
 
-var styles$10 = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR","persistent-banner--warning":"_9eFhn","persistent-banner--success":"_hU34n"};
+var styles$$ = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR","persistent-banner--warning":"_9eFhn","persistent-banner--success":"_hU34n"};
 
 /**
  * PersistentBanner displays a full-width message above the main navigation.
@@ -14419,7 +14483,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
     }, secondaryButton.props))));
   };
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$10['persistent-banner'], (_classNames = {}, _classNames[styles$10['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$10['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$10['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames[styles$10['persistent-banner--warning']] = theme === PERSISTENT_BANNER_THEME.WARNING, _classNames[styles$10['persistent-banner--success']] = theme === PERSISTENT_BANNER_THEME.SUCCESS, _classNames)),
+    className: classnames__default["default"](styles$$['persistent-banner'], (_classNames = {}, _classNames[styles$$['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$$['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$$['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames[styles$$['persistent-banner--warning']] = theme === PERSISTENT_BANNER_THEME.WARNING, _classNames[styles$$['persistent-banner--success']] = theme === PERSISTENT_BANNER_THEME.SUCCESS, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default["default"].createElement(Inline, {
     flex: [1],
@@ -14486,7 +14550,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$$ = {"circular-progress":"_UI0Fo","circular-progress__label":"_6PNwZ","circular-progress__track":"_alBLB","circular-progress__indicator":"_VADa6"};
+var styles$_ = {"circular-progress":"_UI0Fo","circular-progress__label":"_6PNwZ","circular-progress__track":"_alBLB","circular-progress__indicator":"_VADa6"};
 
 /**
  * CircularProgress displays a circular track that fills as a count advances toward a total.
@@ -14502,7 +14566,7 @@ var CircularProgress = function CircularProgress(_ref) {
     metric = _useProgress.metric;
   var determinant = metric.percentage * 2.79;
   return React__default["default"].createElement("div", _extends({}, elementProps, {
-    className: styles$$['circular-progress'],
+    className: styles$_['circular-progress'],
     "data-testid": testId
   }), React__default["default"].createElement("svg", {
     viewBox: "0 0 100 100"
@@ -14511,21 +14575,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$$['circular-progress__track']
+    className: styles$_['circular-progress__track']
   }), React__default["default"].createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$$['circular-progress__indicator'],
+    className: styles$_['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default["default"].createElement("div", {
-    className: styles$$['circular-progress__label']
+    className: styles$_['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$_ = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__indicator--complete":"_D9yNp","progress-bar__steps":"_8kdeO"};
+var styles$Z = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__indicator--complete":"_D9yNp","progress-bar__steps":"_8kdeO"};
 
 /**
  * ProgressBar shows a horizontal bar that fills as a task advances.
@@ -14542,15 +14606,15 @@ var ProgressBar = function ProgressBar(_ref) {
     elementProps = _useProgress.elementProps,
     metric = _useProgress.metric;
   return React__default["default"].createElement(Stack, null, React__default["default"].createElement("div", _extends({}, elementProps, {
-    className: styles$_['progress-bar'],
+    className: styles$Z['progress-bar'],
     "data-testid": testId
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$_['progress-bar__indicator'], (_classNames = {}, _classNames[styles$_['progress-bar__indicator--complete']] = metric.percentage === 100, _classNames)),
+    className: classnames__default["default"](styles$Z['progress-bar__indicator'], (_classNames = {}, _classNames[styles$Z['progress-bar__indicator--complete']] = metric.percentage === 100, _classNames)),
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default["default"].createElement("div", {
-    className: styles$_['progress-bar__steps']
+    className: styles$Z['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default["default"].createElement(Text, {
       key: step
@@ -14558,7 +14622,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$Z = {"skeleton":"_oDnLM","pulse":"_McmEv","skeleton__button":"_jPXx6","skeleton__pill":"_sPHSZ","skeleton__avatar":"_3vEYT","skeleton__avatar--small":"_zneq9","skeleton__avatar--medium":"_TtfoO","skeleton__avatar--large":"_jhOqR","skeleton__avatar--xlarge":"_VgGfx"};
+var styles$Y = {"skeleton":"_oDnLM","pulse":"_McmEv","skeleton__button":"_jPXx6","skeleton__pill":"_sPHSZ","skeleton__avatar":"_3vEYT","skeleton__avatar--small":"_zneq9","skeleton__avatar--medium":"_TtfoO","skeleton__avatar--large":"_jhOqR","skeleton__avatar--xlarge":"_VgGfx"};
 
 var SKELETON_COMPONENT = {
   AVATAR: 'avatar',
@@ -14584,7 +14648,7 @@ var Skeleton = function Skeleton(_ref) {
   var positioning = usePositionStyles(positionStyles);
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$Z['skeleton'], (_classnames = {}, _classnames[styles$Z['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$Z['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$Z['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$Z['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$Z['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$Z['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$Z['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
+    className: classnames__default["default"](styles$Y['skeleton'], (_classnames = {}, _classnames[styles$Y['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$Y['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$Y['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$Y['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$Y['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$Y['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$Y['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
     style: _extends({}, positioning, {
       width: width,
       height: height
@@ -14592,11 +14656,11 @@ var Skeleton = function Skeleton(_ref) {
   });
 };
 
-var styles$Y = {"data-table-row":"_hhDnr","data-table-row--clickable":"_ej5Ke","data-table-row--selected":"_qDTAh"};
+var styles$X = {"data-table-row":"_hhDnr","data-table-row--clickable":"_ej5Ke","data-table-row--selected":"_qDTAh"};
 
-var styles$X = {"actions":"_ffXgN"};
+var styles$W = {"actions":"_ffXgN"};
 
-var styles$W = {"data-table-cell":"_cp8xi","data-table-cell--no-padding":"_gqbNb","data-table-cell--vertical-border":"_uHjkg","data-table-cell--invalid":"_ASOQd","data-table-cell__content":"_HjPNI","data-table-cell__content--right-align":"_BCVO6","data-table-cell__content--with-error":"_NqtPS","data-table-cell__content--loading":"_-rWoZ","data-table-cell__error-icon":"_txhua","data-table-cell__error-icon--right-align":"_fPzqj","data-table-cell__error-icon--left-align":"_L2-l-"};
+var styles$V = {"data-table-cell":"_cp8xi","data-table-cell--no-padding":"_gqbNb","data-table-cell--vertical-border":"_uHjkg","data-table-cell--invalid":"_ASOQd","data-table-cell__content":"_HjPNI","data-table-cell__content--right-align":"_BCVO6","data-table-cell__content--with-error":"_NqtPS","data-table-cell__content--loading":"_-rWoZ","data-table-cell__error-icon":"_txhua","data-table-cell__error-icon--right-align":"_fPzqj","data-table-cell__error-icon--left-align":"_L2-l-"};
 
 var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var _columns$columnIndex, _classnames, _classnames2, _classnames3;
@@ -14620,17 +14684,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var hasError = !!error;
   var errorMessage = error;
   var icon = hasError && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$W['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$W['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$W['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
+    className: classnames__default["default"](styles$V['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$V['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$V['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default["default"].createElement(IconTimesOctagon, {
     size: "medium",
     color: "danger-on-container-variant"
   }));
   var TableCell = React__default["default"].createElement("td", {
-    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$W['data-table-cell--invalid']] = hasError, _classnames2[styles$W['data-table-cell--no-padding']] = noPadding, _classnames2[styles$W['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$W['data-table-cell']),
+    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$V['data-table-cell--invalid']] = hasError, _classnames2[styles$V['data-table-cell--no-padding']] = noPadding, _classnames2[styles$V['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$V['data-table-cell']),
     colSpan: colSpan,
     ref: ref
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$W['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$W['data-table-cell__content--with-error']] = hasError, _classnames3[styles$W['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$W['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
+    className: classnames__default["default"](styles$V['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$V['data-table-cell__content--with-error']] = hasError, _classnames3[styles$V['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$V['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default["default"].createElement(Tooltip, {
     overlay: errorMessage,
@@ -14655,7 +14719,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   return React__default["default"].createElement(DataTableCell, {
     columnIndex: columnIndex
   }, React__default["default"].createElement("div", {
-    className: styles$X['actions'],
+    className: styles$W['actions'],
     "data-testid": "data-table-dropdown-menu"
   }, state === 'SKELETON_LOADING' && React__default["default"].createElement(Skeleton, {
     width: 45
@@ -14670,7 +14734,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   })));
 };
 
-var styles$V = {"data-table-editable-cell":"_jp9-G","data-table-editable-cell--right-aligned":"_BzPeH","data-table-editable-cell--currency":"_NhNG9","data-table-editable-cell--invalid":"_5HRwe","data-table-editable-cell--top-left":"_P--u2","data-table-editable-cell--top-right":"_EloAX","data-table-editable-cell--bottom-left":"_ZDCR9","data-table-editable-cell--bottom-right":"_Mc9YJ"};
+var styles$U = {"data-table-editable-cell":"_jp9-G","data-table-editable-cell--right-aligned":"_BzPeH","data-table-editable-cell--currency":"_NhNG9","data-table-editable-cell--invalid":"_5HRwe","data-table-editable-cell--top-left":"_P--u2","data-table-editable-cell--top-right":"_EloAX","data-table-editable-cell--bottom-left":"_ZDCR9","data-table-editable-cell--bottom-right":"_Mc9YJ"};
 
 var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
   var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
@@ -14719,7 +14783,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     id: controllers.id
   };
   var EditableCell = React__default["default"].createElement("div", {
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$V['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$V['data-table-editable-cell']),
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$U['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$U['data-table-editable-cell']),
     "data-testid": testId,
     role: "cell"
   }, React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
@@ -14728,7 +14792,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$V['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$V['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$V['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$V['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$V['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$V['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$U['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$U['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$U['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$U['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$U['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$U['data-table-editable-cell--invalid']] = hasError, _classnames2)),
     type: type === 'currency' ? 'number' : 'text',
     step: type === 'currency' ? 'any' : '',
     "data-testid": testId && testId + "-text-field",
@@ -14774,7 +14838,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$bd);
   var _useDataTableContext = useDataTableContext(),
     showActionMenu = _useDataTableContext.showActionMenu;
-  var styleNames = classnames__default["default"](styles$Y['data-table-row'], (_classnames = {}, _classnames[styles$Y['data-table-row--clickable']] = onClick, _classnames[styles$Y['data-table-row--selected']] = isSelected, _classnames));
+  var styleNames = classnames__default["default"](styles$X['data-table-row'], (_classnames = {}, _classnames[styles$X['data-table-row--clickable']] = onClick, _classnames[styles$X['data-table-row--selected']] = isSelected, _classnames));
   var renderColumn = function renderColumn(columnElement, index) {
     var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement == null ? void 0 : columnElement.type) === DataTableCell;
     if (isUsingDataTableCell || !hasDefaultCell) {
@@ -14870,7 +14934,7 @@ var calculateScrollState = function calculateScrollState(scrollContainer) {
   return DATA_TABLE_SCROLL_STATES.NO_SCROLL;
 };
 
-var styles$U = {"data-table-sticky-columns-container":"_j5iVD","data-table-sticky-columns-container--with-left-sticky-columns-and-shadow":"_7dAEd","data-table-sticky-columns-container--no-shadow":"_rR4W3","fadein":"_b1-OB","data-table-sticky-columns-container--with-left-sticky-columns":"_qLE4I","data-table-sticky-columns-container--with-right-sticky-columns-and-shadow":"_B92Ir","data-table-sticky-columns-container--with-right-sticky-columns":"_ONjpl","data-table-sticky-columns-container--with-footer":"_DE3fh"};
+var styles$T = {"data-table-sticky-columns-container":"_j5iVD","data-table-sticky-columns-container--with-left-sticky-columns-and-shadow":"_7dAEd","data-table-sticky-columns-container--no-shadow":"_rR4W3","fadein":"_b1-OB","data-table-sticky-columns-container--with-left-sticky-columns":"_qLE4I","data-table-sticky-columns-container--with-right-sticky-columns-and-shadow":"_B92Ir","data-table-sticky-columns-container--with-right-sticky-columns":"_ONjpl","data-table-sticky-columns-container--with-footer":"_DE3fh"};
 
 var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   var scrollContainerRef = React.useRef(null);
@@ -14917,7 +14981,7 @@ var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   };
 };
 
-var styles$T = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","data-table-cover-shadow--left-shadow":"_VXlf0","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","data-table-cover-shadow--right-shadow":"_b3Rzx","fadeinshadowright":"_KgJaq"};
+var styles$S = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","data-table-cover-shadow--left-shadow":"_VXlf0","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","data-table-cover-shadow--right-shadow":"_b3Rzx","fadeinshadowright":"_KgJaq"};
 
 var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
   var _classNames;
@@ -14936,7 +15000,7 @@ var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
     return "calc(100% - " + headerHeight + ")";
   };
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$T['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$T['data-table-cover-shadow--left']] = direction === 'left', _classNames[styles$T['data-table-cover-shadow--left-shadow']] = direction === 'left' && showShadow, _classNames[styles$T['data-table-cover-shadow--right']] = direction === 'right', _classNames[styles$T['data-table-cover-shadow--right-shadow']] = direction === 'right' && showShadow, _classNames)),
+    className: classnames__default["default"](styles$S['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$S['data-table-cover-shadow--left']] = direction === 'left', _classNames[styles$S['data-table-cover-shadow--left-shadow']] = direction === 'left' && showShadow, _classNames[styles$S['data-table-cover-shadow--right']] = direction === 'right', _classNames[styles$S['data-table-cover-shadow--right-shadow']] = direction === 'right' && showShadow, _classNames)),
     style: {
       // @ts-expect-error This difines a custom CSS variable
       '--corner-background-color': backgroundColor,
@@ -14996,18 +15060,18 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
     isShowingColumns: !!isShowingColumns,
     showShadow: state === 'EMPTY' ? false : stickyColumns === 'left'
   })), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$U[containerClassName], (_classNames = {}, _classNames[styles$U[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$U[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$U[containerClassName + "--with-left-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false, _classNames[styles$U[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$U[containerClassName + "--with-right-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false, _classNames[styles$U[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
+    className: classnames__default["default"](styles$T[containerClassName], (_classNames = {}, _classNames[styles$T[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$T[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$T[containerClassName + "--with-left-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false, _classNames[styles$T[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$T[containerClassName + "--with-right-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false, _classNames[styles$T[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
     onScroll: onScroll,
     ref: scrollContainerRef,
     "data-testid": "sticky-columns-container"
   }, children));
 };
 
-var styles$S = {"data-table-empty-state":"_fCHjG"};
+var styles$R = {"data-table-empty-state":"_fCHjG"};
 
-var styles$R = {"empty-state-container-stack":"_4nO7T","empty-state-container-stack__content":"_KiEVo","empty-state-container-stack__content--full-page":"_ib04g","empty-state-container-stack__content--inline-horizontal":"_bSiJj","empty-state-container-stack__body":"_mi-dC"};
+var styles$Q = {"empty-state-container-stack":"_4nO7T","empty-state-container-stack__content":"_KiEVo","empty-state-container-stack__content--full-page":"_ib04g","empty-state-container-stack__content--inline-horizontal":"_bSiJj","empty-state-container-stack__body":"_mi-dC"};
 
-var styles$Q = {"empty-state-container-cta":"_X-dEs","empty-state-container-cta--inside-modal":"_63-SX"};
+var styles$P = {"empty-state-container-cta":"_X-dEs","empty-state-container-cta--inside-modal":"_63-SX"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
   var _actions$primary, _actions$secondary, _classNames;
@@ -15024,7 +15088,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$Q['empty-state-container-cta'], (_classNames = {}, _classNames[styles$Q['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
+    className: classnames__default["default"](styles$P['empty-state-container-cta'], (_classNames = {}, _classNames[styles$P['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
   }, primaryButton, secondaryButton);
 };
 
@@ -15047,7 +15111,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     testId = _ref.testId,
     mediaComponent = _ref.mediaComponent;
   return React__default["default"].createElement("div", {
-    className: styles$R['empty-state-container-stack'],
+    className: styles$Q['empty-state-container-stack'],
     "data-testid": testId
   }, mediaComponent ? mediaComponent : mediaUrl && React__default["default"].createElement("img", {
     src: mediaUrl,
@@ -15064,7 +15128,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     as: "body",
     alignment: "center"
   }, title), React__default["default"].createElement("div", {
-    className: styles$R['empty-state-container-stack__body']
+    className: styles$Q['empty-state-container-stack__body']
   }, children)), React__default["default"].createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -15175,7 +15239,7 @@ var DataTableEmptyState = function DataTableEmptyState(_ref) {
     columnIndex: shouldRenderStickyLeftCell ? 1 : 0,
     colSpan: colSpan
   }, React__default["default"].createElement("div", {
-    className: styles$S['data-table-empty-state']
+    className: styles$R['data-table-empty-state']
   }, React__default["default"].createElement(EmptyStateContainerStack, {
     mediaUrl: customImage,
     mediaComponent: customImage === '' ? React__default["default"].createElement(MagnifyingGlassIllustration, null) : undefined,
@@ -15266,7 +15330,7 @@ var DataTable = function DataTable(_ref) {
       return null;
     }
     return React__default["default"].createElement("div", {
-      className: styles$15['data-table__pagination-controls'],
+      className: styles$14['data-table__pagination-controls'],
       "data-testid": testId && testId + "-pagination-controls"
     }, React__default["default"].createElement(PaginationControls, {
       hasPrevious: isLoading ? false : hasPrevious,
@@ -15289,7 +15353,7 @@ var DataTable = function DataTable(_ref) {
       tableId: tableId
     }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$15['data-table']),
+    className: classnames__default["default"](styles$14['data-table']),
     ref: tableRef,
     style: positionStyles
   }, React__default["default"].createElement(DataTableStickyColumnsContainer, {
@@ -15300,19 +15364,19 @@ var DataTable = function DataTable(_ref) {
     placement: "top",
     isShowingColumns: !!isShowingColumns
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$15['data-table__content'], (_classNames = {}, _classNames[styles$15['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
+    className: classnames__default["default"](styles$14['data-table__content'], (_classNames = {}, _classNames[styles$14['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
     style: conditionalStyles,
     id: tableId + "-content"
   }, state === DATA_TABLE_STATES.BACKGROUND_LOADING && React__default["default"].createElement("div", {
-    className: styles$15['data-table__background-loading']
+    className: styles$14['data-table__background-loading']
   }, React__default["default"].createElement(Spinner, null)), React__default["default"].createElement("table", _extends({
-    className: classnames__default["default"](styles$15['data-table__table'], (_classNames2 = {}, _classNames2[styles$15['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
+    className: classnames__default["default"](styles$14['data-table__table'], (_classNames2 = {}, _classNames2[styles$14['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
   }, dataProps), columns && isShowingColumns && React__default["default"].createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: isShowingContent && showActionMenu
   }), React__default["default"].createElement("tbody", {
-    className: classnames__default["default"](styles$15['data-table__body'], (_classNames3 = {}, _classNames3[styles$15['data-table__body--no-bottom-radius']] = isShowingFooter && isShowingContent, _classNames3)),
+    className: classnames__default["default"](styles$14['data-table__body'], (_classNames3 = {}, _classNames3[styles$14['data-table__body--no-bottom-radius']] = isShowingFooter && isShowingContent, _classNames3)),
     "data-testid": testId
   }, isShowingContent && content.map(function (item, index) {
     var _item$key;
@@ -15332,7 +15396,7 @@ var DataTable = function DataTable(_ref) {
       key: index
     });
   }))), isShowingFooter && isShowingContent && React__default["default"].createElement("tfoot", {
-    className: styles$15['data-table__footer'],
+    className: styles$14['data-table__footer'],
     "data-testid": testId && testId + "-footer"
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
     placement: "bottom",
@@ -15340,7 +15404,7 @@ var DataTable = function DataTable(_ref) {
   })), React__default["default"].createElement(Pagination, null));
 };
 
-var styles$P = {"accordion-item":"_8980Z","accordion-item__link":"_C-YV6","accordion-item__header":"_vk-N-","accordion-item__icon":"_LSVms","accordion-item__icon--active":"_hLMLR","accordion-item__content":"_KFyFh","accordion-item__content--active":"_kykXP"};
+var styles$O = {"accordion-item":"_8980Z","accordion-item__link":"_C-YV6","accordion-item__header":"_vk-N-","accordion-item__icon":"_LSVms","accordion-item__icon--active":"_hLMLR","accordion-item__content":"_KFyFh","accordion-item__content--active":"_kykXP"};
 
 var AccordionItem = function AccordionItem(props) {
   var item = props.item,
@@ -15351,9 +15415,10 @@ var AccordionItem = function AccordionItem(props) {
     content = item.content;
   var isFocusedByClickRef = React__default["default"].useRef(false);
   return React__default["default"].createElement("div", {
-    className: styles$P['accordion-item']
+    className: styles$O['accordion-item']
   }, React__default["default"].createElement("button", {
-    className: styles$P['accordion-item__header'],
+    type: "button",
+    className: styles$O['accordion-item__header'],
     onClick: function onClick() {
       if (isOpen) {
         handleAccordionItemOpen(null);
@@ -15380,15 +15445,15 @@ var AccordionItem = function AccordionItem(props) {
   }, typeof title === 'string' ? React__default["default"].createElement(Text, {
     emphasis: "bold"
   }, title) : title, React__default["default"].createElement(IconChevronDown, {
-    className: styles$P["accordion-item__icon" + (isOpen ? '--active' : '')],
+    className: styles$O["accordion-item__icon" + (isOpen ? '--active' : '')],
     color: 'surface-on-color-subtle'
   }))), React__default["default"].createElement("div", {
     "data-testid": "" + (isOpen ? 'accordion-item-' + id + '-open' : 'accordion-item-' + id + '-closed'),
-    className: styles$P["accordion-item__content" + (isOpen ? '--active' : '')]
+    className: styles$O["accordion-item__content" + (isOpen ? '--active' : '')]
   }, isOpen && React__default["default"].createElement(Text, null, content)));
 };
 
-var styles$O = {"accordion":"_058SP"};
+var styles$N = {"accordion":"_058SP"};
 
 var _excluded$bb = ["items", "onExpand", "defaultOpenId"];
 /**
@@ -15418,7 +15483,7 @@ var Accordion = function Accordion(_ref) {
       isAccordionMounted: true
     }
   }, React__default["default"].createElement("div", _extends({
-    className: styles$O['accordion']
+    className: styles$N['accordion']
   }, dataProps), items.map(function (item, index) {
     var id = item.id || index.toString();
     return React__default["default"].createElement(AccordionItem, {
@@ -15432,7 +15497,7 @@ var Accordion = function Accordion(_ref) {
   })));
 };
 
-var styles$N = {"action-list":"_pWke5","action-list__title":"_p8I7K","action-list__empty-state":"_l-tFB"};
+var styles$M = {"action-list":"_pWke5","action-list__title":"_p8I7K","action-list__empty-state":"_l-tFB"};
 
 /**
  * A list of tasks or items that require user attention and can be completed with an action. Each item should have at least one clear action for the user to take.
@@ -15446,15 +15511,15 @@ var ActionList = function ActionList(_ref) {
   var translate = useTranslation('ActionList');
   var hasChildren = React__default["default"].Children.count(children) > 0;
   return React__default["default"].createElement("div", {
-    className: styles$N['action-list'],
+    className: styles$M['action-list'],
     "data-testid": testId,
     style: {
       maxHeight: maxHeight
     }
   }, title && React__default["default"].createElement("div", {
-    className: styles$N['action-list__title']
+    className: styles$M['action-list__title']
   }, title), hasChildren ? children : React__default["default"].createElement("div", {
-    className: styles$N['action-list__empty-state']
+    className: styles$M['action-list__empty-state']
   }, React__default["default"].createElement(EmptyStateContainerStack, {
     title: (emptyState == null ? void 0 : emptyState.title) || translate('emptyStateTitle'),
     mediaUrl: emptyState == null ? void 0 : emptyState.image,
@@ -15633,7 +15698,7 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$M = {"custom-control":"_pXQqq"};
+var styles$L = {"custom-control":"_pXQqq"};
 
 var _excluded$ba = ["children"];
 function CustomControl(_ref) {
@@ -15643,7 +15708,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) == null ? void 0 : _props$getValue[0];
   return React__default["default"].createElement(Select.components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default["default"].createElement("div", {
-    className: styles$M['custom-control'],
+    className: styles$L['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -15831,9 +15896,9 @@ var CustomContainer = function CustomContainer(props) {
   }));
 };
 
-var styles$L = {"custom-menu-text-field":"_AAUjm","custom-menu-hr":"_mFLK9","custom-menu-div":"_1XpI4"};
+var styles$K = {"custom-menu-text-field":"_AAUjm","custom-menu-hr":"_mFLK9","custom-menu-div":"_1XpI4"};
 
-var styles$K = {"creatable-button--align-left":"_Qw267","creatable-button":"_f9V5D"};
+var styles$J = {"creatable-button--align-left":"_Qw267","creatable-button":"_f9V5D"};
 
 /**
  * Shared creatable button component used in CustomMenu and CustomGroupWithCreate.
@@ -15859,7 +15924,7 @@ var CreatableButton = function CreatableButton(_ref) {
   if (!button || typeof button === 'string') {
     var _classNames;
     return React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$K['creatable-button'], (_classNames = {}, _classNames[styles$K['creatable-button--align-left']] = alignLeft, _classNames))
+      className: classnames__default["default"](styles$J['creatable-button'], (_classNames = {}, _classNames[styles$J['creatable-button--align-left']] = alignLeft, _classNames))
     }, React__default["default"].createElement(Button, {
       theme: "link-primary",
       onClick: handleClick,
@@ -15883,7 +15948,7 @@ var CreatableButton = function CreatableButton(_ref) {
     overrideProps.theme = 'link-primary';
   }
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$K['creatable-button'], (_classNames2 = {}, _classNames2[styles$K['creatable-button--align-left']] = alignLeft, _classNames2))
+    className: classnames__default["default"](styles$J['creatable-button'], (_classNames2 = {}, _classNames2[styles$J['creatable-button--align-left']] = alignLeft, _classNames2))
   }, React__default["default"].cloneElement(button, overrideProps));
 };
 
@@ -15978,7 +16043,7 @@ function CustomMenu(_ref) {
   return React__default["default"].createElement(Select.components.Menu, _extends({}, props), React__default["default"].createElement("div", {
     ref: containerRef
   }, children, React__default["default"].createElement("hr", {
-    className: styles$L['custom-menu-hr']
+    className: styles$K['custom-menu-hr']
   }), !showFooter ? React__default["default"].createElement(CreatableButton, {
     creatableButton: creatableButton,
     onClick: function onClick() {
@@ -15991,13 +16056,13 @@ function CustomMenu(_ref) {
     onMenuInputFocus: onMenuInputFocus,
     onSubmit: onCreateButton,
     defaultValue: inputDefaultValue,
-    wrapperClassName: styles$L['custom-menu-div'],
-    inputClassName: styles$L['custom-menu-text-field'],
+    wrapperClassName: styles$K['custom-menu-div'],
+    inputClassName: styles$K['custom-menu-text-field'],
     testId: "select-create-option-input"
   })));
 }
 
-var styles$J = {"custom-group-with-create-text-field":"_JZG4r","custom-group-with-create-hr":"_04fIM","custom-group-with-create-input-wrapper":"_oJzDV","custom-group-with-create-button-wrapper":"_hLu2D"};
+var styles$I = {"custom-group-with-create-text-field":"_JZG4r","custom-group-with-create-hr":"_04fIM","custom-group-with-create-input-wrapper":"_oJzDV","custom-group-with-create-button-wrapper":"_hLu2D"};
 
 function CustomGroupWithCreate(props) {
   var _props$selectProps$co = props.selectProps.componentsProps,
@@ -16034,7 +16099,7 @@ function CustomGroupWithCreate(props) {
   return React__default["default"].createElement("div", {
     ref: containerRef
   }, React__default["default"].createElement(Select.components.Group, _extends({}, props)), !isInputActive ? React__default["default"].createElement("div", {
-    className: styles$J['custom-group-with-create-button-wrapper']
+    className: styles$I['custom-group-with-create-button-wrapper']
   }, React__default["default"].createElement(CreatableButton, {
     creatableButton: creatableButton,
     onClick: function onClick() {
@@ -16048,8 +16113,8 @@ function CustomGroupWithCreate(props) {
     onMenuInputFocus: onMenuInputFocus,
     onSubmit: onCreateButton,
     defaultValue: inputDefaultValue,
-    wrapperClassName: styles$J['custom-group-with-create-input-wrapper'],
-    inputClassName: styles$J['custom-group-with-create-text-field'],
+    wrapperClassName: styles$I['custom-group-with-create-input-wrapper'],
+    inputClassName: styles$I['custom-group-with-create-text-field'],
     testId: "select-create-option-input-" + groupLabel
   }));
 }
@@ -16167,7 +16232,7 @@ var useSelectField = function useSelectField(_ref) {
   };
 };
 
-var styles$I = {"select-field__suffix":"_vqC1M"};
+var styles$H = {"select-field__suffix":"_vqC1M"};
 
 /** Simple dropdown field where the user chooses one option from a predefined list. */
 var SelectField = function SelectField(props) {
@@ -16176,7 +16241,7 @@ var SelectField = function SelectField(props) {
     selectProps = _useSelectField.selectProps;
   //Select field has the chevron icon as suffix, so we need to add a margin to the suffix to avoid overlapping with the chevron icon
   var suffixWithMargin = props.suffix ? React__default["default"].createElement("div", {
-    className: styles$I['select-field__suffix']
+    className: styles$H['select-field__suffix']
   }, props.suffix) : undefined;
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
     prefix: props.prefix,
@@ -16219,9 +16284,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   }, rest));
 };
 
-var styles$H = {"date-filter":"_PyXfe","date-filter--wide":"_P6ttU"};
+var styles$G = {"date-filter":"_PyXfe","date-filter--wide":"_P6ttU"};
 
-var styles$G = {"date-filter-display":"_N37zE","date-filter-display--non-interactive":"_42Bvz","date-filter-display--wide":"_h8n2w","date-filter-display__display-icon":"_i08yV"};
+var styles$F = {"date-filter-display":"_N37zE","date-filter-display--non-interactive":"_42Bvz","date-filter-display--wide":"_h8n2w","date-filter-display__display-icon":"_i08yV"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -16274,7 +16339,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     weekStart = _ref.weekStart,
     onClick = _ref.onClick;
   return React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$G['date-filter-display'], (_classnames = {}, _classnames[styles$G['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames)),
+    className: classnames__default["default"](styles$F['date-filter-display'], (_classnames = {}, _classnames[styles$F['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
     ref: ref
@@ -16282,7 +16347,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     space: 12,
     alignItems: "center"
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$G['date-filter-display__display-icon'])
+    className: classnames__default["default"](styles$F['date-filter-display__display-icon'])
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "flexible",
     color: "surface-on-color-subtle"
@@ -16293,7 +16358,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var styles$F = {"date-stepper":"_9wFtw","date-stepper--backward":"_OrtcR","date-stepper--forward":"_oYoUt"};
+var styles$E = {"date-stepper":"_9wFtw","date-stepper--backward":"_OrtcR","date-stepper--forward":"_oYoUt"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -16322,7 +16387,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
     onChange = _ref.onChange,
     date = _ref.date;
   return React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$F['date-stepper'], (_classnames = {}, _classnames[styles$F['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$F['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames__default["default"](styles$E['date-stepper'], (_classnames = {}, _classnames[styles$E['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$E['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -16391,9 +16456,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$1c['calendar']
+    className: styles$1b['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$1c['calendar__overlay'],
+    className: styles$1b['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -16488,7 +16553,7 @@ var DateFilter = function DateFilter(_ref) {
   }, [setCalendarOpen]);
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$H['date-filter'], (_classnames = {}, _classnames[styles$H['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames__default["default"](styles$G['date-filter'], (_classnames = {}, _classnames[styles$G['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default["default"].createElement(Inline, {
     space: 0
   }, React__default["default"].createElement(DateFilterStepper, {
@@ -16535,7 +16600,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$E = {"segmented-control":"_RezMY","segmented-control__button":"_lehFG","segmented-control__button--selected":"_Fr5kb"};
+var styles$D = {"segmented-control":"_RezMY","segmented-control__button":"_lehFG","segmented-control__button--selected":"_Fr5kb"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -16546,7 +16611,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
     return option === value;
   };
   return React__default["default"].createElement("div", {
-    className: styles$E['segmented-control'],
+    className: styles$D['segmented-control'],
     "data-testid": testId
   }, options.map(function (option) {
     var _classnames;
@@ -16556,14 +16621,14 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames__default["default"](styles$E['segmented-control__button'], (_classnames = {}, _classnames[styles$E['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames__default["default"](styles$D['segmented-control__button'], (_classnames = {}, _classnames[styles$D['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option));
   }));
 };
 
-var styles$D = {"form--standard-size":"_8-Ykj"};
+var styles$C = {"form--standard-size":"_8-Ykj"};
 
-var styles$C = {"form-section":"_3uYIj","form-section__title":"_2WdOf","form-section__subtitle":"_zybxx","form-section--no-margin":"_xT-U1"};
+var styles$B = {"form-section":"_3uYIj","form-section__title":"_2WdOf","form-section__subtitle":"_zybxx","form-section--no-margin":"_xT-U1"};
 
 /**
  * FormSection is a component that groups related form fields together, optionally with a title and subtitle. It can also be rendered as a card for visual separation.
@@ -16580,12 +16645,12 @@ var FormSection = function FormSection(_ref) {
   var content = React__default["default"].createElement(Stack, null, (title || subtitle) && React__default["default"].createElement(Stack, {
     space: 8
   }, title && React__default["default"].createElement("h2", {
-    className: classnames__default["default"](styles$C['form-section__title'])
+    className: classnames__default["default"](styles$B['form-section__title'])
   }, title), subtitle && React__default["default"].createElement("h3", {
-    className: classnames__default["default"](styles$C['form-section__subtitle'])
+    className: classnames__default["default"](styles$B['form-section__subtitle'])
   }, subtitle)), children);
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$C['form-section'], (_classnames = {}, _classnames[styles$C['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
+    className: classnames__default["default"](styles$B['form-section'], (_classnames = {}, _classnames[styles$B['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
     "data-testid": testId
   }, as === 'card' ? React__default["default"].createElement(Card, {
     testId: testId && testId + "-card"
@@ -16604,7 +16669,7 @@ var updateButtonProps = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$B = {"form-footer":"_4ksfB"};
+var styles$A = {"form-footer":"_4ksfB"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$primary2, _actions$secondary, _actions$tertiary;
@@ -16641,7 +16706,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default["default"].Children.count(children) === 1 && React__default["default"].isValidElement(children) && children.type === Inline;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$B['form-footer']),
+    className: classnames__default["default"](styles$A['form-footer']),
     "data-testid": testId
   }, actions && React__default["default"].createElement(FormFooterActions, {
     actions: actions
@@ -16680,12 +16745,12 @@ var Form = function Form(_ref) {
     }
   }, React__default["default"].createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik == null ? void 0 : formik.handleSubmit,
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$D['form--standard-size']] = !wide, _classnames)),
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$C['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default["default"].createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$A = {"form-row":"_xX-RS"};
+var styles$z = {"form-row":"_xX-RS"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -16716,7 +16781,7 @@ var FormRow = function FormRow(_ref) {
     space: space,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$A['form-row']
+    extraClass: styles$z['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default["default"].createElement("span", {
       key: index,
@@ -16725,7 +16790,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$z = {"text-field":"_JaB08","text-field--focus":"_62RIR","text-field--disabled":"_CDt23","text-field--invalid":"_wf4XP","text-field__toolbar":"_7xVsj"};
+var styles$y = {"text-field":"_JaB08","text-field--focus":"_62RIR","text-field--disabled":"_CDt23","text-field--invalid":"_wf4XP","text-field__toolbar":"_7xVsj"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = React.useRef(null);
@@ -16799,7 +16864,7 @@ var TextAreaField = function TextAreaField(_ref) {
   return React__default["default"].createElement(Field, _extends({}, fieldProps, {
     characterCount: controllers.value !== undefined && maxLength ? maxLength - controllers.value.length : undefined
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$z['text-field'], (_classnames = {}, _classnames[styles$z['text-field--invalid']] = hasError, _classnames[styles$z['text-field--disabled']] = disabled, _classnames[styles$z['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames__default["default"](styles$y['text-field'], (_classnames = {}, _classnames[styles$y['text-field--invalid']] = hasError, _classnames[styles$y['text-field--disabled']] = disabled, _classnames[styles$y['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef == null ? void 0 : containerRef.current)) {
@@ -16832,7 +16897,7 @@ var TextAreaField = function TextAreaField(_ref) {
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default["default"].createElement("div", {
-    className: styles$z['text-field__toolbar'],
+    className: styles$y['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -16866,7 +16931,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
  */
 var TextField = React.forwardRef(TextFieldElement);
 
-var styles$y = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
+var styles$x = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -16936,10 +17001,10 @@ var CreatableOption = function CreatableOption(_ref) {
   };
   return React__default["default"].createElement(React__default["default"].Fragment, null, !isCreatingOption && React__default["default"].createElement("div", {
     key: 'pill-select-field-create-option',
-    className: styles$y['pill-select-field']
+    className: styles$x['pill-select-field']
   }, React__default["default"].createElement("button", {
     "data-testid": testId ? testId + "-create-option" : undefined,
-    className: styles$y['pill-select-field__add-new-input'],
+    className: styles$x['pill-select-field__add-new-input'],
     onClick: function onClick() {
       setIsCreatingOption(true);
       setNewOptionLabel('');
@@ -16948,9 +17013,9 @@ var CreatableOption = function CreatableOption(_ref) {
     size: "small"
   }), createOptionLabel)), isCreatingOption && React__default["default"].createElement("div", {
     key: 'pill-select-field-creating-option',
-    className: styles$y['pill-select-field']
+    className: styles$x['pill-select-field']
   }, React__default["default"].createElement("input", {
-    className: styles$y['pill-select-field__creating-input'],
+    className: styles$x['pill-select-field__creating-input'],
     name: name + "-pill-select-field-creating-option",
     id: 'pill-select-field-creating-option',
     type: "text",
@@ -16973,7 +17038,7 @@ var CreatableOption = function CreatableOption(_ref) {
       }
     }
   }), React__default["default"].createElement("span", {
-    className: styles$y['pill-select-field__creating-custom-input']
+    className: styles$x['pill-select-field__creating-custom-input']
   }, !newOptionLabel && React__default["default"].createElement(Text, {
     as: "body",
     color: "surface-on-color-disabled"
@@ -17026,7 +17091,7 @@ var PillSelectField = function PillSelectField(_ref) {
       }
     };
     return React__default["default"].createElement("button", {
-      className: styles$y['pill-select-field__removable-icon'],
+      className: styles$x['pill-select-field__removable-icon'],
       onClick: handleClick,
       disabled: disabled
     }, React__default["default"].createElement(IconTimes, {
@@ -17045,7 +17110,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default["default"].createElement("div", {
       key: itemIdentifier,
-      className: styles$y['pill-select-field']
+      className: styles$x['pill-select-field']
     }, React__default["default"].createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -17065,7 +17130,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default["default"].createElement("span", {
-      className: styles$y['pill-select-field__custom-input']
+      className: styles$x['pill-select-field__custom-input']
     }, option.label, option.isRemovable && React__default["default"].createElement(RemoveButton, {
       option: option
     })));
@@ -17077,7 +17142,7 @@ var PillSelectField = function PillSelectField(_ref) {
   })));
 };
 
-var styles$x = {"week-select-field":"_IYHYX","week-select-field__day":"_JnbPv","week-select-field__day-pill":"_9GwLj","week-select-field__day-abbr":"_WcKdi","week-select-field__day-num":"_MQ3xL"};
+var styles$w = {"week-select-field":"_IYHYX","week-select-field__day":"_JnbPv","week-select-field__day-pill":"_9GwLj","week-select-field__day-abbr":"_WcKdi","week-select-field__day-num":"_MQ3xL"};
 
 var toKey = function toKey(d) {
   return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate();
@@ -17123,14 +17188,14 @@ var WeekSelectField = function WeekSelectField(_ref) {
     caption: caption,
     error: error
   }, React__default["default"].createElement("div", {
-    className: styles$x['week-select-field']
+    className: styles$w['week-select-field']
   }, days.map(function (day, index) {
     var key = toKey(day);
     var isChecked = selectedKeys.has(key);
     var itemId = id + "-" + key;
     return React__default["default"].createElement("div", {
       key: key,
-      className: styles$x['week-select-field__day']
+      className: styles$w['week-select-field__day']
     }, React__default["default"].createElement("input", {
       type: "checkbox",
       id: itemId,
@@ -17147,11 +17212,11 @@ var WeekSelectField = function WeekSelectField(_ref) {
         handleChange(newValue);
       }
     }), React__default["default"].createElement("span", {
-      className: styles$x['week-select-field__day-pill']
+      className: styles$w['week-select-field__day-pill']
     }, React__default["default"].createElement("span", {
-      className: styles$x['week-select-field__day-abbr']
+      className: styles$w['week-select-field__day-abbr']
     }, displayFormat === 'month' ? monthAbbr[day.getMonth()] : dayAbbr[day.getDay()]), React__default["default"].createElement("span", {
-      className: styles$x['week-select-field__day-num']
+      className: styles$w['week-select-field__day-num']
     }, day.getDate())));
   })));
 };
@@ -17193,9 +17258,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$w = {"label":"_xzukU","label--truncate":"_iVWRB","caption":"_JNfQO","radio-group-field__label":"_2KvuU","radio-group-field__caption":"_ZeIOd"};
+var styles$v = {"label":"_xzukU","label--truncate":"_iVWRB","caption":"_JNfQO","radio-group-field__label":"_2KvuU","radio-group-field__caption":"_ZeIOd"};
 
-var styles$v = {"label":"_s7mjc","label--truncate":"_dZjDs","caption":"_JIw-5","radio-group-box-option":"_IIX-P","radio-group-box-option__box":"_P588B","radio-group-box-option__box--disabled":"_Ir3Og","radio-group-box-option__label":"_U--9r","radio-group-box-option__label--disabled":"_Lvxmy","radio-group-box-option__caption":"_NC-bO","radio-group-box-option__caption--disabled":"_04Cjp"};
+var styles$u = {"label":"_s7mjc","label--truncate":"_dZjDs","caption":"_JIw-5","radio-group-box-option":"_IIX-P","radio-group-box-option__box":"_P588B","radio-group-box-option__box--disabled":"_Ir3Og","radio-group-box-option__label":"_U--9r","radio-group-box-option__label--disabled":"_Lvxmy","radio-group-box-option__caption":"_NC-bO","radio-group-box-option__caption--disabled":"_04Cjp"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var _classNames, _classNames2, _classNames3;
@@ -17212,7 +17277,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default["default"].createElement("label", {
-    className: styles$v['radio-group-box-option'],
+    className: styles$u['radio-group-box-option'],
     "data-testid": testId
   }, React__default["default"].createElement("input", {
     type: "radio",
@@ -17223,7 +17288,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$v['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$v['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
+    className: classnames__default["default"](styles$u['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$u['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
   }, React__default["default"].createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -17232,13 +17297,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$v['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$v['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
+    className: classnames__default["default"](styles$u['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$u['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
   }, label), caption && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$v['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$v['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
+    className: classnames__default["default"](styles$u['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$u['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
   }, caption)))));
 };
 
-var styles$u = {"radio-group-option":"_7fVpn","radio-group-option__caption":"_VD7SO","radio-group-option__custom-input":"_Yfxkl"};
+var styles$t = {"radio-group-option":"_7fVpn","radio-group-option__caption":"_VD7SO","radio-group-option__custom-input":"_Yfxkl"};
 
 /** RadioGroupField form element. */
 var RadioGroupOption = function RadioGroupOption(_ref) {
@@ -17259,7 +17324,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default["default"].createElement("div", {
-    className: styles$u['radio-group-option']
+    className: styles$t['radio-group-option']
   }, React__default["default"].createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -17270,11 +17335,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default["default"].createElement("span", {
-    className: styles$u['radio-group-option__custom-input']
+    className: styles$t['radio-group-option__custom-input']
   })), label && React__default["default"].createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default["default"].createElement("div", {
-    className: styles$u['radio-group-option__caption']
+    className: styles$t['radio-group-option__caption']
   }, React__default["default"].createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -17411,7 +17476,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: space
   }, label && React__default["default"].createElement("div", {
-    className: styles$w['radio-group-field__label']
+    className: styles$v['radio-group-field__label']
   }, label), React__default["default"].createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default["default"].createElement(RadioOptions, {
@@ -17423,20 +17488,20 @@ var RadioGroupField = function RadioGroupField(_ref) {
     testId: testId,
     space: space
   }, children), caption && React__default["default"].createElement("div", {
-    className: styles$w['radio-group-caption']
+    className: styles$v['radio-group-caption']
   }, caption), controllers.error && React__default["default"].createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$t = {"text-field":"_6Of1F","text-field--invalid":"_NQPNK","text-field--prefixed":"_BpQWQ","text-field--suffixed":"_cpYWb","password-container":"_pAoib","password-toggle":"_WVvS6","password-toggle--disabled":"_G29N3"};
+var styles$s = {"text-field":"_6Of1F","text-field--invalid":"_NQPNK","text-field--prefixed":"_BpQWQ","text-field--suffixed":"_cpYWb","password-container":"_pAoib","password-toggle":"_WVvS6","password-toggle--disabled":"_G29N3"};
 
-var styles$s = {"password-criteria":"_1ruWK","password-criteria--invalid":"_xR7tb"};
+var styles$r = {"password-criteria":"_1ruWK","password-criteria--invalid":"_xR7tb"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
   var met = _ref.met,
     children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$s['password-criteria'], (_classnames = {}, _classnames[styles$s['password-criteria--invalid']] = !met, _classnames))
+    className: classnames__default["default"](styles$r['password-criteria'], (_classnames = {}, _classnames[styles$r['password-criteria--invalid']] = !met, _classnames))
   }, React__default["default"].createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default["default"].createElement(IconCheck, {
@@ -17516,11 +17581,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: styles$t['password-container']
+    className: styles$s['password-container']
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames__default["default"](styles$t['text-field'], (_classnames = {}, _classnames[styles$t['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$s['text-field'], (_classnames = {}, _classnames[styles$s['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     autoComplete: autoComplete,
@@ -17533,7 +17598,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$t['password-toggle'], (_classNames = {}, _classNames[styles$t['password-toggle--disabled']] = disabled, _classNames)),
+    className: classnames__default["default"](styles$s['password-toggle'], (_classNames = {}, _classNames[styles$s['password-toggle--disabled']] = disabled, _classNames)),
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -17645,7 +17710,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   })));
 };
 
-var styles$r = {"custom-list":"_cSkvD"};
+var styles$q = {"custom-list":"_cSkvD"};
 
 var _excluded$b4 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad", "isLoadingMore"];
 var CustomList = function CustomList(_ref) {
@@ -17666,7 +17731,7 @@ var CustomList = function CustomList(_ref) {
   })) : showFooter && props.options.length > 0 && React__default["default"].createElement(Inline, {
     justifyContent: "center"
   }, React__default["default"].createElement("div", {
-    className: styles$r['custom-list']
+    className: styles$q['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
@@ -18063,7 +18128,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$q = {"text-field":"_6cH4X","date-range-field":"_DMb6M","text-field--invalid":"_eXIiZ","text-field--prefixed":"_Lc6QO","text-field--suffixed":"_VWrJD","date-range-field--invalid":"_ZJ2A5","date-range-field--disabled":"_WkaJQ"};
+var styles$p = {"text-field":"_6cH4X","date-range-field":"_DMb6M","text-field--invalid":"_eXIiZ","text-field--prefixed":"_Lc6QO","text-field--suffixed":"_VWrJD","date-range-field--invalid":"_ZJ2A5","date-range-field--disabled":"_WkaJQ"};
 
 var calendarStyles = {"root":"_SsQ7L","table":"_Ar-fF","caption":"_Tp79k","head_cell":"_Ya6Zr","day_today":"_lFzs7","day_outside":"_TjttB","nav_button":"_cwiRM","day_range_middle":"_rJolM","day_range_start":"_nVIPx","day_range_end":"_Y50yT"};
 
@@ -18131,9 +18196,9 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
   var MONTH_NAMES = getMonths(translate);
   var highlight = buildHighlightDayPickerProps(highlightedDays);
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$1c['calendar']
+    className: styles$1b['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$1c['calendar__overlay'],
+    className: styles$1b['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -18348,7 +18413,7 @@ var DateRangeField = function DateRangeField(_ref) {
     start = _controllers$value.start,
     end = _controllers$value.end;
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$q['date-range-field'], (_classnames = {}, _classnames[styles$q['date-range-field--invalid']] = hasError, _classnames[styles$q['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames__default["default"](styles$p['date-range-field'], (_classnames = {}, _classnames[styles$p['date-range-field--invalid']] = hasError, _classnames[styles$p['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "medium",
@@ -18717,7 +18782,7 @@ var TimeRangeSelector = React.forwardRef(TimeFieldElement);
  */
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var styles$p = {"text-field":"_yV-BZ","time-range-field":"_9i8Lj","text-field--invalid":"_FJVdv","text-field--prefixed":"_B7q-i","text-field--suffixed":"_DvCJW","time-range-field--invalid":"_g2UhP","time-range-field--disabled":"_Yn4T4"};
+var styles$o = {"text-field":"_yV-BZ","time-range-field":"_9i8Lj","text-field--invalid":"_FJVdv","text-field--prefixed":"_B7q-i","text-field--suffixed":"_DvCJW","time-range-field--invalid":"_g2UhP","time-range-field--disabled":"_Yn4T4"};
 
 var TimeRangeEnd = function TimeRangeEnd(_ref) {
   var startTime = _ref.startTime,
@@ -18836,7 +18901,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
     end: end
   }) : getDuration(end, start, subtractDuration);
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$p['time-range-field'], (_classnames = {}, _classnames[styles$p['time-range-field--invalid']] = hasError, _classnames[styles$p['time-range-field--disabled']] = disabled, _classnames)),
+    className: classnames__default["default"](styles$o['time-range-field'], (_classnames = {}, _classnames[styles$o['time-range-field--invalid']] = hasError, _classnames[styles$o['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default["default"].createElement(TimeRangeStart, {
     startTime: startTime,
@@ -18867,7 +18932,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
   })));
 };
 
-var styles$o = {"currency-field":"_GyYnE","currency-field--with-mask":"_NfdKk","currency-field__mask-display":"_ddacu","currency-field__mask-display--disabled":"_o1-zA"};
+var styles$n = {"currency-field":"_GyYnE","currency-field--with-mask":"_NfdKk","currency-field__mask-display":"_ddacu","currency-field__mask-display--disabled":"_o1-zA"};
 
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
@@ -18937,9 +19002,9 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
       setShowMask(false);
       inputProps.onFocus(e);
     },
-    className: classnames__default["default"](inputProps.className, styles$o['currency-field'], (_classnames = {}, _classnames[styles$o['currency-field--with-mask']] = showMask && !!inputProps.value, _classnames))
+    className: classnames__default["default"](inputProps.className, styles$n['currency-field'], (_classnames = {}, _classnames[styles$n['currency-field--with-mask']] = showMask && !!inputProps.value, _classnames))
   }))), showMask && !!inputProps.value && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$o['currency-field__mask-display'], (_classnames2 = {}, _classnames2[styles$o['currency-field__mask-display--disabled']] = inputProps.disabled, _classnames2)),
+    className: classnames__default["default"](styles$n['currency-field__mask-display'], (_classnames2 = {}, _classnames2[styles$n['currency-field__mask-display--disabled']] = inputProps.disabled, _classnames2)),
     style: {
       marginLeft: displayPadding
     }
@@ -19065,7 +19130,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$n = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input":"_Hes9b","phone-field__input--with-square-borders":"_TEU6N"};
+var styles$m = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input":"_Hes9b","phone-field__input--with-square-borders":"_TEU6N"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -19976,7 +20041,7 @@ var COUNTRIES = {
 };
 var COUNTRY_CODES = Object.keys(COUNTRIES);
 
-var styles$m = {"country-selector":"_VYs4A","country-selector--with-error":"_oSxxZ","country-selector__trigger":"_jlyd4","country-selector--disabled":"_tNInT","country-selector__trigger--with-error":"_424HM","country-selector__trigger--disabled":"_0XOFf","country-selector__trigger-flag":"_RfPa1","country-selector__flag":"_uADOl"};
+var styles$l = {"country-selector":"_VYs4A","country-selector--with-error":"_oSxxZ","country-selector__trigger":"_jlyd4","country-selector--disabled":"_tNInT","country-selector__trigger--with-error":"_424HM","country-selector__trigger--disabled":"_0XOFf","country-selector__trigger-flag":"_RfPa1","country-selector__flag":"_uADOl"};
 
 var flagIcons = {"fi":"_wEQeh","fis":"_Z-kfc","fi-ac":"_amiP8","fi-ad":"_-Nycw","fi-ae":"_5zcAZ","fi-af":"_x-kp7","fi-ag":"_cfoi1","fi-ai":"_xoMS-","fi-al":"_am975","fi-am":"_0p-gD","fi-ao":"_l245N","fi-ar":"_xigkX","fi-as":"_fSczv","fi-at":"_tTeMy","fi-au":"_nSXvc","fi-aw":"_J3Dgu","fi-ax":"_PnU0s","fi-az":"_Hevuf","fi-ba":"_V-NYg","fi-bb":"_rdxaV","fi-bd":"_W3w35","fi-be":"_HXWpo","fi-bf":"_-xCW2","fi-bg":"_UuyPh","fi-bh":"_qYHkT","fi-bi":"_sfFeO","fi-bj":"_HcoBc","fi-bl":"_VvU29","fi-bm":"_DCtD1","fi-bn":"_QdHY3","fi-bo":"_Ayx7f","fi-bq":"_VfZGH","fi-br":"_HigIg","fi-bs":"_PWr-E","fi-bt":"_uFlIS","fi-bw":"_Mmoqr","fi-by":"_MKO28","fi-bz":"_HBn3o","fi-ca":"_wB3xX","fi-cc":"_oJEC5","fi-cd":"_C3RR8","fi-cf":"_ZVOZZ","fi-cg":"_Nk7Zr","fi-ch":"_9qTmx","fi-ci":"_4-gxn","fi-ck":"_YEK3x","fi-cl":"_-iNl4","fi-cm":"_UozRb","fi-cn":"_KsOEH","fi-co":"_ptSEc","fi-cr":"_92iwJ","fi-cu":"_D0k3p","fi-cv":"_O5oBT","fi-cw":"_82pI2","fi-cx":"_Eqg1T","fi-cy":"_740E8","fi-cz":"_483Iy","fi-de":"_Wla8X","fi-dj":"_Jm9gH","fi-dk":"_5QJuz","fi-dm":"_4lh-K","fi-do":"_Zvttl","fi-dz":"_-5iKJ","fi-ec":"_XMC0f","fi-ee":"_tZDe6","fi-eg":"_5USxE","fi-eh":"_rpC1Z","fi-er":"_Rhm4A","fi-es":"_QN2si","fi-et":"_2ihBN","fi-fi":"_2Lctq","fi-fj":"_ljZXm","fi-fk":"_Um9-A","fi-fm":"_mXG-Y","fi-fo":"_SemMo","fi-fr":"_MGcxf","fi-ga":"_aPt7H","fi-gb":"_2tU39","fi-gd":"_CPs5V","fi-ge":"_09VJF","fi-gf":"_7STtr","fi-gg":"_CUbGJ","fi-gh":"_mgJbd","fi-gi":"_mxhe5","fi-gl":"_gXogr","fi-gm":"_JHzzB","fi-gn":"_XJqm4","fi-gp":"_YnrVE","fi-gq":"_J47-w","fi-gr":"_5YAwo","fi-gt":"_PWFl-","fi-gu":"_ItzVX","fi-gw":"_hiRJc","fi-gy":"_oitDt","fi-hk":"_18FzB","fi-hn":"_5ySTg","fi-hr":"_rzYuT","fi-ht":"_Pq7or","fi-hu":"_-u5Ze","fi-id":"_m8GwW","fi-ie":"_pPEAu","fi-il":"_Butse","fi-im":"_wLEYj","fi-in":"_XY7D8","fi-io":"_iKM6K","fi-iq":"_iwLoJ","fi-ir":"_L1Gd1","fi-is":"_6XPDX","fi-it":"_JXv9-","fi-je":"_Qwjxj","fi-jm":"_qzNME","fi-jo":"_JqYXz","fi-jp":"_CakOC","fi-ke":"_Czyy6","fi-kg":"_6Yydv","fi-kh":"_zhLEc","fi-ki":"_qJxPJ","fi-km":"_KDmv4","fi-kn":"_n3xy0","fi-kp":"_voM9e","fi-kr":"_sErX2","fi-kw":"_kJUFk","fi-ky":"_Ensoj","fi-kz":"_JVpyw","fi-la":"_eVzpD","fi-lb":"_f400B","fi-lc":"_vhHp5","fi-li":"_cP76d","fi-lk":"_NGSeL","fi-lr":"_yIHm7","fi-ls":"_Kj-GJ","fi-lt":"_VTK9E","fi-lu":"_N4PHA","fi-lv":"_d-ZWR","fi-ly":"_49dYi","fi-ma":"_Iqggh","fi-mc":"_QQY-Q","fi-md":"_e7v9L","fi-me":"_WqN7P","fi-mf":"_4Exh-","fi-mg":"_W-d9O","fi-mh":"_3xTQ7","fi-mk":"_O26qm","fi-ml":"_hiLpW","fi-mm":"_QGh12","fi-mn":"_KNLNH","fi-mo":"_Kdw-k","fi-mp":"_CTkAK","fi-mq":"_MzLKJ","fi-mr":"_sjQHJ","fi-ms":"_ENTOn","fi-mt":"_GoKtf","fi-mu":"_WLc98","fi-mv":"_08Tf4","fi-mw":"_MvAGM","fi-mx":"_FPDND","fi-my":"_1xoF6","fi-mz":"_ylwZy","fi-na":"_-pxPH","fi-nc":"_W-Ot-","fi-ne":"_EOA-X","fi-nf":"_W5Kl5","fi-ng":"_q76Cs","fi-ni":"_AuKsI","fi-nl":"_qLIaU","fi-no":"_xbcrX","fi-np":"_FQt4h","fi-nr":"_jJbHx","fi-nu":"_TSamx","fi-nz":"_AzsKY","fi-om":"_TUoW9","fi-pa":"_jCT-C","fi-pe":"_VMnoV","fi-pf":"_Gblvx","fi-pg":"_FLRnq","fi-ph":"_0RSGR","fi-pk":"_DfZCd","fi-pl":"_hv9I4","fi-pm":"_IDp3q","fi-pr":"_2MHj1","fi-ps":"_0FLpC","fi-pt":"_p--cH","fi-pw":"_VP-zx","fi-py":"_-Tnic","fi-qa":"_Dy7Il","fi-re":"_7N5ED","fi-ro":"_4AYwa","fi-rs":"_Y-a4O","fi-ru":"_OKa79","fi-rw":"_bBqN1","fi-sa":"_vFwuG","fi-sb":"_MMmc2","fi-sc":"_ZUM8E","fi-sd":"_9k8eB","fi-se":"_cX0c9","fi-sg":"_4-yWs","fi-sh":"_-vaPR","fi-si":"_9oJgu","fi-sj":"_J0R6u","fi-sk":"_1VxbX","fi-sl":"_RiBAA","fi-sm":"_rEaFc","fi-sn":"_PRwVO","fi-so":"_XKFdC","fi-sr":"_LtiS3","fi-ss":"_45mng","fi-st":"_OtIks","fi-sv":"_OonsM","fi-sx":"_NtzDE","fi-sy":"_Ail2H","fi-sz":"_8XRyD","fi-ta":"_GQvZn","fi-tc":"_SbD-E","fi-td":"_AnXAO","fi-tg":"_smamZ","fi-th":"_AVcL5","fi-tj":"_EqMlf","fi-tk":"_20VO7","fi-tl":"_jz9hm","fi-tm":"_kmmny","fi-tn":"_9aBQ-","fi-to":"_G63l0","fi-tr":"_6shnc","fi-tt":"_P5fq4","fi-tv":"_b7SpV","fi-tw":"_jwNjI","fi-tz":"_qtU8x","fi-ua":"_bNAHa","fi-ug":"_-G-iW","fi-us":"_xwz53","fi-uy":"_DpeX8","fi-uz":"_kSABK","fi-va":"_VOSWl","fi-vc":"_X-aU3","fi-ve":"_FiFnt","fi-vg":"_d66Ny","fi-vi":"_6kM5U","fi-vn":"_ikRJo","fi-vu":"_5XaHH","fi-wf":"_ZEJXX","fi-ws":"_IzR7c","fi-xk":"_88V52","fi-ye":"_2Dwap","fi-yt":"_kQ0fh","fi-za":"_XzYDs","fi-zm":"_mA8wn","fi-zw":"_iIsuB"};
 
@@ -19993,15 +20058,15 @@ var CountrySelector = function CountrySelector(_ref) {
     return arr.indexOf(code) === index && code in COUNTRIES;
   });
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$m['country-selector'], (_classNames = {}, _classNames[styles$m['country-selector--with-error']] = hasError, _classNames[styles$m['country-selector--disabled']] = disabled, _classNames))
+    className: classnames__default["default"](styles$l['country-selector'], (_classNames = {}, _classNames[styles$l['country-selector--with-error']] = hasError, _classNames[styles$l['country-selector--disabled']] = disabled, _classNames))
   }, React__default["default"].createElement(Dropdown, {
     trigger: React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$m['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$m['country-selector__trigger--with-error']] = hasError, _classNames2[styles$m['country-selector__trigger--disabled']] = disabled, _classNames2))
+      className: classnames__default["default"](styles$l['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$l['country-selector__trigger--with-error']] = hasError, _classNames2[styles$l['country-selector__trigger--disabled']] = disabled, _classNames2))
     }, React__default["default"].createElement(Inline, {
       space: 8,
       alignItems: "center"
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + country.toLowerCase()], styles$m['country-selector__trigger-flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + country.toLowerCase()], styles$l['country-selector__trigger-flag'])
     }), React__default["default"].createElement(IconChevronDown, {
       color: "currentColor",
       size: "medium"
@@ -20018,7 +20083,7 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLowerCase()], styles$m['country-selector__flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLowerCase()], styles$l['country-selector__flag'])
     }), React__default["default"].createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }), React__default["default"].createElement(DropdownListDivider, null), COUNTRY_CODES.map(function (countryCode) {
     return React__default["default"].createElement(DropdownListItem, {
@@ -20030,7 +20095,7 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLowerCase()], styles$m['country-selector__flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLowerCase()], styles$l['country-selector__flag'])
     }), React__default["default"].createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }))));
 };
@@ -20107,7 +20172,7 @@ var PhoneField = function PhoneField(_ref) {
     }
   };
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: styles$n['phone-field']
+    className: styles$m['phone-field']
   }, !disabledCountry && React__default["default"].createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -20119,17 +20184,17 @@ var PhoneField = function PhoneField(_ref) {
       space: 4,
       alignItems: "center"
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$n['country-selector__flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$m['country-selector__flag'])
     }), React__default["default"].createElement("span", null, "+", libphonenumberJs.getCountryCallingCode(selectedCountry))) : "+" + libphonenumberJs.getCountryCallingCode(selectedCountry)
   }, React__default["default"].createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames__default["default"](inputProps.className, styles$n['phone-field__input'], (_classNames = {}, _classNames[styles$n['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames__default["default"](inputProps.className, styles$m['phone-field__input'], (_classNames = {}, _classNames[styles$m['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));
 };
 
-var styles$l = {"color-overlay":"_LTVgG","color-overlay__color-display-container":"_R1mls","color-overlay__color-display-circle":"_M-8rP","color-overlay__color-display-circle--selected":"_o92fv","color-overlay__color-display-circle--focused":"_QBSCQ","color-overlay__custom-color":"_iQoTb"};
+var styles$k = {"color-overlay":"_LTVgG","color-overlay__color-display-container":"_R1mls","color-overlay__color-display-circle":"_M-8rP","color-overlay__color-display-circle--selected":"_o92fv","color-overlay__color-display-circle--focused":"_QBSCQ","color-overlay__custom-color":"_iQoTb"};
 
 var SEQUENTIAL_COLORS = ['seq-18', 'seq-4', 'seq-7', 'seq-16', 'seq-12', 'seq-6', 'seq-9', 'seq-3', 'seq-11', 'seq-1', 'seq-13', 'seq-10', 'seq-14', 'seq-8', 'seq-19', 'seq-20', 'seq-2', 'seq-17', 'seq-15', 'seq-5'];
 
@@ -20356,7 +20421,7 @@ var OverlayContent = function OverlayContent(_ref) {
   return React__default["default"].createElement("div", {
     style: overlayStyle,
     ref: overlayRef,
-    className: styles$l['color-overlay'],
+    className: styles$k['color-overlay'],
     role: "dialog"
   }, SEQUENTIAL_COLORS.map(function (color, index) {
     return React__default["default"].createElement(ColorDisplay, {
@@ -20372,7 +20437,7 @@ var OverlayContent = function OverlayContent(_ref) {
       }
     });
   }), allowCustomColor && React__default["default"].createElement("div", {
-    className: styles$l['color-overlay__custom-color']
+    className: styles$k['color-overlay__custom-color']
   }, React__default["default"].createElement(Button, {
     ref: customButtonRef,
     size: "full-width",
@@ -20387,12 +20452,12 @@ var ColorDisplay = function ColorDisplay(_ref2) {
     _onClick = _ref2.onClick,
     onHover = _ref2.onHover;
   return React__default["default"].createElement("button", {
-    className: styles$l['color-overlay__color-display-container'],
+    className: styles$k['color-overlay__color-display-container'],
     onClick: function onClick() {
       return _onClick(color);
     }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$l['color-overlay__color-display-circle'], (_classNames = {}, _classNames[styles$l['color-overlay__color-display-circle--selected']] = isSelected, _classNames[styles$l['color-overlay__color-display-circle--focused']] = isFocused, _classNames)),
+    className: classnames__default["default"](styles$k['color-overlay__color-display-circle'], (_classNames = {}, _classNames[styles$k['color-overlay__color-display-circle--selected']] = isSelected, _classNames[styles$k['color-overlay__color-display-circle--focused']] = isFocused, _classNames)),
     onMouseEnter: onHover,
     style: {
       backgroundColor: COLORS[color]
@@ -20400,12 +20465,12 @@ var ColorDisplay = function ColorDisplay(_ref2) {
   }));
 };
 
-var styles$k = {"color-swatch":"_UUuiJ"};
+var styles$j = {"color-swatch":"_UUuiJ"};
 
 var ColorSwatch = function ColorSwatch(_ref) {
   var color = _ref.color;
   return React__default["default"].createElement("div", {
-    className: styles$k['color-swatch'],
+    className: styles$j['color-swatch'],
     style: {
       backgroundColor: color
     }
@@ -20493,7 +20558,7 @@ var findSeqTokenByHex = function findSeqTokenByHex(value) {
   });
 };
 
-var styles$j = {"custom-color-picker":"_OHgPk"};
+var styles$i = {"custom-color-picker":"_OHgPk"};
 
 /**
  * A visually hidden native color input. It is kept mounted on the field (not
@@ -20547,12 +20612,12 @@ var CustomColorPicker = React.forwardRef(function (_ref, ref) {
     type: "color",
     "aria-hidden": "true",
     tabIndex: -1,
-    className: styles$j['custom-color-picker'],
+    className: styles$i['custom-color-picker'],
     defaultValue: safeColor
   });
 });
 
-var styles$i = {"color-field":"_KJawn"};
+var styles$h = {"color-field":"_KJawn"};
 
 var ColorFieldElement = function ColorFieldElement(props, ref) {
   var _useTextField = useTextField(_extends({}, props, {
@@ -20591,7 +20656,7 @@ var ColorFieldElement = function ColorFieldElement(props, ref) {
     (_customPickerRef$curr = customPickerRef.current) == null || _customPickerRef$curr.open();
   };
   return React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement("div", {
-    className: styles$i['color-field']
+    className: styles$h['color-field']
   }, React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
     prefix: React__default["default"].createElement(ColorSwatch, {
       color: getCurrentColor()
@@ -20703,76 +20768,22 @@ var isValidPhoneNumber = function isValidPhoneNumber(value) {
   return !value || libphonenumberJs.isValidPhoneNumber(value);
 };
 
-var styles$h = {"avatar":"_V1U8v","avatar__container":"_peAaI","avatar--small":"_9g-tn","avatar__badge":"_uViot","avatar--medium":"_vNXJW","avatar--large":"_9ZKAB","avatar--extra-large":"_uv14Y"};
-
-var styles$g = {"avatar-image":"_iDN1j"};
+var styles$g = {"avatar":"_V1U8v","avatar__container":"_peAaI","avatar--loading":"_vQa4v","avatar-shimmer":"_rw4zM","avatar--small":"_9g-tn","avatar__badge":"_uViot","avatar--medium":"_vNXJW","avatar--large":"_9ZKAB","avatar--extra-large":"_uv14Y"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
-    color = _ref.color,
     _ref$alt = _ref.alt,
     alt = _ref$alt === void 0 ? 'Profile' : _ref$alt,
-    onImageFallbackError = _ref.onImageFallbackError;
-  var _useState = React.useState(false),
-    hasImageError = _useState[0],
-    setHasImageError = _useState[1];
-  if (url && !hasImageError) {
-    return React__default["default"].createElement("img", {
-      src: url,
-      alt: alt,
-      onError: function onError() {
-        setHasImageError(true);
-        onImageFallbackError();
-      }
-    });
-  }
-  return React__default["default"].createElement("div", {
-    className: styles$g['avatar-image']
-  }, React__default["default"].createElement(IconUser, {
-    size: "flexible",
-    color: color,
-    variant: "solid"
-  }));
+    onImageFallbackError = _ref.onImageFallbackError,
+    onImageLoad = _ref.onImageLoad;
+  return React__default["default"].createElement("img", {
+    src: url,
+    alt: alt,
+    onError: onImageFallbackError,
+    onLoad: onImageLoad
+  });
 };
 
-var PROFILE_IMAGES = [{
-  backgroundColor: '#EAD3E3',
-  avatarColor: '#AA6589'
-}, {
-  backgroundColor: '#F4F6FC',
-  avatarColor: '#9EA9D3'
-}, {
-  backgroundColor: '#FBEBE6',
-  avatarColor: '#F3A097'
-}, {
-  backgroundColor: '#F7FAF2',
-  avatarColor: '#BBCA94'
-}, {
-  backgroundColor: '#E1F3EF',
-  avatarColor: '#8DC3B9'
-}, {
-  backgroundColor: '#F2DCBD',
-  avatarColor: '#A98146'
-}, {
-  backgroundColor: '#AA6589',
-  avatarColor: '#EAD3E3'
-}, {
-  backgroundColor: '#9EA9D3',
-  avatarColor: '#F4F6FC'
-}, {
-  backgroundColor: '#F3A097',
-  avatarColor: '#FBEBE6'
-}, {
-  backgroundColor: '#BBCA94',
-  avatarColor: '#F7FAF2'
-}, {
-  backgroundColor: '#8DC3B9',
-  avatarColor: '#E1F3EF'
-}, {
-  backgroundColor: '#A98146',
-  avatarColor: '#F2DCBD'
-}];
-
 var elementCallbackMap = null;
 function getElementCallbackMap() {
   if (!elementCallbackMap) {
@@ -20853,20 +20864,31 @@ function useIsVisibleInViewPort() {
   };
 }
 
+function getInitials(name) {
+  var trimmed = name.trim();
+  var parts = trimmed.split(/\s+/);
+  if (parts.length >= 2) {
+    return parts[0][0] + parts[parts.length - 1][0];
+  }
+  return trimmed.slice(0, 2);
+}
 /**
  * Avatar represents a person or entity — such as a company, location, department, or role — with a visual identifier. It appears wherever a person or entity's identity needs to be communicated at a glance.
  */
 var Avatar = function Avatar(_ref) {
   var _classnames;
   var children = _ref.children,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? COLORS['surface-on-color-subtle'] : _ref$color,
+    color = _ref.color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     urlProp = _ref.url,
     badge = _ref.badge,
     alt = _ref.alt,
     testId = _ref.testId;
+  // When a `color` is explicitly passed use it, otherwise fall back to the
+  // neutral color. Keeping `color` undefined by default lets us distinguish
+  // "caller passed a color" from "no color given".
+  var resolvedColor = color ? getColor(color) : COLORS['surface-on-color-subtle'];
   var _useIsVisibleInViewPo = useIsVisibleInViewPort(),
     isVisible = _useIsVisibleInViewPo.isVisible,
     elementRef = _useIsVisibleInViewPo.elementRef;
@@ -20882,34 +20904,51 @@ var Avatar = function Avatar(_ref) {
     }
   }, [isVisible, hasBeenVisible]);
   var url = hasBeenVisible ? urlProp : undefined;
-  var _useState2 = React.useState(false),
-    showIconInsteadOfImage = _useState2[0],
-    setShowIconInsteadOfImage = _useState2[1];
-  var _useState3 = React.useState(function () {
-      return PROFILE_IMAGES[Math.floor(Math.random() * PROFILE_IMAGES.length)];
-    }),
-    defaultProfilePictureColors = _useState3[0];
-  // If passing an url we are defaulting to a lighter grey while the image loads
-  var backgroundColor = url ? COLORS['surface-container-highest'] : getColor(color);
-  return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$h['avatar__container']),
-    ref: elementRef
+  var _useState2 = React.useState(url),
+    prevUrl = _useState2[0],
+    setPrevUrl = _useState2[1];
+  var _useState3 = React.useState(false),
+    imageLoadFailed = _useState3[0],
+    setImageLoadFailed = _useState3[1];
+  var _useState4 = React.useState(false),
+    imageLoaded = _useState4[0],
+    setImageLoaded = _useState4[1];
+  if (url !== prevUrl) {
+    setPrevUrl(url);
+    setImageLoaded(false);
+    setImageLoadFailed(false);
+  }
+  var isImageLoading = !!url && !imageLoadFailed && !imageLoaded;
+  // Show a lighter grey while the image loads; fall back to the role/neutral color otherwise.
+  var backgroundColor = url && !imageLoadFailed ? COLORS['surface-container-highest'] : resolvedColor;
+  return React__default["default"].createElement(AvatarContext.Provider, {
+    value: {
+      size: size
+    }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$h['avatar'], (_classnames = {}, _classnames[styles$h['avatar--small']] = size === 'small', _classnames[styles$h['avatar--medium']] = size === 'medium', _classnames[styles$h['avatar--large']] = size === 'large', _classnames[styles$h['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames__default["default"](styles$g['avatar__container']),
+    ref: elementRef,
+    style: url && color ? {
+      '--avatar-ring-color': resolvedColor
+    } : undefined
+  }, React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$g['avatar'], (_classnames = {}, _classnames[styles$g['avatar--small']] = size === 'small', _classnames[styles$g['avatar--medium']] = size === 'medium', _classnames[styles$g['avatar--large']] = size === 'large', _classnames[styles$g['avatar--extra-large']] = size === 'extra-large', _classnames[styles$g['avatar--loading']] = isImageLoading, _classnames)),
     style: {
-      backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
+      backgroundColor: backgroundColor
     },
     "data-testid": testId
-  }, children || React__default["default"].createElement(AvatarImage, {
+  }, url && !imageLoadFailed ? React__default["default"].createElement(AvatarImage, {
     url: url,
-    color: defaultProfilePictureColors.avatarColor,
     alt: alt,
     onImageFallbackError: function onImageFallbackError() {
-      return setShowIconInsteadOfImage(true);
+      return setImageLoadFailed(true);
+    },
+    onImageLoad: function onImageLoad() {
+      return setImageLoaded(true);
     }
-  }), badge && size !== 'small' && React__default["default"].createElement("div", {
-    className: styles$h['avatar__badge']
-  }, badge)));
+  }) : typeof children === 'string' ? getInitials(children) : children, badge && React__default["default"].createElement("div", {
+    className: styles$g['avatar__badge']
+  }, badge))));
 };
 
 var CHIP_THEME = {