@digital-ai/dot-components 1.4.0 → 1.5.0

package/dot-components.umd.js

@@ -217,33 +217,31 @@
           className = _a.className,
           _b = _a["data-testid"],
           dataTestId = _b === void 0 ? 'dot-accordion' : _b,
-          _c = _a.defaultExpanded,
-          defaultExpanded = _c === void 0 ? null : _c,
-          _d = _a.disabled,
-          disabled = _d === void 0 ? false : _d,
-          _e = _a.expanded,
-          expanded = _e === void 0 ? null : _e,
-          _f = _a.hasElevation,
-          hasElevation = _f === void 0 ? false : _f,
+          defaultExpanded = _a.defaultExpanded,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c,
+          expanded = _a.expanded,
+          _d = _a.hasElevation,
+          hasElevation = _d === void 0 ? false : _d,
           onChange = _a.onChange,
-          _g = _a.square,
-          square = _g === void 0 ? false : _g,
+          _e = _a.square,
+          square = _e === void 0 ? false : _e,
           startIcon = _a.startIcon,
           summary = _a.summary,
-          _h = _a.noWrap,
-          noWrap = _h === void 0 ? true : _h;
+          _f = _a.noWrap,
+          noWrap = _f === void 0 ? true : _f;
       var rootClasses = useStylesWithRootClass(rootClassName$H, className);
 
-      var _j = React.useState(),
-          elevation = _j[0],
-          setElevation = _j[1];
+      var _g = React.useState(),
+          elevation = _g[0],
+          setElevation = _g[1];
 
       React.useEffect(function () {
-        if (defaultExpanded !== null) {
+        if (defaultExpanded !== undefined) {
           console.warn('The use of `defaultExpanded` is deprecated and will be removed in the next major release, please use `expanded` instead.');
         }
 
-        if (onChange && expanded === null) {
+        if (onChange && expanded === undefined) {
           console.warn('The use of an `onChange` callback makes this a controlled component but no `expanded` state has been provided. In effect, this makes the component disabled.');
         }
       }, []);
@@ -252,8 +250,8 @@
       }, [hasElevation]);
       var dftExpanded = defaultExpanded;
 
-      if (dftExpanded === null) {
-        dftExpanded = expanded === null ? false : expanded;
+      if (dftExpanded === undefined) {
+        dftExpanded = expanded === undefined ? false : expanded;
       }
 
       return /*#__PURE__*/React__default["default"].createElement(StyledAccordion, {
@@ -262,8 +260,8 @@
         "data-testid": dataTestId,
         defaultExpanded: dftExpanded,
         disabled: disabled,
-        expanded: onChange ? expanded : null,
         elevation: elevation,
+        expanded: onChange ? expanded : undefined,
         onChange: onChange,
         square: square
       }, /*#__PURE__*/React__default["default"].createElement(core.AccordionSummary, {
@@ -273,8 +271,8 @@
           iconId: "chevron-down"
         })
       }, startIcon, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-        variant: "body1",
-        noWrap: noWrap
+        noWrap: noWrap,
+        variant: "body1"
       }, /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
         title: noWrap ? summary : ''
       }, summary))), /*#__PURE__*/React__default["default"].createElement(core.AccordionDetails, {
@@ -638,8 +636,8 @@
         },
         color: color,
         "data-testid": dataTestId,
-        disabled: disabled,
         disableRipple: disableRipple,
+        disabled: disabled,
         onClick: function onClick(event) {
           return _onClick && _onClick(event);
         },
@@ -703,8 +701,8 @@
         "data-testid": dataTestId,
         href: href,
         onClick: onClick,
-        onMouseEnter: onMouseEnter,
         onKeyPress: handleKeyPress,
+        onMouseEnter: onMouseEnter,
         rel: rel,
         tabIndex: tabIndex,
         target: target,
@@ -1270,6 +1268,51 @@
       return colorOptions[numberFromValue % colorOptions.length];
     };
 
+    var AvatarContent = function AvatarContent(_a) {
+      var dataTestId = _a["data-testid"],
+          iconId = _a.iconId,
+          imageSrc = _a.imageSrc,
+          size = _a.size,
+          text = _a.text,
+          type = _a.type;
+
+      var parsedText = function parsedText() {
+        var textArray = text.split(' ');
+
+        if (textArray.length > 1) {
+          var firstInitial = textArray[0].slice(0, 1);
+          var secondInitial = textArray[1].slice(0, 1);
+          return "" + firstInitial + secondInitial;
+        } else {
+          return text ? text.slice(0, 1) : '';
+        }
+      };
+
+      var getHeadingFromAvatarSize = function getHeadingFromAvatarSize() {
+        return size === 'large' ? 'h1' : 'h3';
+      };
+
+      var getIconFontSizeFromAvatarSize = function getIconFontSizeFromAvatarSize() {
+        return size === 'small' ? size : 'medium';
+      };
+
+      if (type === 'icon' || type === 'image' && !imageSrc) {
+        return /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+          "data-testid": dataTestId + "-icon",
+          fontSize: getIconFontSizeFromAvatarSize(),
+          iconId: iconId || 'user'
+        });
+      }
+
+      if (type === 'text') {
+        return /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+          variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
+        }, parsedText());
+      }
+
+      return null;
+    };
+
     var DotAvatar = function DotAvatar(_a) {
       var alt = _a.alt,
           ariaLabel = _a.ariaLabel,
@@ -1299,52 +1342,33 @@
         return 'default';
       };
 
-      var parsedText = function parsedText() {
-        var textArray = text.split(' ');
-
-        if (textArray.length > 1) {
-          var firstInitial = textArray[0].slice(0, 1);
-          var secondInitial = textArray[1].slice(0, 1);
-          return "" + firstInitial + secondInitial;
-        } else {
-          return text ? text.slice(0, 1) : '';
-        }
-      };
-
-      var getHeadingFromAvatarSize = function getHeadingFromAvatarSize() {
-        return size === 'large' ? 'h1' : 'h3';
-      };
-
-      var getIconFontSizeFromAvatarSize = function getIconFontSizeFromAvatarSize() {
-        return size === 'small' ? size : 'medium';
-      };
-
       return /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
         title: tooltip
       }, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, {
         alt: alt,
         "aria-label": ariaLabel,
         className: size,
-        color: getAvatarColor(),
-        component: _onClick ? 'button' : component,
         classes: {
           root: rootClasses,
           img: 'dot-img'
         },
+        color: getAvatarColor(),
+        component: _onClick ? 'button' : component,
         "data-testid": dataTestId,
         onClick: function onClick(event) {
           return _onClick ? _onClick(event) : null;
         },
         src: type === 'image' ? imageSrc : null,
-        variant: variant,
-        style: style
-      }, type === 'icon' || type === 'image' && !imageSrc ? /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-        "data-testid": dataTestId + "-icon",
-        iconId: iconId ? iconId : 'user',
-        fontSize: getIconFontSizeFromAvatarSize()
-      }) : type === 'text' ? /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-        variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
-      }, parsedText()) : null));
+        style: style,
+        variant: variant
+      }, /*#__PURE__*/React__default["default"].createElement(AvatarContent, {
+        "data-testid": dataTestId,
+        iconId: iconId,
+        imageSrc: imageSrc,
+        text: text,
+        type: type,
+        size: size
+      })));
     };
 
     var rootClassName$B = 'dot-drawer';
@@ -1381,16 +1405,16 @@
           width = _e === void 0 ? '256px' : _e;
       var rootClasses = useStylesWithRootClass(rootClassName$B, className);
       return /*#__PURE__*/React__default["default"].createElement(StyledDrawer, {
-        "aria-label": ariaLabel,
-        "data-testid": dataTestId,
+        ModalProps: ModalProps,
+        PaperProps: PaperProps,
         anchor: anchor,
+        "aria-label": ariaLabel,
         classes: {
           root: rootClasses,
           paper: 'dot-drawer-paper'
         },
+        "data-testid": dataTestId,
         height: height,
-        ModalProps: ModalProps,
-        PaperProps: PaperProps,
         onClose: function onClose(event) {
           return _onClose && _onClose(event);
         },
@@ -1581,10 +1605,10 @@
           return /*#__PURE__*/React__default["default"].createElement(core.MenuItem, {
             "aria-label": item.ariaLabel,
             className: "dot-li " + (item.classes ? item.classes : ''),
+            key: index,
             onClick: function onClick(event) {
               return handleSelect(event, item.key);
             },
-            key: index,
             style: {
               height: calculateItemHeight()
             }
@@ -1604,11 +1628,11 @@
       var theme = _a.theme;
       return styled.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n      &.", " {\n        background: ", ";\n\n        &.", " .", " {\n          padding-left: ", "px;\n        }\n\n        .", " .dot-drawer-paper {\n          z-index: ", ";\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", "px;\n          }\n        }\n      }\n    "], ["\n      &.", " {\n        background: ", ";\n\n        &.", " .", " {\n          padding-left: ", "px;\n        }\n\n        .", " .dot-drawer-paper {\n          z-index: ", ";\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", "px;\n          }\n        }\n      }\n    "])), rootClassName$y, theme.palette.layer.n0, nestedListClassName, listItemRootClass, theme.spacing(4), nestedDrawerClassName, levelBottom, theme.spacing(1));
     });
-    var StyledListItem = styled__default["default"](core.ListItem)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var StyledListItem = styled__default["default"](core.ListItem)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        p.MuiTypography-root {\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", "px;\n        }\n\n        .dot-list-item-end-icon {\n          min-width: auto;\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "], ["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        p.MuiTypography-root {\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", "px;\n        }\n\n        .dot-list-item-end-icon {\n          min-width: auto;\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
+      return styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        p.MuiTypography-root {\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", "px;\n        }\n\n        .dot-list-item-end-icon {\n          min-width: auto;\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "], ["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        p.MuiTypography-root {\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", "px;\n        }\n\n        .dot-list-item-end-icon {\n          min-width: auto;\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
     });
-    var templateObject_1$B, templateObject_2$z, templateObject_3$7, templateObject_4$4;
+    var templateObject_1$B, templateObject_2$z, templateObject_3$8, templateObject_4$5;
 
     var CreateUUID = function CreateUUID() {
       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -1668,8 +1692,8 @@
               component: href && !onClick ? 'a' : null,
               href: href,
               key: parentItemIndex + "-" + index,
-              target: target,
-              onClick: onClick
+              onClick: onClick,
+              target: target
             }, /*#__PURE__*/React__default["default"].createElement("span", {
               className: flyoutSpanClasses
             }, startIconId && startIcon, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
@@ -1680,30 +1704,30 @@
           };
         });
         return /*#__PURE__*/React__default["default"].createElement(DotMenu, {
-          ariaLabel: ariaLabel,
           anchorEl: anchorEl,
+          ariaLabel: ariaLabel,
           className: flyoutMenuClassName,
           id: CreateUUID(),
+          key: parentItemIndex,
           menuItemHeight: "auto",
           menuItems: menuItems,
           menuPlacement: menuPlacement,
           onLeave: onMenuLeave,
-          open: open,
-          key: parentItemIndex
+          open: open
         });
       }
 
       if (type === 'drawer') {
         return /*#__PURE__*/React__default["default"].createElement(DotDrawer, {
-          anchor: "left",
-          className: nestedDrawerClassName,
-          "data-testid": "nested-drawer",
-          open: open,
           PaperProps: {
             style: {
               left: nestedDrawerLeftSpacing + "px"
             }
           },
+          anchor: "left",
+          className: nestedDrawerClassName,
+          "data-testid": "nested-drawer",
+          open: open,
           variant: "persistent"
         }, /*#__PURE__*/React__default["default"].createElement(DotList, {
           ariaLabel: ariaLabel,
@@ -1796,8 +1820,8 @@
 
         if (item.divider) {
           return /*#__PURE__*/React__default["default"].createElement(DotListDivider, {
-            item: item,
             index: index,
+            item: item,
             key: "divider-" + index
           });
         }
@@ -1810,12 +1834,12 @@
           href: item.href,
           isOpened: listItemIndex === index,
           items: item.items,
-          onClick: item.href && !item.onClick ? null : handleListItemClick,
-          onMenuLeave: handleMenuLeave,
           key: index,
           menuPlacement: menuPlacement,
           nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
           nestedListType: nestedListType,
+          onClick: item.href && !item.onClick ? null : handleListItemClick,
+          onMenuLeave: handleMenuLeave,
           primaryText: item.primaryText,
           secondaryText: item.secondaryText,
           selected: item.selected,
@@ -1948,11 +1972,11 @@
         className: "toggle-display",
         iconId: getChevronIcon()
       })) : endIconId && endIcon)), hasChildren && /*#__PURE__*/React__default["default"].createElement(NestedList, {
-        ariaLabel: "nested list",
         anchorEl: anchorEl,
+        ariaLabel: "nested list",
         items: items,
-        nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
         menuPlacement: menuPlacement,
+        nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
         onMenuLeave: handleMenuLeave,
         open: isOpened,
         type: nestedListType
@@ -2230,11 +2254,11 @@
     var StyledMainMenu = styled__default["default"](DotDrawer)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
       return styled.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n    &.dot-main-menu {\n      &.", " .dot-drawer-paper {\n        top: 48px;\n\n        .dot-sidebar {\n          height: calc(100vh - 48px);\n        }\n      }\n\n      .dot-drawer-paper {\n        top: 64px;\n        padding: 0;\n\n        .dot-sidebar {\n          height: calc(100vh - 64px);\n        }\n      }\n    }\n  "], ["\n    &.dot-main-menu {\n      &.", " .dot-drawer-paper {\n        top: 48px;\n\n        .dot-sidebar {\n          height: calc(100vh - 48px);\n        }\n      }\n\n      .dot-drawer-paper {\n        top: 64px;\n        padding: 0;\n\n        .dot-sidebar {\n          height: calc(100vh - 64px);\n        }\n      }\n    }\n  "])), denseClassName);
     });
-    var StyledAppToolbar = styled__default["default"].header(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var StyledAppToolbar = styled__default["default"].header(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n    &.", " {\n      align-items: center;\n      background: ", ";\n      border-bottom: 4px solid ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      padding: ", ";\n      position: fixed;\n      width: 100%;\n      z-index: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n\n      &.", " {\n        height: 48px;\n\n        .divider {\n          height: 32px;\n        }\n      }\n\n      .divider {\n        height: 36px;\n        width: 1px;\n        background: ", ";\n      }\n\n      .dot-icon-btn {\n        border: ", ";\n        color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          background: ", ";\n        }\n      }\n\n      .dot-main-menu-btn {\n        padding: ", ";\n        text-align: center;\n      }\n\n      .dot-branding {\n        align-items: center;\n        display: flex;\n        padding: ", ";\n\n        .primary-logo,\n        .app-logo {\n          margin-right: ", "px;\n        }\n\n        .primary-logo,\n        .dot-app-logo {\n          display: flex;\n          max-width: 200px;\n          svg,\n          img {\n            max-height: 36px;\n            max-width: 200px;\n          }\n        }\n\n        a {\n          line-height: 0;\n        }\n\n        .dot-product-name {\n          color: ", ";\n          font-size: 18px;\n          margin: ", ";\n        }\n\n        .divider {\n          margin-left: ", "px;\n        }\n      }\n\n      div.dot-right-side {\n        display: flex;\n        flex-grow: 2;\n        justify-content: flex-end;\n      }\n\n      .avatar-wrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        button.dot-avatar:focus-visible {\n          box-shadow: 0px 0px 0px 3px ", ",\n            0px 0px 0px 5px ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      align-items: center;\n      background: ", ";\n      border-bottom: 4px solid ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      padding: ", ";\n      position: fixed;\n      width: 100%;\n      z-index: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n\n      &.", " {\n        height: 48px;\n\n        .divider {\n          height: 32px;\n        }\n      }\n\n      .divider {\n        height: 36px;\n        width: 1px;\n        background: ", ";\n      }\n\n      .dot-icon-btn {\n        border: ", ";\n        color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          background: ", ";\n        }\n      }\n\n      .dot-main-menu-btn {\n        padding: ", ";\n        text-align: center;\n      }\n\n      .dot-branding {\n        align-items: center;\n        display: flex;\n        padding: ", ";\n\n        .primary-logo,\n        .app-logo {\n          margin-right: ", "px;\n        }\n\n        .primary-logo,\n        .dot-app-logo {\n          display: flex;\n          max-width: 200px;\n          svg,\n          img {\n            max-height: 36px;\n            max-width: 200px;\n          }\n        }\n\n        a {\n          line-height: 0;\n        }\n\n        .dot-product-name {\n          color: ", ";\n          font-size: 18px;\n          margin: ", ";\n        }\n\n        .divider {\n          margin-left: ", "px;\n        }\n      }\n\n      div.dot-right-side {\n        display: flex;\n        flex-grow: 2;\n        justify-content: flex-end;\n      }\n\n      .avatar-wrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        button.dot-avatar:focus-visible {\n          box-shadow: 0px 0px 0px 3px ", ",\n            0px 0px 0px 5px ", ";\n        }\n      }\n    }\n  "])), rootClassName$w, theme.palette.product === 'agility' ? theme.palette.agilityInterface.headerBg : theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[0], theme.spacing(1.5, 2, 1.5, 0), levelFourth, denseClassName, n400$2, theme.palette.product === 'agility' && 'none', theme.palette.grey[100], theme.palette.product === 'agility' && theme.palette.agilityInterface.topBarIconHoverBg, theme.spacing(0, 1), theme.spacing(0, 2), theme.spacing(1.5), theme.palette.grey[100], theme.spacing(0, 1.5), theme.spacing(2), theme.palette.layer.n900, theme.palette.layer.n0);
+      return styled.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    &.", " {\n      align-items: center;\n      background: ", ";\n      border-bottom: 4px solid ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      padding: ", ";\n      position: fixed;\n      width: 100%;\n      z-index: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n\n      &.", " {\n        height: 48px;\n\n        .divider {\n          height: 32px;\n        }\n      }\n\n      .divider {\n        height: 36px;\n        width: 1px;\n        background: ", ";\n      }\n\n      .dot-icon-btn {\n        border: ", ";\n        color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          background: ", ";\n        }\n      }\n\n      .dot-main-menu-btn {\n        padding: ", ";\n        text-align: center;\n      }\n\n      .dot-branding {\n        align-items: center;\n        display: flex;\n        padding: ", ";\n\n        .primary-logo,\n        .app-logo {\n          margin-right: ", "px;\n        }\n\n        .primary-logo,\n        .dot-app-logo {\n          display: flex;\n          max-width: 200px;\n          svg,\n          img {\n            max-height: 36px;\n            max-width: 200px;\n          }\n        }\n\n        a {\n          line-height: 0;\n        }\n\n        .dot-product-name {\n          color: ", ";\n          font-size: 18px;\n          margin: ", ";\n        }\n\n        .divider {\n          margin-left: ", "px;\n        }\n      }\n\n      div.dot-right-side {\n        display: flex;\n        flex-grow: 2;\n        justify-content: flex-end;\n      }\n\n      .avatar-wrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        button.dot-avatar:focus-visible {\n          box-shadow: 0px 0px 0px 3px ", ",\n            0px 0px 0px 5px ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      align-items: center;\n      background: ", ";\n      border-bottom: 4px solid ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 64px;\n      padding: ", ";\n      position: fixed;\n      width: 100%;\n      z-index: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n\n      &.", " {\n        height: 48px;\n\n        .divider {\n          height: 32px;\n        }\n      }\n\n      .divider {\n        height: 36px;\n        width: 1px;\n        background: ", ";\n      }\n\n      .dot-icon-btn {\n        border: ", ";\n        color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          background: ", ";\n        }\n      }\n\n      .dot-main-menu-btn {\n        padding: ", ";\n        text-align: center;\n      }\n\n      .dot-branding {\n        align-items: center;\n        display: flex;\n        padding: ", ";\n\n        .primary-logo,\n        .app-logo {\n          margin-right: ", "px;\n        }\n\n        .primary-logo,\n        .dot-app-logo {\n          display: flex;\n          max-width: 200px;\n          svg,\n          img {\n            max-height: 36px;\n            max-width: 200px;\n          }\n        }\n\n        a {\n          line-height: 0;\n        }\n\n        .dot-product-name {\n          color: ", ";\n          font-size: 18px;\n          margin: ", ";\n        }\n\n        .divider {\n          margin-left: ", "px;\n        }\n      }\n\n      div.dot-right-side {\n        display: flex;\n        flex-grow: 2;\n        justify-content: flex-end;\n      }\n\n      .avatar-wrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        button.dot-avatar:focus-visible {\n          box-shadow: 0px 0px 0px 3px ", ",\n            0px 0px 0px 5px ", ";\n        }\n      }\n    }\n  "])), rootClassName$w, theme.palette.product === 'agility' ? theme.palette.agilityInterface.headerBg : theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[0], theme.spacing(1.5, 2, 1.5, 0), levelFourth, denseClassName, n400$2, theme.palette.product === 'agility' && 'none', theme.palette.grey[100], theme.palette.product === 'agility' && theme.palette.agilityInterface.topBarIconHoverBg, theme.spacing(0, 1), theme.spacing(0, 2), theme.spacing(1.5), theme.palette.grey[100], theme.spacing(0, 1.5), theme.spacing(2), theme.palette.layer.n900, theme.palette.layer.n0);
     });
-    var templateObject_1$z, templateObject_2$x, templateObject_3$6, templateObject_4$3;
+    var templateObject_1$z, templateObject_2$x, templateObject_3$7, templateObject_4$4;
 
     var DotAppToolbar = function DotAppToolbar(_a) {
       var appName = _a.appName,
@@ -2263,8 +2287,9 @@
       var showMainMenu = mainMenu || mainMenuItems;
       var displayAppLogo = appLogo || appLogoSmall;
       var mainMenuRef = React.useRef(null);
-      var rootClasses = useStylesWithRootClass(rootClassName$w, className, dense ? denseClassName : '');
-      var mainMenuClasses = useStylesWithRootClass('dot-main-menu', dense ? denseClassName : '', menuOpen ? 'open' : '');
+      var denseClass = dense ? denseClassName : '';
+      var rootClasses = useStylesWithRootClass(rootClassName$w, className, denseClass);
+      var mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
       var targetBreakpoint = core.useMediaQuery(function (theme) {
         return theme.breakpoints.up('md');
       });
@@ -2321,8 +2346,8 @@
           return updateMenuOpen(false);
         },
         open: menuOpen,
-        width: mainMenuWidth + 'px',
-        variant: "persistent"
+        variant: "persistent",
+        width: mainMenuWidth + 'px'
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         ref: mainMenuRef
       }, mainMenuItems ? /*#__PURE__*/React__default["default"].createElement(DotSidebar, {
@@ -2356,10 +2381,10 @@
           className: item.className,
           iconId: item.iconId,
           iconSize: "default",
+          key: index,
           onClick: function onClick(event) {
             return item.onClick && item.onClick(event);
           },
-          key: index,
           size: "medium",
           tooltip: item.tooltip
         });
@@ -2431,12 +2456,12 @@
     var warningClassName = 'dot-warning';
     var adornmentIconClassName = 'dot-adornment-icon';
     var StyledAdornment = styled__default["default"](core.InputAdornment)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  .dot-icon {\n    font-size: 24px;\n    height: 24px;\n    padding: 0;\n    width: 24px;\n  }\n"], ["\n  .dot-icon {\n    font-size: 24px;\n    height: 24px;\n    padding: 0;\n    width: 24px;\n  }\n"])));
-    var StyledTextField = styled__default["default"](core.TextField)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var StyledTextField = styled__default["default"](core.TextField)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
           InputProps = _a.InputProps;
       return styled.css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "])), rootClassName$t, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$t, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen);
     });
-    var templateObject_1$w, templateObject_2$u, templateObject_3$5;
+    var templateObject_1$w, templateObject_2$u, templateObject_3$6;
 
     var rootClassName$s = 'dot-button';
     var StyledButton = styled__default["default"](core.Button)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
@@ -2515,18 +2540,18 @@
         },
         color: color,
         "data-testid": dataTestId,
-        disabled: disabled,
         disableRipple: disableRipple,
+        disabled: disabled,
         endIcon: endIcon,
         fullWidth: fullWidth,
         onClick: function onClick(event) {
           return _onClick && _onClick(event);
         },
         ref: ref,
-        variant: variant,
         size: size,
         startIcon: startIcon,
-        type: isSubmit ? 'submit' : 'button'
+        type: isSubmit ? 'submit' : 'button',
+        variant: variant
       }, children));
     });
 
@@ -2676,9 +2701,7 @@
 
           /* Add this to short circuit blur event (otherwise button click will not work):
            * https://github.com/mui-org/material-ui/issues/19038 */
-          onMouseDown: function onMouseDown(e) {
-            e.preventDefault();
-          },
+          onBlur: handleBlur,
           onKeyDown: function onKeyDown(event) {
             if (event.key === 'Tab' && textFieldInput) {
               event.preventDefault();
@@ -2686,7 +2709,9 @@
             }
           },
           // We want to close the popper each time focus is shifted from action item
-          onBlur: handleBlur
+          onMouseDown: function onMouseDown(e) {
+            e.preventDefault();
+          }
         }, /*#__PURE__*/React__default["default"].createElement(DotButton, {
           "data-testid": "dot-action-item-btn",
           disableRipple: true,
@@ -2702,6 +2727,7 @@
       };
 
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocomplete, {
+        PopperComponent: DotPopper,
         "aria-label": ariaLabel,
         classes: {
           root: rootClasses
@@ -2718,6 +2744,7 @@
           return option.group;
         } : undefined,
         multiple: multiple,
+        onBlur: handleBlur,
         onChange: function onChange(event, val, reason) {
           valuesChanged({
             event: event,
@@ -2726,20 +2753,18 @@
           });
           setIsOpened(false);
         },
-        open: isOpened,
-        options: sortOptions(),
-        PopperComponent: DotPopper,
-        // We want to close the popper each time focus is shifted from the autocomplete
-        onBlur: handleBlur,
         onClose: function onClose(event) {
           // We want to close popper in each occasion where focus isn't set to action item
           if (!('relatedTarget' in event) || event.relatedTarget !== actionItemRef.current) {
             setIsOpened(false);
           }
         },
+        // We want to close the popper each time focus is shifted from the autocomplete
         onOpen: function onOpen() {
           return setIsOpened(true);
         },
+        open: isOpened,
+        options: sortOptions(),
         renderInput: function renderInput(params) {
           return (
             /*#__PURE__*/
@@ -2763,9 +2788,6 @@
               inputRef: textFieldRef,
               label: label,
               name: label,
-              placeholder: showPlaceholder ? placeholder : undefined,
-              required: false,
-              variant: "outlined",
               onKeyDown: function onKeyDown(event) {
                 var _a; // Intercept 'tab' key press while action item element exists
 
@@ -2774,7 +2796,10 @@
                   event.preventDefault();
                   (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }
-              }
+              },
+              placeholder: showPlaceholder ? placeholder : undefined,
+              required: false,
+              variant: "outlined"
             }))
           );
         },
@@ -2848,146 +2873,306 @@
     };
 
     var rootClassName$q = 'dot-breadcrumbs';
-    var StyledBreadcrumbs = styled__default["default"](core.Breadcrumbs)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
+    var StyledBreadcrumbsWrapper = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    &.", " {\n      overflow: hidden;\n\n      .dot-breadcrumbs-menu {\n        .MuiMenuItem-root {\n          padding: 0;\n        }\n\n        a.breadcrumb {\n          width: 100%;\n          padding: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      overflow: hidden;\n\n      .dot-breadcrumbs-menu {\n        .MuiMenuItem-root {\n          padding: 0;\n        }\n\n        a.breadcrumb {\n          width: 100%;\n          padding: ", ";\n        }\n      }\n    }\n  "])), rootClassName$q, theme.spacing(0.5, 2));
+    });
+    var StyledBreadcrumbs = styled__default["default"](core.Breadcrumbs)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n    }\n    .breadcrumb {\n      padding: ", ";\n    }\n    .current-page {\n      color: ", ";\n      cursor: default;\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n    }\n    .breadcrumb {\n      padding: ", ";\n    }\n    .current-page {\n      color: ", ";\n      cursor: default;\n    }\n  "])), rootClassName$q, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
+      return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$q, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
     });
-    var templateObject_1$t, templateObject_2$r;
+    var templateObject_1$t, templateObject_2$r, templateObject_3$5, templateObject_4$3;
 
     var compareWidth = function compareWidth(parentEl, childEl) {
       return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
     };
 
+    var getItemsAfterCollapse = function getItemsAfterCollapse(adjustMaxItems, visibleItemsNumber, maxItems) {
+      // Check if maximum number of items is defined via prop
+      if (maxItems) {
+        return adjustMaxItems ? 1 : 2;
+      }
+
+      if (visibleItemsNumber > 1) return visibleItemsNumber - 1;
+      if (visibleItemsNumber === 1) return visibleItemsNumber;
+      return undefined;
+    };
+    var getMaxItems = function getMaxItems(adjustMaxItems, visibleItemsNumber, maxItems) {
+      // Check if maximum number of items is defined via prop
+      if (maxItems) {
+        return adjustMaxItems ? 2 : maxItems;
+      }
+
+      return visibleItemsNumber > 0 ? visibleItemsNumber : undefined;
+    };
+    var getWidthFromRef = function getWidthFromRef(ref) {
+      var _a;
+
+      return (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+    };
+    var checkIfFirstItemAfterCollapse = function checkIfFirstItemAfterCollapse(currentIndex, items, itemsAfterCollapse) {
+      return currentIndex === items.length - itemsAfterCollapse;
+    };
+    var getExpandElement = function getExpandElement(breadcrumbElement) {
+      var elements = breadcrumbElement.getElementsByClassName('MuiBreadcrumbs-ol');
+      if (!elements || elements.length !== 1) return null;
+      return elements[0].getElementsByClassName('MuiButtonBase-root')[0];
+    };
+    var getInitialMaxVisibleItems = function getInitialMaxVisibleItems(items, maxItems) {
+      return maxItems || items && Array.isArray(items) && items.length || 0;
+    };
+    var getMenuItems = function getMenuItems(items, itemsAfterCollapse) {
+      if (!items || !items.length || !isFinite(itemsAfterCollapse) || itemsAfterCollapse < 1 || itemsAfterCollapse >= items.length - 1) return [];
+      var sliceEnd = items.length - itemsAfterCollapse;
+      var menuItems = items.slice(1, sliceEnd);
+      if (!menuItems.length) return [];
+      return menuItems.map(function (item, index) {
+        var itemChildren = /*#__PURE__*/React__default["default"].createElement(DotLink, {
+          ariaLabel: item.ariaLabel,
+          className: "breadcrumb",
+          color: "inherit",
+          href: item.href,
+          key: index,
+          onClick: item.onClick,
+          tabIndex: 0,
+          underline: "none"
+        }, item.text);
+        return {
+          children: itemChildren,
+          key: index.toString()
+        };
+      });
+    };
+    var addListenersToMenu = function addListenersToMenu(expandElement, eventListener) {
+      expandElement.addEventListener('click', eventListener);
+      expandElement.addEventListener('keydown', eventListener);
+    };
+    var removeListenersFromMenu = function removeListenersFromMenu(expandElement, eventListener) {
+      expandElement.removeEventListener('click', eventListener);
+      expandElement.removeEventListener('keydown', eventListener);
+    };
+    var mapBreadcrumbItems = function mapBreadcrumbItems(items, refs, itemsAfterCollapse) {
+      var firstItemRef = refs.firstItemRef,
+          lastItemRef = refs.lastItemRef;
+      return items.map(function (item, index) {
+        var ariaLabel = item.ariaLabel,
+            href = item.href,
+            onClick = item.onClick,
+            text = item.text,
+            underline = item.underline;
+
+        if (index === items.length - 1) {
+          return /*#__PURE__*/React__default["default"].createElement("span", {
+            "aria-label": ariaLabel,
+            className: "breadcrumb current-page",
+            key: index,
+            ref: lastItemRef
+          }, text);
+        } else {
+          var isFirstItemAfterCollapse = checkIfFirstItemAfterCollapse(index, items, itemsAfterCollapse);
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            key: index,
+            ref: isFirstItemAfterCollapse ? firstItemRef : undefined
+          }, /*#__PURE__*/React__default["default"].createElement(DotLink, {
+            ariaLabel: ariaLabel,
+            className: "breadcrumb",
+            color: "inherit",
+            href: href,
+            onClick: onClick,
+            tabIndex: 0,
+            underline: underline
+          }, text));
+        }
+      });
+    };
+
+    var useBreadcrumbsResizer = function useBreadcrumbsResizer(breadcrumbsRightCoord, breadcrumbItemsProps, refs) {
+      var firstItemRef = refs.firstItemRef,
+          lastItemRef = refs.lastItemRef;
+      var items = breadcrumbItemsProps.items,
+          maxItems = breadcrumbItemsProps.maxItems;
+      var initialMaxVisibleItems = {
+        maxVisibleItems: getInitialMaxVisibleItems(items, maxItems),
+        lastRemovedItemWidth: undefined
+      };
+
+      var _a = React.useState(initialMaxVisibleItems),
+          breadcrumbsSettings = _a[0],
+          setBreadcrumbsSettings = _a[1];
+      /* Adjust number of visible items after collapse */
+
+
+      React.useEffect(function () {
+        // Automatic resizing is performed only when 'maxItem' is NOT set
+        if (maxItems !== undefined || !(lastItemRef === null || lastItemRef === void 0 ? void 0 : lastItemRef.current) || !breadcrumbsRightCoord) return; // Get width of breadcrumb's last item
+
+        var lastItemWidth = getWidthFromRef(lastItemRef); // Get width of breadcrumb's first item after collapse
+        // Sometimes first item can also be last item
+
+        var firstItemWidth = getWidthFromRef(firstItemRef) || lastItemWidth; // Get left coordinate of the last item
+
+        var lastItemLeftCoord = lastItemRef.current.getBoundingClientRect().left;
+        var lastRemovedItemWidth = breadcrumbsSettings.lastRemovedItemWidth,
+            maxVisibleItems = breadcrumbsSettings.maxVisibleItems;
+        var availableSpace = breadcrumbsRightCoord - lastItemLeftCoord;
+        var hasHiddenItems = maxVisibleItems < items.length;
+        var isLastRemovedItemSuitable = lastRemovedItemWidth !== undefined ? availableSpace - lastRemovedItemWidth > MIN_AVAILABLE_SPACE : false;
+
+        if (availableSpace < MIN_AVAILABLE_SPACE && maxVisibleItems > 2) {
+          setBreadcrumbsSettings(function (prevValue) {
+            return {
+              maxVisibleItems: prevValue.maxVisibleItems - 1,
+              lastRemovedItemWidth: firstItemWidth + ITEMS_SEPARATOR_SPACE
+            };
+          });
+        } else if (hasHiddenItems && (lastRemovedItemWidth === undefined || isLastRemovedItemSuitable)) {
+          setBreadcrumbsSettings(function (prevValue) {
+            return {
+              maxVisibleItems: prevValue.maxVisibleItems + 1,
+              lastRemovedItemWidth: undefined
+            };
+          });
+        }
+      }, [maxItems, breadcrumbsRightCoord, lastItemRef === null || lastItemRef === void 0 ? void 0 : lastItemRef.current, firstItemRef === null || firstItemRef === void 0 ? void 0 : firstItemRef.current, breadcrumbsSettings]);
+      return [breadcrumbsSettings];
+    };
+
+    var MIN_AVAILABLE_SPACE = 60;
+    var ITEMS_SEPARATOR_SPACE = 20;
+    var useBreadcrumbsObserver = function useBreadcrumbsObserver(items, maxItems) {
+      var breadcrumbRef = React.useRef();
+      var firstItemRef = React.useRef();
+      var lastItemRef = React.useRef();
+
+      var _a = React.useState(null),
+          breadcrumbsRightCoord = _a[0],
+          setBreadcrumbsRightCoord = _a[1];
+
+      var breadcrumbsSettings = useBreadcrumbsResizer(breadcrumbsRightCoord, {
+        items: items,
+        maxItems: maxItems
+      }, {
+        firstItemRef: firstItemRef,
+        lastItemRef: lastItemRef
+      })[0];
+      /* Observe breadcrumbs width change and store it in state */
+
+      React.useEffect(function () {
+        // Automatic resizing is performed only when 'maxItem' is NOT set
+        if (maxItems !== undefined) return;
+        var breadcrumbsObserver = new ResizeObserver(function (entries) {
+          setBreadcrumbsRightCoord(entries[0].target.getBoundingClientRect().right);
+        });
+        breadcrumbsObserver.observe(breadcrumbRef.current);
+        return function () {
+          breadcrumbRef.current && breadcrumbsObserver.unobserve(breadcrumbRef.current);
+        };
+      }, [maxItems, breadcrumbRef, setBreadcrumbsRightCoord]);
+      return [{
+        breadcrumbRef: breadcrumbRef,
+        firstItemRef: firstItemRef,
+        lastItemRef: lastItemRef
+      }, breadcrumbsSettings.maxVisibleItems];
+    };
+
     var DotBreadcrumbs = function DotBreadcrumbs(_a) {
       var className = _a.className,
           dataTestId = _a["data-testid"],
           _b = _a.expansionMenu,
           expansionMenu = _b === void 0 ? false : _b,
           items = _a.items,
-          _c = _a.maxItems,
-          maxItems = _c === void 0 ? 3 : _c,
+          maxItems = _a.maxItems,
           minWidth = _a.minWidth;
-      var rootClasses = useStylesWithRootClass(rootClassName$q, className);
-      var breadcrumbRef = React.useRef();
+      var wrapperRootClasses = useStylesWithRootClass(breadcrumbsWrapperClass, className);
       var wrapperRef = React.useRef();
 
-      var _d = React.useState(null),
-          anchorEl = _d[0],
-          setAnchorEl = _d[1];
+      var _c = React.useState(null),
+          anchorEl = _c[0],
+          setAnchorEl = _c[1];
 
-      var _e = React.useState(false),
-          menuOpen = _e[0],
-          setMenuOpen = _e[1];
+      var _d = React.useState(false),
+          menuOpen = _d[0],
+          setMenuOpen = _d[1];
 
-      var _f = React.useState(false),
-          adjustMaxItems = _f[0],
-          setAdjustMaxItems = _f[1];
+      var _e = React.useState(false),
+          adjustMaxItems = _e[0],
+          setAdjustMaxItems = _e[1];
+
+      var _f = useBreadcrumbsObserver(items, maxItems),
+          _g = _f[0],
+          breadcrumbRef = _g.breadcrumbRef,
+          firstItemRef = _g.firstItemRef,
+          lastItemRef = _g.lastItemRef,
+          maxVisibleItems = _f[1];
+
+      var itemsAfterCollapse = getItemsAfterCollapse(adjustMaxItems, maxVisibleItems, maxItems);
+      var menuItems = items.length > maxVisibleItems ? getMenuItems(items, itemsAfterCollapse) : [];
+      var breadcrumbItemRefs = {
+        firstItemRef: firstItemRef,
+        lastItemRef: lastItemRef
+      };
 
       var clickListener = function clickListener(event) {
+        if (event instanceof KeyboardEvent && event.key !== 'Enter') return;
         event.stopPropagation();
         setMenuOpen(function (currentMenuOpen) {
           return !currentMenuOpen;
         });
       };
 
-      var getExpandElement = function getExpandElement() {
-        var elements = document.getElementsByClassName('MuiBreadcrumbs-ol');
-        return elements.length === 1 ? elements[0].getElementsByClassName('MuiButtonBase-root')[0] : null;
-      };
-
-      var getMenuItems = function getMenuItems() {
-        return items.slice(1, items.length - 2).map(function (item, index) {
-          var itemChildren = /*#__PURE__*/React__default["default"].createElement(DotLink, {
-            ariaLabel: item.ariaLabel,
-            className: "breadcrumb",
-            color: "inherit",
-            href: item.href,
-            key: index,
-            onClick: item.onClick,
-            tabIndex: 0,
-            underline: item.underline
-          }, item.text);
-          return {
-            children: itemChildren,
-            key: index.toString()
-          };
-        });
-      };
-
-      var menuItems = items.length > maxItems ? getMenuItems() : null;
-
       var onMenuLeave = function onMenuLeave(_event) {
         setMenuOpen(false);
       };
+      /* Build and connect expansion menu if 'expansionMenu' is set to true.
+        In order for this to be functioning properly we need to set 'items' in
+        the dependencies list as it will re-trigger hook if items array change.
+       */
+
 
       React.useEffect(function () {
-        if (expansionMenu) {
-          var expandElement_1 = getExpandElement();
-
-          if (expandElement_1) {
-            setAnchorEl(expandElement_1);
-            expandElement_1.addEventListener('click', clickListener);
-            return function () {
-              expandElement_1.removeEventListener('click', clickListener);
-            };
-          }
+        if (!expansionMenu || !breadcrumbRef || !breadcrumbRef.current) return;
+        var expandElement = getExpandElement(breadcrumbRef.current);
+
+        if (expandElement) {
+          setAnchorEl(expandElement);
+          addListenersToMenu(expandElement, clickListener);
+          return function () {
+            return removeListenersFromMenu(expandElement, clickListener);
+          };
         }
-      }, []);
+      }, [expansionMenu, maxVisibleItems, adjustMaxItems, items]);
       React.useEffect(function () {
-        if ((breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current) && (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+        if (maxItems && (breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current) && (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
           setAdjustMaxItems(compareWidth(wrapperRef.current, breadcrumbRef.current));
         }
-      }, [breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current, wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]);
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        ref: wrapperRef,
-        style: {
-          overflow: 'hidden'
-        }
+      }, [maxItems, breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current, wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]);
+      return /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbsWrapper, {
+        className: wrapperRootClasses,
+        "data-testid": dataTestId && dataTestId + "-wrapper",
+        ref: wrapperRef
       }, /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbs, {
         "aria-label": "breadcrumb",
         classes: {
-          root: rootClasses,
+          root: rootClassName$q,
           ol: 'dot-ol',
           li: 'dot-li'
         },
         "data-testid": dataTestId,
-        itemsAfterCollapse: adjustMaxItems ? 1 : 2,
-        maxItems: adjustMaxItems ? 2 : maxItems,
+        itemsAfterCollapse: itemsAfterCollapse,
+        maxItems: getMaxItems(adjustMaxItems, maxVisibleItems, maxItems),
         ref: breadcrumbRef,
         separator: /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-          iconId: "chevron-right",
-          className: "separator"
+          className: "separator",
+          iconId: "chevron-right"
         }),
         style: {
           width: minWidth
         }
-      }, items.map(function (item, index) {
-        var ariaLabel = item.ariaLabel,
-            href = item.href,
-            onClick = item.onClick,
-            text = item.text,
-            underline = item.underline;
-
-        if (index === items.length - 1) {
-          return /*#__PURE__*/React__default["default"].createElement("span", {
-            "aria-label": ariaLabel,
-            className: "breadcrumb current-page",
-            key: index
-          }, text);
-        } else {
-          return /*#__PURE__*/React__default["default"].createElement(DotLink, {
-            ariaLabel: ariaLabel,
-            className: "breadcrumb",
-            color: "inherit",
-            href: href,
-            key: index,
-            onClick: onClick,
-            tabIndex: 0,
-            underline: underline
-          }, text);
-        }
-      })), /*#__PURE__*/React__default["default"].createElement(DotMenu, {
+      }, mapBreadcrumbItems(items, breadcrumbItemRefs, itemsAfterCollapse)), /*#__PURE__*/React__default["default"].createElement(DotMenu, {
         anchorEl: anchorEl,
+        className: "dot-breadcrumbs-menu",
+        disablePortal: true,
         id: "expand-menu",
         menuItems: menuItems,
         menuPlacement: "bottom-start",
@@ -3036,9 +3221,9 @@
       }, buttonOptions.map(function (option, key) {
         return /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, {
           "aria-label": option.ariaLabel,
-          disabled: option.disabled,
           disableFocusRipple: disableFocusRipple,
           disableRipple: disableRipple,
+          disabled: option.disabled,
           key: key,
           value: option.value
         }, option.iconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
@@ -3173,16 +3358,15 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledFormControlLabel, {
         className: rootClasses,
-        labelPlacement: labelPlacement,
         control: /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, {
+          checked: checked,
           classes: {
             root: rootClassName$m
           },
-          checked: checked,
           color: "primary",
           "data-testid": dataTestId,
-          disabled: disabled,
           disableRipple: disableRipple,
+          disabled: disabled,
           id: id,
           indeterminate: indeterminate,
           inputProps: {
@@ -3196,7 +3380,8 @@
           size: size,
           value: value
         }),
-        label: label
+        label: label,
+        labelPlacement: labelPlacement
       });
     }
 
@@ -3235,10 +3420,10 @@
       var rootClasses = useStylesWithRootClass(rootClassName$l, className);
       return /*#__PURE__*/React__default["default"].createElement(StyledFormGroup, {
         "aria-label": ariaLabel,
-        "data-testid": dataTestId,
         classes: {
           root: rootClasses
         },
+        "data-testid": dataTestId,
         role: "group",
         row: row
       }, children);
@@ -3316,15 +3501,15 @@
             disabled = _a.disabled,
             value = _a.value;
         return /*#__PURE__*/React__default["default"].createElement(DotCheckbox, {
-          className: checkboxListItemClassName,
           checked: selectedOptions.some(function (option) {
             return option && option.value === value;
           }) || allChecked,
+          className: checkboxListItemClassName,
           disabled: disabled || disableGroup,
-          name: name,
           key: value,
           label: label,
           labelPlacement: labelPlacement,
+          name: name,
           onChange: function onChange(event) {
             return handleChange(event, {
               label: label,
@@ -3337,15 +3522,15 @@
       }) : null;
       return /*#__PURE__*/React__default["default"].createElement(StyledCheckboxGroup, {
         "aria-label": ariaLabel,
-        "data-testid": dataTestId,
-        className: wrapperClassName$1
+        className: wrapperClassName$1,
+        "data-testid": dataTestId
       }, /*#__PURE__*/React__default["default"].createElement(StyledFormControl, {
         classes: {
           root: rootClasses
         },
+        component: "fieldset",
         disabled: disableGroup,
         error: error,
-        component: "fieldset",
         required: required
       }, groupLabel && /*#__PURE__*/React__default["default"].createElement(core.FormLabel, {
         component: "legend"
@@ -3358,8 +3543,8 @@
       }, endIcon)), showSelectAll && /*#__PURE__*/React__default["default"].createElement(DotCheckbox, {
         checked: selectedOptions.length === options.length,
         indeterminate: selectedOptions.length > 0 && selectedOptions.length < options.length,
-        name: name ? name + "-select-all" : 'dot-select-all',
         label: selectAllLabel,
+        name: name ? name + "-select-all" : 'dot-select-all',
         onChange: handleSelectAll,
         size: size,
         value: "select-all"
@@ -3431,13 +3616,13 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
         "aria-label": ariaLabel,
+        "aria-labelledby": "MuiDialogTitle-root",
         classes: {
           root: rootClasses
         },
         "data-testid": dataTestId,
-        open: isOpen,
         onClose: handleClickAway,
-        "aria-labelledby": "MuiDialogTitle-root"
+        open: isOpen
       }, /*#__PURE__*/React__default["default"].createElement(core.DialogTitle, {
         disableTypography: true
       }, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
@@ -3458,22 +3643,22 @@
         autoFocus: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.autoFocus,
         className: cancelClasses,
         "data-testid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-testid'],
-        disabled: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disabled,
         disableRipple: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disableRipple,
+        disabled: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disabled,
         endIcon: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.endIcon,
-        startIcon: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.startIcon,
         onClick: handleCancel,
+        startIcon: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.startIcon,
         titleTooltip: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.tooltip,
         type: "text"
       }, (cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.label) || 'Cancel'), hasPrimaryAction && /*#__PURE__*/React__default["default"].createElement(DotButton, {
         autoFocus: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.autoFocus,
         className: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.className,
         "data-testid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-testid'],
-        disabled: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled,
         disableRipple: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disableRipple,
+        disabled: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled,
         endIcon: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.endIcon,
-        startIcon: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.startIcon,
         onClick: handleSubmit,
+        startIcon: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.startIcon,
         titleTooltip: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.tooltip,
         type: (submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.type) || 'primary'
       }, (submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.label) || 'OK')));
@@ -3681,13 +3866,13 @@
       }))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "message"
       }, "NOT FOR PRODUCTION")), /*#__PURE__*/React__default["default"].createElement(StyledGridOverlay, {
-        rows: "minmax(100vh, 100%)",
-        className: gridClassName
+        className: gridClassName,
+        rows: "minmax(100vh, 100%)"
       }, __spreadArray([], Array(columns)).map(function (item, i) {
         return /*#__PURE__*/React__default["default"].createElement(CssCell, {
-          start: i + 1,
           className: "" + cellClassName,
           key: i,
+          start: i + 1,
           width: 1
         });
       })));
@@ -3716,10 +3901,10 @@
         className: rootClasses,
         "data-testid": dataTestId
       }, imageSrc && /*#__PURE__*/React__default["default"].createElement("img", {
-        className: "empty-state-image",
-        title: imageAltText || title,
         alt: imageAltText || title,
-        src: imageSrc
+        className: "empty-state-image",
+        src: imageSrc,
+        title: imageAltText || title
       }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
         variant: "h2"
       }, title), subtitle && /*#__PURE__*/React__default["default"].createElement(DotTypography, {
@@ -4077,7 +4262,16 @@
 
       var defaultInputValue = hasDebounce ? undefined : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(StyledTextField, {
-        id: id,
+        InputProps: {
+          startAdornment: startIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
+            className: adornmentIconClassName + " start",
+            position: "start"
+          }, startIcon),
+          endAdornment: endAdornmentIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
+            className: adornmentIconClassName + " end",
+            position: "end"
+          }, endAdornmentIcon)
+        },
         "aria-label": name,
         autoComplete: "off",
         autoFocus: autoFocus,
@@ -4089,21 +4283,12 @@
         error: error,
         fullWidth: fullWidth,
         helperText: helperText,
+        id: id,
         inputProps: {
           'data-testid': dataTestId,
           className: 'dot-input',
           readOnly: readOnly
         },
-        InputProps: {
-          startAdornment: startIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
-            className: adornmentIconClassName + " start",
-            position: "start"
-          }, startIcon),
-          endAdornment: endAdornmentIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
-            className: adornmentIconClassName + " end",
-            position: "end"
-          }, endAdornmentIcon)
-        },
         inputRef: inputRef,
         label: label,
         multiline: multiline,
@@ -4118,8 +4303,8 @@
         rowsMax: multiline ? rowsMax : null,
         size: size,
         type: type,
-        variant: "outlined",
-        value: inputTextValue
+        value: inputTextValue,
+        variant: "outlined"
       });
     };
 
@@ -4157,11 +4342,23 @@
       var rootStyles = useStylesWithRootClass(rootSelectClassName, className);
       var hasWarning = !error && warning && warningClassName;
       return /*#__PURE__*/React__default["default"].createElement(StyledTextField, {
+        InputProps: {
+          startAdornment: startIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
+            className: adornmentIconClassName + " start",
+            position: "start"
+          }, startIcon),
+          endAdornment: endIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
+            className: adornmentIconClassName + " end",
+            position: "end"
+          }, endIcon)
+        },
+        SelectProps: {
+          "native": true
+        },
         autoFocus: autoFocus,
         className: rootStyles + " " + hasWarning,
         defaultValue: defaultValue,
         disabled: disabled,
-        value: value,
         error: error,
         fullWidth: fullWidth,
         helperText: helperText,
@@ -4171,16 +4368,6 @@
           'data-testid': dataTestId,
           className: 'dot-select'
         },
-        InputProps: {
-          startAdornment: startIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
-            className: adornmentIconClassName + " start",
-            position: "start"
-          }, startIcon),
-          endAdornment: endIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
-            className: adornmentIconClassName + " end",
-            position: "end"
-          }, endIcon)
-        },
         inputRef: inputRef,
         label: label,
         multiline: false,
@@ -4191,10 +4378,8 @@
         onKeyDown: onKeyDown,
         required: required,
         select: true,
-        SelectProps: {
-          "native": true
-        },
         size: size,
+        value: value,
         variant: "outlined"
       }, options.map(function (option) {
         return /*#__PURE__*/React__default["default"].createElement("option", {
@@ -4291,14 +4476,12 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledFormControlLabel, {
         className: rootClasses,
-        labelPlacement: labelPlacement,
-        value: value,
         control: /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, {
           "aria-label": ariaLabel,
+          checked: checked,
           classes: {
             root: rootClassName$c
           },
-          checked: checked,
           color: "primary",
           "data-testid": dataTestId,
           disabled: disabled,
@@ -4309,7 +4492,9 @@
           required: required,
           size: size
         }),
-        label: label
+        label: label,
+        labelPlacement: labelPlacement,
+        value: value
       });
     }
 
@@ -4358,9 +4543,9 @@
             value = _a.value,
             disabled = _a.disabled;
         return /*#__PURE__*/React__default["default"].createElement(DotRadioButton, {
-          key: value,
           checked: selectedValue === value,
           disabled: disabled || disableGroup,
+          key: value,
           label: label,
           labelPlacement: labelPlacement,
           size: size,
@@ -4373,8 +4558,8 @@
         classes: {
           root: rootClasses
         },
-        error: error,
         component: "fieldset",
+        error: error,
         required: required
       }, groupLabel && /*#__PURE__*/React__default["default"].createElement(core.FormLabel, {
         component: "legend"
@@ -4428,24 +4613,24 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledFormControlLabel, {
         className: rootClassName$n,
-        labelPlacement: labelPlacement,
         control: /*#__PURE__*/React__default["default"].createElement(StyledSwitch, {
+          checked: checked,
           classes: {
             root: rootClasses
           },
-          checked: checked,
           color: color,
           "data-testid": dataTestId,
           disabled: disabled,
           id: id,
-          inputRef: inputRef,
           inputProps: {
             'aria-label': ariaLabel ? ariaLabel : label
           },
+          inputRef: inputRef,
           onChange: handleChange,
           size: size
         }),
-        label: label
+        label: label,
+        labelPlacement: labelPlacement
       });
     };
 
@@ -5207,6 +5392,13 @@
           return onKeyPress(event);
         }
       }, /*#__PURE__*/React__default["default"].createElement(core.TextField, {
+        InputProps: {
+          endAdornment: /*#__PURE__*/React__default["default"].createElement(core.InputAdornment, {
+            position: "end"
+          }, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+            iconId: "edit"
+          }))
+        },
         "aria-label": name,
         autoComplete: "off",
         autoFocus: autoFocus,
@@ -5219,13 +5411,6 @@
           className: 'dot-input',
           readOnly: readOnly
         },
-        InputProps: {
-          endAdornment: /*#__PURE__*/React__default["default"].createElement(core.InputAdornment, {
-            position: "end"
-          }, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-            iconId: "edit"
-          }))
-        },
         multiline: false,
         name: name,
         onChange: function onChange(event) {
@@ -5384,8 +5569,8 @@
         },
         "data-testid": dataTestId,
         height: height,
-        width: width,
-        variant: skeletonVariant
+        variant: skeletonVariant,
+        width: width
       }, children);
     };
 
@@ -5482,14 +5667,14 @@
       return /*#__PURE__*/React__default["default"].createElement(StyledSnackbarContainer, {
         className: rootClassName$5
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        "data-testid": rootClassName$5,
-        className: rootClassName$5
+        className: rootClassName$5,
+        "data-testid": rootClassName$5
       }, alerts.slice().reverse().map(function (alert) {
         return /*#__PURE__*/React__default["default"].createElement(DotSnackbar, {
           key: alert.id,
-          severity: alert.severity,
           onClose: handleClose(alert.id),
-          open: alert.open
+          open: alert.open,
+          severity: alert.severity
         }, alert.message);
       })));
     };
@@ -5612,8 +5797,8 @@
         autoFocus: autoFocus,
         className: "label-button",
         "data-testid": dataTestId,
-        disabled: disabled,
         disableRipple: disableRipple,
+        disabled: disabled,
         isSubmit: isSubmit,
         onClick: function onClick(event) {
           return handleClick(event);
@@ -5624,8 +5809,8 @@
       }, children), /*#__PURE__*/React__default["default"].createElement(DotButton, {
         className: "expand-button",
         "data-testid": dataTestId,
-        disabled: disabled,
         disableRipple: disableRipple,
+        disabled: disabled,
         onClick: function onClick() {
           return setOpen(!open);
         },
@@ -5644,8 +5829,8 @@
         onLeave: function onLeave() {
           return setOpen(false);
         },
-        open: open,
-        onSelect: handleClick
+        onSelect: handleClick,
+        open: open
       }));
     };
 
@@ -5713,8 +5898,8 @@
       var getTableCellValue = function getTableCellValue() {
         if (Array.isArray(value)) {
           return /*#__PURE__*/React__default["default"].createElement("div", {
-            ref: wrapperRef,
-            className: "action-cell-wrapper"
+            className: "action-cell-wrapper",
+            ref: wrapperRef
           }, showMenu ? /*#__PURE__*/React__default["default"].createElement(DotIconButton, {
             className: "dot-table-action-icon",
             iconId: "options",
@@ -5742,8 +5927,8 @@
       };
 
       return /*#__PURE__*/React__default["default"].createElement(core.TableCell, {
-        "aria-label": ariaLabel,
         align: align,
+        "aria-label": ariaLabel,
         classes: {
           root: rootClasses
         },
@@ -5855,8 +6040,8 @@
         }
       }, data.map(function (row, index) {
         return /*#__PURE__*/React__default["default"].createElement(DotTableRow, {
-          columns: columns,
           className: row.className,
+          columns: columns,
           data: row,
           key: index,
           onActionMenuTrigger: handleActionMenuTrigger,
@@ -5908,9 +6093,9 @@
           key: CreateUUID(),
           order: order,
           orderBy: orderBy,
-          truncate: cell.truncate,
-          sortable: sortable && cell.sortable,
           sortDirection: orderBy === cell.id ? order : undefined,
+          sortable: sortable && cell.sortable,
+          truncate: cell.truncate,
           uid: CreateUUID(),
           value: cell.label,
           width: cell.width
@@ -5959,10 +6144,10 @@
       return /*#__PURE__*/React__default["default"].createElement(core.TableCell, {
         align: align,
         key: uid,
-        title: headerTitle,
         style: {
           width: width ? width : ''
-        }
+        },
+        title: headerTitle
       }, value);
     };
 
@@ -6255,8 +6440,8 @@
         var tabElement = /*#__PURE__*/React__default["default"].createElement(core.Tab, {
           "aria-label": tab.ariaLabel,
           "data-testid": tab['data-testid'],
-          disabled: tab.disabled,
           disableRipple: true,
+          disabled: tab.disabled,
           key: index,
           label: label,
           value: tab.value