@digital-ai/dot-components 2.5.2 → 2.5.3

package/CHANGE_LOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.5.3](https://www.npmjs.com/package/@digital-ai/dot-components) (03/21/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.10...2.5.3)
+
+**Fixed bugs:**
+
+- S-90229 AppSwitcher search and recent instances [\#1418](https://github.com/digital-ai/dot-components/pull/1418) ([jmcnally](https://github.com/jmcnally))
+
+## [1.21.10](https://www.npmjs.com/package/@digital-ai/dot-components) (03/17/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.5.2...1.21.10)
+
+**Fixed bugs:**
+
+- D-24419 InlineEdit: show tooltip on readonly as well [\#1417](https://github.com/digital-ai/dot-components/pull/1417) ([angel-git](https://github.com/angel-git))
+
 ## [2.5.2](https://www.npmjs.com/package/@digital-ai/dot-components) (03/17/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.5.1...2.5.2)
@@ -321,7 +337,6 @@
 - S-86128: `DotAutocomplete`:  Support error/warning icons with the tooltip [\#1237](https://github.com/digital-ai/dot-components/pull/1237) ([dmiletic85](https://github.com/dmiletic85))
 - S-86683: `DotAutocomplete`: expose `onBlur` [\#1236](https://github.com/digital-ai/dot-components/pull/1236) ([dmiletic85](https://github.com/dmiletic85))
 - S-86581: `DotAutocomplete` should allow to pass `readOnly` property into the inner `TextField` [\#1235](https://github.com/digital-ai/dot-components/pull/1235) ([dmiletic85](https://github.com/dmiletic85))
-- S-84069: expose shrink prop to input fields [\#1223](https://github.com/digital-ai/dot-components/pull/1223) ([CWSites](https://github.com/CWSites))
 
 **Fixed bugs:**
 
@@ -340,6 +355,7 @@
 **Features:**
 
 - S-86369: input field success [\#1226](https://github.com/digital-ai/dot-components/pull/1226) ([CWSites](https://github.com/CWSites))
+- S-84069: expose shrink prop to input fields [\#1223](https://github.com/digital-ai/dot-components/pull/1223) ([CWSites](https://github.com/CWSites))
 - Issue \#1210: add prop for noMargin to typography [\#1222](https://github.com/digital-ai/dot-components/pull/1222) ([CWSites](https://github.com/CWSites))
 - S-83952: persistent label for text field and select field [\#1219](https://github.com/digital-ai/dot-components/pull/1219) ([CWSites](https://github.com/CWSites))
 - S-85811: `NavigationRail` Allow badges [\#1215](https://github.com/digital-ai/dot-components/pull/1215) ([dmiletic85](https://github.com/dmiletic85))
@@ -498,7 +514,6 @@
 
 **Fixed bugs:**
 
-- D-20483: `react-grid-layout` library should not be peer dependency [\#1088](https://github.com/digital-ai/dot-components/pull/1088) ([dmiletic85](https://github.com/dmiletic85))
 - D-20465: `DotButtonToggle` wrong `type` for value and `onChange` [\#1087](https://github.com/digital-ai/dot-components/pull/1087) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.12.0](https://www.npmjs.com/package/@digital-ai/dot-components) (03/25/2022)
@@ -518,6 +533,7 @@
 **Fixed bugs:**
 
 - D-20511: remove extra period [\#1094](https://github.com/digital-ai/dot-components/pull/1094) ([CWSites](https://github.com/CWSites))
+- D-20483: `react-grid-layout` library should not be peer dependency [\#1088](https://github.com/digital-ai/dot-components/pull/1088) ([dmiletic85](https://github.com/dmiletic85))
 - D-20463: Change the DotDrawer stories to make drawers not open initially [\#1086](https://github.com/digital-ai/dot-components/pull/1086) ([selsemore](https://github.com/selsemore))
 - D-20418: `DotTable`: Strange scrolling behavior with action menu [\#1082](https://github.com/digital-ai/dot-components/pull/1082) ([dmiletic85](https://github.com/dmiletic85))
 - D-20426: `DotConfirmation `: `title` and `message` prop are not applying correct font family [\#1081](https://github.com/digital-ai/dot-components/pull/1081) ([dmiletic85](https://github.com/dmiletic85))
@@ -1125,7 +1141,6 @@
 - Patch release [\#645](https://github.com/digital-ai/dot-components/pull/645) ([CWSites](https://github.com/CWSites))
 - S-78162: adjust link color [\#642](https://github.com/digital-ai/dot-components/pull/642) ([CWSites](https://github.com/CWSites))
 - update all API unit tests to not have duplicate data [\#639](https://github.com/digital-ai/dot-components/pull/639) ([CWSites](https://github.com/CWSites))
-- Feedback of snackbar [\#628](https://github.com/digital-ai/dot-components/pull/628) ([monapatel91](https://github.com/monapatel91))
 
 ## [1.0.6](https://www.npmjs.com/package/@digital-ai/dot-components) (08/18/2021)
 
@@ -1144,6 +1159,7 @@
 - Next patch release with agility theme colors [\#638](https://github.com/digital-ai/dot-components/pull/638) ([CWSites](https://github.com/CWSites))
 - S 78162: agility theme [\#636](https://github.com/digital-ai/dot-components/pull/636) ([CWSites](https://github.com/CWSites))
 - update the peerDependencies to support all appropriate versions of React [\#634](https://github.com/digital-ai/dot-components/pull/634) ([monapatel91](https://github.com/monapatel91))
+- Feedback of snackbar [\#628](https://github.com/digital-ai/dot-components/pull/628) ([monapatel91](https://github.com/monapatel91))
 - S-77873: Support agility themes in certain components [\#626](https://github.com/digital-ai/dot-components/pull/626) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.5](https://www.npmjs.com/package/@digital-ai/dot-components) (07/28/2021)

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
 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 { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, Avatar, Button, darken, Link, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, 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 '@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';
@@ -1772,7 +1772,61 @@ const DotButton = /*#__PURE__*/forwardRef(({
   }), void 0);
 });
 
-const rootClassName$X = 'dot-list';
+const rootClassName$X = '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$X));
+
+const DotLink = ({
+  ariaLabel,
+  children,
+  className,
+  color: _color = 'primary',
+  'data-testid': dataTestId,
+  href,
+  onClick,
+  onMouseEnter,
+  onPointerDown,
+  rel: _rel = 'noreferrer',
+  tabIndex: _tabIndex = 0,
+  target,
+  tooltip,
+  underline
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const handleKeyPress = event => {
+    if (onClick && event.key === 'Enter') {
+      event.preventDefault();
+      onClick(event);
+    }
+  };
+  return jsx(DotTooltip, Object.assign({
+    title: tooltip
+  }, {
+    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 rootClassName$W = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -1781,7 +1835,7 @@ const StyledList = styled(List).withConfig({
   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)));
+}) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], rootClassName$W, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1)));
 
 const getChevronIcon = (nestedListType, isOpened) => {
   if (nestedListType !== 'expandable') {
@@ -1803,11 +1857,11 @@ const StyledListItem = styled(ListItem).withConfig({
   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 rootClassName$V = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress).withConfig({
   displayName: "Progressstyles__StyledCircularProgress",
   componentId: "sc-1gs77rb-0"
-})(["&.", "{&.MuiCircularProgress-colorSecondary{color:#649a3d;}}"], rootClassName$W);
+})(["&.", "{&.MuiCircularProgress-colorSecondary{color:#649a3d;}}"], rootClassName$V);
 
 const DotProgress = ({
   ariaLabel,
@@ -1820,7 +1874,7 @@ const DotProgress = ({
   value,
   variant: _variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsx(DotTooltip, Object.assign({
     title: _tooltip
   }, {
@@ -1856,23 +1910,23 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$V = 'dot-popper';
+const rootClassName$U = '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));
+}) => css(["&.", "{font-family:", ";font-size:", "px;}"], rootClassName$U, theme.typography.fontFamily, theme.typography.body1.fontSize));
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$U = 'dot-menu';
+const rootClassName$T = '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, ({
+}) => 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$U, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$T, rootClassName$U, ({
   $maxHeight
 }) => $maxHeight !== undefined && `
           max-height: ${getListMaxHeight($maxHeight)};
@@ -1882,7 +1936,7 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$T = 'dot-ul';
+const rootClassName$S = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList).withConfig({
@@ -1890,7 +1944,7 @@ const StyledMenuList = styled(MenuList).withConfig({
   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)));
+}) => css(["&.", "{.dot-li{font-size:", "px;justify-content:space-between;gap:", ";&:hover{background:", ";}&.Mui-selected,&.Mui-selected:hover{background:", ";}&.", "{padding-right:", ";}}}"], rootClassName$S, 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) => {
@@ -1963,7 +2017,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -2073,7 +2127,7 @@ const DotMenu = ({
   open: _open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className, _loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className, _loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(_menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -2171,13 +2225,13 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$S = 'dot-drawer';
+const rootClassName$R = '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$S, alpha(theme.palette.grey[900], 0.7), ({
+}) => css(["&.", " .MuiBackdrop-root{background-color:", ";}.dot-drawer-paper{height:", ";padding:", ";width:", ";}"], rootClassName$R, alpha(theme.palette.grey[900], 0.7), ({
   height,
   anchor
 }) => anchor === 'left' || anchor === 'right' ? '100%' : height, theme.spacing(2), ({
@@ -2185,19 +2239,19 @@ const StyledDrawer = styled(Drawer).withConfig({
   anchor
 }) => anchor === 'bottom' || anchor === 'top' ? 'auto' : width));
 
-const rootClassName$R = 'dot-drawer-header';
+const rootClassName$Q = '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)));
+}) => css(["&.", "{padding:", ";display:flex;align-items:center;.close-button{margin-left:auto;}}"], rootClassName$Q, theme.spacing(0, 0, 2)));
 
-const rootClassName$Q = 'dot-icon-btn';
+const rootClassName$P = '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));
+})(["", ""], () => css(["&.", "{font-size:inherit;padding:10px;.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}&.ripple-disabled{&:hover,&:active,&:focus{background:", ";}}"], rootClassName$P, hoverGray));
 
 const DotIconButton = ({
   ariaLabel,
@@ -2213,7 +2267,7 @@ const DotIconButton = ({
   size: _size = 'medium'
 }) => {
   const rippleClassName = _disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, rippleClassName, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, rippleClassName, className);
   return jsx(DotTooltip, Object.assign({
     "data-testid": "icon-button-tooltip",
     title: tooltip
@@ -2247,7 +2301,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   return jsxs(StyleDrawerHeader, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2261,11 +2315,11 @@ const DotDrawerHeader = ({
   }), void 0);
 };
 
-const rootClassName$P = 'dot-drawer-body';
+const rootClassName$O = '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$P));
+})(["", ""], () => css(["&.", "{display:flex;.dot-drawer-close-button{align-self:self-start;padding:0;margin-left:auto;}}"], rootClassName$O));
 
 const DotDrawerBody = ({
   ariaLabel,
@@ -2276,7 +2330,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   return jsxs(StyleDrawerBody, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2290,13 +2344,13 @@ const DotDrawerBody = ({
   }), void 0);
 };
 
-const rootClassName$O = 'dot-drawer-footer';
+const rootClassName$N = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div.withConfig({
   displayName: "DrawerFooterstyles__StyleDrawerFooter",
   componentId: "sc-1ki05ze-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding:", ";}"], rootClassName$O, theme.spacing(2, 0, 0)));
+}) => css(["&.", "{padding:", ";}"], rootClassName$N, theme.spacing(2, 0, 0)));
 
 const DotDrawerFooter = ({
   ariaLabel,
@@ -2304,7 +2358,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
   return jsx(StyleDrawerFooter, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2341,7 +2395,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   const headerExists = !!drawerHeaderProps;
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return jsxs(StyledDrawer, Object.assign({
@@ -2427,7 +2481,7 @@ const DotList = ({
   nestedListType: _nestedListType = 'expandable',
   width: _width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
   const listRef = useRef();
   const [listItemIndex, setListItemIndex] = useState(null);
@@ -2908,11 +2962,11 @@ const DotInputText = ({
   }), void 0);
 };
 
-const rootClassName$N = 'dot-search-input';
+const rootClassName$M = 'dot-search-input';
 const StyledSearchInput = styled.span.withConfig({
   displayName: "SearchInputstyles__StyledSearchInput",
   componentId: "qlwzku-0"
-})(["", ""], () => css(["&.", "{}"], rootClassName$N));
+})(["", ""], () => css(["&.", "{}"], rootClassName$M));
 
 function SearchInput({
   'data-testid': dataTestId,
@@ -2925,7 +2979,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -2976,13 +3030,13 @@ function SearchInput({
   }), void 0);
 }
 
-const rootClassName$M = 'dot-copy-button';
+const rootClassName$L = '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]));
+}) => css(["&.", "{.copied-to-clipboard{color:", ";}}"], rootClassName$L, theme.palette.success[400]));
 
 const DotCopyButton = ({
   ariaLabel: _ariaLabel = 'Copy to clipboard',
@@ -3011,7 +3065,7 @@ const DotCopyButton = ({
     return false;
   };
   return jsxs(StyledCopyButton, Object.assign({
-    className: rootClassName$M,
+    className: rootClassName$L,
     "data-testid": dataTestId
   }, {
     children: [!showCopiedIcon && jsx(DotIconButton, {
@@ -3031,60 +3085,6 @@ const DotCopyButton = ({
   }), void 0);
 };
 
-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 DotLink = ({
-  ariaLabel,
-  children,
-  className,
-  color: _color = 'primary',
-  'data-testid': dataTestId,
-  href,
-  onClick,
-  onMouseEnter,
-  onPointerDown,
-  rel: _rel = 'noreferrer',
-  tabIndex: _tabIndex = 0,
-  target,
-  tooltip,
-  underline
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
-  const handleKeyPress = event => {
-    if (onClick && event.key === 'Enter') {
-      event.preventDefault();
-      onClick(event);
-    }
-  };
-  return jsx(DotTooltip, Object.assign({
-    title: tooltip
-  }, {
-    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);
-};
-
 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";
@@ -3134,17 +3134,17 @@ const getLogoForAppType = appType => {
   }
 };
 const daiAppsHeaderMenuItem = (count = 0) => {
-  return sectionHeaderMenuItem('DIGITAL.AI APPLICATIONS', count, true);
+  return sectionHeaderMenuItem('DIGITAL.AI APPLICATIONS', count, true, false);
 };
-const sectionHeaderMenuItem = (title, count, showEmpty = false) => {
+const sectionHeaderMenuItem = (title, count, showEmpty = false, showCount = true) => {
   const children = showEmpty || count > 0 ? jsxs(DotTypography, Object.assign({
-    className: "dai-apps-title"
+    className: "section-title"
   }, {
-    children: [title, count > 0 ? ` (${count})` : '']
+    children: [title, showCount && count > 0 ? ` (${count})` : '']
   }), `menu-item-section-title-${title}`) : null;
   return {
     children,
-    key: `dai-apps-section-header-${title}`
+    key: `section-header-${title}`
   };
 };
 const createMenuItem = (url, title, subtitle, onClick) => jsxs("div", Object.assign({
@@ -3160,9 +3160,13 @@ const createMenuItem = (url, title, subtitle, onClick) => jsxs("div", Object.ass
     children: jsxs("div", Object.assign({
       className: "logo-title"
     }, {
-      children: [jsx(DotIcon, {
-        iconId: "open-new-tab"
-      }, void 0), jsxs("div", Object.assign({
+      children: [jsx("div", Object.assign({
+        className: "start-icon"
+      }, {
+        children: jsx(DotIcon, {
+          iconId: "open-new-tab"
+        }, void 0)
+      }), void 0), jsxs("div", Object.assign({
         className: "dot-app-switcher-app-title"
       }, {
         children: [jsx(DotTypography, Object.assign({
@@ -3242,9 +3246,9 @@ const createAppTypeLabel = (appTypeName, logo, appProps) => {
 };
 const getInstanceStateText = application => {
   if (application.instance_state === 1) {
-    return 'Production instance';
+    return 'Production';
   }
-  return 'Non-production instance';
+  return 'Non-production';
 };
 const sortRecentAppInstancesFn = (a, b) => {
   const appA = a.application;
@@ -3308,7 +3312,7 @@ const StyledAppSwitcher = styled(DotDrawer).withConfig({
   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)));
+}) => css(["&.", "{.dot-drawer-paper{padding:0;width:382px;}.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;margin-bottom:", ";text-decoration:none;cursor:pointer;}.logo-title{display:flex;align-items:center;gap:16px;width:100%;.start-icon{width:40px;display:flex;justify-content:space-around;align-items:center;}}.dot-avatar{flex-basis:40px;}.section-title{display:flex;align-items:center;height:30px;padding:", ";margin:", ";border-bottom:1px solid ", ";}.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:16px;}.product-applications{margin-top:", ";width:100%;}.app-instance-search{margin-top:", ";}}"], rootClassName$K, theme.spacing(0, 2, 1, 2), theme.spacing(1), theme.spacing(0, 0, 0, 2), theme.spacing(0, -2, 0), theme.palette.grey[100], theme.palette.grey[100], theme.spacing(0, 2, 1, 2), theme.spacing(2), theme.spacing(2), theme.spacing(2)));
 
 const DotAppSwitcherView = ({
   activeApp,
@@ -3321,7 +3325,7 @@ const DotAppSwitcherView = ({
   open,
   searchInstancesThreshold: _searchInstancesThreshold = 5,
   selectedAppType,
-  yOffset: _yOffset = 64,
+  yOffset: _yOffset = 56,
   zIndex: _zIndex = 990
 }) => {
   const dotCoreApiContext = useDotCoreApiContext();
@@ -3353,7 +3357,7 @@ const DotAppSwitcherView = ({
     // we'll put Other at the end
     const otherApps = [];
     apps === null || apps === void 0 ? void 0 : apps.forEach(app => {
-      const instanceStateText = getInstanceStateText(app);
+      const instanceStateText = `${getInstanceStateText(app)} instance`;
       const children = createMenuItem(app.url, app.name, instanceStateText, e => {
         handleRecentInstance(e, app);
       });
@@ -3413,10 +3417,9 @@ const DotAppSwitcherView = ({
           singleTypeApps
         });
         menuItems.push({
-          children: jsxs("div", Object.assign({
+          children: jsxs(DotLink, Object.assign({
             className: "product-menu-item",
-            onClick: () => showApps(appTypeName),
-            tabIndex: 0
+            onClick: () => showApps(appTypeName)
           }, {
             children: [createAppTypeLabel(appTypeName, logo, singleTypeApps), jsx(DotIcon, {
               iconId: "chevron-right"
@@ -3476,7 +3479,7 @@ const DotAppSwitcherView = ({
     }, {
       children: recentAppInstances.map(item => {
         const app = item.application;
-        return createMenuItem(app.url, app.name, getInstanceStateText(app), e => {
+        return createMenuItem(app.url, app.name, `${app.logo_product_name} - ${getInstanceStateText(app)}`, e => {
           handleRecentInstance(e, app);
         });
       })
@@ -3506,14 +3509,16 @@ const DotAppSwitcherView = ({
           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", {
+        }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= _searchInstancesThreshold && jsx("div", Object.assign({
+          className: "app-instance-search"
+        }, {
           children: jsx(SearchInput, {
             "data-testid": "app-instance-search-input",
             onChange: onAppInstanceSearchTextChange,
             onClear: clearAppInstanceSearchText,
             value: searchText
           }, void 0)
-        }, void 0), jsx("div", Object.assign({
+        }), void 0), jsx("div", Object.assign({
           className: "product-applications"
         }, {
           children: filteredAppInstances()
@@ -4372,7 +4377,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$V,
+      className: rootClassName$U,
       disablePortal: _disablePortal,
       "$maxHeight": maxHeight
     }), void 0);
@@ -4396,7 +4401,7 @@ const DotAutoComplete = ({
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
     return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$V,
+      className: rootClassName$U,
       disablePortal: _disablePortal,
       "$maxHeight": maxHeight
     }, {
@@ -8994,7 +8999,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {