@digital-ai/dot-components 2.20.1 → 2.21.0

package/index.esm.js

@@ -4,7 +4,7 @@ import { useEffect, useState, useRef, useMemo, useContext, createContext, forwar
 import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
-import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import jwt_decode from 'jwt-decode';
 import { useDropzone } from 'react-dropzone';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
@@ -59,13 +59,13 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$16 = 'dot-icon';
+const rootClassName$17 = 'dot-icon';
 const StyledIcon = styled(Icon).withConfig({
   displayName: "Iconstyles__StyledIcon",
   componentId: "st0ybo-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{color:", ";font-size:20px;&.MuiIcon-fontSizeLarge{font-size:28px;height:35px;width:35px;i{height:28px;}}&.MuiIcon-fontSizeSmall{font-size:18px;i{height:18px;}}i{height:20px;}}"], rootClassName$16, theme.palette.figma.icon.black));
+}) => css(["&.", "{color:", ";font-size:20px;&.MuiIcon-fontSizeLarge{font-size:28px;height:35px;width:35px;i{height:28px;}}&.MuiIcon-fontSizeSmall{font-size:18px;i{height:18px;}}i{height:20px;}}"], rootClassName$17, theme.palette.figma.icon.black));
 
 const DotIcon = ({
   ariaLabel,
@@ -76,7 +76,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -116,7 +116,7 @@ const DotTypography = ({
       console.warn('please include ariaLevel when using ariaRole="heading"');
     }
     if (noMarginBottom) {
-      console.warn('`noMarginBottom` is deprecated, typography no longer has bottom margin included');
+      console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
     }
   }, []);
   return jsx(Typography, {
@@ -137,7 +137,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$15 = 'dot-accordion';
+const rootClassName$16 = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion).withConfig({
@@ -145,7 +145,7 @@ const StyledAccordion = styled(Accordion).withConfig({
   componentId: "sc-1amx4r3-0"
 })(["", ""], ({
   theme
-}) => css(["&.", " .", "{align-items:center;display:flex;&.Mui-expanded{border-top:1px solid rgba(0,0,0,0.12);&:before{opacity:1;}}.MuiAccordionSummary-content{align-items:center;gap:", ";width:calc(100% - ", ");.dot-tooltip{overflow:hidden;}}.MuiAccordionSummary-expandIconWrapper{padding:", ";margin-right:", ";}.MuiTypography-root{margin-bottom:0;}.MuiTypography-body1{padding:2px 0;}}"], rootClassName$15, summaryClassName, theme.spacing(1), theme.spacing(5), theme.spacing(1.5), theme.spacing(-1.5)));
+}) => css([".", "{background:", ";}&.", " .", "{align-items:center;background:", ";color:", ";display:flex;&.Mui-expanded{border-top:1px solid ", ";margin:0;&:before{opacity:1;}}.MuiAccordionSummary-content{align-items:center;gap:", ";width:calc(100% - ", ");.dot-tooltip{overflow:hidden;}}.MuiAccordionSummary-expandIconWrapper{padding:", ";margin-right:", ";}.MuiTypography-root{margin-bottom:0;}.MuiTypography-body1{padding:2px 0;}}"], detailClassName, theme.palette.figma.background.level1.white, rootClassName$16, summaryClassName, theme.palette.figma.background.level1.white, theme.palette.figma.typography.black, theme.palette.figma.border.default, theme.spacing(1), theme.spacing(5), theme.spacing(1.5), theme.spacing(-1.5)));
 
 const DotAccordion = ({
   actions,
@@ -162,7 +162,7 @@ const DotAccordion = ({
   summary,
   noWrap: _noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -212,12 +212,15 @@ const DotAccordion = ({
   });
 };
 
-const formHelperTextRootStyles = theme => css(["font-family:", ";font-size:", "px;font-weight:400;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}&.read-only .MuiOutlinedInput-root:hover > fieldset{border-color:", ";}"], theme.typography.fontFamily, theme.typography.body2.fontSize, theme.spacing(0.5, 0, 0, 1.5), theme.palette.grey[400], theme.palette.layer.n200);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const formHelperTextRootStyles = theme => css(["align-items:flex-end;color:", ";display:flex;font-family:", ";font-size:", "px;font-weight:400;margin:", ";&.read-only .MuiOutlinedInput-root:hover > fieldset{border-color:", ";}"], theme.palette.figma.typography.gray, theme.typography.fontFamily, theme.typography.body2.fontSize, theme.spacing(0.5, 0, 0, 1.5), theme.palette.figma.typography.black);
 const adornmentIconStyles = () => css(["font-size:24px;height:24px;padding:0;width:24px;"]);
-const pickerInputStyles = theme => css(["label:not(.MuiInputLabel-shrink){top:-5px;}.MuiInputBase-root{margin-bottom:0;.dot-error-icon{margin-right:", ";color:", ";}.dot-icon{", ";}}.MuiInputBase-input{height:", ";padding:", ";}.MuiFormHelperText-root{", ";}"], theme.spacing(0.5), theme.palette.error.main, adornmentIconStyles(), theme.spacing(2), theme.spacing(1.5, 0, 1.5, 2), formHelperTextRootStyles(theme));
-const readOnlyStyles = theme => css(["background:", ";color:", ";border-color:", ";-webkit-text-fill-color:", ";input.Mui-disabled{-webkit-text-fill-color:", ";}.dot-chip{background:", ";opacity:1;}"], theme.palette.grey[50], theme.palette.grey[500], theme.palette.grey[300], theme.palette.grey[500], theme.palette.grey[500], theme.palette.layer.n0);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const pickerInputStyles = theme => css(["label:not(.MuiInputLabel-shrink){top:-5px;}.MuiInputBase-root{margin-bottom:0;.dot-error-icon{margin-right:", ";color:", ";}.dot-icon{", ";}}.MuiInputBase-input{height:", ";padding:", ";}.MuiFormHelperText-root{", ";}"], theme.spacing(0.5), theme.palette.figma.destructive.normal, adornmentIconStyles(), theme.spacing(2), theme.spacing(1.5, 0, 1.5, 2), formHelperTextRootStyles(theme));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const readOnlyStyles = theme => css(["background:", ";color:", ";border-color:", ";-webkit-text-fill-color:", ";input.Mui-disabled{-webkit-text-fill-color:", ";}.dot-chip{background:", ";opacity:1;}"], theme.palette.figma.disabled.normal, theme.palette.figma.typography.disabled, theme.palette.figma.border.defaultButton, theme.palette.figma.typography.disabled, theme.palette.figma.typography.disabled, theme.palette.figma.disabled.normal);
 
-const rootClassName$14 = 'dot-text-field';
+const rootClassName$15 = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
@@ -235,7 +238,7 @@ const StyledInputLabel = styled(InputLabel).withConfig({
   componentId: "sc-1mbn9f0-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:", ";transform:none;&.Mui-disabled .dot-typography{color:", ";}&.Mui-error .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.spacing(0.5), theme.palette.layer.n700, theme.palette.error.main));
+}) => css(["&.", "{margin-bottom:", ";transform:none;&.Mui-disabled .dot-typography{color:", ";}&.Mui-error .dot-typography,&.MuiInputLabel-outlined.Mui-disabled,&.MuiInputLabel-outlined.Mui-disabled .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.spacing(0.5), theme.palette.figma.typography.disabled, theme.palette.figma.typography.black));
 const StyledTextFieldContainer = styled.div.withConfig({
   displayName: "InputFormFieldsstyles__StyledTextFieldContainer",
   componentId: "sc-1mbn9f0-2"
@@ -246,15 +249,15 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}.MuiInputLabel-root.Mui-disabled{color:", ";}&.", " .MuiInputBase-root,.MuiInputBase-root.Mui-disabled{", ";}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiInputLabel-animated{color:", ";}.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiInputLabel-animated,.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-animated,.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputLabel-outlined.MuiInputLabel-shrink:not( .MuiInputLabel-animated ){color:", ";}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$14, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, theme.palette.layer.n500, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$14, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.warning.main, adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme)));
+}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}&.", " .MuiInputBase-root,.MuiInputBase-root.Mui-disabled{", ";}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputLabel-root.Mui-error{color:", ";}.MuiInputBase-root{background:", ";margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$15, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$15, adornmentIconClassName, theme.palette.figma.icon.black, theme.typography.body2.fontSize, theme.palette.figma.typography.black, theme.palette.figma.neutral.normal, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.figma.success.normal, adornmentIconClassName, theme.palette.figma.success.normal, errorClassName, theme.palette.figma.destructive.normal, adornmentIconClassName, theme.palette.figma.destructive.normal, warningClassName, theme.palette.figma.warning.normal, adornmentIconClassName, theme.palette.figma.warning.normal, warningClassName, fieldsetClassName, theme.palette.figma.warning.normal, formHelperTextRootStyles(theme)));
 
-const rootClassName$13 = 'dot-action-toolbar';
+const rootClassName$14 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar).withConfig({
   displayName: "ActionToolbarstyles__StyledToolbar",
   componentId: "sc-5llm03-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{border-bottom:1px solid ", ";.", " .MuiInputBase-root{margin-bottom:0;}}"], rootClassName$13, theme.palette.grey[100], rootClassName$14));
+}) => css(["&.", "{border-bottom:1px solid ", ";.", " .MuiInputBase-root{margin-bottom:0;}}"], rootClassName$14, theme.palette.figma.border.default, rootClassName$15));
 
 const DotActionToolbar = ({
   ariaLabel,
@@ -263,7 +266,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant: _variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -273,13 +276,13 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$12 = 'dot-alert-banner';
+const rootClassName$13 = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert).withConfig({
   displayName: "AlertBannerstyles__StyledAlertBanner",
   componentId: "sc-1u3aqgz-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;min-height:48px;overflow:hidden;padding:", ";.dot-icon,.MuiAlert-icon,.MuiAlert-message{padding:0;.dot-typography{margin-bottom:0;}}&.MuiAlert-standardSuccess{.dot-icon,.MuiAlert-icon,.dot-typography{color:", ";}}&.MuiAlert-standardInfo{background-color:", ";.dot-icon,.MuiAlert-icon,.dot-typography{color:", ";}}&.MuiAlert-standardWarning{background-color:", ";.dot-icon,.MuiAlert-icon,.dot-typography{color:", ";}}&.MuiAlert-standardError{background-color:", ";.dot-typography{color:", ";}.dot-icon,.MuiAlert-icon{color:", ";}}}"], rootClassName$12, theme.spacing(0.75, 2), theme.palette.success[700], theme.palette.primary[50], theme.palette.primary[500], theme.palette.warning[100], theme.palette.grey[700], theme.palette.error[50], theme.palette.error[700], theme.palette.error[500]));
+}) => css(["&.", "{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;min-height:48px;overflow:hidden;padding:", ";svg,.dot-typography{color:", ";}.dot-icon,.MuiAlert-icon,.MuiAlert-message{padding:0;.dot-typography{margin-bottom:0;}}&.MuiAlert-standardSuccess{background:", ";.dot-icon,.MuiAlert-icon{color:", ";}}&.MuiAlert-standardInfo{background:", ";.dot-icon,.MuiAlert-icon{color:", ";}}&.MuiAlert-standardWarning{background:", ";.dot-icon,.MuiAlert-icon{color:", ";}}&.MuiAlert-standardError{background:", ";.dot-icon,.MuiAlert-icon{color:", ";}}}"], rootClassName$13, theme.spacing(0.75, 2), theme.palette.figma.overlay.alerts.text.black, theme.palette.figma.overlay.alerts.success.background, theme.palette.figma.overlay.alerts.success.icon, theme.palette.figma.overlay.alerts.info.background, theme.palette.figma.overlay.alerts.info.icon, theme.palette.figma.overlay.alerts.warning.background, theme.palette.figma.overlay.alerts.warning.icon, theme.palette.figma.overlay.alerts.error.background, theme.palette.figma.overlay.alerts.error.icon));
 
 //Primary blue
 //https://zeroheight.com/4a9ac476a/p/22005a-color/t/6288e9
@@ -324,9 +327,11 @@ const n400 = '#667385';
 const n500 = '#4b5a6f';
 const n600 = '#445267';
 const n700 = '#3b485c';
+const n700_70 = 'rgba(59, 72, 92, 0.7)';
 const n700_90 = 'rgba(59, 72, 92, 0.9)';
 const n800 = '#333f52';
 const n900 = '#232e40';
+const n900_20 = 'rgba(35, 46, 64, 0.2)';
 const n900_70 = 'rgba(35, 46, 64, 0.7)';
 const nA100 = '#88b1ff';
 const nA200 = '#5590ff';
@@ -440,9 +445,11 @@ var lightThemeColors = /*#__PURE__*/Object.freeze({
   n500: n500,
   n600: n600,
   n700: n700,
+  n700_70: n700_70,
   n700_90: n700_90,
   n800: n800,
   n900: n900,
+  n900_20: n900_20,
   n900_70: n900_70,
   nA100: nA100,
   nA200: nA200,
@@ -510,6 +517,10 @@ var lightThemeColors = /*#__PURE__*/Object.freeze({
 });
 
 const lightFigmaColors = {
+  appToolbar: {
+    background: n700,
+    btnHover: n900
+  },
   background: {
     level0: {
       bckgGray: n50,
@@ -614,7 +625,7 @@ const lightFigmaColors = {
         icon: o500
       }
     },
-    default: n700,
+    default: n900_70,
     table: {
       highlights: b50,
       hoverRow: n50,
@@ -652,6 +663,10 @@ const lightFigmaColors = {
   }
 };
 const darkFigmaColors = {
+  appToolbar: {
+    background: n700,
+    btnHover: n900
+  },
   background: {
     level0: {
       bckgGray: n800,
@@ -660,7 +675,7 @@ const darkFigmaColors = {
       componentsBackground: n700
     },
     level1: {
-      deep: n50,
+      deep: n900,
       gray: n50,
       white: n700
     }
@@ -723,7 +738,7 @@ const darkFigmaColors = {
     active: n700,
     darkGray: n400,
     darkerGrayFocus: n700,
-    elevated: n700,
+    elevated: n800,
     light: n800,
     lightGray: n200,
     normal: n900,
@@ -756,7 +771,7 @@ const darkFigmaColors = {
         icon: o800
       }
     },
-    default: n700,
+    default: n900_70,
     table: {
       highlights: b200,
       hoverRow: n500,
@@ -834,6 +849,14 @@ const componentOverrides = {
   MuiTooltip: {
     defaultProps: {
       TransitionComponent: Fade
+    },
+    styleOverrides: {
+      arrow: {
+        color: n900_70
+      },
+      tooltip: {
+        backgroundColor: n900_70
+      }
     }
   }
 };
@@ -923,54 +946,55 @@ const breakpointOptions = {
     xl: 1920
   }
 };
+// light colors by default
 const avatarColors = {
+  blue: {
+    color: lightFigmaColors.typography.white,
+    backgroundColor: lightFigmaColors.primary.normal
+  },
+  darkGrey: {
+    color: lightFigmaColors.typography.white,
+    backgroundColor: lightFigmaColors.typography.gray
+  },
   default: {
-    color: n700,
-    backgroundColor: n100
+    color: lightFigmaColors.icon.black,
+    backgroundColor: lightFigmaColors.background.level1.deep
+  },
+  green: {
+    color: lightFigmaColors.typography.white,
+    backgroundColor: lightFigmaColors.success.normal
   },
   inherit: {
     color: 'inherit',
     backgroundColor: null
   },
-  green: {
-    color: n0,
-    backgroundColor: g500
-  },
-  blue: {
-    color: n0,
-    backgroundColor: b500
+  lightGrey: {
+    color: lightFigmaColors.overlay.alerts.text.black,
+    backgroundColor: n200
   },
   orange: {
-    color: n700,
-    backgroundColor: o500
+    color: lightFigmaColors.overlay.alerts.text.black,
+    backgroundColor: lightFigmaColors.warning.normal
   },
   purple: {
     color: n0,
     backgroundColor: p500
   },
-  yellow: {
-    color: n700,
-    backgroundColor: y500
-  },
   red: {
-    color: n0,
-    backgroundColor: r500
-  },
-  darkGrey: {
-    color: n0,
-    backgroundColor: n700
-  },
-  lightGrey: {
-    color: n700,
-    backgroundColor: n200
+    color: lightFigmaColors.typography.white,
+    backgroundColor: lightFigmaColors.destructive.normal
   },
   transparent: {
-    color: n700,
+    color: lightFigmaColors.typography.black,
     backgroundColor: 'transparent'
   },
   white: {
     color: n700,
     backgroundColor: n0
+  },
+  yellow: {
+    color: lightFigmaColors.overlay.alerts.text.black,
+    backgroundColor: y500
   }
 };
 const darkTheme = createTheme({
@@ -978,7 +1002,35 @@ const darkTheme = createTheme({
   palette: {
     figma: darkFigmaColors,
     mode: 'dark',
-    avatarColors: Object.assign({}, avatarColors),
+    avatarColors: Object.assign(Object.assign({}, avatarColors), {
+      blue: {
+        color: darkFigmaColors.typography.white,
+        backgroundColor: darkFigmaColors.primary.normal
+      },
+      darkGrey: {
+        color: darkFigmaColors.typography.white,
+        backgroundColor: darkFigmaColors.typography.gray
+      },
+      default: {
+        color: darkFigmaColors.icon.black,
+        backgroundColor: darkFigmaColors.background.level1.deep
+      },
+      green: {
+        color: darkFigmaColors.typography.white,
+        backgroundColor: darkFigmaColors.success.normal
+      },
+      orange: {
+        color: darkFigmaColors.overlay.alerts.text.black,
+        backgroundColor: darkFigmaColors.warning.normal
+      },
+      red: {
+        color: darkFigmaColors.typography.white,
+        backgroundColor: darkFigmaColors.destructive.normal
+      },
+      transparent: Object.assign(Object.assign({}, avatarColors.transparent), {
+        color: darkFigmaColors.typography.black
+      })
+    }),
     background: {
       default: n900
     },
@@ -1044,10 +1096,21 @@ const darkTheme = createTheme({
       primary: n50
     }
   },
-  components: componentOverrides,
+  components: Object.assign(Object.assign({}, componentOverrides), {
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: darkFigmaColors.background.level0.componentsBackground
+        }
+      }
+    }
+  }),
   typography: Object.assign(Object.assign({}, typographyOptions), {
     allVariants: Object.assign(Object.assign({}, typographyOptions.allVariants), {
-      color: n50
+      color: darkFigmaColors.typography.black
+    }),
+    body2: Object.assign(Object.assign({}, typographyOptions.body2), {
+      color: darkFigmaColors.typography.gray
     })
   })
 });
@@ -1208,10 +1271,21 @@ const lightTheme = createTheme({
     },
     tonalOffset: 0.2
   },
-  components: componentOverrides,
+  components: Object.assign(Object.assign({}, componentOverrides), {
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: lightFigmaColors.background.level0.componentsBackground
+        }
+      }
+    }
+  }),
   typography: Object.assign(Object.assign({}, typographyOptions), {
     allVariants: Object.assign(Object.assign({}, typographyOptions.allVariants), {
-      color: n700
+      color: lightFigmaColors.typography.black
+    }),
+    body2: Object.assign(Object.assign({}, typographyOptions.body2), {
+      color: lightFigmaColors.typography.gray
     })
   })
 });
@@ -1288,7 +1362,7 @@ const DotAlertBanner = ({
     success: AlertBannerIcon('check-solid'),
     warning: AlertBannerIcon('warning-solid')
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$12, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$1(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -1936,7 +2010,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$11 = 'dot-avatar';
+const rootClassName$12 = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -1947,11 +2021,11 @@ const StyledAvatar = styled(Avatar).withConfig({
   componentId: "sc-13bzj2s-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{display:inline-flex;background-color:", ";border:0px;&:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";outline:0;}img{width:auto;height:105%;}.dot-i,.dot-typography{color:", ";margin-bottom:0;}&.small{height:", ";width:", ";}&.medium{height:", ";width:", ";}&.large{height:", ";width:", ";}}"], rootClassName$11, ({
+}) => css(["&.", "{display:inline-flex;background-color:", ";border:0px;&:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";outline:0;}img{width:auto;height:105%;}.dot-i,.dot-typography{color:", ";margin-bottom:0;}&.small{height:", ";width:", ";}&.medium{height:", ";width:", ";}&.large{height:", ";width:", ";}}"], rootClassName$12, ({
   color
 }) => {
   return color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].backgroundColor : theme.palette.avatarColors['default'].backgroundColor;
-}, theme.palette.layer.n0, theme.palette.layer.n900, ({
+}, theme.palette.figma.icon.white, theme.palette.figma.icon.black, ({
   color
 }) => {
   return color ? theme.palette.avatarColors[color].color : theme.palette.avatarColors['default'].color;
@@ -2022,7 +2096,7 @@ const DotAvatar = ({
   variant: _variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2061,13 +2135,13 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$10 = 'dot-button';
+const rootClassName$11 = 'dot-button';
 const StyledButton = styled(Button).withConfig({
   displayName: "Buttonstyles__StyledButton",
   componentId: "sx99hh-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";margin:", ";padding:", ";min-width:auto;white-space:nowrap;&:hover{background-color:", ";}&:active{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}}&.MuiButton-outlined,&.MuiButton-text{color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}.dot-icon{color:", ";}}&.MuiButton-outlined{background-color:", ";border-color:", ";}&.MuiButton-text{background-color:transparent;}&.Mui-disabled{background-color:", ";color:", ";&.MuiButton-outlined{border-color:", ";}&.MuiButton-text{background-color:transparent;}}&:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall){height:", ";}.dot-icon{color:", ";display:flex;padding:0;}}"], rootClassName$10, theme.palette.figma.primary.normal, theme.spacing(0.5), theme.spacing(0.75, 2), theme.palette.figma.primary.elevated, theme.palette.figma.primary.active, theme.palette.figma.destructive.normal, theme.palette.figma.destructive.elevated, theme.palette.figma.destructive.active, theme.palette.figma.typography.black, theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.active, theme.palette.figma.icon.black, theme.palette.figma.neutral.normal, theme.palette.figma.border.defaultButton, theme.palette.figma.disabled.normal, theme.palette.figma.typography.gray, theme.palette.figma.border.defaultButton, theme.spacing(5), theme.palette.figma.icon.white));
+}) => css(["&.", "{background-color:", ";margin:", ";padding:", ";min-width:auto;white-space:nowrap;&:hover{background-color:", ";}&:active{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}}&.MuiButton-outlined,&.MuiButton-text{color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}.dot-icon{color:", ";}}&.MuiButton-outlined{background-color:", ";border-color:", ";}&.MuiButton-text{background-color:transparent;}&.Mui-disabled{background-color:", ";color:", ";&.MuiButton-outlined{border-color:", ";}&.MuiButton-text{background-color:transparent;}}&:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall){height:", ";}.dot-icon{color:", ";display:flex;padding:0;}}"], rootClassName$11, theme.palette.figma.primary.normal, theme.spacing(0.5), theme.spacing(0.75, 2), theme.palette.figma.primary.elevated, theme.palette.figma.primary.active, theme.palette.figma.destructive.normal, theme.palette.figma.destructive.elevated, theme.palette.figma.destructive.active, theme.palette.figma.typography.black, theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.active, theme.palette.figma.icon.black, theme.palette.figma.neutral.normal, theme.palette.figma.border.defaultButton, theme.palette.figma.disabled.normal, theme.palette.figma.typography.gray, theme.palette.figma.border.defaultButton, theme.spacing(5), theme.palette.figma.icon.white));
 
 /** This component wraps the Button component from @material-ui. */
 const DotButton = /*#__PURE__*/forwardRef(({
@@ -2090,7 +2164,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
   tooltip,
   type: _type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   let color;
   let variant;
   switch (_type) {
@@ -2139,11 +2213,11 @@ const DotButton = /*#__PURE__*/forwardRef(({
   });
 });
 
-const rootClassName$$ = 'dot-link';
+const rootClassName$10 = 'dot-link';
 const StyledLink = styled(Link).withConfig({
   displayName: "Linkstyles__StyledLink",
   componentId: "sc-1lpmaww-0"
-})(["", ""], () => css(["&.", "{cursor:pointer;&:hover.MuiLink-underlineHover{text-decoration:none;}}"], rootClassName$$));
+})(["", ""], () => css(["&.", "{cursor:pointer;&:hover.MuiLink-underlineHover{text-decoration:none;}}"], rootClassName$10));
 
 const DotLink = ({
   ariaLabel,
@@ -2162,7 +2236,7 @@ const DotLink = ({
   tooltip,
   underline: _underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$1(children) && !ariaLabel) {
@@ -2211,7 +2285,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$_ = 'dot-list';
+const rootClassName$$ = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2220,7 +2294,7 @@ const StyledList = styled(List).withConfig({
   componentId: "wxwqwr-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.MuiCollapse-root{padding-top:", ";margin-bottom:", ";.MuiCollapse-wrapper{margin:", ";overflow:hidden;width:calc(100% - ", ");}.MuiListSubheader-root .MuiTypography-root{padding:", ";}}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], rootClassName$_, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1), theme.spacing(-1), theme.spacing(0, 2), theme.spacing(4), theme.spacing(1, 0), theme.spacing(1)));
+}) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.MuiCollapse-root{padding-top:", ";margin-bottom:", ";.MuiCollapse-wrapper{margin:", ";overflow:hidden;width:calc(100% - ", ");}.MuiListSubheader-root .MuiTypography-root{padding:", ";}}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}.", " .dot-drawer-paper{border-left:1px solid ", ";}}"], rootClassName$$, theme.palette.figma.background.level0.componentsBackground, theme.palette.figma.icon.black, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1), theme.spacing(-1), theme.spacing(0, 2), theme.spacing(4), theme.spacing(1, 0), theme.spacing(1), nestedDrawerClassName, theme.palette.figma.border.default));
 
 const getChevronIcon = (nestedListType, isOpened) => {
   if (nestedListType !== 'expandable') {
@@ -2264,13 +2338,13 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$Z = 'dot-progress';
+const rootClassName$_ = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress).withConfig({
   displayName: "Progressstyles__StyledCircularProgress",
   componentId: "sc-1gs77rb-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.MuiCircularProgress-colorPrimary{color:", ";}&.MuiCircularProgress-colorSecondary{color:", ";}"], rootClassName$Z, theme.palette.figma.inProgress.normal, theme.palette.figma.inProgress.secondary));
+}) => css(["&.", "{&.MuiCircularProgress-colorPrimary{color:", ";}&.MuiCircularProgress-colorSecondary{color:", ";}"], rootClassName$_, theme.palette.figma.inProgress.normal, theme.palette.figma.inProgress.secondary));
 
 const DotProgress = ({
   ariaLabel,
@@ -2283,7 +2357,7 @@ const DotProgress = ({
   value,
   variant: _variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -2324,23 +2398,23 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$Y = 'dot-popper';
+const rootClassName$Z = 'dot-popper';
 const StyledPopper$1 = styled(Popper).withConfig({
   displayName: "Popperstyles__StyledPopper",
   componentId: "sd1h8p-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{font-family:", ";font-size:", "px;}&.", ",&.", " > .dot-popper-paper{background-color:", ";}"], rootClassName$Y, theme.typography.fontFamily, theme.typography.body1.fontSize, rootClassName$Y, rootClassName$Y, theme.palette.figma.background.level1.white));
+}) => css(["&.", "{font-family:", ";font-size:", "px;}&.", ",&.", " > .dot-popper-paper{background-color:", ";}"], rootClassName$Z, theme.typography.fontFamily, theme.typography.body1.fontSize, rootClassName$Z, rootClassName$Z, theme.palette.figma.background.level1.white));
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$X = 'dot-menu';
+const rootClassName$Y = 'dot-menu';
 const getListMaxHeight = maxHeight => isString$1(maxHeight) ? maxHeight : `${maxHeight}px`;
 const StyledPopper = styled(Popper).withConfig({
   displayName: "Menustyles__StyledPopper",
   componentId: "sc-134fmqu-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{font-family:", ";font-size:", "px;z-index:", ";}&.", ",&.", "{&.loading .MuiPaper-root{align-items:center;display:flex;justify-content:center;min-height:200px;min-width:200px;}ul,.dot-action-item{.dot-action-item-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;}}ul{box-sizing:content-box;min-width:112px;overflow:auto;", " .dot-li{min-height:auto;}}.dot-action-item{height:", ";border-top:1px solid ", ";line-height:inherit;button.dot-button{border-radius:", ";justify-content:flex-start;height:100%;margin:0;&:focus-visible{background-color:", ";}.MuiButton-label{gap:", ";.MuiButton-startIcon{margin-left:0;.dot-icon{flex-shrink:0;}}}}}}"], rootClassName$Y, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$X, rootClassName$Y, ({
+}) => css(["&.", "{font-family:", ";font-size:", "px;z-index:", ";}&.", ",&.", "{&.loading .MuiPaper-root{align-items:center;display:flex;justify-content:center;min-height:200px;min-width:200px;}ul,.dot-action-item{.dot-action-item-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;}}ul{box-sizing:content-box;min-width:112px;overflow:auto;", " .dot-li{min-height:auto;}}.dot-action-item{height:", ";border-top:1px solid ", ";line-height:inherit;button.dot-button{border-radius:", ";justify-content:flex-start;height:100%;margin:0;&:focus-visible{background-color:", ";}.MuiButton-label{gap:", ";.MuiButton-startIcon{margin-left:0;.dot-icon{flex-shrink:0;}}}}}}"], rootClassName$Z, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$Y, rootClassName$Z, ({
   $maxHeight
 }) => $maxHeight !== undefined && `
           max-height: ${getListMaxHeight($maxHeight)};
@@ -2350,7 +2424,7 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$W = 'dot-ul';
+const rootClassName$X = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList).withConfig({
@@ -2358,7 +2432,7 @@ const StyledMenuList = styled(MenuList).withConfig({
   componentId: "yqdwwg-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.dot-li{font-size:", "px;justify-content:space-between;gap:", ";&:hover{background:", ";}&.Mui-selected,&.Mui-selected:hover{background:", ";}&.", "{padding-right:", ";}}}"], rootClassName$W, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5)));
+}) => css(["&.", "{background:", ";.dot-li{color:", ";font-size:", "px;justify-content:space-between;gap:", ";&:hover{background:", ";}&.Mui-selected,&.Mui-selected:hover{background:", ";}&.", "{padding-right:", ";}}}"], rootClassName$X, theme.palette.figma.background.level1.white, theme.palette.figma.typography.black, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5)));
 
 const getDefaultItemHeight = isDense => isDense ? MENU_ITEM_HEIGHT_DENSE : MENU_ITEM_HEIGHT_NORMAL;
 const calculateItemHeight = (isDense, customItemHeight, menuItemHeight) => {
@@ -2430,7 +2504,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -2539,7 +2613,7 @@ const DotMenu = ({
   open: _open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className, _loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, _loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(_menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -2627,13 +2701,13 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$V = 'dot-drawer';
+const rootClassName$W = 'dot-drawer';
 const StyledDrawer = styled(Drawer).withConfig({
   displayName: "Drawerstyles__StyledDrawer",
   componentId: "sc-1uiowy0-0"
 })(["", ""], ({
   theme
-}) => css(["&.", " .MuiBackdrop-root{background-color:", ";}.dot-drawer-paper{height:", ";padding:", ";width:", ";}"], rootClassName$V, alpha(theme.palette.grey[900], 0.7), ({
+}) => css(["&.", " .MuiBackdrop-root{background-color:", ";}.dot-drawer-paper{background:", ";height:", ";padding:", ";width:", ";}"], rootClassName$W, theme.palette.figma.overlay.default, theme.palette.figma.background.level0.componentsBackground, ({
   height,
   anchor
 }) => anchor === 'left' || anchor === 'right' ? '100%' : height, theme.spacing(2), ({
@@ -2641,21 +2715,21 @@ const StyledDrawer = styled(Drawer).withConfig({
   anchor
 }) => anchor === 'bottom' || anchor === 'top' ? 'auto' : width));
 
-const rootClassName$U = 'dot-drawer-header';
+const rootClassName$V = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div.withConfig({
   displayName: "DrawerHeaderstyles__StyleDrawerHeader",
   componentId: "sc-2d2xd3-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding:", ";display:flex;align-items:center;.close-button{margin-left:auto;}}"], rootClassName$U, theme.spacing(0, 0, 2)));
+}) => css(["&.", "{padding:", ";display:flex;align-items:center;.close-button{margin-left:auto;}}"], rootClassName$V, theme.spacing(0, 0, 2)));
 
-const rootClassName$T = 'dot-icon-btn';
+const rootClassName$U = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton).withConfig({
   displayName: "IconButtonstyles__StyledIconButton",
   componentId: "eko0kb-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{color:", ";font-size:inherit;padding:10px;&:hover{background-color:", ";}&:active{background-color:", ";}&:focus{background-color:", ";}&.Mui-disabled .dot-icon{color:", ";}&.ripple-disabled{&:hover,&:focus{background:", ";}}&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";&:active{background:", ";}}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}"], rootClassName$T, theme.palette.figma.icon.black, theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.ripple, theme.palette.figma.neutral.active, theme.palette.figma.icon.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.border.defaultButton, theme.spacing(1), theme.palette.figma.toggleTabs.bckg));
+}) => css(["&.", "{color:", ";font-size:inherit;padding:10px;&:hover{background-color:", ";}&:active{background-color:", ";}&:focus{background-color:", ";}&.Mui-disabled .dot-icon{color:", ";}&.ripple-disabled{&:hover,&:focus{background:", ";}}&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";&:active{background:", ";}}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}"], rootClassName$U, theme.palette.figma.icon.black, theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.ripple, theme.palette.figma.neutral.active, theme.palette.figma.icon.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.border.defaultButton, theme.spacing(1), theme.palette.figma.toggleTabs.bckg));
 
 const DotIconButton = ({
   ariaLabel,
@@ -2673,7 +2747,7 @@ const DotIconButton = ({
   size: _size = 'medium'
 }) => {
   const rippleClassName = _disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$T, rippleClassName, `shape-${_shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, rippleClassName, `shape-${_shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     title: tooltip,
@@ -2706,7 +2780,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -2723,11 +2797,11 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$S = 'dot-drawer-body';
+const rootClassName$T = 'dot-drawer-body';
 const StyleDrawerBody = styled.div.withConfig({
   displayName: "DrawerBodystyles__StyleDrawerBody",
   componentId: "sc-1mpmjdk-0"
-})(["", ""], () => css(["&.", "{display:flex;.dot-drawer-close-button{align-self:self-start;padding:0;margin-left:auto;}}"], rootClassName$S));
+})(["", ""], () => css(["&.", "{display:flex;.dot-drawer-close-button{align-self:self-start;padding:0;margin-left:auto;}}"], rootClassName$T));
 
 const DotDrawerBody = ({
   ariaLabel,
@@ -2739,7 +2813,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2754,13 +2828,13 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$R = 'dot-drawer-footer';
+const rootClassName$S = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div.withConfig({
   displayName: "DrawerFooterstyles__StyleDrawerFooter",
   componentId: "sc-1ki05ze-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding:", ";}"], rootClassName$R, theme.spacing(2, 0, 0)));
+}) => css(["&.", "{padding:", ";}"], rootClassName$S, theme.spacing(2, 0, 0)));
 
 const DotDrawerFooter = ({
   ariaLabel,
@@ -2769,7 +2843,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2807,7 +2881,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   const backdropEnabled = _variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
   const headerExists = !!drawerHeaderProps;
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
@@ -2869,7 +2943,7 @@ const styledListItemElement = elementType => {
     componentId: "sc-1fawh8v-0"
   })(["", ""], ({
     theme
-  }) => css(["&.", "{&.", "{padding:0;}.dot-tooltip{display:flex;width:100%;}p.MuiTypography-root{flex-grow:2;margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
+  }) => css(["&.", "{& > span:first-of-type{display:flex;width:100%;}&.", "{padding:0;}&:hover{background:", ";}.dot-tooltip{display:flex;width:100%;}p.MuiTypography-root{flex-grow:2;margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, theme.palette.figma.neutral.elevated, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.figma.icon.black));
 };
 const StyledListItem = styledListItemElement(ListItem);
 const StyledListItemButton = styledListItemElement(ListItemButton);
@@ -3117,7 +3191,7 @@ const DotList = ({
   nestedListType: _nestedListType = 'expandable',
   width: _width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
   const listRef = useRef();
   const [listItemIndex, setListItemIndex] = useState(null);
@@ -3281,8 +3355,10 @@ const DotInputText = ({
   inputRef,
   label,
   max,
+  maxLength,
   maxRows,
   min,
+  minLength,
   minRows,
   multiline: _multiline = false,
   name,
@@ -3309,7 +3385,7 @@ const DotInputText = ({
   const hasEndAdornmentIcon = endIcon || _error || hasWarning || hasSuccess;
   // This state is used only with debounce feature enabled
   const [inputTextState, setInputTextState] = useState(hasDebounce && getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$14, hasError, hasWarning, hasSuccess, _readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$15, hasError, hasWarning, hasSuccess, _readOnly && readOnlyClassName$1);
   // Used to control text value from the consumer component
   // when debounce feature is enabled
   useEffect(() => {
@@ -3394,7 +3470,9 @@ const DotInputText = ({
         className: inputClassName,
         'data-testid': dataTestId,
         max,
+        maxLength: maxLength,
         min,
+        minLength: minLength,
         readOnly: _readOnly,
         tabIndex: 0
       },
@@ -3420,11 +3498,11 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$Q = 'dot-search-input';
+const rootClassName$R = 'dot-search-input';
 const StyledSearchInput = styled.span.withConfig({
   displayName: "SearchInputstyles__StyledSearchInput",
   componentId: "qlwzku-0"
-})(["", ""], () => css(["&.", "{}"], rootClassName$Q));
+})(["", ""], () => css(["&.", "{}"], rootClassName$R));
 
 function SearchInput({
   'data-testid': dataTestId,
@@ -3438,7 +3516,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -3489,13 +3567,13 @@ function SearchInput({
   });
 }
 
-const rootClassName$P = 'dot-copy-button';
+const rootClassName$Q = 'dot-copy-button';
 const StyledCopyButton = styled.span.withConfig({
   displayName: "CopyButtonstyles__StyledCopyButton",
   componentId: "sc-18ff0u-0"
 })(["", ""], ({
   theme
-}) => css(["&.", " .copied-to-clipboard{color:", ";}"], rootClassName$P, theme.palette.figma.success.normal));
+}) => css(["&.", " .copied-to-clipboard{color:", ";}"], rootClassName$Q, theme.palette.figma.success.normal));
 
 const DotCopyButton = ({
   ariaLabel: _ariaLabel = 'Copy to clipboard',
@@ -3551,7 +3629,7 @@ const DotCopyButton = ({
     return false;
   }, [_showCopiedIcon, _disabled, _onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$P,
+    className: rootClassName$Q,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: _ariaLabel,
@@ -3782,13 +3860,13 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$O = 'dot-app-switcher';
+const rootClassName$P = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer).withConfig({
   displayName: "AppSwitcherstyles__StyledAppSwitcher",
   componentId: "hhxfqg-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.dot-drawer-paper{padding:0;width:382px;}.content{padding:", ";overflow-y:auto;}.app-menu-item{display:flex;justify-content:space-between;align-items:center;}.dot-link,.product-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;height:60px;margin-bottom:", ";text-decoration:none;cursor:pointer;}.logo-title{display:flex;align-items:center;gap:16px;width:100%;.start-icon{width:40px;display:flex;justify-content:space-around;align-items:center;}}.dot-avatar{flex-basis:40px;}.section-title{display:flex;align-items:center;height:30px;padding:", ";margin:", ";border-bottom:1px solid ", ";}.dot-app-switcher-app-title{min-width:150px;}.dot-icon{flex-basis:content;}.app-switcher-header{.app-switcher-header-title{display:flex;align-items:center;}display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid ", ";padding:", ";.app-switcher-label{padding-left:", ";}}.app-switcher-back-button{&.dot-button.MuiButton-text{padding-left:0;}}.product-heading{display:flex;align-items:center;gap:16px;}.product-applications{margin-top:", ";width:100%;}.app-instance-search{margin-top:", ";}}"], rootClassName$O, theme.spacing(0, 2, 1, 2), theme.spacing(1), theme.spacing(0, 0, 0, 2), theme.spacing(0, -2, 0), theme.palette.grey[100], theme.palette.grey[100], theme.spacing(0, 2, 1, 2), theme.spacing(2), theme.spacing(2), theme.spacing(2)));
+}) => css(["&.", "{.dot-drawer-paper{padding:0;width:382px;.dot-list{background:transparent;}}.content{padding:", ";overflow-y:auto;}.app-menu-item{display:flex;justify-content:space-between;align-items:center;}.dot-link,.product-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;height:60px;margin-bottom:", ";text-decoration:none;cursor:pointer;}.logo-title{display:flex;align-items:center;gap:16px;width:100%;.start-icon{width:40px;display:flex;justify-content:space-around;align-items:center;}}.dot-avatar{flex-basis:40px;}.section-title{display:flex;align-items:center;height:30px;padding:", ";margin:", ";border-bottom:1px solid ", ";}.dot-app-switcher-app-title{min-width:150px;}.dot-icon{flex-basis:content;}.app-switcher-header{align-items:end;border-bottom:1px solid ", ";display:flex;justify-content:space-between;padding:", ";.app-switcher-header-title{display:flex;align-items:center;}.app-switcher-label{padding-left:", ";}}}.product-heading{display:flex;align-items:center;gap:16px;}.product-applications{margin-top:", ";width:100%;}.app-instance-search{margin-top:", ";}}"], rootClassName$P, theme.spacing(0, 2, 1, 2), theme.spacing(1), theme.spacing(0, 0, 0, 2), theme.spacing(0, -2, 0), theme.palette.figma.border.default, theme.palette.figma.border.default, theme.spacing(0, 2, 1, 2), theme.spacing(2), theme.spacing(2), theme.spacing(2)));
 
 const DotAppSwitcherView = ({
   activeApp,
@@ -3809,7 +3887,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -3966,18 +4044,14 @@ const DotAppSwitcherView = ({
       return jsxs("div", {
         className: "content",
         role: "contentinfo",
-        children: [jsx("span", {
-          children: jsx(DotButton, {
-            className: "app-switcher-back-button",
-            type: "text",
-            onClick: showAppTypes,
-            startIcon: jsx(DotIcon, {
-              iconId: "back"
-            }),
-            children: jsx("span", {
-              children: "Back"
-            })
-          })
+        children: [jsx(DotButton, {
+          className: "app-switcher-back-button",
+          type: "text",
+          onClick: showAppTypes,
+          startIcon: jsx(DotIcon, {
+            iconId: "back"
+          }),
+          children: "Back"
         }), jsx("div", {
           "aria-level": 2,
           className: "product-heading",
@@ -4191,19 +4265,19 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$N = 'dot-sidebar';
+const rootClassName$O = 'dot-sidebar';
 const StyledSidebar = styled.aside.withConfig({
   displayName: "Sidebarstyles__StyledSidebar",
   componentId: "l3atb4-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", ";}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}.back-button-text{margin-right:", ";}}hr.MuiDivider-root{border-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid ", ";margin:", ";.dot-typography{display:block;margin:0;padding:", ";}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", ";overflow-y:auto;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);background:", ";color:", ";}.MuiTypography-root.MuiTypography-subtitle2{line-height:40px;}}.", "{height:44px;margin:0;padding:0;.dot-typography{margin-left:", ";}.MuiListItemIcon-root{min-width:40px;.dot-icon{margin:0;}}&:before{content:'';position:relative;left:0;top:0;bottom:0;border-radius:0 2px 2px 0;height:24px;width:4px;background-color:transparent;margin-right:", ";}&:hover{background-color:", ";color:", ";}&.Mui-selected{background-color:", ";color:", ";&:before{background-color:", ";}.dot-typography,.MuiListItemIcon-root .dot-icon i:before{color:", ";}}&.Mui-focusVisible{background-color:", ";box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&.open{border:'none';}.dot-list-item-link .dot-icon{margin-right:", ";}.dot-icon{border-radius:50%;display:flex;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", ";text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", ";p.desc{white-space:nowrap;}.company-name{margin-top:", ";}.d-icon{display:none;}}&.collapsed{overflow:hidden;width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$N, theme.palette.layer.n0, theme.palette.layer.n100, theme.palette.layer.n700, theme.palette.layer.n100, theme.spacing(1, 2), theme.spacing(1), theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n0, theme.palette.primary['50'], theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(2.5), theme.palette.layer.n100, theme.spacing(1, 0), theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.layer.n100, theme.palette.layer.n0, theme.palette.layer.n700, listItemRootClass, theme.spacing(1), theme.spacing(1), theme.palette.primary['50'], theme.palette.primary['500'], theme.palette.primary['50'], theme.palette.primary['500'], theme.palette.primary['500'], theme.palette.primary['500'], theme.palette.primary['50'], theme.palette.layer.n0, theme.palette.primary['500'], theme.spacing(1), theme.spacing(0, 1), theme.palette.layer.n100, theme.spacing(1), theme.palette.layer.n100, theme.palette.layer.n400, theme.spacing(1), theme.spacing(1)));
+}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", ";}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{color:", ";background-color:", ";margin:", ";&:hover{background-color:", ";.dot-icon{color:", ";}}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}.back-button-text{margin-right:", ";}}hr.MuiDivider-root{border-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid ", ";margin:", ";.dot-typography{display:block;margin:0;padding:", ";}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", ";overflow-y:auto;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);background:", ";color:", ";}.MuiTypography-root.MuiTypography-subtitle2{line-height:40px;}}.", "{height:44px;margin:0;padding:0;.dot-typography{margin-left:", ";}.MuiListItemIcon-root{min-width:40px;.dot-icon{margin:0;}}&:before{content:'';position:relative;left:0;top:0;bottom:0;border-radius:0 2px 2px 0;height:24px;width:4px;background-color:transparent;margin-right:", ";}&:hover{background-color:", ";color:", ";.dot-typography,.dot-icon i:before,.MuiListItemIcon-root .dot-icon i:before{color:", ";}}&.Mui-selected{background-color:", ";color:", ";&:before{background-color:", ";}.dot-typography,.MuiListItemIcon-root .dot-icon i:before{color:", ";}}&.Mui-focusVisible{background-color:", ";box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&.open{border:'none';}.dot-list-item-link .dot-icon{margin-right:", ";}.dot-icon{border-radius:50%;display:flex;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid ", ";padding:", ";text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid ", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", ";p.desc{white-space:nowrap;}.company-name{margin-top:", ";}.d-icon{display:none;}}&.collapsed{overflow:hidden;width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$O, theme.palette.figma.background.level1.white, theme.palette.figma.border.default, theme.palette.figma.typography.black, theme.palette.figma.border.default, theme.spacing(1, 2), theme.spacing(1), theme.palette.figma.border.default, theme.palette.figma.icon.disabled, theme.palette.figma.background.level1.deep, theme.spacing(0.5, 1), theme.palette.figma.primary.normal, theme.palette.figma.typography.white, theme.palette.figma.icon.white, theme.palette.figma.icon.black, theme.spacing(2.5), theme.palette.figma.border.default, theme.spacing(1, 0), theme.palette.figma.border.default, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.figma.border.default, theme.palette.figma.background.level0.componentsBackground, theme.palette.figma.typography.black, listItemRootClass, theme.spacing(1), theme.spacing(1), theme.palette.figma.overlay.table.highlights, theme.palette.figma.toggleTabs.text, theme.palette.figma.toggleTabs.text, theme.palette.figma.overlay.table.highlights, theme.palette.figma.toggleTabs.text, theme.palette.figma.toggleTabs.text, theme.palette.figma.toggleTabs.text, theme.palette.figma.primary.light, theme.palette.figma.background.level0.componentsBackground, theme.palette.figma.primary.normal, theme.spacing(1), theme.spacing(0, 1), theme.palette.figma.border.default, theme.spacing(1), theme.palette.figma.border.default, theme.palette.figma.typography.gray, theme.spacing(1), theme.spacing(1)));
 
-const rootClassName$M = 'dot-truncate-with-tooltip';
+const rootClassName$N = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip).withConfig({
   displayName: "TruncateWithTooltipstyles__StyledTruncateWithTooltip",
   componentId: "sc-1o80lur-0"
-})(["", ""], () => css(["&.", "{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}&.dot-characters-limit{display:inline;}"], rootClassName$M));
+})(["", ""], () => css(["&.", "{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}&.dot-characters-limit{display:inline;}"], rootClassName$N));
 
 const getTruncatedLabel = (label, charactersLimit) => {
   if (!charactersLimit || charactersLimit <= 0 || label.length < charactersLimit) return label;
@@ -4223,7 +4297,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: _arrow,
@@ -4333,7 +4407,7 @@ const DotSidebar = ({
     setIsOpen(!isOpen);
   };
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$N, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4400,13 +4474,13 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$L = 'dot-badge';
+const rootClassName$M = 'dot-badge';
 const StyledBadge = styled(Badge).withConfig({
   displayName: "Badgestyles__StyledBadge",
   componentId: "sc-1brv3h5-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{color:", ";word-break:normal;.MuiBadge-badge{background-color:", ";color:", ";&.MuiBadge-standard{font-size:10px;height:", ";min-width:", ";padding:", ";}}}"], rootClassName$L, theme.palette.figma.typography.black, ({
+}) => css(["&.", "{color:", ";word-break:normal;.MuiBadge-badge{background-color:", ";color:", ";&.MuiBadge-standard{font-size:10px;height:", ";min-width:", ";padding:", ";}}}"], rootClassName$M, theme.palette.figma.typography.black, ({
   $badgeColor
 }) => {
   return $badgeColor || theme.palette.figma.destructive.normal;
@@ -4424,7 +4498,7 @@ const DotBadge = ({
   overlap,
   variant: _variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -4446,7 +4520,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$K = 'dot-app-toolbar';
+const rootClassName$L = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer).withConfig({
   displayName: "AppToolbarstyles__StyledMainMenu",
@@ -4459,7 +4533,7 @@ const StyledAppToolbar = styled.header.withConfig({
   componentId: "sc-3kokby-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{align-items:center;background:", ";border-bottom:4px solid ", ";box-sizing:border-box;color:", ";display:flex;height:64px;padding:", ";position:fixed;width:100%;z-index:", ";top:0;left:0;right:0;&.without-menu-icon{padding-left:", ";}&.", "{height:48px;}.dot-main-menu-btn,.dot-right-side{.dot-icon-btn .dot-icon{color:", ";}}.dot-main-menu-btn{text-align:center;}.dot-branding{align-items:center;display:flex;padding:", ";.primary-logo,.app-logo{margin-right:", ";}.primary-logo,.dot-app-logo{display:flex;max-width:200px;svg,img{max-height:36px;max-width:200px;}}a{line-height:0;}.divider{margin-left:", ";}}div.dot-right-side{display:flex;flex-grow:2;justify-content:flex-end;.dot-badge .MuiBadge-anchorOriginTopRightRectangular{top:", ";right:", ";}}.avatar-wrapper{display:flex;align-items:center;justify-content:center;width:40px;button.dot-avatar:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";}}}"], rootClassName$K, theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[0], theme.spacing(1.5, 2, 1.5, 1), levelFourth, theme.spacing(1.5), denseClassName, theme.palette.figma.typography.white, theme.spacing(0, 4, 0, 0.75), theme.spacing(1.5), theme.spacing(2), theme.spacing(1.5), theme.spacing(1.5), theme.palette.layer.n900, theme.palette.layer.n0));
+}) => css(["&.", "{align-items:center;background:", ";border-bottom:4px solid ", ";box-sizing:border-box;color:", ";display:flex;height:64px;padding:", ";position:fixed;width:100%;z-index:", ";top:0;left:0;right:0;&.without-menu-icon{padding-left:", ";}&.", "{height:48px;}.dot-main-menu-btn,.dot-right-side{.dot-icon-btn{&:hover{background:", ";}.dot-icon{color:", ";}}}.dot-main-menu-btn{text-align:center;}.dot-branding{align-items:center;display:flex;padding:", ";.primary-logo,.app-logo{margin-right:", ";}.primary-logo,.dot-app-logo{display:flex;max-width:200px;svg,img{max-height:36px;max-width:200px;}}a{line-height:0;}.divider{margin-left:", ";}}div.dot-right-side{display:flex;flex-grow:2;justify-content:flex-end;.dot-badge .MuiBadge-anchorOriginTopRightRectangular{top:", ";right:", ";}}.avatar-wrapper{display:flex;align-items:center;justify-content:center;width:40px;button.dot-avatar:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";}}}"], rootClassName$L, theme.palette.figma.appToolbar.background, theme.palette.figma.border.default, theme.palette.figma.typography.white, theme.spacing(1.5, 2, 1.5, 1), levelFourth, theme.spacing(1.5), denseClassName, theme.palette.figma.appToolbar.btnHover, theme.palette.figma.border.avatar, theme.spacing(0, 4, 0, 0.75), theme.spacing(1.5), theme.spacing(2), theme.spacing(1.5), theme.spacing(1.5), theme.palette.figma.icon.white, theme.palette.figma.icon.black));
 
 const DotAppToolbar = ({
   ariaLabel,
@@ -4487,7 +4561,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = _dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('md'));
   useEffect(() => {
@@ -4617,7 +4691,7 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$J = 'dot-autocomplete';
+const rootClassName$K = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete).withConfig({
@@ -4625,15 +4699,15 @@ const StyledAutocomplete = styled(Autocomplete).withConfig({
   componentId: "j2sgjy-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.", " .dot-text-field .", "{height:56px;padding-left:", ";}.MuiInputBase-root.Mui-disabled,.", " .MuiInputBase-root{", ";}.", "{padding-top:", ";padding-bottom:", ";}.dot-chip:first-child{margin-left:", ";}.dot-text-field{.", "{min-height:", ";}.warning-icon{color:", ";}.error-icon{color:", ";}}}"], rootClassName$J, inputMediumClassName, inputRootClassName, theme.spacing(2), readOnlyClassName$1, readOnlyStyles(theme), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main));
+}) => css(["&.", "{&.", " .dot-text-field .", "{height:56px;padding-left:", ";}.MuiInputBase-root.Mui-disabled,.", " .MuiInputBase-root{", ";}.", "{padding-top:", ";padding-bottom:", ";}.dot-chip:first-child{margin-left:", ";}.dot-text-field{.", "{min-height:", ";}.warning-icon{color:", ";}.error-icon{color:", ";}}}"], rootClassName$K, inputMediumClassName, inputRootClassName, theme.spacing(2), readOnlyClassName$1, readOnlyStyles(theme), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main));
 
-const rootClassName$I = 'dot-chip';
+const rootClassName$J = 'dot-chip';
 const StyledChip = styled(Chip).withConfig({
   displayName: "Chipstyles__StyledChip",
   componentId: "f1tsra-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background:", ";border-color:", ";color:", ";.dot-icon i{color:", ";height:auto;}.MuiChip-label{padding:", ";}&.MuiChip-sizeSmall{.dot-icon,.dot-avatar{width:18px;height:18px;}}&.Mui-error{background-color:", ";border-color:", ";.dot-icon i{color:", ";}.MuiChip-label{color:", ";}.MuiChip-deleteIcon{color:", ";}}&.Mui-disabled{background:", ";border-color:", " opacity:1;.dot-icon i{color:", ";}.MuiChip-deleteIcon,.MuiChip-label{color:", ";}}&:not(.Mui-error){&:hover{background-color:", ";}.MuiChip-deleteIcon:hover{color:", ";}}.MuiChip-deleteIcon{width:18px;height:18px;}}"], rootClassName$I, theme.palette.figma.neutral.normal, theme.palette.figma.border.darker, theme.palette.figma.typography.black, theme.palette.figma.icon.black, theme.spacing(0, 1.5), theme.palette.figma.overlay.alerts.error.background, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.overlay.alerts.custom.icon, theme.palette.figma.overlay.alerts.text.black, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.disabled.normal, theme.palette.figma.border.default, theme.palette.figma.icon.disabled, theme.palette.figma.typography.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.icon.black));
+}) => css(["&.", "{background:", ";border-color:", ";color:", ";.dot-icon i{color:", ";height:auto;}.MuiChip-label{padding:", ";}&.MuiChip-sizeSmall{.dot-icon,.dot-avatar{width:18px;height:18px;}}&.Mui-error{background-color:", ";border-color:", ";.dot-icon i{color:", ";}.MuiChip-label{color:", ";}.MuiChip-deleteIcon{color:", ";}}&.Mui-disabled{background:", ";border-color:", " opacity:1;.dot-icon i{color:", ";}.MuiChip-deleteIcon,.MuiChip-label{color:", ";}}&:not(.Mui-error){&:hover{background-color:", ";}.MuiChip-deleteIcon:hover{color:", ";}}.MuiChip-deleteIcon{width:18px;height:18px;}}"], rootClassName$J, theme.palette.figma.neutral.normal, theme.palette.figma.border.darker, theme.palette.figma.typography.black, theme.palette.figma.icon.black, theme.spacing(0, 1.5), theme.palette.figma.overlay.alerts.error.background, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.overlay.alerts.custom.icon, theme.palette.figma.overlay.alerts.text.black, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.disabled.normal, theme.palette.figma.border.default, theme.palette.figma.icon.disabled, theme.palette.figma.typography.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.icon.black));
 
 const DEFAULT_CHARACTERS_LIMIT = 32;
 const DotChip = ({
@@ -4653,7 +4727,7 @@ const DotChip = ({
   startIcon
 }) => {
   const errorClass = _error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$J, className, errorClass);
   const getChipLabel = () => {
     if (_charactersLimit <= 0 || children.length < _charactersLimit) return children;
     const label = `${children.substring(0, _charactersLimit)}...`;
@@ -4799,8 +4873,8 @@ const DotAutoComplete = ({
   const popperOpen = !_readOnly && (open || isOpened);
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !_error && _warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(rootClassName$J, _size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$14, _readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, _size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$15, _readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !_dense && inputMediumClassName);
   let highlightedOption = null;
   let textFieldInput;
@@ -4845,7 +4919,7 @@ const DotAutoComplete = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const DotPopper = props => {
     if (!isActionItemDefined) return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$Y,
+      className: rootClassName$Z,
       disablePortal: _disablePortal,
       "$maxHeight": maxHeight
     }));
@@ -4867,7 +4941,7 @@ const DotAutoComplete = ({
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
     return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$Y,
+      className: rootClassName$Z,
       disablePortal: _disablePortal,
       "$maxHeight": maxHeight,
       children: jsxs(Paper, Object.assign({}, paperProps, {
@@ -5074,11 +5148,11 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$H = 'dot-avatar-group';
+const rootClassName$I = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup).withConfig({
   displayName: "AvatarGroupstyles__StyledAvatarGroup",
   componentId: "sc-25by6z-0"
-})(["", ""], () => css(["&.", "{justify-content:flex-end;.MuiAvatar-root{border:none;}}}"], rootClassName$H));
+})(["", ""], () => css(["&.", "{justify-content:flex-end;.MuiAvatar-root{border:none;}}}"], rootClassName$I));
 
 const DotAvatarGroup = ({
   ariaLabel,
@@ -5088,7 +5162,7 @@ const DotAvatarGroup = ({
   max: _max = 3,
   spacing: _spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -5103,20 +5177,20 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$G = 'dot-breadcrumbs';
+const rootClassName$H = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div.withConfig({
   displayName: "Breadcrumbsstyles__StyledBreadcrumbsWrapper",
   componentId: "sc-7cg374-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{overflow:hidden;.dot-breadcrumbs-menu{.MuiMenuItem-root{padding:0;}a.breadcrumb{width:100%;padding:", ";}}}"], rootClassName$G, theme.spacing(0.5, 2)));
+}) => css(["&.", "{overflow:hidden;.dot-breadcrumbs-menu{.MuiMenuItem-root{padding:0;}a.breadcrumb{width:100%;padding:", ";}}}"], rootClassName$H, theme.spacing(0.5, 2)));
 const StyledBreadcrumbs = styled(Breadcrumbs).withConfig({
   displayName: "Breadcrumbsstyles__StyledBreadcrumbs",
   componentId: "sc-7cg374-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$G, theme.palette.grey[700], theme.spacing(0.5, 2), theme.palette.grey[700]));
+}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$H, theme.palette.figma.icon.black, theme.spacing(0.5, 2), theme.palette.figma.typography.black));
 
 const compareWidth = (parentEl, childEl) => {
   return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
@@ -5400,7 +5474,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$G,
+        root: rootClassName$H,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -5431,13 +5505,15 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$F = 'dot-button-toggle';
+const rootClassName$G = 'dot-button-toggle';
+// TODO: need to update ripple color
+// https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
   displayName: "ButtonTogglestyles__StyledToggleButtonGroup",
   componentId: "sc-1oh4ljv-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall){height:", ";.dot-icon{width:", ";}}.dot-icon{color:", ";display:flex;+ p{margin-left:", ";}i{height:auto;}}.dot-typography{margin-bottom:0;}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;}.dot-tooltip{&:first-child .MuiToggleButtonGroup-groupedHorizontal{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}&:last-child .MuiToggleButtonGroup-groupedHorizontal{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}&:not(:first-child) .MuiToggleButtonGroup-groupedHorizontal{margin-left:-1px;}}& > .MuiToggleButtonGroup-groupedHorizontal{:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}&.Mui-selected{&.MuiToggleButton-standard{background:", ";}.dot-typography{color:inherit;}}}"], rootClassName$F, theme.spacing(5), theme.spacing(2), theme.palette.layer.n700, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200], selectedGray));
+}) => css(["&.", "{button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall){height:", ";.dot-icon{width:", ";}}.dot-icon{color:", ";display:flex;+ p{margin-left:", ";}i{height:auto;}}.dot-typography{margin-bottom:0;}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;}.dot-tooltip{&:first-child .MuiToggleButtonGroup-groupedHorizontal{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}&:last-child .MuiToggleButtonGroup-groupedHorizontal{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}&:not(:first-child) .MuiToggleButtonGroup-groupedHorizontal{margin-left:-1px;}}& > .MuiToggleButtonGroup-groupedHorizontal{:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled{background:", ";.dot-typography{color:", ";}.dot-icon{color:", ";}}&.Mui-selected{&.MuiToggleButton-standard{background:", ";}.dot-icon,.dot-typography{color:", ";}}}"], rootClassName$G, theme.spacing(5), theme.spacing(2), theme.palette.figma.icon.black, theme.spacing(1), theme.palette.figma.typography.black, theme.palette.figma.border.defaultButton, theme.palette.figma.disabled.normal, theme.palette.figma.typography.gray, theme.palette.figma.icon.disabled, theme.palette.figma.toggleTabs.bckg, theme.palette.figma.toggleTabs.text));
 
 const DotButtonToggle = ({
   ariaLabel,
@@ -5453,7 +5529,7 @@ const DotButtonToggle = ({
   size: _size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     className: optionClassName,
@@ -5523,14 +5599,22 @@ const TooltipToggleButton = /*#__PURE__*/forwardRef((_a, ref) => {
   }));
 });
 
+const rootClassName$F = 'dot-card';
+const StyledCard = styled(Card).withConfig({
+  displayName: "Cardstyles__StyledCard",
+  componentId: "oq44zg-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{background-color:", ";}"], rootClassName$F, theme.palette.figma.background.level1.white));
+
 const DotCard = ({
   ariaLabel,
   children,
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass('dot-card', className);
-  return jsx(Card, {
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
       root: rootClasses
@@ -5628,7 +5712,7 @@ const StyledCheckbox = styled(Checkbox).withConfig({
   componentId: "sc-1ubsn6i-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding:", ";&.MuiCheckbox-indeterminate{color:rgba(0,0,0,0.6);}}"], rootClassName$C, theme.spacing(1)));
+}) => css(["&.", "{padding:", ";&.MuiCheckbox-indeterminate{color:", ";}&.Mui-disabled svg{color:", ";}}"], rootClassName$C, theme.spacing(1), theme.palette.figma.neutral.darkGray, theme.palette.figma.border.default));
 
 function DotCheckbox({
   ariaLabel,
@@ -5703,7 +5787,7 @@ const StyledCheckboxGroup = styled.div.withConfig({
   componentId: "bhb21v-0"
 })(["", ""], ({
   theme
-}) => css(["{&.", "{.", "{width:100%;}.MuiFormLabel-root{display:inline;width:100%;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;font-weight:", ";&:not(.Mui-error){color:", ";}}.", "{list-style:none;margin-top:0;padding-left:", ";.", "{margin:0;}}}"], wrapperClassName$1, rootClassName$A, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.typography.body2.fontWeight, theme.palette.grey[400], checkboxListClassName, theme.spacing(2.5), rootClassName$D));
+}) => css(["{&.", "{.", "{width:100%;}.MuiFormLabel-root{display:inline;width:100%;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;font-weight:", ";&:not(.Mui-error){color:", ";}}.", "{list-style:none;margin-top:0;padding-left:", ";.", "{margin:0;}}}"], wrapperClassName$1, rootClassName$A, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.typography.body2.fontWeight, theme.palette.figma.typography.gray, checkboxListClassName, theme.spacing(2.5), rootClassName$D));
 
 const rootClassName$z = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup).withConfig({
@@ -5712,7 +5796,7 @@ const StyledFormGroup = styled(FormGroup).withConfig({
 })(["", ""], ({
   theme,
   row
-}) => css(["&.", "{& > *{margin:", ";}}"], rootClassName$z, row ? `${theme.spacing(0.5)}` : 0));
+}) => css(["&.", " > *{margin:", ";}"], rootClassName$z, row ? `${theme.spacing(0.5)}` : 0));
 
 function DotFormGroup({
   ariaLabel,
@@ -5851,7 +5935,7 @@ const StyledDialog = styled(Dialog).withConfig({
   componentId: "sc-1tkr4ex-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.MuiDialog-paper{min-width:280px;max-height:80vh;max-width:80vw;}.MuiDialogTitle-root,.dot-dialog-title{align-items:center;display:flex;flex-wrap:nowrap;padding:", ";h2{flex-grow:1;}.dot-icon-button{margin-left:", ";}}.dot-dialog-content{padding:", ";overflow-y:auto;}.dot-dialog-actions{padding:", ";.cancel-button{color:inherit;}}}"], rootClassName$y, theme.spacing(2, 3), theme.spacing(1), theme.spacing(1, 3), theme.spacing(1, 3, 2, 3)));
+}) => css(["&.", "{.MuiDialog-paper{background:", ";color:", ";max-height:80vh;max-width:80vw;min-width:280px;}.MuiDialogTitle-root,.dot-dialog-title{align-items:center;display:flex;flex-wrap:nowrap;padding:", ";h2{flex-grow:1;}.dot-icon-button{margin-left:", ";}}.dot-dialog-content{padding:", ";overflow-y:auto;}.dot-dialog-actions{padding:", ";.cancel-button{color:inherit;}}}"], rootClassName$y, theme.palette.figma.background.level1.white, theme.palette.figma.typography.black, theme.spacing(2, 3), theme.spacing(1), theme.spacing(1, 3), theme.spacing(1, 3, 2, 3)));
 
 const DotDialog = ({
   ariaLabel,
@@ -6240,7 +6324,7 @@ const StyledRadioGroupWrapper = styled.div.withConfig({
   componentId: "sc-84g3mq-0"
 })(["", ""], ({
   theme
-}) => css(["{&.", "{.MuiFormControl-root{width:100%;}.MuiFormLabel-root{display:inline;width:100%;}}.MuiFormHelperText-root{font-family:", ";font-size:", "px;font-weight:", ";&:not(.Mui-error){color:", ";}}"], wrapperClassName, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.typography.body2.fontWeight, theme.palette.grey[400]));
+}) => css(["{&.", "{.MuiFormControl-root{width:100%;}.MuiFormLabel-root{display:inline;width:100%;}}.MuiFormHelperText-root{font-family:", ";font-size:", "px;font-weight:", ";&:not(.Mui-error){color:", ";}}"], wrapperClassName, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.typography.body2.fontWeight, theme.palette.figma.typography.gray));
 const StyledRadioGroup = styled(RadioGroup).withConfig({
   displayName: "RadioGroupstyles__StyledRadioGroup",
   componentId: "sc-84g3mq-1"
@@ -6254,7 +6338,7 @@ const StyledFormContainer = styled.div.withConfig({
   componentId: "bbovqo-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin:", ";.", ",.", ",.", ",.", "{margin:", ";}.", ",.", "{.", "{margin:0;}}}"], rootClassName$v, theme.spacing(3, 0), rootClassName$B, rootClassName$D, rootClassName$14, rootSelectClassName, theme.spacing(1, 0), rootClassName$A, groupClassName, rootClassName$D));
+}) => css(["&.", "{margin:", ";.", ",.", ",.", ",.", "{margin:", ";}.", ",.", "{.", "{margin:0;}}}"], rootClassName$v, theme.spacing(3, 0), rootClassName$B, rootClassName$D, rootClassName$15, rootSelectClassName, theme.spacing(1, 0), rootClassName$A, groupClassName, rootClassName$D));
 
 const DotForm = ({
   ariaLabel,
@@ -6623,7 +6707,9 @@ const rootClassName$s = 'dot-radio';
 const StyledRadioButton = styled(Radio).withConfig({
   displayName: "RadioButtonstyles__StyledRadioButton",
   componentId: "brp0sc-0"
-})(["", ""], () => css(["{&.", "{padding:8px;}"], rootClassName$s));
+})(["", ""], ({
+  theme
+}) => css(["&.", "{padding:8px;svg{color:", ";}&.Mui-disabled svg{color:", ";}}"], rootClassName$s, theme.palette.figma.primary.normal, theme.palette.figma.icon.disabled));
 
 function DotRadioButton({
   ariaLabel,
@@ -6765,7 +6851,7 @@ const StyledSwitch = styled(Switch).withConfig({
   componentId: "eign2a-0"
 })(["", ""], ({
   theme
-}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";&.Mui-focusVisible .MuiTouchRipple-root{color:", ";}}}"], theme.palette.grey[200], theme.palette.background.default, theme.palette.grey[200]));
+}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";&.Mui-focusVisible .MuiTouchRipple-root{color:", ";}}}"], theme.palette.figma.disabled.normal, theme.palette.figma.neutral.lightGray, theme.palette.figma.primary.normal));
 
 const DotSwitch = ({
   ariaLabel,
@@ -6785,14 +6871,19 @@ const DotSwitch = ({
   const handleChange = event => {
     onChange && onChange(event);
   };
-  // TODO: Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
+  useEffect(() => {
+    if (color) {
+      console.warn('DEPRECATED: `color` prop is deprecated, please remove any usage of it in your application.');
+    }
+  }, []);
+  // Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
   // https://github.com/mui/material-ui/pull/17870
   const switchControl = jsx(StyledSwitch, {
     checked: checked,
     classes: {
       root: rootClasses
     },
-    color: color,
+    color: "primary",
     "data-testid": dataTestId,
     disabled: _disabled,
     id: id,
@@ -7385,7 +7476,7 @@ const StyledInlineEdit = styled.div.withConfig({
 })(["", ""], ({
   theme,
   fullWidth
-}) => css(["&.", "{display:", ";align-items:center;color:", ";min-width:", ";&:not(.", "):focus-visible{border-radius:", ";background-color:", ";cursor:pointer;outline:0;.dot-edit-icon{display:block;}}.", "{display:flex;width:100%;position:relative;.dot-edit-icon{height:100%;position:absolute;right:0;width:40px;background-color:", ";border-radius:", ";display:none;.dot-i{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}&:not(.", "):hover{border-radius:", ";background-color:", ";cursor:pointer;.dot-edit-icon{display:block;}}.dot-view-mode-typography{padding:", ";margin-bottom:0;&.", "{color:", ";}}}.dot-empty-value fieldset{border-color:", ";}.dot-adornment-error{color:", ";}.MuiInputBase-input{height:auto;}.MuiInputBase-root{margin-bottom:", ";}", " .", " .dot-input{padding-left:", ";}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}&:hover{background:", ";}.editing-actions{display:flex;justify-content:flex-end;margin-top:", ";}.dot-icon-btn{background:", ";border:1px solid ", ";color:", ";margin-left:", ";padding:", ";}}}.dot-read-only-adornment{display:none;}.", "{display:flex;align-items:center;margin:", ";.dot-button{padding:", ";margin-top:", ";margin-bottom:", ";}}}"], rootClassName$q, fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), placeholderClassName, theme.palette.grey[200], theme.palette.error[500], theme.palette.error[500], theme.spacing(0), ({
+}) => css(["&.", "{align-items:center;color:", ";display:", ";min-width:", ";&:not(.", "):focus-visible{background:", ";border-radius:", ";cursor:pointer;outline:0;.dot-edit-icon{display:block;}}.", "{display:flex;width:100%;position:relative;.dot-edit-icon{border-radius:", ";display:none;height:100%;position:absolute;right:0;width:40px;.dot-i{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%);}}&:not(.", "):hover{background:", ";border-radius:", ";cursor:pointer;.dot-edit-icon{display:block;}}.dot-view-mode-typography{padding:", ";margin-bottom:0;&.", "{color:", ";}}}.dot-empty-value fieldset{border-color:", ";}.dot-adornment-error{color:", ";}.MuiInputBase-input{height:auto;}.MuiInputBase-root{margin-bottom:", ";}", " .", " .dot-input{padding-left:", ";}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}.editing-actions{display:flex;justify-content:flex-end;margin-top:", ";}}}.dot-read-only-adornment{display:none;}.", "{align-items:center;display:flex;margin:", ";.dot-button{margin-bottom:", ";margin-top:", ";padding:", ";}}}"], rootClassName$q, theme.palette.figma.typography.black, fullWidth ? 'flex' : 'inline-flex', theme.spacing(32), readOnlyClassName, theme.palette.figma.neutral.elevated, theme.spacing(0.5), viewModeClassName, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.palette.figma.neutral.elevated, theme.spacing(0.5), theme.spacing(1.3125, 1), placeholderClassName, theme.palette.figma.typography.gray, theme.palette.figma.destructive.normal, theme.palette.figma.destructive.normal, theme.spacing(0), ({
   typography
 }) => typography && `
          .MuiInputBase-root {
@@ -7395,7 +7486,7 @@ const StyledInlineEdit = styled.div.withConfig({
             letter-spacing: ${theme.typography[typography].letterSpacing || 'normal'};
             text-transform: ${theme.typography[typography].textTransform || 'none'};
          }
-      `, editTextFieldClassName, theme.spacing(1), theme.palette.layer.n400, theme.palette.error[500], theme.palette.grey[50], theme.spacing(0.5), theme.palette.grey[0], theme.palette.grey[300], theme.palette.grey[700], theme.spacing(1), theme.spacing(0.25), editActionsClassName, theme.spacing(0, 0, 0, 0.5), theme.spacing(0.75), theme.spacing(0), theme.spacing(0)));
+      `, editTextFieldClassName, theme.spacing(1), theme.palette.figma.typography.gray, theme.palette.figma.destructive.normal, theme.spacing(0.5), editActionsClassName, theme.spacing(0, 0, 0, 0.5), theme.spacing(0), theme.spacing(0), theme.spacing(0.75)));
 
 const getCounterAdornment = (currentLength, maxLength, dataTestId) => {
   if (currentLength === undefined || typeof currentLength !== 'number' || !maxLength || typeof maxLength !== 'number') return;
@@ -7686,7 +7777,7 @@ const StyledNavigationRail = styled.div.withConfig({
 })(["", ""], ({
   theme,
   railItemPosition
-}) => css(["&.", "{background-color:", ";border-left:1px solid ", ";display:flex;flex-direction:column;justify-content:", ";padding:", ";width:72px;.rail-item-button{border-radius:0;display:flex;flex-basis:72px;flex-direction:column;margin:0;padding:0;width:100%;white-space:normal;.dot-icon{color:", ";}&.selected{background-color:", ";}&:focus-visible{background-color:", ";}.rail-item-text{word-break:break-word;padding:", ";}}}"], rootClassName$p, theme.palette.layer.n50, theme.palette.layer.n100, railItemPosition, theme.spacing(1, 0, 0), theme.palette.grey[700], theme.palette.layer.n0, theme.palette.layer.n100, theme.spacing(0, 0.5)));
+}) => css(["&.", "{background:", ";border-left:1px solid ", ";display:flex;flex-direction:column;justify-content:", ";padding:", ";width:72px;.rail-item-button{border-radius:0;display:flex;flex-basis:72px;flex-direction:column;margin:0;padding:0;width:100%;white-space:normal;.dot-icon{color:", ";}&.selected,&:focus-visible{background-color:", ";}.rail-item-text{word-break:break-word;padding:", ";}}}"], rootClassName$p, theme.palette.figma.neutral.elevated, theme.palette.figma.border.default, railItemPosition, theme.spacing(1, 0, 0), theme.palette.figma.icon.black, theme.palette.figma.neutral.normal, theme.spacing(0, 0.5)));
 
 const MAX_ALLOWED_ITEMS = 7;
 const DotNavigationRail = ({
@@ -7810,7 +7901,7 @@ const StyledSkeleton = styled(Skeleton).withConfig({
   componentId: "sc-17ayzv5-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";}"], rootClassName$n, theme.palette.figma.neutral.active));
+}) => css(["&.", "{background-color:", ";}"], rootClassName$n, theme.palette.figma.border.darker));
 
 const DotSkeleton = ({
   ariaLabel,
@@ -7842,7 +7933,7 @@ const StyledSnackbar = styled(Snackbar).withConfig({
   componentId: "sc-1huxoy3-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.MuiSvgIcon-root{color:", ";}.MuiAlert-icon{padding:11px 0px;}.MuiAlert-message{padding:13px 0px;}&.MuiSnackbar-anchorOriginTopRight{top:0px;z-index:", ";}.MuiAlert-root{&.MuiAlert-standardInfo{background-color:", ";}&.MuiAlert-standardWarning{color:", ";.MuiSvgIcon-root{color:", ";}}max-width:500px;min-width:344px;color:", ";z-index:", ";position:relative;margin-top:108px;background-color:", ";@media (min-width:720px){.MuiAlert-root{top:112px;position:relative;}}}"], rootClassName$m, theme.palette.layer.n0, levelFourth, theme.palette.primary[500], theme.palette.grey[900], theme.palette.grey[900], theme.palette.layer.n0, levelFourth, props => theme.palette[props.severity].main));
+}) => css(["&.", "{.dot-icon-btn .dot-icon{color:", ";}.dot-icon-btn:hover{background:", ";}.MuiAlert-icon{color:", ";padding:11px 0px;}.MuiAlert-message{padding:13px 0px;}&.MuiSnackbar-anchorOriginTopRight{top:0px;z-index:", ";}.MuiAlert-root{color:", ";position:relative;margin-top:108px;max-width:500px;min-width:344px;z-index:", ";@media (min-width:720px){.MuiAlert-root{top:112px;position:relative;}}&.MuiAlert-standardSuccess{background:", ";}&.MuiAlert-standardInfo{background:", ";}&.MuiAlert-standardWarning{background:", ";}&.MuiAlert-standardError{background:", ";}}"], rootClassName$m, theme.palette.figma.icon.white, n900_20, theme.palette.figma.icon.white, levelFourth, theme.palette.figma.typography.white, levelFourth, theme.palette.figma.success.normal, theme.palette.figma.inProgress.normal, theme.palette.figma.warning.normal, theme.palette.figma.destructive.normal));
 
 function addAutoHideDuration(severity) {
   return severity === 'error' ? null : 10000;
@@ -7987,7 +8078,7 @@ const StyledSplitButtonGroup = styled(ButtonGroup).withConfig({
   componentId: "ild520-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.outlined,&.text{.expand-button{border-left:none;.dot-icon{color:", ";}}}&.outlined .dot-button{border-color:", ";}&.destructive .expand-button{border-left-color:", ";}&.disabled .dot-button{background:", ";border:1px solid ", ";color:", ";}.dot-button{box-shadow:none;margin:0;padding:", ";}.label-button{border-top-right-radius:0;border-bottom-right-radius:0;}.expand-button{border-left:1px solid ", ";border-top-left-radius:0;border-bottom-left-radius:0;&.Mui-disabled{border-left:0;.dot-icon{color:", ";}}.MuiButton-label,.dot-icon{width:14px;height:14px;}}}"], rootClassName$k, theme.palette.figma.icon.black, theme.palette.figma.border.defaultButton, theme.palette.figma.destructive.elevated, theme.palette.figma.disabled.normal, theme.palette.figma.border.defaultButton, theme.palette.figma.typography.gray, theme.spacing(0.75, 1.5), theme.palette.figma.primary.elevated, theme.palette.figma.icon.disabled));
+}) => css(["&.", "{&.outlined,&.text{.expand-button{border-left:none;.dot-icon{color:", ";}}}&.disabled .dot-button{background:", ";border:1px solid ", ";color:", ";}.dot-button{box-shadow:none;margin:0;padding:", ";}.label-button{border-top-right-radius:0;border-bottom-right-radius:0;}.expand-button{border-left:1px solid ", ";border-top-left-radius:0;border-bottom-left-radius:0;&.Mui-disabled{border-left:0;.dot-icon{color:", ";}}.MuiButton-label,.dot-icon{width:14px;height:14px;}}}"], rootClassName$k, theme.palette.figma.icon.black, theme.palette.figma.disabled.normal, theme.palette.figma.border.defaultButton, theme.palette.figma.typography.gray, theme.spacing(0.75, 1.5), theme.palette.figma.border.defaultButton, theme.palette.figma.icon.disabled));
 const StyledMenu$2 = styled(DotMenu).withConfig({
   displayName: "SplitButtonstyles__StyledMenu",
   componentId: "ild520-1"
@@ -8087,14 +8178,14 @@ const StyledStepper = styled.div.withConfig({
   componentId: "sc-1qka0yq-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;}&.right{flex-direction:row-reverse;}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.inactive .step-label.dot-typography{color:", ";}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$j, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.layer.n400, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
+}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;}&.right{flex-direction:row-reverse;}.MuiStepConnector-root .MuiStepConnector-line{border-left:1px solid ", ";}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.MuiStepContent-root{border-left:1px solid ", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.inactive .step-label.dot-typography{color:", ";}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$j, theme.palette.figma.border.default, stepListClassName, theme.spacing(3), theme.palette.figma.primary.rippleLight, theme.palette.figma.primary.light, theme.palette.figma.border.default, theme.spacing(1), theme.palette.figma.icon.disabled, theme.palette.figma.neutral.active, theme.palette.figma.typography.disabled, theme.palette.figma.typography.gray, theme.palette.figma.overlay.alerts.success.icon, theme.palette.figma.overlay.alerts.success.background, theme.palette.figma.border.darker, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.overlay.alerts.error.background, theme.palette.figma.primary.active, theme.palette.figma.typography.black, theme.palette.figma.primary.active, theme.palette.figma.typography.white, theme.palette.figma.primary.normal, theme.palette.figma.typography.black, theme.palette.figma.typography.gray, theme.palette.figma.destructive.normal, theme.palette.figma.background.level0.bckgWhite, theme.palette.figma.destructive.normal, theme.palette.figma.destructive.normal, theme.palette.figma.primary.light, theme.palette.figma.typography.disabled, contentClassName, theme.spacing(3, 3, 2, 3)));
 const ScrollbarContainer = styled.div.withConfig({
   displayName: "Stepperstyles__ScrollbarContainer",
   componentId: "sc-1qka0yq-1"
 })(["", ""], ({
   theme,
   offset
-}) => css(["height:", ";overflow-y:auto;&.left{border-right:1px solid ", ";}&.right{border-left:1px solid ", ";}&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}"], `calc(100vh - ${offset}px)`, theme.palette.layer.n200, theme.palette.layer.n200));
+}) => css(["height:", ";overflow-y:auto;&.left{border-right:1px solid ", ";}&.right{border-left:1px solid ", ";}&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}"], `calc(100vh - ${offset}px)`, theme.palette.figma.border.default, theme.palette.figma.border.default));
 const StepContentWrapper = styled.div.withConfig({
   displayName: "Stepperstyles__StepContentWrapper",
   componentId: "sc-1qka0yq-2"
@@ -8111,7 +8202,7 @@ const StepActionsContainer = styled.div.withConfig({
 })(["", ""], ({
   theme,
   displayCancelButton
-}) => css(["padding:", ";position:sticky;position:-webkit-sticky;bottom:0;background-color:", ";z-index:2;&.with-top-border{border-top:1px solid ", ";}.actions{display:flex;flex-direction:row;justify-content:", ";&.center-actions{justify-content:center;}.cancel-stepper{justify-self:flex-start;}.navigation-buttons{justify-self:flex-end;}}"], theme.spacing(2), theme.palette.layer['n0'], theme.palette.layer['n100'], displayCancelButton ? 'space-between' : 'flex-end'));
+}) => css(["padding:", ";position:sticky;position:-webkit-sticky;bottom:0;z-index:2;&.with-top-border{border-top:1px solid ", ";}.actions{display:flex;flex-direction:row;justify-content:", ";&.center-actions{justify-content:center;}.cancel-stepper{justify-self:flex-start;}.navigation-buttons{justify-self:flex-end;}}"], theme.spacing(2), theme.palette.figma.border.default, displayCancelButton ? 'space-between' : 'flex-end'));
 
 const defaultCellProps = {
   center: false,
@@ -8365,7 +8456,7 @@ const StyledTablePagination = styled.div.withConfig({
 })(["", ""], ({
   theme,
   typography
-}) => css([".", "{border-top:1px solid ", ";.dot-caption,.MuiInputBase-root{font-family:", ";font-size:", "px;letter-spacing:", ";line-height:", ";}.dot-caption{margin:0;}.dot-menu,.MuiInputBase-root{margin-bottom:0;}}"], rootClassName$i, theme.palette.grey[200], theme.typography[typography].fontFamily, theme.typography[typography].fontSize, theme.typography[typography].letterSpacing, theme.typography[typography].lineHeight));
+}) => css([".", "{border-top:1px solid ", ";.dot-caption,.MuiInputBase-root{font-family:", ";font-size:", "px;letter-spacing:", ";line-height:", ";}.dot-caption{margin:0;}.dot-menu,.MuiInputBase-root{margin-bottom:0;}}"], rootClassName$i, theme.palette.figma.border.default, theme.typography[typography].fontFamily, theme.typography[typography].fontSize, theme.typography[typography].letterSpacing, theme.typography[typography].lineHeight));
 
 const ROWS_PER_PAGE_OPTIONS = [10, 25, 50, 100, 150, 200];
 /** This component wraps the TablePagination component from @material-ui. */
@@ -8423,13 +8514,13 @@ const StyledPaper = styled(Paper).withConfig({
   componentId: "s95z6y-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{overflow:hidden;border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$h, theme.palette.layer.n100));
+}) => css(["&.", "{background:", ";border:1px solid ", ";overflow:hidden;&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$h, theme.palette.figma.background.level0.componentsBackground, theme.palette.figma.border.default));
 const StyledTableContainer = styled(TableContainer).withConfig({
   displayName: "Tablestyles__StyledTableContainer",
   componentId: "s95z6y-1"
 })(["", ""], ({
   theme
-}) => css(["&.dot-table-container{border-radius:4px;align-items:stretch;flex-direction:column;justify-content:center;table{width:100%;td,th{.dot-cell-typography{margin:0;}}.Mui-selected:not(:hover){background-color:", ";}.MuiTableRow-head{height:56px;}.MuiTableCell-root{border-bottom:1px solid ", ";}.MuiTableRow-root{height:52px;}}}"], theme.palette.grey[200], theme.palette.layer.n100));
+}) => css(["&.dot-table-container{border-radius:4px;align-items:stretch;flex-direction:column;justify-content:center;table{width:100%;td,th{.dot-cell-typography{margin:0;}}.Mui-selected:not(:hover){background-color:", ";}.MuiTableRow-head{height:56px;}.MuiTableCell-root{border-bottom:1px solid ", ";}.MuiTableRow-root{height:52px;}}}"], theme.palette.figma.overlay.table.highlights, theme.palette.figma.border.default));
 const StyledMenu$1 = styled(DotMenu).withConfig({
   displayName: "Tablestyles__StyledMenu",
   componentId: "s95z6y-2"
@@ -8523,7 +8614,9 @@ const rootClassName$f = 'dot-td';
 const StyledTableCell = styled(TableCell).withConfig({
   displayName: "TableCellstyles__StyledTableCell",
   componentId: "e84k25-0"
-})(["", ""], () => css(["&.", "{padding-top:0;padding-bottom:0;&.actionItems,&.noWrap p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}&.actionItems{max-width:0;text-align:right;text-overflow:clip;}&.noWrap p{max-width:calc(100% - 1px);}.action-cell-wrapper{width:100%;}}"], rootClassName$f));
+})(["", ""], ({
+  theme
+}) => css(["&.", "{padding-top:0;padding-bottom:0;&.actionItems,&.noWrap p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}&.actionItems{max-width:0;text-align:right;text-overflow:clip;}&.noWrap p{max-width:calc(100% - 1px);}.action-cell-wrapper{width:100%;}.cell-avatar-with-text{display:flex;align-items:center;.cell-avatar{margin-right:", ";}.cell-text{width:100%;}}}"], rootClassName$f, theme.spacing(1)));
 
 /**
  * A wrapper component around the TableCell component from @material-ui.
@@ -8597,6 +8690,36 @@ const DotBodyCell = ({
         })
       });
     }
+    if (value === null || value === void 0 ? void 0 : value.mainText) {
+      const {
+        avatarIcon,
+        avatarImageSrc,
+        mainText,
+        secondaryText
+      } = value;
+      return jsxs("div", {
+        className: "cell-avatar-with-text",
+        children: [(avatarImageSrc || avatarIcon) && jsx(DotAvatar, {
+          alt: mainText,
+          className: "cell-avatar",
+          "data-testid": "cell-avatar",
+          iconId: avatarIcon,
+          imageSrc: avatarImageSrc,
+          size: "small",
+          type: avatarImageSrc ? 'image' : 'icon'
+        }), jsxs("div", {
+          className: "cell-text",
+          children: [jsx(DotTypography, {
+            variant: "body1",
+            children: mainText
+          }), secondaryText && jsx(DotTypography, {
+            "data-testid": "cell-secondary-text",
+            variant: "body2",
+            children: secondaryText
+          })]
+        })]
+      });
+    }
     return getFormattedTableCellValue(value, typography);
   };
   return jsx(StyledTableCell, {
@@ -8633,7 +8756,7 @@ const StyledTableRowStyles = styled(TableRow).withConfig({
   componentId: "a4fx2l-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.selected{background-color:", ";}&:hover{background-color:", ";}}"], rootClassName$e, theme.palette.primary[50], theme.palette.grey[50]));
+}) => css(["&.", "{&.selected{background:", ";.dot-td-checkbox .dot-checkbox,.dot-td .dot-typography{color:", ";}&:hover{background:", ";.dot-td-checkbox .dot-checkbox,.dot-td .dot-typography{color:", ";}}}&:hover{background:", ";}}"], rootClassName$e, theme.palette.figma.overlay.table.highlights, theme.palette.figma.overlay.table.text, theme.palette.figma.primary.rippleLight, theme.palette.figma.typography.black, theme.palette.figma.overlay.table.hoverRow));
 
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
@@ -8644,7 +8767,7 @@ const StyledTableHeaderCheckboxCell = styled(TableCell).withConfig({
   componentId: "ymqg8x-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.dot-form-control-label{margin:0;}width:", ";padding:", ";}"], rootClassName$d, theme.spacing(5), theme.spacing(0, 1)));
+}) => css(["&.", "{background:", ";padding:", ";width:", ";.dot-form-control-label{margin:0;}}"], rootClassName$d, theme.palette.figma.background.level0.componentsBackground, theme.spacing(0, 1), theme.spacing(5)));
 
 const DotHeaderCheckboxCell = ({
   ariaLabel,
@@ -8690,7 +8813,7 @@ const StyledTableHeaderCell = styled(TableCell).withConfig({
   componentId: "nko9j-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}> span.MuiTableSortLabel-root.Mui-focusVisible{.dot-cell-typography{color:", ";text-decoration:underline;}}.dot-cell-typography{font-family:", ";}}"], rootClassName$c, theme.palette.primary.main, theme.typography.h4.fontFamily));
+}) => css(["&.", "{background:", ";&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}> span.MuiTableSortLabel-root.Mui-focusVisible{.dot-cell-typography{color:", ";text-decoration:underline;}}.dot-cell-typography{font-family:", ";}}"], rootClassName$c, theme.palette.figma.background.level0.componentsBackground, theme.palette.figma.overlay.table.text, theme.typography.h4.fontFamily));
 
 /**
  * A wrapper component around the TableCell component from @material-ui. This component should only
@@ -8793,8 +8916,10 @@ const DotHeaderRow = ({
       classes: {
         root: 'dot-tr'
       },
-      children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsx(TableCell, {
-        "aria-hidden": "true"
+      children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsx(DotHeaderCell, {
+        "aria-hidden": "true",
+        typography: typography,
+        uid: CreateUUID()
       }), columns.map(cell => {
         return jsx(DotHeaderCell, {
           align: cell.align,
@@ -8859,7 +8984,7 @@ const StyledCollapsibleTableWrapper = styled.div.withConfig({
   componentId: "sc-7uzf9c-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;}}"], CollapsibleTableClassName, theme.palette.layer.n100));
+}) => css(["&.", "{margin:", ";.dot-table-container{th.MuiTableCell-root:first-child,td.MuiTableCell-root:first-child{padding-left:", ";}}&.loading{opacity:0.4;pointer-events:none;}}"], CollapsibleTableClassName, theme.spacing(-2), theme.spacing(9)));
 
 const DotCollapsibleTable = ({
   collapsibleTableBody,
@@ -8942,7 +9067,7 @@ const StyledTableBodyExpandCollapseCell = styled(TableCell).withConfig({
   componentId: "jtyppp-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.dot-form-control-label{margin:0;}width:", ";padding:", ";}"], ExpandCollapseCellClassName, theme.spacing(5), theme.spacing(0, 1)));
+}) => css(["&.", "{width:", ";padding:", ";.dot-form-control-label{margin:0;}}"], ExpandCollapseCellClassName, theme.spacing(5), theme.spacing(0, 1)));
 
 const ExpandCollapseCell = ({
   ariaLabel,
@@ -8982,7 +9107,7 @@ const StyledTableBodyCheckboxCell = styled(TableCell).withConfig({
   componentId: "ebk3sz-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.dot-form-control-label{margin:0;}width:", ";padding:", ";}"], rootClassName$b, theme.spacing(5), theme.spacing(0, 1)));
+}) => css(["&.", "{padding:", ";width:", ";.dot-form-control-label{margin:0;}}"], rootClassName$b, theme.spacing(0, 1), theme.spacing(5)));
 
 const DotBodyCheckboxCell = ({
   ariaLabel,
@@ -9182,7 +9307,7 @@ const StyledTableSelectionToolbar = styled(DotActionToolbar).withConfig({
   componentId: "qpx3y9-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{display:flex;align-items:center;justify-content:space-between;background-color:", ";.dot-selected-rows-container{display:flex;align-items:center;.dot-button{padding:", ";}}.dot-selected-rows-heading{font-weight:bold;}.dot-selected-rows-divider{padding:", ";}}"], rootClassName$a, theme.palette.primary[50], theme.spacing(0.25, 0.25, 0, 0.5), theme.spacing(0.25, 0, 0, 1)));
+}) => css(["&.", "{display:flex;align-items:center;justify-content:space-between;background:", ";.dot-selected-rows-container{display:flex;align-items:center;.dot-typography{color:", ";}.dot-selected-rows-divider{padding:", ";}.dot-link{color:", ";padding:", ";&:hover{color:", ";}}}.dot-selected-rows-heading{color:", ";font-weight:bold;}.dot-bulk-actions .dot-icon-btn{&:hover{background:", ";.dot-icon{color:", ";}}.dot-icon{color:", ";}}}"], rootClassName$a, theme.palette.figma.overlay.table.highlights, theme.palette.figma.overlay.table.text, theme.spacing(0.25, 0, 0, 1), theme.palette.figma.overlay.table.text, theme.spacing(0.25, 0.25, 0, 0.5), theme.palette.figma.typography.white, theme.palette.figma.overlay.table.text, theme.palette.figma.primary.rippleLight, theme.palette.figma.typography.black, theme.palette.figma.overlay.table.text));
 
 const DotTableSelectionToolbar = ({
   ariaLabel,
@@ -9204,12 +9329,9 @@ const DotTableSelectionToolbar = ({
         className: "dot-selected-rows-heading",
         variant: "h3",
         children: [selectedRowsNumber, " selected"]
-      }), onClearAll && jsxs(Fragment, {
-        children: [jsx(DotTypography, {
-          className: "dot-selected-rows-divider",
-          children: "|"
-        }), jsx(DotButton, {
-          type: "text",
+      }), onClearAll && jsxs(DotTypography, {
+        className: "dot-selected-rows-divider",
+        children: ["| ", jsx(DotLink, {
           onClick: onClearAll,
           children: "Clear all"
         })]
@@ -9222,10 +9344,18 @@ const DotTableSelectionToolbar = ({
 };
 
 const sortComparator = (a, b, orderBy) => {
-  if (b.rowData[orderBy] < a.rowData[orderBy]) {
+  var _a, _b;
+  let valueA = a.rowData[orderBy];
+  let valueB = b.rowData[orderBy];
+  if (((_a = a.rowData[orderBy]) === null || _a === void 0 ? void 0 : _a.mainText) && ((_b = b.rowData[orderBy]) === null || _b === void 0 ? void 0 : _b.mainText)) {
+    // use mainText value for sort in case when data for the table cell is of type CustomCellDataWrapper
+    valueA = a.rowData[orderBy].mainText;
+    valueB = b.rowData[orderBy].mainText;
+  }
+  if (valueB < valueA) {
     return -1;
   }
-  if (b.rowData[orderBy] > a.rowData[orderBy]) {
+  if (valueB > valueA) {
     return 1;
   }
   return 0;
@@ -9586,12 +9716,12 @@ const StyledTabs = styled(Tabs).withConfig({
   componentId: "sc-1pmrz8k-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.MuiTabs-root{width:100%;}.dot-tab-label-container{display:flex;.dot-tab-label{padding-top:", ";}}.MuiTab-root{box-shadow:inset 0px -1px 0px ", ";max-width:360px;min-width:0;}.MuiIcon-root{display:inline;padding-right:", ";}}"], rootClassName$8, theme.spacing(0.5), theme.palette.layer.n100, theme.spacing(0.5)));
+}) => css(["&.", "{&.MuiTabs-root{width:100%;}.dot-tab-label-container{display:flex;.dot-tab-label{padding-top:", ";}}.MuiTab-root{box-shadow:inset 0px -1px 0px ", ";color:", ";max-width:360px;min-width:0;&.Mui-disabled{color:", ";.dot-icon{color:", ";}}}.MuiTabs-indicator{background:", ";height:3px;}.dot-icon{color:", ";display:inline;padding-right:", ";}}"], rootClassName$8, theme.spacing(0.5), theme.palette.figma.border.default, theme.palette.figma.primary.elevated, theme.palette.figma.typography.disabled, theme.palette.figma.typography.disabled, theme.palette.figma.border.inputActive, theme.palette.figma.primary.elevated, theme.spacing(0.5)));
 
 const DotTabs = ({
   centered: _centered = false,
   className,
-  color: _color = 'primary',
+  color,
   'data-testid': dataTestId,
   initialValue: _initialValue = 0,
   onChange,
@@ -9601,6 +9731,11 @@ const DotTabs = ({
 }) => {
   const [value, setValue] = useState(_initialValue);
   const rootClasses = useStylesWithRootClass(rootClassName$8, className);
+  useEffect(() => {
+    if (color) {
+      console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
+    }
+  }, []);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleChange = (_event, val) => {
     setValue(val);
@@ -9637,10 +9772,10 @@ const DotTabs = ({
       root: rootClasses
     },
     "data-testid": dataTestId,
-    indicatorColor: _color,
+    indicatorColor: "primary",
     onChange: handleChange,
     scrollButtons: scrollButtons,
-    textColor: _color,
+    textColor: "primary",
     value: value,
     variant: _variant,
     children: tabArray
@@ -9655,13 +9790,13 @@ const StyledFileUploadContainer = styled.div.withConfig({
   componentId: "sc-1q8bcxy-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.dot-max-files-message.dot-max-files-reached{color:", ";}}"], containerClassName$2, theme.palette.error[500]));
+}) => css(["&.", "{.dot-max-files-message.dot-max-files-reached{color:", ";}.dot-list{padding:0;}}"], containerClassName$2, theme.palette.figma.destructive.normal));
 const StyledFileUpload = styled.div.withConfig({
   displayName: "FileUploadstyles__StyledFileUpload",
   componentId: "sc-1q8bcxy-1"
 })(["", ""], ({
   theme
-}) => css(["&.", ".", "{align-items:center;background:", ";border:2px dashed ", ";border-radius:4px;color:", ";display:flex;flex-direction:column;flex-wrap:wrap;height:240px;justify-content:center;padding:", ";margin-bottom:", ";text-align:center;&.disabled .dot-typography{color:", ";}.dot-icon{color:", ";font-size:100px;i.dot-i{height:100px;}}}"], rootClassName$7, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100));
+}) => css(["&.", ".", "{align-items:center;background:", ";border:2px dashed ", ";border-radius:4px;color:", ";display:flex;flex-direction:column;flex-wrap:wrap;height:240px;justify-content:center;padding:", ";margin-bottom:", ";text-align:center;&.disabled .dot-typography{color:", ";}.dot-icon{color:", ";font-size:100px;i.dot-i{height:100px;}}}"], rootClassName$7, dropZoneClassName, theme.palette.figma.background.level0.bckgGray, theme.palette.figma.border.defaultButton, theme.palette.figma.typography.disabled, theme.spacing(3, 0), theme.spacing(1), theme.palette.figma.icon.disabled, theme.palette.figma.border.default));
 
 const rootClassName$6 = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem).withConfig({
@@ -9669,7 +9804,7 @@ const StyledFileListItem = styled(StyledListItem).withConfig({
   componentId: "sc-6mp1tz-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&:focus-visible{background-color:", ";outline:none;}&.file-success:not(:hover,:focus-visible) .", "-end-icon{i:before{color:", ";}&:focus-visible i:before{color:unset;}}&.file-error:not(:hover,:focus-visible) .", "-end-icon{i:before,.MuiListItemText-secondary{color:", ";}&:focus-visible i:before{color:unset;}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", ";}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}"], rootClassName$6, theme.palette.layer.n100, theme.palette.layer.n50, theme.palette.layer.n100, rootClassName$6, theme.palette.secondary.main, rootClassName$6, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
+}) => css(["&.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&:focus-visible{background-color:", ";outline:none;}&.file-success:not(:hover,:focus-visible) .", "-end-icon{i:before{color:", ";}&:focus-visible i:before{color:unset;}}&.file-error:not(:hover,:focus-visible) .", "-end-icon{i:before,.MuiListItemText-secondary{color:", ";}&:focus-visible i:before{color:unset;}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", ";}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}"], rootClassName$6, theme.palette.figma.border.default, theme.palette.figma.background.level0.bckgGray, theme.palette.figma.border.default, rootClassName$6, theme.palette.figma.success.normal, rootClassName$6, theme.palette.figma.destructive.normal, theme.spacing(1), theme.palette.figma.destructive.normal));
 
 const DotFileListItem = ({
   ariaLabel,
@@ -9961,7 +10096,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -10165,24 +10300,25 @@ var updateLocale$1 = {exports: {}};
 var updateLocale = updateLocale$1.exports;
 
 const rootClassName$2 = 'dot-date-picker';
+const popperClassName = 'dot-date-picker-popper';
 const containerClassName$1 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
 const StyledDatePickerContainer = styled.div.withConfig({
   displayName: "DatePickerstyles__StyledDatePickerContainer",
   componentId: "sc-1to4suu-0"
-})(["&.", " .full-width{width:100%;}"], rootClassName$2);
+})(["", ""], () => css(["&.", " .full-width{width:100%;}"], rootClassName$2));
 const StyledDatePicker = styled(DatePicker).withConfig({
   displayName: "DatePickerstyles__StyledDatePicker",
   componentId: "sc-1to4suu-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{", ";.Mui-disabled.MuiInputBase-root,&.read-only .MuiInputBase-root{", ";}.MuiFormLabel-root{color:", ";}}"], rootClassName$2, pickerInputStyles(theme), readOnlyStyles(theme), theme.palette.layer.n500));
+}) => css(["&.", "{", ";.Mui-disabled.MuiInputBase-root,&.read-only .MuiInputBase-root{", ";}.dot-icon-btn .dot-i{margin-top:-5px;}.MuiFormLabel-root{color:", ";}}"], rootClassName$2, pickerInputStyles(theme), readOnlyStyles(theme), theme.palette.figma.typography.black));
 const StyledPickersDay = styled(PickersDay).withConfig({
   displayName: "DatePickerstyles__StyledPickersDay",
   componentId: "sc-1to4suu-2"
 })(["", ""], ({
   theme
-}) => css(["&.", "{border-radius:", ";&.MuiPickersDay-today{border:1px solid ", ";}}"], rectanglePickersDayClassName, theme.spacing(0.5), theme.palette.primary.main));
+}) => css(["&.", "{border-radius:", ";&.MuiPickersDay-today{background:", ";border:1px solid ", ";}&:hover{background:", ";color:", ";}}"], rectanglePickersDayClassName, theme.spacing(0.5), theme.palette.figma.neutral.normal, theme.palette.figma.primary.normal, theme.palette.figma.primary.normal, theme.palette.figma.typography.white));
 
 const RectanglePickersDay = pickersDayProps => {
   return jsx(StyledPickersDay, Object.assign({}, pickersDayProps, {
@@ -10364,6 +10500,7 @@ const DotDatePicker = ({
             disableEnforceFocus: true
           },
           popper: {
+            className: popperClassName,
             disablePortal: _disablePortal,
             onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Popper)
           }
@@ -10797,7 +10934,7 @@ const StyledCarousel = styled.div.withConfig({
 })(["", ""], ({
   backgroundColor,
   theme
-}) => css(["&.", "{display:flex;flex-direction:column;justify-content:space-between;height:100%;overflow-x:hidden;&.with-background-color{background-color:", ";}.no-animation .MuiLinearProgress-bar{transition:0ms;}.MuiLinearProgress-bar{transition:1000ms;transition-timing-function:linear;}.carousel-top-container{flex-grow:1;padding:", ";.carousel-left-arrow{position:sticky;position:-webkit-sticky;float:left;top:calc(50% - ", ");}.carousel-right-arrow{position:sticky;position:-webkit-sticky;float:right;top:calc(50% - ", ");}.carousel-left-arrow,.carousel-right-arrow{&.top{top:", ";}&.bottom{z-index:1;top:calc(100% - ", ");}}.carousel-page{display:flex;flex-direction:row;justify-content:space-between;height:100%;margin:", ";.carousel-page-main-content-container{display:grid;width:100%;.carousel-page-main-content{grid-column:1;grid-row:1;}}}}.carousel-bottom-container{position:sticky;position:-webkit-sticky;bottom:0;width:100%;text-align:center;.carousel-page-button{margin-bottom:", ";}}}"], rootClassName, backgroundColor || 'transparent', theme.spacing(2, 0), theme.spacing(4), theme.spacing(4), theme.spacing(2), theme.spacing(4), theme.spacing(0, 3), theme.spacing(2)));
+}) => css(["&.", "{display:flex;flex-direction:column;justify-content:space-between;height:100%;overflow-x:hidden;&.with-background-color{background-color:", ";}.no-animation .MuiLinearProgress-bar{transition:0ms;}.MuiLinearProgress-bar{transition:1000ms;transition-timing-function:linear;}.carousel-top-container{flex-grow:1;padding:", ";.carousel-left-arrow{float:left;}.carousel-right-arrow{float:right;}.carousel-left-arrow,.carousel-right-arrow{position:sticky;position:-webkit-sticky;top:calc(50% - ", ");margin:", ";&.top{top:", ";}&.bottom{z-index:1;top:calc(100% - ", ");}}.carousel-page{display:flex;flex-direction:row;justify-content:space-between;height:100%;.carousel-page-main-content-container{display:grid;width:100%;.carousel-page-main-content{grid-column:1;grid-row:1;}}}}.carousel-bottom-container{position:sticky;position:-webkit-sticky;bottom:0;width:100%;text-align:center;.carousel-page-button{margin-bottom:", ";}}}"], rootClassName, backgroundColor || 'transparent', theme.spacing(2, 0), theme.spacing(4), theme.spacing(0, 2), theme.spacing(2), theme.spacing(4), theme.spacing(2)));
 
 const DotCarousel = ({
   animation: _animation = 'fade',