@digital-ai/dot-components 2.5.1 → 2.5.3

package/index.umd.js

@@ -1587,7 +1587,7 @@
       enabled: true,
       created_date: '2022-11-30T23:28:01.662721+00:00',
       modified_date: '2022-11-30T23:28:01.662721+00:00',
-      name: 'Agility',
+      name: 'Agility 1',
       url: 'https://digital.ai/products/agility/',
       description: '',
       alternate_label: nullStr,
@@ -1602,7 +1602,7 @@
       enabled: true,
       created_date: '2022-11-30T23:32:00.979159+00:00',
       modified_date: '2022-11-30T23:32:00.979159+00:00',
-      name: 'Contininuous Testing',
+      name: 'Continuous Testing 1',
       url: 'https://digital.ai/products/continuous-testing/',
       description: '',
       alternate_label: nullStr,
@@ -1617,7 +1617,7 @@
       enabled: true,
       created_date: '2022-12-30T23:32:00.979159+00:00',
       modified_date: '2022-12-30T23:32:00.979159+00:00',
-      name: 'Contininuous Testing 2',
+      name: 'Continuous Testing 2',
       url: 'https://digital.ai/products/continuous-testing/',
       description: '',
       alternate_label: nullStr,
@@ -1996,750 +1996,647 @@
       }), void 0);
     });
 
-    var rootClassName$X = 'dot-icon-btn';
-    var StyledIconButton = styled__default["default"](material.IconButton).withConfig({
-      displayName: "IconButtonstyles__StyledIconButton",
-      componentId: "eko0kb-0"
+    var rootClassName$X = 'dot-link';
+    var StyledLink = styled__default["default"](material.Link).withConfig({
+      displayName: "Linkstyles__StyledLink",
+      componentId: "sc-1lpmaww-0"
     })(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "])), rootClassName$X, hoverGray);
+      return styled.css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "], ["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "])), rootClassName$X);
     });
     var templateObject_1$10, templateObject_2$Y;
 
-    var DotIconButton = function DotIconButton(_a) {
+    var DotLink = function DotLink(_a) {
       var ariaLabel = _a.ariaLabel,
+        children = _a.children,
         className = _a.className,
         _b = _a.color,
-        color = _b === void 0 ? 'inherit' : _b,
+        color = _b === void 0 ? 'primary' : _b,
         dataTestId = _a["data-testid"],
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
-        _d = _a.disableRipple,
-        disableRipple = _d === void 0 ? false : _d,
-        iconId = _a.iconId,
-        _e = _a.iconSize,
-        iconSize = _e === void 0 ? 'small' : _e,
+        href = _a.href,
         onClick = _a.onClick,
+        onMouseEnter = _a.onMouseEnter,
+        onPointerDown = _a.onPointerDown,
+        _c = _a.rel,
+        rel = _c === void 0 ? 'noreferrer' : _c,
+        _d = _a.tabIndex,
+        tabIndex = _d === void 0 ? 0 : _d,
+        target = _a.target,
         tooltip = _a.tooltip,
-        _f = _a.size,
-        size = _f === void 0 ? 'medium' : _f;
-      var rippleClassName = disableRipple ? 'ripple-disabled' : '';
-      var rootClasses = useStylesWithRootClass(rootClassName$X, rippleClassName, className);
+        underline = _a.underline;
+      var rootClasses = useStylesWithRootClass(rootClassName$X, className);
+      var handleKeyPress = function handleKeyPress(event) {
+        if (onClick && event.key === 'Enter') {
+          event.preventDefault();
+          onClick(event);
+        }
+      };
       return jsxRuntime.jsx(DotTooltip, __assign({
-        "data-testid": "icon-button-tooltip",
         title: tooltip
       }, {
-        children: jsxRuntime.jsx(StyledIconButton, __assign({
+        children: jsxRuntime.jsx(StyledLink, __assign({
           "aria-label": ariaLabel,
           classes: {
             root: rootClasses
           },
           color: color,
           "data-testid": dataTestId,
-          disableRipple: disableRipple,
-          disabled: disabled,
-          onClick: function (event) {
-            return onClick && onClick(event);
-          },
-          size: size
+          href: href,
+          onClick: onClick,
+          onKeyPress: handleKeyPress,
+          onMouseEnter: onMouseEnter,
+          onPointerDown: onPointerDown,
+          rel: rel,
+          tabIndex: tabIndex,
+          target: target,
+          underline: underline
         }, {
-          children: jsxRuntime.jsx(DotIcon, {
-            "data-testid": "button-icon",
-            fontSize: iconSize,
-            iconId: iconId
-          }, void 0)
+          children: children
         }), void 0)
       }), void 0);
     };
 
-    var DotInputLabel = function DotInputLabel(_a) {
-      var dataTestId = _a["data-testid"],
-        _b = _a.disabled,
-        disabled = _b === void 0 ? false : _b,
-        _c = _a.error,
-        error = _c === void 0 ? false : _c,
-        id = _a.id,
-        label = _a.label,
-        required = _a.required;
-      return jsxRuntime.jsx(StyledInputLabel, __assign({
-        "data-testid": dataTestId,
-        classes: {
-          root: labelClassName
-        },
-        disabled: disabled,
-        error: error,
-        htmlFor: id,
-        required: required,
-        shrink: false,
-        variant: "outlined"
-      }, {
-        children: jsxRuntime.jsx(DotTypography, __assign({
-          variant: "subtitle2"
-        }, {
-          children: label
-        }), void 0)
-      }), void 0);
+    var rootClassName$W = 'dot-list';
+    var listItemRootClass = 'dot-list-item';
+    var nestedListClassName = 'dot-nested-list';
+    var nestedDrawerClassName = 'dot-nested-drawer';
+    var StyledList = styled__default["default"](material.List).withConfig({
+      displayName: "Liststyles__StyledList",
+      componentId: "wxwqwr-0"
+    })(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "], ["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "])), rootClassName$W, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1));
+    });
+    var templateObject_1$$, templateObject_2$X;
+
+    var getChevronIcon = function getChevronIcon(nestedListType, isOpened) {
+      if (nestedListType !== 'expandable') {
+        return 'chevron-right';
+      }
+      if (isOpened) {
+        return 'chevron-up';
+      }
+      return 'chevron-down';
     };
 
-    var DELAY_MS = 300;
-    var EndAdornment = function EndAdornment(_a) {
-      var endAdornmentTooltip = _a.endAdornmentTooltip,
-        error = _a.error,
-        dataTestId = _a.dataTestId,
-        endIcon = _a.endIcon,
-        success = _a.success,
-        warning = _a.warning;
-      var renderIcon = function renderIcon(iconType) {
-        return jsxRuntime.jsx(DotIcon, {
-          "data-testid": dataTestId && dataTestId + "-" + iconType + "-icon",
-          iconId: iconType + "-solid"
-        }, void 0);
-      };
-      var errorIcon = error && renderIcon('error');
-      var successIcon = success && renderIcon('check');
-      var warningIcon = warning && renderIcon('warning');
-      var endAdornmentIcon = endIcon || errorIcon || warningIcon || successIcon;
-      var styledAdornment = jsxRuntime.jsx(StyledAdornment, __assign({
-        className: adornmentIconClassName + " end",
-        position: "end"
+    var flyoutListItemClassName = 'dot-flyout-list-item';
+    var flyoutItemLinkClassName = 'dot-flyout-item-link';
+    var listItemLinkClassName = 'dot-list-item-link';
+    var StyledListItem = styled__default["default"](material.ListItem).withConfig({
+      displayName: "ListItemstyles__StyledListItem",
+      componentId: "sc-1fawh8v-0"
+    })(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$_ || (templateObject_1$_ = __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: ", ";\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: ", ";\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$_, templateObject_2$W;
+
+    var rootClassName$V = 'dot-progress';
+    var StyledCircularProgress = styled__default["default"](material.CircularProgress).withConfig({
+      displayName: "Progressstyles__StyledCircularProgress",
+      componentId: "sc-1gs77rb-0"
+    })(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"], ["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"])), rootClassName$V);
+    var templateObject_1$Z;
+
+    var DotProgress = function DotProgress(_a) {
+      var ariaLabel = _a.ariaLabel,
+        _b = _a.color,
+        color = _b === void 0 ? 'secondary' : _b,
+        className = _a.className,
+        dataTestId = _a["data-testid"],
+        _c = _a.size,
+        size = _c === void 0 ? 40 : _c,
+        _d = _a.thickness,
+        thickness = _d === void 0 ? 3.6 : _d,
+        _e = _a.tooltip,
+        tooltip = _e === void 0 ? 'loading data' : _e,
+        value = _a.value,
+        _f = _a.variant,
+        variant = _f === void 0 ? 'indeterminate' : _f;
+      var rootClasses = useStylesWithRootClass(rootClassName$V, className);
+      return jsxRuntime.jsx(DotTooltip, __assign({
+        title: tooltip
       }, {
-        children: endAdornmentIcon
+        children: jsxRuntime.jsx(StyledCircularProgress, {
+          "aria-label": ariaLabel,
+          classes: {
+            root: rootClasses
+          },
+          color: color,
+          "data-testid": dataTestId,
+          size: size,
+          thickness: thickness,
+          value: value,
+          variant: variant
+        }, void 0)
       }), void 0);
-      return endAdornmentTooltip ? jsxRuntime.jsx(DotTooltip, __assign({
-        title: endAdornmentTooltip
-      }, {
-        children: styledAdornment
-      }), void 0) : styledAdornment;
     };
-    var getInitialState = function getInitialState(value) {
-      return {
-        inputValue: value || ''
-      };
+
+    var levelBottom = -1;
+    var levelFirst = 1;
+    var levelSecond = 10;
+    var levelThird = 100;
+    var levelFourth = 1000;
+    var levelTop = 9999;
+
+    var variables = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        levelBottom: levelBottom,
+        levelFirst: levelFirst,
+        levelSecond: levelSecond,
+        levelThird: levelThird,
+        levelFourth: levelFourth,
+        levelTop: levelTop
+    });
+
+    var rootClassName$U = 'dot-popper';
+    var StyledPopper$1 = styled__default["default"](material.Popper).withConfig({
+      displayName: "Popperstyles__StyledPopper",
+      componentId: "sd1h8p-0"
+    })(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "])), rootClassName$U, theme.typography.fontFamily, theme.typography.body1.fontSize);
+    });
+    var templateObject_1$Y, templateObject_2$V;
+
+    var flyoutMenuClassName = 'dot-flyout-menu';
+    var rootClassName$T = 'dot-menu';
+    var getListMaxHeight = function getListMaxHeight(maxHeight) {
+      return isString$1(maxHeight) ? maxHeight : maxHeight + "px";
     };
-    var DotInputText = function DotInputText(_a) {
-      var _b = _a.autoComplete,
-        autoComplete = _b === void 0 ? 'off' : _b,
-        autoFocus = _a.autoFocus,
-        className = _a.className,
-        defaultValue = _a.defaultValue,
-        dataTestId = _a["data-testid"],
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
-        _d = _a.error,
-        error = _d === void 0 ? false : _d,
-        endAdornmentTooltip = _a.endAdornmentTooltip,
-        _e = _a.fullWidth,
-        fullWidth = _e === void 0 ? true : _e,
-        hasDebounce = _a.hasDebounce,
-        helperText = _a.helperText,
-        endIcon = _a.endIcon,
-        id = _a.id,
-        inputRef = _a.inputRef,
-        label = _a.label,
-        maxRows = _a.maxRows,
-        minRows = _a.minRows,
-        _f = _a.multiline,
-        multiline = _f === void 0 ? false : _f,
-        name = _a.name,
-        onBlur = _a.onBlur,
-        onChange = _a.onChange,
-        onFocus = _a.onFocus,
-        onKeyDown = _a.onKeyDown,
-        onMouseUp = _a.onMouseUp,
-        persistentLabel = _a.persistentLabel,
-        placeholder = _a.placeholder,
-        _g = _a.readOnly,
-        readOnly = _g === void 0 ? false : _g,
-        _h = _a.required,
-        required = _h === void 0 ? false : _h,
-        shrink = _a.shrink,
-        startIcon = _a.startIcon,
-        _j = _a.size,
-        size = _j === void 0 ? 'small' : _j,
-        success = _a.success,
-        _k = _a.type,
-        type = _k === void 0 ? 'text' : _k,
-        value = _a.value,
-        _l = _a.warning,
-        warning = _l === void 0 ? false : _l;
-      var hasError = error && errorClassName;
-      var hasWarning = !error && warning && warningClassName;
-      var hasSuccess = !error && !warning && success && successClassName;
-      var hasEndAdornmentIcon = endIcon || error || hasWarning || hasSuccess;
-      // This state is used only with debounce feature enabled
-      var _m = React.useState(hasDebounce && getInitialState(value)),
-        inputTextState = _m[0],
-        setInputTextState = _m[1];
-      var rootStyles = useStylesWithRootClass(rootClassName$10, hasError, hasWarning, hasSuccess, readOnly ? 'read-only' : '');
-      // Used to control text value from the consumer component
-      // when debounce feature is enabled
-      React.useEffect(function () {
-        if (hasDebounce && value !== inputTextState.inputValue) {
-          setInputTextState(getInitialState(value));
-        }
-      }, [value]);
-      // Improve performance by avoiding callback execution
-      // on each keystroke (if debounce feature is active)
-      React.useEffect(function () {
-        // Do not proceed if debounce feature is turned
-        // off or there is no event defined
-        if (!hasDebounce || !inputTextState || !inputTextState.changeEvent || !onChange) return;
-        var handler = setTimeout(function () {
-          onChange(inputTextState.changeEvent);
-        }, DELAY_MS);
-        return function () {
-          return clearTimeout(handler);
-        };
-      }, [inputTextState]);
-      var handleChange = function handleChange(e) {
-        // We need to have control over change event and input value separately
-        // so that we can set initial state via 'value' prop (if needed)
-        hasDebounce ? setInputTextState({
-          changeEvent: e,
-          inputValue: e.target.value
-        }) : onChange === null || onChange === void 0 ? void 0 : onChange(e);
-      };
-      var inputTextValue = hasDebounce ? inputTextState.inputValue : value;
-      // Don't use default value when debounce feature is enabled because
-      // in that case component is controlled
-      var defaultInputValue = hasDebounce ? undefined : defaultValue;
-      var startAdornmentIcon = function startAdornmentIcon() {
-        if (!startIcon) return null;
-        return jsxRuntime.jsx(StyledAdornment, __assign({
-          className: adornmentIconClassName + " start",
-          position: "start"
-        }, {
-          children: startIcon
-        }), void 0);
-      };
-      var endAdornmentIcon = function endAdornmentIcon() {
-        if (!hasEndAdornmentIcon) return null;
-        return jsxRuntime.jsx(EndAdornment, __assign({}, {
-          endAdornmentTooltip: endAdornmentTooltip,
-          error: error,
-          dataTestId: dataTestId,
-          endIcon: endIcon,
-          success: success,
-          warning: warning
-        }), void 0);
-      };
-      var wrapperClassName = useStylesWithRootClass(fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
-      return jsxRuntime.jsxs(StyledTextFieldContainer, __assign({
-        className: wrapperClassName
-      }, {
-        children: [persistentLabel && jsxRuntime.jsx(DotInputLabel, __assign({}, {
-          disabled: disabled,
-          error: error,
-          id: id,
-          label: label,
-          required: required
-        }), void 0), jsxRuntime.jsx(StyledTextField, {
-          InputProps: {
-            startAdornment: startAdornmentIcon(),
-            endAdornment: endAdornmentIcon()
-          },
-          "aria-label": name,
-          autoComplete: autoComplete,
-          autoFocus: autoFocus,
-          classes: {
-            root: rootStyles
-          },
-          defaultValue: defaultInputValue,
-          disabled: disabled,
-          error: error,
-          focused: readOnly ? false : undefined,
-          fullWidth: fullWidth,
-          helperText: helperText,
-          id: id,
-          InputLabelProps: {
-            shrink: type === 'date' ? true : shrink
-          },
-          inputProps: {
-            'data-testid': dataTestId,
-            className: 'dot-input',
-            readOnly: readOnly
-          },
-          inputRef: inputRef,
-          label: persistentLabel ? null : label,
-          multiline: multiline,
-          name: name,
-          onBlur: onBlur,
-          onChange: hasDebounce ? handleChange : onChange,
-          onFocus: onFocus,
-          onKeyDown: onKeyDown,
-          onMouseUp: onMouseUp,
-          placeholder: placeholder,
-          required: required,
-          minRows: multiline ? minRows : null,
-          maxRows: multiline ? maxRows : null,
-          size: size,
-          type: type,
-          value: inputTextValue,
-          variant: "outlined"
-        }, void 0)]
-      }), void 0);
-    };
-
-    var rootClassName$W = 'dot-search-input';
-    var StyledSearchInput = styled__default["default"].span.withConfig({
-      displayName: "SearchInputstyles__StyledSearchInput",
-      componentId: "qlwzku-0"
-    })(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    &.", " {\n    }\n  "], ["\n    &.", " {\n    }\n  "])), rootClassName$W);
+    var StyledPopper = styled__default["default"](material.Popper).withConfig({
+      displayName: "Menustyles__StyledPopper",
+      componentId: "sc-134fmqu-0"
+    })(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "])), rootClassName$U, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$T, rootClassName$U, function (_a) {
+        var $maxHeight = _a.$maxHeight;
+        return $maxHeight !== undefined && "\n          max-height: " + getListMaxHeight($maxHeight) + ";\n        ";
+      }, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.layer.n100, theme.spacing(3));
     });
-    var templateObject_1$$, templateObject_2$X;
+    var templateObject_1$X, templateObject_2$U;
 
-    function SearchInput(_a) {
-      var dataTestId = _a["data-testid"],
-        _b = _a.autoFocus,
-        autoFocus = _b === void 0 ? true : _b,
-        className = _a.className,
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
-        onChange = _a.onChange,
-        onClear = _a.onClear,
-        _d = _a.placeholder,
-        placeholder = _d === void 0 ? 'Search' : _d,
-        _e = _a.tooltip,
-        tooltip = _e === void 0 ? null : _e,
-        value = _a.value;
-      var rootClasses = useStylesWithRootClass(rootClassName$W, className);
-      var _f = React.useState(value),
-        searchText = _f[0],
-        setSearchText = _f[1];
-      var previousSearchText = '';
-      var handleChange = React.useCallback(function (event) {
-        previousSearchText = event.target.value;
-        setSearchText(event.target.value);
-        // Timeout is to give user a chance to finish typing before refreshing data.
-        setTimeout(function () {
-          if (onChange && event.target.value === previousSearchText) {
-            onChange(event.target.value);
-          }
-        }, 500);
-      }, [onChange]);
-      var handleClear = React.useCallback(function () {
-        setSearchText('');
-        onClear && onClear();
-      }, [onClear]);
-      var searchIcon = jsxRuntime.jsx(DotIcon, {
-        className: "search-icon",
-        iconId: "search"
-      }, void 0);
-      var clearSearchIcon = jsxRuntime.jsx(DotIconButton, {
-        iconId: "close",
-        onClick: handleClear,
-        size: "small",
-        tooltip: "Clear search text"
-      }, void 0);
-      return jsxRuntime.jsx(StyledSearchInput, __assign({
-        className: rootClasses
-      }, {
-        children: jsxRuntime.jsx(DotTooltip, __assign({
-          placement: "bottom",
-          title: tooltip
-        }, {
-          children: jsxRuntime.jsx(DotInputText, {
-            "data-testid": dataTestId,
-            autoFocus: autoFocus,
-            className: "search-text",
-            disabled: disabled,
-            endIcon: (searchText === null || searchText === void 0 ? void 0 : searchText.length) > 0 ? clearSearchIcon : null,
-            id: "app-instance-search-text",
-            name: "app-instance-search-text",
-            onChange: handleChange,
-            placeholder: placeholder,
-            startIcon: searchIcon,
-            value: searchText
-          }, void 0)
-        }), void 0)
-      }), void 0);
-    }
+    var MENU_ITEM_HEIGHT_NORMAL = 48;
+    var MENU_ITEM_HEIGHT_DENSE = 36;
+    var DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-    var rootClassName$V = 'dot-copy-button';
-    var StyledCopyButton = styled__default["default"].span.withConfig({
-      displayName: "CopyButtonstyles__StyledCopyButton",
-      componentId: "sc-18ff0u-0"
-    })(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var rootClassName$S = 'dot-ul';
+    var listItemClassName$1 = 'dot-li';
+    var listItemWithSubmenuClassName = 'dot-li-with-submenu';
+    var StyledMenuList = styled__default["default"](material.MenuList).withConfig({
+      displayName: "MenuListstyles__StyledMenuList",
+      componentId: "yqdwwg-0"
+    })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n    &.", " {\n      .copied-to-clipboard {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .copied-to-clipboard {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$V, theme.palette.success[400]);
+      return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "])), rootClassName$S, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5));
     });
-    var templateObject_1$_, templateObject_2$W;
+    var templateObject_1$W, templateObject_2$T;
 
-    var DotCopyButton = function DotCopyButton(_a) {
-      var _b = _a.ariaLabel,
-        ariaLabel = _b === void 0 ? 'Copy to clipboard' : _b,
-        _c = _a.copiedTooltip,
-        copiedTooltip = _c === void 0 ? 'Copied!' : _c,
-        _d = _a.copyTooltip,
-        copyTooltip = _d === void 0 ? 'Copy to clipboard' : _d,
-        _e = _a["data-testid"],
-        dataTestId = _e === void 0 ? 'dot-copy-button' : _e,
-        value = _a.value;
-      var _f = React.useState(false),
-        showCopiedIcon = _f[0],
-        setShowCopiedIcon = _f[1];
-      var copyToClipboard = function copyToClipboard() {
-        // The check for navigator.clipboard.writeText is because this function is
-        // only supported in secure contexts (https). This will always be the case in
-        // production but not when running locally.
-        if (!navigator.clipboard || !navigator.clipboard.writeText) {
-          console.warn('Copy to clipboard is only supported in secure context (https)', value);
-        } else {
-          navigator.clipboard.writeText(value);
-        }
-      };
-      var copy = function copy() {
-        copyToClipboard();
-        setShowCopiedIcon(true);
-        setTimeout(function () {
-          setShowCopiedIcon(false);
-        }, 3000);
-        return false;
-      };
-      return jsxRuntime.jsxs(StyledCopyButton, __assign({
-        className: rootClassName$V,
-        "data-testid": dataTestId
-      }, {
-        children: [!showCopiedIcon && jsxRuntime.jsx(DotIconButton, {
-          ariaLabel: ariaLabel,
-          "data-testid": dataTestId + "-button",
-          iconId: "duplicate",
-          onClick: copy,
-          size: "small",
-          tooltip: copyTooltip
-        }, void 0), showCopiedIcon && jsxRuntime.jsx(DotIcon, {
-          className: "copied-to-clipboard",
-          "data-testid": dataTestId + "-icon",
-          fontSize: "small",
-          iconId: "check-solid",
-          tooltip: copiedTooltip
-        }, void 0)]
-      }), void 0);
+    var getDefaultItemHeight = function getDefaultItemHeight(isDense) {
+      return isDense ? MENU_ITEM_HEIGHT_DENSE : MENU_ITEM_HEIGHT_NORMAL;
     };
-
-    var rootClassName$U = 'dot-link';
-    var StyledLink = styled__default["default"](material.Link).withConfig({
-      displayName: "Linkstyles__StyledLink",
-      componentId: "sc-1lpmaww-0"
-    })(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "], ["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "])), rootClassName$U);
-    });
-    var templateObject_1$Z, templateObject_2$V;
-
-    var DotLink = function DotLink(_a) {
-      var ariaLabel = _a.ariaLabel,
-        children = _a.children,
-        className = _a.className,
-        _b = _a.color,
-        color = _b === void 0 ? 'primary' : _b,
-        dataTestId = _a["data-testid"],
-        href = _a.href,
-        onClick = _a.onClick,
-        onMouseEnter = _a.onMouseEnter,
-        _c = _a.rel,
-        rel = _c === void 0 ? 'noreferrer' : _c,
-        _d = _a.tabIndex,
-        tabIndex = _d === void 0 ? 0 : _d,
-        target = _a.target,
-        tooltip = _a.tooltip,
-        underline = _a.underline;
-      var rootClasses = useStylesWithRootClass(rootClassName$U, className);
-      var handleKeyPress = function handleKeyPress(event) {
-        if (onClick && event.key === 'Enter') {
-          event.preventDefault();
-          onClick(event);
-        }
-      };
-      return jsxRuntime.jsx(DotTooltip, __assign({
-        title: tooltip
-      }, {
-        children: jsxRuntime.jsx(StyledLink, __assign({
-          "aria-label": ariaLabel,
-          classes: {
-            root: rootClasses
-          },
-          color: color,
-          "data-testid": dataTestId,
-          href: href,
-          onClick: onClick,
-          onKeyPress: handleKeyPress,
-          onMouseEnter: onMouseEnter,
-          rel: rel,
-          tabIndex: tabIndex,
-          target: target,
-          underline: underline
-        }, {
-          children: children
-        }), void 0)
-      }), void 0);
-    };
-
-    var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M12.4332 16.3533V14.8333H11.5665V16.3533L10.7432 15.8933L9.85651 16.4033L11.9998 17.6366L14.1932 16.3733L13.3332 15.8766L12.4332 16.3533Z' fill='white'/%3e%3cpath d='M7.99328 10.1866L9.24661 10.9132L9.67995 10.1399L8.36995 9.4299L9.09328 9.01657V8.03323L7.11328 9.18323L7.11661 11.5532L7.99328 11.0566V10.1866Z' fill='white'/%3e%3cpath d='M14.6934 10.9133L15.9934 10.1733L15.99 11.0566L16.8867 11.5599V9.1766L14.81 7.98993L14.7767 8.9566L15.6167 9.45326L14.29 10.0799L14.6934 10.9133Z' fill='white'/%3e%3cpath d='M16.8801 12.5435L16.0001 12.0402V12.0935V13.7068L12.4167 11.6868V7.61015L13.9667 8.49015V7.51682L12.0001 6.35349L9.95006 7.52348V8.52348L11.4967 7.63015V11.6868L8.00006 13.8168V12.0202L7.12006 12.5235V14.8202L8.96672 15.8502L9.86672 15.3335L8.40006 14.5268L12.0001 12.4368L15.5567 14.5035L14.1301 15.3268L15.0567 15.8701L16.8701 14.8268L16.8801 12.5435Z' fill='white'/%3e%3c/svg%3e";
-
-    var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M14.1867 11.2667L12.1634 10.0833L10.1367 11.2667V13.62L12.1634 14.7867L14.1867 13.62V11.2667Z' fill='white'/%3e%3cpath d='M8.43666 12.0001L7.47333 11.1501V15.1667L10.41 16.8367V15.7034L8.43666 14.5401V12.0001Z' fill='white'/%3e%3cpath d='M15.8965 12V14.5833L13.9632 15.7033V16.9367L16.8532 15.1533V11.0967L15.8965 12Z' fill='white'/%3e%3cpath d='M12.1565 8.13333L14.7165 9.61333L15.4165 8.89L12.1565 7L8.87988 8.90667L9.57988 9.63333L12.1565 8.13333Z' fill='white'/%3e%3c/svg%3e";
-
-    var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%2333D389'/%3e%3cpath d='M17.0033 7.62322H16.4567C16.3925 7.62863 16.3324 7.65679 16.2871 7.70264C16.2419 7.74848 16.2146 7.80898 16.21 7.87322V9.14322C15.7432 8.43248 15.1064 7.84955 14.3572 7.44732C13.6081 7.04509 12.7703 6.8363 11.92 6.83989C11.0845 6.84475 10.2627 7.05243 9.52515 7.44508C8.78763 7.83772 8.15649 8.40359 7.68598 9.09405C7.21547 9.7845 6.91966 10.5789 6.82398 11.4089C6.72831 12.2389 6.83562 13.0798 7.13669 13.8592C7.43777 14.6386 7.92361 15.3332 8.55245 15.8834C9.18128 16.4335 9.93431 16.8227 10.7468 17.0176C11.5593 17.2124 12.4069 17.207 13.2169 17.0019C14.0269 16.7967 14.7749 16.398 15.3967 15.8399C15.4257 15.8182 15.4492 15.79 15.4654 15.7576C15.4816 15.7252 15.49 15.6894 15.49 15.6532C15.49 15.617 15.4816 15.5813 15.4654 15.5489C15.4492 15.5165 15.4257 15.4883 15.3967 15.4666L14.9833 15.0532C14.9369 15.0135 14.8778 14.9917 14.8167 14.9917C14.7556 14.9917 14.6965 15.0135 14.65 15.0532C13.9076 15.7352 12.9312 16.1052 11.9233 16.0866C11.1892 16.087 10.4684 15.8897 9.83687 15.5154C9.20531 15.141 8.68627 14.6034 8.33429 13.9591C7.98231 13.3148 7.81039 12.5876 7.83662 11.8539C7.86284 11.1202 8.08624 10.4071 8.48332 9.78959C8.8804 9.17207 9.4365 8.67292 10.0932 8.34461C10.7499 8.0163 11.4828 7.87095 12.2151 7.92384C12.9474 7.97674 13.6519 8.22592 14.2545 8.6452C14.8572 9.06448 15.3358 9.63837 15.64 10.3066H14.1467C14.0828 10.3112 14.0227 10.3387 13.9774 10.384C13.9321 10.4293 13.9046 10.4893 13.9 10.5532V11.0466C13.9046 11.1104 13.9321 11.1705 13.9774 11.2158C14.0227 11.2611 14.0828 11.2886 14.1467 11.2932H17C17.0639 11.2886 17.124 11.2611 17.1693 11.2158C17.2146 11.1705 17.242 11.1104 17.2467 11.0466V7.87322C17.2422 7.8095 17.2154 7.74942 17.1708 7.70364C17.1263 7.65787 17.0669 7.62938 17.0033 7.62322Z' fill='white'/%3e%3cpath d='M12.1232 9.39987C12.1667 9.39747 12.2077 9.37914 12.2384 9.34839C12.2692 9.31764 12.2875 9.27662 12.2899 9.2332C12.2899 9.2332 12.3399 8.8332 12.3399 8.69987C12.3399 8.56653 12.2499 8.4932 12.1666 8.48987C11.5045 8.45232 10.8457 8.60791 10.2703 8.93771C9.69497 9.26752 9.22779 9.75734 8.92557 10.3477C8.62335 10.938 8.4991 11.6034 8.56792 12.263C8.63675 12.9226 8.89568 13.548 9.31325 14.0632C9.83849 14.7239 10.5905 15.1658 11.4232 15.3032C11.5166 15.3032 11.5999 15.2632 11.6299 15.1365C11.6299 15.1365 11.6999 14.8032 11.7132 14.6832C11.7233 14.639 11.7157 14.5927 11.692 14.554C11.6684 14.5154 11.6305 14.4876 11.5866 14.4765C11.225 14.4227 10.8806 14.2869 10.5795 14.0795C10.2785 13.8721 10.029 13.5986 9.84992 13.2799C9.64046 12.9274 9.51393 12.5318 9.47992 12.1232C9.44986 11.7648 9.49697 11.4042 9.61806 11.0655C9.73915 10.7269 9.93142 10.4181 10.1819 10.1601C10.4324 9.90199 10.7353 9.70061 11.0702 9.56947C11.405 9.43834 11.7641 9.38051 12.1232 9.39987Z' fill='white'/%3e%3cpath d='M13.9433 13.1568C13.96 13.1389 13.9724 13.1175 13.9796 13.0942C13.9868 13.0708 13.9885 13.0461 13.9846 13.0219C13.9808 12.9978 13.9714 12.9749 13.9573 12.9549C13.9432 12.9349 13.9247 12.9185 13.9033 12.9068L13.6133 12.7001C13.5739 12.6762 13.5272 12.6674 13.4818 12.6754C13.4364 12.6833 13.3955 12.7075 13.3666 12.7434C13.2321 12.9033 13.0642 13.0318 12.8747 13.12C12.6853 13.2082 12.4789 13.2538 12.2699 13.2538C12.061 13.2538 11.8546 13.2082 11.6651 13.12C11.4757 13.0318 11.3078 12.9033 11.1733 12.7434C11.1277 12.6913 11.0864 12.6356 11.0499 12.5768C10.9268 12.3776 10.8582 12.1495 10.8512 11.9155C10.8442 11.6814 10.8989 11.4496 11.0099 11.2434C11.0314 11.2102 11.0389 11.1699 11.0308 11.1312C11.0227 11.0925 10.9996 11.0585 10.9666 11.0368L10.6333 10.7901C10.5891 10.7715 10.5396 10.7697 10.4942 10.7851C10.4487 10.8004 10.4105 10.8319 10.3866 10.8734C10.2376 11.1465 10.153 11.45 10.1391 11.7608C10.1253 12.0716 10.1825 12.3815 10.3066 12.6668C10.4127 12.938 10.5831 13.1794 10.8033 13.3701C11.1902 13.7461 11.7104 13.9534 12.2499 13.9468C12.5743 13.9565 12.8964 13.8902 13.1905 13.753C13.4845 13.6158 13.7424 13.4116 13.9433 13.1568Z' fill='white'/%3e%3c/svg%3e";
-
-    var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M17.6865 10.0334C17.3062 9.49067 16.7772 9.06934 16.1632 8.82008C15.6426 8.61932 15.0801 8.55138 14.5267 8.62237C13.9733 8.69337 13.4462 8.90108 12.9932 9.22674C12.4991 9.62868 12.0519 10.0849 11.6598 10.5867L11.4232 10.8534L13.0198 11.5434L13.1498 11.4067C13.4002 11.1158 13.6697 10.8419 13.9565 10.5867C14.1891 10.4177 14.4599 10.3085 14.7448 10.269C15.0297 10.2294 15.3199 10.2607 15.5898 10.3601C15.916 10.4798 16.1929 10.7051 16.3765 11.0001C16.5305 11.2108 16.6383 11.4516 16.6932 11.7067C16.7448 11.9619 16.7448 12.2249 16.6932 12.4801C16.6319 12.8145 16.4783 13.125 16.2498 13.3767C16.0471 13.5809 15.7972 13.7319 15.5221 13.8162C15.2471 13.9005 14.9554 13.9156 14.6732 13.8601C14.318 13.7558 13.9714 13.6243 13.6365 13.4667L13.4598 13.3967L12.3032 14.6934L12.6365 14.8367C13.196 15.1144 13.7809 15.3376 14.3832 15.5034C14.841 15.5831 15.3102 15.5706 15.7632 15.4667C16.4116 15.3301 17.0012 14.9945 17.4498 14.5067C17.907 14.0252 18.2099 13.4182 18.3198 12.7634C18.4116 12.2979 18.4116 11.8189 18.3198 11.3534C18.186 10.8803 17.9717 10.4338 17.6865 10.0334Z' fill='white'/%3e%3cpath d='M12.8401 13.0499L11.2468 12.3599L11.1168 12.4966C10.8669 12.7942 10.5962 13.0738 10.3068 13.3332C10.0741 13.5023 9.80337 13.6115 9.51849 13.651C9.2336 13.6905 8.94336 13.6593 8.67345 13.5599C8.35219 13.4397 8.07852 13.2187 7.89345 12.9299C7.74251 12.7191 7.63591 12.4798 7.58012 12.2266C7.51653 11.9342 7.52262 11.6311 7.5979 11.3415C7.67318 11.052 7.81553 10.7842 8.01345 10.5599C8.2156 10.3551 8.46564 10.2039 8.74095 10.1201C9.01626 10.0363 9.30813 10.0225 9.59012 10.0799C9.94807 10.1781 10.2971 10.3063 10.6335 10.4632L10.8101 10.5299L11.9668 9.23324L11.6735 9.11324C11.1141 8.8326 10.5278 8.60924 9.92345 8.44657C9.37154 8.32869 8.79848 8.35611 8.26035 8.52614C7.72222 8.69617 7.23744 9.00299 6.85345 9.41657C6.38782 9.89208 6.08347 10.5019 5.98345 11.1599C5.88532 11.6248 5.88532 12.105 5.98345 12.5699C6.08588 13.0347 6.28211 13.4736 6.56012 13.8599C6.92983 14.4125 7.46217 14.8365 8.08345 15.0732C8.69864 15.3134 9.37049 15.369 10.0168 15.2332C10.4725 15.1299 10.9023 14.9348 11.2801 14.6599C11.7741 14.258 12.2214 13.8018 12.6135 13.2999L12.8401 13.0499Z' fill='white'/%3e%3c/svg%3e";
-
-    var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23F7B731'/%3e%3cpath d='M17.0168 10.4836C16.8598 10.4819 16.704 10.5111 16.5583 10.5697C16.4126 10.6282 16.2799 10.715 16.1679 10.8249C16.0558 10.9348 15.9665 11.0658 15.9051 11.2103C15.8437 11.3548 15.8114 11.51 15.8101 11.667C15.8125 11.8887 15.8759 12.1056 15.9934 12.2936L15.3268 13.0036C15.1062 12.8766 14.8516 12.8214 14.5982 12.8459C14.3449 12.8704 14.1055 12.9733 13.9134 13.1403L13.2168 12.667C13.3204 12.3753 13.3514 12.0627 13.307 11.7564C13.2626 11.45 13.1441 11.1591 12.9619 10.9089C12.7796 10.6587 12.5391 10.4567 12.2611 10.3204C11.9832 10.1842 11.6762 10.1178 11.3668 10.127C10.9257 10.1237 10.4963 10.268 10.1468 10.537L9.2801 9.74364C9.38078 9.56935 9.43368 9.37158 9.43343 9.1703C9.43084 9.01345 9.39725 8.85866 9.33461 8.71484C9.27197 8.57101 9.18151 8.44099 9.06844 8.33225C8.95537 8.22352 8.82191 8.13821 8.67575 8.08124C8.52958 8.02427 8.3736 7.99677 8.21677 8.0003C7.89915 8.00103 7.59426 8.12525 7.36658 8.34671C7.13891 8.56817 7.00628 8.86949 6.99677 9.18697C6.99848 9.34467 7.03153 9.50046 7.09399 9.64528C7.15645 9.7901 7.24707 9.92106 7.36059 10.0305C7.4741 10.14 7.60825 10.2259 7.75524 10.283C7.90222 10.3402 8.0591 10.3676 8.21677 10.3636C8.43906 10.3609 8.65657 10.2987 8.84677 10.1836L9.71343 10.977C9.49991 11.2949 9.3884 11.6704 9.39376 12.0533C9.39912 12.4363 9.5211 12.8085 9.74343 13.1203L9.07677 13.8303C8.87595 13.7162 8.64759 13.6597 8.41677 13.667C8.18607 13.6729 7.96224 13.7467 7.77327 13.8791C7.5843 14.0116 7.43859 14.1968 7.35437 14.4117C7.27015 14.6265 7.25115 14.8615 7.29975 15.087C7.34836 15.3126 7.46241 15.5189 7.62763 15.68C7.79286 15.8411 8.00192 15.9499 8.22867 15.9928C8.45542 16.0357 8.68978 16.0108 8.90244 15.9212C9.11509 15.8315 9.2966 15.6812 9.42425 15.4889C9.5519 15.2967 9.62002 15.0711 9.6201 14.8403C9.61839 14.6452 9.57041 14.4533 9.4801 14.2803L10.1468 13.5703C10.5613 13.8772 11.0792 14.0102 11.5902 13.9411C12.1013 13.872 12.5653 13.6062 12.8834 13.2003L13.5501 13.637C13.5048 13.7597 13.4811 13.8894 13.4801 14.0203C13.4963 14.3289 13.6304 14.6196 13.8546 14.8323C14.0788 15.045 14.376 15.1636 14.6851 15.1636C14.9942 15.1636 15.2914 15.045 15.5156 14.8323C15.7398 14.6196 15.8739 14.3289 15.8901 14.0203C15.8923 13.8081 15.8333 13.5998 15.7201 13.4203L16.3868 12.7103C16.5613 12.81 16.7591 12.8617 16.9601 12.8603C17.1212 12.8706 17.2827 12.8481 17.4348 12.794C17.5869 12.74 17.7264 12.6555 17.8448 12.5458C17.9633 12.4361 18.0581 12.3035 18.1237 12.156C18.1893 12.0085 18.2241 11.8492 18.2261 11.6878C18.2282 11.5264 18.1974 11.3662 18.1356 11.2171C18.0737 11.068 17.9822 10.933 17.8666 10.8203C17.751 10.7077 17.6137 10.6198 17.463 10.5619C17.3123 10.504 17.1514 10.4774 16.9901 10.4836H17.0168ZM11.3501 13.2436C11.1161 13.2377 10.8891 13.163 10.6973 13.0287C10.5056 12.8944 10.3578 12.7065 10.2723 12.4886C10.1868 12.2707 10.1675 12.0325 10.2167 11.8036C10.266 11.5748 10.3816 11.3656 10.5492 11.2021C10.7167 11.0387 10.9288 10.9283 11.1588 10.8848C11.3887 10.8412 11.6264 10.8665 11.8422 10.9574C12.0579 11.0483 12.242 11.2007 12.3714 11.3957C12.5009 11.5907 12.57 11.8196 12.5701 12.0536C12.5657 12.3719 12.4357 12.6756 12.2085 12.8985C11.9812 13.1214 11.6751 13.2454 11.3568 13.2436H11.3501Z' fill='white'/%3e%3c/svg%3e";
-
-    var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23205AB7'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0859 8.30868C16.4108 8.42839 16.6831 8.6593 16.8542 8.96074L16.8628 8.97583L16.8705 8.99134C17.0174 9.28464 17.0775 9.61353 17.0441 9.93936C17.0123 11.03 16.8132 12.1093 16.4535 13.1395L16.4528 13.1415C16.1368 14.0377 15.4456 15.1335 14.6589 16.0108C14.2622 16.4533 13.8228 16.8611 13.3705 17.1668C12.9284 17.4656 12.4155 17.7067 11.8835 17.7262L11.8597 17.7271L11.8358 17.7262C11.291 17.7072 10.7708 17.4701 10.3204 17.1682C9.86244 16.8612 9.42376 16.4516 9.03057 16.0079C8.24999 15.1271 7.57941 14.0321 7.26533 13.1415L7.2645 13.1391C6.90532 12.1083 6.70674 11.0285 6.67566 9.93751C6.64229 9.61177 6.70236 9.28297 6.84922 8.98974L6.85684 8.97453L6.86522 8.95974C7.03585 8.65846 7.30747 8.42744 7.63179 8.30728L11.3874 6.76891C11.4429 6.74689 11.4996 6.7281 11.5571 6.71254C11.7538 6.6514 11.9644 6.6514 12.161 6.71254C12.2186 6.7281 12.2753 6.74693 12.3307 6.76895L12.3374 6.77159L16.0859 8.30868ZM11.9735 7.35255C11.8994 7.32695 11.8188 7.32695 11.7447 7.35255C11.7069 7.36213 11.6698 7.37415 11.6335 7.38855L7.87245 8.92913C7.69157 8.99369 7.53996 9.12117 7.44531 9.28828C7.35196 9.47467 7.31578 9.6845 7.34132 9.89139C7.36791 10.9234 7.55437 11.9449 7.89404 12.9198C8.45396 14.5075 10.3737 17.008 11.8591 17.06C13.2749 17.008 15.2642 14.5075 15.8241 12.9198C16.1642 11.9455 16.3512 10.9245 16.3784 9.89299C16.404 9.6861 16.3678 9.47627 16.2745 9.28988C16.1794 9.12247 16.0272 8.99495 15.8457 8.93073L12.0847 7.38855C12.0484 7.37415 12.0113 7.36213 11.9735 7.35255Z' fill='white'/%3e%3cpath d='M11.8631 8.29559L8.22357 9.77059V10.8904L11.8631 9.33705L15.5025 10.8904V9.77059L11.8631 8.29559Z' fill='white'/%3e%3cpath d='M10.6184 15.718C10.7942 16.0092 11.3957 16.4678 11.8633 16.4774C12.3078 16.4678 12.9324 16.0092 13.108 15.718C13.2835 15.4268 10.4426 15.427 10.6184 15.718Z' fill='white'/%3e%3c/svg%3e";
-
-    var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='-8 -8 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M19.7521 0.348161H20.3976V2.23694H20.7722L20.7752 0.351063H21.4208V0.00290065L19.7521 0V0.348161Z' fill='%232B2B2B'/%3e %3cpath d='M22.31 0.00290065H21.7223V2.23114H22.0785L22.0816 0.438104H22.0877L22.718 2.23404H22.9799L23.6224 0.441005H23.6285L23.6255 2.23404H23.997L24 0.00290065H23.4093L22.8642 1.58994H22.8551L22.31 0.00290065Z' fill='%232B2B2B'/%3e %3cpath d='M16.4863 0C15.3048 0 14.5435 0.713733 14.5435 1.81915L14.5374 8.1557C13.3194 6.89362 11.4893 6.20309 9.34245 6.20019C4.36976 6.19729 0.00609663 10.3636 6.37628e-06 15.1219C-0.00608387 19.8453 4.35149 23.9942 9.32114 24C11.5258 24.0029 13.5904 22.9207 14.6836 21.853C14.8968 23.0135 15.6306 23.6489 16.7726 23.6489C17.7165 23.6489 18.4017 22.9584 18.4047 22.0068L18.4291 1.82495C18.4291 0.734042 17.6496 0.00290135 16.4863 0ZM9.28764 20.0803C6.42218 20.0774 4.08961 17.852 4.09266 15.1161C4.0957 12.383 6.43131 10.1605 9.29677 10.1634C12.1622 10.1663 14.4948 12.3917 14.4918 15.1277C14.4887 17.8607 12.1531 20.0832 9.28764 20.0803Z' fill='%232B2B2B'/%3e %3cpath d='M9.29431 11.7998C7.3363 11.7998 5.74979 13.3143 5.74979 15.1799C5.74979 17.0455 7.3363 18.56 9.29431 18.56C11.2523 18.56 12.8419 17.0455 12.8419 15.1799C12.8419 13.3143 11.2523 11.7998 9.29431 11.7998Z' fill='%23517934'/%3e%3c/svg%3e";
-
-    // Takes a appType name and returns its logo as a data url.
-    // If appType does not exist the Digital.ai logo is returned.
-    var getLogoForAppType = function getLogoForAppType(appType) {
-      switch (appType) {
-        case 'Release':
-          {
-            return img$6;
-          }
-        case 'Deploy':
-          {
-            return img$5;
-          }
-        case 'Agility':
-          {
-            return img$4;
-          }
-        case 'Continuous Testing':
-          {
-            return img$3;
-          }
-        case 'Intelligence':
-          {
-            return img$2;
-          }
-        case 'Application Protection':
-          {
-            return img$1;
-          }
-        default:
-          {
-            return img;
-          }
+    var calculateItemHeight = function calculateItemHeight(isDense, customItemHeight, menuItemHeight) {
+      // Custom item height must NOT be lower than MENU_ITEM_HEIGHT_DENSE value
+      if (customItemHeight && customItemHeight >= MENU_ITEM_HEIGHT_DENSE) {
+        return customItemHeight;
       }
-    };
-    var daiAppsHeaderMenuItem = function daiAppsHeaderMenuItem(count) {
-      if (count === void 0) {
-        count = 0;
+      var itemHeightType = typeof menuItemHeight;
+      if (itemHeightType === 'number' || itemHeightType === 'string') {
+        return menuItemHeight;
+      } else {
+        return getDefaultItemHeight(isDense);
       }
-      return {
-        children: jsxRuntime.jsxs(DotTypography, __assign({
-          className: "dai-apps-title"
-        }, {
-          children: ["DIGITAL.AI APPLICATIONS", count > 0 ? " (" + count + ")" : '']
-        }), "menu-item-dai-apps-title"),
-        key: 'dai-apps-title',
-        disabled: true,
-        divider: true,
-        height: 32
-      };
     };
-    var createMenuItem = function createMenuItem(url, title, subtitle) {
-      if (subtitle === void 0) {
-        subtitle = null;
+    var getNumberOfVisibleItems = function getNumberOfVisibleItems(numberOfItems, maxVisibleItems) {
+      if (maxVisibleItems && maxVisibleItems > 0) {
+        return maxVisibleItems <= numberOfItems ? maxVisibleItems : numberOfItems;
       }
-      return jsxRuntime.jsxs("div", __assign({
-        className: "app-menu-item"
-      }, {
-        children: [jsxRuntime.jsx(DotLink, __assign({
-          href: url,
-          color: "textPrimary",
-          target: "_blank"
-        }, {
-          children: jsxRuntime.jsxs("div", __assign({
-            className: "logo-title"
-          }, {
-            children: [jsxRuntime.jsx(DotIcon, {
-              iconId: "open-new-tab"
-            }, void 0), jsxRuntime.jsxs("div", __assign({
-              className: "dot-app-switcher-app-title"
-            }, {
-              children: [jsxRuntime.jsx(DotTypography, __assign({
-                variant: "body1"
-              }, {
-                children: title
-              }), void 0), subtitle && jsxRuntime.jsx(DotTypography, __assign({
-                variant: "body2"
-              }, {
-                children: subtitle
-              }), void 0)]
-            }), void 0)]
-          }), void 0)
-        }), void 0), jsxRuntime.jsx(DotCopyButton, {
-          copyTooltip: "Copy application URL",
-          value: url
-        }, void 0)]
-      }), "app-menu-item-" + title);
+      return DEFAULT_MAX_VISIBLE_ITEMS;
     };
-    var createTopLevelMenuItem = function createTopLevelMenuItem(url, logo, title, openNewTab) {
-      if (openNewTab === void 0) {
-        openNewTab = true;
+    var calculateMaxHeight = function calculateMaxHeight(_a) {
+      var isDense = _a.isDense,
+        maxVisibleItems = _a.maxVisibleItems,
+        menuItems = _a.menuItems,
+        menuItemHeight = _a.menuItemHeight;
+      // if menuItemHeight is "auto" set maxHeight as same
+      if (typeof menuItemHeight === 'string') {
+        return menuItemHeight;
       }
-      // Creates an entry in the AppSwitcher at the same level as the AppTypeLabels, used for the Platform link and
-      // Empty state current application link
-      var target = openNewTab ? '_blank' : '_self';
-      return jsxRuntime.jsxs(DotLink, __assign({
-        href: url,
-        color: "textPrimary",
-        target: target
-      }, {
-        children: [jsxRuntime.jsxs("div", __assign({
-          className: "logo-title"
-        }, {
-          children: [jsxRuntime.jsx(DotAvatar, {
-            alt: "app image",
-            imageSrc: logo,
-            type: "image",
-            variant: "circular"
-          }, void 0), jsxRuntime.jsx("div", __assign({
-            className: "dot-app-switcher-app-title"
-          }, {
-            children: jsxRuntime.jsx(DotTypography, __assign({
-              variant: "body1"
-            }, {
-              children: title
-            }), void 0)
-          }), void 0)]
-        }), void 0), openNewTab && jsxRuntime.jsx(DotIcon, {
-          iconId: "open-new-tab"
-        }, void 0)]
-      }), "top-menu-item-" + title);
+      // If 'menuItemHeight' is set it will take precedence here
+      var itemHeight = menuItemHeight ? menuItemHeight : getDefaultItemHeight(isDense);
+      var maxHeight = 0;
+      var numberOfVisibleItems = getNumberOfVisibleItems(menuItems.length, maxVisibleItems);
+      var visibleItems = menuItems.slice(0, numberOfVisibleItems);
+      visibleItems.forEach(function (_a) {
+        var height = _a.height;
+        var customItemHeight = height ? height : itemHeight;
+        // + 3 is for bottom margin of menuItem
+        maxHeight += customItemHeight + 3;
+      });
+      return maxHeight;
     };
-    var createAppTypeLabel = function createAppTypeLabel(appTypeName, logo, appProps) {
-      var logoProps = logo ? {
-        imageSrc: logo
-      } : {
-        iconId: 'collection'
-      };
-      return jsxRuntime.jsxs("div", __assign({
-        className: "logo-title"
-      }, {
-        children: [jsxRuntime.jsx(DotAvatar, __assign({}, logoProps, {
-          alt: "app image",
-          type: "image",
-          variant: "circular"
-        }), void 0), jsxRuntime.jsxs("div", __assign({
-          className: "dot-app-switcher-app-title"
-        }, {
-          children: [jsxRuntime.jsx(DotTypography, __assign({
-            variant: "body1"
-          }, {
-            children: appTypeName
-          }), void 0), jsxRuntime.jsxs(DotTypography, __assign({
-            variant: "body2"
-          }, {
-            children: ["Instance (", appProps.length, ")"]
-          }), void 0)]
-        }), void 0)]
-      }), void 0);
+    var checkForSubItems = function checkForSubItems(menuItems) {
+      return menuItems.some(function (menuItem) {
+        return menuItem.items && menuItems.length > 0;
+      });
     };
-    var getInstanceStateText = function getInstanceStateText(application) {
-      if (application.instance_state === 1) {
-        return 'Production instance';
-      }
-      return 'Non-production instance';
+    var checkIfSubmenu = function checkIfSubmenu(anchorElement) {
+      if (!anchorElement) return false;
+      return anchorElement.classList.contains(listItemWithSubmenuClassName);
+    };
+    var checkIfMenuItemSelected = function checkIfMenuItemSelected(key, selectedKey, activeSubmenu) {
+      return selectedKey === key || activeSubmenu === key;
+    };
+    var checkForAutoFocus = function checkForAutoFocus(autoFocusItem, isFirstItem) {
+      return !!(autoFocusItem && isFirstItem);
     };
 
-    var rootClassName$T = 'dot-drawer';
-    var StyledDrawer = styled__default["default"](material.Drawer).withConfig({
-      displayName: "Drawerstyles__StyledDrawer",
-      componentId: "sc-1uiowy0-0"
-    })(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "], ["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "])), rootClassName$T, styles.alpha(theme.palette.grey[900], 0.7), function (_a) {
-        var height = _a.height,
-          anchor = _a.anchor;
-        return anchor === 'left' || anchor === 'right' ? '100%' : height;
-      }, theme.spacing(2), function (_a) {
-        var width = _a.width,
-          anchor = _a.anchor;
-        return anchor === 'bottom' || anchor === 'top' ? 'auto' : width;
-      });
-    });
-    var templateObject_1$Y, templateObject_2$U;
-
-    var rootClassName$S = 'dot-drawer-header';
-    var StyleDrawerHeader = styled__default["default"].div.withConfig({
-      displayName: "DrawerHeaderstyles__StyleDrawerHeader",
-      componentId: "sc-2d2xd3-0"
-    })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$S, theme.spacing(0, 0, 2));
-    });
-    var templateObject_1$X, templateObject_2$T;
-
-    var DotDrawerHeader = function DotDrawerHeader(_a) {
-      var ariaLabel = _a.ariaLabel,
-        children = _a.children,
+    /**
+     * Since this component is used inside 'ClickAwayListener',
+     * it needs to be contained within 'forwardRef' function
+     */
+    var DotMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+      var autoFocusItem = _a.autoFocusItem,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        onClose = _a.onClose,
-        variant = _a.variant;
+        dense = _a.dense,
+        id = _a.id,
+        maxVisibleItems = _a.maxVisibleItems,
+        menuItemHeight = _a.menuItemHeight,
+        menuItems = _a.menuItems,
+        onItemSelect = _a.onItemSelect,
+        onKeyDown = _a.onKeyDown,
+        onSubMenuCreate = _a.onSubMenuCreate,
+        selectedKey = _a.selectedKey;
       var rootClasses = useStylesWithRootClass(rootClassName$S, className);
-      return jsxRuntime.jsxs(StyleDrawerHeader, __assign({
-        "aria-label": ariaLabel,
-        className: rootClasses,
-        "data-testid": dataTestId
+      var _b = React.useState(null),
+        activeSubmenu = _b[0],
+        setActiveSubmenu = _b[1];
+      var _c = React.useState(null),
+        subItemAnchorEl = _c[0],
+        setSubItemAnchorEl = _c[1];
+      var openSubmenu = function openSubmenu(target, itemKey) {
+        // Set new anchor for submenu and active submenu key
+        // so that new submenu can be opened
+        setSubItemAnchorEl(target);
+        setActiveSubmenu(itemKey);
+      };
+      var closeActiveSubmenu = function closeActiveSubmenu() {
+        // We want to clean active submenu state if it exists.
+        // This will make previous submenu disappear when
+        // hovering to item with no submenu items
+        activeSubmenu && setActiveSubmenu(null);
+      };
+      var getMouseEnterHandler = function getMouseEnterHandler(itemKey, hasSubmenu) {
+        return function (event) {
+          hasSubmenu ? openSubmenu(event.currentTarget, itemKey) : closeActiveSubmenu();
+        };
+      };
+      return jsxRuntime.jsx(StyledMenuList, __assign({
+        classes: {
+          root: rootClasses
+        },
+        "data-testid": dataTestId,
+        dense: dense,
+        id: id,
+        onKeyDown: onKeyDown,
+        style: {
+          height: calculateMaxHeight({
+            isDense: dense,
+            maxVisibleItems: maxVisibleItems,
+            menuItems: menuItems,
+            menuItemHeight: menuItemHeight
+          })
+        }
       }, {
-        children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
-          className: "close-button",
-          iconId: "close",
-          onClick: onClose
-        }, void 0)]
+        children: menuItems.map(function (item, index) {
+          var itemAriaLabel = item.ariaLabel,
+            children = item.children,
+            classes = item.classes,
+            disabled = item.disabled,
+            divider = item.divider,
+            height = item.height,
+            subItems = item.items,
+            key = item.key;
+          var itemHeight = calculateItemHeight(dense, height, menuItemHeight);
+          var isSelected = checkIfMenuItemSelected(key, selectedKey, activeSubmenu);
+          var isFirstItem = index === 0;
+          var hasSubmenu = !!subItems;
+          var hasAutoFocus = checkForAutoFocus(autoFocusItem, isFirstItem);
+          var menuItemClasses = useStylesWithRootClass(listItemClassName$1, hasSubmenu ? listItemWithSubmenuClassName : '', classes ? classes : '');
+          var handleClick = function handleClick(event) {
+            // Execute select callback only for items which does not have
+            // submenu defined. If there is no menu or handler - prevent
+            // further propagation of the current event so that click on
+            // items with submenu does not close the menu
+            !hasSubmenu && onItemSelect ? onItemSelect(event, key) : event.stopPropagation();
+          };
+          /**
+           * If there is submenu, right arrow icon will be added
+           * and sub-menu will be rendered
+           */
+          return jsxRuntime.jsxs(material.MenuItem, __assign({
+            autoFocus: hasAutoFocus,
+            "aria-label": itemAriaLabel,
+            className: menuItemClasses,
+            disabled: disabled,
+            disableRipple: hasSubmenu,
+            divider: divider,
+            onClick: handleClick,
+            onMouseEnter: getMouseEnterHandler(key, hasSubmenu),
+            ref: ref,
+            style: {
+              height: itemHeight
+            },
+            selected: isSelected
+          }, {
+            children: [children, hasSubmenu && jsxRuntime.jsx(DotIcon, {
+              "data-testid": "dot-item-arrow-icon",
+              iconId: "arrow-right"
+            }, void 0), hasSubmenu && onSubMenuCreate({
+              anchorElement: subItemAnchorEl,
+              isOpened: isSelected,
+              subMenuId: key,
+              subMenuItems: subItems
+            })]
+          }), key);
+        })
       }), void 0);
-    };
-
-    var rootClassName$R = 'dot-drawer-body';
-    var StyleDrawerBody = styled__default["default"].div.withConfig({
-      displayName: "DrawerBodystyles__StyleDrawerBody",
-      componentId: "sc-1mpmjdk-0"
-    })(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$R);
     });
-    var templateObject_1$W, templateObject_2$S;
 
-    var DotDrawerBody = function DotDrawerBody(_a) {
-      var ariaLabel = _a.ariaLabel,
-        children = _a.children,
+    var DotMenu = function DotMenu(_a) {
+      var anchorEl = _a.anchorEl,
+        ariaLabel = _a.ariaLabel,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        headerExists = _a.headerExists,
-        onClose = _a.onClose,
-        variant = _a.variant;
-      var rootClasses = useStylesWithRootClass(rootClassName$R, className);
-      return jsxRuntime.jsxs(StyleDrawerBody, __assign({
+        _b = _a.dense,
+        dense = _b === void 0 ? true : _b,
+        disablePortal = _a.disablePortal,
+        id = _a.id,
+        _c = _a.loading,
+        loading = _c === void 0 ? false : _c,
+        _d = _a.maxVisibleItems,
+        maxVisibleItems = _d === void 0 ? DEFAULT_MAX_VISIBLE_ITEMS : _d,
+        menuItemHeight = _a.menuItemHeight,
+        _e = _a.menuItems,
+        menuItems = _e === void 0 ? [] : _e,
+        _f = _a.menuPlacement,
+        menuPlacement = _f === void 0 ? 'bottom' : _f,
+        onLeave = _a.onLeave,
+        onSelect = _a.onSelect,
+        _g = _a.open,
+        open = _g === void 0 ? false : _g,
+        selectedKey = _a.selectedKey;
+      var rootClasses = useStylesWithRootClass(rootClassName$T, className, loading ? 'loading' : '');
+      var isSubmenu = checkIfSubmenu(anchorEl);
+      var hasSubItems = checkForSubItems(menuItems);
+      // Timeout object is customizable when Menu component is either submenu
+      // (it is opened within parent menu) or it contains at least one item which
+      // has sub-items. This is done because when multi-level menu is closing it
+      // will first close the parent and only then child menus - which looks
+      // a bit weird - so here I'm giving it exit value of 0 so that it looks like
+      // they all close at the same time. For "normal" menus, timeout is unnecessary.
+      var timeout = isSubmenu || hasSubItems ? {
+        exit: 0,
+        enter: 300
+      } : undefined;
+      var handleSelect = function handleSelect(event, itemKey) {
+        onLeave && onLeave(event);
+        onSelect && onSelect(event, id, itemKey);
+      };
+      var handleListKeyDown = function handleListKeyDown(event) {
+        if (onLeave && event.key === 'Tab') {
+          event.preventDefault();
+          onLeave(event);
+        }
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      var handleClickAway = function handleClickAway(event) {
+        if (onLeave && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
+          onLeave(event);
+        }
+      };
+      return jsxRuntime.jsx(StyledPopper, __assign({
+        anchorEl: anchorEl,
         "aria-label": ariaLabel,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        disablePortal: disablePortal,
+        open: open,
+        placement: menuPlacement,
+        role: undefined,
+        transition: true
       }, {
-        children: [children, !headerExists && variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
-          className: "dot-drawer-close-button",
-          iconId: "close",
-          onClick: onClose
-        }, void 0)]
+        children: function (_a) {
+          var TransitionProps = _a.TransitionProps,
+            placement = _a.placement;
+          return jsxRuntime.jsx(material.Fade, __assign({}, TransitionProps, {
+            style: {
+              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+            },
+            timeout: timeout
+          }, {
+            children: jsxRuntime.jsx(material.Paper, {
+              children: jsxRuntime.jsx(material.ClickAwayListener, __assign({
+                onClickAway: handleClickAway
+              }, {
+                children: loading ? jsxRuntime.jsx(DotProgress, {
+                  "data-testid": "loading-indicator",
+                  tooltip: "Loading Data...",
+                  value: 20
+                }, void 0) : jsxRuntime.jsx(DotMenuList, {
+                  autoFocusItem: open,
+                  "data-testid": dataTestId + "-menu",
+                  dense: dense,
+                  id: id,
+                  maxVisibleItems: maxVisibleItems,
+                  menuItemHeight: menuItemHeight,
+                  menuItems: menuItems,
+                  onItemSelect: handleSelect,
+                  onKeyDown: handleListKeyDown,
+                  onSubMenuCreate: function (_a) {
+                    var anchorElement = _a.anchorElement,
+                      isOpened = _a.isOpened,
+                      subMenuId = _a.subMenuId,
+                      subMenuItems = _a.subMenuItems;
+                    return jsxRuntime.jsx(DotMenu, {
+                      anchorEl: anchorElement,
+                      menuPlacement: "right-start",
+                      id: subMenuId,
+                      menuItems: subMenuItems,
+                      open: isOpened,
+                      onLeave: onLeave,
+                      onSelect: onSelect,
+                      selectedKey: selectedKey
+                    }, void 0);
+                  },
+                  selectedKey: selectedKey
+                }, void 0)
+              }), void 0)
+            }, void 0)
+          }), void 0);
+        }
       }), void 0);
     };
 
-    var rootClassName$Q = 'dot-drawer-footer';
-    var StyleDrawerFooter = styled__default["default"].div.withConfig({
-      displayName: "DrawerFooterstyles__StyleDrawerFooter",
-      componentId: "sc-1ki05ze-0"
+    var CreateUUID = function CreateUUID() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0,
+          v = c === 'x' ? r : r & 0x3 | 0x8;
+        return v.toString(16);
+      });
+    };
+
+    var rootClassName$R = 'dot-drawer';
+    var StyledDrawer = styled__default["default"](material.Drawer).withConfig({
+      displayName: "Drawerstyles__StyledDrawer",
+      componentId: "sc-1uiowy0-0"
+    })(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "], ["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "])), rootClassName$R, styles.alpha(theme.palette.grey[900], 0.7), function (_a) {
+        var height = _a.height,
+          anchor = _a.anchor;
+        return anchor === 'left' || anchor === 'right' ? '100%' : height;
+      }, theme.spacing(2), function (_a) {
+        var width = _a.width,
+          anchor = _a.anchor;
+        return anchor === 'bottom' || anchor === 'top' ? 'auto' : width;
+      });
+    });
+    var templateObject_1$V, templateObject_2$S;
+
+    var rootClassName$Q = 'dot-drawer-header';
+    var StyleDrawerHeader = styled__default["default"].div.withConfig({
+      displayName: "DrawerHeaderstyles__StyleDrawerHeader",
+      componentId: "sc-2d2xd3-0"
     })(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n    }\n  "])), rootClassName$Q, theme.spacing(2, 0, 0));
+      return styled.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$Q, theme.spacing(0, 0, 2));
+    });
+    var templateObject_1$U, templateObject_2$R;
+
+    var rootClassName$P = 'dot-icon-btn';
+    var StyledIconButton = styled__default["default"](material.IconButton).withConfig({
+      displayName: "IconButtonstyles__StyledIconButton",
+      componentId: "eko0kb-0"
+    })(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
+      return styled.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "])), rootClassName$P, hoverGray);
+    });
+    var templateObject_1$T, templateObject_2$Q;
+
+    var DotIconButton = function DotIconButton(_a) {
+      var ariaLabel = _a.ariaLabel,
+        className = _a.className,
+        _b = _a.color,
+        color = _b === void 0 ? 'inherit' : _b,
+        dataTestId = _a["data-testid"],
+        _c = _a.disabled,
+        disabled = _c === void 0 ? false : _c,
+        _d = _a.disableRipple,
+        disableRipple = _d === void 0 ? false : _d,
+        iconId = _a.iconId,
+        _e = _a.iconSize,
+        iconSize = _e === void 0 ? 'small' : _e,
+        onClick = _a.onClick,
+        tooltip = _a.tooltip,
+        _f = _a.size,
+        size = _f === void 0 ? 'medium' : _f;
+      var rippleClassName = disableRipple ? 'ripple-disabled' : '';
+      var rootClasses = useStylesWithRootClass(rootClassName$P, rippleClassName, className);
+      return jsxRuntime.jsx(DotTooltip, __assign({
+        "data-testid": "icon-button-tooltip",
+        title: tooltip
+      }, {
+        children: jsxRuntime.jsx(StyledIconButton, __assign({
+          "aria-label": ariaLabel,
+          classes: {
+            root: rootClasses
+          },
+          color: color,
+          "data-testid": dataTestId,
+          disableRipple: disableRipple,
+          disabled: disabled,
+          onClick: function (event) {
+            return onClick && onClick(event);
+          },
+          size: size
+        }, {
+          children: jsxRuntime.jsx(DotIcon, {
+            "data-testid": "button-icon",
+            fontSize: iconSize,
+            iconId: iconId
+          }, void 0)
+        }), void 0)
+      }), void 0);
+    };
+
+    var DotDrawerHeader = function DotDrawerHeader(_a) {
+      var ariaLabel = _a.ariaLabel,
+        children = _a.children,
+        className = _a.className,
+        dataTestId = _a["data-testid"],
+        onClose = _a.onClose,
+        variant = _a.variant;
+      var rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+      return jsxRuntime.jsxs(StyleDrawerHeader, __assign({
+        "aria-label": ariaLabel,
+        className: rootClasses,
+        "data-testid": dataTestId
+      }, {
+        children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          className: "close-button",
+          iconId: "close",
+          onClick: onClose
+        }, void 0)]
+      }), void 0);
+    };
+
+    var rootClassName$O = 'dot-drawer-body';
+    var StyleDrawerBody = styled__default["default"].div.withConfig({
+      displayName: "DrawerBodystyles__StyleDrawerBody",
+      componentId: "sc-1mpmjdk-0"
+    })(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
+      return styled.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$O);
+    });
+    var templateObject_1$S, templateObject_2$P;
+
+    var DotDrawerBody = function DotDrawerBody(_a) {
+      var ariaLabel = _a.ariaLabel,
+        children = _a.children,
+        className = _a.className,
+        dataTestId = _a["data-testid"],
+        headerExists = _a.headerExists,
+        onClose = _a.onClose,
+        variant = _a.variant;
+      var rootClasses = useStylesWithRootClass(rootClassName$O, className);
+      return jsxRuntime.jsxs(StyleDrawerBody, __assign({
+        "aria-label": ariaLabel,
+        className: rootClasses,
+        "data-testid": dataTestId
+      }, {
+        children: [children, !headerExists && variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          className: "dot-drawer-close-button",
+          iconId: "close",
+          onClick: onClose
+        }, void 0)]
+      }), void 0);
+    };
+
+    var rootClassName$N = 'dot-drawer-footer';
+    var StyleDrawerFooter = styled__default["default"].div.withConfig({
+      displayName: "DrawerFooterstyles__StyleDrawerFooter",
+      componentId: "sc-1ki05ze-0"
+    })(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n    }\n  "])), rootClassName$N, theme.spacing(2, 0, 0));
     });
-    var templateObject_1$V, templateObject_2$R;
+    var templateObject_1$R, templateObject_2$O;
 
     var DotDrawerFooter = function DotDrawerFooter(_a) {
       var ariaLabel = _a.ariaLabel,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"];
-      var rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+      var rootClasses = useStylesWithRootClass(rootClassName$N, className);
       return jsxRuntime.jsx(StyleDrawerFooter, __assign({
         "aria-label": ariaLabel,
         className: rootClasses,
@@ -2778,7 +2675,7 @@
           onClose(event);
         }
       };
-      var rootClasses = useStylesWithRootClass(rootClassName$T, className);
+      var rootClasses = useStylesWithRootClass(rootClassName$R, className);
       var headerExists = !!drawerHeaderProps;
       var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
       return jsxRuntime.jsxs(StyledDrawer, __assign({
@@ -2821,1061 +2718,1274 @@
       }), void 0);
     };
 
-    var rootClassName$P = 'dot-app-switcher';
-    var StyledAppSwitcher = styled__default["default"](DotDrawer).withConfig({
-      displayName: "AppSwitcherstyles__StyledAppSwitcher",
-      componentId: "hhxfqg-0"
-    })(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n    &.", " {\n      .app-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .dot-link,\n      .product-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        height: 64px;\n        text-decoration: none;\n        cursor: pointer;\n      }\n      .logo-title {\n        display: flex;\n        align-items: center;\n        gap: 24px;\n        width: 100%;\n      }\n      .dot-avatar {\n        flex-basis: 40px;\n      }\n      .dai-apps-title {\n        display: flex;\n        align-items: center;\n        height: 32px;\n        padding: ", ";\n        background-color: ", ";\n      }\n      .dot-app-switcher-app-title {\n        min-width: 150px;\n      }\n      .dot-icon {\n        flex-basis: content;\n      }\n      .app-switcher-header {\n        .app-switcher-header-title {\n          padding-left: ", ";\n          display: flex;\n          align-items: center;\n        }\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n        border-bottom: 1px solid ", ";\n        margin: ", ";\n        padding-bottom: ", ";\n        .app-switcher-label {\n          padding-left: ", ";\n        }\n      }\n      .app-switcher-back-button {\n        &.dot-button.MuiButton-text {\n          padding-left: 0;\n        }\n      }\n      .product-heading {\n        display: flex;\n        align-items: center;\n        gap: 24px;\n        padding-bottom: ", ";\n      }\n      .product-applications {\n        width: 100%;\n        overflow-y: auto;\n      }\n      .product-applications-search {\n        margin-bottom: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .app-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .dot-link,\n      .product-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        height: 64px;\n        text-decoration: none;\n        cursor: pointer;\n      }\n      .logo-title {\n        display: flex;\n        align-items: center;\n        gap: 24px;\n        width: 100%;\n      }\n      .dot-avatar {\n        flex-basis: 40px;\n      }\n      .dai-apps-title {\n        display: flex;\n        align-items: center;\n        height: 32px;\n        padding: ", ";\n        background-color: ", ";\n      }\n      .dot-app-switcher-app-title {\n        min-width: 150px;\n      }\n      .dot-icon {\n        flex-basis: content;\n      }\n      .app-switcher-header {\n        .app-switcher-header-title {\n          padding-left: ", ";\n          display: flex;\n          align-items: center;\n        }\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n        border-bottom: 1px solid ", ";\n        margin: ", ";\n        padding-bottom: ", ";\n        .app-switcher-label {\n          padding-left: ", ";\n        }\n      }\n      .app-switcher-back-button {\n        &.dot-button.MuiButton-text {\n          padding-left: 0;\n        }\n      }\n      .product-heading {\n        display: flex;\n        align-items: center;\n        gap: 24px;\n        padding-bottom: ", ";\n      }\n      .product-applications {\n        width: 100%;\n        overflow-y: auto;\n      }\n      .product-applications-search {\n        margin-bottom: ", ";\n      }\n    }\n  "])), rootClassName$P, theme.spacing(0, 0, 0, 1), theme.palette.grey[50], theme.spacing(2), theme.palette.grey[200], theme.spacing(0, -2, 2), theme.spacing(1), theme.spacing(3), theme.spacing(3), theme.spacing(3));
+    var fadeIn = styled.keyframes(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+    var StyledDotDrawer = styled__default["default"](DotDrawer).withConfig({
+      displayName: "NestedListstyles__StyledDotDrawer",
+      componentId: "sc-1wwoqos-0"
+    })(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var open = _a.open;
+      return styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "])), nestedDrawerClassName, open ? levelFirst : levelBottom, open && styled.css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "], ["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "])), fadeIn));
     });
-    var templateObject_1$U, templateObject_2$Q;
+    var templateObject_1$Q, templateObject_2$N, templateObject_3$8, templateObject_4$6;
 
-    var DotAppSwitcherView = function DotAppSwitcherView(_a) {
-      var activeApp = _a.activeApp,
-        apps = _a.apps,
-        className = _a.className,
-        _b = _a.noAppTypeLabel,
-        noAppTypeLabel = _b === void 0 ? 'Other' : _b,
-        platformConsoleUrl = _a.platformConsoleUrl,
-        onClose = _a.onClose,
-        open = _a.open,
-        _c = _a.searchInstancesThreshold,
-        searchInstancesThreshold = _c === void 0 ? 5 : _c,
-        selectedAppType = _a.selectedAppType,
-        _d = _a.yOffset,
-        yOffset = _d === void 0 ? 48 : _d,
-        _e = _a.zIndex,
-        zIndex = _e === void 0 ? 990 : _e;
-      var dotCoreApiContext = useDotCoreApiContext();
-      var setSelectedAppType = null;
-      if (dotCoreApiContext !== null) {
-        setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
-      }
-      var rootClasses = useStylesWithRootClass(rootClassName$P, className);
-      var _f = React.useState(),
-        appTypeMap = _f[0],
-        setAppTypeMap = _f[1];
-      var _g = React.useState(),
-        appTypeLabels = _g[0],
-        setAppTypeLabels = _g[1];
-      var _h = React.useState(),
-        appTypeMenuItems = _h[0],
-        setAppTypeMenuItems = _h[1];
-      var _j = React.useState(null),
-        selectedAppTypeAlt = _j[0],
-        setSelectedAppTypeAlt = _j[1];
-      var _k = React.useState(''),
-        searchText = _k[0],
-        setSearchText = _k[1];
-      if (!setSelectedAppType) {
-        selectedAppType = selectedAppTypeAlt;
-        setSelectedAppType = setSelectedAppTypeAlt;
+    var DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
+    var DotListDivider = function DotListDivider(_a) {
+      var item = _a.item,
+        index = _a.index;
+      if (item.text) {
+        return jsxRuntime.jsx(material.ListSubheader, __assign({
+          disableSticky: true
+        }, {
+          children: jsxRuntime.jsx(DotTypography, __assign({
+            variant: "overline"
+          }, {
+            children: item.text
+          }), void 0)
+        }), void 0);
       }
-      var showApps = React.useCallback(function (appType) {
-        setSelectedAppType(appType);
-      }, []);
-      var showAppTypes = React.useCallback(function () {
-        setSearchText('');
-        setSelectedAppType(null);
-      }, []);
-      var populateAppTypeMap = React.useCallback(function () {
-        var newAppTypeMap = new Map();
-        // we'll put Other at the end
-        var otherApps = [];
-        apps === null || apps === void 0 ? void 0 : apps.forEach(function (app) {
-          var instanceStateText = getInstanceStateText(app);
-          var children = createMenuItem(app.url, app.name, instanceStateText);
-          var searchableContent = app.name + " " + instanceStateText;
-          var appTypeName = app.logo_product_name;
-          var appTypeApps;
-          if (appTypeName) {
-            appTypeApps = newAppTypeMap.get(appTypeName);
-            if (!appTypeApps) {
-              appTypeApps = [];
-              newAppTypeMap.set(appTypeName, appTypeApps);
-            }
-          } else {
-            appTypeApps = otherApps;
-          }
-          appTypeApps.push({
-            children: children,
-            searchableContent: searchableContent,
-            key: app.id,
-            height: 64
-          });
-        });
-        var keys = Array.from(newAppTypeMap.keys()).sort();
-        var sortedAppTypeMap = new Map();
-        for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
-          var appType = keys_1[_i];
-          sortedAppTypeMap.set(appType, newAppTypeMap.get(appType));
+      return jsxRuntime.jsx(material.Divider, {
+        "aria-hidden": true,
+        "data-testid": "divider-" + index
+      }, void 0);
+    };
+    var DotList = function DotList(_a) {
+      var ariaLabel = _a.ariaLabel,
+        children = _a.children,
+        className = _a.className,
+        _b = _a.component,
+        component = _b === void 0 ? 'ul' : _b,
+        dataTestId = _a["data-testid"],
+        _c = _a.dense,
+        dense = _c === void 0 ? false : _c,
+        _d = _a.disablePadding,
+        disablePadding = _d === void 0 ? false : _d,
+        _e = _a.items,
+        items = _e === void 0 ? [] : _e,
+        _f = _a.menuPlacement,
+        menuPlacement = _f === void 0 ? 'right-start' : _f,
+        _g = _a.nestedDrawerLeftSpacing,
+        nestedDrawerLeftSpacing = _g === void 0 ? 240 : _g,
+        _h = _a.nestedListType,
+        nestedListType = _h === void 0 ? 'expandable' : _h,
+        _j = _a.width,
+        width = _j === void 0 ? 240 : _j;
+      var rootClasses = useStylesWithRootClass(rootClassName$W, className);
+      var listWidth = typeof width === 'number' ? width + "px" : width;
+      var listRef = React.useRef();
+      var _k = React.useState(null),
+        listItemIndex = _k[0],
+        setListItemIndex = _k[1];
+      var updateSelectedListItem = function updateSelectedListItem(currentIndex) {
+        currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
+      };
+      return jsxRuntime.jsxs(StyledList, __assign({
+        "aria-label": ariaLabel,
+        classes: {
+          root: rootClasses
+        },
+        component: component,
+        "data-testid": dataTestId,
+        dense: dense,
+        disablePadding: disablePadding,
+        ref: listRef,
+        style: {
+          width: listWidth
         }
-        var appTypeCount = sortedAppTypeMap.size;
-        if (platformConsoleUrl) {
-          appTypeCount++;
-        }
-        if (otherApps.length > 0) {
-          sortedAppTypeMap.set(noAppTypeLabel, otherApps);
-        }
-        setAppTypeMap(sortedAppTypeMap);
-        var menuItems = [daiAppsHeaderMenuItem(appTypeCount)];
-        if (platformConsoleUrl) {
-          var children = createTopLevelMenuItem(platformConsoleUrl, getLogoForAppType('Platform'), 'Digital.ai Platform', !window.location.href.startsWith(platformConsoleUrl));
-          menuItems.push({
-            children: children,
-            key: 'app-switcher-platform-link',
-            height: 64
-          });
-        }
-        var newAppTypeLabels = new Map();
-        sortedAppTypeMap.forEach(function (singleTypeApps, appTypeName) {
-          if ((singleTypeApps === null || singleTypeApps === void 0 ? void 0 : singleTypeApps.length) > 0) {
-            var logo = appTypeName === noAppTypeLabel ? null : getLogoForAppType(appTypeName);
-            newAppTypeLabels.set(appTypeName, {
-              logo: logo,
-              singleTypeApps: singleTypeApps
-            });
-            menuItems.push({
-              children: jsxRuntime.jsxs("div", __assign({
-                className: "product-menu-item",
-                onClick: function () {
-                  return showApps(appTypeName);
-                }
-              }, {
-                children: [createAppTypeLabel(appTypeName, logo, singleTypeApps), jsxRuntime.jsx(DotIcon, {
-                  iconId: "chevron-right"
-                }, void 0)]
-              }), "menu-item-" + appTypeName),
-              key: appTypeName,
-              height: 64
-            });
+      }, {
+        children: [items.map(function (item, index) {
+          var handleListItemClick = function handleListItemClick(e) {
+            var _a;
+            updateSelectedListItem(index);
+            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+          };
+          var handleMenuLeave = function handleMenuLeave(event) {
+            var _a, _b;
+            // Remove index only if clicked element is not found within the list
+            if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+              setListItemIndex(null);
+              (_b = item.onMenuLeave) === null || _b === void 0 ? void 0 : _b.call(item, event);
+            }
+          };
+          if (item.child) {
+            return jsxRuntime.jsx(React.Fragment, {
+              children: item.child
+            }, "item-child-" + index);
           }
-        });
-        setAppTypeMenuItems(menuItems);
-        setAppTypeLabels(newAppTypeLabels);
-      }, [apps]);
-      var emptyState = React.useCallback(function () {
-        var currentAppMenuItem = createTopLevelMenuItem(window.location.href, getLogoForAppType(activeApp.product), activeApp.name, false);
-        setAppTypeMenuItems([daiAppsHeaderMenuItem(), {
-          children: currentAppMenuItem,
-          key: 'no_applications_configured',
-          height: 64,
-          disabled: true
-        }]);
-      }, [activeApp]);
-      React.useEffect(function () {
-        if ((apps === null || apps === void 0 ? void 0 : apps.length) > 0) {
-          populateAppTypeMap();
-        } else {
-          emptyState();
-        }
-      }, [apps]);
-      var onAppInstanceSearchTextChange = React.useCallback(function (text) {
-        setSearchText(text);
-      }, []);
-      var clearAppInstanceSearchText = React.useCallback(function () {
-        setSearchText('');
-      }, []);
-      var closeHandler = React.useCallback(function (event) {
-        setSearchText('');
-        onClose && onClose(event);
-      }, [onClose]);
-      var filteredAppInstances = React.useCallback(function () {
-        var _a;
-        return (_a = appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
-          var isMatch = !searchText;
-          if (searchText) {
-            var testStr = isLowerCase(searchText) ? item.searchableContent.toLowerCase() : item.searchableContent;
-            isMatch = testStr.indexOf(searchText) >= 0;
+          if (item.divider) {
+            return jsxRuntime.jsx(DotListDivider, {
+              index: index,
+              item: item
+            }, "divider-" + index);
           }
-          return isMatch;
-        }).map(function (item) {
-          return item.children;
-        });
-      }, [appTypeMap, selectedAppType, searchText]);
-      var content = function content() {
-        var _a;
-        if (selectedAppType && appTypeMap && appTypeLabels) {
-          var labelConfig = appTypeLabels.get(selectedAppType);
-          return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [jsxRuntime.jsx("span", {
-              children: jsxRuntime.jsx(DotButton, __assign({
-                className: "app-switcher-back-button",
-                type: "text",
-                onClick: showAppTypes,
-                startIcon: jsxRuntime.jsx(DotIcon, {
-                  iconId: "back"
-                }, void 0)
-              }, {
-                children: jsxRuntime.jsx("span", {
-                  children: "Back"
-                }, void 0)
-              }), void 0)
-            }, void 0), jsxRuntime.jsx("div", __assign({
-              className: "product-heading"
-            }, {
-              children: createAppTypeLabel(selectedAppType, labelConfig.logo, labelConfig.singleTypeApps)
-            }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= searchInstancesThreshold && jsxRuntime.jsx("div", {
-              children: jsxRuntime.jsx(SearchInput, {
-                "data-testid": "app-instance-search-input",
-                onChange: onAppInstanceSearchTextChange,
-                onClear: clearAppInstanceSearchText,
-                value: searchText
-              }, void 0)
-            }, void 0), jsxRuntime.jsx("div", __assign({
-              className: "product-applications"
-            }, {
-              children: filteredAppInstances()
-            }), void 0)]
+          return jsxRuntime.jsx(DotListItem, {
+            className: item.className,
+            component: item.component,
+            "data-testid": dataTestId + "-item-" + index,
+            endIcon: item.endIcon,
+            href: item.href,
+            isOpened: listItemIndex === index,
+            items: item.items,
+            menuPlacement: menuPlacement,
+            nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+            nestedListType: nestedListType,
+            onClick: item.href && !item.onClick ? null : handleListItemClick,
+            onMenuLeave: handleMenuLeave,
+            primaryText: item.primaryText,
+            secondaryText: item.secondaryText,
+            selected: item.selected,
+            startIcon: item.startIcon,
+            target: item.target,
+            text: item.text,
+            tooltip: item.tooltip,
+            tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
+          }, index);
+        }), children]
+      }), void 0);
+    };
+    var DotListItem = function DotListItem(_a) {
+      var ariaLabel = _a.ariaLabel,
+        className = _a.className,
+        _b = _a.component,
+        component = _b === void 0 ? 'li' : _b,
+        dataTestId = _a["data-testid"],
+        _c = _a.divider,
+        divider = _c === void 0 ? false : _c,
+        endIcon = _a.endIcon,
+        href = _a.href,
+        isOpened = _a.isOpened,
+        onClick = _a.onClick,
+        onMenuLeave = _a.onMenuLeave,
+        _d = _a.items,
+        items = _d === void 0 ? [] : _d,
+        menuPlacement = _a.menuPlacement,
+        nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
+        nestedListType = _a.nestedListType,
+        primaryText = _a.primaryText,
+        secondaryText = _a.secondaryText,
+        selected = _a.selected,
+        startIcon = _a.startIcon,
+        target = _a.target,
+        text = _a.text,
+        tooltip = _a.tooltip,
+        _e = _a.tooltipPlacement,
+        tooltipPlacement = _e === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _e;
+      var hasChildren = items.length > 0;
+      var isFlyout = nestedListType === 'menu' && hasChildren;
+      var _f = React.useState(null),
+        anchorEl = _f[0],
+        setAnchorEl = _f[1];
+      var showEndIcon = endIcon || hasChildren;
+      var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
+      var toggleOpen = function toggleOpen(event) {
+        return setAnchorEl(event.currentTarget);
+      };
+      var handleClick = function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        toggleOpen(event);
+      };
+      var handleMenuLeave = function handleMenuLeave(event) {
+        return onMenuLeave(event);
+      };
+      var renderListItemText = function renderListItemText() {
+        return primaryText && secondaryText ? jsxRuntime.jsx(material.ListItemText, {
+          primary: primaryText,
+          secondary: secondaryText
+        }, void 0) : jsxRuntime.jsx(DotTypography, __assign({
+          variant: "body1"
+        }, {
+          children: text
+        }), void 0);
+      };
+      var renderListItemEndIcon = function renderListItemEndIcon() {
+        if (hasChildren || !endIcon) {
+          return jsxRuntime.jsx(DotIcon, {
+            iconId: hasChildren && getChevronIcon(nestedListType, isOpened)
           }, void 0);
         }
-        return appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(function (item) {
-          return item.children;
-        });
+        return endIcon;
       };
-      var header = {
-        className: 'app-switcher-header',
-        children: jsxRuntime.jsxs("div", __assign({
-          className: "app-switcher-header-title",
-          style: {
-            marginTop: yOffset + 'px',
-            width: '80%'
-          }
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(DotTooltip, __assign({
+          "data-testid": dataTestId + "-tooltip",
+          placement: tooltipPlacement,
+          title: tooltip
         }, {
-          children: [jsxRuntime.jsx(DotAvatar, {
-            iconId: "apps",
-            alt: "app image",
-            type: "image",
-            variant: "circular"
-          }, void 0), jsxRuntime.jsx(DotTypography, __assign({
-            className: "app-switcher-label"
+          children: jsxRuntime.jsxs(StyledListItem, __assign({
+            "aria-label": ariaLabel,
+            button: true,
+            classes: {
+              root: rootClasses
+            },
+            component: href && !onClick ? 'a' : component,
+            "data-testid": dataTestId,
+            divider: divider,
+            href: onClick ? null : href,
+            onClick: onClick || !href ? handleClick : null,
+            selected: isFlyout ? isOpened : selected,
+            target: target
           }, {
-            children: "App switcher"
-          }), void 0)]
-        }), void 0)
-      };
-      return jsxRuntime.jsx(StyledAppSwitcher, __assign({
-        className: rootClasses,
-        ModalProps: {
-          style: {
-            zIndex: zIndex
-          },
-          hideBackdrop: true
-        },
-        drawerHeaderProps: header,
-        variant: "temporary",
-        width: "340px",
-        open: open,
-        onClose: closeHandler
-      }, {
-        children: content()
-      }), void 0);
+            children: [jsxRuntime.jsxs("span", __assign({
+              className: listItemLinkClassName
+            }, {
+              children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
+                children: startIcon
+              }, void 0), renderListItemText()]
+            }), void 0), showEndIcon && renderListItemEndIcon()]
+          }), void 0)
+        }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
+          anchorEl: anchorEl,
+          ariaLabel: "nested list",
+          "data-testid": "nestedList",
+          items: items,
+          menuPlacement: menuPlacement,
+          nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+          onMenuLeave: handleMenuLeave,
+          open: isOpened,
+          type: nestedListType
+        }, void 0)]
+      }, void 0);
     };
-    var DotAppSwitcher = function DotAppSwitcher(_a) {
-      var accountId = _a.accountId,
-        _b = _a.includePlatformConsole,
-        includePlatformConsole = _b === void 0 ? true : _b,
-        onClose = _a.onClose,
-        commonProps = __rest(_a, ["accountId", "includePlatformConsole", "onClose"]);
-      var _c = useDotCoreApiContext(),
-        applications = _c.applications,
-        applicationsLoading = _c.applicationsLoading,
-        applicationsError = _c.applicationsError,
-        loadApplications = _c.loadApplications,
-        open = _c.isAppSwitcherOpen,
-        platformConsoleUrl = _c.platformConsoleUrl,
-        setOpen = _c.setIsAppSwitcherOpen,
-        selectedAppType = _c.selectedAppSwitcherAppType,
-        setSelectedAppType = _c.setSelectedAppSwitcherAppType;
-      React.useEffect(function () {
-        if ((!applications || applications.length === 0) && open) {
-          loadApplications(accountId);
-        }
-      }, [accountId, open]);
-      if (applicationsError) {
-        console.error('Error loading application list in AppSwitcher', applicationsError);
-      }
-      var closeHandler = React.useCallback(function (event) {
-        setOpen(false);
-        setSelectedAppType(null);
-        onClose && onClose(event);
-      }, [onClose]);
-      var viewProps = includePlatformConsole ? __assign(__assign({}, commonProps), {
-        platformConsoleUrl: platformConsoleUrl
-      }) : __assign({}, commonProps);
-      if (!applicationsLoading && !applicationsError) {
-        return jsxRuntime.jsx(DotAppSwitcherView, __assign({}, viewProps, {
-          open: open,
-          apps: applications,
-          selectedAppType: selectedAppType,
-          onClose: closeHandler
+    var NestedList = function NestedList(_a) {
+      var ariaLabel = _a.ariaLabel,
+        anchorEl = _a.anchorEl,
+        dataTestId = _a["data-testid"],
+        items = _a.items,
+        menuPlacement = _a.menuPlacement,
+        nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
+        onMenuLeave = _a.onMenuLeave,
+        open = _a.open,
+        parentItemIndex = _a.parentItemIndex,
+        type = _a.type;
+      var flyoutItemClasses = useStylesWithRootClass(listItemRootClass, flyoutListItemClassName);
+      var flyoutSpanClasses = useStylesWithRootClass(listItemLinkClassName, flyoutItemLinkClassName);
+      if (type === 'expandable') {
+        return jsxRuntime.jsx(material.Collapse, __assign({
+          in: open,
+          timeout: "auto",
+          unmountOnExit: true
+        }, {
+          children: jsxRuntime.jsx(DotList, {
+            ariaLabel: ariaLabel,
+            className: nestedListClassName,
+            component: "div",
+            "data-testid": dataTestId,
+            disablePadding: true,
+            items: items
+          }, parentItemIndex)
         }), void 0);
       }
-      return null;
-    };
-
-    var rootClassName$O = 'dot-list';
-    var listItemRootClass = 'dot-list-item';
-    var nestedListClassName = 'dot-nested-list';
-    var nestedDrawerClassName = 'dot-nested-drawer';
-    var StyledList = styled__default["default"](material.List).withConfig({
-      displayName: "Liststyles__StyledList",
-      componentId: "wxwqwr-0"
-    })(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "], ["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "])), rootClassName$O, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1));
-    });
-    var templateObject_1$T, templateObject_2$P;
-
-    var getChevronIcon = function getChevronIcon(nestedListType, isOpened) {
-      if (nestedListType !== 'expandable') {
-        return 'chevron-right';
+      if (type === 'menu') {
+        var menuItems = items.map(function (item, index) {
+          var href = item.href,
+            target = item.target,
+            onClick = item.onClick,
+            tooltip = item.tooltip,
+            _a = item.tooltipPlacement,
+            tooltipPlacement = _a === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _a,
+            text = item.text;
+          return {
+            children: jsxRuntime.jsx(DotTooltip, __assign({
+              placement: tooltipPlacement,
+              title: tooltip
+            }, {
+              children: jsxRuntime.jsx(StyledListItem, __assign({
+                className: flyoutItemClasses,
+                component: href && !onClick ? 'a' : null,
+                "data-testid": dataTestId + "-item-" + index,
+                href: href,
+                onClick: onClick,
+                target: target
+              }, {
+                children: jsxRuntime.jsxs("span", __assign({
+                  className: flyoutSpanClasses
+                }, {
+                  children: [item.startIcon, jsxRuntime.jsx(DotTypography, __assign({
+                    variant: "body1"
+                  }, {
+                    children: text
+                  }), void 0)]
+                }), void 0)
+              }), parentItemIndex + "-" + index)
+            }), parentItemIndex + "-" + index + "-tooltip"),
+            classes: '',
+            key: String(index)
+          };
+        });
+        return jsxRuntime.jsx(DotMenu, {
+          anchorEl: anchorEl,
+          ariaLabel: ariaLabel,
+          className: flyoutMenuClassName,
+          "data-testid": dataTestId,
+          id: CreateUUID(),
+          menuItemHeight: "auto",
+          menuItems: menuItems,
+          menuPlacement: menuPlacement,
+          onLeave: onMenuLeave,
+          open: open
+        }, parentItemIndex);
       }
-      if (isOpened) {
-        return 'chevron-up';
+      if (type === 'drawer') {
+        return jsxRuntime.jsx(StyledDotDrawer, __assign({
+          PaperProps: {
+            style: {
+              left: nestedDrawerLeftSpacing + "px"
+            }
+          },
+          anchor: "left",
+          className: nestedDrawerClassName,
+          "data-testid": "nested-drawer",
+          open: open,
+          variant: "persistent"
+        }, {
+          children: jsxRuntime.jsx(DotList, {
+            ariaLabel: ariaLabel,
+            className: nestedListClassName,
+            component: "div",
+            "data-testid": dataTestId,
+            disablePadding: true,
+            items: items,
+            width: '100%'
+          }, parentItemIndex)
+        }), void 0);
       }
-      return 'chevron-down';
     };
 
-    var flyoutListItemClassName = 'dot-flyout-list-item';
-    var flyoutItemLinkClassName = 'dot-flyout-item-link';
-    var listItemLinkClassName = 'dot-list-item-link';
-    var StyledListItem = styled__default["default"](material.ListItem).withConfig({
-      displayName: "ListItemstyles__StyledListItem",
-      componentId: "sc-1fawh8v-0"
-    })(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$S || (templateObject_1$S = __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: ", ";\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: ", ";\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$S, templateObject_2$O;
-
-    var rootClassName$N = 'dot-progress';
-    var StyledCircularProgress = styled__default["default"](material.CircularProgress).withConfig({
-      displayName: "Progressstyles__StyledCircularProgress",
-      componentId: "sc-1gs77rb-0"
-    })(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"], ["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"])), rootClassName$N);
-    var templateObject_1$R;
-
-    var DotProgress = function DotProgress(_a) {
-      var ariaLabel = _a.ariaLabel,
-        _b = _a.color,
-        color = _b === void 0 ? 'secondary' : _b,
-        className = _a.className,
-        dataTestId = _a["data-testid"],
-        _c = _a.size,
-        size = _c === void 0 ? 40 : _c,
-        _d = _a.thickness,
-        thickness = _d === void 0 ? 3.6 : _d,
-        _e = _a.tooltip,
-        tooltip = _e === void 0 ? 'loading data' : _e,
-        value = _a.value,
-        _f = _a.variant,
-        variant = _f === void 0 ? 'indeterminate' : _f;
-      var rootClasses = useStylesWithRootClass(rootClassName$N, className);
-      return jsxRuntime.jsx(DotTooltip, __assign({
-        title: tooltip
+    var DotInputLabel = function DotInputLabel(_a) {
+      var dataTestId = _a["data-testid"],
+        _b = _a.disabled,
+        disabled = _b === void 0 ? false : _b,
+        _c = _a.error,
+        error = _c === void 0 ? false : _c,
+        id = _a.id,
+        label = _a.label,
+        required = _a.required;
+      return jsxRuntime.jsx(StyledInputLabel, __assign({
+        "data-testid": dataTestId,
+        classes: {
+          root: labelClassName
+        },
+        disabled: disabled,
+        error: error,
+        htmlFor: id,
+        required: required,
+        shrink: false,
+        variant: "outlined"
       }, {
-        children: jsxRuntime.jsx(StyledCircularProgress, {
-          "aria-label": ariaLabel,
-          classes: {
-            root: rootClasses
-          },
-          color: color,
-          "data-testid": dataTestId,
-          size: size,
-          thickness: thickness,
-          value: value,
-          variant: variant
-        }, void 0)
+        children: jsxRuntime.jsx(DotTypography, __assign({
+          variant: "subtitle2"
+        }, {
+          children: label
+        }), void 0)
       }), void 0);
     };
 
-    var levelBottom = -1;
-    var levelFirst = 1;
-    var levelSecond = 10;
-    var levelThird = 100;
-    var levelFourth = 1000;
-    var levelTop = 9999;
-
-    var variables = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        levelBottom: levelBottom,
-        levelFirst: levelFirst,
-        levelSecond: levelSecond,
-        levelThird: levelThird,
-        levelFourth: levelFourth,
-        levelTop: levelTop
-    });
-
-    var rootClassName$M = 'dot-popper';
-    var StyledPopper$1 = styled__default["default"](material.Popper).withConfig({
-      displayName: "Popperstyles__StyledPopper",
-      componentId: "sd1h8p-0"
-    })(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "])), rootClassName$M, theme.typography.fontFamily, theme.typography.body1.fontSize);
-    });
-    var templateObject_1$Q, templateObject_2$N;
-
-    var flyoutMenuClassName = 'dot-flyout-menu';
-    var rootClassName$L = 'dot-menu';
-    var getListMaxHeight = function getListMaxHeight(maxHeight) {
-      return isString$1(maxHeight) ? maxHeight : maxHeight + "px";
-    };
-    var StyledPopper = styled__default["default"](material.Popper).withConfig({
-      displayName: "Menustyles__StyledPopper",
-      componentId: "sc-134fmqu-0"
-    })(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "])), rootClassName$M, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$L, rootClassName$M, function (_a) {
-        var $maxHeight = _a.$maxHeight;
-        return $maxHeight !== undefined && "\n          max-height: " + getListMaxHeight($maxHeight) + ";\n        ";
-      }, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.layer.n100, theme.spacing(3));
-    });
-    var templateObject_1$P, templateObject_2$M;
-
-    var MENU_ITEM_HEIGHT_NORMAL = 48;
-    var MENU_ITEM_HEIGHT_DENSE = 36;
-    var DEFAULT_MAX_VISIBLE_ITEMS = 7;
-
-    var rootClassName$K = 'dot-ul';
-    var listItemClassName$1 = 'dot-li';
-    var listItemWithSubmenuClassName = 'dot-li-with-submenu';
-    var StyledMenuList = styled__default["default"](material.MenuList).withConfig({
-      displayName: "MenuListstyles__StyledMenuList",
-      componentId: "yqdwwg-0"
-    })(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "])), rootClassName$K, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5));
-    });
-    var templateObject_1$O, templateObject_2$L;
-
-    var getDefaultItemHeight = function getDefaultItemHeight(isDense) {
-      return isDense ? MENU_ITEM_HEIGHT_DENSE : MENU_ITEM_HEIGHT_NORMAL;
-    };
-    var calculateItemHeight = function calculateItemHeight(isDense, customItemHeight, menuItemHeight) {
-      // Custom item height must NOT be lower than MENU_ITEM_HEIGHT_DENSE value
-      if (customItemHeight && customItemHeight >= MENU_ITEM_HEIGHT_DENSE) {
-        return customItemHeight;
-      }
-      var itemHeightType = typeof menuItemHeight;
-      if (itemHeightType === 'number' || itemHeightType === 'string') {
-        return menuItemHeight;
-      } else {
-        return getDefaultItemHeight(isDense);
-      }
-    };
-    var getNumberOfVisibleItems = function getNumberOfVisibleItems(numberOfItems, maxVisibleItems) {
-      if (maxVisibleItems && maxVisibleItems > 0) {
-        return maxVisibleItems <= numberOfItems ? maxVisibleItems : numberOfItems;
-      }
-      return DEFAULT_MAX_VISIBLE_ITEMS;
-    };
-    var calculateMaxHeight = function calculateMaxHeight(_a) {
-      var isDense = _a.isDense,
-        maxVisibleItems = _a.maxVisibleItems,
-        menuItems = _a.menuItems,
-        menuItemHeight = _a.menuItemHeight;
-      // if menuItemHeight is "auto" set maxHeight as same
-      if (typeof menuItemHeight === 'string') {
-        return menuItemHeight;
-      }
-      // If 'menuItemHeight' is set it will take precedence here
-      var itemHeight = menuItemHeight ? menuItemHeight : getDefaultItemHeight(isDense);
-      var maxHeight = 0;
-      var numberOfVisibleItems = getNumberOfVisibleItems(menuItems.length, maxVisibleItems);
-      var visibleItems = menuItems.slice(0, numberOfVisibleItems);
-      visibleItems.forEach(function (_a) {
-        var height = _a.height;
-        var customItemHeight = height ? height : itemHeight;
-        // + 3 is for bottom margin of menuItem
-        maxHeight += customItemHeight + 3;
-      });
-      return maxHeight;
-    };
-    var checkForSubItems = function checkForSubItems(menuItems) {
-      return menuItems.some(function (menuItem) {
-        return menuItem.items && menuItems.length > 0;
-      });
-    };
-    var checkIfSubmenu = function checkIfSubmenu(anchorElement) {
-      if (!anchorElement) return false;
-      return anchorElement.classList.contains(listItemWithSubmenuClassName);
-    };
-    var checkIfMenuItemSelected = function checkIfMenuItemSelected(key, selectedKey, activeSubmenu) {
-      return selectedKey === key || activeSubmenu === key;
+    var DELAY_MS = 300;
+    var EndAdornment = function EndAdornment(_a) {
+      var endAdornmentTooltip = _a.endAdornmentTooltip,
+        error = _a.error,
+        dataTestId = _a.dataTestId,
+        endIcon = _a.endIcon,
+        success = _a.success,
+        warning = _a.warning;
+      var renderIcon = function renderIcon(iconType) {
+        return jsxRuntime.jsx(DotIcon, {
+          "data-testid": dataTestId && dataTestId + "-" + iconType + "-icon",
+          iconId: iconType + "-solid"
+        }, void 0);
+      };
+      var errorIcon = error && renderIcon('error');
+      var successIcon = success && renderIcon('check');
+      var warningIcon = warning && renderIcon('warning');
+      var endAdornmentIcon = endIcon || errorIcon || warningIcon || successIcon;
+      var styledAdornment = jsxRuntime.jsx(StyledAdornment, __assign({
+        className: adornmentIconClassName + " end",
+        position: "end"
+      }, {
+        children: endAdornmentIcon
+      }), void 0);
+      return endAdornmentTooltip ? jsxRuntime.jsx(DotTooltip, __assign({
+        title: endAdornmentTooltip
+      }, {
+        children: styledAdornment
+      }), void 0) : styledAdornment;
     };
-    var checkForAutoFocus = function checkForAutoFocus(autoFocusItem, isFirstItem) {
-      return !!(autoFocusItem && isFirstItem);
+    var getInitialState = function getInitialState(value) {
+      return {
+        inputValue: value || ''
+      };
     };
-
-    /**
-     * Since this component is used inside 'ClickAwayListener',
-     * it needs to be contained within 'forwardRef' function
-     */
-    var DotMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-      var autoFocusItem = _a.autoFocusItem,
+    var DotInputText = function DotInputText(_a) {
+      var _b = _a.autoComplete,
+        autoComplete = _b === void 0 ? 'off' : _b,
+        autoFocus = _a.autoFocus,
         className = _a.className,
+        defaultValue = _a.defaultValue,
         dataTestId = _a["data-testid"],
-        dense = _a.dense,
+        _c = _a.disabled,
+        disabled = _c === void 0 ? false : _c,
+        _d = _a.error,
+        error = _d === void 0 ? false : _d,
+        endAdornmentTooltip = _a.endAdornmentTooltip,
+        _e = _a.fullWidth,
+        fullWidth = _e === void 0 ? true : _e,
+        hasDebounce = _a.hasDebounce,
+        helperText = _a.helperText,
+        endIcon = _a.endIcon,
         id = _a.id,
-        maxVisibleItems = _a.maxVisibleItems,
-        menuItemHeight = _a.menuItemHeight,
-        menuItems = _a.menuItems,
-        onItemSelect = _a.onItemSelect,
+        inputRef = _a.inputRef,
+        label = _a.label,
+        maxRows = _a.maxRows,
+        minRows = _a.minRows,
+        _f = _a.multiline,
+        multiline = _f === void 0 ? false : _f,
+        name = _a.name,
+        onBlur = _a.onBlur,
+        onChange = _a.onChange,
+        onFocus = _a.onFocus,
         onKeyDown = _a.onKeyDown,
-        onSubMenuCreate = _a.onSubMenuCreate,
-        selectedKey = _a.selectedKey;
-      var rootClasses = useStylesWithRootClass(rootClassName$K, className);
-      var _b = React.useState(null),
-        activeSubmenu = _b[0],
-        setActiveSubmenu = _b[1];
-      var _c = React.useState(null),
-        subItemAnchorEl = _c[0],
-        setSubItemAnchorEl = _c[1];
-      var openSubmenu = function openSubmenu(target, itemKey) {
-        // Set new anchor for submenu and active submenu key
-        // so that new submenu can be opened
-        setSubItemAnchorEl(target);
-        setActiveSubmenu(itemKey);
-      };
-      var closeActiveSubmenu = function closeActiveSubmenu() {
-        // We want to clean active submenu state if it exists.
-        // This will make previous submenu disappear when
-        // hovering to item with no submenu items
-        activeSubmenu && setActiveSubmenu(null);
-      };
-      var getMouseEnterHandler = function getMouseEnterHandler(itemKey, hasSubmenu) {
-        return function (event) {
-          hasSubmenu ? openSubmenu(event.currentTarget, itemKey) : closeActiveSubmenu();
+        onMouseUp = _a.onMouseUp,
+        persistentLabel = _a.persistentLabel,
+        placeholder = _a.placeholder,
+        _g = _a.readOnly,
+        readOnly = _g === void 0 ? false : _g,
+        _h = _a.required,
+        required = _h === void 0 ? false : _h,
+        shrink = _a.shrink,
+        startIcon = _a.startIcon,
+        _j = _a.size,
+        size = _j === void 0 ? 'small' : _j,
+        success = _a.success,
+        _k = _a.type,
+        type = _k === void 0 ? 'text' : _k,
+        value = _a.value,
+        _l = _a.warning,
+        warning = _l === void 0 ? false : _l;
+      var hasError = error && errorClassName;
+      var hasWarning = !error && warning && warningClassName;
+      var hasSuccess = !error && !warning && success && successClassName;
+      var hasEndAdornmentIcon = endIcon || error || hasWarning || hasSuccess;
+      // This state is used only with debounce feature enabled
+      var _m = React.useState(hasDebounce && getInitialState(value)),
+        inputTextState = _m[0],
+        setInputTextState = _m[1];
+      var rootStyles = useStylesWithRootClass(rootClassName$10, hasError, hasWarning, hasSuccess, readOnly ? 'read-only' : '');
+      // Used to control text value from the consumer component
+      // when debounce feature is enabled
+      React.useEffect(function () {
+        if (hasDebounce && value !== inputTextState.inputValue) {
+          setInputTextState(getInitialState(value));
+        }
+      }, [value]);
+      // Improve performance by avoiding callback execution
+      // on each keystroke (if debounce feature is active)
+      React.useEffect(function () {
+        // Do not proceed if debounce feature is turned
+        // off or there is no event defined
+        if (!hasDebounce || !inputTextState || !inputTextState.changeEvent || !onChange) return;
+        var handler = setTimeout(function () {
+          onChange(inputTextState.changeEvent);
+        }, DELAY_MS);
+        return function () {
+          return clearTimeout(handler);
         };
+      }, [inputTextState]);
+      var handleChange = function handleChange(e) {
+        // We need to have control over change event and input value separately
+        // so that we can set initial state via 'value' prop (if needed)
+        hasDebounce ? setInputTextState({
+          changeEvent: e,
+          inputValue: e.target.value
+        }) : onChange === null || onChange === void 0 ? void 0 : onChange(e);
       };
-      return jsxRuntime.jsx(StyledMenuList, __assign({
-        classes: {
-          root: rootClasses
-        },
-        "data-testid": dataTestId,
-        dense: dense,
-        id: id,
-        onKeyDown: onKeyDown,
-        style: {
-          height: calculateMaxHeight({
-            isDense: dense,
-            maxVisibleItems: maxVisibleItems,
-            menuItems: menuItems,
-            menuItemHeight: menuItemHeight
-          })
-        }
-      }, {
-        children: menuItems.map(function (item, index) {
-          var itemAriaLabel = item.ariaLabel,
-            children = item.children,
-            classes = item.classes,
-            disabled = item.disabled,
-            divider = item.divider,
-            height = item.height,
-            subItems = item.items,
-            key = item.key;
-          var itemHeight = calculateItemHeight(dense, height, menuItemHeight);
-          var isSelected = checkIfMenuItemSelected(key, selectedKey, activeSubmenu);
-          var isFirstItem = index === 0;
-          var hasSubmenu = !!subItems;
-          var hasAutoFocus = checkForAutoFocus(autoFocusItem, isFirstItem);
-          var menuItemClasses = useStylesWithRootClass(listItemClassName$1, hasSubmenu ? listItemWithSubmenuClassName : '', classes ? classes : '');
-          var handleClick = function handleClick(event) {
-            // Execute select callback only for items which does not have
-            // submenu defined. If there is no menu or handler - prevent
-            // further propagation of the current event so that click on
-            // items with submenu does not close the menu
-            !hasSubmenu && onItemSelect ? onItemSelect(event, key) : event.stopPropagation();
-          };
-          /**
-           * If there is submenu, right arrow icon will be added
-           * and sub-menu will be rendered
-           */
-          return jsxRuntime.jsxs(material.MenuItem, __assign({
-            autoFocus: hasAutoFocus,
-            "aria-label": itemAriaLabel,
-            className: menuItemClasses,
-            disabled: disabled,
-            disableRipple: hasSubmenu,
-            divider: divider,
-            onClick: handleClick,
-            onMouseEnter: getMouseEnterHandler(key, hasSubmenu),
-            ref: ref,
-            style: {
-              height: itemHeight
-            },
-            selected: isSelected
-          }, {
-            children: [children, hasSubmenu && jsxRuntime.jsx(DotIcon, {
-              "data-testid": "dot-item-arrow-icon",
-              iconId: "arrow-right"
-            }, void 0), hasSubmenu && onSubMenuCreate({
-              anchorElement: subItemAnchorEl,
-              isOpened: isSelected,
-              subMenuId: key,
-              subMenuItems: subItems
-            })]
-          }), key);
-        })
-      }), void 0);
-    });
-
-    var DotMenu = function DotMenu(_a) {
-      var anchorEl = _a.anchorEl,
-        ariaLabel = _a.ariaLabel,
-        className = _a.className,
-        dataTestId = _a["data-testid"],
-        _b = _a.dense,
-        dense = _b === void 0 ? true : _b,
-        disablePortal = _a.disablePortal,
-        id = _a.id,
-        _c = _a.loading,
-        loading = _c === void 0 ? false : _c,
-        _d = _a.maxVisibleItems,
-        maxVisibleItems = _d === void 0 ? DEFAULT_MAX_VISIBLE_ITEMS : _d,
-        menuItemHeight = _a.menuItemHeight,
-        _e = _a.menuItems,
-        menuItems = _e === void 0 ? [] : _e,
-        _f = _a.menuPlacement,
-        menuPlacement = _f === void 0 ? 'bottom' : _f,
-        onLeave = _a.onLeave,
-        onSelect = _a.onSelect,
-        _g = _a.open,
-        open = _g === void 0 ? false : _g,
-        selectedKey = _a.selectedKey;
-      var rootClasses = useStylesWithRootClass(rootClassName$L, className, loading ? 'loading' : '');
-      var isSubmenu = checkIfSubmenu(anchorEl);
-      var hasSubItems = checkForSubItems(menuItems);
-      // Timeout object is customizable when Menu component is either submenu
-      // (it is opened within parent menu) or it contains at least one item which
-      // has sub-items. This is done because when multi-level menu is closing it
-      // will first close the parent and only then child menus - which looks
-      // a bit weird - so here I'm giving it exit value of 0 so that it looks like
-      // they all close at the same time. For "normal" menus, timeout is unnecessary.
-      var timeout = isSubmenu || hasSubItems ? {
-        exit: 0,
-        enter: 300
-      } : undefined;
-      var handleSelect = function handleSelect(event, itemKey) {
-        onLeave && onLeave(event);
-        onSelect && onSelect(event, id, itemKey);
-      };
-      var handleListKeyDown = function handleListKeyDown(event) {
-        if (onLeave && event.key === 'Tab') {
-          event.preventDefault();
-          onLeave(event);
-        }
+      var inputTextValue = hasDebounce ? inputTextState.inputValue : value;
+      // Don't use default value when debounce feature is enabled because
+      // in that case component is controlled
+      var defaultInputValue = hasDebounce ? undefined : defaultValue;
+      var startAdornmentIcon = function startAdornmentIcon() {
+        if (!startIcon) return null;
+        return jsxRuntime.jsx(StyledAdornment, __assign({
+          className: adornmentIconClassName + " start",
+          position: "start"
+        }, {
+          children: startIcon
+        }), void 0);
       };
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      var handleClickAway = function handleClickAway(event) {
-        if (onLeave && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
-          onLeave(event);
-        }
+      var endAdornmentIcon = function endAdornmentIcon() {
+        if (!hasEndAdornmentIcon) return null;
+        return jsxRuntime.jsx(EndAdornment, __assign({}, {
+          endAdornmentTooltip: endAdornmentTooltip,
+          error: error,
+          dataTestId: dataTestId,
+          endIcon: endIcon,
+          success: success,
+          warning: warning
+        }), void 0);
       };
-      return jsxRuntime.jsx(StyledPopper, __assign({
-        anchorEl: anchorEl,
-        "aria-label": ariaLabel,
-        className: rootClasses,
-        "data-testid": dataTestId,
-        disablePortal: disablePortal,
-        open: open,
-        placement: menuPlacement,
-        role: undefined,
-        transition: true
+      var wrapperClassName = useStylesWithRootClass(fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
+      return jsxRuntime.jsxs(StyledTextFieldContainer, __assign({
+        className: wrapperClassName
       }, {
-        children: function (_a) {
-          var TransitionProps = _a.TransitionProps,
-            placement = _a.placement;
-          return jsxRuntime.jsx(material.Fade, __assign({}, TransitionProps, {
-            style: {
-              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
-            },
-            timeout: timeout
-          }, {
-            children: jsxRuntime.jsx(material.Paper, {
-              children: jsxRuntime.jsx(material.ClickAwayListener, __assign({
-                onClickAway: handleClickAway
-              }, {
-                children: loading ? jsxRuntime.jsx(DotProgress, {
-                  "data-testid": "loading-indicator",
-                  tooltip: "Loading Data...",
-                  value: 20
-                }, void 0) : jsxRuntime.jsx(DotMenuList, {
-                  autoFocusItem: open,
-                  "data-testid": dataTestId + "-menu",
-                  dense: dense,
-                  id: id,
-                  maxVisibleItems: maxVisibleItems,
-                  menuItemHeight: menuItemHeight,
-                  menuItems: menuItems,
-                  onItemSelect: handleSelect,
-                  onKeyDown: handleListKeyDown,
-                  onSubMenuCreate: function (_a) {
-                    var anchorElement = _a.anchorElement,
-                      isOpened = _a.isOpened,
-                      subMenuId = _a.subMenuId,
-                      subMenuItems = _a.subMenuItems;
-                    return jsxRuntime.jsx(DotMenu, {
-                      anchorEl: anchorElement,
-                      menuPlacement: "right-start",
-                      id: subMenuId,
-                      menuItems: subMenuItems,
-                      open: isOpened,
-                      onLeave: onLeave,
-                      onSelect: onSelect,
-                      selectedKey: selectedKey
-                    }, void 0);
-                  },
-                  selectedKey: selectedKey
-                }, void 0)
-              }), void 0)
-            }, void 0)
-          }), void 0);
-        }
+        children: [persistentLabel && jsxRuntime.jsx(DotInputLabel, __assign({}, {
+          disabled: disabled,
+          error: error,
+          id: id,
+          label: label,
+          required: required
+        }), void 0), jsxRuntime.jsx(StyledTextField, {
+          InputProps: {
+            startAdornment: startAdornmentIcon(),
+            endAdornment: endAdornmentIcon()
+          },
+          "aria-label": name,
+          autoComplete: autoComplete,
+          autoFocus: autoFocus,
+          classes: {
+            root: rootStyles
+          },
+          defaultValue: defaultInputValue,
+          disabled: disabled,
+          error: error,
+          focused: readOnly ? false : undefined,
+          fullWidth: fullWidth,
+          helperText: helperText,
+          id: id,
+          InputLabelProps: {
+            shrink: type === 'date' ? true : shrink
+          },
+          inputProps: {
+            'data-testid': dataTestId,
+            className: 'dot-input',
+            readOnly: readOnly
+          },
+          inputRef: inputRef,
+          label: persistentLabel ? null : label,
+          multiline: multiline,
+          name: name,
+          onBlur: onBlur,
+          onChange: hasDebounce ? handleChange : onChange,
+          onFocus: onFocus,
+          onKeyDown: onKeyDown,
+          onMouseUp: onMouseUp,
+          placeholder: placeholder,
+          required: required,
+          minRows: multiline ? minRows : null,
+          maxRows: multiline ? maxRows : null,
+          size: size,
+          type: type,
+          value: inputTextValue,
+          variant: "outlined"
+        }, void 0)]
       }), void 0);
     };
 
-    var CreateUUID = function CreateUUID() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = Math.random() * 16 | 0,
-          v = c === 'x' ? r : r & 0x3 | 0x8;
-        return v.toString(16);
-      });
-    };
-
-    var fadeIn = styled.keyframes(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-    var StyledDotDrawer = styled__default["default"](DotDrawer).withConfig({
-      displayName: "NestedListstyles__StyledDotDrawer",
-      componentId: "sc-1wwoqos-0"
-    })(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var open = _a.open;
-      return styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "])), nestedDrawerClassName, open ? levelFirst : levelBottom, open && styled.css(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "], ["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "])), fadeIn));
+    var rootClassName$M = 'dot-search-input';
+    var StyledSearchInput = styled__default["default"].span.withConfig({
+      displayName: "SearchInputstyles__StyledSearchInput",
+      componentId: "qlwzku-0"
+    })(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
+      return styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    &.", " {\n    }\n  "], ["\n    &.", " {\n    }\n  "])), rootClassName$M);
     });
-    var templateObject_1$N, templateObject_2$K, templateObject_3$8, templateObject_4$6;
+    var templateObject_1$P, templateObject_2$M;
 
-    var DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
-    var DotListDivider = function DotListDivider(_a) {
-      var item = _a.item,
-        index = _a.index;
-      if (item.text) {
-        return jsxRuntime.jsx(material.ListSubheader, __assign({
-          disableSticky: true
-        }, {
-          children: jsxRuntime.jsx(DotTypography, __assign({
-            variant: "overline"
-          }, {
-            children: item.text
-          }), void 0)
-        }), void 0);
-      }
-      return jsxRuntime.jsx(material.Divider, {
-        "aria-hidden": true,
-        "data-testid": "divider-" + index
-      }, void 0);
-    };
-    var DotList = function DotList(_a) {
-      var ariaLabel = _a.ariaLabel,
-        children = _a.children,
+    function SearchInput(_a) {
+      var dataTestId = _a["data-testid"],
+        _b = _a.autoFocus,
+        autoFocus = _b === void 0 ? true : _b,
         className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'ul' : _b,
-        dataTestId = _a["data-testid"],
-        _c = _a.dense,
-        dense = _c === void 0 ? false : _c,
-        _d = _a.disablePadding,
-        disablePadding = _d === void 0 ? false : _d,
-        _e = _a.items,
-        items = _e === void 0 ? [] : _e,
-        _f = _a.menuPlacement,
-        menuPlacement = _f === void 0 ? 'right-start' : _f,
-        _g = _a.nestedDrawerLeftSpacing,
-        nestedDrawerLeftSpacing = _g === void 0 ? 240 : _g,
-        _h = _a.nestedListType,
-        nestedListType = _h === void 0 ? 'expandable' : _h,
-        _j = _a.width,
-        width = _j === void 0 ? 240 : _j;
-      var rootClasses = useStylesWithRootClass(rootClassName$O, className);
-      var listWidth = typeof width === 'number' ? width + "px" : width;
-      var listRef = React.useRef();
-      var _k = React.useState(null),
-        listItemIndex = _k[0],
-        setListItemIndex = _k[1];
-      var updateSelectedListItem = function updateSelectedListItem(currentIndex) {
-        currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
-      };
-      return jsxRuntime.jsxs(StyledList, __assign({
-        "aria-label": ariaLabel,
-        classes: {
-          root: rootClasses
-        },
-        component: component,
-        "data-testid": dataTestId,
-        dense: dense,
-        disablePadding: disablePadding,
-        ref: listRef,
-        style: {
-          width: listWidth
+        _c = _a.disabled,
+        disabled = _c === void 0 ? false : _c,
+        onChange = _a.onChange,
+        onClear = _a.onClear,
+        _d = _a.placeholder,
+        placeholder = _d === void 0 ? 'Search' : _d,
+        _e = _a.tooltip,
+        tooltip = _e === void 0 ? null : _e,
+        value = _a.value;
+      var rootClasses = useStylesWithRootClass(rootClassName$M, className);
+      var _f = React.useState(value),
+        searchText = _f[0],
+        setSearchText = _f[1];
+      var previousSearchText = '';
+      var handleChange = React.useCallback(function (event) {
+        previousSearchText = event.target.value;
+        setSearchText(event.target.value);
+        // Timeout is to give user a chance to finish typing before refreshing data.
+        setTimeout(function () {
+          if (onChange && event.target.value === previousSearchText) {
+            onChange(event.target.value);
+          }
+        }, 500);
+      }, [onChange]);
+      var handleClear = React.useCallback(function () {
+        setSearchText('');
+        onClear && onClear();
+      }, [onClear]);
+      var searchIcon = jsxRuntime.jsx(DotIcon, {
+        className: "search-icon",
+        iconId: "search"
+      }, void 0);
+      var clearSearchIcon = jsxRuntime.jsx(DotIconButton, {
+        iconId: "close",
+        onClick: handleClear,
+        size: "small",
+        tooltip: "Clear search text"
+      }, void 0);
+      return jsxRuntime.jsx(StyledSearchInput, __assign({
+        className: rootClasses
+      }, {
+        children: jsxRuntime.jsx(DotTooltip, __assign({
+          placement: "bottom",
+          title: tooltip
+        }, {
+          children: jsxRuntime.jsx(DotInputText, {
+            "data-testid": dataTestId,
+            autoFocus: autoFocus,
+            className: "search-text",
+            disabled: disabled,
+            endIcon: (searchText === null || searchText === void 0 ? void 0 : searchText.length) > 0 ? clearSearchIcon : null,
+            id: "app-instance-search-text",
+            name: "app-instance-search-text",
+            onChange: handleChange,
+            placeholder: placeholder,
+            startIcon: searchIcon,
+            value: searchText
+          }, void 0)
+        }), void 0)
+      }), void 0);
+    }
+
+    var rootClassName$L = 'dot-copy-button';
+    var StyledCopyButton = styled__default["default"].span.withConfig({
+      displayName: "CopyButtonstyles__StyledCopyButton",
+      componentId: "sc-18ff0u-0"
+    })(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    &.", " {\n      .copied-to-clipboard {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .copied-to-clipboard {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$L, theme.palette.success[400]);
+    });
+    var templateObject_1$O, templateObject_2$L;
+
+    var DotCopyButton = function DotCopyButton(_a) {
+      var _b = _a.ariaLabel,
+        ariaLabel = _b === void 0 ? 'Copy to clipboard' : _b,
+        _c = _a.copiedTooltip,
+        copiedTooltip = _c === void 0 ? 'Copied!' : _c,
+        _d = _a.copyTooltip,
+        copyTooltip = _d === void 0 ? 'Copy to clipboard' : _d,
+        _e = _a["data-testid"],
+        dataTestId = _e === void 0 ? 'dot-copy-button' : _e,
+        value = _a.value;
+      var _f = React.useState(false),
+        showCopiedIcon = _f[0],
+        setShowCopiedIcon = _f[1];
+      var copyToClipboard = function copyToClipboard() {
+        // The check for navigator.clipboard.writeText is because this function is
+        // only supported in secure contexts (https). This will always be the case in
+        // production but not when running locally.
+        if (!navigator.clipboard || !navigator.clipboard.writeText) {
+          console.warn('Copy to clipboard is only supported in secure context (https)', value);
+        } else {
+          navigator.clipboard.writeText(value);
         }
+      };
+      var copy = function copy() {
+        copyToClipboard();
+        setShowCopiedIcon(true);
+        setTimeout(function () {
+          setShowCopiedIcon(false);
+        }, 3000);
+        return false;
+      };
+      return jsxRuntime.jsxs(StyledCopyButton, __assign({
+        className: rootClassName$L,
+        "data-testid": dataTestId
       }, {
-        children: [items.map(function (item, index) {
-          var handleListItemClick = function handleListItemClick(e) {
-            var _a;
-            updateSelectedListItem(index);
-            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-          };
-          var handleMenuLeave = function handleMenuLeave(event) {
-            var _a, _b;
-            // Remove index only if clicked element is not found within the list
-            if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-              setListItemIndex(null);
-              (_b = item.onMenuLeave) === null || _b === void 0 ? void 0 : _b.call(item, event);
-            }
-          };
-          if (item.child) {
-            return jsxRuntime.jsx(React.Fragment, {
-              children: item.child
-            }, "item-child-" + index);
-          }
-          if (item.divider) {
-            return jsxRuntime.jsx(DotListDivider, {
-              index: index,
-              item: item
-            }, "divider-" + index);
-          }
-          return jsxRuntime.jsx(DotListItem, {
-            className: item.className,
-            component: item.component,
-            "data-testid": dataTestId + "-item-" + index,
-            endIcon: item.endIcon,
-            href: item.href,
-            isOpened: listItemIndex === index,
-            items: item.items,
-            menuPlacement: menuPlacement,
-            nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-            nestedListType: nestedListType,
-            onClick: item.href && !item.onClick ? null : handleListItemClick,
-            onMenuLeave: handleMenuLeave,
-            primaryText: item.primaryText,
-            secondaryText: item.secondaryText,
-            selected: item.selected,
-            startIcon: item.startIcon,
-            target: item.target,
-            text: item.text,
-            tooltip: item.tooltip,
-            tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
-          }, index);
-        }), children]
+        children: [!showCopiedIcon && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: ariaLabel,
+          "data-testid": dataTestId + "-button",
+          iconId: "duplicate",
+          onClick: copy,
+          size: "small",
+          tooltip: copyTooltip
+        }, void 0), showCopiedIcon && jsxRuntime.jsx(DotIcon, {
+          className: "copied-to-clipboard",
+          "data-testid": dataTestId + "-icon",
+          fontSize: "small",
+          iconId: "check-solid",
+          tooltip: copiedTooltip
+        }, void 0)]
       }), void 0);
     };
-    var DotListItem = function DotListItem(_a) {
-      var ariaLabel = _a.ariaLabel,
-        className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'li' : _b,
-        dataTestId = _a["data-testid"],
-        _c = _a.divider,
-        divider = _c === void 0 ? false : _c,
-        endIcon = _a.endIcon,
-        href = _a.href,
-        isOpened = _a.isOpened,
-        onClick = _a.onClick,
-        onMenuLeave = _a.onMenuLeave,
-        _d = _a.items,
-        items = _d === void 0 ? [] : _d,
-        menuPlacement = _a.menuPlacement,
-        nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
-        nestedListType = _a.nestedListType,
-        primaryText = _a.primaryText,
-        secondaryText = _a.secondaryText,
-        selected = _a.selected,
-        startIcon = _a.startIcon,
-        target = _a.target,
-        text = _a.text,
-        tooltip = _a.tooltip,
-        _e = _a.tooltipPlacement,
-        tooltipPlacement = _e === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _e;
-      var hasChildren = items.length > 0;
-      var isFlyout = nestedListType === 'menu' && hasChildren;
-      var _f = React.useState(null),
-        anchorEl = _f[0],
-        setAnchorEl = _f[1];
-      var showEndIcon = endIcon || hasChildren;
-      var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
-      var toggleOpen = function toggleOpen(event) {
-        return setAnchorEl(event.currentTarget);
-      };
-      var handleClick = function handleClick(event) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        toggleOpen(event);
+
+    var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M12.4332 16.3533V14.8333H11.5665V16.3533L10.7432 15.8933L9.85651 16.4033L11.9998 17.6366L14.1932 16.3733L13.3332 15.8766L12.4332 16.3533Z' fill='white'/%3e%3cpath d='M7.99328 10.1866L9.24661 10.9132L9.67995 10.1399L8.36995 9.4299L9.09328 9.01657V8.03323L7.11328 9.18323L7.11661 11.5532L7.99328 11.0566V10.1866Z' fill='white'/%3e%3cpath d='M14.6934 10.9133L15.9934 10.1733L15.99 11.0566L16.8867 11.5599V9.1766L14.81 7.98993L14.7767 8.9566L15.6167 9.45326L14.29 10.0799L14.6934 10.9133Z' fill='white'/%3e%3cpath d='M16.8801 12.5435L16.0001 12.0402V12.0935V13.7068L12.4167 11.6868V7.61015L13.9667 8.49015V7.51682L12.0001 6.35349L9.95006 7.52348V8.52348L11.4967 7.63015V11.6868L8.00006 13.8168V12.0202L7.12006 12.5235V14.8202L8.96672 15.8502L9.86672 15.3335L8.40006 14.5268L12.0001 12.4368L15.5567 14.5035L14.1301 15.3268L15.0567 15.8701L16.8701 14.8268L16.8801 12.5435Z' fill='white'/%3e%3c/svg%3e";
+
+    var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M14.1867 11.2667L12.1634 10.0833L10.1367 11.2667V13.62L12.1634 14.7867L14.1867 13.62V11.2667Z' fill='white'/%3e%3cpath d='M8.43666 12.0001L7.47333 11.1501V15.1667L10.41 16.8367V15.7034L8.43666 14.5401V12.0001Z' fill='white'/%3e%3cpath d='M15.8965 12V14.5833L13.9632 15.7033V16.9367L16.8532 15.1533V11.0967L15.8965 12Z' fill='white'/%3e%3cpath d='M12.1565 8.13333L14.7165 9.61333L15.4165 8.89L12.1565 7L8.87988 8.90667L9.57988 9.63333L12.1565 8.13333Z' fill='white'/%3e%3c/svg%3e";
+
+    var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%2333D389'/%3e%3cpath d='M17.0033 7.62322H16.4567C16.3925 7.62863 16.3324 7.65679 16.2871 7.70264C16.2419 7.74848 16.2146 7.80898 16.21 7.87322V9.14322C15.7432 8.43248 15.1064 7.84955 14.3572 7.44732C13.6081 7.04509 12.7703 6.8363 11.92 6.83989C11.0845 6.84475 10.2627 7.05243 9.52515 7.44508C8.78763 7.83772 8.15649 8.40359 7.68598 9.09405C7.21547 9.7845 6.91966 10.5789 6.82398 11.4089C6.72831 12.2389 6.83562 13.0798 7.13669 13.8592C7.43777 14.6386 7.92361 15.3332 8.55245 15.8834C9.18128 16.4335 9.93431 16.8227 10.7468 17.0176C11.5593 17.2124 12.4069 17.207 13.2169 17.0019C14.0269 16.7967 14.7749 16.398 15.3967 15.8399C15.4257 15.8182 15.4492 15.79 15.4654 15.7576C15.4816 15.7252 15.49 15.6894 15.49 15.6532C15.49 15.617 15.4816 15.5813 15.4654 15.5489C15.4492 15.5165 15.4257 15.4883 15.3967 15.4666L14.9833 15.0532C14.9369 15.0135 14.8778 14.9917 14.8167 14.9917C14.7556 14.9917 14.6965 15.0135 14.65 15.0532C13.9076 15.7352 12.9312 16.1052 11.9233 16.0866C11.1892 16.087 10.4684 15.8897 9.83687 15.5154C9.20531 15.141 8.68627 14.6034 8.33429 13.9591C7.98231 13.3148 7.81039 12.5876 7.83662 11.8539C7.86284 11.1202 8.08624 10.4071 8.48332 9.78959C8.8804 9.17207 9.4365 8.67292 10.0932 8.34461C10.7499 8.0163 11.4828 7.87095 12.2151 7.92384C12.9474 7.97674 13.6519 8.22592 14.2545 8.6452C14.8572 9.06448 15.3358 9.63837 15.64 10.3066H14.1467C14.0828 10.3112 14.0227 10.3387 13.9774 10.384C13.9321 10.4293 13.9046 10.4893 13.9 10.5532V11.0466C13.9046 11.1104 13.9321 11.1705 13.9774 11.2158C14.0227 11.2611 14.0828 11.2886 14.1467 11.2932H17C17.0639 11.2886 17.124 11.2611 17.1693 11.2158C17.2146 11.1705 17.242 11.1104 17.2467 11.0466V7.87322C17.2422 7.8095 17.2154 7.74942 17.1708 7.70364C17.1263 7.65787 17.0669 7.62938 17.0033 7.62322Z' fill='white'/%3e%3cpath d='M12.1232 9.39987C12.1667 9.39747 12.2077 9.37914 12.2384 9.34839C12.2692 9.31764 12.2875 9.27662 12.2899 9.2332C12.2899 9.2332 12.3399 8.8332 12.3399 8.69987C12.3399 8.56653 12.2499 8.4932 12.1666 8.48987C11.5045 8.45232 10.8457 8.60791 10.2703 8.93771C9.69497 9.26752 9.22779 9.75734 8.92557 10.3477C8.62335 10.938 8.4991 11.6034 8.56792 12.263C8.63675 12.9226 8.89568 13.548 9.31325 14.0632C9.83849 14.7239 10.5905 15.1658 11.4232 15.3032C11.5166 15.3032 11.5999 15.2632 11.6299 15.1365C11.6299 15.1365 11.6999 14.8032 11.7132 14.6832C11.7233 14.639 11.7157 14.5927 11.692 14.554C11.6684 14.5154 11.6305 14.4876 11.5866 14.4765C11.225 14.4227 10.8806 14.2869 10.5795 14.0795C10.2785 13.8721 10.029 13.5986 9.84992 13.2799C9.64046 12.9274 9.51393 12.5318 9.47992 12.1232C9.44986 11.7648 9.49697 11.4042 9.61806 11.0655C9.73915 10.7269 9.93142 10.4181 10.1819 10.1601C10.4324 9.90199 10.7353 9.70061 11.0702 9.56947C11.405 9.43834 11.7641 9.38051 12.1232 9.39987Z' fill='white'/%3e%3cpath d='M13.9433 13.1568C13.96 13.1389 13.9724 13.1175 13.9796 13.0942C13.9868 13.0708 13.9885 13.0461 13.9846 13.0219C13.9808 12.9978 13.9714 12.9749 13.9573 12.9549C13.9432 12.9349 13.9247 12.9185 13.9033 12.9068L13.6133 12.7001C13.5739 12.6762 13.5272 12.6674 13.4818 12.6754C13.4364 12.6833 13.3955 12.7075 13.3666 12.7434C13.2321 12.9033 13.0642 13.0318 12.8747 13.12C12.6853 13.2082 12.4789 13.2538 12.2699 13.2538C12.061 13.2538 11.8546 13.2082 11.6651 13.12C11.4757 13.0318 11.3078 12.9033 11.1733 12.7434C11.1277 12.6913 11.0864 12.6356 11.0499 12.5768C10.9268 12.3776 10.8582 12.1495 10.8512 11.9155C10.8442 11.6814 10.8989 11.4496 11.0099 11.2434C11.0314 11.2102 11.0389 11.1699 11.0308 11.1312C11.0227 11.0925 10.9996 11.0585 10.9666 11.0368L10.6333 10.7901C10.5891 10.7715 10.5396 10.7697 10.4942 10.7851C10.4487 10.8004 10.4105 10.8319 10.3866 10.8734C10.2376 11.1465 10.153 11.45 10.1391 11.7608C10.1253 12.0716 10.1825 12.3815 10.3066 12.6668C10.4127 12.938 10.5831 13.1794 10.8033 13.3701C11.1902 13.7461 11.7104 13.9534 12.2499 13.9468C12.5743 13.9565 12.8964 13.8902 13.1905 13.753C13.4845 13.6158 13.7424 13.4116 13.9433 13.1568Z' fill='white'/%3e%3c/svg%3e";
+
+    var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M17.6865 10.0334C17.3062 9.49067 16.7772 9.06934 16.1632 8.82008C15.6426 8.61932 15.0801 8.55138 14.5267 8.62237C13.9733 8.69337 13.4462 8.90108 12.9932 9.22674C12.4991 9.62868 12.0519 10.0849 11.6598 10.5867L11.4232 10.8534L13.0198 11.5434L13.1498 11.4067C13.4002 11.1158 13.6697 10.8419 13.9565 10.5867C14.1891 10.4177 14.4599 10.3085 14.7448 10.269C15.0297 10.2294 15.3199 10.2607 15.5898 10.3601C15.916 10.4798 16.1929 10.7051 16.3765 11.0001C16.5305 11.2108 16.6383 11.4516 16.6932 11.7067C16.7448 11.9619 16.7448 12.2249 16.6932 12.4801C16.6319 12.8145 16.4783 13.125 16.2498 13.3767C16.0471 13.5809 15.7972 13.7319 15.5221 13.8162C15.2471 13.9005 14.9554 13.9156 14.6732 13.8601C14.318 13.7558 13.9714 13.6243 13.6365 13.4667L13.4598 13.3967L12.3032 14.6934L12.6365 14.8367C13.196 15.1144 13.7809 15.3376 14.3832 15.5034C14.841 15.5831 15.3102 15.5706 15.7632 15.4667C16.4116 15.3301 17.0012 14.9945 17.4498 14.5067C17.907 14.0252 18.2099 13.4182 18.3198 12.7634C18.4116 12.2979 18.4116 11.8189 18.3198 11.3534C18.186 10.8803 17.9717 10.4338 17.6865 10.0334Z' fill='white'/%3e%3cpath d='M12.8401 13.0499L11.2468 12.3599L11.1168 12.4966C10.8669 12.7942 10.5962 13.0738 10.3068 13.3332C10.0741 13.5023 9.80337 13.6115 9.51849 13.651C9.2336 13.6905 8.94336 13.6593 8.67345 13.5599C8.35219 13.4397 8.07852 13.2187 7.89345 12.9299C7.74251 12.7191 7.63591 12.4798 7.58012 12.2266C7.51653 11.9342 7.52262 11.6311 7.5979 11.3415C7.67318 11.052 7.81553 10.7842 8.01345 10.5599C8.2156 10.3551 8.46564 10.2039 8.74095 10.1201C9.01626 10.0363 9.30813 10.0225 9.59012 10.0799C9.94807 10.1781 10.2971 10.3063 10.6335 10.4632L10.8101 10.5299L11.9668 9.23324L11.6735 9.11324C11.1141 8.8326 10.5278 8.60924 9.92345 8.44657C9.37154 8.32869 8.79848 8.35611 8.26035 8.52614C7.72222 8.69617 7.23744 9.00299 6.85345 9.41657C6.38782 9.89208 6.08347 10.5019 5.98345 11.1599C5.88532 11.6248 5.88532 12.105 5.98345 12.5699C6.08588 13.0347 6.28211 13.4736 6.56012 13.8599C6.92983 14.4125 7.46217 14.8365 8.08345 15.0732C8.69864 15.3134 9.37049 15.369 10.0168 15.2332C10.4725 15.1299 10.9023 14.9348 11.2801 14.6599C11.7741 14.258 12.2214 13.8018 12.6135 13.2999L12.8401 13.0499Z' fill='white'/%3e%3c/svg%3e";
+
+    var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23F7B731'/%3e%3cpath d='M17.0168 10.4836C16.8598 10.4819 16.704 10.5111 16.5583 10.5697C16.4126 10.6282 16.2799 10.715 16.1679 10.8249C16.0558 10.9348 15.9665 11.0658 15.9051 11.2103C15.8437 11.3548 15.8114 11.51 15.8101 11.667C15.8125 11.8887 15.8759 12.1056 15.9934 12.2936L15.3268 13.0036C15.1062 12.8766 14.8516 12.8214 14.5982 12.8459C14.3449 12.8704 14.1055 12.9733 13.9134 13.1403L13.2168 12.667C13.3204 12.3753 13.3514 12.0627 13.307 11.7564C13.2626 11.45 13.1441 11.1591 12.9619 10.9089C12.7796 10.6587 12.5391 10.4567 12.2611 10.3204C11.9832 10.1842 11.6762 10.1178 11.3668 10.127C10.9257 10.1237 10.4963 10.268 10.1468 10.537L9.2801 9.74364C9.38078 9.56935 9.43368 9.37158 9.43343 9.1703C9.43084 9.01345 9.39725 8.85866 9.33461 8.71484C9.27197 8.57101 9.18151 8.44099 9.06844 8.33225C8.95537 8.22352 8.82191 8.13821 8.67575 8.08124C8.52958 8.02427 8.3736 7.99677 8.21677 8.0003C7.89915 8.00103 7.59426 8.12525 7.36658 8.34671C7.13891 8.56817 7.00628 8.86949 6.99677 9.18697C6.99848 9.34467 7.03153 9.50046 7.09399 9.64528C7.15645 9.7901 7.24707 9.92106 7.36059 10.0305C7.4741 10.14 7.60825 10.2259 7.75524 10.283C7.90222 10.3402 8.0591 10.3676 8.21677 10.3636C8.43906 10.3609 8.65657 10.2987 8.84677 10.1836L9.71343 10.977C9.49991 11.2949 9.3884 11.6704 9.39376 12.0533C9.39912 12.4363 9.5211 12.8085 9.74343 13.1203L9.07677 13.8303C8.87595 13.7162 8.64759 13.6597 8.41677 13.667C8.18607 13.6729 7.96224 13.7467 7.77327 13.8791C7.5843 14.0116 7.43859 14.1968 7.35437 14.4117C7.27015 14.6265 7.25115 14.8615 7.29975 15.087C7.34836 15.3126 7.46241 15.5189 7.62763 15.68C7.79286 15.8411 8.00192 15.9499 8.22867 15.9928C8.45542 16.0357 8.68978 16.0108 8.90244 15.9212C9.11509 15.8315 9.2966 15.6812 9.42425 15.4889C9.5519 15.2967 9.62002 15.0711 9.6201 14.8403C9.61839 14.6452 9.57041 14.4533 9.4801 14.2803L10.1468 13.5703C10.5613 13.8772 11.0792 14.0102 11.5902 13.9411C12.1013 13.872 12.5653 13.6062 12.8834 13.2003L13.5501 13.637C13.5048 13.7597 13.4811 13.8894 13.4801 14.0203C13.4963 14.3289 13.6304 14.6196 13.8546 14.8323C14.0788 15.045 14.376 15.1636 14.6851 15.1636C14.9942 15.1636 15.2914 15.045 15.5156 14.8323C15.7398 14.6196 15.8739 14.3289 15.8901 14.0203C15.8923 13.8081 15.8333 13.5998 15.7201 13.4203L16.3868 12.7103C16.5613 12.81 16.7591 12.8617 16.9601 12.8603C17.1212 12.8706 17.2827 12.8481 17.4348 12.794C17.5869 12.74 17.7264 12.6555 17.8448 12.5458C17.9633 12.4361 18.0581 12.3035 18.1237 12.156C18.1893 12.0085 18.2241 11.8492 18.2261 11.6878C18.2282 11.5264 18.1974 11.3662 18.1356 11.2171C18.0737 11.068 17.9822 10.933 17.8666 10.8203C17.751 10.7077 17.6137 10.6198 17.463 10.5619C17.3123 10.504 17.1514 10.4774 16.9901 10.4836H17.0168ZM11.3501 13.2436C11.1161 13.2377 10.8891 13.163 10.6973 13.0287C10.5056 12.8944 10.3578 12.7065 10.2723 12.4886C10.1868 12.2707 10.1675 12.0325 10.2167 11.8036C10.266 11.5748 10.3816 11.3656 10.5492 11.2021C10.7167 11.0387 10.9288 10.9283 11.1588 10.8848C11.3887 10.8412 11.6264 10.8665 11.8422 10.9574C12.0579 11.0483 12.242 11.2007 12.3714 11.3957C12.5009 11.5907 12.57 11.8196 12.5701 12.0536C12.5657 12.3719 12.4357 12.6756 12.2085 12.8985C11.9812 13.1214 11.6751 13.2454 11.3568 13.2436H11.3501Z' fill='white'/%3e%3c/svg%3e";
+
+    var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23205AB7'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0859 8.30868C16.4108 8.42839 16.6831 8.6593 16.8542 8.96074L16.8628 8.97583L16.8705 8.99134C17.0174 9.28464 17.0775 9.61353 17.0441 9.93936C17.0123 11.03 16.8132 12.1093 16.4535 13.1395L16.4528 13.1415C16.1368 14.0377 15.4456 15.1335 14.6589 16.0108C14.2622 16.4533 13.8228 16.8611 13.3705 17.1668C12.9284 17.4656 12.4155 17.7067 11.8835 17.7262L11.8597 17.7271L11.8358 17.7262C11.291 17.7072 10.7708 17.4701 10.3204 17.1682C9.86244 16.8612 9.42376 16.4516 9.03057 16.0079C8.24999 15.1271 7.57941 14.0321 7.26533 13.1415L7.2645 13.1391C6.90532 12.1083 6.70674 11.0285 6.67566 9.93751C6.64229 9.61177 6.70236 9.28297 6.84922 8.98974L6.85684 8.97453L6.86522 8.95974C7.03585 8.65846 7.30747 8.42744 7.63179 8.30728L11.3874 6.76891C11.4429 6.74689 11.4996 6.7281 11.5571 6.71254C11.7538 6.6514 11.9644 6.6514 12.161 6.71254C12.2186 6.7281 12.2753 6.74693 12.3307 6.76895L12.3374 6.77159L16.0859 8.30868ZM11.9735 7.35255C11.8994 7.32695 11.8188 7.32695 11.7447 7.35255C11.7069 7.36213 11.6698 7.37415 11.6335 7.38855L7.87245 8.92913C7.69157 8.99369 7.53996 9.12117 7.44531 9.28828C7.35196 9.47467 7.31578 9.6845 7.34132 9.89139C7.36791 10.9234 7.55437 11.9449 7.89404 12.9198C8.45396 14.5075 10.3737 17.008 11.8591 17.06C13.2749 17.008 15.2642 14.5075 15.8241 12.9198C16.1642 11.9455 16.3512 10.9245 16.3784 9.89299C16.404 9.6861 16.3678 9.47627 16.2745 9.28988C16.1794 9.12247 16.0272 8.99495 15.8457 8.93073L12.0847 7.38855C12.0484 7.37415 12.0113 7.36213 11.9735 7.35255Z' fill='white'/%3e%3cpath d='M11.8631 8.29559L8.22357 9.77059V10.8904L11.8631 9.33705L15.5025 10.8904V9.77059L11.8631 8.29559Z' fill='white'/%3e%3cpath d='M10.6184 15.718C10.7942 16.0092 11.3957 16.4678 11.8633 16.4774C12.3078 16.4678 12.9324 16.0092 13.108 15.718C13.2835 15.4268 10.4426 15.427 10.6184 15.718Z' fill='white'/%3e%3c/svg%3e";
+
+    var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='-8 -8 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M19.7521 0.348161H20.3976V2.23694H20.7722L20.7752 0.351063H21.4208V0.00290065L19.7521 0V0.348161Z' fill='%232B2B2B'/%3e %3cpath d='M22.31 0.00290065H21.7223V2.23114H22.0785L22.0816 0.438104H22.0877L22.718 2.23404H22.9799L23.6224 0.441005H23.6285L23.6255 2.23404H23.997L24 0.00290065H23.4093L22.8642 1.58994H22.8551L22.31 0.00290065Z' fill='%232B2B2B'/%3e %3cpath d='M16.4863 0C15.3048 0 14.5435 0.713733 14.5435 1.81915L14.5374 8.1557C13.3194 6.89362 11.4893 6.20309 9.34245 6.20019C4.36976 6.19729 0.00609663 10.3636 6.37628e-06 15.1219C-0.00608387 19.8453 4.35149 23.9942 9.32114 24C11.5258 24.0029 13.5904 22.9207 14.6836 21.853C14.8968 23.0135 15.6306 23.6489 16.7726 23.6489C17.7165 23.6489 18.4017 22.9584 18.4047 22.0068L18.4291 1.82495C18.4291 0.734042 17.6496 0.00290135 16.4863 0ZM9.28764 20.0803C6.42218 20.0774 4.08961 17.852 4.09266 15.1161C4.0957 12.383 6.43131 10.1605 9.29677 10.1634C12.1622 10.1663 14.4948 12.3917 14.4918 15.1277C14.4887 17.8607 12.1531 20.0832 9.28764 20.0803Z' fill='%232B2B2B'/%3e %3cpath d='M9.29431 11.7998C7.3363 11.7998 5.74979 13.3143 5.74979 15.1799C5.74979 17.0455 7.3363 18.56 9.29431 18.56C11.2523 18.56 12.8419 17.0455 12.8419 15.1799C12.8419 13.3143 11.2523 11.7998 9.29431 11.7998Z' fill='%23517934'/%3e%3c/svg%3e";
+
+    // Takes a appType name and returns its logo as a data url.
+    // If appType does not exist the Digital.ai logo is returned.
+    var getLogoForAppType = function getLogoForAppType(appType) {
+      switch (appType) {
+        case 'Release':
+          {
+            return img$6;
+          }
+        case 'Deploy':
+          {
+            return img$5;
+          }
+        case 'Agility':
+          {
+            return img$4;
+          }
+        case 'Continuous Testing':
+          {
+            return img$3;
+          }
+        case 'Intelligence':
+          {
+            return img$2;
+          }
+        case 'Application Protection':
+          {
+            return img$1;
+          }
+        default:
+          {
+            return img;
+          }
+      }
+    };
+    var daiAppsHeaderMenuItem = function daiAppsHeaderMenuItem(count) {
+      if (count === void 0) {
+        count = 0;
+      }
+      return sectionHeaderMenuItem('DIGITAL.AI APPLICATIONS', count, true, false);
+    };
+    var sectionHeaderMenuItem = function sectionHeaderMenuItem(title, count, showEmpty, showCount) {
+      if (showEmpty === void 0) {
+        showEmpty = false;
+      }
+      if (showCount === void 0) {
+        showCount = true;
+      }
+      var children = showEmpty || count > 0 ? jsxRuntime.jsxs(DotTypography, __assign({
+        className: "section-title"
+      }, {
+        children: [title, showCount && count > 0 ? " (" + count + ")" : '']
+      }), "menu-item-section-title-" + title) : null;
+      return {
+        children: children,
+        key: "section-header-" + title
       };
-      var handleMenuLeave = function handleMenuLeave(event) {
-        return onMenuLeave(event);
+    };
+    var createMenuItem = function createMenuItem(url, title, subtitle, onClick) {
+      return jsxRuntime.jsxs("div", __assign({
+        className: "app-menu-item"
+      }, {
+        children: [jsxRuntime.jsx(DotLink, __assign({
+          href: url,
+          color: "textPrimary",
+          target: "_blank",
+          onClick: onClick,
+          onPointerDown: onClick
+        }, {
+          children: jsxRuntime.jsxs("div", __assign({
+            className: "logo-title"
+          }, {
+            children: [jsxRuntime.jsx("div", __assign({
+              className: "start-icon"
+            }, {
+              children: jsxRuntime.jsx(DotIcon, {
+                iconId: "open-new-tab"
+              }, void 0)
+            }), void 0), jsxRuntime.jsxs("div", __assign({
+              className: "dot-app-switcher-app-title"
+            }, {
+              children: [jsxRuntime.jsx(DotTypography, __assign({
+                variant: "body1"
+              }, {
+                children: title
+              }), void 0), subtitle && jsxRuntime.jsx(DotTypography, __assign({
+                variant: "body2"
+              }, {
+                children: subtitle
+              }), void 0)]
+            }), void 0)]
+          }), void 0)
+        }), void 0), jsxRuntime.jsx(DotCopyButton, {
+          copyTooltip: "Copy application URL",
+          value: url
+        }, void 0)]
+      }), "app-menu-item-" + title);
+    };
+    var createTopLevelMenuItem = function createTopLevelMenuItem(url, logo, title, openNewTab) {
+      if (openNewTab === void 0) {
+        openNewTab = true;
+      }
+      // Creates an entry in the AppSwitcher at the same level as the AppTypeLabels, used for the Platform link and
+      // Empty state current application link
+      var target = openNewTab ? '_blank' : '_self';
+      return jsxRuntime.jsxs(DotLink, __assign({
+        href: url,
+        color: "textPrimary",
+        target: target
+      }, {
+        children: [jsxRuntime.jsxs("div", __assign({
+          className: "logo-title"
+        }, {
+          children: [jsxRuntime.jsx(DotAvatar, {
+            alt: "app image",
+            imageSrc: logo,
+            type: "image",
+            variant: "circular"
+          }, void 0), jsxRuntime.jsx("div", __assign({
+            className: "dot-app-switcher-app-title"
+          }, {
+            children: jsxRuntime.jsx(DotTypography, __assign({
+              variant: "body1"
+            }, {
+              children: title
+            }), void 0)
+          }), void 0)]
+        }), void 0), openNewTab && jsxRuntime.jsx(DotIcon, {
+          iconId: "open-new-tab"
+        }, void 0)]
+      }), "top-menu-item-" + title);
+    };
+    var createAppTypeLabel = function createAppTypeLabel(appTypeName, logo, appProps) {
+      var logoProps = logo ? {
+        imageSrc: logo
+      } : {
+        iconId: 'collection'
       };
-      var renderListItemText = function renderListItemText() {
-        return primaryText && secondaryText ? jsxRuntime.jsx(material.ListItemText, {
-          primary: primaryText,
-          secondary: secondaryText
-        }, void 0) : jsxRuntime.jsx(DotTypography, __assign({
-          variant: "body1"
+      return jsxRuntime.jsxs("div", __assign({
+        className: "logo-title"
+      }, {
+        children: [jsxRuntime.jsx(DotAvatar, __assign({}, logoProps, {
+          alt: "app image",
+          type: "image",
+          variant: "circular"
+        }), void 0), jsxRuntime.jsxs("div", __assign({
+          className: "dot-app-switcher-app-title"
         }, {
-          children: text
-        }), void 0);
+          children: [jsxRuntime.jsx(DotTypography, __assign({
+            variant: "body1"
+          }, {
+            children: appTypeName
+          }), void 0), jsxRuntime.jsxs(DotTypography, __assign({
+            variant: "body2"
+          }, {
+            children: ["Instance (", appProps.length, ")"]
+          }), void 0)]
+        }), void 0)]
+      }), void 0);
+    };
+    var getInstanceStateText = function getInstanceStateText(application) {
+      if (application.instance_state === 1) {
+        return 'Production';
+      }
+      return 'Non-production';
+    };
+    var sortRecentAppInstancesFn = function sortRecentAppInstancesFn(a, b) {
+      var appA = a.application;
+      var appB = b.application;
+      return sortAppInstancesFn(appA, appB);
+    };
+    var sortAppInstancesFn = function sortAppInstancesFn(a, b) {
+      var result = a.name.localeCompare(b.name);
+      if (result === 0) {
+        if (a.instance_state > b.instance_state) {
+          result = -1;
+        } else if (a.instance_state < b.instance_state) {
+          result = 1;
+        }
+      }
+      return result;
+    };
+    var RECENT_INSTANCES_KEY = 'dot-app-switcher-recent-app-instances';
+    var recentAppInstancesSetter = function recentAppInstancesSetter(latestInstance, maxRecentItems
+    //): (RecentAppInstance[]) => RecentAppInstance[])=> {
+    ) {
+      return function (orig) {
+        var lastAccess = Date.now();
+        var isNew = true;
+        var oldestIndex = 0;
+        var oldestAccess = lastAccess;
+        orig.forEach(function (item, index) {
+          if (item.application.id === latestInstance.id) {
+            isNew = false;
+            // don't need to rerender so eventually returning orig
+            item.lastAccess = lastAccess;
+          }
+          if (item.lastAccess < oldestAccess) {
+            oldestIndex = index;
+            oldestAccess = item.lastAccess;
+          }
+        });
+        if (isNew) {
+          var newRecentItem = {
+            application: latestInstance,
+            lastAccess: lastAccess
+          };
+          var newRecent = void 0;
+          if (orig.length >= maxRecentItems) {
+            newRecent = __spreadArray([], orig);
+            newRecent.splice(oldestIndex, 1, newRecentItem);
+          } else {
+            newRecent = __spreadArray(__spreadArray([], orig), [newRecentItem]);
+          }
+          newRecent.sort(sortRecentAppInstancesFn);
+          localStorage.setItem(RECENT_INSTANCES_KEY, JSON.stringify(newRecent));
+          return newRecent;
+        }
+        return orig;
       };
-      var renderListItemEndIcon = function renderListItemEndIcon() {
-        if (hasChildren || !endIcon) {
-          return jsxRuntime.jsx(DotIcon, {
-            iconId: hasChildren && getChevronIcon(nestedListType, isOpened)
-          }, void 0);
+    };
+
+    var rootClassName$K = 'dot-app-switcher';
+    var StyledAppSwitcher = styled__default["default"](DotDrawer).withConfig({
+      displayName: "AppSwitcherstyles__StyledAppSwitcher",
+      componentId: "hhxfqg-0"
+    })(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    &.", " {\n      .dot-drawer-paper {\n        padding: 0;\n        width: 382px;\n      }\n      .content {\n        padding: ", ";\n        overflow-y: auto;\n      }\n      .app-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .dot-link,\n      .product-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        height: 60px;\n        margin-bottom: ", ";\n        text-decoration: none;\n        cursor: pointer;\n      }\n      .logo-title {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        width: 100%;\n        .start-icon {\n          width: 40px;\n          display: flex;\n          justify-content: space-around;\n          align-items: center;\n        }\n      }\n      .dot-avatar {\n        flex-basis: 40px;\n      }\n      .section-title {\n        display: flex;\n        align-items: center;\n        height: 30px;\n        padding: ", ";\n        margin: ", ";\n        border-bottom: 1px solid ", ";\n      }\n      .dot-app-switcher-app-title {\n        min-width: 150px;\n      }\n      .dot-icon {\n        flex-basis: content;\n      }\n      .app-switcher-header {\n        .app-switcher-header-title {\n          display: flex;\n          align-items: center;\n        }\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n        border-bottom: 1px solid ", ";\n        padding: ", ";\n        .app-switcher-label {\n          padding-left: ", ";\n        }\n      }\n      .app-switcher-back-button {\n        &.dot-button.MuiButton-text {\n          padding-left: 0;\n        }\n      }\n      .product-heading {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n      .product-applications {\n        margin-top: ", ";\n        width: 100%;\n      }\n      .app-instance-search {\n        margin-top: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-drawer-paper {\n        padding: 0;\n        width: 382px;\n      }\n      .content {\n        padding: ", ";\n        overflow-y: auto;\n      }\n      .app-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .dot-link,\n      .product-menu-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        height: 60px;\n        margin-bottom: ", ";\n        text-decoration: none;\n        cursor: pointer;\n      }\n      .logo-title {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        width: 100%;\n        .start-icon {\n          width: 40px;\n          display: flex;\n          justify-content: space-around;\n          align-items: center;\n        }\n      }\n      .dot-avatar {\n        flex-basis: 40px;\n      }\n      .section-title {\n        display: flex;\n        align-items: center;\n        height: 30px;\n        padding: ", ";\n        margin: ", ";\n        border-bottom: 1px solid ", ";\n      }\n      .dot-app-switcher-app-title {\n        min-width: 150px;\n      }\n      .dot-icon {\n        flex-basis: content;\n      }\n      .app-switcher-header {\n        .app-switcher-header-title {\n          display: flex;\n          align-items: center;\n        }\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n        border-bottom: 1px solid ", ";\n        padding: ", ";\n        .app-switcher-label {\n          padding-left: ", ";\n        }\n      }\n      .app-switcher-back-button {\n        &.dot-button.MuiButton-text {\n          padding-left: 0;\n        }\n      }\n      .product-heading {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n      .product-applications {\n        margin-top: ", ";\n        width: 100%;\n      }\n      .app-instance-search {\n        margin-top: ", ";\n      }\n    }\n  "])), rootClassName$K, theme.spacing(0, 2, 1, 2), theme.spacing(1), theme.spacing(0, 0, 0, 2), theme.spacing(0, -2, 0), theme.palette.grey[100], theme.palette.grey[100], theme.spacing(0, 2, 1, 2), theme.spacing(2), theme.spacing(2), theme.spacing(2));
+    });
+    var templateObject_1$N, templateObject_2$K;
+
+    var DotAppSwitcherView = function DotAppSwitcherView(_a) {
+      var activeApp = _a.activeApp,
+        apps = _a.apps,
+        className = _a.className,
+        _b = _a.maxRecentInstances,
+        maxRecentInstances = _b === void 0 ? 5 : _b,
+        _c = _a.noAppTypeLabel,
+        noAppTypeLabel = _c === void 0 ? 'Other' : _c,
+        platformConsoleUrl = _a.platformConsoleUrl,
+        onClose = _a.onClose,
+        open = _a.open,
+        _d = _a.searchInstancesThreshold,
+        searchInstancesThreshold = _d === void 0 ? 5 : _d,
+        selectedAppType = _a.selectedAppType,
+        _e = _a.yOffset,
+        yOffset = _e === void 0 ? 56 : _e,
+        _f = _a.zIndex,
+        zIndex = _f === void 0 ? 990 : _f;
+      var dotCoreApiContext = useDotCoreApiContext();
+      var setSelectedAppType = null;
+      if (dotCoreApiContext !== null) {
+        setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
+      }
+      var rootClasses = useStylesWithRootClass(rootClassName$K, className);
+      var _g = React.useState(),
+        appTypeMap = _g[0],
+        setAppTypeMap = _g[1];
+      var _h = React.useState(),
+        appTypeLabels = _h[0],
+        setAppTypeLabels = _h[1];
+      var _j = React.useState(),
+        appTypeMenuItems = _j[0],
+        setAppTypeMenuItems = _j[1];
+      var _k = React.useState(null),
+        selectedAppTypeAlt = _k[0],
+        setSelectedAppTypeAlt = _k[1];
+      var _l = React.useState(''),
+        searchText = _l[0],
+        setSearchText = _l[1];
+      var cachedRecentItemsJson = localStorage.getItem(RECENT_INSTANCES_KEY);
+      var _m = React.useState(cachedRecentItemsJson ? JSON.parse(cachedRecentItemsJson) : []),
+        recentAppInstances = _m[0],
+        setRecentAppInstances = _m[1];
+      if (!setSelectedAppType) {
+        selectedAppType = selectedAppTypeAlt;
+        setSelectedAppType = setSelectedAppTypeAlt;
+      }
+      var showApps = React.useCallback(function (appType) {
+        setSelectedAppType(appType);
+      }, []);
+      var showAppTypes = React.useCallback(function () {
+        setSearchText('');
+        setSelectedAppType(null);
+      }, []);
+      var populateAppTypeMap = React.useCallback(function () {
+        var newAppTypeMap = new Map();
+        // we'll put Other at the end
+        var otherApps = [];
+        apps === null || apps === void 0 ? void 0 : apps.forEach(function (app) {
+          var instanceStateText = getInstanceStateText(app) + " instance";
+          var children = createMenuItem(app.url, app.name, instanceStateText, function (e) {
+            handleRecentInstance(e, app);
+          });
+          var searchableContent = app.name + " " + instanceStateText;
+          var appTypeName = app.logo_product_name;
+          var appTypeApps;
+          if (appTypeName) {
+            appTypeApps = newAppTypeMap.get(appTypeName);
+            if (!appTypeApps) {
+              appTypeApps = [];
+              newAppTypeMap.set(appTypeName, appTypeApps);
+            }
+          } else {
+            appTypeApps = otherApps;
+          }
+          appTypeApps.push({
+            application: app,
+            children: children,
+            searchableContent: searchableContent,
+            key: app.id
+          });
+        });
+        var keys = Array.from(newAppTypeMap.keys()).sort();
+        var sortedAppTypeMap = new Map();
+        for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+          var appType = keys_1[_i];
+          var appTypeApps = newAppTypeMap.get(appType);
+          appTypeApps.sort(function (a, b) {
+            return sortAppInstancesFn(a.application, b.application);
+          });
+          sortedAppTypeMap.set(appType, appTypeApps);
+        }
+        var appTypeCount = sortedAppTypeMap.size;
+        if (platformConsoleUrl) {
+          appTypeCount++;
+        }
+        if (otherApps.length > 0) {
+          otherApps.sort(function (a, b) {
+            return sortAppInstancesFn(a.application, b.application);
+          });
+          sortedAppTypeMap.set(noAppTypeLabel, otherApps);
+        }
+        setAppTypeMap(sortedAppTypeMap);
+        var menuItems = [daiAppsHeaderMenuItem(appTypeCount)];
+        if (platformConsoleUrl) {
+          var children = createTopLevelMenuItem(platformConsoleUrl, getLogoForAppType('Platform'), 'Digital.ai Platform', !window.location.href.startsWith(platformConsoleUrl));
+          menuItems.push({
+            children: children,
+            key: 'app-switcher-platform-link'
+          });
+        }
+        var newAppTypeLabels = new Map();
+        sortedAppTypeMap.forEach(function (singleTypeApps, appTypeName) {
+          if ((singleTypeApps === null || singleTypeApps === void 0 ? void 0 : singleTypeApps.length) > 0) {
+            var logo = appTypeName === noAppTypeLabel ? null : getLogoForAppType(appTypeName);
+            newAppTypeLabels.set(appTypeName, {
+              logo: logo,
+              singleTypeApps: singleTypeApps
+            });
+            menuItems.push({
+              children: jsxRuntime.jsxs(DotLink, __assign({
+                className: "product-menu-item",
+                onClick: function () {
+                  return showApps(appTypeName);
+                }
+              }, {
+                children: [createAppTypeLabel(appTypeName, logo, singleTypeApps), jsxRuntime.jsx(DotIcon, {
+                  iconId: "chevron-right"
+                }, void 0)]
+              }), "menu-item-" + appTypeName),
+              key: appTypeName
+            });
+          }
+        });
+        setAppTypeMenuItems(menuItems);
+        setAppTypeLabels(newAppTypeLabels);
+      }, [apps]);
+      var emptyState = React.useCallback(function () {
+        var currentAppMenuItem = createTopLevelMenuItem(window.location.href, getLogoForAppType(activeApp.product), activeApp.name, false);
+        setAppTypeMenuItems([daiAppsHeaderMenuItem(), {
+          children: currentAppMenuItem,
+          key: 'no_applications_configured'
+        }]);
+      }, [activeApp]);
+      React.useEffect(function () {
+        if ((apps === null || apps === void 0 ? void 0 : apps.length) > 0) {
+          populateAppTypeMap();
+        } else {
+          emptyState();
+        }
+      }, [apps]);
+      var onAppInstanceSearchTextChange = React.useCallback(function (text) {
+        setSearchText(text);
+      }, []);
+      var clearAppInstanceSearchText = React.useCallback(function () {
+        setSearchText('');
+      }, []);
+      var closeHandler = React.useCallback(function (event) {
+        setSearchText('');
+        onClose && onClose(event);
+      }, [onClose]);
+      var filteredAppInstances = React.useCallback(function () {
+        var _a;
+        return (_a = appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
+          var isMatch = !searchText;
+          if (searchText) {
+            var testStr = isLowerCase(searchText) ? item.searchableContent.toLowerCase() : item.searchableContent;
+            isMatch = testStr.indexOf(searchText) >= 0;
+          }
+          return isMatch;
+        }).map(function (item) {
+          return item.children;
+        });
+      }, [appTypeMap, selectedAppType, searchText]);
+      var handleRecentInstance = React.useCallback(function (event, latestInstance) {
+        // middle button counts; click to open context menu does not
+        if (event.button < 2) {
+          setRecentAppInstances(recentAppInstancesSetter(latestInstance, maxRecentInstances));
         }
-        return endIcon;
-      };
-      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(DotTooltip, __assign({
-          "data-testid": dataTestId + "-tooltip",
-          placement: tooltipPlacement,
-          title: tooltip
+      }, [recentAppInstances]);
+      var recentAppInstancesSection = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [sectionHeaderMenuItem('RECENT', recentAppInstances.length).children, jsxRuntime.jsx("div", __assign({
+          className: "product-applications"
         }, {
-          children: jsxRuntime.jsxs(StyledListItem, __assign({
-            "aria-label": ariaLabel,
-            button: true,
-            classes: {
-              root: rootClasses
-            },
-            component: href && !onClick ? 'a' : component,
-            "data-testid": dataTestId,
-            divider: divider,
-            href: onClick ? null : href,
-            onClick: onClick || !href ? handleClick : null,
-            selected: isFlyout ? isOpened : selected,
-            target: target
+          children: recentAppInstances.map(function (item) {
+            var app = item.application;
+            return createMenuItem(app.url, app.name, app.logo_product_name + " - " + getInstanceStateText(app), function (e) {
+              handleRecentInstance(e, app);
+            });
+          })
+        }), void 0)]
+      }, void 0);
+      var content = function content() {
+        var _a;
+        if (selectedAppType && appTypeMap && appTypeLabels) {
+          var labelConfig = appTypeLabels.get(selectedAppType);
+          return jsxRuntime.jsxs("div", __assign({
+            className: "content"
           }, {
-            children: [jsxRuntime.jsxs("span", __assign({
-              className: listItemLinkClassName
+            children: [jsxRuntime.jsx("span", {
+              children: jsxRuntime.jsx(DotButton, __assign({
+                className: "app-switcher-back-button",
+                type: "text",
+                onClick: showAppTypes,
+                startIcon: jsxRuntime.jsx(DotIcon, {
+                  iconId: "back"
+                }, void 0)
+              }, {
+                children: jsxRuntime.jsx("span", {
+                  children: "Back"
+                }, void 0)
+              }), void 0)
+            }, void 0), jsxRuntime.jsx("div", __assign({
+              className: "product-heading"
             }, {
-              children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
-                children: startIcon
-              }, void 0), renderListItemText()]
-            }), void 0), showEndIcon && renderListItemEndIcon()]
-          }), void 0)
-        }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
-          anchorEl: anchorEl,
-          ariaLabel: "nested list",
-          "data-testid": "nestedList",
-          items: items,
-          menuPlacement: menuPlacement,
-          nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-          onMenuLeave: handleMenuLeave,
-          open: isOpened,
-          type: nestedListType
-        }, void 0)]
-      }, void 0);
-    };
-    var NestedList = function NestedList(_a) {
-      var ariaLabel = _a.ariaLabel,
-        anchorEl = _a.anchorEl,
-        dataTestId = _a["data-testid"],
-        items = _a.items,
-        menuPlacement = _a.menuPlacement,
-        nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
-        onMenuLeave = _a.onMenuLeave,
-        open = _a.open,
-        parentItemIndex = _a.parentItemIndex,
-        type = _a.type;
-      var flyoutItemClasses = useStylesWithRootClass(listItemRootClass, flyoutListItemClassName);
-      var flyoutSpanClasses = useStylesWithRootClass(listItemLinkClassName, flyoutItemLinkClassName);
-      if (type === 'expandable') {
-        return jsxRuntime.jsx(material.Collapse, __assign({
-          in: open,
-          timeout: "auto",
-          unmountOnExit: true
-        }, {
-          children: jsxRuntime.jsx(DotList, {
-            ariaLabel: ariaLabel,
-            className: nestedListClassName,
-            component: "div",
-            "data-testid": dataTestId,
-            disablePadding: true,
-            items: items
-          }, parentItemIndex)
-        }), void 0);
-      }
-      if (type === 'menu') {
-        var menuItems = items.map(function (item, index) {
-          var href = item.href,
-            target = item.target,
-            onClick = item.onClick,
-            tooltip = item.tooltip,
-            _a = item.tooltipPlacement,
-            tooltipPlacement = _a === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _a,
-            text = item.text;
-          return {
-            children: jsxRuntime.jsx(DotTooltip, __assign({
-              placement: tooltipPlacement,
-              title: tooltip
+              children: createAppTypeLabel(selectedAppType, labelConfig.logo, labelConfig.singleTypeApps)
+            }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= searchInstancesThreshold && jsxRuntime.jsx("div", __assign({
+              className: "app-instance-search"
             }, {
-              children: jsxRuntime.jsx(StyledListItem, __assign({
-                className: flyoutItemClasses,
-                component: href && !onClick ? 'a' : null,
-                "data-testid": dataTestId + "-item-" + index,
-                href: href,
-                onClick: onClick,
-                target: target
-              }, {
-                children: jsxRuntime.jsxs("span", __assign({
-                  className: flyoutSpanClasses
-                }, {
-                  children: [item.startIcon, jsxRuntime.jsx(DotTypography, __assign({
-                    variant: "body1"
-                  }, {
-                    children: text
-                  }), void 0)]
-                }), void 0)
-              }), parentItemIndex + "-" + index)
-            }), parentItemIndex + "-" + index + "-tooltip"),
-            classes: '',
-            key: String(index)
-          };
-        });
-        return jsxRuntime.jsx(DotMenu, {
-          anchorEl: anchorEl,
-          ariaLabel: ariaLabel,
-          className: flyoutMenuClassName,
-          "data-testid": dataTestId,
-          id: CreateUUID(),
-          menuItemHeight: "auto",
-          menuItems: menuItems,
-          menuPlacement: menuPlacement,
-          onLeave: onMenuLeave,
-          open: open
-        }, parentItemIndex);
-      }
-      if (type === 'drawer') {
-        return jsxRuntime.jsx(StyledDotDrawer, __assign({
-          PaperProps: {
-            style: {
-              left: nestedDrawerLeftSpacing + "px"
-            }
+              children: jsxRuntime.jsx(SearchInput, {
+                "data-testid": "app-instance-search-input",
+                onChange: onAppInstanceSearchTextChange,
+                onClear: clearAppInstanceSearchText,
+                value: searchText
+              }, void 0)
+            }), void 0), jsxRuntime.jsx("div", __assign({
+              className: "product-applications"
+            }, {
+              children: filteredAppInstances()
+            }), void 0)]
+          }), void 0);
+        } else {
+          return jsxRuntime.jsxs("div", __assign({
+            className: "content"
+          }, {
+            children: [jsxRuntime.jsx(DotList, {
+              items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(function (item) {
+                return {
+                  child: item.children
+                };
+              }),
+              width: "100%"
+            }, void 0), recentAppInstancesSection]
+          }), void 0);
+        }
+      };
+      var header = {
+        className: 'app-switcher-header',
+        children: jsxRuntime.jsxs("div", __assign({
+          className: "app-switcher-header-title",
+          style: {
+            marginTop: yOffset + 'px',
+            width: '80%'
+          }
+        }, {
+          children: [jsxRuntime.jsx(DotAvatar, {
+            iconId: "apps",
+            alt: "app image",
+            type: "image",
+            variant: "circular"
+          }, void 0), jsxRuntime.jsx(DotTypography, __assign({
+            className: "app-switcher-label"
+          }, {
+            children: "App switcher"
+          }), void 0)]
+        }), void 0)
+      };
+      return jsxRuntime.jsx(StyledAppSwitcher, __assign({
+        className: rootClasses,
+        ModalProps: {
+          style: {
+            zIndex: zIndex
           },
-          anchor: "left",
-          className: nestedDrawerClassName,
-          "data-testid": "nested-drawer",
+          hideBackdrop: true
+        },
+        drawerHeaderProps: header,
+        variant: "temporary",
+        width: "340px",
+        open: open,
+        onClose: closeHandler
+      }, {
+        children: content()
+      }), void 0);
+    };
+    var DotAppSwitcher = function DotAppSwitcher(_a) {
+      var accountId = _a.accountId,
+        _b = _a.includePlatformConsole,
+        includePlatformConsole = _b === void 0 ? true : _b,
+        onClose = _a.onClose,
+        commonProps = __rest(_a, ["accountId", "includePlatformConsole", "onClose"]);
+      var _c = useDotCoreApiContext(),
+        applications = _c.applications,
+        applicationsLoading = _c.applicationsLoading,
+        applicationsError = _c.applicationsError,
+        loadApplications = _c.loadApplications,
+        open = _c.isAppSwitcherOpen,
+        platformConsoleUrl = _c.platformConsoleUrl,
+        setOpen = _c.setIsAppSwitcherOpen,
+        selectedAppType = _c.selectedAppSwitcherAppType,
+        setSelectedAppType = _c.setSelectedAppSwitcherAppType;
+      React.useEffect(function () {
+        if ((!applications || applications.length === 0) && open) {
+          loadApplications(accountId);
+        }
+      }, [accountId, open]);
+      if (applicationsError) {
+        console.error('Error loading application list in AppSwitcher', applicationsError);
+      }
+      var closeHandler = React.useCallback(function (event) {
+        setOpen(false);
+        setSelectedAppType(null);
+        onClose && onClose(event);
+      }, [onClose]);
+      var viewProps = includePlatformConsole ? __assign(__assign({}, commonProps), {
+        platformConsoleUrl: platformConsoleUrl
+      }) : __assign({}, commonProps);
+      if (!applicationsLoading && !applicationsError) {
+        return jsxRuntime.jsx(DotAppSwitcherView, __assign({}, viewProps, {
           open: open,
-          variant: "persistent"
-        }, {
-          children: jsxRuntime.jsx(DotList, {
-            ariaLabel: ariaLabel,
-            className: nestedListClassName,
-            component: "div",
-            "data-testid": dataTestId,
-            disablePadding: true,
-            items: items,
-            width: '100%'
-          }, parentItemIndex)
+          apps: applications,
+          selectedAppType: selectedAppType,
+          onClose: closeHandler
         }), void 0);
       }
+      return null;
     };
 
     var _path$2, _path2$2, _path3, _path4;
@@ -4465,7 +4575,7 @@
       componentId: "j2sgjy-0"
     })(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    &.", " {\n      &.", " .dot-text-field .", " {\n        height: 56px;\n        padding-left: ", ";\n      }\n\n      .", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-chip:first-child {\n        margin-left: ", ";\n      }\n\n      .dot-text-field {\n        .", " {\n          height: ", ";\n        }\n\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      &.", " .dot-text-field .", " {\n        height: 56px;\n        padding-left: ", ";\n      }\n\n      .", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-chip:first-child {\n        margin-left: ", ";\n      }\n\n      .dot-text-field {\n        .", " {\n          height: ", ";\n        }\n\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$F, inputMediumClassName, inputRootClassName, theme.spacing(2), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main);
+      return styled.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    &.", " {\n      &.", " .dot-text-field .", " {\n        height: 56px;\n        padding-left: ", ";\n      }\n\n      .", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-chip:first-child {\n        margin-left: ", ";\n      }\n\n      .dot-text-field {\n        .", " {\n          min-height: ", ";\n        }\n\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      &.", " .dot-text-field .", " {\n        height: 56px;\n        padding-left: ", ";\n      }\n\n      .", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-chip:first-child {\n        margin-left: ", ";\n      }\n\n      .dot-text-field {\n        .", " {\n          min-height: ", ";\n        }\n\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$F, inputMediumClassName, inputRootClassName, theme.spacing(2), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main);
     });
     var templateObject_1$I, templateObject_2$F;
 
@@ -4706,7 +4816,7 @@
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       var DotPopper = function DotPopper(props) {
         if (!isActionItemDefined) return jsxRuntime.jsx(StyledPopper, __assign({}, props, {
-          className: rootClassName$M,
+          className: rootClassName$U,
           disablePortal: disablePortal,
           "$maxHeight": maxHeight
         }), void 0);
@@ -4730,7 +4840,7 @@
         var paperProps = props.children.props;
         var paperChildren = paperProps.children;
         return jsxRuntime.jsx(StyledPopper, __assign({}, props, {
-          className: rootClassName$M,
+          className: rootClassName$U,
           disablePortal: disablePortal,
           "$maxHeight": maxHeight
         }, {
@@ -7487,13 +7597,12 @@
       var _j = React.useState(value),
         inputValue = _j[0],
         setInputValue = _j[1];
-      var isNotReadOnlyOrEditing = !readOnly && !editing;
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
       var isSaveDisabled = checkIfEmptyValue(inputValue);
       var rootClasses = useStylesWithRootClass(rootClassName$m, className, editing ? editModeClassName : '');
       var handleShowTooltip = function handleShowTooltip(visible) {
-        if (isNotReadOnlyOrEditing) {
+        if (!editing) {
           setShowTooltip(visible);
         }
       };
@@ -9665,7 +9774,7 @@
         onClickAway = _a.onClickAway,
         open = _a.open,
         placement = _a.placement;
-      var rootClasses = useStylesWithRootClass(rootClassName$M, className);
+      var rootClasses = useStylesWithRootClass(rootClassName$U, className);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       var handleClickAway = function handleClickAway(event) {
         if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {