@digital-ai/dot-components 4.14.0 → 4.15.0

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, InputAdornment, InputLabel, TextField, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
-import '@digital-ai/dot-icons';
-import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
+import React__default, { useEffect, useState, useRef, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
+import '@digital-ai/dot-icons';
 import jwt_decode from 'jwt-decode';
 import '@digital-ai/dot-illustrations';
 import { DatePicker, PickersDay, TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
@@ -42,756 +42,166 @@ const checkIfOverflowPresentInElementTree = element => {
   return false;
 };
 
-const DotTooltip = ({
+const DotTypography = ({
   ariaLabel,
-  ariaRole = 'tooltip',
-  arrow = true,
-  children,
+  ariaLevel,
+  ariaRole,
   className,
   'data-testid': dataTestId,
-  disablePortal = false,
-  disableInteractive = false,
-  followCursor = false,
-  enterDelay = 600,
-  enterNextDelay = 0,
-  hoverVisibility = 'always',
-  leaveDelay,
-  onClose,
-  open,
-  placement = 'bottom',
-  popperClassName,
-  slotProps,
-  title,
-  childrenDisplayStyle
+  children,
+  component,
+  noMarginBottom,
+  noWrap,
+  variant
 }) => {
-  const rootClasses = useStylesWithRootClass('dot-tooltip', className);
-  const [hasTooltipOnHover, setHasTooltipOnHover] = useState(false);
-  const childrenWrapperRef = useRef();
+  const rootClasses = useStylesWithRootClass('dot-typography', className);
   useEffect(() => {
-    if (hoverVisibility !== 'overflow') return;
-    const resizeObserver = new ResizeObserver(checkIfTooltipShouldBeRendered);
-    if (childrenWrapperRef.current) {
-      resizeObserver.observe(childrenWrapperRef.current);
+    if (ariaRole === 'heading' && !ariaLevel) {
+      console.warn('please include ariaLevel when using ariaRole="heading"');
     }
-    checkIfTooltipShouldBeRendered();
-    return () => {
-      if (childrenWrapperRef.current) {
-        resizeObserver.unobserve(childrenWrapperRef.current);
-      }
-    };
-  }, [childrenWrapperRef.current, children, hoverVisibility]);
-  const checkIfTooltipShouldBeRendered = () => {
-    if (!childrenWrapperRef || !childrenWrapperRef.current) return;
-    const isOverflowPresent = checkIfOverflowPresentInElementTree(childrenWrapperRef.current);
-    setHasTooltipOnHover(isOverflowPresent);
-  };
-  if (!title) {
-    return children;
-  }
-  return jsx(Tooltip, {
-    "aria-hidden": false,
-    "aria-label": ariaLabel || title.toString(),
-    arrow: arrow,
-    className: rootClasses,
-    "data-testid": dataTestId,
-    disableHoverListener: hoverVisibility === 'never' || hoverVisibility === 'overflow' && !hasTooltipOnHover,
-    disableInteractive: disableInteractive,
-    leaveDelay: leaveDelay,
-    enterDelay: enterDelay,
-    enterNextDelay: enterNextDelay,
-    onClose: onClose,
-    open: open,
-    placement: placement,
-    PopperProps: {
-      disablePortal,
-      className: popperClassName
+    if (noMarginBottom) {
+      console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
+    }
+  }, []);
+  return jsx(Typography, {
+    "aria-label": ariaLabel,
+    "aria-level": ariaLevel,
+    classes: {
+      root: rootClasses
     },
-    slotProps: slotProps,
+    component: component,
+    "data-testid": dataTestId,
+    noWrap: noWrap,
     role: ariaRole,
-    title: title,
-    followCursor: followCursor,
-    children: jsx("span", {
-      style: {
-        display: childrenDisplayStyle
-      },
-      ref: childrenWrapperRef,
-      tabIndex: -1,
-      children: children
-    })
+    style: {
+      marginBottom: noMarginBottom ? 0 : undefined
+    },
+    variant: variant,
+    children: children
   });
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const formHelperTextRootStyles = theme => css`
-  align-items: flex-end;
-  color: ${theme.palette.figma.typography.gray};
-  display: flex;
-  font-family: ${theme.typography.fontFamily};
-  font-size: ${theme.typography.body2.fontSize}px;
-  font-weight: 400;
-  margin: ${theme.spacing(0.5, 0, 0, 1.5)};
-
-  &.read-only .MuiOutlinedInput-root:hover > fieldset {
-    border-color: ${theme.palette.figma.typography.black};
-  }
-`;
-const adornmentIconStyles = () => css`
-  font-size: 24px;
-  height: 24px;
-  padding: 0;
-  width: 24px;
-`;
-// 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: ${theme.spacing(0.5)};
-      color: ${theme.palette.figma.destructive.normal};
-    }
-
-    .dot-icon {
-      ${adornmentIconStyles()};
-    }
-  }
-
-  .MuiInputBase-input {
-    height: ${theme.spacing(2)};
-    padding: ${theme.spacing(1.5, 0, 1.5, 2)};
-  }
-
-  .MuiFormHelperText-root {
-    ${formHelperTextRootStyles(theme)};
-  }
-`;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const readOnlyStyles = theme => css`
-  background: ${theme.palette.figma.disabled.normal};
-  color: ${theme.palette.figma.typography.disabled};
-  border-color: ${theme.palette.figma.border.defaultButton};
-  -webkit-text-fill-color: ${theme.palette.figma.typography.disabled};
-
-  input.Mui-disabled {
-    -webkit-text-fill-color: ${theme.palette.figma.typography.disabled};
-  }
-
-  .dot-chip {
-    background: ${theme.palette.figma.disabled.normal};
-    opacity: 1;
-  }
-`;
-
-const rootClassName$1n = 'dot-text-field';
-const rootSelectClassName = 'dot-select-field';
-const wrapperClassName$2 = 'dot-label-wrapper';
-const labelClassName = 'dot-input-label';
-const errorClassName = 'dot-error';
-const warningClassName = 'dot-warning';
-const successClassName = 'dot-success';
-const adornmentIconClassName = 'dot-adornment-icon';
-const fieldsetClassName = 'MuiOutlinedInput-notchedOutline';
-const readOnlyClassName$1 = 'read-only';
-const resizerClassName = 'with-resizer';
-const ROW_HEIGHT = 37;
-const StyledAdornment = styled(InputAdornment)`
-  .dot-icon {
-    ${adornmentIconStyles()};
-  }
-`;
-const StyledInputLabel = styled(InputLabel)`
-  ${({
-  theme
-}) => css`
-    &.${labelClassName} {
-      margin-bottom: ${theme.spacing(0.5)};
-      transform: none;
-
-      &.Mui-disabled .dot-typography {
-        color: ${theme.palette.figma.typography.disabled};
-      }
-
-      &.Mui-error .dot-typography,
-      &.MuiInputLabel-outlined.Mui-disabled,
-      &.MuiInputLabel-outlined.Mui-disabled .dot-typography {
-        color: ${theme.palette.figma.typography.black};
-      }
-
-      .dot-typography {
-        display: inline;
-      }
-    }
-  `}
-`;
-const StyledTextFieldContainer = styled.div`
-  &.dot-input-text--fullwidth {
-    width: 100%;
-  }
-`;
-const StyledTextField = styled(TextField)`
-  ${({
-  theme,
-  InputProps,
-  $maxRows,
-  $minRows
-}) => css`
-    &.${rootClassName$1n} {
-      .MuiInputBase-root {
-        margin-bottom: 0;
-
-        &:not(.MuiAutocomplete-inputRoot) {
-          &.MuiInputBase-adornedStart {
-            padding-left: ${theme.spacing(1.5)};
-          }
-          &.MuiInputBase-adornedEnd {
-            padding-right: ${theme.spacing(1)};
-          }
-        }
-      }
-      .MuiInputBase-input {
-        box-sizing: content-box;
-      }
-      .MuiOutlinedInput-input {
-        padding: 18px ${InputProps.endAdornment ? '0px' : '12px'} 18px
-          ${InputProps.startAdornment ? '0px' : '12px'};
-        &::placeholder {
-          opacity: 1;
-          color: ${theme.palette.figma.typography.gray};
-        }
-      }
-      .MuiInputBase-inputSizeSmall {
-        padding-top: 10.5px;
-        padding-bottom: 10.5px;
-
-        &:not(textarea) {
-          /* padding above and below together is 21px, and total height should be 40px */
-          height: 19px;
-        }
-      }
-
-      .MuiInputBase-multiline {
-        .MuiInputBase-inputMultiline {
-          padding: 0;
-        }
-
-        &.${resizerClassName} {
-          resize: both;
-          overflow: auto;
-          height: ${$minRows ? ROW_HEIGHT * $minRows : ROW_HEIGHT}px;
-          min-height: ${$minRows ? ROW_HEIGHT * $minRows : ROW_HEIGHT}px;
-          max-height: ${$maxRows ? `${ROW_HEIGHT * $maxRows}px` : 'unset'};
-          min-width: 170px;
-
-          #custom-text-input.MuiInputBase-inputMultiline {
-            height: 100% !important;
-            width: 100%;
-          }
-        }
-      }
-
-      &.${readOnlyClassName$1} .MuiInputBase-root,
-      .MuiInputBase-root.Mui-disabled {
-        ${readOnlyStyles(theme)};
-      }
-
-      .MuiInputBase-adornedEnd .clear-icon-button.hidden {
-        visibility: hidden;
-      }
-
-      .${adornmentIconClassName}.MuiInputAdornment-positionStart {
-        margin-right: ${theme.spacing(0.5)};
-      }
-
-      .${adornmentIconClassName}.MuiInputAdornment-positionEnd {
-        margin: ${theme.spacing(0)};
-      }
-    }
-
-    .dot-select,
-    .dot-input {
-      &.${readOnlyClassName$1}, &.Mui-disabled {
-        ${readOnlyStyles(theme)};
-      }
-    }
-
-    &.${rootSelectClassName} .${adornmentIconClassName} {
-      // inputSelect has an arrow so we need spacing for end adornment
-      margin-right: ${theme.spacing(2)};
-    }
-
-    &.${rootSelectClassName}, &.${rootClassName$1n} {
-      .${adornmentIconClassName} {
-        color: ${theme.palette.figma.icon.black};
-        p {
-          font-size: ${theme.typography.body2.fontSize}px;
-          margin: 0;
-        }
-
-        .dot-icon i {
-          margin-top: -2px;
-        }
-      }
-
-      .MuiInputLabel-root,
-      .MuiInputLabel-root.Mui-error {
-        color: ${theme.palette.figma.typography.gray};
-
-        &.MuiInputLabel-shrink {
-          color: ${theme.palette.figma.typography.black};
-        }
-      }
-
-      .MuiInputBase-root {
-        background: ${theme.palette.figma.neutral.normal};
-        margin-bottom: 0;
-      }
-
-      .MuiInputBase-inputSizeSmall:not(textarea) {
-        height: 19px;
-        padding-top: 10.5px;
-        padding-bottom: 10.5px;
-      }
-
-      select.dot-select {
-        padding-left: ${theme.spacing(1.5)};
-      }
-
-      .MuiSelect-select:focus:not(.${readOnlyClassName$1}) {
-        background-color: transparent;
-      }
-
-      .MuiSelect-icon {
-        right: ${InputProps.endAdornment ? `44px` : `12px`};
-      }
-
-      &.${successClassName} {
-        .MuiOutlinedInput-notchedOutline {
-          border-color: ${theme.palette.figma.success.normal};
-        }
-
-        .${adornmentIconClassName} .dot-icon {
-          color: ${theme.palette.figma.success.normal};
-        }
-      }
-
-      &.${errorClassName} {
-        .MuiOutlinedInput-notchedOutline {
-          border-color: ${theme.palette.figma.destructive.normal};
-        }
-
-        .${adornmentIconClassName} .dot-icon {
-          color: ${theme.palette.figma.destructive.normal};
-        }
-      }
-
-      &.${warningClassName} {
-        .MuiOutlinedInput-notchedOutline {
-          border-color: ${theme.palette.figma.warning.normal};
-        }
-
-        .${adornmentIconClassName} .dot-icon {
-          color: ${theme.palette.figma.warning.normal};
-        }
-      }
-
-      .MuiOutlinedInput-adornedStart {
-        padding-left: 12px;
-
-        &.${warningClassName} .${fieldsetClassName} {
-          border-color: ${theme.palette.figma.warning.normal};
-        }
-      }
-
-      .MuiFormHelperText-root {
-        ${formHelperTextRootStyles(theme)};
-      }
-    }
-  `}
-`;
-
-const rootClassName$1m = 'dot-icon';
-const StyledIcon = styled(Icon)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$1m} {
-      color: ${theme.palette.figma.icon.black};
-      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;
-      }
-
-      &.${warningClassName} {
-        color: ${theme.palette.figma.warning.normal};
-      }
-    }
-  `}
-`;
-
-const DotIcon = ({
-  ariaLabel,
-  ariaRole = 'img',
-  className,
-  'data-testid': dataTestId,
-  fontSize = 'medium',
-  iconId,
-  tooltip
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
-  return jsx(DotTooltip, {
-    childrenDisplayStyle: "inline-block",
-    title: tooltip,
-    children: jsx(StyledIcon, {
-      "aria-hidden": "false",
-      "aria-label": ariaLabel || `${iconId} icon`,
-      classes: {
-        root: rootClasses
-      },
-      "data-testid": dataTestId,
-      fontSize: fontSize,
-      role: ariaRole,
-      children: jsx("i", {
-        "aria-label": ariaLabel || `${iconId} icon`,
-        className: `icon-${iconId} dot-i`,
-        "data-testid": dataTestId && `${dataTestId}-i`,
-        role: ariaRole
-      })
-    })
-  });
-};
-
-const DotTypography = ({
-  ariaLabel,
-  ariaLevel,
-  ariaRole,
-  className,
-  'data-testid': dataTestId,
-  children,
-  component,
-  noMarginBottom,
-  noWrap,
-  variant
-}) => {
-  const rootClasses = useStylesWithRootClass('dot-typography', className);
-  useEffect(() => {
-    if (ariaRole === 'heading' && !ariaLevel) {
-      console.warn('please include ariaLevel when using ariaRole="heading"');
-    }
-    if (noMarginBottom) {
-      console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
-    }
-  }, []);
-  return jsx(Typography, {
-    "aria-label": ariaLabel,
-    "aria-level": ariaLevel,
-    classes: {
-      root: rootClasses
-    },
-    component: component,
-    "data-testid": dataTestId,
-    noWrap: noWrap,
-    role: ariaRole,
-    style: {
-      marginBottom: noMarginBottom ? 0 : undefined
-    },
-    variant: variant,
-    children: children
-  });
-};
-
-const rootClassName$1l = 'dot-accordion';
-const summaryClassName = 'dot-accordion-summary';
-const detailClassName = 'dot-accordion-details';
-const StyledAccordion = styled(Accordion)`
-  ${({
-  theme
-}) => css`
-    .${detailClassName} {
-      background: ${theme.palette.figma.background.level1.white};
-    }
-
-    &.${rootClassName$1l} .${summaryClassName} {
-      align-items: center;
-      background: ${theme.palette.figma.background.level1.white};
-      color: ${theme.palette.figma.typography.black};
-      display: flex;
-
-      &.Mui-expanded {
-        border-top: 1px solid ${theme.palette.figma.border.default};
-        margin: 0;
-
-        &:before {
-          opacity: 1;
-        }
-      }
-
-      .MuiAccordionSummary-content {
-        align-items: center;
-        gap: ${theme.spacing(1)};
-        width: calc(100% - ${theme.spacing(5)});
-
-        .dot-tooltip {
-          overflow: hidden;
-        }
-      }
-
-      .MuiAccordionSummary-expandIconWrapper {
-        padding: ${theme.spacing(1.5)};
-        margin-right: ${theme.spacing(-1.5)};
-      }
-
-      .MuiTypography-root {
-        margin-bottom: 0;
-      }
-      .MuiTypography-body1 {
-        padding: 2px 0;
-      }
-    }
-  `}
-`;
-
-const DotAccordion = ({
-  actions,
-  ariaLabel,
-  children,
-  className,
-  'data-pendoid': dataPendoId = rootClassName$1l,
-  'data-testid': dataTestId = 'dot-accordion',
-  disabled = false,
-  expanded,
-  hasElevation = false,
-  onChange,
-  square = false,
-  startIcon = null,
-  summary,
-  noWrap = true
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
-  const [elevation, setElevation] = useState();
-  useEffect(() => {
-    if (onChange && expanded === undefined) {
-      console.warn('The use of an `onChange` callback makes this a controlled component but no `expanded` state has been provided. In effect, this makes the component disabled.');
-    }
-  }, []);
-  useEffect(() => {
-    setElevation(hasElevation ? 1 : 0);
-  }, [hasElevation]);
-  return jsxs(StyledAccordion, {
-    "aria-label": ariaLabel,
-    className: rootClasses,
-    "data-pendoid": dataPendoId,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    elevation: elevation,
-    expanded: onChange ? expanded : undefined,
-    onChange: onChange,
-    square: square,
-    children: [jsxs(AccordionSummary, {
-      "aria-label": ariaLabel || summary,
-      classes: {
-        root: summaryClassName
-      },
-      "data-testid": `${dataTestId}-summary`,
-      expandIcon: jsx(DotIcon, {
-        iconId: "chevron-down"
-      }),
-      role: "button",
-      children: [startIcon, jsx(DotTooltip, {
-        "data-testid": "accordion-tooltip",
-        title: noWrap ? summary : '',
-        children: jsx(DotTypography, {
-          noWrap: noWrap,
-          variant: "body1",
-          children: summary
-        })
-      })]
-    }), jsx(AccordionDetails, {
-      classes: {
-        root: detailClassName
-      },
-      "data-testid": `${dataTestId}-details`,
-      children: children
-    }), actions && jsx(AccordionActions, {
-      children: actions
-    })]
-  });
-};
-
-const rootClassName$1k = 'dot-action-toolbar';
-const StyledToolbar = styled(Toolbar)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$1k} {
-      border-bottom: 1px solid ${theme.palette.figma.border.default};
-
-      .${rootClassName$1n} .MuiInputBase-root {
-        margin-bottom: 0;
-      }
-    }
-  `}
-`;
-
-const DotActionToolbar = ({
-  ariaLabel,
-  children,
-  className,
-  'data-testid': dataTestId,
-  variant = 'dense'
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
-  return jsx(StyledToolbar, {
-    "aria-label": ariaLabel,
-    className: rootClasses,
-    "data-testid": dataTestId,
-    variant: variant,
-    children: children
-  });
-};
-
-//Primary blue
-//https://zeroheight.com/4a9ac476a/p/22005a-color/t/6288e9
-const b50 = '#e8edf3';
-const b100 = '#c5d3e2';
-const b200 = '#9eb6cf';
-const b300 = '#7798bb';
-const b400 = '#5a82ad';
-const b500 = '#3d6c9e';
-const b600 = '#376496';
-const b700 = '#2f598c';
-const b800 = '#274f82';
-const b900 = '#1a3d70';
-const bA100 = '#abcaff';
-const bA200 = '#78aaff';
-const bA400 = '#458aff';
-const bA700 = '#2b7aff';
-//Success green
-//https://zeroheight.com/4a9ac476a/p/22005a-color/t/653193
-const g50 = '#e9f0e0';
-const g100 = '#c8dab3';
-const g200 = '#a4c280';
-const g300 = '#80aa4d';
-const g400 = '#649726';
-const g500 = '#498500';
-const g600 = '#427d00';
-const g700 = '#397200';
-const g800 = '#316800';
-const g900 = '#215500';
-const gA100 = '#aaff87';
-const gA200 = '#86ff54';
-const gA400 = '#61ff21';
-const gA700 = '#4fff08';
-//Neutral color
-//https://zeroheight.com/4a9ac476a/p/22005a-color/t/44d174
-const n0 = '#ffffff';
-const n50 = '#f3f5f6';
-const n100 = '#e3e5e8';
-const n200 = '#c1c6cd';
-const n300 = '#a4acb6';
-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';
-const nA400 = '#226eff';
-const nA700 = '#085eff';
-//Warning orange
-//https://zeroheight.com/4a9ac476a/p/22005a-color/t/01bbd7
-const o50 = '#fff3e9';
-const o100 = '#ffe2c8';
-const o200 = '#ffcfa4';
-const o300 = '#ffbb80';
-const o400 = '#ffad64';
-const o500 = '#ff9e49';
-const o600 = '#ff9642';
-const o700 = '#ff8c39';
-const o800 = '#ff8231';
-const o900 = '#f05e1d';
-const oA100 = '#ffffff';
-const oA200 = '#ffffff';
-const oA400 = '#ffe0d0';
-const oA700 = '#ffceb7';
-//Error red
-//https://zeroheight.com/4a9ac476a/p/22005a-color/t/941bd8
-const r50 = '#fae4e4';
-const r100 = '#f3bcbc';
-const r200 = '#eb8f90';
-const r300 = '#e26264';
-const r400 = '#dc4142';
-const r500 = '#d61f21';
-const r600 = '#d11b1d';
-const r700 = '#cc1718';
-const r800 = '#c61214';
-const r900 = '#bc0a0b';
-const rA100 = '#ffe7e7';
-const rA200 = '#ffb4b5';
-const rA400 = '#ff8182';
-const rA700 = '#ff6869';
-//Graph color
-//Yellow
-//https://zeroheight.com/4a9ac476a/p/22005a-color/t/48416f
-const y50 = '#fdf8e2';
-const y100 = '#faeeb8';
-const y200 = '#f7e288';
-const y300 = '#f3d658';
-const y400 = '#f1ce35';
-const y500 = '#eec511';
-const y600 = '#ecbf0f';
-const y700 = '#e9b80c';
-const y800 = '#e7b00a';
-const y900 = '#e2a305';
-const yA100 = '#ffffff';
-const yA200 = '#fff2d7';
-const yA400 = '#ffe2a4';
-const yA700 = '#ffda8b';
-//Purple
-//https://zeroheight.com/4a9ac476a/p/22005a-color/t/48416f
-const p50 = '#f3e4ee';
-const p100 = '#e0bbd4';
-const p200 = '#cc8eb8';
-const p300 = '#b8609c';
-const p400 = '#a83e86';
-const p500 = '#991c71';
-const p600 = '#911969';
-const p700 = '#86145e';
-const p800 = '#7c1154';
-const p900 = '#6b0942';
-const pA100 = '#ff9cd1';
-const pA200 = '#ff69b9';
-const pA400 = '#ff36a2';
-const pA700 = '#ff1d96';
-const selectedGray = 'rgba(0, 0, 0, 0.12)';
-const lightSelectedGray = 'rgba(0, 0, 0, 0.08)';
-const hoverGray = 'rgba(0, 0, 0, 0.04)';
+//Primary blue
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/6288e9
+const b50 = '#e8edf3';
+const b100 = '#c5d3e2';
+const b200 = '#9eb6cf';
+const b300 = '#7798bb';
+const b400 = '#5a82ad';
+const b500 = '#3d6c9e';
+const b600 = '#376496';
+const b700 = '#2f598c';
+const b800 = '#274f82';
+const b900 = '#1a3d70';
+const bA100 = '#abcaff';
+const bA200 = '#78aaff';
+const bA400 = '#458aff';
+const bA700 = '#2b7aff';
+//Success green
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/653193
+const g50 = '#e9f0e0';
+const g100 = '#c8dab3';
+const g200 = '#a4c280';
+const g300 = '#80aa4d';
+const g400 = '#649726';
+const g500 = '#498500';
+const g600 = '#427d00';
+const g700 = '#397200';
+const g800 = '#316800';
+const g900 = '#215500';
+const gA100 = '#aaff87';
+const gA200 = '#86ff54';
+const gA400 = '#61ff21';
+const gA700 = '#4fff08';
+//Neutral color
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/44d174
+const n0 = '#ffffff';
+const n50 = '#f3f5f6';
+const n100 = '#e3e5e8';
+const n200 = '#c1c6cd';
+const n300 = '#a4acb6';
+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';
+const nA400 = '#226eff';
+const nA700 = '#085eff';
+//Warning orange
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/01bbd7
+const o50 = '#fff3e9';
+const o100 = '#ffe2c8';
+const o200 = '#ffcfa4';
+const o300 = '#ffbb80';
+const o400 = '#ffad64';
+const o500 = '#ff9e49';
+const o600 = '#ff9642';
+const o700 = '#ff8c39';
+const o800 = '#ff8231';
+const o900 = '#f05e1d';
+const oA100 = '#ffffff';
+const oA200 = '#ffffff';
+const oA400 = '#ffe0d0';
+const oA700 = '#ffceb7';
+//Error red
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/941bd8
+const r50 = '#fae4e4';
+const r100 = '#f3bcbc';
+const r200 = '#eb8f90';
+const r300 = '#e26264';
+const r400 = '#dc4142';
+const r500 = '#d61f21';
+const r600 = '#d11b1d';
+const r700 = '#cc1718';
+const r800 = '#c61214';
+const r900 = '#bc0a0b';
+const rA100 = '#ffe7e7';
+const rA200 = '#ffb4b5';
+const rA400 = '#ff8182';
+const rA700 = '#ff6869';
+//Graph color
+//Yellow
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/48416f
+const y50 = '#fdf8e2';
+const y100 = '#faeeb8';
+const y200 = '#f7e288';
+const y300 = '#f3d658';
+const y400 = '#f1ce35';
+const y500 = '#eec511';
+const y600 = '#ecbf0f';
+const y700 = '#e9b80c';
+const y800 = '#e7b00a';
+const y900 = '#e2a305';
+const yA100 = '#ffffff';
+const yA200 = '#fff2d7';
+const yA400 = '#ffe2a4';
+const yA700 = '#ffda8b';
+//Purple
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/48416f
+const p50 = '#f3e4ee';
+const p100 = '#e0bbd4';
+const p200 = '#cc8eb8';
+const p300 = '#b8609c';
+const p400 = '#a83e86';
+const p500 = '#991c71';
+const p600 = '#911969';
+const p700 = '#86145e';
+const p800 = '#7c1154';
+const p900 = '#6b0942';
+const pA100 = '#ff9cd1';
+const pA200 = '#ff69b9';
+const pA400 = '#ff36a2';
+const pA700 = '#ff1d96';
+const selectedGray = 'rgba(0, 0, 0, 0.12)';
+const lightSelectedGray = 'rgba(0, 0, 0, 0.08)';
+const hoverGray = 'rgba(0, 0, 0, 0.04)';
 
 var lightThemeColors = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1434,302 +844,894 @@ const darkTheme = createTheme({
       unknown: n300,
       unknownHover: n100
     },
-    layer: {
-      n0: n900,
-      n50: n800,
-      n100: n700,
-      n200: n600,
-      n300: n500,
-      n400: n400,
-      n500: n300,
-      n600: n200,
-      n700: n100,
-      n800: n50,
-      n900: n0
-    },
-    primary: {
-      main: b200,
-      '50': b50,
-      '100': b100,
-      '500': b500
-    },
-    secondary: {
-      main: g800,
-      '50': g400,
-      '100': g300,
-      '500': g200,
-      '700': g100
-    },
-    error: {
-      main: r800,
-      '50': r400,
-      '100': r300,
-      '500': r200,
-      '700': r100
-    },
-    grey: {
-      '50': n500,
-      '100': n400,
-      '200': n400,
-      '300': n400,
-      '400': n200,
-      '500': n500,
-      '700': n700,
-      '900': n900
+    layer: {
+      n0: n900,
+      n50: n800,
+      n100: n700,
+      n200: n600,
+      n300: n500,
+      n400: n400,
+      n500: n300,
+      n600: n200,
+      n700: n100,
+      n800: n50,
+      n900: n0
+    },
+    primary: {
+      main: b200,
+      '50': b50,
+      '100': b100,
+      '500': b500
+    },
+    secondary: {
+      main: g800,
+      '50': g400,
+      '100': g300,
+      '500': g200,
+      '700': g100
+    },
+    error: {
+      main: r800,
+      '50': r400,
+      '100': r300,
+      '500': r200,
+      '700': r100
+    },
+    grey: {
+      '50': n500,
+      '100': n400,
+      '200': n400,
+      '300': n400,
+      '400': n200,
+      '500': n500,
+      '700': n700,
+      '900': n900
+    },
+    purple: {
+      main: p500
+    },
+    text: {
+      primary: n50
+    }
+  },
+  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: darkFigmaColors.typography.black
+    }),
+    body2: Object.assign(Object.assign({}, typographyOptions.body2), {
+      color: darkFigmaColors.typography.gray
+    })
+  })
+});
+const lightTheme = createTheme({
+  breakpoints: Object.assign({}, breakpointOptions),
+  palette: {
+    mode: 'light',
+    avatarColors: Object.assign({}, avatarColors),
+    figma: lightFigmaColors,
+    background: {
+      default: n0
+    },
+    primary: {
+      main: b500,
+      '50': b50,
+      '100': b100,
+      '200': b200,
+      '300': b300,
+      '400': b400,
+      '500': b500,
+      '600': b600,
+      '700': b700,
+      '800': b800,
+      '900': b900,
+      A100: bA100,
+      A200: bA200,
+      A400: bA400,
+      A700: bA700
+    },
+    secondary: {
+      main: g500,
+      '50': g50,
+      '100': g100,
+      '200': g200,
+      '300': g300,
+      '400': g400,
+      '500': g500,
+      '600': g600,
+      '700': g700,
+      '800': g800,
+      '900': g900,
+      A100: gA100,
+      A200: gA200,
+      A400: gA400,
+      A700: gA700
+    },
+    error: {
+      main: r500,
+      '50': r50,
+      '100': r100,
+      '200': r200,
+      '300': r300,
+      '400': r400,
+      '500': r500,
+      '600': r600,
+      '700': r700,
+      '800': r800,
+      '900': r900,
+      A100: rA100,
+      A200: rA200,
+      A400: rA400,
+      A700: rA700
+    },
+    warning: {
+      main: o500,
+      '50': o50,
+      '100': o100,
+      '200': o200,
+      '300': o300,
+      '400': o400,
+      '500': o500,
+      '600': o600,
+      '700': o700,
+      '800': o800,
+      '900': o900,
+      A100: oA100,
+      A200: oA200,
+      A400: oA400,
+      A700: oA700
+    },
+    success: {
+      main: g500,
+      '50': g50,
+      '100': g100,
+      '200': g200,
+      '300': g300,
+      '400': g400,
+      '500': g500,
+      '600': g600,
+      '700': g700,
+      '800': g800,
+      '900': g900,
+      A100: gA100,
+      A200: gA200,
+      A400: gA400,
+      A700: gA700
+    },
+    grey: {
+      '50': n50,
+      '100': n100,
+      '200': n200,
+      '300': n300,
+      '400': n400,
+      '500': n500,
+      '600': n600,
+      '700': n700,
+      '800': n800,
+      '900': n900,
+      A100: nA100,
+      A200: nA200,
+      A400: nA400,
+      A700: nA700
+    },
+    purple: {
+      main: p500,
+      '50': p50,
+      '100': p100,
+      '200': p200,
+      '300': p300,
+      '400': p400,
+      '500': p500,
+      '600': p600,
+      '700': p700,
+      '800': p800,
+      '900': p900,
+      A100: pA100,
+      A200: pA200,
+      A400: pA400,
+      A700: pA700
+    },
+    layer: {
+      n0: n0,
+      n50: n50,
+      n100: n100,
+      n200: n200,
+      n300: n300,
+      n400: n400,
+      n500: n500,
+      n600: n600,
+      n700: n700,
+      n800: n800,
+      n900: n900
+    },
+    icon: {
+      checkOutline: b500,
+      emphasized: b300,
+      fileDotted: b500,
+      improve: g500,
+      improveHover: g300,
+      maintain: r500,
+      maintainHover: r300,
+      rogueCommits: o500,
+      unknown: n300,
+      unknownHover: n100
+    },
+    text: {
+      primary: n700
     },
-    purple: {
-      main: p500
+    tonalOffset: 0.2
+  },
+  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: lightFigmaColors.typography.black
+    }),
+    body2: Object.assign(Object.assign({}, typographyOptions.body2), {
+      color: lightFigmaColors.typography.gray
+    })
+  })
+});
+const getThemeFromString = themeOption => {
+  if (themeOption === 'dark') {
+    return darkTheme;
+  }
+  return lightTheme;
+};
+function DotThemeProvider({
+  children,
+  theme = lightTheme
+}) {
+  const userTheme = typeof theme === 'string' ? getThemeFromString(theme) : theme;
+  return jsx(StyledEngineProvider, {
+    injectFirst: true,
+    children: jsx(ThemeProvider, {
+      theme: userTheme,
+      children: jsxs(ThemeProvider$1, {
+        theme: userTheme,
+        children: [jsx(GlobalFonts, {}), children]
+      })
+    })
+  });
+}
+
+const calculateNumberFromText = text => {
+  const charCodes = text.split('') // => ["A", "A"]
+  .map(char => char.charCodeAt(0)) // => [65, 65]
+  .join(''); // => "6565"
+  return parseInt(charCodes, 10);
+};
+const calculateWidth = width => {
+  if (!width) return;
+  return isString$2(width) ? width : `${width}px`;
+};
+const getAvatarColorForInputText = value => {
+  const colorOptions = [...Object.keys(avatarColors)];
+  if (!value || !colorOptions || colorOptions.length <= 0) return 'default';
+  const numberFromValue = calculateNumberFromText(value);
+  const index = numberFromValue % colorOptions.length;
+  // if number is 9 (transparent), return default color
+  if (index === 9) return 'default';
+  return colorOptions[index];
+};
+const isString$2 = str => typeof str === 'string';
+const isLowerCase = str => str === str.toLowerCase();
+const isNumber = num => typeof num === 'number';
+const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
+  return isString$2(content) ? jsx(DotTypography, {
+    variant: typographyVariant,
+    children: content
+  }) : content;
+};
+const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
+const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
+
+const DotTooltip = ({
+  ariaLabel,
+  ariaRole = 'tooltip',
+  arrow = true,
+  children,
+  className,
+  'data-testid': dataTestId,
+  disablePortal = false,
+  disableInteractive = false,
+  followCursor = false,
+  enterDelay = 600,
+  enterNextDelay = 0,
+  hoverVisibility = 'always',
+  leaveDelay,
+  onClose,
+  open,
+  placement = 'bottom',
+  popperClassName,
+  slotProps,
+  title,
+  childrenDisplayStyle
+}) => {
+  const rootClasses = useStylesWithRootClass('dot-tooltip', className);
+  const [hasTooltipOnHover, setHasTooltipOnHover] = useState(false);
+  const childrenWrapperRef = useRef();
+  useEffect(() => {
+    if (hoverVisibility !== 'overflow') return;
+    const resizeObserver = new ResizeObserver(checkIfTooltipShouldBeRendered);
+    if (childrenWrapperRef.current) {
+      resizeObserver.observe(childrenWrapperRef.current);
+    }
+    checkIfTooltipShouldBeRendered();
+    return () => {
+      if (childrenWrapperRef.current) {
+        resizeObserver.unobserve(childrenWrapperRef.current);
+      }
+    };
+  }, [childrenWrapperRef.current, children, hoverVisibility]);
+  const checkIfTooltipShouldBeRendered = () => {
+    if (!childrenWrapperRef || !childrenWrapperRef.current) return;
+    const isOverflowPresent = checkIfOverflowPresentInElementTree(childrenWrapperRef.current);
+    setHasTooltipOnHover(isOverflowPresent);
+  };
+  if (!title) {
+    return children;
+  }
+  return jsx(Tooltip, {
+    "aria-hidden": false,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : isString$2(title) ? title.toString() : 'Information tooltip',
+    arrow: arrow,
+    className: rootClasses,
+    "data-testid": dataTestId,
+    disableHoverListener: hoverVisibility === 'never' || hoverVisibility === 'overflow' && !hasTooltipOnHover,
+    disableInteractive: disableInteractive,
+    leaveDelay: leaveDelay,
+    enterDelay: enterDelay,
+    enterNextDelay: enterNextDelay,
+    onClose: onClose,
+    open: open,
+    placement: placement,
+    PopperProps: {
+      disablePortal,
+      className: popperClassName
     },
-    text: {
-      primary: n50
+    slotProps: slotProps,
+    role: ariaRole,
+    title: title,
+    followCursor: followCursor,
+    children: jsx("span", {
+      style: {
+        display: childrenDisplayStyle
+      },
+      ref: childrenWrapperRef,
+      tabIndex: -1,
+      children: children
+    })
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const formHelperTextRootStyles = theme => css`
+  align-items: flex-end;
+  color: ${theme.palette.figma.typography.gray};
+  display: flex;
+  font-family: ${theme.typography.fontFamily};
+  font-size: ${theme.typography.body2.fontSize}px;
+  font-weight: 400;
+  margin: ${theme.spacing(0.5, 0, 0, 1.5)};
+
+  &.read-only .MuiOutlinedInput-root:hover > fieldset {
+    border-color: ${theme.palette.figma.typography.black};
+  }
+`;
+const adornmentIconStyles = () => css`
+  font-size: 24px;
+  height: 24px;
+  padding: 0;
+  width: 24px;
+`;
+// 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: ${theme.spacing(0.5)};
+      color: ${theme.palette.figma.destructive.normal};
     }
-  },
-  components: Object.assign(Object.assign({}, componentOverrides), {
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          backgroundColor: darkFigmaColors.background.level0.componentsBackground
+
+    .dot-icon {
+      ${adornmentIconStyles()};
+    }
+  }
+
+  .MuiInputBase-input {
+    height: ${theme.spacing(2)};
+    padding: ${theme.spacing(1.5, 0, 1.5, 2)};
+  }
+
+  .MuiFormHelperText-root {
+    ${formHelperTextRootStyles(theme)};
+  }
+`;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const readOnlyStyles = theme => css`
+  background: ${theme.palette.figma.disabled.normal};
+  color: ${theme.palette.figma.typography.disabled};
+  border-color: ${theme.palette.figma.border.defaultButton};
+  -webkit-text-fill-color: ${theme.palette.figma.typography.disabled};
+
+  input.Mui-disabled {
+    -webkit-text-fill-color: ${theme.palette.figma.typography.disabled};
+  }
+
+  .dot-chip {
+    background: ${theme.palette.figma.disabled.normal};
+    opacity: 1;
+  }
+`;
+
+const rootClassName$1n = 'dot-text-field';
+const rootSelectClassName = 'dot-select-field';
+const wrapperClassName$2 = 'dot-label-wrapper';
+const labelClassName = 'dot-input-label';
+const errorClassName = 'dot-error';
+const warningClassName = 'dot-warning';
+const successClassName = 'dot-success';
+const adornmentIconClassName = 'dot-adornment-icon';
+const fieldsetClassName = 'MuiOutlinedInput-notchedOutline';
+const readOnlyClassName$1 = 'read-only';
+const resizerClassName = 'with-resizer';
+const ROW_HEIGHT = 37;
+const StyledAdornment = styled(InputAdornment)`
+  .dot-icon {
+    ${adornmentIconStyles()};
+  }
+`;
+const StyledInputLabel = styled(InputLabel)`
+  ${({
+  theme
+}) => css`
+    &.${labelClassName} {
+      margin-bottom: ${theme.spacing(0.5)};
+      transform: none;
+
+      &.Mui-disabled .dot-typography {
+        color: ${theme.palette.figma.typography.disabled};
+      }
+
+      &.Mui-error .dot-typography,
+      &.MuiInputLabel-outlined.Mui-disabled,
+      &.MuiInputLabel-outlined.Mui-disabled .dot-typography {
+        color: ${theme.palette.figma.typography.black};
+      }
+
+      .dot-typography {
+        display: inline;
+      }
+    }
+  `}
+`;
+const StyledTextFieldContainer = styled.div`
+  &.dot-input-text--fullwidth {
+    width: 100%;
+  }
+`;
+const StyledTextField = styled(TextField)`
+  ${({
+  theme,
+  InputProps,
+  $maxRows,
+  $minRows
+}) => css`
+    &.${rootClassName$1n} {
+      .MuiInputBase-root {
+        margin-bottom: 0;
+
+        &:not(.MuiAutocomplete-inputRoot) {
+          &.MuiInputBase-adornedStart {
+            padding-left: ${theme.spacing(1.5)};
+          }
+          &.MuiInputBase-adornedEnd {
+            padding-right: ${theme.spacing(1)};
+          }
+        }
+      }
+      .MuiInputBase-input {
+        box-sizing: content-box;
+      }
+      .MuiOutlinedInput-input {
+        padding: 18px ${InputProps.endAdornment ? '0px' : '12px'} 18px
+          ${InputProps.startAdornment ? '0px' : '12px'};
+        &::placeholder {
+          opacity: 1;
+          color: ${theme.palette.figma.typography.gray};
+        }
+      }
+      .MuiInputBase-inputSizeSmall {
+        padding-top: 10.5px;
+        padding-bottom: 10.5px;
+
+        &:not(textarea) {
+          /* padding above and below together is 21px, and total height should be 40px */
+          height: 19px;
+        }
+      }
+
+      .MuiInputBase-multiline {
+        .MuiInputBase-inputMultiline {
+          padding: 0;
+        }
+
+        &.${resizerClassName} {
+          resize: both;
+          overflow: auto;
+          height: ${$minRows ? ROW_HEIGHT * $minRows : ROW_HEIGHT}px;
+          min-height: ${$minRows ? ROW_HEIGHT * $minRows : ROW_HEIGHT}px;
+          max-height: ${$maxRows ? `${ROW_HEIGHT * $maxRows}px` : 'unset'};
+          min-width: 170px;
+
+          #custom-text-input.MuiInputBase-inputMultiline {
+            height: 100% !important;
+            width: 100%;
+          }
+        }
+      }
+
+      &.${readOnlyClassName$1} .MuiInputBase-root,
+      .MuiInputBase-root.Mui-disabled {
+        ${readOnlyStyles(theme)};
+      }
+
+      .MuiInputBase-adornedEnd .clear-icon-button.hidden {
+        visibility: hidden;
+      }
+
+      .${adornmentIconClassName}.MuiInputAdornment-positionStart {
+        margin-right: ${theme.spacing(0.5)};
+      }
+
+      .${adornmentIconClassName}.MuiInputAdornment-positionEnd {
+        margin: ${theme.spacing(0)};
+      }
+    }
+
+    .dot-select,
+    .dot-input {
+      &.${readOnlyClassName$1}, &.Mui-disabled {
+        ${readOnlyStyles(theme)};
+      }
+    }
+
+    &.${rootSelectClassName} .${adornmentIconClassName} {
+      // inputSelect has an arrow so we need spacing for end adornment
+      margin-right: ${theme.spacing(2)};
+    }
+
+    &.${rootSelectClassName}, &.${rootClassName$1n} {
+      .${adornmentIconClassName} {
+        color: ${theme.palette.figma.icon.black};
+        p {
+          font-size: ${theme.typography.body2.fontSize}px;
+          margin: 0;
+        }
+
+        .dot-icon i {
+          margin-top: -2px;
+        }
+      }
+
+      .MuiInputLabel-root,
+      .MuiInputLabel-root.Mui-error {
+        color: ${theme.palette.figma.typography.gray};
+
+        &.MuiInputLabel-shrink {
+          color: ${theme.palette.figma.typography.black};
+        }
+      }
+
+      .MuiInputBase-root {
+        background: ${theme.palette.figma.neutral.normal};
+        margin-bottom: 0;
+      }
+
+      .MuiInputBase-inputSizeSmall:not(textarea) {
+        height: 19px;
+        padding-top: 10.5px;
+        padding-bottom: 10.5px;
+      }
+
+      select.dot-select {
+        padding-left: ${theme.spacing(1.5)};
+      }
+
+      .MuiSelect-select:focus:not(.${readOnlyClassName$1}) {
+        background-color: transparent;
+      }
+
+      .MuiSelect-icon {
+        right: ${InputProps.endAdornment ? `44px` : `12px`};
+      }
+
+      &.${successClassName} {
+        .MuiOutlinedInput-notchedOutline {
+          border-color: ${theme.palette.figma.success.normal};
+        }
+
+        .${adornmentIconClassName} .dot-icon {
+          color: ${theme.palette.figma.success.normal};
+        }
+      }
+
+      &.${errorClassName} {
+        .MuiOutlinedInput-notchedOutline {
+          border-color: ${theme.palette.figma.destructive.normal};
+        }
+
+        .${adornmentIconClassName} .dot-icon {
+          color: ${theme.palette.figma.destructive.normal};
+        }
+      }
+
+      &.${warningClassName} {
+        .MuiOutlinedInput-notchedOutline {
+          border-color: ${theme.palette.figma.warning.normal};
+        }
+
+        .${adornmentIconClassName} .dot-icon {
+          color: ${theme.palette.figma.warning.normal};
+        }
+      }
+
+      .MuiOutlinedInput-adornedStart {
+        padding-left: 12px;
+
+        &.${warningClassName} .${fieldsetClassName} {
+          border-color: ${theme.palette.figma.warning.normal};
         }
       }
+
+      .MuiFormHelperText-root {
+        ${formHelperTextRootStyles(theme)};
+      }
     }
-  }),
-  typography: Object.assign(Object.assign({}, typographyOptions), {
-    allVariants: Object.assign(Object.assign({}, typographyOptions.allVariants), {
-      color: darkFigmaColors.typography.black
-    }),
-    body2: Object.assign(Object.assign({}, typographyOptions.body2), {
-      color: darkFigmaColors.typography.gray
-    })
-  })
-});
-const lightTheme = createTheme({
-  breakpoints: Object.assign({}, breakpointOptions),
-  palette: {
-    mode: 'light',
-    avatarColors: Object.assign({}, avatarColors),
-    figma: lightFigmaColors,
-    background: {
-      default: n0
-    },
-    primary: {
-      main: b500,
-      '50': b50,
-      '100': b100,
-      '200': b200,
-      '300': b300,
-      '400': b400,
-      '500': b500,
-      '600': b600,
-      '700': b700,
-      '800': b800,
-      '900': b900,
-      A100: bA100,
-      A200: bA200,
-      A400: bA400,
-      A700: bA700
-    },
-    secondary: {
-      main: g500,
-      '50': g50,
-      '100': g100,
-      '200': g200,
-      '300': g300,
-      '400': g400,
-      '500': g500,
-      '600': g600,
-      '700': g700,
-      '800': g800,
-      '900': g900,
-      A100: gA100,
-      A200: gA200,
-      A400: gA400,
-      A700: gA700
-    },
-    error: {
-      main: r500,
-      '50': r50,
-      '100': r100,
-      '200': r200,
-      '300': r300,
-      '400': r400,
-      '500': r500,
-      '600': r600,
-      '700': r700,
-      '800': r800,
-      '900': r900,
-      A100: rA100,
-      A200: rA200,
-      A400: rA400,
-      A700: rA700
-    },
-    warning: {
-      main: o500,
-      '50': o50,
-      '100': o100,
-      '200': o200,
-      '300': o300,
-      '400': o400,
-      '500': o500,
-      '600': o600,
-      '700': o700,
-      '800': o800,
-      '900': o900,
-      A100: oA100,
-      A200: oA200,
-      A400: oA400,
-      A700: oA700
-    },
-    success: {
-      main: g500,
-      '50': g50,
-      '100': g100,
-      '200': g200,
-      '300': g300,
-      '400': g400,
-      '500': g500,
-      '600': g600,
-      '700': g700,
-      '800': g800,
-      '900': g900,
-      A100: gA100,
-      A200: gA200,
-      A400: gA400,
-      A700: gA700
-    },
-    grey: {
-      '50': n50,
-      '100': n100,
-      '200': n200,
-      '300': n300,
-      '400': n400,
-      '500': n500,
-      '600': n600,
-      '700': n700,
-      '800': n800,
-      '900': n900,
-      A100: nA100,
-      A200: nA200,
-      A400: nA400,
-      A700: nA700
-    },
-    purple: {
-      main: p500,
-      '50': p50,
-      '100': p100,
-      '200': p200,
-      '300': p300,
-      '400': p400,
-      '500': p500,
-      '600': p600,
-      '700': p700,
-      '800': p800,
-      '900': p900,
-      A100: pA100,
-      A200: pA200,
-      A400: pA400,
-      A700: pA700
-    },
-    layer: {
-      n0: n0,
-      n50: n50,
-      n100: n100,
-      n200: n200,
-      n300: n300,
-      n400: n400,
-      n500: n500,
-      n600: n600,
-      n700: n700,
-      n800: n800,
-      n900: n900
-    },
-    icon: {
-      checkOutline: b500,
-      emphasized: b300,
-      fileDotted: b500,
-      improve: g500,
-      improveHover: g300,
-      maintain: r500,
-      maintainHover: r300,
-      rogueCommits: o500,
-      unknown: n300,
-      unknownHover: n100
-    },
-    text: {
-      primary: n700
-    },
-    tonalOffset: 0.2
-  },
-  components: Object.assign(Object.assign({}, componentOverrides), {
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          backgroundColor: lightFigmaColors.background.level0.componentsBackground
+  `}
+`;
+
+const rootClassName$1m = 'dot-icon';
+const StyledIcon = styled(Icon)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$1m} {
+      color: ${theme.palette.figma.icon.black};
+      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;
+      }
+
+      &.${warningClassName} {
+        color: ${theme.palette.figma.warning.normal};
+      }
     }
-  }),
-  typography: Object.assign(Object.assign({}, typographyOptions), {
-    allVariants: Object.assign(Object.assign({}, typographyOptions.allVariants), {
-      color: lightFigmaColors.typography.black
-    }),
-    body2: Object.assign(Object.assign({}, typographyOptions.body2), {
-      color: lightFigmaColors.typography.gray
-    })
-  })
-});
-const getThemeFromString = themeOption => {
-  if (themeOption === 'dark') {
-    return darkTheme;
-  }
-  return lightTheme;
-};
-function DotThemeProvider({
-  children,
-  theme = lightTheme
-}) {
-  const userTheme = typeof theme === 'string' ? getThemeFromString(theme) : theme;
-  return jsx(StyledEngineProvider, {
-    injectFirst: true,
-    children: jsx(ThemeProvider, {
-      theme: userTheme,
-      children: jsxs(ThemeProvider$1, {
-        theme: userTheme,
-        children: [jsx(GlobalFonts, {}), children]
+  `}
+`;
+
+const DotIcon = ({
+  ariaLabel,
+  ariaRole = 'img',
+  className,
+  'data-testid': dataTestId,
+  disableInteractive,
+  fontSize = 'medium',
+  iconId,
+  tooltip
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
+  return jsx(DotTooltip, {
+    disableInteractive: disableInteractive,
+    childrenDisplayStyle: "inline-block",
+    title: tooltip,
+    children: jsx(StyledIcon, {
+      "aria-hidden": "false",
+      "aria-label": ariaLabel || `${iconId} icon`,
+      classes: {
+        root: rootClasses
+      },
+      "data-testid": dataTestId,
+      fontSize: fontSize,
+      role: ariaRole,
+      children: jsx("i", {
+        "aria-label": ariaLabel || `${iconId} icon`,
+        className: `icon-${iconId} dot-i`,
+        "data-testid": dataTestId && `${dataTestId}-i`,
+        role: ariaRole
       })
     })
   });
-}
-
-const calculateNumberFromText = text => {
-  const charCodes = text.split('') // => ["A", "A"]
-  .map(char => char.charCodeAt(0)) // => [65, 65]
-  .join(''); // => "6565"
-  return parseInt(charCodes, 10);
-};
-const calculateWidth = width => {
-  if (!width) return;
-  return isString$2(width) ? width : `${width}px`;
 };
-const getAvatarColorForInputText = value => {
-  const colorOptions = [...Object.keys(avatarColors)];
-  if (!value || !colorOptions || colorOptions.length <= 0) return 'default';
-  const numberFromValue = calculateNumberFromText(value);
-  const index = numberFromValue % colorOptions.length;
-  // if number is 9 (transparent), return default color
-  if (index === 9) return 'default';
-  return colorOptions[index];
+
+const rootClassName$1l = 'dot-accordion';
+const summaryClassName = 'dot-accordion-summary';
+const detailClassName = 'dot-accordion-details';
+const StyledAccordion = styled(Accordion)`
+  ${({
+  theme
+}) => css`
+    .${detailClassName} {
+      background: ${theme.palette.figma.background.level1.white};
+    }
+
+    &.${rootClassName$1l} .${summaryClassName} {
+      align-items: center;
+      background: ${theme.palette.figma.background.level1.white};
+      color: ${theme.palette.figma.typography.black};
+      display: flex;
+
+      &.Mui-expanded {
+        border-top: 1px solid ${theme.palette.figma.border.default};
+        margin: 0;
+
+        &:before {
+          opacity: 1;
+        }
+      }
+
+      .MuiAccordionSummary-content {
+        align-items: center;
+        gap: ${theme.spacing(1)};
+        width: calc(100% - ${theme.spacing(5)});
+
+        .dot-tooltip {
+          overflow: hidden;
+        }
+      }
+
+      .MuiAccordionSummary-expandIconWrapper {
+        padding: ${theme.spacing(1.5)};
+        margin-right: ${theme.spacing(-1.5)};
+      }
+
+      .MuiTypography-root {
+        margin-bottom: 0;
+      }
+      .MuiTypography-body1 {
+        padding: 2px 0;
+      }
+    }
+  `}
+`;
+
+const DotAccordion = ({
+  actions,
+  ariaLabel,
+  children,
+  className,
+  'data-pendoid': dataPendoId = rootClassName$1l,
+  'data-testid': dataTestId = 'dot-accordion',
+  disabled = false,
+  expanded,
+  hasElevation = false,
+  onChange,
+  square = false,
+  startIcon = null,
+  summary,
+  noWrap = true
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
+  const [elevation, setElevation] = useState();
+  useEffect(() => {
+    if (onChange && expanded === undefined) {
+      console.warn('The use of an `onChange` callback makes this a controlled component but no `expanded` state has been provided. In effect, this makes the component disabled.');
+    }
+  }, []);
+  useEffect(() => {
+    setElevation(hasElevation ? 1 : 0);
+  }, [hasElevation]);
+  return jsxs(StyledAccordion, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    disabled: disabled,
+    elevation: elevation,
+    expanded: onChange ? expanded : undefined,
+    onChange: onChange,
+    square: square,
+    children: [jsxs(AccordionSummary, {
+      "aria-label": ariaLabel || summary,
+      classes: {
+        root: summaryClassName
+      },
+      "data-testid": `${dataTestId}-summary`,
+      expandIcon: jsx(DotIcon, {
+        iconId: "chevron-down"
+      }),
+      role: "button",
+      children: [startIcon, jsx(DotTooltip, {
+        "data-testid": "accordion-tooltip",
+        title: noWrap ? summary : '',
+        children: jsx(DotTypography, {
+          noWrap: noWrap,
+          variant: "body1",
+          children: summary
+        })
+      })]
+    }), jsx(AccordionDetails, {
+      classes: {
+        root: detailClassName
+      },
+      "data-testid": `${dataTestId}-details`,
+      children: children
+    }), actions && jsx(AccordionActions, {
+      children: actions
+    })]
+  });
 };
-const isString$2 = str => typeof str === 'string';
-const isLowerCase = str => str === str.toLowerCase();
-const isNumber = num => typeof num === 'number';
-const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
-  return isString$2(content) ? jsx(DotTypography, {
-    variant: typographyVariant,
-    children: content
-  }) : content;
+
+const rootClassName$1k = 'dot-action-toolbar';
+const StyledToolbar = styled(Toolbar)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$1k} {
+      border-bottom: 1px solid ${theme.palette.figma.border.default};
+
+      .${rootClassName$1n} .MuiInputBase-root {
+        margin-bottom: 0;
+      }
+    }
+  `}
+`;
+
+const DotActionToolbar = ({
+  ariaLabel,
+  children,
+  className,
+  'data-testid': dataTestId,
+  variant = 'dense'
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
+  return jsx(StyledToolbar, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-testid": dataTestId,
+    variant: variant,
+    children: children
+  });
 };
-const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
-const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
 const rootClassName$1j = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
@@ -2612,6 +2614,7 @@ const DotAvatar = ({
   ariaRole = 'img',
   className,
   component = 'div',
+  disableInteractive,
   color,
   'data-testid': dataTestId,
   iconId,
@@ -2634,6 +2637,7 @@ const DotAvatar = ({
     return 'default';
   };
   return jsx(DotTooltip, {
+    disableInteractive: disableInteractive,
     childrenDisplayStyle: "inline-block",
     title: tooltip,
     children: jsx(StyledAvatar, {
@@ -2758,6 +2762,7 @@ const DotButton = forwardRef(({
   'data-pendoid': dataPendoId = rootClassName$1g,
   'data-testid': dataTestId,
   disabled = false,
+  disableInteractive,
   disableRipple = false,
   endIcon,
   fullWidth = false,
@@ -2795,6 +2800,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     "data-testid": `${dataTestId || rootClassName$1g}-tooltip`,
+    disableInteractive: disableInteractive,
     placement: tooltipPlacement,
     title: tooltip,
     children: jsx(StyledButton, {
@@ -3730,6 +3736,7 @@ const DotIconButton = ({
   color = 'inherit',
   'data-pendoid': dataPendoId = rootClassName$17,
   'data-testid': dataTestId,
+  disableInteractive,
   disableRipple = false,
   disabled = false,
   iconId,
@@ -3745,10 +3752,11 @@ const DotIconButton = ({
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     "data-testid": "icon-button-tooltip",
+    disableInteractive: disableInteractive,
     placement: tooltipPlacement,
     title: tooltip,
     children: jsx(StyledIconButton, {
-      "aria-label": ariaLabel || tooltip || `${iconId} icon button`,
+      "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : isString$2(tooltip) ? tooltip.toString() : `${iconId} icon button`,
       classes: {
         root: rootClasses
       },
@@ -4498,6 +4506,7 @@ const DotCopyButton = ({
   copyTooltip = 'Copy to clipboard',
   'data-pendoid': dataPendoId = rootClassName$14,
   'data-testid': dataTestId = 'dot-copy-button',
+  disableInteractive,
   disabled = false,
   disableRipple = false,
   iconId = 'duplicate',
@@ -4554,6 +4563,7 @@ const DotCopyButton = ({
       "data-pendoid": dataPendoId,
       "data-testid": `${dataTestId}-button`,
       disabled: disabled || timedDisabled,
+      disableInteractive: disableInteractive,
       disableRipple: disableRipple,
       iconId: iconId,
       iconSize: iconSize,
@@ -4564,6 +4574,7 @@ const DotCopyButton = ({
     }), timedShowCopiedIcon && jsx(DotIcon, {
       className: `copied-to-clipboard button-size-${size}`,
       "data-testid": `${dataTestId}-icon`,
+      disableInteractive: disableInteractive,
       fontSize: iconSize,
       iconId: "check-solid",
       tooltip: copiedTooltip
@@ -6106,7 +6117,13 @@ const DotSidebar = ({
     }), collapsable && jsx("div", {
       className: "toggle-nav",
       children: jsx(DotTooltip, {
-        title: (isOpen ? 'Collapse' : 'Expand') + ` ${collapseKeys[0].toUpperCase()}`,
+        ariaLabel: `${isOpen ? 'Collapse' : 'Expand'} ${collapseKeys[0].toUpperCase()}`,
+        title: jsxs(Fragment, {
+          children: [isOpen ? 'Collapse' : 'Expand', jsx(DotAnnotation, {
+            content: collapseKeys[0].toUpperCase(),
+            type: "secondary"
+          })]
+        }),
         placement: "right",
         children: jsx(DotIconButton, {
           ariaLabel: "collapse sidebar navigation",
@@ -6386,6 +6403,7 @@ const DotAppToolbar = ({
       variant: item.badgeVariant,
       children: jsx(DotIconButton, {
         className: item.className,
+        disableInteractive: true,
         "data-testid": "dot-app-toolbar-icon-button",
         iconId: item.iconId,
         iconSize: "medium",
@@ -6415,6 +6433,7 @@ const DotAppToolbar = ({
       children: [jsx("div", {
         className: "dot-main-menu-btn",
         children: jsx(DotIconButton, {
+          disableInteractive: true,
           "data-testid": "main-menu-icon",
           iconId: menuOpen ? 'close' : 'menu',
           iconSize: "medium",
@@ -6456,6 +6475,7 @@ const DotAppToolbar = ({
       // href
       customLogo ? customLogo : jsx(DotTooltip, {
         "data-testid": "logo-tooltip",
+        disableInteractive: true,
         title: primaryLogoHref ? 'digital.ai' : '',
         children: jsx(ForwardRef, {
           className: !primaryLogoHref ? 'primary-logo' : ''
@@ -7789,6 +7809,7 @@ const DotButtonToggle = ({
     iconId: optionIconId,
     text: optionText,
     tooltip: optionTooltip,
+    disableInteractive: optionDisableInteractive,
     value: optionValue
   }, key) => {
     const commonProps = {
@@ -7821,7 +7842,8 @@ const DotButtonToggle = ({
     const children = getChildren();
     return optionTooltip ? jsx(TooltipToggleButton, Object.assign({}, commonProps, {
       CustomTooltipProps: {
-        title: optionTooltip
+        title: optionTooltip,
+        disableInteractive: optionDisableInteractive
       },
       value: optionValue,
       children: children
@@ -8546,6 +8568,7 @@ const DotDialog = ({
         className: cancelClasses,
         "data-pendoid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-pendoid'],
         "data-testid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-testid'],
+        disableInteractive: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disableInteractive,
         disableRipple: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disableRipple,
         disabled: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disabled,
         endIcon: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.endIcon,
@@ -8559,6 +8582,7 @@ const DotDialog = ({
         className: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.className,
         "data-pendoid": secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps['data-pendoid'],
         "data-testid": secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps['data-testid'],
+        disableInteractive: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.disableInteractive,
         disableRipple: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.disableRipple,
         disabled: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.disabled,
         endIcon: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.endIcon,
@@ -8572,6 +8596,7 @@ const DotDialog = ({
         className: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.className,
         "data-pendoid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-pendoid'],
         "data-testid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-testid'],
+        disableInteractive: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disableInteractive,
         disableRipple: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disableRipple,
         disabled: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled,
         endIcon: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.endIcon,
@@ -13529,6 +13554,7 @@ const DotProgressButton = ({
   'data-pendoid': dataPendoId = rootClassName$x,
   'data-testid': dataTestId,
   disabled = false,
+  disableInteractive,
   disableRipple = false,
   fullWidth = false,
   isLoading = false,
@@ -13544,10 +13570,11 @@ const DotProgressButton = ({
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
   return jsxs(StyledProgressButton, {
-    ariaLabel: ariaLabel || tooltip,
+    ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : isString$2(tooltip) ? `${tooltip}` : undefined,
     className: rootClasses,
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
+    disableInteractive: disableInteractive,
     disableRipple: disableRipple,
     disabled: isButtonDisabled,
     fullWidth: fullWidth,
@@ -15024,6 +15051,7 @@ const DotSplitButton = ({
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
+  disableInteractive,
   disablePortal,
   disableRipple = false,
   fullWidth = false,
@@ -15064,6 +15092,7 @@ const DotSplitButton = ({
         className: "label-button",
         "data-pendoid": dataPendoId,
         "data-testid": dataTestId,
+        disableInteractive: disableInteractive,
         disableRipple: disableRipple,
         disabled: isMainOptionDisabled,
         isSubmit: isSubmit,
@@ -15077,6 +15106,7 @@ const DotSplitButton = ({
         className: "expand-button",
         "data-pendoid": dataPendoId && `${dataPendoId}-expand`,
         "data-testid": dataTestId && `${dataTestId}-expand`,
+        disableInteractive: disableInteractive,
         disableRipple: disableRipple,
         disabled: isMenuButtonDisabled,
         onClick: () => setOpen(!open),