@digital-ai/dot-components 2.5.0 → 2.5.2

package/index.esm.js

@@ -1,7 +1,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, useEffect, useRef, useMemo, useContext, createContext, forwardRef, useCallback, Fragment as Fragment$1, createElement } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, Avatar, Button, darken, IconButton, Link, Drawer, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
+import { useState, useEffect, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement } from 'react';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, Avatar, Button, darken, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Link, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
@@ -1396,7 +1396,7 @@ let applications = [{
   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,
@@ -1411,7 +1411,7 @@ let applications = [{
   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,
@@ -1426,7 +1426,7 @@ let applications = [{
   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,
@@ -1772,617 +1772,473 @@ const DotButton = /*#__PURE__*/forwardRef(({
   }), void 0);
 });
 
-const rootClassName$X = 'dot-icon-btn';
-const StyledIconButton = styled(IconButton).withConfig({
-  displayName: "IconButtonstyles__StyledIconButton",
-  componentId: "eko0kb-0"
-})(["", ""], () => css(["&.", "{font-size:inherit;padding:10px;.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}&.ripple-disabled{&:hover,&:active,&:focus{background:", ";}}"], rootClassName$X, hoverGray));
+const rootClassName$X = 'dot-list';
+const listItemRootClass = 'dot-list-item';
+const nestedListClassName = 'dot-nested-list';
+const nestedDrawerClassName = 'dot-nested-drawer';
+const StyledList = styled(List).withConfig({
+  displayName: "Liststyles__StyledList",
+  componentId: "wxwqwr-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], rootClassName$X, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1)));
 
-const DotIconButton = ({
+const getChevronIcon = (nestedListType, isOpened) => {
+  if (nestedListType !== 'expandable') {
+    return 'chevron-right';
+  }
+  if (isOpened) {
+    return 'chevron-up';
+  }
+  return 'chevron-down';
+};
+
+const flyoutListItemClassName = 'dot-flyout-list-item';
+const flyoutItemLinkClassName = 'dot-flyout-item-link';
+const listItemLinkClassName = 'dot-list-item-link';
+const StyledListItem = styled(ListItem).withConfig({
+  displayName: "ListItemstyles__StyledListItem",
+  componentId: "sc-1fawh8v-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{&.", "{padding:0;}p.MuiTypography-root{margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
+
+const rootClassName$W = 'dot-progress';
+const StyledCircularProgress = styled(CircularProgress).withConfig({
+  displayName: "Progressstyles__StyledCircularProgress",
+  componentId: "sc-1gs77rb-0"
+})(["&.", "{&.MuiCircularProgress-colorSecondary{color:#649a3d;}}"], rootClassName$W);
+
+const DotProgress = ({
   ariaLabel,
+  color: _color = 'secondary',
   className,
-  color: _color = 'inherit',
   'data-testid': dataTestId,
-  disabled: _disabled = false,
-  disableRipple: _disableRipple = false,
-  iconId,
-  iconSize: _iconSize = 'small',
-  onClick,
-  tooltip,
-  size: _size = 'medium'
+  size: _size = 40,
+  thickness: _thickness = 3.6,
+  tooltip: _tooltip = 'loading data',
+  value,
+  variant: _variant = 'indeterminate'
 }) => {
-  const rippleClassName = _disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$X, rippleClassName, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   return jsx(DotTooltip, Object.assign({
-    "data-testid": "icon-button-tooltip",
-    title: tooltip
+    title: _tooltip
   }, {
-    children: jsx(StyledIconButton, Object.assign({
+    children: jsx(StyledCircularProgress, {
       "aria-label": ariaLabel,
       classes: {
         root: rootClasses
       },
       color: _color,
       "data-testid": dataTestId,
-      disableRipple: _disableRipple,
-      disabled: _disabled,
-      onClick: event => onClick && onClick(event),
-      size: _size
-    }, {
-      children: jsx(DotIcon, {
-        "data-testid": "button-icon",
-        fontSize: _iconSize,
-        iconId: iconId
-      }, void 0)
-    }), void 0)
+      size: _size,
+      thickness: _thickness,
+      value: value,
+      variant: _variant
+    }, void 0)
   }), void 0);
 };
 
-const DotInputLabel = ({
-  'data-testid': dataTestId,
-  disabled: _disabled = false,
-  error: _error = false,
-  id,
-  label,
-  required
-}) => {
-  return jsx(StyledInputLabel, Object.assign({
-    "data-testid": dataTestId,
-    classes: {
-      root: labelClassName
-    },
-    disabled: _disabled,
-    error: _error,
-    htmlFor: id,
-    required: required,
-    shrink: false,
-    variant: "outlined"
-  }, {
-    children: jsx(DotTypography, Object.assign({
-      variant: "subtitle2"
-    }, {
-      children: label
-    }), void 0)
-  }), void 0);
-};
+const levelBottom = -1;
+const levelFirst = 1;
+const levelSecond = 10;
+const levelThird = 100;
+const levelFourth = 1000;
+const levelTop = 9999;
 
-const DELAY_MS = 300;
-const EndAdornment = ({
-  endAdornmentTooltip,
-  error,
-  dataTestId,
-  endIcon,
-  success,
-  warning
+var variables = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  levelBottom: levelBottom,
+  levelFirst: levelFirst,
+  levelSecond: levelSecond,
+  levelThird: levelThird,
+  levelFourth: levelFourth,
+  levelTop: levelTop
+});
+
+const rootClassName$V = 'dot-popper';
+const StyledPopper$1 = styled(Popper).withConfig({
+  displayName: "Popperstyles__StyledPopper",
+  componentId: "sd1h8p-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{font-family:", ";font-size:", "px;}"], rootClassName$V, theme.typography.fontFamily, theme.typography.body1.fontSize));
+
+const flyoutMenuClassName = 'dot-flyout-menu';
+const rootClassName$U = 'dot-menu';
+const getListMaxHeight = maxHeight => isString$1(maxHeight) ? maxHeight : `${maxHeight}px`;
+const StyledPopper = styled(Popper).withConfig({
+  displayName: "Menustyles__StyledPopper",
+  componentId: "sc-134fmqu-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{font-family:", ";font-size:", "px;z-index:", ";}&.", ",&.", "{&.loading .MuiPaper-root{align-items:center;display:flex;justify-content:center;min-height:200px;min-width:200px;}ul,.dot-action-item{.dot-action-item-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;}}ul{box-sizing:content-box;min-width:112px;overflow:auto;", " .dot-li{min-height:auto;}}.dot-action-item{height:", ";border-top:1px solid ", ";line-height:inherit;button.dot-button{border-radius:", ";justify-content:flex-start;height:100%;margin:0;&:focus-visible{background-color:", ";}.MuiButton-label{gap:", ";.MuiButton-startIcon{margin-left:0;.dot-icon{flex-shrink:0;}}}}}}"], rootClassName$V, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$U, rootClassName$V, ({
+  $maxHeight
+}) => $maxHeight !== undefined && `
+          max-height: ${getListMaxHeight($maxHeight)};
+        `, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.layer.n100, theme.spacing(3)));
+
+const MENU_ITEM_HEIGHT_NORMAL = 48;
+const MENU_ITEM_HEIGHT_DENSE = 36;
+const DEFAULT_MAX_VISIBLE_ITEMS = 7;
+
+const rootClassName$T = 'dot-ul';
+const listItemClassName$1 = 'dot-li';
+const listItemWithSubmenuClassName = 'dot-li-with-submenu';
+const StyledMenuList = styled(MenuList).withConfig({
+  displayName: "MenuListstyles__StyledMenuList",
+  componentId: "yqdwwg-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{.dot-li{font-size:", "px;justify-content:space-between;gap:", ";&:hover{background:", ";}&.Mui-selected,&.Mui-selected:hover{background:", ";}&.", "{padding-right:", ";}}}"], rootClassName$T, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5)));
+
+const getDefaultItemHeight = isDense => isDense ? MENU_ITEM_HEIGHT_DENSE : MENU_ITEM_HEIGHT_NORMAL;
+const 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;
+  }
+  const itemHeightType = typeof menuItemHeight;
+  if (itemHeightType === 'number' || itemHeightType === 'string') {
+    return menuItemHeight;
+  } else {
+    return getDefaultItemHeight(isDense);
+  }
+};
+const getNumberOfVisibleItems = (numberOfItems, maxVisibleItems) => {
+  if (maxVisibleItems && maxVisibleItems > 0) {
+    return maxVisibleItems <= numberOfItems ? maxVisibleItems : numberOfItems;
+  }
+  return DEFAULT_MAX_VISIBLE_ITEMS;
+};
+const calculateMaxHeight = ({
+  isDense,
+  maxVisibleItems,
+  menuItems,
+  menuItemHeight
 }) => {
-  const renderIcon = iconType => jsx(DotIcon, {
-    "data-testid": dataTestId && `${dataTestId}-${iconType}-icon`,
-    iconId: `${iconType}-solid`
-  }, void 0);
-  const errorIcon = error && renderIcon('error');
-  const successIcon = success && renderIcon('check');
-  const warningIcon = warning && renderIcon('warning');
-  const endAdornmentIcon = endIcon || errorIcon || warningIcon || successIcon;
-  const styledAdornment = jsx(StyledAdornment, Object.assign({
-    className: `${adornmentIconClassName} end`,
-    position: "end"
-  }, {
-    children: endAdornmentIcon
-  }), void 0);
-  return endAdornmentTooltip ? jsx(DotTooltip, Object.assign({
-    title: endAdornmentTooltip
-  }, {
-    children: styledAdornment
-  }), void 0) : styledAdornment;
+  // if menuItemHeight is "auto" set maxHeight as same
+  if (typeof menuItemHeight === 'string') {
+    return menuItemHeight;
+  }
+  // If 'menuItemHeight' is set it will take precedence here
+  const itemHeight = menuItemHeight ? menuItemHeight : getDefaultItemHeight(isDense);
+  let maxHeight = 0;
+  const numberOfVisibleItems = getNumberOfVisibleItems(menuItems.length, maxVisibleItems);
+  const visibleItems = menuItems.slice(0, numberOfVisibleItems);
+  visibleItems.forEach(({
+    height
+  }) => {
+    const customItemHeight = height ? height : itemHeight;
+    // + 3 is for bottom margin of menuItem
+    maxHeight += customItemHeight + 3;
+  });
+  return maxHeight;
 };
-const getInitialState = value => ({
-  inputValue: value || ''
-});
-const DotInputText = ({
-  autoComplete: _autoComplete = 'off',
-  autoFocus,
+const checkForSubItems = menuItems => menuItems.some(menuItem => menuItem.items && menuItems.length > 0);
+const checkIfSubmenu = anchorElement => {
+  if (!anchorElement) return false;
+  return anchorElement.classList.contains(listItemWithSubmenuClassName);
+};
+const checkIfMenuItemSelected = (key, selectedKey, activeSubmenu) => {
+  return selectedKey === key || activeSubmenu === key;
+};
+const checkForAutoFocus = (autoFocusItem, isFirstItem) => !!(autoFocusItem && isFirstItem);
+
+/**
+ * Since this component is used inside 'ClickAwayListener',
+ * it needs to be contained within 'forwardRef' function
+ */
+const DotMenuList = /*#__PURE__*/forwardRef(({
+  autoFocusItem,
   className,
-  defaultValue,
   'data-testid': dataTestId,
-  disabled: _disabled = false,
-  error: _error = false,
-  endAdornmentTooltip,
-  fullWidth: _fullWidth = true,
-  hasDebounce,
-  helperText,
-  endIcon,
+  dense,
   id,
-  inputRef,
-  label,
-  maxRows,
-  minRows,
-  multiline: _multiline = false,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  onKeyDown,
-  onMouseUp,
-  persistentLabel,
-  placeholder,
-  readOnly: _readOnly = false,
-  required: _required = false,
-  shrink,
-  startIcon,
-  size: _size = 'small',
-  success,
-  type: _type = 'text',
-  value,
-  warning: _warning = false
-}) => {
-  const hasError = _error && errorClassName;
-  const hasWarning = !_error && _warning && warningClassName;
-  const hasSuccess = !_error && !_warning && success && successClassName;
-  const hasEndAdornmentIcon = endIcon || _error || hasWarning || hasSuccess;
-  // This state is used only with debounce feature enabled
-  const [inputTextState, setInputTextState] = useState(hasDebounce && getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$10, hasError, hasWarning, hasSuccess, _readOnly ? 'read-only' : '');
-  // Used to control text value from the consumer component
-  // when debounce feature is enabled
-  useEffect(() => {
-    if (hasDebounce && value !== inputTextState.inputValue) {
-      setInputTextState(getInitialState(value));
-    }
-  }, [value]);
-  // Improve performance by avoiding callback execution
-  // on each keystroke (if debounce feature is active)
-  useEffect(() => {
-    // Do not proceed if debounce feature is turned
-    // off or there is no event defined
-    if (!hasDebounce || !inputTextState || !inputTextState.changeEvent || !onChange) return;
-    const handler = setTimeout(() => {
-      onChange(inputTextState.changeEvent);
-    }, DELAY_MS);
-    return () => clearTimeout(handler);
-  }, [inputTextState]);
-  const 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);
+  maxVisibleItems,
+  menuItemHeight,
+  menuItems,
+  onItemSelect,
+  onKeyDown,
+  onSubMenuCreate,
+  selectedKey
+}, ref) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const [activeSubmenu, setActiveSubmenu] = useState(null);
+  const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
+  const openSubmenu = (target, itemKey) => {
+    // Set new anchor for submenu and active submenu key
+    // so that new submenu can be opened
+    setSubItemAnchorEl(target);
+    setActiveSubmenu(itemKey);
   };
-  const inputTextValue = hasDebounce ? inputTextState.inputValue : value;
-  // Don't use default value when debounce feature is enabled because
-  // in that case component is controlled
-  const defaultInputValue = hasDebounce ? undefined : defaultValue;
-  const startAdornmentIcon = () => {
-    if (!startIcon) return null;
-    return jsx(StyledAdornment, Object.assign({
-      className: `${adornmentIconClassName} start`,
-      position: "start"
-    }, {
-      children: startIcon
-    }), void 0);
+  const 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);
   };
-  const endAdornmentIcon = () => {
-    if (!hasEndAdornmentIcon) return null;
-    return jsx(EndAdornment, Object.assign({}, {
-      endAdornmentTooltip,
-      error: _error,
-      dataTestId,
-      endIcon,
-      success,
-      warning: _warning
-    }), void 0);
+  const getMouseEnterHandler = (itemKey, hasSubmenu) => event => {
+    hasSubmenu ? openSubmenu(event.currentTarget, itemKey) : closeActiveSubmenu();
   };
-  const wrapperClassName = useStylesWithRootClass(_fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
-  return jsxs(StyledTextFieldContainer, Object.assign({
-    className: wrapperClassName
+  return jsx(StyledMenuList, Object.assign({
+    classes: {
+      root: rootClasses
+    },
+    "data-testid": dataTestId,
+    dense: dense,
+    id: id,
+    onKeyDown: onKeyDown,
+    style: {
+      height: calculateMaxHeight({
+        isDense: dense,
+        maxVisibleItems,
+        menuItems,
+        menuItemHeight
+      })
+    }
   }, {
-    children: [persistentLabel && jsx(DotInputLabel, Object.assign({}, {
-      disabled: _disabled,
-      error: _error,
-      id,
-      label,
-      required: _required
-    }), void 0), 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)]
+    children: menuItems.map((item, index) => {
+      const {
+        ariaLabel: itemAriaLabel,
+        children,
+        classes,
+        disabled,
+        divider,
+        height,
+        items: subItems,
+        key
+      } = item;
+      const itemHeight = calculateItemHeight(dense, height, menuItemHeight);
+      const isSelected = checkIfMenuItemSelected(key, selectedKey, activeSubmenu);
+      const isFirstItem = index === 0;
+      const hasSubmenu = !!subItems;
+      const hasAutoFocus = checkForAutoFocus(autoFocusItem, isFirstItem);
+      const menuItemClasses = useStylesWithRootClass(listItemClassName$1, hasSubmenu ? listItemWithSubmenuClassName : '', classes ? classes : '');
+      const 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 jsxs(MenuItem, Object.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 && 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);
-};
-
-const rootClassName$W = 'dot-search-input';
-const StyledSearchInput = styled.span.withConfig({
-  displayName: "SearchInputstyles__StyledSearchInput",
-  componentId: "qlwzku-0"
-})(["", ""], () => css(["&.", "{}"], rootClassName$W));
+});
 
-function SearchInput({
-  'data-testid': dataTestId,
-  autoFocus = true,
+const DotMenu = ({
+  anchorEl,
+  ariaLabel,
   className,
-  disabled = false,
-  onChange,
-  onClear,
-  placeholder = 'Search',
-  tooltip = null,
-  value
-}) {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
-  const [searchText, setSearchText] = useState(value);
-  let previousSearchText = '';
-  const handleChange = useCallback(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]);
-  const handleClear = useCallback(() => {
-    setSearchText('');
-    onClear && onClear();
-  }, [onClear]);
-  const searchIcon = jsx(DotIcon, {
-    className: "search-icon",
-    iconId: "search"
-  }, void 0);
-  const clearSearchIcon = jsx(DotIconButton, {
-    iconId: "close",
-    onClick: handleClear,
-    size: "small",
-    tooltip: "Clear search text"
-  }, void 0);
-  return jsx(StyledSearchInput, Object.assign({
-    className: rootClasses
+  'data-testid': dataTestId,
+  dense: _dense = true,
+  disablePortal,
+  id,
+  loading: _loading = false,
+  maxVisibleItems: _maxVisibleItems = DEFAULT_MAX_VISIBLE_ITEMS,
+  menuItemHeight,
+  menuItems: _menuItems = [],
+  menuPlacement: _menuPlacement = 'bottom',
+  onLeave,
+  onSelect,
+  open: _open = false,
+  selectedKey
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className, _loading ? 'loading' : '');
+  const isSubmenu = checkIfSubmenu(anchorEl);
+  const 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.
+  const timeout = isSubmenu || hasSubItems ? {
+    exit: 0,
+    enter: 300
+  } : undefined;
+  const handleSelect = (event, itemKey) => {
+    onLeave && onLeave(event);
+    onSelect && onSelect(event, id, itemKey);
+  };
+  const handleListKeyDown = event => {
+    if (onLeave && event.key === 'Tab') {
+      event.preventDefault();
+      onLeave(event);
+    }
+  };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleClickAway = event => {
+    if (onLeave && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
+      onLeave(event);
+    }
+  };
+  return jsx(StyledPopper, Object.assign({
+    anchorEl: anchorEl,
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-testid": dataTestId,
+    disablePortal: disablePortal,
+    open: _open,
+    placement: _menuPlacement,
+    role: undefined,
+    transition: true
   }, {
-    children: jsx(DotTooltip, Object.assign({
-      placement: "bottom",
-      title: tooltip
+    children: ({
+      TransitionProps,
+      placement
+    }) => jsx(Fade, Object.assign({}, TransitionProps, {
+      style: {
+        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+      },
+      timeout: timeout
     }, {
-      children: 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
+      children: jsx(Paper, {
+        children: jsx(ClickAwayListener, Object.assign({
+          onClickAway: handleClickAway
+        }, {
+          children: _loading ? jsx(DotProgress, {
+            "data-testid": "loading-indicator",
+            tooltip: "Loading Data...",
+            value: 20
+          }, void 0) : jsx(DotMenuList, {
+            autoFocusItem: _open,
+            "data-testid": `${dataTestId}-menu`,
+            dense: _dense,
+            id: id,
+            maxVisibleItems: _maxVisibleItems,
+            menuItemHeight: menuItemHeight,
+            menuItems: _menuItems,
+            onItemSelect: handleSelect,
+            onKeyDown: handleListKeyDown,
+            onSubMenuCreate: ({
+              anchorElement,
+              isOpened,
+              subMenuId,
+              subMenuItems
+            }) => 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);
-}
+};
 
-const rootClassName$V = 'dot-copy-button';
-const StyledCopyButton = styled.span.withConfig({
-  displayName: "CopyButtonstyles__StyledCopyButton",
-  componentId: "sc-18ff0u-0"
+const CreateUUID = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = Math.random() * 16 | 0,
+      v = c === 'x' ? r : r & 0x3 | 0x8;
+    return v.toString(16);
+  });
+};
+
+const rootClassName$S = 'dot-drawer';
+const StyledDrawer = styled(Drawer).withConfig({
+  displayName: "Drawerstyles__StyledDrawer",
+  componentId: "sc-1uiowy0-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.copied-to-clipboard{color:", ";}}"], rootClassName$V, theme.palette.success[400]));
+}) => css(["&.", " .MuiBackdrop-root{background-color:", ";}.dot-drawer-paper{height:", ";padding:", ";width:", ";}"], rootClassName$S, alpha(theme.palette.grey[900], 0.7), ({
+  height,
+  anchor
+}) => anchor === 'left' || anchor === 'right' ? '100%' : height, theme.spacing(2), ({
+  width,
+  anchor
+}) => anchor === 'bottom' || anchor === 'top' ? 'auto' : width));
 
-const DotCopyButton = ({
-  ariaLabel: _ariaLabel = 'Copy to clipboard',
-  copiedTooltip: _copiedTooltip = 'Copied!',
-  copyTooltip: _copyTooltip = 'Copy to clipboard',
-  'data-testid': dataTestId = 'dot-copy-button',
-  value
-}) => {
-  const [showCopiedIcon, setShowCopiedIcon] = useState(false);
-  const 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);
-    }
-  };
-  const copy = () => {
-    copyToClipboard();
-    setShowCopiedIcon(true);
-    setTimeout(function () {
-      setShowCopiedIcon(false);
-    }, 3000);
-    return false;
-  };
-  return jsxs(StyledCopyButton, Object.assign({
-    className: rootClassName$V,
-    "data-testid": dataTestId
-  }, {
-    children: [!showCopiedIcon && jsx(DotIconButton, {
-      ariaLabel: _ariaLabel,
-      "data-testid": `${dataTestId}-button`,
-      iconId: "duplicate",
-      onClick: copy,
-      size: "small",
-      tooltip: _copyTooltip
-    }, void 0), showCopiedIcon && jsx(DotIcon, {
-      className: "copied-to-clipboard",
-      "data-testid": `${dataTestId}-icon`,
-      fontSize: "small",
-      iconId: "check-solid",
-      tooltip: _copiedTooltip
-    }, void 0)]
-  }), void 0);
-};
+const rootClassName$R = 'dot-drawer-header';
+const StyleDrawerHeader = styled.div.withConfig({
+  displayName: "DrawerHeaderstyles__StyleDrawerHeader",
+  componentId: "sc-2d2xd3-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{padding:", ";display:flex;align-items:center;.close-button{margin-left:auto;}}"], rootClassName$R, theme.spacing(0, 0, 2)));
 
-const rootClassName$U = 'dot-link';
-const StyledLink = styled(Link).withConfig({
-  displayName: "Linkstyles__StyledLink",
-  componentId: "sc-1lpmaww-0"
-})(["", ""], () => css(["&.", "{cursor:pointer;&:hover:not(.MuiLink-underlineHover){text-decoration:none;}}"], rootClassName$U));
+const rootClassName$Q = 'dot-icon-btn';
+const StyledIconButton = styled(IconButton).withConfig({
+  displayName: "IconButtonstyles__StyledIconButton",
+  componentId: "eko0kb-0"
+})(["", ""], () => css(["&.", "{font-size:inherit;padding:10px;.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}&.ripple-disabled{&:hover,&:active,&:focus{background:", ";}}"], rootClassName$Q, hoverGray));
 
-const DotLink = ({
+const DotIconButton = ({
   ariaLabel,
-  children,
   className,
-  color: _color = 'primary',
+  color: _color = 'inherit',
   'data-testid': dataTestId,
-  href,
+  disabled: _disabled = false,
+  disableRipple: _disableRipple = false,
+  iconId,
+  iconSize: _iconSize = 'small',
   onClick,
-  onMouseEnter,
-  rel: _rel = 'noreferrer',
-  tabIndex: _tabIndex = 0,
-  target,
   tooltip,
-  underline
+  size: _size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
-  const handleKeyPress = event => {
-    if (onClick && event.key === 'Enter') {
-      event.preventDefault();
-      onClick(event);
-    }
-  };
+  const rippleClassName = _disableRipple ? 'ripple-disabled' : '';
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, rippleClassName, className);
   return jsx(DotTooltip, Object.assign({
+    "data-testid": "icon-button-tooltip",
     title: tooltip
   }, {
-    children: jsx(StyledLink, Object.assign({
+    children: jsx(StyledIconButton, Object.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
+      disableRipple: _disableRipple,
+      disabled: _disabled,
+      onClick: event => onClick && onClick(event),
+      size: _size
     }, {
-      children: children
+      children: jsx(DotIcon, {
+        "data-testid": "button-icon",
+        fontSize: _iconSize,
+        iconId: iconId
+      }, void 0)
     }), 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.
-const 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;
-      }
-  }
-};
-const daiAppsHeaderMenuItem = (count = 0) => ({
-  children: jsxs(DotTypography, Object.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
-});
-const createMenuItem = (url, title, subtitle = null) => jsxs("div", Object.assign({
-  className: "app-menu-item"
-}, {
-  children: [jsx(DotLink, Object.assign({
-    href: url,
-    color: "textPrimary",
-    target: "_blank"
-  }, {
-    children: jsxs("div", Object.assign({
-      className: "logo-title"
-    }, {
-      children: [jsx(DotIcon, {
-        iconId: "open-new-tab"
-      }, void 0), jsxs("div", Object.assign({
-        className: "dot-app-switcher-app-title"
-      }, {
-        children: [jsx(DotTypography, Object.assign({
-          variant: "body1"
-        }, {
-          children: title
-        }), void 0), subtitle && jsx(DotTypography, Object.assign({
-          variant: "body2"
-        }, {
-          children: subtitle
-        }), void 0)]
-      }), void 0)]
-    }), void 0)
-  }), void 0), jsx(DotCopyButton, {
-    copyTooltip: "Copy application URL",
-    value: url
-  }, void 0)]
-}), `app-menu-item-${title}`);
-const createTopLevelMenuItem = (url, logo, title, 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
-  const target = openNewTab ? '_blank' : '_self';
-  return jsxs(DotLink, Object.assign({
-    href: url,
-    color: "textPrimary",
-    target: target
-  }, {
-    children: [jsxs("div", Object.assign({
-      className: "logo-title"
-    }, {
-      children: [jsx(DotAvatar, {
-        alt: "app image",
-        imageSrc: logo,
-        type: "image",
-        variant: "circular"
-      }, void 0), jsx("div", Object.assign({
-        className: "dot-app-switcher-app-title"
-      }, {
-        children: jsx(DotTypography, Object.assign({
-          variant: "body1"
-        }, {
-          children: title
-        }), void 0)
-      }), void 0)]
-    }), void 0), openNewTab && jsx(DotIcon, {
-      iconId: "open-new-tab"
-    }, void 0)]
-  }), `top-menu-item-${title}`);
-};
-const createAppTypeLabel = (appTypeName, logo, appProps) => {
-  const logoProps = logo ? {
-    imageSrc: logo
-  } : {
-    iconId: 'collection'
-  };
-  return jsxs("div", Object.assign({
-    className: "logo-title"
-  }, {
-    children: [jsx(DotAvatar, Object.assign({}, logoProps, {
-      alt: "app image",
-      type: "image",
-      variant: "circular"
-    }), void 0), jsxs("div", Object.assign({
-      className: "dot-app-switcher-app-title"
-    }, {
-      children: [jsx(DotTypography, Object.assign({
-        variant: "body1"
-      }, {
-        children: appTypeName
-      }), void 0), jsxs(DotTypography, Object.assign({
-        variant: "body2"
-      }, {
-        children: ["Instance (", appProps.length, ")"]
-      }), void 0)]
-    }), void 0)]
-  }), void 0);
-};
-const getInstanceStateText = application => {
-  if (application.instance_state === 1) {
-    return 'Production instance';
-  }
-  return 'Non-production instance';
-};
-
-const rootClassName$T = 'dot-drawer';
-const StyledDrawer = styled(Drawer).withConfig({
-  displayName: "Drawerstyles__StyledDrawer",
-  componentId: "sc-1uiowy0-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", " .MuiBackdrop-root{background-color:", ";}.dot-drawer-paper{height:", ";padding:", ";width:", ";}"], rootClassName$T, alpha(theme.palette.grey[900], 0.7), ({
-  height,
-  anchor
-}) => anchor === 'left' || anchor === 'right' ? '100%' : height, theme.spacing(2), ({
-  width,
-  anchor
-}) => anchor === 'bottom' || anchor === 'top' ? 'auto' : width));
-
-const rootClassName$S = 'dot-drawer-header';
-const StyleDrawerHeader = styled.div.withConfig({
-  displayName: "DrawerHeaderstyles__StyleDrawerHeader",
-  componentId: "sc-2d2xd3-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{padding:", ";display:flex;align-items:center;.close-button{margin-left:auto;}}"], rootClassName$S, theme.spacing(0, 0, 2)));
-
 const DotDrawerHeader = ({
   ariaLabel,
   children,
@@ -2391,7 +2247,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   return jsxs(StyleDrawerHeader, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2405,11 +2261,11 @@ const DotDrawerHeader = ({
   }), void 0);
 };
 
-const rootClassName$R = 'dot-drawer-body';
+const rootClassName$P = 'dot-drawer-body';
 const StyleDrawerBody = styled.div.withConfig({
   displayName: "DrawerBodystyles__StyleDrawerBody",
   componentId: "sc-1mpmjdk-0"
-})(["", ""], () => css(["&.", "{display:flex;.dot-drawer-close-button{align-self:self-start;padding:0;margin-left:auto;}}"], rootClassName$R));
+})(["", ""], () => css(["&.", "{display:flex;.dot-drawer-close-button{align-self:self-start;padding:0;margin-left:auto;}}"], rootClassName$P));
 
 const DotDrawerBody = ({
   ariaLabel,
@@ -2420,7 +2276,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
   return jsxs(StyleDrawerBody, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2434,13 +2290,13 @@ const DotDrawerBody = ({
   }), void 0);
 };
 
-const rootClassName$Q = 'dot-drawer-footer';
+const rootClassName$O = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div.withConfig({
   displayName: "DrawerFooterstyles__StyleDrawerFooter",
   componentId: "sc-1ki05ze-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding:", ";}"], rootClassName$Q, theme.spacing(2, 0, 0)));
+}) => css(["&.", "{padding:", ";}"], rootClassName$O, theme.spacing(2, 0, 0)));
 
 const DotDrawerFooter = ({
   ariaLabel,
@@ -2448,7 +2304,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   return jsx(StyleDrawerFooter, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2485,7 +2341,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const headerExists = !!drawerHeaderProps;
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return jsxs(StyledDrawer, Object.assign({
@@ -2528,990 +2384,1235 @@ const DotDrawer = ({
   }), void 0);
 };
 
-const rootClassName$P = 'dot-app-switcher';
-const StyledAppSwitcher = styled(DotDrawer).withConfig({
-  displayName: "AppSwitcherstyles__StyledAppSwitcher",
-  componentId: "hhxfqg-0"
+const fadeIn = keyframes(["from{opacity:0;}to{opacity:1;}"]);
+const StyledDotDrawer = styled(DotDrawer).withConfig({
+  displayName: "NestedListstyles__StyledDotDrawer",
+  componentId: "sc-1wwoqos-0"
 })(["", ""], ({
-  theme
-}) => css(["&.", "{.app-menu-item{display:flex;justify-content:space-between;align-items:center;}.dot-link,.product-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;height:64px;text-decoration:none;cursor:pointer;}.logo-title{display:flex;align-items:center;gap:24px;width:100%;}.dot-avatar{flex-basis:40px;}.dai-apps-title{display:flex;align-items:center;height:32px;padding:", ";background-color:", ";}.dot-app-switcher-app-title{min-width:150px;}.dot-icon{flex-basis:content;}.app-switcher-header{.app-switcher-header-title{padding-left:", ";display:flex;align-items:center;}display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid ", ";margin:", ";padding-bottom:", ";.app-switcher-label{padding-left:", ";}}.app-switcher-back-button{&.dot-button.MuiButton-text{padding-left:0;}}.product-heading{display:flex;align-items:center;gap:24px;padding-bottom:", ";}.product-applications{width:100%;overflow-y:auto;}.product-applications-search{margin-bottom:", ";}}"], 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)));
+  open
+}) => css(["&.", "{.dot-drawer-paper{z-index:", ";animation:", ";}}"], nestedDrawerClassName, open ? levelFirst : levelBottom, open && css(["", " 0.2s cubic-bezier(1,0,1,.01);"], fadeIn)));
 
-const DotAppSwitcherView = ({
-  activeApp,
-  apps,
-  className,
-  noAppTypeLabel: _noAppTypeLabel = 'Other',
-  platformConsoleUrl,
-  onClose,
-  open,
-  searchInstancesThreshold: _searchInstancesThreshold = 5,
-  selectedAppType,
-  yOffset: _yOffset = 48,
-  zIndex: _zIndex = 990
+const DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
+const DotListDivider = ({
+  item,
+  index
 }) => {
-  const dotCoreApiContext = useDotCoreApiContext();
-  let setSelectedAppType = null;
-  if (dotCoreApiContext !== null) {
-    setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
-  }
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
-  const [appTypeMap, setAppTypeMap] = useState();
-  const [appTypeLabels, setAppTypeLabels] = useState();
-  const [appTypeMenuItems, setAppTypeMenuItems] = useState();
-  const [selectedAppTypeAlt, setSelectedAppTypeAlt] = useState(null);
-  const [searchText, setSearchText] = useState('');
-  if (!setSelectedAppType) {
-    selectedAppType = selectedAppTypeAlt;
-    setSelectedAppType = setSelectedAppTypeAlt;
+  if (item.text) {
+    return jsx(ListSubheader, Object.assign({
+      disableSticky: true
+    }, {
+      children: jsx(DotTypography, Object.assign({
+        variant: "overline"
+      }, {
+        children: item.text
+      }), void 0)
+    }), void 0);
   }
-  const showApps = useCallback(appType => {
-    setSelectedAppType(appType);
-  }, []);
-  const showAppTypes = useCallback(() => {
-    setSearchText('');
-    setSelectedAppType(null);
-  }, []);
-  const populateAppTypeMap = useCallback(() => {
-    const newAppTypeMap = new Map();
-    // we'll put Other at the end
-    const otherApps = [];
-    apps === null || apps === void 0 ? void 0 : apps.forEach(app => {
-      const instanceStateText = getInstanceStateText(app);
-      const children = createMenuItem(app.url, app.name, instanceStateText);
-      const searchableContent = `${app.name} ${instanceStateText}`;
-      const appTypeName = app.logo_product_name;
-      let appTypeApps;
-      if (appTypeName) {
-        appTypeApps = newAppTypeMap.get(appTypeName);
-        if (!appTypeApps) {
-          appTypeApps = [];
-          newAppTypeMap.set(appTypeName, appTypeApps);
-        }
-      } else {
-        appTypeApps = otherApps;
-      }
-      appTypeApps.push({
-        children,
-        searchableContent,
-        key: app.id,
-        height: 64
-      });
-    });
-    const keys = Array.from(newAppTypeMap.keys()).sort();
-    const sortedAppTypeMap = new Map();
-    for (const appType of keys) {
-      sortedAppTypeMap.set(appType, newAppTypeMap.get(appType));
-    }
-    let appTypeCount = sortedAppTypeMap.size;
-    if (platformConsoleUrl) {
-      appTypeCount++;
-    }
-    if (otherApps.length > 0) {
-      sortedAppTypeMap.set(_noAppTypeLabel, otherApps);
-    }
-    setAppTypeMap(sortedAppTypeMap);
-    const menuItems = [daiAppsHeaderMenuItem(appTypeCount)];
-    if (platformConsoleUrl) {
-      const children = createTopLevelMenuItem(platformConsoleUrl, getLogoForAppType('Platform'), 'Digital.ai Platform', !window.location.href.startsWith(platformConsoleUrl));
-      menuItems.push({
-        children,
-        key: 'app-switcher-platform-link',
-        height: 64
-      });
-    }
-    const newAppTypeLabels = new Map();
-    sortedAppTypeMap.forEach((singleTypeApps, appTypeName) => {
-      if ((singleTypeApps === null || singleTypeApps === void 0 ? void 0 : singleTypeApps.length) > 0) {
-        const logo = appTypeName === _noAppTypeLabel ? null : getLogoForAppType(appTypeName);
-        newAppTypeLabels.set(appTypeName, {
-          logo,
-          singleTypeApps
-        });
-        menuItems.push({
-          children: jsxs("div", Object.assign({
-            className: "product-menu-item",
-            onClick: () => showApps(appTypeName)
-          }, {
-            children: [createAppTypeLabel(appTypeName, logo, singleTypeApps), jsx(DotIcon, {
-              iconId: "chevron-right"
-            }, void 0)]
-          }), `menu-item-${appTypeName}`),
-          key: appTypeName,
-          height: 64
-        });
-      }
-    });
-    setAppTypeMenuItems(menuItems);
-    setAppTypeLabels(newAppTypeLabels);
-  }, [apps]);
-  const emptyState = useCallback(() => {
-    const currentAppMenuItem = createTopLevelMenuItem(window.location.href, getLogoForAppType(activeApp.product), activeApp.name, false);
-    setAppTypeMenuItems([daiAppsHeaderMenuItem(), {
-      children: currentAppMenuItem,
-      key: 'no_applications_configured',
-      height: 64,
-      disabled: true
-    }]);
-  }, [activeApp]);
-  useEffect(() => {
-    if ((apps === null || apps === void 0 ? void 0 : apps.length) > 0) {
-      populateAppTypeMap();
-    } else {
-      emptyState();
+  return jsx(Divider, {
+    "aria-hidden": true,
+    "data-testid": `divider-${index}`
+  }, void 0);
+};
+const DotList = ({
+  ariaLabel,
+  children,
+  className,
+  component: _component = 'ul',
+  'data-testid': dataTestId,
+  dense: _dense = false,
+  disablePadding: _disablePadding = false,
+  items: _items = [],
+  menuPlacement: _menuPlacement = 'right-start',
+  nestedDrawerLeftSpacing: _nestedDrawerLeftSpacing = 240,
+  nestedListType: _nestedListType = 'expandable',
+  width: _width = 240
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
+  const listRef = useRef();
+  const [listItemIndex, setListItemIndex] = useState(null);
+  const updateSelectedListItem = currentIndex => {
+    currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
+  };
+  return jsxs(StyledList, Object.assign({
+    "aria-label": ariaLabel,
+    classes: {
+      root: rootClasses
+    },
+    component: _component,
+    "data-testid": dataTestId,
+    dense: _dense,
+    disablePadding: _disablePadding,
+    ref: listRef,
+    style: {
+      width: listWidth
     }
-  }, [apps]);
-  const onAppInstanceSearchTextChange = useCallback(text => {
-    setSearchText(text);
-  }, []);
-  const clearAppInstanceSearchText = useCallback(() => {
-    setSearchText('');
-  }, []);
-  const closeHandler = useCallback(event => {
-    setSearchText('');
-    onClose && onClose(event);
-  }, [onClose]);
-  const filteredAppInstances = useCallback(() => {
-    var _a;
-    return (_a = appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.filter(item => {
-      let isMatch = !searchText;
-      if (searchText) {
-        const testStr = isLowerCase(searchText) ? item.searchableContent.toLowerCase() : item.searchableContent;
-        isMatch = testStr.indexOf(searchText) >= 0;
+  }, {
+    children: [_items.map((item, index) => {
+      const handleListItemClick = e => {
+        var _a;
+        updateSelectedListItem(index);
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+      };
+      const 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 jsx(Fragment, {
+          children: item.child
+        }, `item-child-${index}`);
       }
-      return isMatch;
-    }).map(item => item.children);
-  }, [appTypeMap, selectedAppType, searchText]);
-  const content = () => {
-    var _a;
-    if (selectedAppType && appTypeMap && appTypeLabels) {
-      const labelConfig = appTypeLabels.get(selectedAppType);
-      return jsxs(Fragment, {
-        children: [jsx("span", {
-          children: jsx(DotButton, Object.assign({
-            className: "app-switcher-back-button",
-            type: "text",
-            onClick: showAppTypes,
-            startIcon: jsx(DotIcon, {
-              iconId: "back"
-            }, void 0)
-          }, {
-            children: jsx("span", {
-              children: "Back"
-            }, void 0)
-          }), void 0)
-        }, void 0), jsx("div", Object.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 && jsx("div", {
-          children: jsx(SearchInput, {
-            "data-testid": "app-instance-search-input",
-            onChange: onAppInstanceSearchTextChange,
-            onClear: clearAppInstanceSearchText,
-            value: searchText
-          }, void 0)
-        }, void 0), jsx("div", Object.assign({
-          className: "product-applications"
-        }, {
-          children: filteredAppInstances()
-        }), void 0)]
+      if (item.divider) {
+        return jsx(DotListDivider, {
+          index: index,
+          item: item
+        }, `divider-${index}`);
+      }
+      return 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);
+};
+const DotListItem = ({
+  ariaLabel,
+  className,
+  component: _component2 = 'li',
+  'data-testid': dataTestId,
+  divider: _divider = false,
+  endIcon,
+  href,
+  isOpened,
+  onClick,
+  onMenuLeave,
+  items: _items2 = [],
+  menuPlacement,
+  nestedDrawerLeftSpacing,
+  nestedListType,
+  primaryText,
+  secondaryText,
+  selected,
+  startIcon,
+  target,
+  text,
+  tooltip,
+  tooltipPlacement: _tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT
+}) => {
+  const hasChildren = _items2.length > 0;
+  const isFlyout = nestedListType === 'menu' && hasChildren;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const showEndIcon = endIcon || hasChildren;
+  const rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
+  const toggleOpen = event => setAnchorEl(event.currentTarget);
+  const handleClick = event => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    toggleOpen(event);
+  };
+  const handleMenuLeave = event => onMenuLeave(event);
+  const renderListItemText = () => primaryText && secondaryText ? jsx(ListItemText, {
+    primary: primaryText,
+    secondary: secondaryText
+  }, void 0) : jsx(DotTypography, Object.assign({
+    variant: "body1"
+  }, {
+    children: text
+  }), void 0);
+  const renderListItemEndIcon = () => {
+    if (hasChildren || !endIcon) {
+      return jsx(DotIcon, {
+        iconId: hasChildren && getChevronIcon(nestedListType, isOpened)
       }, void 0);
     }
-    return appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(item => item.children);
+    return endIcon;
   };
-  const header = {
-    className: 'app-switcher-header',
-    children: jsxs("div", Object.assign({
-      className: "app-switcher-header-title",
-      style: {
-        marginTop: _yOffset + 'px',
-        width: '80%'
-      }
+  return jsxs(Fragment$1, {
+    children: [jsx(DotTooltip, Object.assign({
+      "data-testid": `${dataTestId}-tooltip`,
+      placement: _tooltipPlacement,
+      title: tooltip
     }, {
-      children: [jsx(DotAvatar, {
-        iconId: "apps",
-        alt: "app image",
-        type: "image",
-        variant: "circular"
-      }, void 0), jsx(DotTypography, Object.assign({
-        className: "app-switcher-label"
+      children: jsxs(StyledListItem, Object.assign({
+        "aria-label": ariaLabel,
+        button: true,
+        classes: {
+          root: rootClasses
+        },
+        component: href && !onClick ? 'a' : _component2,
+        "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 jsx(StyledAppSwitcher, Object.assign({
-    className: rootClasses,
-    ModalProps: {
-      style: {
-        zIndex: _zIndex
-      },
-      hideBackdrop: true
-    },
-    drawerHeaderProps: header,
-    variant: "temporary",
-    width: "340px",
-    open: open,
-    onClose: closeHandler
-  }, {
-    children: content()
-  }), void 0);
+        children: [jsxs("span", Object.assign({
+          className: listItemLinkClassName
+        }, {
+          children: [startIcon && jsx(ListItemIcon, {
+            children: startIcon
+          }, void 0), renderListItemText()]
+        }), void 0), showEndIcon && renderListItemEndIcon()]
+      }), void 0)
+    }), void 0), hasChildren && jsx(NestedList, {
+      anchorEl: anchorEl,
+      ariaLabel: "nested list",
+      "data-testid": "nestedList",
+      items: _items2,
+      menuPlacement: menuPlacement,
+      nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+      onMenuLeave: handleMenuLeave,
+      open: isOpened,
+      type: nestedListType
+    }, void 0)]
+  }, void 0);
 };
-const DotAppSwitcher = _a => {
-  var {
-      accountId,
-      includePlatformConsole = true,
-      onClose
-    } = _a,
-    commonProps = __rest(_a, ["accountId", "includePlatformConsole", "onClose"]);
-  const {
-    applications,
-    applicationsLoading,
-    applicationsError,
-    loadApplications,
-    isAppSwitcherOpen: open,
-    platformConsoleUrl,
-    setIsAppSwitcherOpen: setOpen,
-    selectedAppSwitcherAppType: selectedAppType,
-    setSelectedAppSwitcherAppType: setSelectedAppType
-  } = useDotCoreApiContext();
-  useEffect(() => {
-    if ((!applications || applications.length === 0) && open) {
-      loadApplications(accountId);
-    }
-  }, [accountId, open]);
-  if (applicationsError) {
-    console.error('Error loading application list in AppSwitcher', applicationsError);
-  }
-  const closeHandler = useCallback(event => {
-    setOpen(false);
-    setSelectedAppType(null);
-    onClose && onClose(event);
-  }, [onClose]);
-  const viewProps = includePlatformConsole ? Object.assign(Object.assign({}, commonProps), {
-    platformConsoleUrl
-  }) : Object.assign({}, commonProps);
-  if (!applicationsLoading && !applicationsError) {
-    return jsx(DotAppSwitcherView, Object.assign({}, viewProps, {
-      open: open,
-      apps: applications,
-      selectedAppType: selectedAppType,
-      onClose: closeHandler
+const NestedList = ({
+  ariaLabel,
+  anchorEl,
+  'data-testid': dataTestId,
+  items,
+  menuPlacement,
+  nestedDrawerLeftSpacing,
+  onMenuLeave,
+  open,
+  parentItemIndex,
+  type
+}) => {
+  const flyoutItemClasses = useStylesWithRootClass(listItemRootClass, flyoutListItemClassName);
+  const flyoutSpanClasses = useStylesWithRootClass(listItemLinkClassName, flyoutItemLinkClassName);
+  if (type === 'expandable') {
+    return jsx(Collapse, Object.assign({
+      in: open,
+      timeout: "auto",
+      unmountOnExit: true
+    }, {
+      children: jsx(DotList, {
+        ariaLabel: ariaLabel,
+        className: nestedListClassName,
+        component: "div",
+        "data-testid": dataTestId,
+        disablePadding: true,
+        items: items
+      }, parentItemIndex)
     }), void 0);
   }
-  return null;
-};
-
-const rootClassName$O = 'dot-list';
-const listItemRootClass = 'dot-list-item';
-const nestedListClassName = 'dot-nested-list';
-const nestedDrawerClassName = 'dot-nested-drawer';
-const StyledList = styled(List).withConfig({
-  displayName: "Liststyles__StyledList",
-  componentId: "wxwqwr-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], rootClassName$O, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1)));
-
-const getChevronIcon = (nestedListType, isOpened) => {
-  if (nestedListType !== 'expandable') {
-    return 'chevron-right';
+  if (type === 'menu') {
+    const menuItems = items.map((item, index) => {
+      const {
+        href,
+        target,
+        onClick,
+        tooltip,
+        tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT,
+        text
+      } = item;
+      return {
+        children: jsx(DotTooltip, Object.assign({
+          placement: tooltipPlacement,
+          title: tooltip
+        }, {
+          children: jsx(StyledListItem, Object.assign({
+            className: flyoutItemClasses,
+            component: href && !onClick ? 'a' : null,
+            "data-testid": `${dataTestId}-item-${index}`,
+            href: href,
+            onClick: onClick,
+            target: target
+          }, {
+            children: jsxs("span", Object.assign({
+              className: flyoutSpanClasses
+            }, {
+              children: [item.startIcon, jsx(DotTypography, Object.assign({
+                variant: "body1"
+              }, {
+                children: text
+              }), void 0)]
+            }), void 0)
+          }), `${parentItemIndex}-${index}`)
+        }), `${parentItemIndex}-${index}-tooltip`),
+        classes: '',
+        key: String(index)
+      };
+    });
+    return 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 jsx(StyledDotDrawer, Object.assign({
+      PaperProps: {
+        style: {
+          left: `${nestedDrawerLeftSpacing}px`
+        }
+      },
+      anchor: "left",
+      className: nestedDrawerClassName,
+      "data-testid": "nested-drawer",
+      open: open,
+      variant: "persistent"
+    }, {
+      children: jsx(DotList, {
+        ariaLabel: ariaLabel,
+        className: nestedListClassName,
+        component: "div",
+        "data-testid": dataTestId,
+        disablePadding: true,
+        items: items,
+        width: '100%'
+      }, parentItemIndex)
+    }), void 0);
   }
-  return 'chevron-down';
 };
 
-const flyoutListItemClassName = 'dot-flyout-list-item';
-const flyoutItemLinkClassName = 'dot-flyout-item-link';
-const listItemLinkClassName = 'dot-list-item-link';
-const StyledListItem = styled(ListItem).withConfig({
-  displayName: "ListItemstyles__StyledListItem",
-  componentId: "sc-1fawh8v-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{&.", "{padding:0;}p.MuiTypography-root{margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
-
-const rootClassName$N = 'dot-progress';
-const StyledCircularProgress = styled(CircularProgress).withConfig({
-  displayName: "Progressstyles__StyledCircularProgress",
-  componentId: "sc-1gs77rb-0"
-})(["&.", "{&.MuiCircularProgress-colorSecondary{color:#649a3d;}}"], rootClassName$N);
-
-const DotProgress = ({
-  ariaLabel,
-  color: _color = 'secondary',
-  className,
+const DotInputLabel = ({
   'data-testid': dataTestId,
-  size: _size = 40,
-  thickness: _thickness = 3.6,
-  tooltip: _tooltip = 'loading data',
-  value,
-  variant: _variant = 'indeterminate'
+  disabled: _disabled = false,
+  error: _error = false,
+  id,
+  label,
+  required
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
-  return jsx(DotTooltip, Object.assign({
-    title: _tooltip
+  return jsx(StyledInputLabel, Object.assign({
+    "data-testid": dataTestId,
+    classes: {
+      root: labelClassName
+    },
+    disabled: _disabled,
+    error: _error,
+    htmlFor: id,
+    required: required,
+    shrink: false,
+    variant: "outlined"
   }, {
-    children: jsx(StyledCircularProgress, {
-      "aria-label": ariaLabel,
-      classes: {
-        root: rootClasses
-      },
-      color: _color,
-      "data-testid": dataTestId,
-      size: _size,
-      thickness: _thickness,
-      value: value,
-      variant: _variant
-    }, void 0)
+    children: jsx(DotTypography, Object.assign({
+      variant: "subtitle2"
+    }, {
+      children: label
+    }), void 0)
   }), void 0);
 };
 
-const levelBottom = -1;
-const levelFirst = 1;
-const levelSecond = 10;
-const levelThird = 100;
-const levelFourth = 1000;
-const levelTop = 9999;
-
-var variables = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  levelBottom: levelBottom,
-  levelFirst: levelFirst,
-  levelSecond: levelSecond,
-  levelThird: levelThird,
-  levelFourth: levelFourth,
-  levelTop: levelTop
-});
-
-const rootClassName$M = 'dot-popper';
-const StyledPopper$1 = styled(Popper).withConfig({
-  displayName: "Popperstyles__StyledPopper",
-  componentId: "sd1h8p-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{font-family:", ";font-size:", "px;}"], rootClassName$M, theme.typography.fontFamily, theme.typography.body1.fontSize));
-
-const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$L = 'dot-menu';
-const getListMaxHeight = maxHeight => isString$1(maxHeight) ? maxHeight : `${maxHeight}px`;
-const StyledPopper = styled(Popper).withConfig({
-  displayName: "Menustyles__StyledPopper",
-  componentId: "sc-134fmqu-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{font-family:", ";font-size:", "px;z-index:", ";}&.", ",&.", "{&.loading .MuiPaper-root{align-items:center;display:flex;justify-content:center;min-height:200px;min-width:200px;}ul,.dot-action-item{.dot-action-item-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;}}ul{box-sizing:content-box;min-width:112px;overflow:auto;", " .dot-li{min-height:auto;}}.dot-action-item{height:", ";border-top:1px solid ", ";line-height:inherit;button.dot-button{border-radius:", ";justify-content:flex-start;height:100%;margin:0;&:focus-visible{background-color:", ";}.MuiButton-label{gap:", ";.MuiButton-startIcon{margin-left:0;.dot-icon{flex-shrink:0;}}}}}}"], rootClassName$M, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$L, rootClassName$M, ({
-  $maxHeight
-}) => $maxHeight !== undefined && `
-          max-height: ${getListMaxHeight($maxHeight)};
-        `, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.layer.n100, theme.spacing(3)));
-
-const MENU_ITEM_HEIGHT_NORMAL = 48;
-const MENU_ITEM_HEIGHT_DENSE = 36;
-const DEFAULT_MAX_VISIBLE_ITEMS = 7;
-
-const rootClassName$K = 'dot-ul';
-const listItemClassName$1 = 'dot-li';
-const listItemWithSubmenuClassName = 'dot-li-with-submenu';
-const StyledMenuList = styled(MenuList).withConfig({
-  displayName: "MenuListstyles__StyledMenuList",
-  componentId: "yqdwwg-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{.dot-li{font-size:", "px;justify-content:space-between;gap:", ";&:hover{background:", ";}&.Mui-selected,&.Mui-selected:hover{background:", ";}&.", "{padding-right:", ";}}}"], rootClassName$K, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5)));
-
-const getDefaultItemHeight = isDense => isDense ? MENU_ITEM_HEIGHT_DENSE : MENU_ITEM_HEIGHT_NORMAL;
-const 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;
-  }
-  const itemHeightType = typeof menuItemHeight;
-  if (itemHeightType === 'number' || itemHeightType === 'string') {
-    return menuItemHeight;
-  } else {
-    return getDefaultItemHeight(isDense);
-  }
-};
-const getNumberOfVisibleItems = (numberOfItems, maxVisibleItems) => {
-  if (maxVisibleItems && maxVisibleItems > 0) {
-    return maxVisibleItems <= numberOfItems ? maxVisibleItems : numberOfItems;
-  }
-  return DEFAULT_MAX_VISIBLE_ITEMS;
-};
-const calculateMaxHeight = ({
-  isDense,
-  maxVisibleItems,
-  menuItems,
-  menuItemHeight
+const DELAY_MS = 300;
+const EndAdornment = ({
+  endAdornmentTooltip,
+  error,
+  dataTestId,
+  endIcon,
+  success,
+  warning
 }) => {
-  // if menuItemHeight is "auto" set maxHeight as same
-  if (typeof menuItemHeight === 'string') {
-    return menuItemHeight;
-  }
-  // If 'menuItemHeight' is set it will take precedence here
-  const itemHeight = menuItemHeight ? menuItemHeight : getDefaultItemHeight(isDense);
-  let maxHeight = 0;
-  const numberOfVisibleItems = getNumberOfVisibleItems(menuItems.length, maxVisibleItems);
-  const visibleItems = menuItems.slice(0, numberOfVisibleItems);
-  visibleItems.forEach(({
-    height
-  }) => {
-    const customItemHeight = height ? height : itemHeight;
-    // + 3 is for bottom margin of menuItem
-    maxHeight += customItemHeight + 3;
-  });
-  return maxHeight;
-};
-const checkForSubItems = menuItems => menuItems.some(menuItem => menuItem.items && menuItems.length > 0);
-const checkIfSubmenu = anchorElement => {
-  if (!anchorElement) return false;
-  return anchorElement.classList.contains(listItemWithSubmenuClassName);
-};
-const checkIfMenuItemSelected = (key, selectedKey, activeSubmenu) => {
-  return selectedKey === key || activeSubmenu === key;
+  const renderIcon = iconType => jsx(DotIcon, {
+    "data-testid": dataTestId && `${dataTestId}-${iconType}-icon`,
+    iconId: `${iconType}-solid`
+  }, void 0);
+  const errorIcon = error && renderIcon('error');
+  const successIcon = success && renderIcon('check');
+  const warningIcon = warning && renderIcon('warning');
+  const endAdornmentIcon = endIcon || errorIcon || warningIcon || successIcon;
+  const styledAdornment = jsx(StyledAdornment, Object.assign({
+    className: `${adornmentIconClassName} end`,
+    position: "end"
+  }, {
+    children: endAdornmentIcon
+  }), void 0);
+  return endAdornmentTooltip ? jsx(DotTooltip, Object.assign({
+    title: endAdornmentTooltip
+  }, {
+    children: styledAdornment
+  }), void 0) : styledAdornment;
 };
-const checkForAutoFocus = (autoFocusItem, isFirstItem) => !!(autoFocusItem && isFirstItem);
-
-/**
- * Since this component is used inside 'ClickAwayListener',
- * it needs to be contained within 'forwardRef' function
- */
-const DotMenuList = /*#__PURE__*/forwardRef(({
-  autoFocusItem,
+const getInitialState = value => ({
+  inputValue: value || ''
+});
+const DotInputText = ({
+  autoComplete: _autoComplete = 'off',
+  autoFocus,
   className,
+  defaultValue,
   'data-testid': dataTestId,
-  dense,
+  disabled: _disabled = false,
+  error: _error = false,
+  endAdornmentTooltip,
+  fullWidth: _fullWidth = true,
+  hasDebounce,
+  helperText,
+  endIcon,
   id,
-  maxVisibleItems,
-  menuItemHeight,
-  menuItems,
-  onItemSelect,
+  inputRef,
+  label,
+  maxRows,
+  minRows,
+  multiline: _multiline = false,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
   onKeyDown,
-  onSubMenuCreate,
-  selectedKey
-}, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
-  const [activeSubmenu, setActiveSubmenu] = useState(null);
-  const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
-  const openSubmenu = (target, itemKey) => {
-    // Set new anchor for submenu and active submenu key
-    // so that new submenu can be opened
-    setSubItemAnchorEl(target);
-    setActiveSubmenu(itemKey);
+  onMouseUp,
+  persistentLabel,
+  placeholder,
+  readOnly: _readOnly = false,
+  required: _required = false,
+  shrink,
+  startIcon,
+  size: _size = 'small',
+  success,
+  type: _type = 'text',
+  value,
+  warning: _warning = false
+}) => {
+  const hasError = _error && errorClassName;
+  const hasWarning = !_error && _warning && warningClassName;
+  const hasSuccess = !_error && !_warning && success && successClassName;
+  const hasEndAdornmentIcon = endIcon || _error || hasWarning || hasSuccess;
+  // This state is used only with debounce feature enabled
+  const [inputTextState, setInputTextState] = useState(hasDebounce && getInitialState(value));
+  const rootStyles = useStylesWithRootClass(rootClassName$10, hasError, hasWarning, hasSuccess, _readOnly ? 'read-only' : '');
+  // Used to control text value from the consumer component
+  // when debounce feature is enabled
+  useEffect(() => {
+    if (hasDebounce && value !== inputTextState.inputValue) {
+      setInputTextState(getInitialState(value));
+    }
+  }, [value]);
+  // Improve performance by avoiding callback execution
+  // on each keystroke (if debounce feature is active)
+  useEffect(() => {
+    // Do not proceed if debounce feature is turned
+    // off or there is no event defined
+    if (!hasDebounce || !inputTextState || !inputTextState.changeEvent || !onChange) return;
+    const handler = setTimeout(() => {
+      onChange(inputTextState.changeEvent);
+    }, DELAY_MS);
+    return () => clearTimeout(handler);
+  }, [inputTextState]);
+  const 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);
   };
-  const 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);
+  const inputTextValue = hasDebounce ? inputTextState.inputValue : value;
+  // Don't use default value when debounce feature is enabled because
+  // in that case component is controlled
+  const defaultInputValue = hasDebounce ? undefined : defaultValue;
+  const startAdornmentIcon = () => {
+    if (!startIcon) return null;
+    return jsx(StyledAdornment, Object.assign({
+      className: `${adornmentIconClassName} start`,
+      position: "start"
+    }, {
+      children: startIcon
+    }), void 0);
   };
-  const getMouseEnterHandler = (itemKey, hasSubmenu) => event => {
-    hasSubmenu ? openSubmenu(event.currentTarget, itemKey) : closeActiveSubmenu();
+  const endAdornmentIcon = () => {
+    if (!hasEndAdornmentIcon) return null;
+    return jsx(EndAdornment, Object.assign({}, {
+      endAdornmentTooltip,
+      error: _error,
+      dataTestId,
+      endIcon,
+      success,
+      warning: _warning
+    }), void 0);
   };
-  return jsx(StyledMenuList, Object.assign({
-    classes: {
-      root: rootClasses
-    },
-    "data-testid": dataTestId,
-    dense: dense,
-    id: id,
-    onKeyDown: onKeyDown,
-    style: {
-      height: calculateMaxHeight({
-        isDense: dense,
-        maxVisibleItems,
-        menuItems,
-        menuItemHeight
-      })
-    }
+  const wrapperClassName = useStylesWithRootClass(_fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
+  return jsxs(StyledTextFieldContainer, Object.assign({
+    className: wrapperClassName
   }, {
-    children: menuItems.map((item, index) => {
-      const {
-        ariaLabel: itemAriaLabel,
-        children,
-        classes,
-        disabled,
-        divider,
-        height,
-        items: subItems,
-        key
-      } = item;
-      const itemHeight = calculateItemHeight(dense, height, menuItemHeight);
-      const isSelected = checkIfMenuItemSelected(key, selectedKey, activeSubmenu);
-      const isFirstItem = index === 0;
-      const hasSubmenu = !!subItems;
-      const hasAutoFocus = checkForAutoFocus(autoFocusItem, isFirstItem);
-      const menuItemClasses = useStylesWithRootClass(listItemClassName$1, hasSubmenu ? listItemWithSubmenuClassName : '', classes ? classes : '');
-      const 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 jsxs(MenuItem, Object.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 && jsx(DotIcon, {
-          "data-testid": "dot-item-arrow-icon",
-          iconId: "arrow-right"
-        }, void 0), hasSubmenu && onSubMenuCreate({
-          anchorElement: subItemAnchorEl,
-          isOpened: isSelected,
-          subMenuId: key,
-          subMenuItems: subItems
-        })]
-      }), key);
-    })
+    children: [persistentLabel && jsx(DotInputLabel, Object.assign({}, {
+      disabled: _disabled,
+      error: _error,
+      id,
+      label,
+      required: _required
+    }), void 0), 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);
-});
+};
 
-const DotMenu = ({
-  anchorEl,
-  ariaLabel,
-  className,
+const rootClassName$N = 'dot-search-input';
+const StyledSearchInput = styled.span.withConfig({
+  displayName: "SearchInputstyles__StyledSearchInput",
+  componentId: "qlwzku-0"
+})(["", ""], () => css(["&.", "{}"], rootClassName$N));
+
+function SearchInput({
   'data-testid': dataTestId,
-  dense: _dense = true,
-  disablePortal,
-  id,
-  loading: _loading = false,
-  maxVisibleItems: _maxVisibleItems = DEFAULT_MAX_VISIBLE_ITEMS,
-  menuItemHeight,
-  menuItems: _menuItems = [],
-  menuPlacement: _menuPlacement = 'bottom',
-  onLeave,
-  onSelect,
-  open: _open = false,
-  selectedKey
+  autoFocus = true,
+  className,
+  disabled = false,
+  onChange,
+  onClear,
+  placeholder = 'Search',
+  tooltip = null,
+  value
+}) {
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
+  const [searchText, setSearchText] = useState(value);
+  let previousSearchText = '';
+  const handleChange = useCallback(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]);
+  const handleClear = useCallback(() => {
+    setSearchText('');
+    onClear && onClear();
+  }, [onClear]);
+  const searchIcon = jsx(DotIcon, {
+    className: "search-icon",
+    iconId: "search"
+  }, void 0);
+  const clearSearchIcon = jsx(DotIconButton, {
+    iconId: "close",
+    onClick: handleClear,
+    size: "small",
+    tooltip: "Clear search text"
+  }, void 0);
+  return jsx(StyledSearchInput, Object.assign({
+    className: rootClasses
+  }, {
+    children: jsx(DotTooltip, Object.assign({
+      placement: "bottom",
+      title: tooltip
+    }, {
+      children: 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);
+}
+
+const rootClassName$M = 'dot-copy-button';
+const StyledCopyButton = styled.span.withConfig({
+  displayName: "CopyButtonstyles__StyledCopyButton",
+  componentId: "sc-18ff0u-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{.copied-to-clipboard{color:", ";}}"], rootClassName$M, theme.palette.success[400]));
+
+const DotCopyButton = ({
+  ariaLabel: _ariaLabel = 'Copy to clipboard',
+  copiedTooltip: _copiedTooltip = 'Copied!',
+  copyTooltip: _copyTooltip = 'Copy to clipboard',
+  'data-testid': dataTestId = 'dot-copy-button',
+  value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className, _loading ? 'loading' : '');
-  const isSubmenu = checkIfSubmenu(anchorEl);
-  const 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.
-  const timeout = isSubmenu || hasSubItems ? {
-    exit: 0,
-    enter: 300
-  } : undefined;
-  const handleSelect = (event, itemKey) => {
-    onLeave && onLeave(event);
-    onSelect && onSelect(event, id, itemKey);
-  };
-  const handleListKeyDown = event => {
-    if (onLeave && event.key === 'Tab') {
-      event.preventDefault();
-      onLeave(event);
+  const [showCopiedIcon, setShowCopiedIcon] = useState(false);
+  const 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);
     }
   };
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleClickAway = event => {
-    if (onLeave && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
-      onLeave(event);
-    }
+  const copy = () => {
+    copyToClipboard();
+    setShowCopiedIcon(true);
+    setTimeout(function () {
+      setShowCopiedIcon(false);
+    }, 3000);
+    return false;
   };
-  return jsx(StyledPopper, Object.assign({
-    anchorEl: anchorEl,
-    "aria-label": ariaLabel,
-    className: rootClasses,
-    "data-testid": dataTestId,
-    disablePortal: disablePortal,
-    open: _open,
-    placement: _menuPlacement,
-    role: undefined,
-    transition: true
+  return jsxs(StyledCopyButton, Object.assign({
+    className: rootClassName$M,
+    "data-testid": dataTestId
   }, {
-    children: ({
-      TransitionProps,
-      placement
-    }) => jsx(Fade, Object.assign({}, TransitionProps, {
-      style: {
-        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
-      },
-      timeout: timeout
-    }, {
-      children: jsx(Paper, {
-        children: jsx(ClickAwayListener, Object.assign({
-          onClickAway: handleClickAway
-        }, {
-          children: _loading ? jsx(DotProgress, {
-            "data-testid": "loading-indicator",
-            tooltip: "Loading Data...",
-            value: 20
-          }, void 0) : jsx(DotMenuList, {
-            autoFocusItem: _open,
-            "data-testid": `${dataTestId}-menu`,
-            dense: _dense,
-            id: id,
-            maxVisibleItems: _maxVisibleItems,
-            menuItemHeight: menuItemHeight,
-            menuItems: _menuItems,
-            onItemSelect: handleSelect,
-            onKeyDown: handleListKeyDown,
-            onSubMenuCreate: ({
-              anchorElement,
-              isOpened,
-              subMenuId,
-              subMenuItems
-            }) => 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: [!showCopiedIcon && jsx(DotIconButton, {
+      ariaLabel: _ariaLabel,
+      "data-testid": `${dataTestId}-button`,
+      iconId: "duplicate",
+      onClick: copy,
+      size: "small",
+      tooltip: _copyTooltip
+    }, void 0), showCopiedIcon && jsx(DotIcon, {
+      className: "copied-to-clipboard",
+      "data-testid": `${dataTestId}-icon`,
+      fontSize: "small",
+      iconId: "check-solid",
+      tooltip: _copiedTooltip
+    }, void 0)]
   }), void 0);
 };
 
-const CreateUUID = () => {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = Math.random() * 16 | 0,
-      v = c === 'x' ? r : r & 0x3 | 0x8;
-    return v.toString(16);
-  });
-};
-
-const fadeIn = keyframes(["from{opacity:0;}to{opacity:1;}"]);
-const StyledDotDrawer = styled(DotDrawer).withConfig({
-  displayName: "NestedListstyles__StyledDotDrawer",
-  componentId: "sc-1wwoqos-0"
-})(["", ""], ({
-  open
-}) => css(["&.", "{.dot-drawer-paper{z-index:", ";animation:", ";}}"], nestedDrawerClassName, open ? levelFirst : levelBottom, open && css(["", " 0.2s cubic-bezier(1,0,1,.01);"], fadeIn)));
+const rootClassName$L = 'dot-link';
+const StyledLink = styled(Link).withConfig({
+  displayName: "Linkstyles__StyledLink",
+  componentId: "sc-1lpmaww-0"
+})(["", ""], () => css(["&.", "{cursor:pointer;&:hover:not(.MuiLink-underlineHover){text-decoration:none;}}"], rootClassName$L));
 
-const DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
-const DotListDivider = ({
-  item,
-  index
-}) => {
-  if (item.text) {
-    return jsx(ListSubheader, Object.assign({
-      disableSticky: true
-    }, {
-      children: jsx(DotTypography, Object.assign({
-        variant: "overline"
-      }, {
-        children: item.text
-      }), void 0)
-    }), void 0);
-  }
-  return jsx(Divider, {
-    "aria-hidden": true,
-    "data-testid": `divider-${index}`
-  }, void 0);
-};
-const DotList = ({
+const DotLink = ({
   ariaLabel,
   children,
   className,
-  component: _component = 'ul',
-  'data-testid': dataTestId,
-  dense: _dense = false,
-  disablePadding: _disablePadding = false,
-  items: _items = [],
-  menuPlacement: _menuPlacement = 'right-start',
-  nestedDrawerLeftSpacing: _nestedDrawerLeftSpacing = 240,
-  nestedListType: _nestedListType = 'expandable',
-  width: _width = 240
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
-  const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
-  const listRef = useRef();
-  const [listItemIndex, setListItemIndex] = useState(null);
-  const updateSelectedListItem = currentIndex => {
-    currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
-  };
-  return jsxs(StyledList, Object.assign({
-    "aria-label": ariaLabel,
-    classes: {
-      root: rootClasses
-    },
-    component: _component,
-    "data-testid": dataTestId,
-    dense: _dense,
-    disablePadding: _disablePadding,
-    ref: listRef,
-    style: {
-      width: listWidth
-    }
-  }, {
-    children: [_items.map((item, index) => {
-      const handleListItemClick = e => {
-        var _a;
-        updateSelectedListItem(index);
-        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-      };
-      const 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 jsx(Fragment$1, {
-          children: item.child
-        }, `item-child-${index}`);
-      }
-      if (item.divider) {
-        return jsx(DotListDivider, {
-          index: index,
-          item: item
-        }, `divider-${index}`);
-      }
-      return 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);
-};
-const DotListItem = ({
-  ariaLabel,
-  className,
-  component: _component2 = 'li',
+  color: _color = 'primary',
   'data-testid': dataTestId,
-  divider: _divider = false,
-  endIcon,
   href,
-  isOpened,
   onClick,
-  onMenuLeave,
-  items: _items2 = [],
-  menuPlacement,
-  nestedDrawerLeftSpacing,
-  nestedListType,
-  primaryText,
-  secondaryText,
-  selected,
-  startIcon,
+  onMouseEnter,
+  onPointerDown,
+  rel: _rel = 'noreferrer',
+  tabIndex: _tabIndex = 0,
   target,
-  text,
   tooltip,
-  tooltipPlacement: _tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT
+  underline
 }) => {
-  const hasChildren = _items2.length > 0;
-  const isFlyout = nestedListType === 'menu' && hasChildren;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const showEndIcon = endIcon || hasChildren;
-  const rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
-  const toggleOpen = event => setAnchorEl(event.currentTarget);
-  const handleClick = event => {
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    toggleOpen(event);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
+  const handleKeyPress = event => {
+    if (onClick && event.key === 'Enter') {
+      event.preventDefault();
+      onClick(event);
+    }
   };
-  const handleMenuLeave = event => onMenuLeave(event);
-  const renderListItemText = () => primaryText && secondaryText ? jsx(ListItemText, {
-    primary: primaryText,
-    secondary: secondaryText
-  }, void 0) : jsx(DotTypography, Object.assign({
-    variant: "body1"
+  return jsx(DotTooltip, Object.assign({
+    title: tooltip
   }, {
-    children: text
+    children: jsx(StyledLink, Object.assign({
+      "aria-label": ariaLabel,
+      classes: {
+        root: rootClasses
+      },
+      color: _color,
+      "data-testid": dataTestId,
+      href: href,
+      onClick: onClick,
+      onKeyPress: handleKeyPress,
+      onMouseEnter: onMouseEnter,
+      onPointerDown: onPointerDown,
+      rel: _rel,
+      tabIndex: _tabIndex,
+      target: target,
+      underline: underline
+    }, {
+      children: children
+    }), void 0)
   }), void 0);
-  const renderListItemEndIcon = () => {
-    if (hasChildren || !endIcon) {
-      return jsx(DotIcon, {
-        iconId: hasChildren && getChevronIcon(nestedListType, isOpened)
-      }, 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.
+const 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;
+      }
+  }
+};
+const daiAppsHeaderMenuItem = (count = 0) => {
+  return sectionHeaderMenuItem('DIGITAL.AI APPLICATIONS', count, true);
+};
+const sectionHeaderMenuItem = (title, count, showEmpty = false) => {
+  const children = showEmpty || count > 0 ? jsxs(DotTypography, Object.assign({
+    className: "dai-apps-title"
+  }, {
+    children: [title, count > 0 ? ` (${count})` : '']
+  }), `menu-item-section-title-${title}`) : null;
+  return {
+    children,
+    key: `dai-apps-section-header-${title}`
+  };
+};
+const createMenuItem = (url, title, subtitle, onClick) => jsxs("div", Object.assign({
+  className: "app-menu-item"
+}, {
+  children: [jsx(DotLink, Object.assign({
+    href: url,
+    color: "textPrimary",
+    target: "_blank",
+    onClick: onClick,
+    onPointerDown: onClick
+  }, {
+    children: jsxs("div", Object.assign({
+      className: "logo-title"
+    }, {
+      children: [jsx(DotIcon, {
+        iconId: "open-new-tab"
+      }, void 0), jsxs("div", Object.assign({
+        className: "dot-app-switcher-app-title"
+      }, {
+        children: [jsx(DotTypography, Object.assign({
+          variant: "body1"
+        }, {
+          children: title
+        }), void 0), subtitle && jsx(DotTypography, Object.assign({
+          variant: "body2"
+        }, {
+          children: subtitle
+        }), void 0)]
+      }), void 0)]
+    }), void 0)
+  }), void 0), jsx(DotCopyButton, {
+    copyTooltip: "Copy application URL",
+    value: url
+  }, void 0)]
+}), `app-menu-item-${title}`);
+const createTopLevelMenuItem = (url, logo, title, 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
+  const target = openNewTab ? '_blank' : '_self';
+  return jsxs(DotLink, Object.assign({
+    href: url,
+    color: "textPrimary",
+    target: target
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: "logo-title"
+    }, {
+      children: [jsx(DotAvatar, {
+        alt: "app image",
+        imageSrc: logo,
+        type: "image",
+        variant: "circular"
+      }, void 0), jsx("div", Object.assign({
+        className: "dot-app-switcher-app-title"
+      }, {
+        children: jsx(DotTypography, Object.assign({
+          variant: "body1"
+        }, {
+          children: title
+        }), void 0)
+      }), void 0)]
+    }), void 0), openNewTab && jsx(DotIcon, {
+      iconId: "open-new-tab"
+    }, void 0)]
+  }), `top-menu-item-${title}`);
+};
+const createAppTypeLabel = (appTypeName, logo, appProps) => {
+  const logoProps = logo ? {
+    imageSrc: logo
+  } : {
+    iconId: 'collection'
+  };
+  return jsxs("div", Object.assign({
+    className: "logo-title"
+  }, {
+    children: [jsx(DotAvatar, Object.assign({}, logoProps, {
+      alt: "app image",
+      type: "image",
+      variant: "circular"
+    }), void 0), jsxs("div", Object.assign({
+      className: "dot-app-switcher-app-title"
+    }, {
+      children: [jsx(DotTypography, Object.assign({
+        variant: "body1"
+      }, {
+        children: appTypeName
+      }), void 0), jsxs(DotTypography, Object.assign({
+        variant: "body2"
+      }, {
+        children: ["Instance (", appProps.length, ")"]
+      }), void 0)]
+    }), void 0)]
+  }), void 0);
+};
+const getInstanceStateText = application => {
+  if (application.instance_state === 1) {
+    return 'Production instance';
+  }
+  return 'Non-production instance';
+};
+const sortRecentAppInstancesFn = (a, b) => {
+  const appA = a.application;
+  const appB = b.application;
+  return sortAppInstancesFn(appA, appB);
+};
+const sortAppInstancesFn = (a, b) => {
+  let 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;
+};
+const RECENT_INSTANCES_KEY = 'dot-app-switcher-recent-app-instances';
+const recentAppInstancesSetter = (latestInstance, maxRecentItems
+//): (RecentAppInstance[]) => RecentAppInstance[])=> {
+) => {
+  return orig => {
+    const lastAccess = Date.now();
+    let isNew = true;
+    let oldestIndex = 0;
+    let oldestAccess = lastAccess;
+    orig.forEach((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) {
+      const newRecentItem = {
+        application: latestInstance,
+        lastAccess
+      };
+      let newRecent;
+      if (orig.length >= maxRecentItems) {
+        newRecent = [...orig];
+        newRecent.splice(oldestIndex, 1, newRecentItem);
+      } else {
+        newRecent = [...orig, newRecentItem];
+      }
+      newRecent.sort(sortRecentAppInstancesFn);
+      localStorage.setItem(RECENT_INSTANCES_KEY, JSON.stringify(newRecent));
+      return newRecent;
+    }
+    return orig;
+  };
+};
+
+const rootClassName$K = 'dot-app-switcher';
+const StyledAppSwitcher = styled(DotDrawer).withConfig({
+  displayName: "AppSwitcherstyles__StyledAppSwitcher",
+  componentId: "hhxfqg-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{.dot-drawer-paper{padding:0;}.content{padding:", ";overflow-y:auto;}.app-menu-item{display:flex;justify-content:space-between;align-items:center;}.dot-link,.product-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;height:60px;text-decoration:none;cursor:pointer;}.logo-title{display:flex;align-items:center;gap:24px;width:100%;}.dot-avatar{flex-basis:40px;}.dai-apps-title{display:flex;align-items:center;height:32px;padding:", ";margin-top:", ";background-color:", ";}.dot-app-switcher-app-title{min-width:150px;}.dot-icon{flex-basis:content;}.app-switcher-header{.app-switcher-header-title{display:flex;align-items:center;}display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid ", ";padding:", ";.app-switcher-label{padding-left:", ";}}.app-switcher-back-button{&.dot-button.MuiButton-text{padding-left:0;}}.product-heading{display:flex;align-items:center;gap:24px;padding-bottom:", ";}.product-applications{width:100%;}.product-applications-search{margin-bottom:", ";}}"], rootClassName$K, theme.spacing(0, 2, 1, 2), theme.spacing(0, 0, 0, 1), theme.spacing(1), theme.palette.grey[50], theme.palette.grey[200], theme.spacing(0, 2, 1, 2), theme.spacing(3), theme.spacing(3), theme.spacing(3)));
+
+const DotAppSwitcherView = ({
+  activeApp,
+  apps,
+  className,
+  maxRecentInstances: _maxRecentInstances = 5,
+  noAppTypeLabel: _noAppTypeLabel = 'Other',
+  platformConsoleUrl,
+  onClose,
+  open,
+  searchInstancesThreshold: _searchInstancesThreshold = 5,
+  selectedAppType,
+  yOffset: _yOffset = 64,
+  zIndex: _zIndex = 990
+}) => {
+  const dotCoreApiContext = useDotCoreApiContext();
+  let setSelectedAppType = null;
+  if (dotCoreApiContext !== null) {
+    setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
+  }
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
+  const [appTypeMap, setAppTypeMap] = useState();
+  const [appTypeLabels, setAppTypeLabels] = useState();
+  const [appTypeMenuItems, setAppTypeMenuItems] = useState();
+  const [selectedAppTypeAlt, setSelectedAppTypeAlt] = useState(null);
+  const [searchText, setSearchText] = useState('');
+  const cachedRecentItemsJson = localStorage.getItem(RECENT_INSTANCES_KEY);
+  const [recentAppInstances, setRecentAppInstances] = useState(cachedRecentItemsJson ? JSON.parse(cachedRecentItemsJson) : []);
+  if (!setSelectedAppType) {
+    selectedAppType = selectedAppTypeAlt;
+    setSelectedAppType = setSelectedAppTypeAlt;
+  }
+  const showApps = useCallback(appType => {
+    setSelectedAppType(appType);
+  }, []);
+  const showAppTypes = useCallback(() => {
+    setSearchText('');
+    setSelectedAppType(null);
+  }, []);
+  const populateAppTypeMap = useCallback(() => {
+    const newAppTypeMap = new Map();
+    // we'll put Other at the end
+    const otherApps = [];
+    apps === null || apps === void 0 ? void 0 : apps.forEach(app => {
+      const instanceStateText = getInstanceStateText(app);
+      const children = createMenuItem(app.url, app.name, instanceStateText, e => {
+        handleRecentInstance(e, app);
+      });
+      const searchableContent = `${app.name} ${instanceStateText}`;
+      const appTypeName = app.logo_product_name;
+      let appTypeApps;
+      if (appTypeName) {
+        appTypeApps = newAppTypeMap.get(appTypeName);
+        if (!appTypeApps) {
+          appTypeApps = [];
+          newAppTypeMap.set(appTypeName, appTypeApps);
+        }
+      } else {
+        appTypeApps = otherApps;
+      }
+      appTypeApps.push({
+        application: app,
+        children,
+        searchableContent,
+        key: app.id
+      });
+    });
+    const keys = Array.from(newAppTypeMap.keys()).sort();
+    const sortedAppTypeMap = new Map();
+    for (const appType of keys) {
+      const appTypeApps = newAppTypeMap.get(appType);
+      appTypeApps.sort((a, b) => {
+        return sortAppInstancesFn(a.application, b.application);
+      });
+      sortedAppTypeMap.set(appType, appTypeApps);
+    }
+    let appTypeCount = sortedAppTypeMap.size;
+    if (platformConsoleUrl) {
+      appTypeCount++;
+    }
+    if (otherApps.length > 0) {
+      otherApps.sort((a, b) => {
+        return sortAppInstancesFn(a.application, b.application);
+      });
+      sortedAppTypeMap.set(_noAppTypeLabel, otherApps);
+    }
+    setAppTypeMap(sortedAppTypeMap);
+    const menuItems = [daiAppsHeaderMenuItem(appTypeCount)];
+    if (platformConsoleUrl) {
+      const children = createTopLevelMenuItem(platformConsoleUrl, getLogoForAppType('Platform'), 'Digital.ai Platform', !window.location.href.startsWith(platformConsoleUrl));
+      menuItems.push({
+        children,
+        key: 'app-switcher-platform-link'
+      });
+    }
+    const newAppTypeLabels = new Map();
+    sortedAppTypeMap.forEach((singleTypeApps, appTypeName) => {
+      if ((singleTypeApps === null || singleTypeApps === void 0 ? void 0 : singleTypeApps.length) > 0) {
+        const logo = appTypeName === _noAppTypeLabel ? null : getLogoForAppType(appTypeName);
+        newAppTypeLabels.set(appTypeName, {
+          logo,
+          singleTypeApps
+        });
+        menuItems.push({
+          children: jsxs("div", Object.assign({
+            className: "product-menu-item",
+            onClick: () => showApps(appTypeName),
+            tabIndex: 0
+          }, {
+            children: [createAppTypeLabel(appTypeName, logo, singleTypeApps), jsx(DotIcon, {
+              iconId: "chevron-right"
+            }, void 0)]
+          }), `menu-item-${appTypeName}`),
+          key: appTypeName
+        });
+      }
+    });
+    setAppTypeMenuItems(menuItems);
+    setAppTypeLabels(newAppTypeLabels);
+  }, [apps]);
+  const emptyState = useCallback(() => {
+    const currentAppMenuItem = createTopLevelMenuItem(window.location.href, getLogoForAppType(activeApp.product), activeApp.name, false);
+    setAppTypeMenuItems([daiAppsHeaderMenuItem(), {
+      children: currentAppMenuItem,
+      key: 'no_applications_configured'
+    }]);
+  }, [activeApp]);
+  useEffect(() => {
+    if ((apps === null || apps === void 0 ? void 0 : apps.length) > 0) {
+      populateAppTypeMap();
+    } else {
+      emptyState();
+    }
+  }, [apps]);
+  const onAppInstanceSearchTextChange = useCallback(text => {
+    setSearchText(text);
+  }, []);
+  const clearAppInstanceSearchText = useCallback(() => {
+    setSearchText('');
+  }, []);
+  const closeHandler = useCallback(event => {
+    setSearchText('');
+    onClose && onClose(event);
+  }, [onClose]);
+  const filteredAppInstances = useCallback(() => {
+    var _a;
+    return (_a = appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.filter(item => {
+      let isMatch = !searchText;
+      if (searchText) {
+        const testStr = isLowerCase(searchText) ? item.searchableContent.toLowerCase() : item.searchableContent;
+        isMatch = testStr.indexOf(searchText) >= 0;
+      }
+      return isMatch;
+    }).map(item => item.children);
+  }, [appTypeMap, selectedAppType, searchText]);
+  const handleRecentInstance = useCallback((event, latestInstance) => {
+    // middle button counts; click to open context menu does not
+    if (event.button < 2) {
+      setRecentAppInstances(recentAppInstancesSetter(latestInstance, _maxRecentInstances));
+    }
+  }, [recentAppInstances]);
+  const recentAppInstancesSection = jsxs(Fragment$1, {
+    children: [sectionHeaderMenuItem('RECENT', recentAppInstances.length).children, jsx("div", Object.assign({
+      className: "product-applications"
+    }, {
+      children: recentAppInstances.map(item => {
+        const app = item.application;
+        return createMenuItem(app.url, app.name, getInstanceStateText(app), e => {
+          handleRecentInstance(e, app);
+        });
+      })
+    }), void 0)]
+  }, void 0);
+  const content = () => {
+    var _a;
+    if (selectedAppType && appTypeMap && appTypeLabels) {
+      const labelConfig = appTypeLabels.get(selectedAppType);
+      return jsxs("div", Object.assign({
+        className: "content"
+      }, {
+        children: [jsx("span", {
+          children: jsx(DotButton, Object.assign({
+            className: "app-switcher-back-button",
+            type: "text",
+            onClick: showAppTypes,
+            startIcon: jsx(DotIcon, {
+              iconId: "back"
+            }, void 0)
+          }, {
+            children: jsx("span", {
+              children: "Back"
+            }, void 0)
+          }), void 0)
+        }, void 0), jsx("div", Object.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 && jsx("div", {
+          children: jsx(SearchInput, {
+            "data-testid": "app-instance-search-input",
+            onChange: onAppInstanceSearchTextChange,
+            onClear: clearAppInstanceSearchText,
+            value: searchText
+          }, void 0)
+        }, void 0), jsx("div", Object.assign({
+          className: "product-applications"
+        }, {
+          children: filteredAppInstances()
+        }), void 0)]
+      }), void 0);
+    } else {
+      return jsxs("div", Object.assign({
+        className: "content"
+      }, {
+        children: [jsx(DotList, {
+          items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(item => ({
+            child: item.children
+          })),
+          width: "100%"
+        }, void 0), recentAppInstancesSection]
+      }), void 0);
     }
-    return endIcon;
   };
-  return jsxs(Fragment, {
-    children: [jsx(DotTooltip, Object.assign({
-      "data-testid": `${dataTestId}-tooltip`,
-      placement: _tooltipPlacement,
-      title: tooltip
+  const header = {
+    className: 'app-switcher-header',
+    children: jsxs("div", Object.assign({
+      className: "app-switcher-header-title",
+      style: {
+        marginTop: _yOffset + 'px',
+        width: '80%'
+      }
     }, {
-      children: jsxs(StyledListItem, Object.assign({
-        "aria-label": ariaLabel,
-        button: true,
-        classes: {
-          root: rootClasses
-        },
-        component: href && !onClick ? 'a' : _component2,
-        "data-testid": dataTestId,
-        divider: _divider,
-        href: onClick ? null : href,
-        onClick: onClick || !href ? handleClick : null,
-        selected: isFlyout ? isOpened : selected,
-        target: target
+      children: [jsx(DotAvatar, {
+        iconId: "apps",
+        alt: "app image",
+        type: "image",
+        variant: "circular"
+      }, void 0), jsx(DotTypography, Object.assign({
+        className: "app-switcher-label"
       }, {
-        children: [jsxs("span", Object.assign({
-          className: listItemLinkClassName
-        }, {
-          children: [startIcon && jsx(ListItemIcon, {
-            children: startIcon
-          }, void 0), renderListItemText()]
-        }), void 0), showEndIcon && renderListItemEndIcon()]
-      }), void 0)
-    }), void 0), hasChildren && jsx(NestedList, {
-      anchorEl: anchorEl,
-      ariaLabel: "nested list",
-      "data-testid": "nestedList",
-      items: _items2,
-      menuPlacement: menuPlacement,
-      nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-      onMenuLeave: handleMenuLeave,
-      open: isOpened,
-      type: nestedListType
-    }, void 0)]
-  }, void 0);
+        children: "App switcher"
+      }), void 0)]
+    }), void 0)
+  };
+  return jsx(StyledAppSwitcher, Object.assign({
+    className: rootClasses,
+    ModalProps: {
+      style: {
+        zIndex: _zIndex
+      },
+      hideBackdrop: true
+    },
+    drawerHeaderProps: header,
+    variant: "temporary",
+    width: "340px",
+    open: open,
+    onClose: closeHandler
+  }, {
+    children: content()
+  }), void 0);
 };
-const NestedList = ({
-  ariaLabel,
-  anchorEl,
-  'data-testid': dataTestId,
-  items,
-  menuPlacement,
-  nestedDrawerLeftSpacing,
-  onMenuLeave,
-  open,
-  parentItemIndex,
-  type
-}) => {
-  const flyoutItemClasses = useStylesWithRootClass(listItemRootClass, flyoutListItemClassName);
-  const flyoutSpanClasses = useStylesWithRootClass(listItemLinkClassName, flyoutItemLinkClassName);
-  if (type === 'expandable') {
-    return jsx(Collapse, Object.assign({
-      in: open,
-      timeout: "auto",
-      unmountOnExit: true
-    }, {
-      children: jsx(DotList, {
-        ariaLabel: ariaLabel,
-        className: nestedListClassName,
-        component: "div",
-        "data-testid": dataTestId,
-        disablePadding: true,
-        items: items
-      }, parentItemIndex)
-    }), void 0);
-  }
-  if (type === 'menu') {
-    const menuItems = items.map((item, index) => {
-      const {
-        href,
-        target,
-        onClick,
-        tooltip,
-        tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT,
-        text
-      } = item;
-      return {
-        children: jsx(DotTooltip, Object.assign({
-          placement: tooltipPlacement,
-          title: tooltip
-        }, {
-          children: jsx(StyledListItem, Object.assign({
-            className: flyoutItemClasses,
-            component: href && !onClick ? 'a' : null,
-            "data-testid": `${dataTestId}-item-${index}`,
-            href: href,
-            onClick: onClick,
-            target: target
-          }, {
-            children: jsxs("span", Object.assign({
-              className: flyoutSpanClasses
-            }, {
-              children: [item.startIcon, jsx(DotTypography, Object.assign({
-                variant: "body1"
-              }, {
-                children: text
-              }), void 0)]
-            }), void 0)
-          }), `${parentItemIndex}-${index}`)
-        }), `${parentItemIndex}-${index}-tooltip`),
-        classes: '',
-        key: String(index)
-      };
-    });
-    return jsx(DotMenu, {
-      anchorEl: anchorEl,
-      ariaLabel: ariaLabel,
-      className: flyoutMenuClassName,
-      "data-testid": dataTestId,
-      id: CreateUUID(),
-      menuItemHeight: "auto",
-      menuItems: menuItems,
-      menuPlacement: menuPlacement,
-      onLeave: onMenuLeave,
-      open: open
-    }, parentItemIndex);
+const DotAppSwitcher = _a => {
+  var {
+      accountId,
+      includePlatformConsole = true,
+      onClose
+    } = _a,
+    commonProps = __rest(_a, ["accountId", "includePlatformConsole", "onClose"]);
+  const {
+    applications,
+    applicationsLoading,
+    applicationsError,
+    loadApplications,
+    isAppSwitcherOpen: open,
+    platformConsoleUrl,
+    setIsAppSwitcherOpen: setOpen,
+    selectedAppSwitcherAppType: selectedAppType,
+    setSelectedAppSwitcherAppType: setSelectedAppType
+  } = useDotCoreApiContext();
+  useEffect(() => {
+    if ((!applications || applications.length === 0) && open) {
+      loadApplications(accountId);
+    }
+  }, [accountId, open]);
+  if (applicationsError) {
+    console.error('Error loading application list in AppSwitcher', applicationsError);
   }
-  if (type === 'drawer') {
-    return jsx(StyledDotDrawer, Object.assign({
-      PaperProps: {
-        style: {
-          left: `${nestedDrawerLeftSpacing}px`
-        }
-      },
-      anchor: "left",
-      className: nestedDrawerClassName,
-      "data-testid": "nested-drawer",
+  const closeHandler = useCallback(event => {
+    setOpen(false);
+    setSelectedAppType(null);
+    onClose && onClose(event);
+  }, [onClose]);
+  const viewProps = includePlatformConsole ? Object.assign(Object.assign({}, commonProps), {
+    platformConsoleUrl
+  }) : Object.assign({}, commonProps);
+  if (!applicationsLoading && !applicationsError) {
+    return jsx(DotAppSwitcherView, Object.assign({}, viewProps, {
       open: open,
-      variant: "persistent"
-    }, {
-      children: 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;
@@ -3702,7 +3803,7 @@ const Header = ({
       appLogo: appLogo,
       appLogoSmall: appLogoSmall,
       smallOnly: !isOpen
-    }, void 0) : jsxs(Fragment, {
+    }, void 0) : jsxs(Fragment$1, {
       children: [jsx(DotAvatar, Object.assign({}, titleAvatarProps), void 0), isOpen && jsx(DotTypography, Object.assign({
         variant: "h4"
       }, {
@@ -3965,7 +4066,7 @@ const DotAppToolbar = ({
       borderBottomColor: borderColor
     }
   }, {
-    children: [showMainMenu && jsxs(Fragment, {
+    children: [showMainMenu && jsxs(Fragment$1, {
       children: [jsx("div", Object.assign({
         className: "dot-main-menu-btn"
       }, {
@@ -4064,7 +4165,7 @@ const StyledAutocomplete = styled(Autocomplete).withConfig({
   componentId: "j2sgjy-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.", " .dot-text-field .", "{height:56px;padding-left:", ";}.", "{padding-top:", ";padding-bottom:", ";}.dot-chip:first-child{margin-left:", ";}.dot-text-field{.", "{height:", ";}.warning-icon{color:", ";}.error-icon{color:", ";}}}"], 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));
+}) => css(["&.", "{&.", " .dot-text-field .", "{height:56px;padding-left:", ";}.", "{padding-top:", ";padding-bottom:", ";}.dot-chip:first-child{margin-left:", ";}.dot-text-field{.", "{min-height:", ";}.warning-icon{color:", ";}.error-icon{color:", ";}}}"], 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));
 
 const rootClassName$E = 'dot-chip';
 const StyledChip = styled(Chip).withConfig({
@@ -4271,7 +4372,7 @@ const DotAutoComplete = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const DotPopper = props => {
     if (!isActionItemDefined) return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$M,
+      className: rootClassName$V,
       disablePortal: _disablePortal,
       "$maxHeight": maxHeight
     }), void 0);
@@ -4295,7 +4396,7 @@ const DotAutoComplete = ({
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
     return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$M,
+      className: rootClassName$V,
       disablePortal: _disablePortal,
       "$maxHeight": maxHeight
     }, {
@@ -4388,7 +4489,7 @@ const DotAutoComplete = ({
         children: icon
       }), void 0) : icon;
     };
-    return jsxs(Fragment, {
+    return jsxs(Fragment$1, {
       children: [loading && jsx(DotProgress, {
         color: "inherit",
         size: 20
@@ -4446,7 +4547,7 @@ const DotAutoComplete = ({
         // at least pick up any styling that is used there. Should additional
         // functionality be added to DotInputText we will have to make a
         // decision about if/how to expose it here.
-        jsxs(Fragment, {
+        jsxs(Fragment$1, {
           children: [persistentLabel && jsx(DotInputLabel, Object.assign({
             "data-testid": dataTestId && `${dataTestId}-persistent-label`,
             id: inputId
@@ -4902,7 +5003,7 @@ const DotButtonToggle = ({
       key,
       value: optionValue
     };
-    const children = jsxs(Fragment, {
+    const children = jsxs(Fragment$1, {
       children: [optionIconId && jsx(DotIcon, {
         className: "dot-toggle-icon",
         iconId: optionIconId
@@ -6791,7 +6892,7 @@ const DotDynamicForm = ({
           }
         case 'custom-element':
           {
-            return jsx(Fragment$1, {
+            return jsx(Fragment, {
               children: customElement
             }, elementIndex);
           }
@@ -6944,13 +7045,12 @@ const DotInlineEdit = ({
   const [showTooltip, setShowTooltip] = useState(false);
   const [originalValue, setOriginalValue] = useState('');
   const [inputValue, setInputValue] = useState(_value);
-  const isNotReadOnlyOrEditing = !readOnly && !editing;
   const inputRef = useRef();
   const inlineEditRef = useRef();
   const isSaveDisabled = checkIfEmptyValue(inputValue);
   const rootClasses = useStylesWithRootClass(rootClassName$m, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
-    if (isNotReadOnlyOrEditing) {
+    if (!editing) {
       setShowTooltip(visible);
     }
   };
@@ -7021,7 +7121,7 @@ const DotInlineEdit = ({
   };
   const renderViewMode = () => {
     const viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
-    const viewModeChildren = jsxs(Fragment, {
+    const viewModeChildren = jsxs(Fragment$1, {
       children: [jsx(DotTypography, Object.assign({
         className: "dot-view-mode-typography",
         "data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
@@ -7050,7 +7150,7 @@ const DotInlineEdit = ({
   };
   const renderEditMode = () => {
     const textFieldClasses = useStylesWithRootClass(editTextFieldClassName, isSaveDisabled ? 'dot-empty-value' : '');
-    return jsxs(Fragment, {
+    return jsxs(Fragment$1, {
       children: [jsx(TextField, {
         InputProps: {
           endAdornment: renderEndAdornment()
@@ -7484,7 +7584,7 @@ const DotSplitButton = ({
     setOpen(false);
     onOptionClick(itemKey);
   };
-  return jsxs(Fragment, {
+  return jsxs(Fragment$1, {
     children: [jsxs(StyledSplitButtonGroup, Object.assign({
       "aria-label": ariaLabel,
       className: rootClasses,
@@ -7924,7 +8024,7 @@ const DotTableBody = ({
       }, index);
     });
   };
-  return jsxs(Fragment, {
+  return jsxs(Fragment$1, {
     children: [jsx(StyledTableBody, Object.assign({
       classes: {
         root: rootClassName$a
@@ -8153,7 +8253,7 @@ const DotTableSelectionToolbar = ({
         variant: "h3"
       }, {
         children: [selectedRowsNumber, " selected"]
-      }), void 0), onClearAll && jsxs(Fragment, {
+      }), void 0), onClearAll && jsxs(Fragment$1, {
         children: [jsx(DotTypography, Object.assign({
           className: "dot-selected-rows-divider"
         }, {
@@ -8485,7 +8585,7 @@ const DotTableActions = ({
       onClick: action.onClick
     }, `action-${index}`));
   };
-  return jsxs(Fragment, {
+  return jsxs(Fragment$1, {
     children: [jsxs(TableActionsContainer, Object.assign({
       className: rootClassName$6,
       ref: wrapperRef
@@ -8679,7 +8779,7 @@ const renderSelectFilesButton = (isUploadDisabled, onButtonClick) => jsx(DotButt
 }, {
   children: "Select file(s)"
 }), void 0);
-const renderActiveDragArea = () => jsxs(Fragment, {
+const renderActiveDragArea = () => jsxs(Fragment$1, {
   children: [jsx(DotIcon, {
     iconId: "upload-file"
   }, void 0), jsx(DotTypography, Object.assign({
@@ -8688,7 +8788,7 @@ const renderActiveDragArea = () => jsxs(Fragment, {
     children: "Drop the file(s) here ..."
   }), void 0)]
 }, void 0);
-const renderDragAndDropArea = (isUploadDisabled, onSelectButtonClick) => jsxs(Fragment, {
+const renderDragAndDropArea = (isUploadDisabled, onSelectButtonClick) => jsxs(Fragment$1, {
   children: [jsx(DotIcon, {
     iconId: "upload-file"
   }, void 0), jsxs(DotTypography, Object.assign({
@@ -8894,7 +8994,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {