@digital-ai/dot-components 2.28.0 → 3.1.0

package/index.esm.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, 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, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, 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, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import jwt_decode from 'jwt-decode';
+import '@digital-ai/dot-illustrations';
 import { useDropzone } from 'react-dropzone';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import dayjs from 'dayjs';
@@ -101,12 +102,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$18 = 'dot-icon';
+const rootClassName$19 = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -143,7 +144,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -204,7 +205,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$17 = 'dot-accordion';
+const rootClassName$18 = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -215,7 +216,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$17} .${summaryClassName} {
+    &.${rootClassName$18} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -260,7 +261,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$17,
+  'data-pendoid': dataPendoId = rootClassName$18,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -271,7 +272,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -387,7 +388,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$16 = 'dot-text-field';
+const rootClassName$17 = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
@@ -435,7 +436,7 @@ const StyledTextField = styled(TextField)`
   theme,
   InputProps
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -479,7 +480,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$16} {
+    &.${rootSelectClassName}, &.${rootClassName$17} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -570,15 +571,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$15 = 'dot-action-toolbar';
+const rootClassName$16 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$16} .MuiInputBase-root {
+      .${rootClassName$17} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -592,7 +593,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -602,73 +603,6 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$14 = 'dot-alert-banner';
-const StyledAlertBanner = styled(Alert)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$14} {
-      align-items: center;
-      border-radius: 8px;
-      box-sizing: border-box;
-      display: flex;
-      min-height: 48px;
-      overflow: hidden;
-      padding: ${theme.spacing(0.75, 2)};
-
-      svg,
-      .dot-typography {
-        color: ${theme.palette.figma.overlay.alerts.text.black};
-      }
-
-      .dot-icon,
-      .MuiAlert-icon,
-      .MuiAlert-message {
-        padding: 0;
-        .dot-typography {
-          margin-bottom: 0;
-        }
-      }
-
-      &.MuiAlert-standardSuccess {
-        background: ${theme.palette.figma.overlay.alerts.success.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.success.icon};
-        }
-      }
-
-      &.MuiAlert-standardInfo {
-        background: ${theme.palette.figma.overlay.alerts.info.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.info.icon};
-        }
-      }
-
-      &.MuiAlert-standardWarning {
-        background: ${theme.palette.figma.overlay.alerts.warning.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.warning.icon};
-        }
-      }
-
-      &.MuiAlert-standardError {
-        background: ${theme.palette.figma.overlay.alerts.error.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.error.icon};
-        }
-      }
-    }
-  `}
-`;
-
 //Primary blue
 //https://zeroheight.com/4a9ac476a/p/22005a-color/t/6288e9
 const b50 = '#e8edf3';
@@ -1727,30 +1661,49 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
+const rootClassName$15 = 'dot-alert-banner';
+const StyledAlertBanner = styled(Alert)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$15} {
+      box-sizing: border-box;
+      min-height: 48px;
+      overflow: hidden;
+
+      &.MuiAlert-standardSuccess {
+        background: ${theme.palette.figma.overlay.alerts.success.background};
+      }
+
+      &.MuiAlert-standardInfo {
+        background: ${theme.palette.figma.overlay.alerts.info.background};
+      }
+
+      &.MuiAlert-standardWarning {
+        background: ${theme.palette.figma.overlay.alerts.warning.background};
+      }
+
+      &.MuiAlert-standardError {
+        background: ${theme.palette.figma.overlay.alerts.error.background};
+      }
+    }
+  `}
+`;
+
 const DotAlertBanner = ({
   action,
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$14,
+  'data-pendoid': dataPendoId = rootClassName$15,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
   severity,
-  textVariant = 'body1'
+  textVariant = 'body1',
+  width
 }) => {
-  const AlertBannerIcon = iconId => {
-    return jsx(DotIcon, {
-      iconId: iconId
-    });
-  };
-  const AlertBannerIconMapping = {
-    error: AlertBannerIcon('error-solid'),
-    info: AlertBannerIcon('info-solid'),
-    success: AlertBannerIcon('check-solid'),
-    warning: AlertBannerIcon('warning-solid')
-  };
-  const rootClasses = useStylesWithRootClass(rootClassName$14, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$1(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -1761,11 +1714,11 @@ const DotAlertBanner = ({
     },
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
-    iconMapping: AlertBannerIconMapping,
     onClose: onClose,
     severity: severity,
     style: {
-      borderRadius: roundedCorners ? '8px' : undefined
+      borderRadius: roundedCorners ? '8px' : undefined,
+      width
     },
     children: jsx(DotTypography, {
       variant: textVariant,
@@ -2399,7 +2352,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$13 = 'dot-avatar';
+const rootClassName$14 = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2409,7 +2362,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2521,7 +2474,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2560,12 +2513,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$12 = 'dot-button';
+const rootClassName$13 = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2649,7 +2602,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$12,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2665,7 +2618,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   let color;
   let variant;
   switch (type) {
@@ -2689,6 +2642,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
+    "data-testid": `${dataTestId || rootClassName$13}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2697,7 +2651,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId,
+      "data-testid": dataTestId || rootClassName$13,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2716,10 +2670,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$11 = 'dot-link';
+const rootClassName$12 = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2735,7 +2689,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$11,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2747,7 +2701,7 @@ const DotLink = ({
   tooltip,
   underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$1(children) && !ariaLabel) {
@@ -2797,7 +2751,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$10 = 'dot-list';
+const rootClassName$11 = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2805,7 +2759,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$10} {
+      &.${rootClassName$11} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2888,12 +2842,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$$ = 'dot-progress';
+const rootClassName$10 = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       &.MuiCircularProgress-colorPrimary {
         color: ${theme.palette.figma.inProgress.normal};
       }
@@ -2915,7 +2869,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -2956,35 +2910,35 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$_ = 'dot-popper';
+const rootClassName$$ = 'dot-popper';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
     }
 
-    &.${rootClassName$_}, &.${rootClassName$_} > .dot-popper-paper {
+    &.${rootClassName$$}, &.${rootClassName$$} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$Z = 'dot-menu';
+const rootClassName$_ = 'dot-menu';
 const getListMaxHeight = maxHeight => isString$1(maxHeight) ? maxHeight : `${maxHeight}px`;
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$Z}, &.${rootClassName$_} {
+    &.${rootClassName$_}, &.${rootClassName$$} {
       &.loading .MuiPaper-root {
         align-items: center;
         display: flex;
@@ -3059,14 +3013,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$Y = 'dot-ul';
+const rootClassName$Z = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3162,7 +3116,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3273,7 +3227,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3361,12 +3315,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$X = 'dot-drawer';
+const rootClassName$Y = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} .MuiBackdrop-root {
+    &.${rootClassName$Y} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3385,12 +3339,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$W = 'dot-drawer-header';
+const rootClassName$X = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3401,13 +3355,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$V = 'dot-icon-btn';
+const rootClassName$W = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3466,7 +3420,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-pendoid': dataPendoId = rootClassName$W,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3479,7 +3433,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$V, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3514,7 +3468,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3531,10 +3485,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$U = 'dot-drawer-body';
+const rootClassName$V = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3555,7 +3509,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3570,12 +3524,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$T = 'dot-drawer-footer';
+const rootClassName$U = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$U} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3588,7 +3542,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3604,7 +3558,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3627,7 +3581,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   const backdropEnabled = variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
   const headerExists = !!drawerHeaderProps;
   const bodyPendoId = drawerBodyProps ? drawerBodyProps['data-pendoid'] : 'drawer-body';
@@ -4011,7 +3965,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const [listItemIndex, setListItemIndex] = useState(null);
@@ -4049,7 +4003,7 @@ const DotList = ({
             updateSelectedListItem(index);
           }
         };
-        const determineOnClick = item.href && !item.onClick ? null : handleListItemClick;
+        const determineOnClick = item.onClick || item.items ? handleListItemClick : null;
         const handleMenuLeave = event => {
           // TODO: Need to apply animation to open/close
           var _a, _b;
@@ -4100,12 +4054,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$S = 'dot-copy-button';
+const rootClassName$T = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} .copied-to-clipboard {
+    &.${rootClassName$T} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4131,7 +4085,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$S,
+  'data-pendoid': dataPendoId = rootClassName$T,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4179,7 +4133,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$S,
+    className: rootClassName$T,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4268,7 +4222,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$16,
+  'data-pendoid': dataPendoId = rootClassName$17,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4314,7 +4268,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$16, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$17, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4450,10 +4404,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$R = 'dot-search-input';
+const rootClassName$S = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$R} {
+    &.${rootClassName$S} {
     }
   `}
 `;
@@ -4470,7 +4424,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4726,12 +4680,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$Q = 'dot-app-switcher';
+const rootClassName$R = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$R} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -4841,7 +4795,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5219,12 +5173,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$P = 'dot-sidebar';
+const rootClassName$Q = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$Q} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5500,10 +5454,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$O = 'dot-truncate-with-tooltip';
+const rootClassName$P = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$O} {
+    &.${rootClassName$P} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5534,7 +5488,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5644,7 +5598,7 @@ const DotSidebar = ({
     setIsOpen(!isOpen);
   };
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$P, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5711,12 +5665,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$N = 'dot-badge';
+const rootClassName$O = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$O} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5751,7 +5705,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5773,7 +5727,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$M = 'dot-app-toolbar';
+const rootClassName$N = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5813,7 +5767,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$N} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -5935,7 +5889,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6065,14 +6019,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$L = 'dot-autocomplete';
+const rootClassName$M = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$M} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6109,12 +6063,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$K = 'dot-chip';
+const rootClassName$L = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$L} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6220,7 +6174,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$K,
+  'data-pendoid': dataPendoId = rootClassName$L,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6232,7 +6186,7 @@ const DotChip = ({
   startIcon
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6330,7 +6284,7 @@ const DotAutoComplete = ({
   ariaLabel,
   autoFocus,
   className,
-  'data-pendoid': dataPendoId = rootClassName$L,
+  'data-pendoid': dataPendoId = rootClassName$M,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6381,8 +6335,8 @@ const DotAutoComplete = ({
   const popperOpen = !readOnly && (open || isOpened);
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(rootClassName$L, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$16, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$17, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
   let highlightedOption = null;
   let textFieldInput;
@@ -6427,7 +6381,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$_,
+      className: rootClassName$$,
       disablePortal: disablePortal,
       "$maxHeight": maxHeight
     }));
@@ -6449,7 +6403,7 @@ const DotAutoComplete = ({
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
     return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$_,
+      className: rootClassName$$,
       disablePortal: disablePortal,
       "$maxHeight": maxHeight,
       children: jsxs(Paper, Object.assign({}, paperProps, {
@@ -6658,10 +6612,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$J = 'dot-avatar-group';
+const rootClassName$K = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$J} {
+      &.${rootClassName$K} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6680,7 +6634,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6695,13 +6649,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$I = 'dot-breadcrumbs';
+const rootClassName$J = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6721,7 +6675,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7049,7 +7003,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$I,
+        root: rootClassName$J,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7080,14 +7034,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$H = 'dot-button-toggle';
+const rootClassName$I = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7203,7 +7157,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$H,
+  'data-pendoid': dataPendoId = rootClassName$I,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7213,7 +7167,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7296,12 +7250,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$G = 'dot-card';
+const rootClassName$H = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$H} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7313,7 +7267,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7342,12 +7296,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$F = 'dot-card-footer';
+const rootClassName$G = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$F} {
+    &.${rootClassName$G} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7359,7 +7313,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7403,9 +7357,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$E = 'dot-form-control-label';
+const rootClassName$F = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$E} {
+  &.${rootClassName$F} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -7428,12 +7382,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$D = 'dot-checkbox';
+const rootClassName$E = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$D} {
+    &.${rootClassName$E} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -7452,7 +7406,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$E,
+  'data-pendoid': dataPendoId = rootClassName$F,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7467,14 +7421,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$D
+      root: rootClassName$E
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -7503,13 +7457,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$C = 'dot-form-group';
+const rootClassName$D = 'dot-form-group';
 const groupLabelClassName = 'dot-form-group-label';
 const startAdornmentClassName = 'dot-start-adornment';
 const endAdornmentClassName = 'dot-end-adornment';
 const placementClassName = 'dot-';
 const StyledFormControl = styled(FormControl)`
-  &.${rootClassName$C} {
+  &.${rootClassName$D} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -7540,7 +7494,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$B = 'dot-checkbox-group';
+const rootClassName$C = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -7549,7 +7503,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$B} {
+      .${rootClassName$C} {
         width: 100%;
       }
 
@@ -7572,7 +7526,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$E} {
+        .${rootClassName$F} {
           margin: 0;
         }
       }
@@ -7580,13 +7534,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$A = 'dot-form-group';
+const rootClassName$B = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$A} > * {
+    &.${rootClassName$B} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -7599,7 +7553,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7638,7 +7592,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$C, rootClassName$B, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$D, rootClassName$C, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -7723,12 +7677,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$z = 'dot-dialog';
+const rootClassName$A = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$A} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -7774,7 +7728,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$z,
+  'data-pendoid': dataPendoId = rootClassName$A,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -7787,7 +7741,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   useEffect(() => {
@@ -7905,7 +7859,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$y = 'dot-grid';
+const rootClassName$z = 'dot-grid';
 const frGetter = value => typeof value === 'number' ? `repeat(${value}, 1fr)` : value;
 const breakpointsGetter$1 = (theme, columnsBreakpoints, columnGap, rowGap) => `${theme.breakpoints.up('xs')} {
     column-gap: ${`${columnGap.xs}px`};
@@ -7957,7 +7911,7 @@ const Grid = ({
   className,
   children
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
   return jsx("div", {
     className: rootClasses,
     children: children
@@ -7976,7 +7930,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$y} {
+    &.${rootClassName$z} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -8182,7 +8136,7 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$x = 'dot-empty-state';
+const rootClassName$y = 'dot-empty-state';
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -8192,6 +8146,11 @@ const StyledEmptyState = styled.div`
       max-width: 600px;
       text-align: center;
 
+      .empty-state-image-container {
+        display: flex;
+        justify-content: center;
+      }
+
       .empty-state-image {
         min-height: 239px;
         margin-bottom: ${theme.spacing(5)};
@@ -8212,26 +8171,77 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
+const rootClassName$x = 'dot-illustration';
+const StyledIllustration = styled.span`
+  &.${rootClassName$x} {
+    display: inline-block;
+  }
+`;
+
+const DotIllustration = ({
+  alt,
+  ariaLabel,
+  ariaRole = 'img',
+  className,
+  'data-testid': dataTestId,
+  illustrationId,
+  theme = 'light',
+  title,
+  tooltip,
+  tooltipPlacement = 'right-end'
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  return jsx(DotTooltip, {
+    title: tooltip,
+    placement: tooltipPlacement,
+    "data-testid": `${dataTestId || rootClassName$x}-tooltip`,
+    children: jsx(StyledIllustration, {
+      "aria-hidden": "false",
+      "aria-label": ariaLabel || title || 'Illustration',
+      className: rootClasses,
+      "data-testid": dataTestId || rootClassName$x,
+      role: ariaRole,
+      children: jsx("img", {
+        alt: alt || 'Illustration',
+        "aria-label": ariaLabel || title || 'Illustration',
+        className: `illustration-${illustrationId} dot-img ${theme}-theme`,
+        "data-testid": dataTestId && `${dataTestId}-img`,
+        role: ariaRole,
+        title: title || 'Illustration'
+      })
+    })
+  });
+};
+
 const DotEmptyState = ({
   ariaLabel,
   buttonProps,
   className,
   'data-testid': dataTestId,
+  illustrationId,
   imageAltText,
   imageSrc,
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
-    children: [imageSrc && jsx("img", {
-      alt: imageAltText || title,
-      className: "empty-state-image",
-      src: imageSrc,
-      title: imageAltText || title
+    children: [jsxs("div", {
+      className: "empty-state-image-container",
+      children: [illustrationId && jsx(DotIllustration, {
+        alt: imageAltText || title,
+        className: "empty-state-image",
+        illustrationId: illustrationId,
+        title: imageAltText || title
+      }), !illustrationId && imageSrc && jsx("img", {
+        alt: imageAltText || title,
+        className: "empty-state-image",
+        src: imageSrc,
+        title: imageAltText || title
+      })]
     }), jsx(DotTypography, {
       variant: "h2",
       children: title
@@ -8296,7 +8306,7 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$E} {
+      .${rootClassName$F} {
         margin: 0;
       }
     }
@@ -8311,15 +8321,15 @@ const StyledFormContainer = styled.div`
     &.${rootClassName$w} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$C},
-        .${rootClassName$E},
-        .${rootClassName$16},
+      .${rootClassName$D},
+        .${rootClassName$F},
+        .${rootClassName$17},
         .${rootSelectClassName} {
         margin: ${theme.spacing(1, 0)};
       }
 
-      .${rootClassName$B}, .${groupClassName} {
-        .${rootClassName$E} {
+      .${rootClassName$C}, .${groupClassName} {
+        .${rootClassName$F} {
           margin: 0;
         }
       }
@@ -8735,7 +8745,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$E,
+  'data-pendoid': dataPendoId = rootClassName$F,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -8748,7 +8758,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -8802,7 +8812,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$C, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -8936,7 +8946,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$E,
+    className: rootClassName$F,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -10222,83 +10232,71 @@ const DotSkeleton = ({
   });
 };
 
+function addAutoHideDuration(severity) {
+  return severity === 'error' ? null : 10000;
+}
+
+const getSnackbarTitleFromSeverity = severity => {
+  switch (severity) {
+    case 'success':
+      return 'Success';
+    case 'warning':
+      return 'Warning';
+    case 'error':
+      return 'Error';
+    case 'info':
+      return 'Info';
+    default:
+      return 'Success';
+  }
+};
+
 const rootClassName$n = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
-  theme
+  theme,
+  width,
+  $anchorOriginTop
 }) => css`
-  &.${rootClassName$n} {
-    .dot-icon-btn .dot-icon {
-      color: ${theme.palette.figma.icon.white};
-    }
-
-    .dot-icon-btn:hover {
-      background: ${n900_20};
-    }
+    &.${rootClassName$n} {
+      .MuiAlert-message {
+        word-break: break-word;
+      }
 
-    .MuiAlert-icon {
-      color: ${theme.palette.figma.icon.white};
-      padding: 11px 0px;
-    }
-    .MuiAlert-message {
-      padding: 13px 0px;
-      word-break: break-word;
-    }
-    &.MuiSnackbar-anchorOriginTopRight{
-      top: 0px;
-      z-index: ${levelFourth};
-    }
+      &.MuiSnackbar-anchorOriginTopLeft,
+      &.MuiSnackbar-anchorOriginTopCenter,
+      &.MuiSnackbar-anchorOriginTopRight {
+        top: ${$anchorOriginTop}px;
+        z-index: ${levelFourth};
+      }
 
-    .MuiAlert-root {
-      color: ${theme.palette.figma.typography.white};
-      position: relative;
-      margin-top: 108px;
-      max-width: 500px;
-      min-width: 344px;
-      z-index: ${levelFourth};
+      .dot-snackbar-actions {
+        display: flex;
+        align-items: center;
+        margin-top: ${theme.spacing(1)};
+        gap: ${theme.spacing(2)};
 
-      @media (min-width: 720px) {
-        .MuiAlert-root {
-          top: 112px;
-          position: relative;
+        .primary-action-btn {
+          background-color: transparent;
         }
       }
 
-      &.MuiAlert-standardSuccess {
-        background: ${theme.palette.figma.success.normal};
-      }
-      &.MuiAlert-standardInfo {
-        background: ${theme.palette.figma.inProgress.normal};
-      }
-      &.MuiAlert-standardWarning {
-        background: ${theme.palette.figma.warning.normal};
-      }
-      &.MuiAlert-standardError {
-        background: ${theme.palette.figma.destructive.normal};
+      .MuiAlert-root {
+        max-width: ${width ? 'unset' : '500px'};
+        min-width: ${width ? 'unset' : '344px'};
+        z-index: ${levelFourth};
       }
     }
   `}
 `;
 
-function addAutoHideDuration(severity) {
-  return severity === 'error' ? null : 10000;
-}
-
-function checkForConflictingEventHandlers({
-  action,
-  onClose
-}) {
-  if (action && onClose) {
-    console.error('You have passed two event handlers for action buttons. Please pick one.');
-  }
-}
 const DEFAULT_ANCHOR_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
 };
 const DotSnackbar = ({
-  action,
   anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
+  anchorOriginTop = 108,
   ariaLabel,
   autoHideDuration,
   children,
@@ -10307,22 +10305,22 @@ const DotSnackbar = ({
   hideOnClickAway = true,
   onClose,
   open,
+  primaryAction,
+  secondaryAction,
   severity,
   width
 }) => {
+  const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  checkForConflictingEventHandlers({
-    onClose,
-    action
-  });
   const rootClasses = useStylesWithRootClass(rootClassName$n, className);
   const handleSnackbarClose = reason => {
-    if (hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
+    if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
     }
   };
   return jsx(StyledSnackbar, {
     anchorOrigin: anchorOrigin,
+    "$anchorOriginTop": anchorOriginTop,
     "aria-label": ariaLabel,
     autoHideDuration: calculatedAutoHideDuration,
     classes: {
@@ -10332,16 +10330,41 @@ const DotSnackbar = ({
     onClose: (_e, r) => handleSnackbarClose(r),
     open: open,
     severity: severity,
-    children: jsx(Alert, {
-      action: action,
-      onClose: onClose,
-      severity: severity,
-      style: {
-        width: width
-      },
-      children: jsx("span", {
-        "aria-label": severity,
-        children: children
+    width: width,
+    children: jsx("div", {
+      children: jsx(DotAlertBanner, {
+        severity: severity,
+        width: width,
+        onClose: _e => handleSnackbarClose(),
+        children: jsxs("div", {
+          children: [jsx(DotTypography, {
+            variant: "subtitle2",
+            noMarginBottom: false,
+            children: getSnackbarTitleFromSeverity(severity)
+          }), isString$1(children) ? jsx(DotTypography, {
+            ariaLabel: severity,
+            variant: "body1",
+            children: children
+          }) : jsx("span", {
+            "aria-label": severity,
+            children: children
+          }), hasActions && jsxs("div", {
+            className: "dot-snackbar-actions",
+            children: [primaryAction && jsx(DotButton, {
+              className: "primary-action-btn",
+              "data-testid": "primary-action-btn",
+              onClick: primaryAction.onClick,
+              size: "small",
+              type: "outlined",
+              children: primaryAction.label
+            }), secondaryAction && jsx(DotLink, {
+              "data-testid": "secondary-action-link",
+              href: secondaryAction.href,
+              color: "inherit",
+              children: secondaryAction.label
+            })]
+          })]
+        })
       })
     })
   });
@@ -13169,7 +13192,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -14449,4 +14472,4 @@ const DotStickyWithBorder = ({
   });
 };
 
-export { ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+export { ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };