@digital-ai/dot-components 5.2.0 → 5.4.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { useEffect, useState, useRef, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide, Stack } from '@mui/material';
+import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, Fab, LinearProgress, Slide, Stack } from '@mui/material';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import '@digital-ai/dot-icons';
@@ -42,12 +42,12 @@ const checkIfOverflowPresentInElementTree = element => {
   return false;
 };
 
-const rootClassName$1r = 'dot-typography';
+const rootClassName$1s = 'dot-typography';
 const StyledTypography = styled(Typography)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1r} {
+    &.${rootClassName$1s} {
       &.dot-typography-ai {
         background: ${theme.palette.figma.gradient.ai};
         background-clip: text;
@@ -73,7 +73,7 @@ const DotTypography = ({
   noWrap,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1r, ai ? 'dot-typography-ai' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1s, ai ? 'dot-typography-ai' : '', className);
   useEffect(() => {
     if (ariaRole === 'heading' && !ariaLevel) {
       console.warn('please include ariaLevel when using ariaRole="heading"');
@@ -466,7 +466,7 @@ const lightFigmaColors = {
     }
   },
   icon: {
-    black: n700,
+    gray: n400,
     disabled: n300,
     white: n0
   },
@@ -628,7 +628,7 @@ const darkFigmaColors = {
     }
   },
   icon: {
-    black: n100,
+    gray: n100,
     disabled: n400,
     white: n700
   },
@@ -871,7 +871,7 @@ const avatarColors = {
     backgroundColor: lightFigmaColors.typography.gray
   },
   default: {
-    color: lightFigmaColors.icon.black,
+    color: lightFigmaColors.icon.gray,
     backgroundColor: lightFigmaColors.background.level1.deep
   },
   green: {
@@ -926,7 +926,7 @@ const darkTheme = createTheme({
         backgroundColor: darkFigmaColors.typography.gray
       },
       default: {
-        color: darkFigmaColors.icon.black,
+        color: darkFigmaColors.icon.gray,
         backgroundColor: darkFigmaColors.background.level1.deep
       },
       green: {
@@ -1409,7 +1409,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1q = 'dot-text-field';
+const rootClassName$1r = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
@@ -1485,7 +1485,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1q} {
+    &.${rootClassName$1r} {
       .MuiInputBase-root {
         margin-bottom: 0;
 
@@ -1493,22 +1493,27 @@ const StyledTextField = styled(TextField)`
           &.MuiInputBase-adornedStart {
             padding-left: ${theme.spacing(1.5)};
           }
+
           &.MuiInputBase-adornedEnd {
             padding-right: ${theme.spacing(1)};
           }
         }
       }
+
       .MuiInputBase-input {
         box-sizing: content-box;
       }
+
       .MuiOutlinedInput-input {
         padding: 18px ${InputProps.endAdornment ? '0px' : '12px'} 18px
           ${InputProps.startAdornment ? '0px' : '12px'};
+
         &::placeholder {
           opacity: 1;
           color: ${theme.palette.figma.typography.gray};
         }
       }
+
       .MuiInputBase-inputSizeSmall {
         padding-top: 10.5px;
         padding-bottom: 10.5px;
@@ -1569,9 +1574,10 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1q} {
+    &.${rootSelectClassName}, &.${rootClassName$1r} {
       .${adornmentIconClassName} {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.icon.gray};
+
         p {
           font-size: ${theme.typography.body2.fontSize}px;
           margin: 0;
@@ -1614,8 +1620,12 @@ const StyledTextField = styled(TextField)`
         right: ${InputProps.endAdornment ? `44px` : `12px`};
       }
 
+      &.${inputAiClassName$1} .${fieldsetClassName} {
+        border-color: ${theme.palette.figma.aiPink.elevated};
+      }
+
       &.${successClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.success.normal};
         }
 
@@ -1625,7 +1635,7 @@ const StyledTextField = styled(TextField)`
       }
 
       &.${errorClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.destructive.normal};
         }
 
@@ -1635,7 +1645,7 @@ const StyledTextField = styled(TextField)`
       }
 
       &.${warningClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.warning.normal};
         }
 
@@ -1644,21 +1654,6 @@ const StyledTextField = styled(TextField)`
         }
       }
 
-      &.${inputAiClassName$1} {
-        color: ${theme.palette.figma.typography.white};
-        background: ${theme.palette.figma.gradient.normal};
-        border: 1px solid transparent;
-        border-radius: 4px;
-
-        .MuiOutlinedInput-root .${fieldsetClassName} {
-          border: none;
-        }
-      }
-
-      .ai-text-clear-icon {
-        right: 36px;
-        position: relative;
-      }
       .MuiOutlinedInput-adornedStart {
         padding-left: 12px;
 
@@ -1674,14 +1669,14 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1p = 'dot-icon';
+const rootClassName$1q = 'dot-icon';
 const aiIconClassName = 'dot-icon-ai';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1p} {
-      color: ${theme.palette.figma.icon.black};
+    &.${rootClassName$1q} {
+      color: ${theme.palette.figma.icon.gray};
       font-size: 20px;
 
       i {
@@ -1730,7 +1725,7 @@ const DotIcon = ({
   tooltip,
   ai = false
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1p, className, ai ? aiIconClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1q, className, ai ? aiIconClassName : '');
   return jsx(DotTooltip, {
     disableInteractive: disableInteractive,
     childrenDisplayStyle: "inline-block",
@@ -1754,7 +1749,7 @@ const DotIcon = ({
   });
 };
 
-const rootClassName$1o = 'dot-accordion';
+const rootClassName$1p = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -1765,7 +1760,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1o} .${summaryClassName} {
+    &.${rootClassName$1p} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -1810,7 +1805,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1o,
+  'data-pendoid': dataPendoId = rootClassName$1p,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -1821,7 +1816,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1o, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1p, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -1872,15 +1867,15 @@ const DotAccordion = ({
   });
 };
 
-const rootClassName$1n = 'dot-action-toolbar';
+const rootClassName$1o = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1n} {
+    &.${rootClassName$1o} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1q} .MuiInputBase-root {
+      .${rootClassName$1r} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -1894,7 +1889,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1o, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1904,12 +1899,12 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$1m = 'dot-alert-banner';
+const rootClassName$1n = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1m} {
+    &.${rootClassName$1n} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1944,7 +1939,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1m,
+  'data-pendoid': dataPendoId = rootClassName$1n,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1952,7 +1947,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1m, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1n, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -1995,12 +1990,12 @@ const DotAppLogo = ({
   });
 };
 
-const rootClassName$1l = 'dot-annotation';
+const rootClassName$1m = 'dot-annotation';
 const StyledAnnotation = styled.kbd`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1l} {
+    &.${rootClassName$1m} {
       font-family: inherit;
       background-color: ${theme.palette.figma.background.level0.bckgGray};
       color: ${theme.palette.figma.typography.disabled};
@@ -2026,13 +2021,13 @@ const StyledAnnotation = styled.kbd`
 
 const DotAnnotation = ({
   ariaLabel,
-  'data-pendoid': dataPendoId = rootClassName$1l,
+  'data-pendoid': dataPendoId = rootClassName$1m,
   'data-testid': dataTestId,
   className,
   content,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1l, className, type === 'secondary' ? 'secondary' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1m, className, type === 'secondary' ? 'secondary' : '');
   return jsx(StyledAnnotation, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2669,7 +2664,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1k = 'dot-avatar';
+const rootClassName$1l = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2679,7 +2674,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1l} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2689,7 +2684,7 @@ const StyledAvatar = styled(Avatar)`
       border: 0px;
       &:focus-visible {
         box-shadow: 0px 0px 0px 3px ${theme.palette.figma.icon.white},
-          0px 0px 0px 5px ${theme.palette.figma.icon.black};
+          0px 0px 0px 5px ${theme.palette.figma.icon.gray};
         outline: 0;
       }
 
@@ -2797,7 +2792,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2839,12 +2834,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1j = 'dot-button';
+const rootClassName$1k = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1k} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2881,7 +2876,7 @@ const StyledButton = styled(Button)`
         }
 
         .dot-icon {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
       }
 
@@ -2997,7 +2992,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1j,
+  'data-pendoid': dataPendoId = rootClassName$1k,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -3015,7 +3010,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
   let color;
   let variant;
   switch (type) {
@@ -3046,7 +3041,7 @@ const DotButton = forwardRef(({
   }
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
-    "data-testid": `${dataTestId || rootClassName$1j}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1k}-tooltip`,
     disableInteractive: disableInteractive,
     placement: tooltipPlacement,
     title: tooltip,
@@ -3058,7 +3053,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1j,
+      "data-testid": dataTestId || rootClassName$1k,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -3078,10 +3073,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1i = 'dot-link';
+const rootClassName$1j = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1j} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -3097,7 +3092,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1i,
+  'data-pendoid': dataPendoId = rootClassName$1j,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -3110,7 +3105,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -3161,7 +3156,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1h = 'dot-list';
+const rootClassName$1i = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -3169,11 +3164,11 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1h} {
+      &.${rootClassName$1i} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
 
         &.${nestedListClassName} .${listItemRootClass} {
@@ -3263,12 +3258,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1g = 'dot-progress';
+const rootClassName$1h = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1h} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -3319,7 +3314,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3385,13 +3380,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$1f = 'dot-popper';
+const rootClassName$1g = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3450,7 +3445,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$1f}, &.${rootClassName$1f} > .dot-popper-paper {
+    &.${rootClassName$1g}, &.${rootClassName$1g} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3480,12 +3475,12 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$1e = 'dot-menu';
+const rootClassName$1f = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3495,7 +3490,7 @@ const StyledPopper = styled(Popper)`
 }) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}
       }
     }
-    &.${rootClassName$1e}, &.${rootClassName$1f} {
+    &.${rootClassName$1f}, &.${rootClassName$1g} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3575,14 +3570,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$1d = 'dot-ul';
+const rootClassName$1e = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3684,7 +3679,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3796,7 +3791,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3884,12 +3879,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$1c = 'dot-drawer';
+const rootClassName$1d = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1c} .MuiBackdrop-root {
+    &.${rootClassName$1d} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3908,12 +3903,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$1b = 'dot-drawer-header';
+const rootClassName$1c = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1c} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3924,24 +3919,24 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$1a = 'dot-icon-btn';
+const rootClassName$1b = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1b} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
       ${color === 'default' ? css`
-              color: ${theme.palette.figma.icon.black};
+              color: ${theme.palette.figma.icon.gray};
             ` : ''}
 
       &.MuiIconButton-colorAi{
         color: ${theme.palette.figma.icon.white};
         background: ${theme.palette.figma.gradient.normal};
-             
+
         &:hover {
           background: ${theme.palette.figma.gradient.elevated};
         }
@@ -3993,7 +3988,7 @@ const StyledIconButton = styled(IconButton)`
         &:active {
           ${color !== 'ai' ? css`
                   background: ${theme.palette.figma.toggleTabs.bckg};
-                ` : ''}          
+                ` : ''}
         }
       }
 
@@ -4016,7 +4011,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$1a,
+  'data-pendoid': dataPendoId = rootClassName$1b,
   'data-testid': dataTestId,
   disableInteractive,
   disableRipple = false,
@@ -4030,7 +4025,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     "data-testid": "icon-button-tooltip",
@@ -4067,7 +4062,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -4084,10 +4079,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$19 = 'dot-drawer-body';
+const rootClassName$1a = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -4108,7 +4103,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4123,12 +4118,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$18 = 'dot-drawer-footer';
+const rootClassName$19 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -4141,7 +4136,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4157,7 +4152,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$1c,
+  'data-pendoid': dataPendoId = rootClassName$1d,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -4180,7 +4175,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, 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';
@@ -4317,7 +4312,7 @@ const styledListItemElement = elementType => {
         }
 
         .dot-icon i:before {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
 
         .left-border-with-arrow {
@@ -4655,7 +4650,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef(undefined);
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4755,12 +4750,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$17 = 'dot-copy-button';
+const rootClassName$18 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} .copied-to-clipboard {
+    &.${rootClassName$18} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4786,7 +4781,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$17,
+  'data-pendoid': dataPendoId = rootClassName$18,
   'data-testid': dataTestId = 'dot-copy-button',
   disableInteractive,
   disabled = false,
@@ -4835,7 +4830,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$17,
+    className: rootClassName$18,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4942,7 +4937,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1q,
+  'data-pendoid': dataPendoId = rootClassName$1r,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4986,12 +4981,12 @@ const DotInputText = ({
   const hasError = error && errorClassName;
   const hasWarning = !error && warning && warningClassName;
   const hasSuccess = !error && !warning && success && successClassName;
-  const isAiEnabled = ai && inputAiClassName$1;
+  const isAiEnabled = !error && !warning && !success && ai && inputAiClassName$1;
   const hasEndAdornmentIcon = endIcon || error || hasWarning || hasSuccess;
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1q, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1r, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -5134,10 +5129,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$16 = 'dot-search-input';
+const rootClassName$17 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
     }
   `}
 `;
@@ -5154,7 +5149,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -5410,12 +5405,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$15 = 'dot-app-switcher';
+const rootClassName$16 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5525,7 +5520,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5903,12 +5898,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$14 = 'dot-sidebar';
+const rootClassName$15 = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5965,7 +5960,7 @@ const StyledSidebar = styled.aside`
 
           &:focus-visible {
             box-shadow: 0 0 0 2px ${theme.palette.figma.icon.white},
-              0 0 0 4px ${theme.palette.figma.icon.black};
+              0 0 0 4px ${theme.palette.figma.icon.gray};
           }
         }
 
@@ -6043,7 +6038,7 @@ const StyledSidebar = styled.aside`
               margin: 0;
 
               i:before {
-                color: ${theme.palette.figma.typography.gray};
+                color: ${theme.palette.figma.icon.gray};
               }
             }
           }
@@ -6202,10 +6197,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$13 = 'dot-truncate-with-tooltip';
+const rootClassName$14 = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -6236,7 +6231,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -6350,7 +6345,7 @@ const DotSidebar = ({
     keys: collapseKeys
   }, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$14, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6412,6 +6407,7 @@ const DotSidebar = ({
         placement: "right",
         children: jsx(DotIconButton, {
           ariaLabel: "collapse sidebar navigation",
+          color: "default",
           "data-testid": "toggle-nav",
           iconId: isOpen ? 'push-left' : 'push-right',
           iconSize: "small",
@@ -6425,12 +6421,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$12 = 'dot-badge';
+const rootClassName$13 = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -6465,7 +6461,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -6487,7 +6483,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$11 = 'dot-app-toolbar';
+const rootClassName$12 = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6527,7 +6523,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6622,7 +6618,7 @@ const StyledAppToolbar = styled.header`
         height: 40px;
         button.dot-avatar:focus-visible {
           box-shadow: 0px 0px 0px 3px ${theme.palette.figma.icon.white},
-            0px 0px 0px 5px ${theme.palette.figma.icon.black};
+            0px 0px 0px 5px ${theme.palette.figma.icon.gray};
         }
       }
     }
@@ -6656,7 +6652,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6808,18 +6804,18 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$10 = 'dot-chip';
+const rootClassName$11 = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
 
       .dot-icon i {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.icon.gray};
         height: auto;
       }
 
@@ -6891,7 +6887,7 @@ const StyledChip = styled(Chip)`
         }
 
         .MuiChip-deleteIcon:hover {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
       }
 
@@ -6919,7 +6915,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$10,
+  'data-pendoid': dataPendoId = rootClassName$11,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6933,7 +6929,7 @@ const DotChip = ({
   tooltipProps
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className, errorClass);
   const isTruncated = charactersLimit > 0 && children.length > charactersLimit;
   const getChipLabelWithTooltip = label => jsx(DotTooltip, Object.assign({}, tooltipProps, {
     hoverVisibility: "always",
@@ -6969,7 +6965,7 @@ const DotChip = ({
   });
 };
 
-const rootClassName$$ = 'dot-autocomplete';
+const rootClassName$10 = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const inputAiClassName = 'dot-input-ai';
@@ -6977,7 +6973,7 @@ const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -7013,15 +7009,8 @@ const StyledAutocomplete = styled(Autocomplete)`
     }
 
     &.${inputAiClassName} {
-      color: ${theme.palette.figma.typography.white};
-      background: ${theme.palette.figma.gradient.ai};
-      border: 2px solid transparent;
-      border-radius: 4px;
-      .MuiOutlinedInput-root {
-        padding: 8px;
-      }
       .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
-        border: none;
+        border-color: ${theme.palette.figma.aiPink.elevated};
       }
     }
   `}
@@ -7083,8 +7072,8 @@ const isEmptyValue = value => {
     return !value;
   }
 };
-const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$$, size === 'medium' && inputMediumClassName, className);
-const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1q, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
+const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$10, size === 'medium' && inputMediumClassName, className);
+const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1r, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
 const getInputRootClassNames = isDense => useStylesWithRootClass(inputRootClassName, !isDense && inputMediumClassName);
 const getDefaultAutoCompleteValue = (hasMultiple, defaultValue) => hasMultiple && isString$2(defaultValue) ? [defaultValue] : defaultValue;
 const getAutoCompleteGroupBy = group => group ? option => option.group : undefined;
@@ -7106,7 +7095,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$$,
+  'data-pendoid': dataPendoId = rootClassName$10,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -7172,10 +7161,11 @@ const DotAutoComplete = ({
   const isActionItemDefined = onActionItemClick !== undefined;
   const popperOpen = !readOnly && (open || isOpened);
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), ai ? inputAiClassName : '');
+  const isAiEnabled = !error && !warning && ai;
+  const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), isAiEnabled ? inputAiClassName : '');
   const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
   const inputRootClasses = getInputRootClassNames(dense);
-  const popperClasses = useStylesWithRootClass(rootClassName$1f, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1g, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -7298,7 +7288,7 @@ const DotAutoComplete = ({
   // Create handler only if 'onInputChange' or 'actionItem' prop is defined
   // Custom input change handler for AI mode
   const handleInputChange = (event, currentInputValue, reason) => {
-    if (isActionItemDefined || ai) {
+    if (isActionItemDefined || isAiEnabled) {
       setInputText(currentInputValue); // fallback for action item
     }
     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
@@ -7389,7 +7379,7 @@ const DotAutoComplete = ({
     return renderOption ? renderOption(props, option, state) : renderTrimmedLongOptions(props, option);
   };
   const getEndAdornment = params => {
-    if (ai) {
+    if (isAiEnabled) {
       return renderAISendAdornment;
     }
     if (!readOnly) {
@@ -7410,6 +7400,7 @@ const DotAutoComplete = ({
     defaultValue: getDefaultAutoCompleteValue(multiple, defaultValue),
     disableCloseOnSelect: disableCloseOnSelect,
     disabled: disabled,
+    disableClearable: isAiEnabled,
     filterOptions: filterOptions,
     filterSelectedOptions: filterSelectedOptions,
     freeSolo: freesolo,
@@ -7482,7 +7473,7 @@ const DotAutoComplete = ({
               id: inputId,
               className: useStylesWithRootClass(inputProps.className, 'dot-input'),
               readOnly,
-              value: ai ? inputText : inputProps.value
+              value: isAiEnabled ? inputText : inputProps.value
             }),
             InputLabelProps: {
               htmlFor: inputId
@@ -7500,7 +7491,7 @@ const DotAutoComplete = ({
                 event.preventDefault();
                 (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
               }
-              if (event.key === 'Enter' && ai) {
+              if (event.key === 'Enter' && isAiEnabled) {
                 event.stopPropagation();
                 event.preventDefault();
                 handleAiAction(inputText);
@@ -7524,10 +7515,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$_ = 'dot-avatar-group';
+const rootClassName$$ = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$_} {
+      &.${rootClassName$$} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -7546,7 +7537,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7561,14 +7552,14 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$Z = 'dot-avatar-with-details';
+const rootClassName$_ = 'dot-avatar-with-details';
 const StyledAvatarWithDetails = styled.div`
   ${({
   theme,
   $maxSubtitleLines,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       gap: ${theme.spacing(2)};
       display: flex;
       align-items: center;
@@ -7604,12 +7595,12 @@ const DotAvatarWithDetails = ({
   ariaLabel,
   avatar,
   className,
-  'data-pendoid': dataPendoId = rootClassName$Z,
+  'data-pendoid': dataPendoId = rootClassName$_,
   'data-testid': dataTestId,
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   const titleClasses = useStylesWithRootClass('dot-avatar-with-details-title', title.maxLines ? 'max-lines-clamp' : '');
   const subtitleClasses = useStylesWithRootClass('dot-avatar-with-details-subtitle', (subtitle === null || subtitle === void 0 ? void 0 : subtitle.maxLines) ? 'max-lines-clamp' : '');
   return jsxs(StyledAvatarWithDetails, {
@@ -7644,13 +7635,13 @@ const DotAvatarWithDetails = ({
   });
 };
 
-const rootClassName$Y = 'dot-breadcrumbs';
+const rootClassName$Z = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -7670,7 +7661,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7678,7 +7669,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
       }
       .MuiBreadcrumbs-li,
       .separator {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.typography.black};
         margin: 0;
         white-space: nowrap;
       }
@@ -7998,7 +7989,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$Y,
+        root: rootClassName$Z,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -8029,14 +8020,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$X = 'dot-button-toggle';
+const rootClassName$Y = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -8048,7 +8039,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
       }
 
       .dot-icon {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.icon.gray};
         display: flex;
 
         + p {
@@ -8159,7 +8150,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -8169,7 +8160,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -8254,12 +8245,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$W = 'dot-card';
+const rootClassName$X = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -8273,7 +8264,7 @@ const DotCard = ({
   onMouseEnter,
   onMouseLeave
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -8304,12 +8295,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$V = 'dot-card-footer';
+const rootClassName$W = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -8321,7 +8312,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -8330,14 +8321,14 @@ const DotCardFooter = ({
   });
 };
 
-const rootClassName$U = 'dot-card-header';
+const rootClassName$V = 'dot-card-header';
 const StyledCardHeader = styled(CardHeader)`
   ${({
   theme,
   $maxSubheaderLines,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       .MuiCardHeader-content {
         overflow-x: hidden;
 
@@ -8375,7 +8366,7 @@ const DotCardHeader = ({
   titleMaxLines = 1,
   titleSize = 'large'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   const nonSmallTitleSize = titleSize === 'medium' ? 'h3' : 'h2';
   const titleVariant = titleSize === 'small' ? 'h4' : nonSmallTitleSize;
   const subheaderVariant = subheaderSize === 'small' ? 'body2' : 'body1';
@@ -8412,9 +8403,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$T = 'dot-form-control-label';
+const rootClassName$U = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$T} {
+  &.${rootClassName$U} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -8437,12 +8428,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$S = 'dot-checkbox';
+const rootClassName$T = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -8461,7 +8452,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$T,
+  'data-pendoid': dataPendoId = rootClassName$U,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -8476,14 +8467,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$S
+      root: rootClassName$T
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8512,13 +8503,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$R = 'dot-form-group';
+const rootClassName$S = '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$R} {
+  &.${rootClassName$S} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -8549,7 +8540,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$Q = 'dot-checkbox-group';
+const rootClassName$R = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -8558,7 +8549,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`
     &.${wrapperClassName$1} {
-      .${rootClassName$Q} {
+      .${rootClassName$R} {
         width: 100%;
       }
 
@@ -8585,7 +8576,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$T} {
+        .${rootClassName$U} {
           margin: 0;
         }
       }
@@ -8593,13 +8584,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$P = 'dot-form-group';
+const rootClassName$Q = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$P} > * {
+    &.${rootClassName$Q} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -8612,7 +8603,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -8651,7 +8642,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$R, rootClassName$Q, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, rootClassName$R, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -8736,12 +8727,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$O = 'chip-list';
+const rootClassName$P = 'chip-list';
 const StyledChipList = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$O} {
+    &.${rootClassName$P} {
       display: flex;
       gap: ${theme.spacing(1)};
     }
@@ -8816,19 +8807,19 @@ function DotChipList({
     setChips(itemElements);
   }, [items, maxChars]);
   return jsx(StyledChipList, {
-    className: rootClassName$O,
+    className: rootClassName$P,
     "data-testid": dataTestId,
     style: style,
     children: chips
   });
 }
 
-const rootClassName$N = 'dot-dialog';
+const rootClassName$O = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$O} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -8874,7 +8865,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$N,
+  'data-pendoid': dataPendoId = rootClassName$O,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -8888,7 +8879,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   const hasSecondaryAction = !!secondaryButtonProps;
@@ -9025,7 +9016,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$M = 'dot-grid';
+const rootClassName$N = '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`};
@@ -9085,7 +9076,7 @@ const Grid = ({
   children,
   isLoading
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
   return jsxs("div", {
     className: rootClasses,
     children: [children, isLoading && jsx(DotProgress, {
@@ -9109,7 +9100,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$N} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -9380,12 +9371,12 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$L = 'dot-pill';
+const rootClassName$M = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$M} {
       background-color: ${({
   backgroundcolor,
   variant
@@ -9509,7 +9500,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -11098,18 +11089,18 @@ function addAutoHideDuration(severity) {
   return severity === 'error' ? null : 10000;
 }
 
-const rootClassName$K = 'dot-snackbar';
+const rootClassName$L = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$L} {
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1m} {
+      .${rootClassName$1n} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -11162,7 +11153,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -11232,10 +11223,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$J = 'dot-snackbar-container';
+const rootClassName$K = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$K} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -11267,10 +11258,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$J,
+    className: rootClassName$K,
     children: jsx("div", {
-      className: rootClassName$J,
-      "data-testid": rootClassName$J,
+      className: rootClassName$K,
+      "data-testid": rootClassName$K,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoCloseOnAction: autoCloseOnAction,
@@ -11344,12 +11335,12 @@ const useEnqueueErrorMessage = error => {
   }, [error]);
 };
 
-const rootClassName$I = 'dot-dashboard-details';
+const rootClassName$J = 'dot-dashboard-details';
 const StyledDashboardDetails = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -11475,7 +11466,7 @@ const DotDashboardDetailsView = ({
   modifiedAuthorUser
 }) => {
   var _a, _b;
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
   const closeHandler = useCallback(event => {
     onClose && onClose(event);
   }, [onClose]);
@@ -12137,12 +12128,12 @@ function DotDashboardDialog({
   });
 }
 
-const rootClassName$H = 'dot-impact-dialog';
+const rootClassName$I = 'dot-impact-dialog';
 const StyledImpactDialog = styled(DotDialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       .high-impact-default-content {
         margin-top: ${theme.spacing(2)};
         margin-bottom: ${theme.spacing(3)};
@@ -12248,7 +12239,7 @@ const DotImpactDialog = ({
     }
     return '';
   }, [action, capitalize, impact, record]);
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
   return jsx(StyledImpactDialog, {
     "data-testid": dataTestId,
     className: rootClasses,
@@ -13620,7 +13611,7 @@ function DotDashboardHeader({
   });
 }
 
-const rootClassName$G = 'dot-empty-state';
+const rootClassName$H = 'dot-empty-state';
 const emptyStateImageSizing = {
   xsmall: 9,
   dense: 15,
@@ -13691,9 +13682,9 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
-const rootClassName$F = 'dot-illustration';
+const rootClassName$G = 'dot-illustration';
 const StyledIllustration = styled.span`
-  &.${rootClassName$F} {
+  &.${rootClassName$G} {
     display: inline-block;
   }
 `;
@@ -13710,17 +13701,17 @@ const DotIllustration = ({
   tooltip,
   tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     title: tooltip,
     placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$F}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$G}-tooltip`,
     children: jsx(StyledIllustration, {
       "aria-hidden": "false",
       "aria-label": ariaLabel || title || 'Illustration',
       className: rootClasses,
-      "data-testid": dataTestId || rootClassName$F,
+      "data-testid": dataTestId || rootClassName$G,
       role: ariaRole,
       children: jsx("img", {
         alt: alt || 'Illustration',
@@ -13746,7 +13737,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: `${rootClasses} ${size}`,
@@ -13827,20 +13818,20 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$T} {
+      .${rootClassName$U} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$E = 'dot-date-picker';
+const rootClassName$F = '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$E} .full-width {
+    &.${rootClassName$F} .full-width {
       width: 100%;
     }
   `}
@@ -13849,7 +13840,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$E} {
+    &.${rootClassName$F} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13891,7 +13882,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$D = 'dot-time-picker';
+const rootClassName$E = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const timePickerPopperClassName = 'dot-time-picker-popper';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
@@ -13911,7 +13902,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$D} {
+    &.${rootClassName$E} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13988,36 +13979,36 @@ const StyledTimePickerPopper = styled(Popper)`
   `}
 `;
 
-const rootClassName$C = 'dot-form';
+const rootClassName$D = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$C} {
+    &.${rootClassName$D} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$R},
-        .${rootClassName$T},
-        .${rootClassName$1q},
+      .${rootClassName$S},
+        .${rootClassName$U},
+        .${rootClassName$1r},
         .${rootSelectClassName},
-        .${rootClassName$E},
-        .${rootClassName$D} {
+        .${rootClassName$F},
+        .${rootClassName$E} {
         margin: ${theme.spacing(1, 0)};
       }
 
       .${wrapperClassName$2} {
-        + .${rootClassName$1q},
+        + .${rootClassName$1r},
         .${wrapperClassName$2}
         + .${rootSelectClassName},
         .${wrapperClassName$2}
-        + .${rootClassName$E},
+        + .${rootClassName$F},
         .${wrapperClassName$2}
-        + .${rootClassName$D} {
+        + .${rootClassName$E} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$Q}, .${groupClassName} {
-        .${rootClassName$T} {
+      .${rootClassName$R}, .${groupClassName} {
+        .${rootClassName$U} {
           margin: 0;
         }
       }
@@ -14032,7 +14023,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -14045,10 +14036,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$B = 'dot-dynamic-form';
+const rootClassName$C = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$B} {
+    &.${rootClassName$C} {
     }
   `}
 `;
@@ -14228,12 +14219,12 @@ const checkIfFormDataValid = formState => {
   return true;
 };
 
-const rootClassName$A = 'dot-progress-button';
+const rootClassName$B = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$A} {
+    &.${rootClassName$B} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -14258,7 +14249,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$A,
+  'data-pendoid': dataPendoId = rootClassName$B,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -14272,7 +14263,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -14302,12 +14293,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$z = 'dot-radio';
+const rootClassName$A = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$A} {
       padding: 8px;
 
       svg {
@@ -14325,7 +14316,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$T,
+  'data-pendoid': dataPendoId = rootClassName$U,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -14338,7 +14329,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -14346,7 +14337,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$z
+      root: rootClassName$A
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -14392,7 +14383,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -14457,7 +14448,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$y = 'dot-switch';
+const rootClassName$z = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -14484,7 +14475,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$y,
+  'data-pendoid': dataPendoId = rootClassName$z,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -14494,7 +14485,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -14524,7 +14515,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$T,
+    className: rootClassName$U,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -14845,7 +14836,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, 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]);
@@ -15091,7 +15082,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$x = 'dot-inline-edit';
+const rootClassName$y = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -15103,7 +15094,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$x} {
+    &.${rootClassName$y} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -15317,7 +15308,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$x,
+  'data-pendoid': dataPendoId = rootClassName$y,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -15353,7 +15344,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$y, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -15541,13 +15532,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$w = 'dot-navigation-rail';
+const rootClassName$x = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$w} {
+    &.${rootClassName$x} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -15569,7 +15560,7 @@ const StyledNavigationRail = styled.div`
         border-right: 3px solid transparent;
 
         .dot-icon {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
 
         &.selected,
@@ -15606,7 +15597,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -15657,12 +15648,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$v = 'dot-skeleton';
+const rootClassName$w = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$w} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -15677,7 +15668,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -15692,19 +15683,19 @@ const DotSkeleton = ({
   });
 };
 
-const rootClassName$u = 'dot-split-button-group';
+const rootClassName$v = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$v} {
       &.outlined,
       &.text {
         .expand-button {
           border-left: none;
 
           .dot-icon {
-            color: ${theme.palette.figma.icon.black};
+            color: ${theme.palette.figma.icon.gray};
           }
         }
       }
@@ -15763,7 +15754,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$u,
+  'data-pendoid': dataPendoId = rootClassName$v,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -15779,7 +15770,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -15847,7 +15838,7 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$t = 'dot-stepper';
+const rootClassName$u = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
@@ -15855,7 +15846,7 @@ const StyledStepper = styled.div`
   theme,
   offset
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$u} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -15924,7 +15915,7 @@ const StyledStepper = styled.div`
 
             &.active:not(&.completed):not(&.in-progress) {
               .dot-avatar i:before {
-                color: ${theme.palette.figma.icon.black};
+                color: ${theme.palette.figma.icon.gray};
               }
             }
 
@@ -16170,7 +16161,7 @@ const DotStepper = ({
       return ['left', 'right'].includes(stepsPosition) ? stepsPosition : 'left';
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$t, getStepsPosition(), className);
+  const rootClasses = useStylesWithRootClass(rootClassName$u, getStepsPosition(), className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
@@ -16388,12 +16379,12 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$s = 'dot-table-pagination-custom-actions';
+const rootClassName$t = 'dot-table-pagination-custom-actions';
 const StyledTablePaginationCustomActions = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$t} {
       margin-left: ${theme.spacing(2.5)};
       display: flex;
       align-items: center;
@@ -16517,7 +16508,7 @@ const DotTablePaginationCustomActions = props => {
     });
   };
   return jsxs(StyledTablePaginationCustomActions, {
-    className: rootClassName$s,
+    className: rootClassName$t,
     children: [jsx(DotIconButton, {
       ariaLabel: "previous page",
       className: "page-control-button",
@@ -16564,7 +16555,7 @@ const DotTablePaginationCustomActions = props => {
   });
 };
 
-const rootClassName$r = 'dot-table-pagination';
+const rootClassName$s = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -16572,7 +16563,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$r} {
+    .${rootClassName$s} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -16615,7 +16606,7 @@ const DotTablePagination = ({
   showJumpToPageActionButton = false,
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$r, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -16623,7 +16614,7 @@ const DotTablePagination = ({
     onRowsPerPageChange && onRowsPerPageChange(evt);
   };
   return /* Container is used to pass 'typography' prop to a styled component */jsx(StyledTablePagination, {
-    className: rootClassName$r,
+    className: rootClassName$s,
     typography: typography,
     children: jsx(TablePagination, {
       ActionsComponent: showJumpToPageActionButton ? DotTablePaginationCustomActions : undefined,
@@ -16649,14 +16640,14 @@ const DotTablePagination = ({
   });
 };
 
-const rootClassName$q = 'dot-table';
+const rootClassName$r = 'dot-table';
 const MULTISELECT_COLUMN_WIDTH = 52;
 const COLLAPSIBLE_COLUMN_WIDTH = 42;
 const StyledPaper$1 = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$r} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -16799,10 +16790,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$p = 'dot-tbody';
+const rootClassName$q = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$p} {
+    &.${rootClassName$q} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -16997,12 +16988,12 @@ function stableSort(array, comparator) {
   return stabilizedThis.map(el => el[0]);
 }
 
-const rootClassName$o = 'dot-td';
+const rootClassName$p = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$p} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -17097,7 +17088,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$p, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -17165,13 +17156,13 @@ const EmptyDotRow = ({
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$n = 'dot-th-checkbox';
+const rootClassName$o = 'dot-th-checkbox';
 const styledTableHeaderCheckboxElement = (isCell = true) => {
   return styled(isCell ? TableCell : 'div')`
     ${({
     theme
   }) => css`
-      &.${rootClassName$n} {
+      &.${rootClassName$o} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
         padding: ${theme.spacing(0, 1)};
         width: ${theme.spacing(5)};
@@ -17199,7 +17190,7 @@ const DotHeaderCheckboxCell = ({
   isFromTableSelectionToolbar,
   multiSelectHeader
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
   const [multiSelectState, setMultiSelectState] = useState('unchecked');
   const {
     onCheckAllChange,
@@ -17249,12 +17240,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$m = 'dot-th';
+const rootClassName$n = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$m} {
+    &.${rootClassName$n} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -17294,7 +17285,7 @@ const DotHeaderCell = ({
   value,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$m, pinned ? 'dot-pinned-cell' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$n, pinned ? 'dot-pinned-cell' : '', className);
   const headerTitle = isString$2(value) ? value : null;
   const formattedValue = getFormattedTableCellValue(value, typography);
   const getCellValue = () => {
@@ -17385,12 +17376,12 @@ const DotHeaderRow = ({
   });
 };
 
-const rootClassName$l = 'dot-tr';
+const rootClassName$m = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$m} {
       &.selected {
         &,
         .dot-td.dot-pinned-cell,
@@ -17616,12 +17607,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$k = 'dot-td-checkbox';
+const rootClassName$l = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$l} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -17640,7 +17631,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$k, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -17693,7 +17684,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$l, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$m, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -17814,7 +17805,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$p
+        root: rootClassName$q
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -17829,12 +17820,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$j = 'dot-table-selection-toolbar';
+const rootClassName$k = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$j} {
+    &.${rootClassName$k} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -17889,7 +17880,7 @@ const DotTableSelectionToolbar = ({
   multiSelectHeader,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$k, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -17975,7 +17966,7 @@ const DotTable = ({
       setPage(page);
     }
   }, [page]);
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$r, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
   const updateData = (newOrder, newOrderBy, newPage, newRowsPerPage) => {
     const newData = stableSort(data, getComparator(newOrder, newOrderBy));
     setPageData(newRowsPerPage ? newData.slice(newPage * newRowsPerPage, newPage * newRowsPerPage + newRowsPerPage) : newData);
@@ -18178,7 +18169,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$i = 'dot-table-actions';
+const rootClassName$j = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -18268,7 +18259,7 @@ const DotTableActions = ({
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$i,
+      className: rootClassName$j,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -18292,12 +18283,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$h = 'dot-tabs';
+const rootClassName$i = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$h} {
+    &.${rootClassName$i} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -18350,7 +18341,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$h,
+  'data-pendoid': dataPendoId = rootClassName$i,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -18359,7 +18350,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -18413,9 +18404,9 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$g = 'dot-file-upload';
-const containerClassName = `${rootClassName$g}-container`;
-const dropZoneClassName = `${rootClassName$g}-drop-zone`;
+const rootClassName$h = 'dot-file-upload';
+const containerClassName = `${rootClassName$h}-container`;
+const dropZoneClassName = `${rootClassName$h}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
@@ -18435,7 +18426,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$g}.${dropZoneClassName} {
+    &.${rootClassName$h}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -18467,12 +18458,12 @@ const StyledFileUpload = styled.div`
   `}
 `;
 
-const rootClassName$f = 'dot-file-list-item';
+const rootClassName$g = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$f} {
+    &.${rootClassName$g} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -18484,7 +18475,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$f}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$g}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -18494,7 +18485,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$f}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$g}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -18536,7 +18527,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$f, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$g, 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);
@@ -18569,7 +18560,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$f}-end-icon`,
+      className: `${rootClassName$g}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -18693,7 +18684,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$g,
+  'data-pendoid': dataPendoId = rootClassName$h,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -18706,7 +18697,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$g, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$h, 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) => {
@@ -18778,6 +18769,76 @@ const DotFileUpload = ({
   });
 };
 
+const rootClassName$f = 'dot-fab';
+const StyledFab = styled(Fab)`
+  ${({
+  theme,
+  color
+}) => css`
+    &.${rootClassName$f} {
+      ${color === 'default' ? css`
+            background-color: ${theme.palette.figma.typography.white};
+            color: ${theme.palette.figma.typography.black};
+
+            &:hover {
+              background-color: ${theme.palette.figma.neutral.ripple};
+            }
+          ` : css`
+            &.MuiFab-secondary {
+              background-color: ${theme.palette.figma.inProgress.secondary};
+
+              &:hover {
+                background-color: ${theme.palette.secondary[700]};
+              }
+            }
+
+            &,
+            .dot-icon {
+              color: ${theme.palette.figma.typography.white};
+            }
+          `}
+
+      &.Mui-disabled {
+        background-color: ${theme.palette.figma.disabled.normal};
+
+        &,
+        .dot-icon {
+          color: ${theme.palette.figma.typography.disabledLightGray};
+        }
+      }
+    }
+  `}
+`;
+
+const DotFab = ({
+  ariaLabel,
+  children,
+  className,
+  color = 'default',
+  'data-pendoid': dataPendoId = rootClassName$f,
+  'data-testid': dataTestId,
+  disableRipple = false,
+  disabled = false,
+  onClick,
+  size = 'large',
+  variant = 'circular'
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$f, className);
+  return jsx(StyledFab, {
+    "aria-label": ariaLabel,
+    color: color,
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    disabled: disabled,
+    disableRipple: disableRipple,
+    onClick: event => onClick && onClick(event),
+    size: size,
+    variant: variant,
+    children: children
+  });
+};
+
 const rootClassName$e = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
@@ -18832,7 +18893,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -22410,7 +22471,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$E,
+  'data-pendoid': dataPendoId = rootClassName$F,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -22451,7 +22512,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -22672,7 +22733,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$D,
+  'data-pendoid': dataPendoId = rootClassName$E,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -22704,7 +22765,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -25290,4 +25351,4 @@ const DotColorPicker = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardAppTypeToLabelMap, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotColorPicker, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotToggleSwitch, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardAppTypeToLabelMap, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotColorPicker, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFab, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotToggleSwitch, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };