@digital-ai/dot-components 3.0.0 → 3.1.0

package/index.esm.js

@@ -6,6 +6,7 @@ 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,
@@ -1660,12 +1661,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$14 = 'dot-alert-banner';
+const rootClassName$15 = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       box-sizing: border-box;
       min-height: 48px;
       overflow: hidden;
@@ -1694,7 +1695,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$14,
+  'data-pendoid': dataPendoId = rootClassName$15,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1702,7 +1703,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  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, {
@@ -2351,7 +2352,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$13 = 'dot-avatar';
+const rootClassName$14 = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2361,7 +2362,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2473,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;
@@ -2512,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)};
@@ -2601,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,
@@ -2617,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) {
@@ -2641,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,
@@ -2649,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,
@@ -2668,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 {
@@ -2687,7 +2689,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$11,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2699,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) {
@@ -2749,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';
@@ -2757,7 +2759,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$10} {
+      &.${rootClassName$11} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2840,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};
       }
@@ -2867,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');
@@ -2908,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;
@@ -3011,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 {
@@ -3114,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) => {
@@ -3225,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
@@ -3313,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};
     }
 
@@ -3337,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;
@@ -3353,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;
             ` : ''}
@@ -3418,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,
@@ -3431,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,
@@ -3466,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,
@@ -3483,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;
@@ -3507,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,
@@ -3522,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)};
     }
   `}
@@ -3540,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,
@@ -3556,7 +3558,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3579,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';
@@ -3963,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);
@@ -4001,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;
@@ -4052,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 {
@@ -4083,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,
@@ -4131,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,
@@ -4220,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,
@@ -4266,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));
@@ -4402,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} {
     }
   `}
 `;
@@ -4422,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 => {
@@ -4678,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;
@@ -4793,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();
@@ -5171,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;
@@ -5452,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;
@@ -5486,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,
@@ -5596,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,
@@ -5663,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;
 
@@ -5703,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: {
@@ -5725,7 +5727,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$M = 'dot-app-toolbar';
+const rootClassName$N = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5765,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};
@@ -5887,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(() => {
@@ -6017,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)};
@@ -6061,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};
@@ -6172,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,
@@ -6184,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)}...`;
@@ -6282,7 +6284,7 @@ const DotAutoComplete = ({
   ariaLabel,
   autoFocus,
   className,
-  'data-pendoid': dataPendoId = rootClassName$L,
+  'data-pendoid': dataPendoId = rootClassName$M,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6333,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;
@@ -6379,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
     }));
@@ -6401,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, {
@@ -6610,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 {
@@ -6632,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: {
@@ -6647,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 {
@@ -6673,7 +6675,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7001,7 +7003,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$I,
+        root: rootClassName$J,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7032,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)};
@@ -7155,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,
@@ -7165,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,
@@ -7248,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};
     }
   `}
@@ -7265,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: {
@@ -7294,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)};
     }
   `}
@@ -7311,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,
@@ -7355,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;
@@ -7380,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 {
@@ -7404,7 +7406,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$E,
+  'data-pendoid': dataPendoId = rootClassName$F,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7419,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,
@@ -7455,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;
@@ -7492,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';
@@ -7501,7 +7503,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$B} {
+      .${rootClassName$C} {
         width: 100%;
       }
 
@@ -7524,7 +7526,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$E} {
+        .${rootClassName$F} {
           margin: 0;
         }
       }
@@ -7532,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};
     }
   `}
@@ -7551,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: {
@@ -7590,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 */
@@ -7675,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};
@@ -7726,7 +7728,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$z,
+  'data-pendoid': dataPendoId = rootClassName$A,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -7739,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(() => {
@@ -7857,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`};
@@ -7909,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
@@ -7928,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)}
@@ -8134,7 +8136,7 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$x = 'dot-empty-state';
+const rootClassName$y = 'dot-empty-state';
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -8144,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)};
@@ -8164,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
@@ -8248,7 +8306,7 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$E} {
+      .${rootClassName$F} {
         margin: 0;
       }
     }
@@ -8263,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;
         }
       }
@@ -8687,7 +8745,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$E,
+  'data-pendoid': dataPendoId = rootClassName$F,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -8700,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);
   };
@@ -8754,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 */
@@ -8888,7 +8946,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$E,
+    className: rootClassName$F,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -13134,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))) {
@@ -14414,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 };