@digital-ai/dot-components 3.0.0 → 3.2.0

package/index.esm.js

@@ -6,11 +6,12 @@ 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 { DatePicker, PickersDay, TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { useDropzone } from 'react-dropzone';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import dayjs from 'dayjs';
 import updateLocale from 'dayjs/plugin/updateLocale';
-import { DatePicker, PickersDay, LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import utc from 'dayjs/plugin/utc';
 
@@ -54,6 +55,7 @@ const DotTooltip = ({
   onClose,
   open,
   placement = 'bottom',
+  popperClassName,
   title
 }) => {
   const rootClasses = useStylesWithRootClass('dot-tooltip', className);
@@ -89,7 +91,8 @@ const DotTooltip = ({
     open: open,
     placement: placement,
     PopperProps: {
-      disablePortal
+      disablePortal,
+      className: popperClassName
     },
     role: ariaRole,
     title: title,
@@ -101,12 +104,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 +146,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 +207,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 +218,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 +263,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 +274,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 +390,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 +438,7 @@ const StyledTextField = styled(TextField)`
   theme,
   InputProps
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -479,7 +482,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 +573,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 +595,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,16 +1663,22 @@ 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} {
+      align-items: center;
       box-sizing: border-box;
       min-height: 48px;
       overflow: hidden;
 
+      .MuiAlert-message {
+        margin: ${theme.spacing(1, 0)};
+        padding: 0;
+      }
+
       &.MuiAlert-standardSuccess {
         background: ${theme.palette.figma.overlay.alerts.success.background};
       }
@@ -1694,7 +1703,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$14,
+  'data-pendoid': dataPendoId = rootClassName$15,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1702,7 +1711,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 +2360,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$13 = 'dot-avatar';
+const rootClassName$14 = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2361,7 +2370,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2473,7 +2482,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 +2521,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 +2610,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 +2626,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 +2650,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 +2659,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 +2678,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 +2697,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$11,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2699,7 +2709,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 +2759,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 +2767,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$10} {
+      &.${rootClassName$11} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2840,12 +2850,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 +2877,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 +2918,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 +3021,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 +3124,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 +3235,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 +3323,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 +3347,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 +3363,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 +3428,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 +3441,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 +3476,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 +3493,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 +3517,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 +3532,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 +3550,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 +3566,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3579,7 +3589,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 +3973,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 +4011,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 +4062,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 +4093,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 +4141,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 +4230,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 +4276,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 +4412,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 +4432,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 +4688,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 +4803,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 +5181,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 +5462,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 +5496,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 +5606,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 +5673,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 +5713,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 +5735,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$M = 'dot-app-toolbar';
+const rootClassName$N = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5765,7 +5775,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 +5897,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 +6027,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 +6071,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 +6182,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 +6194,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 +6292,7 @@ const DotAutoComplete = ({
   ariaLabel,
   autoFocus,
   className,
-  'data-pendoid': dataPendoId = rootClassName$L,
+  'data-pendoid': dataPendoId = rootClassName$M,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6333,8 +6343,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 +6389,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 +6411,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 +6620,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 +6642,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 +6657,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 +6683,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7001,7 +7011,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$I,
+        root: rootClassName$J,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7032,14 +7042,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 +7165,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 +7175,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 +7258,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 +7275,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 +7304,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 +7321,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 +7365,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 +7390,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 +7414,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$E,
+  'data-pendoid': dataPendoId = rootClassName$F,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7419,14 +7429,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 +7465,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 +7502,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 +7511,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$B} {
+      .${rootClassName$C} {
         width: 100%;
       }
 
@@ -7524,7 +7534,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$E} {
+        .${rootClassName$F} {
           margin: 0;
         }
       }
@@ -7532,13 +7542,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 +7561,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 +7600,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 +7685,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 +7736,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$z,
+  'data-pendoid': dataPendoId = rootClassName$A,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -7739,7 +7749,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 +7867,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 +7919,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 +7938,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 +8144,7 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$x = 'dot-empty-state';
+const rootClassName$y = 'dot-empty-state';
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -8144,6 +8154,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 +8179,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,30 +8314,188 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$E} {
+      .${rootClassName$F} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$w = 'dot-form';
-const StyledFormContainer = styled.div`
+const rootClassName$w = 'dot-date-picker';
+const popperClassName = 'dot-date-picker-popper';
+const containerClassName$2 = 'dot-date-picker-container';
+const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
+const StyledDatePickerContainer = styled.div`
+  ${() => css`
+    &.${rootClassName$w} .full-width {
+      width: 100%;
+    }
+  `}
+`;
+const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
     &.${rootClassName$w} {
+      ${pickerInputStyles(theme)};
+
+      .Mui-disabled.MuiInputBase-root,
+      &.read-only .MuiInputBase-root {
+        ${readOnlyStyles(theme)};
+      }
+
+      .dot-icon-btn .dot-i {
+        margin-top: -5px;
+      }
+
+      .MuiFormLabel-root {
+        color: ${theme.palette.figma.typography.black};
+      }
+    }
+  `}
+`;
+const StyledPickersDay = styled(PickersDay)`
+  ${({
+  theme
+}) => css`
+    &.${rectanglePickersDayClassName} {
+      border-radius: ${theme.spacing(0.5)};
+      &.MuiPickersDay-today:not(.Mui-selected) {
+        background: ${theme.palette.figma.neutral.normal};
+        border: 1px solid ${theme.palette.figma.primary.normal};
+        &:hover {
+          background: ${theme.palette.figma.primary.normal};
+        }
+      }
+
+      &:hover {
+        background: ${theme.palette.figma.primary.normal};
+        color: ${theme.palette.figma.typography.white};
+      }
+    }
+  `}
+`;
+
+const rootClassName$v = 'dot-time-picker';
+const containerClassName$1 = 'dot-time-picker-container';
+const TIME_SELECTION_HEIGHT_SPACING = 34.5;
+const TIME_SELECTION_WIDTH_SPACING = 14.5;
+const TIME_UNIT_WIDTH_SPACING = 4.5;
+const TIME_UNIT_HEIGHT_SPACING = 4.5;
+const StyledTimePickerContainer = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${containerClassName$1} {
+      .full-width {
+        width: 100%;
+      }
+
+      .dot-time-picker-popper {
+        z-index: ${levelTop};
+
+        .dot-time-picker-paper {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .dot-time-picker-selection {
+            max-height: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING)};
+            width: ${theme.spacing(TIME_SELECTION_WIDTH_SPACING)};
+            display: flex;
+            margin: ${theme.spacing(1)};
+            gap: ${theme.spacing(0.5)};
+
+            .dot-time-picker-hours,
+            .dot-time-picker-minutes,
+            .dot-time-picker-daytime {
+              display: flex;
+              flex-direction: column;
+              overflow: auto;
+              gap: ${theme.spacing(0.5)};
+              padding-bottom: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING - TIME_UNIT_HEIGHT_SPACING)};
+
+              /* Hide scrollbar for Chrome, Safari and Opera */
+              ::-webkit-scrollbar {
+                display: none;
+              }
+
+              /* Hide scrollbar for IE, Edge and Firefox */
+              -ms-overflow-style: none; /* IE and Edge */
+              scrollbar-width: none; /* Firefox */
+            }
+
+            .dot-picker-button {
+              width: ${theme.spacing(TIME_UNIT_WIDTH_SPACING)};
+              height: ${theme.spacing(TIME_UNIT_HEIGHT_SPACING)};
+              margin: 0;
+            }
+          }
+
+          .dot-time-picker-action-buttons {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: ${theme.spacing(0.5)};
+          }
+        }
+      }
+    }
+  `}
+`;
+const StyledTimePicker = styled(TimePicker)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$v} {
+      ${pickerInputStyles(theme)};
+
+      .Mui-disabled.MuiInputBase-root,
+      &.read-only .MuiInputBase-root {
+        ${readOnlyStyles(theme)};
+      }
+
+      .dot-icon-btn .dot-i {
+        margin-top: -5px;
+      }
+
+      .MuiFormLabel-root {
+        color: ${theme.palette.figma.typography.black};
+      }
+    }
+  `}
+`;
+
+const rootClassName$u = 'dot-form';
+const StyledFormContainer = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$u} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$C},
-        .${rootClassName$E},
-        .${rootClassName$16},
-        .${rootSelectClassName} {
+      .${rootClassName$D},
+        .${rootClassName$F},
+        .${rootClassName$17},
+        .${rootSelectClassName},
+        .${rootClassName$w},
+        .${rootClassName$v} {
         margin: ${theme.spacing(1, 0)};
       }
 
-      .${rootClassName$B}, .${groupClassName} {
-        .${rootClassName$E} {
+      label
+        + .${rootClassName$17},
+        label
+        + .${rootSelectClassName},
+        label
+        + .${rootClassName$w},
+        label
+        + .${rootClassName$v} {
+        margin: ${theme.spacing(0, 0, 1, 0)};
+      }
+
+      .${rootClassName$C}, .${groupClassName} {
+        .${rootClassName$F} {
           margin: 0;
         }
       }
@@ -8286,7 +8510,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -8299,10 +8523,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$v = 'dot-dynamic-form';
+const rootClassName$t = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$t} {
     }
   `}
 `;
@@ -8593,12 +8817,12 @@ const DotInputSelect = ({
   });
 };
 
-const rootClassName$u = 'dot-progress-button';
+const rootClassName$s = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$s} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -8623,7 +8847,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$u,
+  'data-pendoid': dataPendoId = rootClassName$s,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -8636,7 +8860,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -8664,12 +8888,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$t = 'dot-radio';
+const rootClassName$r = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$r} {
       padding: 8px;
 
       svg {
@@ -8687,7 +8911,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$E,
+  'data-pendoid': dataPendoId = rootClassName$F,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -8700,7 +8924,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);
   };
@@ -8708,7 +8932,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$t
+      root: rootClassName$r
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8754,7 +8978,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 */
@@ -8819,7 +9043,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$s = 'dot-switch';
+const rootClassName$q = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -8848,7 +9072,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$s,
+  'data-pendoid': dataPendoId = rootClassName$q,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -8858,7 +9082,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$q, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -8888,7 +9112,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$E,
+    className: rootClassName$F,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -9209,7 +9433,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
   // Memoize this operation so that is doesn't get executed each time this
   // component re-renders
   const initialFormState = useMemo(() => getInitialFormState(config, liveValidation), [config, liveValidation, getInitialFormState]);
@@ -9455,7 +9679,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$r = 'dot-inline-edit';
+const rootClassName$p = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -9467,7 +9691,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$r} {
+    &.${rootClassName$p} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -9679,7 +9903,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$r,
+  'data-pendoid': dataPendoId = rootClassName$p,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -9712,7 +9936,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$r, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$p, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -9891,13 +10115,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$q = 'dot-navigation-rail';
+const rootClassName$o = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$o} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -9944,7 +10168,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -9995,12 +10219,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$p = 'dot-pill';
+const rootClassName$n = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$p} {
+    &.${rootClassName$n} {
       background-color: ${({
   backgroundcolor
 }) => {
@@ -10031,7 +10255,7 @@ const StyledPill = styled(Chip)`
 
       &.MuiChip-outlined {
         &.error {
-          background-color: ${theme.palette.error[100]};
+          background-color: ${theme.palette.error[50]};
           border-color: ${theme.palette.error.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10039,8 +10263,17 @@ const StyledPill = styled(Chip)`
           }
         }
 
+        &.default {
+          background-color: ${theme.palette.grey[50]};
+          border-color: ${theme.palette.grey[200]};
+          color: ${theme.palette.layer.n700};
+          .dot-icon {
+            color: ${theme.palette.grey.main};
+          }
+        }
+
         &.success {
-          background-color: ${theme.palette.success[100]};
+          background-color: ${theme.palette.success[50]};
           border-color: ${theme.palette.success.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10049,7 +10282,7 @@ const StyledPill = styled(Chip)`
         }
 
         &.warning {
-          background-color: ${theme.palette.warning[100]};
+          background-color: ${theme.palette.warning[50]};
           border-color: ${theme.palette.warning.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10058,7 +10291,7 @@ const StyledPill = styled(Chip)`
         }
 
         &.in-progress {
-          background-color: ${theme.palette.primary[100]};
+          background-color: ${theme.palette.primary[50]};
           border-color: ${theme.palette.primary.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10068,6 +10301,15 @@ const StyledPill = styled(Chip)`
       }
 
       &.MuiChip-filled {
+        &.default {
+          background-color: ${theme.palette.grey[200]};
+          border-color: ${theme.palette.grey[200]};
+          color: ${theme.palette.layer.n700};
+          .dot-icon {
+            color: ${theme.palette.grey.main};
+          }
+        }
+
         &.error {
           background-color: ${theme.palette.error.main};
           border-color: ${theme.palette.error.main};
@@ -10121,7 +10363,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -10139,12 +10381,12 @@ const DotPill = ({
   });
 };
 
-const rootClassName$o = 'dot-skeleton';
+const rootClassName$m = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$m} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -10159,7 +10401,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$m, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -10193,18 +10435,20 @@ const getSnackbarTitleFromSeverity = severity => {
   }
 };
 
-const rootClassName$n = 'dot-snackbar';
+const rootClassName$l = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$l} {
       .MuiAlert-message {
         word-break: break-word;
       }
-
+      .${rootClassName$15} {
+        align-items: flex-start;
+      }
       &.MuiSnackbar-anchorOriginTopLeft,
       &.MuiSnackbar-anchorOriginTopCenter,
       &.MuiSnackbar-anchorOriginTopRight {
@@ -10254,7 +10498,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -10312,10 +10556,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$m = 'dot-snackbar-container';
+const rootClassName$k = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$m} {
+    &.${rootClassName$k} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -10330,7 +10574,7 @@ const StyledSnackbarContainer = styled.div`
 
 const DotSnackbarContext = createContext({
   alerts: [],
-  enqueueMessage: (_message, _severity, _autoHideDuration) => null,
+  enqueueMessage: (_message, _severity, _autoHideDuration, _primaryAction, _secondaryAction) => null,
   removeMessage: _id => null
 });
 const DotSnackbarContainer = ({
@@ -10346,10 +10590,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$m,
+    className: rootClassName$k,
     children: jsx("div", {
-      className: rootClassName$m,
-      "data-testid": rootClassName$m,
+      className: rootClassName$k,
+      "data-testid": rootClassName$k,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoHideDuration: alert.autoHideDuration,
@@ -10357,6 +10601,8 @@ const DotSnackbarContainer = ({
           onClose: handleClose(alert.id),
           open: alert.open,
           severity: alert.severity,
+          primaryAction: alert.primaryAction,
+          secondaryAction: alert.secondaryAction,
           children: alert.message
         }, alert.id);
       })
@@ -10368,14 +10614,16 @@ const DotSnackbarProvider = ({
   hideOnClickAway = true
 }) => {
   const [alerts, setAlerts] = useState([]);
-  function enqueueMessage(message, severity, autoHideDuration) {
+  function enqueueMessage(message, severity, autoHideDuration, primaryAction, secondaryAction) {
     const id = CreateUUID();
     const queue = {
       id,
       message,
       severity,
       open: true,
-      autoHideDuration
+      autoHideDuration,
+      primaryAction,
+      secondaryAction
     };
     setAlerts(prevState => {
       return [...prevState, Object.assign({}, queue)];
@@ -10408,12 +10656,12 @@ const useDotSnackbarContext = () => {
   return useContext(DotSnackbarContext);
 };
 
-const rootClassName$l = 'dot-split-button-group';
+const rootClassName$j = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$j} {
       &.outlined,
       &.text {
         .expand-button {
@@ -10480,7 +10728,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$l,
+  'data-pendoid': dataPendoId = rootClassName$j,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -10495,7 +10743,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$l, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$j, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -10561,14 +10809,14 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$k = 'dot-stepper';
+const rootClassName$i = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$i} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -10841,7 +11089,7 @@ const DotStepper = ({
   const displayFinalContent = finalContent && currentStep > steps.length;
   const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
   const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
-  const rootClasses = useStylesWithRootClass(rootClassName$k, stepsPosition, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$i, stepsPosition, className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
@@ -11040,7 +11288,7 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$j = 'dot-table-pagination';
+const rootClassName$h = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -11048,7 +11296,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$j} {
+    .${rootClassName$h} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -11086,7 +11334,7 @@ const DotTablePagination = ({
   rowsPerPageOptions = [...ROWS_PER_PAGE_OPTIONS],
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$h, className);
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -11095,7 +11343,7 @@ const DotTablePagination = ({
   };
   return (/* Container is used to pass 'typography' prop to a styled component */
     jsx(StyledTablePagination, {
-      className: rootClassName$j,
+      className: rootClassName$h,
       typography: typography,
       children: jsx(TablePagination, {
         "aria-label": ariaLabel,
@@ -11121,12 +11369,12 @@ const DotTablePagination = ({
   );
 };
 
-const rootClassName$i = 'dot-table';
+const rootClassName$g = 'dot-table';
 const StyledPaper = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$i} {
+    &.${rootClassName$g} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -11195,10 +11443,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$h = 'dot-tbody';
+const rootClassName$f = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$h} {
+    &.${rootClassName$f} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -11346,12 +11594,12 @@ const parseCellMaxWidth = width => {
   return width;
 };
 
-const rootClassName$g = 'dot-td';
+const rootClassName$e = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$g} {
+    &.${rootClassName$e} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -11446,7 +11694,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$g, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$e, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -11511,12 +11759,12 @@ const EmptyDotRow = ({
   }, CreateUUID());
 };
 
-const rootClassName$f = 'dot-tr';
+const rootClassName$d = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$f} {
+    &.${rootClassName$d} {
       &.selected {
         background: ${theme.palette.figma.overlay.table.highlights};
 
@@ -11545,12 +11793,12 @@ const StyledTableRowStyles = styled(TableRow)`
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$e = 'dot-th-checkbox';
+const rootClassName$c = 'dot-th-checkbox';
 const StyledTableHeaderCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$e} {
+    &.${rootClassName$c} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
@@ -11569,7 +11817,7 @@ const DotHeaderCheckboxCell = ({
   multiSelectState,
   onCheckAllChange
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
   const [checkboxState, setCheckboxState] = useState('unchecked');
   useEffect(() => {
     setCheckboxState(multiSelectState);
@@ -11600,12 +11848,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$d = 'dot-th';
+const rootClassName$b = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$d} {
+    &.${rootClassName$b} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -11664,7 +11912,7 @@ const DotHeaderCell = ({
   return jsx(StyledTableHeaderCell, {
     align: align,
     classes: {
-      root: rootClassName$d
+      root: rootClassName$b
     },
     sortDirection: sortable ? sortDirection : undefined,
     style: headerCellStyle,
@@ -11936,12 +12184,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$c = 'dot-td-checkbox';
+const rootClassName$a = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$c} {
+    &.${rootClassName$a} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -11960,7 +12208,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -12012,7 +12260,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$f, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$d, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -12129,7 +12377,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$h
+        root: rootClassName$f
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -12144,12 +12392,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$b = 'dot-table-selection-toolbar';
+const rootClassName$9 = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$b} {
+    &.${rootClassName$9} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -12207,7 +12455,7 @@ const DotTableSelectionToolbar = ({
   onClearAll,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$9, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -12301,7 +12549,7 @@ const DotTable = ({
     return onUpdateData ? data : stableSort(data, getComparator(order, orderBy));
   };
   const [pageData, setPageData] = useState(getSortedData().slice(0, rowsPerPage ? rowsPerPage : data.length));
-  const rootClasses = useStylesWithRootClass(rootClassName$i, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$g, className, loading ? 'loading' : '');
   const updateData = (newOrder, newOrderBy, newPage, newRowsPerPage) => {
     const newData = stableSort(data, getComparator(newOrder, newOrderBy));
     setPageData(newRowsPerPage ? newData.slice(newPage * newRowsPerPage, newPage * newRowsPerPage + newRowsPerPage) : newData);
@@ -12499,7 +12747,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$a = 'dot-table-actions';
+const rootClassName$8 = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -12581,7 +12829,7 @@ const DotTableActions = ({
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$a,
+      className: rootClassName$8,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -12605,12 +12853,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$9 = 'dot-tabs';
+const rootClassName$7 = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$9} {
+    &.${rootClassName$7} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -12655,7 +12903,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$9,
+  'data-pendoid': dataPendoId = rootClassName$7,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -12664,7 +12912,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$9, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$7, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -12718,14 +12966,14 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$8 = 'dot-file-upload';
-const containerClassName$2 = `${rootClassName$8}-container`;
-const dropZoneClassName = `${rootClassName$8}-drop-zone`;
+const rootClassName$6 = 'dot-file-upload';
+const containerClassName = `${rootClassName$6}-container`;
+const dropZoneClassName = `${rootClassName$6}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${containerClassName$2} {
+    &.${containerClassName} {
       .dot-max-files-message.dot-max-files-reached {
         color: ${theme.palette.figma.destructive.normal};
       }
@@ -12740,7 +12988,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$8}.${dropZoneClassName} {
+    &.${rootClassName$6}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -12771,12 +13019,12 @@ const StyledFileUpload = styled.div`
   `}
 `;
 
-const rootClassName$7 = 'dot-file-list-item';
+const rootClassName$5 = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$7} {
+    &.${rootClassName$5} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -12788,7 +13036,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$7}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$5}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -12798,7 +13046,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$7}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$5}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -12840,7 +13088,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$7, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$5, className, error ? 'file-error' : 'file-success');
   const defaultIcon = error ? 'error-solid' : 'check-solid';
   const [endIcon, setEndIcon] = useState(defaultIcon);
   const handleItemClick = clickedFile => _event => onClick === null || onClick === void 0 ? void 0 : onClick(clickedFile);
@@ -12873,7 +13121,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$7}-end-icon`,
+      className: `${rootClassName$5}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -12997,7 +13245,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$8,
+  'data-pendoid': dataPendoId = rootClassName$6,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -13010,7 +13258,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$8, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$6, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
   const maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
   const allowMultiple = maxFiles === undefined || maxFiles > 1;
   const setNewlyUploadedFiles = (acceptedFiles, fileRejections) => {
@@ -13060,7 +13308,7 @@ const DotFileUpload = ({
     uploadedFiles
   });
   return jsxs(StyledFileUploadContainer, {
-    className: containerClassName$2,
+    className: containerClassName,
     role: ariaRole,
     children: [jsxs(StyledFileUpload, Object.assign({}, getRootProps(), {
       "aria-label": ariaLabel,
@@ -13082,12 +13330,12 @@ const DotFileUpload = ({
   });
 };
 
-const rootClassName$6 = 'dot-divider';
+const rootClassName$4 = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$6} {
+    &.${rootClassName$4} {
       color: ${theme.palette.figma.border.darker};
 
       .MuiDivider-light {
@@ -13107,7 +13355,7 @@ const DotDivider = ({
   orientation,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$6, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$4, className);
   return jsx(StyledDivider, {
     absolute: absolute,
     "aria-label": ariaLabel,
@@ -13134,7 +13382,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))) {
@@ -13188,14 +13436,14 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const rootClassName$5 = 'dot-draggable-list';
+const rootClassName$3 = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
   ${({
   theme,
   draggableHandle
 }) => css`
-    &.${rootClassName$5} {
+    &.${rootClassName$3} {
       padding: ${theme.spacing(1, 0)};
       position: relative;
 
@@ -13230,7 +13478,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$5,
+  'data-pendoid': dataPendoId = rootClassName$3,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -13239,7 +13487,7 @@ const DotDraggableList = ({
   rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
   width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$5, className, draggableHandle ? 'with-draggable-handle' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$3, className, draggableHandle ? 'with-draggable-handle' : '');
   const listItemClasses = useStylesWithRootClass(listItemClassName, draggableHandle && !disableDrag ? 'with-handle-grab-cursor' : '', draggableHandle || disableDrag ? 'with-default-cursor' : '');
   const listWidth = isNumber(width) ? `${width}px` : width;
   const [orderedItems, setOrderedItems] = useState([]);
@@ -13286,12 +13534,12 @@ const DotDraggableList = ({
   });
 };
 
-const rootClassName$4 = 'dot-linear-progress';
+const rootClassName$2 = 'dot-linear-progress';
 const StyledLinearProgress = styled(LinearProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$4} {
+    &.${rootClassName$2} {
       &.MuiLinearProgress-colorError {
         color: ${theme.palette.figma.inProgress.error};
       }
@@ -13323,7 +13571,7 @@ const DotLinearProgress = ({
   valueBuffer,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$4, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$2, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
@@ -13362,61 +13610,6 @@ const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
   return currentContextEnum;
 };
 
-const rootClassName$3 = 'dot-date-picker';
-const popperClassName = 'dot-date-picker-popper';
-const containerClassName$1 = 'dot-date-picker-container';
-const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
-const StyledDatePickerContainer = styled.div`
-  ${() => css`
-    &.${rootClassName$3} .full-width {
-      width: 100%;
-    }
-  `}
-`;
-const StyledDatePicker = styled(DatePicker)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$3} {
-      ${pickerInputStyles(theme)};
-
-      .Mui-disabled.MuiInputBase-root,
-      &.read-only .MuiInputBase-root {
-        ${readOnlyStyles(theme)};
-      }
-
-      .dot-icon-btn .dot-i {
-        margin-top: -5px;
-      }
-
-      .MuiFormLabel-root {
-        color: ${theme.palette.figma.typography.black};
-      }
-    }
-  `}
-`;
-const StyledPickersDay = styled(PickersDay)`
-  ${({
-  theme
-}) => css`
-    &.${rectanglePickersDayClassName} {
-      border-radius: ${theme.spacing(0.5)};
-      &.MuiPickersDay-today:not(.Mui-selected) {
-        background: ${theme.palette.figma.neutral.normal};
-        border: 1px solid ${theme.palette.figma.primary.normal};
-        &:hover {
-          background: ${theme.palette.figma.primary.normal};
-        }
-      }
-
-      &:hover {
-        background: ${theme.palette.figma.primary.normal};
-        color: ${theme.palette.figma.typography.white};
-      }
-    }
-  `}
-`;
-
 const RectanglePickersDay = pickersDayProps => {
   return jsx(StyledPickersDay, Object.assign({}, pickersDayProps, {
     className: rectanglePickersDayClassName,
@@ -13429,7 +13622,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$3,
+  'data-pendoid': dataPendoId = rootClassName$w,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -13469,8 +13662,8 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$3, className, isInputReadOnly ? 'read-only' : '');
-  const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className, isInputReadOnly ? 'read-only' : '');
+  const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
       ref.current.focus();
@@ -13679,96 +13872,6 @@ const getTimePickerButtonType = selectedDaytime => selectedDaytime && selectedDa
 const checkIfOpenPropDefined = open => open !== null && open !== undefined;
 const getDaytimeButtonType = daytimeSelected => daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text';
 
-const rootClassName$2 = 'dot-time-picker';
-const containerClassName = 'dot-time-picker-container';
-const TIME_SELECTION_HEIGHT_SPACING = 34.5;
-const TIME_SELECTION_WIDTH_SPACING = 14.5;
-const TIME_UNIT_WIDTH_SPACING = 4.5;
-const TIME_UNIT_HEIGHT_SPACING = 4.5;
-const StyledTimePickerContainer = styled.div`
-  ${({
-  theme
-}) => css`
-    &.${containerClassName} {
-      .full-width {
-        width: 100%;
-      }
-
-      .dot-time-picker-popper {
-        z-index: ${levelTop};
-
-        .dot-time-picker-paper {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          .dot-time-picker-selection {
-            max-height: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING)};
-            width: ${theme.spacing(TIME_SELECTION_WIDTH_SPACING)};
-            display: flex;
-            margin: ${theme.spacing(1)};
-            gap: ${theme.spacing(0.5)};
-
-            .dot-time-picker-hours,
-            .dot-time-picker-minutes,
-            .dot-time-picker-daytime {
-              display: flex;
-              flex-direction: column;
-              overflow: auto;
-              gap: ${theme.spacing(0.5)};
-              padding-bottom: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING - TIME_UNIT_HEIGHT_SPACING)};
-
-              /* Hide scrollbar for Chrome, Safari and Opera */
-              ::-webkit-scrollbar {
-                display: none;
-              }
-
-              /* Hide scrollbar for IE, Edge and Firefox */
-              -ms-overflow-style: none; /* IE and Edge */
-              scrollbar-width: none; /* Firefox */
-            }
-
-            .dot-picker-button {
-              width: ${theme.spacing(TIME_UNIT_WIDTH_SPACING)};
-              height: ${theme.spacing(TIME_UNIT_HEIGHT_SPACING)};
-              margin: 0;
-            }
-          }
-
-          .dot-time-picker-action-buttons {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: ${theme.spacing(0.5)};
-          }
-        }
-      }
-    }
-  `}
-`;
-const StyledTimePicker = styled(TimePicker)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$2} {
-      ${pickerInputStyles(theme)};
-
-      .Mui-disabled.MuiInputBase-root,
-      &.read-only .MuiInputBase-root {
-        ${readOnlyStyles(theme)};
-      }
-
-      .dot-icon-btn .dot-i {
-        margin-top: -5px;
-      }
-
-      .MuiFormLabel-root {
-        color: ${theme.palette.figma.typography.black};
-      }
-    }
-  `}
-`;
-
 dayjs.extend(utc);
 const DEFAULT_PICKER_TIME_FORMAT = 'HH:mm';
 const DEFAULT_TIME_FORMAT = 'HH:mm';
@@ -13778,7 +13881,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$2,
+  'data-pendoid': dataPendoId = rootClassName$v,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -13810,8 +13913,8 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$2, className, isComponentReadOnly ? 'read-only' : '');
-  const containerClasses = useStylesWithRootClass(containerClassName, fullWidth ? 'full-width' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className, isComponentReadOnly ? 'read-only' : '');
+  const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
   const [time, setTime] = useState(null);
@@ -14414,4 +14517,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 };