@digital-ai/dot-components 4.20.2 → 4.21.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { useEffect, useState, useRef, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
+import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide, Stack } 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';
@@ -1382,7 +1382,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1o = 'dot-text-field';
+const rootClassName$1p = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
@@ -1436,7 +1436,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1o} {
+    &.${rootClassName$1p} {
       .MuiInputBase-root {
         margin-bottom: 0;
 
@@ -1520,7 +1520,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1o} {
+    &.${rootSelectClassName}, &.${rootClassName$1p} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -1621,13 +1621,13 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1n = 'dot-icon';
+const rootClassName$1o = 'dot-icon';
 const aiIconClassName = 'dot-icon-ai';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1n} {
+    &.${rootClassName$1o} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -1677,7 +1677,7 @@ const DotIcon = ({
   tooltip,
   ai = false
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1n, className, ai ? aiIconClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1o, className, ai ? aiIconClassName : '');
   return jsx(DotTooltip, {
     disableInteractive: disableInteractive,
     childrenDisplayStyle: "inline-block",
@@ -1701,7 +1701,7 @@ const DotIcon = ({
   });
 };
 
-const rootClassName$1m = 'dot-accordion';
+const rootClassName$1n = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -1712,7 +1712,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1m} .${summaryClassName} {
+    &.${rootClassName$1n} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -1757,7 +1757,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1m,
+  'data-pendoid': dataPendoId = rootClassName$1n,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -1768,7 +1768,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -1819,15 +1819,15 @@ const DotAccordion = ({
   });
 };
 
-const rootClassName$1l = 'dot-action-toolbar';
+const rootClassName$1m = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1l} {
+    &.${rootClassName$1m} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1o} .MuiInputBase-root {
+      .${rootClassName$1p} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -1841,7 +1841,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1851,12 +1851,12 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$1k = 'dot-alert-banner';
+const rootClassName$1l = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1l} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1891,7 +1891,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1k,
+  'data-pendoid': dataPendoId = rootClassName$1l,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1899,7 +1899,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1l, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -1942,12 +1942,12 @@ const DotAppLogo = ({
   });
 };
 
-const rootClassName$1j = 'dot-annotation';
+const rootClassName$1k = 'dot-annotation';
 const StyledAnnotation = styled.kbd`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1k} {
       font-family: inherit;
       background-color: ${theme.palette.figma.background.level0.bckgGray};
       color: ${theme.palette.figma.typography.disabled};
@@ -1973,13 +1973,13 @@ const StyledAnnotation = styled.kbd`
 
 const DotAnnotation = ({
   ariaLabel,
-  'data-pendoid': dataPendoId = rootClassName$1j,
+  'data-pendoid': dataPendoId = rootClassName$1k,
   'data-testid': dataTestId,
   className,
   content,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className, type === 'secondary' ? 'secondary' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className, type === 'secondary' ? 'secondary' : '');
   return jsx(StyledAnnotation, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2624,7 +2624,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1i = 'dot-avatar';
+const rootClassName$1j = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2634,7 +2634,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1j} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2747,7 +2747,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2788,12 +2788,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1h = 'dot-button';
+const rootClassName$1i = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1i} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2946,7 +2946,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1h,
+  'data-pendoid': dataPendoId = rootClassName$1i,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -2964,7 +2964,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   let color;
   let variant;
   switch (type) {
@@ -2995,7 +2995,7 @@ const DotButton = forwardRef(({
   }
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
-    "data-testid": `${dataTestId || rootClassName$1h}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1i}-tooltip`,
     disableInteractive: disableInteractive,
     placement: tooltipPlacement,
     title: tooltip,
@@ -3007,7 +3007,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1h,
+      "data-testid": dataTestId || rootClassName$1i,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -3027,10 +3027,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1g = 'dot-link';
+const rootClassName$1h = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1h} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -3046,7 +3046,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1h,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -3059,7 +3059,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -3110,7 +3110,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1f = 'dot-list';
+const rootClassName$1g = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -3118,7 +3118,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1f} {
+      &.${rootClassName$1g} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -3182,6 +3182,7 @@ const getChevronIcon = (nestedListType, isOpened) => {
 // if the sidebar should be open or closed based on what target the user clicks
 const excludedClassNames = ['MuiPaper-root', 'MuiTypography-overline'];
 const shouldToggleOpen = classNames => {
+  if (!isString$2(classNames)) return false;
   return !excludedClassNames.some(className => classNames.includes(className));
 };
 
@@ -3211,12 +3212,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1e = 'dot-progress';
+const rootClassName$1f = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -3267,7 +3268,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3333,13 +3334,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$1d = 'dot-popper';
+const rootClassName$1e = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3398,7 +3399,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$1d}, &.${rootClassName$1d} > .dot-popper-paper {
+    &.${rootClassName$1e}, &.${rootClassName$1e} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3428,12 +3429,12 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$1c = 'dot-menu';
+const rootClassName$1d = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3443,7 +3444,7 @@ const StyledPopper = styled(Popper)`
 }) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}      
       }
     }
-    &.${rootClassName$1c}, &.${rootClassName$1d} {
+    &.${rootClassName$1d}, &.${rootClassName$1e} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3523,14 +3524,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$1b = 'dot-ul';
+const rootClassName$1c = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1c} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3632,7 +3633,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3744,7 +3745,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3832,12 +3833,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$1a = 'dot-drawer';
+const rootClassName$1b = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} .MuiBackdrop-root {
+    &.${rootClassName$1b} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3856,12 +3857,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$19 = 'dot-drawer-header';
+const rootClassName$1a = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3872,13 +3873,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$18 = 'dot-icon-btn';
+const rootClassName$19 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3964,7 +3965,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$18,
+  'data-pendoid': dataPendoId = rootClassName$19,
   'data-testid': dataTestId,
   disableInteractive,
   disableRipple = false,
@@ -3978,7 +3979,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$18, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     "data-testid": "icon-button-tooltip",
@@ -4015,7 +4016,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -4032,10 +4033,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$17 = 'dot-drawer-body';
+const rootClassName$18 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$18} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -4056,7 +4057,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4071,12 +4072,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$16 = 'dot-drawer-footer';
+const rootClassName$17 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -4089,7 +4090,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4105,7 +4106,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$1a,
+  'data-pendoid': dataPendoId = rootClassName$1b,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -4128,7 +4129,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   const backdropEnabled = variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
   const headerExists = !!drawerHeaderProps;
   const bodyPendoId = drawerBodyProps ? drawerBodyProps['data-pendoid'] : 'drawer-body';
@@ -4603,7 +4604,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4703,12 +4704,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$15 = 'dot-copy-button';
+const rootClassName$16 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} .copied-to-clipboard {
+    &.${rootClassName$16} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4734,7 +4735,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$15,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId = 'dot-copy-button',
   disableInteractive,
   disabled = false,
@@ -4783,7 +4784,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$15,
+    className: rootClassName$16,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4890,7 +4891,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1o,
+  'data-pendoid': dataPendoId = rootClassName$1p,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4939,7 +4940,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1o, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1p, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -5081,10 +5082,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$14 = 'dot-search-input';
+const rootClassName$15 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
     }
   `}
 `;
@@ -5101,7 +5102,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -5357,12 +5358,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$13 = 'dot-app-switcher';
+const rootClassName$14 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5472,7 +5473,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5850,12 +5851,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$12 = 'dot-sidebar';
+const rootClassName$13 = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -6149,10 +6150,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$11 = 'dot-truncate-with-tooltip';
+const rootClassName$12 = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -6183,7 +6184,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -6297,7 +6298,7 @@ const DotSidebar = ({
     keys: collapseKeys
   }, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$12, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6372,12 +6373,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$10 = 'dot-badge';
+const rootClassName$11 = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -6412,7 +6413,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -6434,7 +6435,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$$ = 'dot-app-toolbar';
+const rootClassName$10 = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6474,7 +6475,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6603,7 +6604,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6755,12 +6756,12 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$_ = 'dot-chip';
+const rootClassName$$ = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6866,7 +6867,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$_,
+  'data-pendoid': dataPendoId = rootClassName$$,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6880,7 +6881,7 @@ const DotChip = ({
   tooltipProps
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className, errorClass);
   const isTruncated = charactersLimit > 0 && children.length > charactersLimit;
   const getChipLabelWithTooltip = label => jsx(DotTooltip, Object.assign({}, tooltipProps, {
     hoverVisibility: "always",
@@ -6916,7 +6917,7 @@ const DotChip = ({
   });
 };
 
-const rootClassName$Z = 'dot-autocomplete';
+const rootClassName$_ = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const inputAiClassName = 'dot-input-ai';
@@ -6924,7 +6925,7 @@ const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -7030,11 +7031,14 @@ const isEmptyValue = value => {
     return !value;
   }
 };
-const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$Z, size === 'medium' && inputMediumClassName, className);
-const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1o, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
+const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$_, size === 'medium' && inputMediumClassName, className);
+const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1p, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
 const getInputRootClassNames = isDense => useStylesWithRootClass(inputRootClassName, !isDense && inputMediumClassName);
 const getDefaultAutoCompleteValue = (hasMultiple, defaultValue) => hasMultiple && isString$2(defaultValue) ? [defaultValue] : defaultValue;
 const getAutoCompleteGroupBy = group => group ? option => option.group : undefined;
+const isTitleEqual = (option, value) => {
+  return typeof value === 'string' ? option.title === value : option.title === (value === null || value === void 0 ? void 0 : value.title);
+};
 
 function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
   return ariaLabel || label || placeholder;
@@ -7049,7 +7053,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$Z,
+  'data-pendoid': dataPendoId = rootClassName$_,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -7067,7 +7071,7 @@ const DotAutoComplete = ({
   inputId,
   inputRef,
   inputValue,
-  isOptionEqualToValue,
+  isOptionEqualToValue = isTitleEqual,
   label,
   loading,
   maxHeight,
@@ -7114,7 +7118,7 @@ const DotAutoComplete = ({
   const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), ai ? inputAiClassName : '');
   const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
   const inputRootClasses = getInputRootClassNames(dense);
-  const popperClasses = useStylesWithRootClass(rootClassName$1d, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1e, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -7441,10 +7445,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$Y = 'dot-avatar-group';
+const rootClassName$Z = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$Y} {
+      &.${rootClassName$Z} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -7463,7 +7467,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7478,14 +7482,14 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$X = 'dot-avatar-with-details';
+const rootClassName$Y = 'dot-avatar-with-details';
 const StyledAvatarWithDetails = styled.div`
   ${({
   theme,
   $maxSubtitleLines,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       gap: ${theme.spacing(2)};
       display: flex;
       align-items: center;
@@ -7521,12 +7525,12 @@ const DotAvatarWithDetails = ({
   ariaLabel,
   avatar,
   className,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId,
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   const titleClasses = useStylesWithRootClass('dot-avatar-with-details-title', title.maxLines ? 'max-lines-clamp' : '');
   const subtitleClasses = useStylesWithRootClass('dot-avatar-with-details-subtitle', (subtitle === null || subtitle === void 0 ? void 0 : subtitle.maxLines) ? 'max-lines-clamp' : '');
   return jsxs(StyledAvatarWithDetails, {
@@ -7561,13 +7565,13 @@ const DotAvatarWithDetails = ({
   });
 };
 
-const rootClassName$W = 'dot-breadcrumbs';
+const rootClassName$X = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -7587,7 +7591,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7915,7 +7919,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$W,
+        root: rootClassName$X,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7946,14 +7950,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$V = 'dot-button-toggle';
+const rootClassName$W = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -8076,7 +8080,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-pendoid': dataPendoId = rootClassName$W,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -8086,7 +8090,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -8171,12 +8175,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$U = 'dot-card';
+const rootClassName$V = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -8188,7 +8192,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -8217,12 +8221,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$T = 'dot-card-footer';
+const rootClassName$U = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$U} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -8234,7 +8238,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -8243,13 +8247,13 @@ const DotCardFooter = ({
   });
 };
 
-const rootClassName$S = 'dot-card-header';
+const rootClassName$T = 'dot-card-header';
 const StyledCardHeader = styled(CardHeader)`
   ${({
   theme,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       .MuiCardHeader-content {
         overflow-x: hidden;
 
@@ -8281,7 +8285,7 @@ const DotCardHeader = ({
   titleMaxLines = 1,
   titleSize = 'large'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   const nonSmallTitleSize = titleSize === 'medium' ? 'h3' : 'h2';
   const titleVariant = titleSize === 'small' ? 'h4' : nonSmallTitleSize;
   const subheaderVariant = subheaderSize === 'small' ? 'body2' : 'body1';
@@ -8317,9 +8321,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$R = 'dot-form-control-label';
+const rootClassName$S = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$R} {
+  &.${rootClassName$S} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -8342,12 +8346,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$Q = 'dot-checkbox';
+const rootClassName$R = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$R} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -8366,7 +8370,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$R,
+  'data-pendoid': dataPendoId = rootClassName$S,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -8381,14 +8385,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$Q
+      root: rootClassName$R
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8417,13 +8421,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$P = 'dot-form-group';
+const rootClassName$Q = 'dot-form-group';
 const groupLabelClassName = 'dot-form-group-label';
 const startAdornmentClassName = 'dot-start-adornment';
 const endAdornmentClassName = 'dot-end-adornment';
 const placementClassName = 'dot-';
 const StyledFormControl = styled(FormControl)`
-  &.${rootClassName$P} {
+  &.${rootClassName$Q} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -8454,7 +8458,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$O = 'dot-checkbox-group';
+const rootClassName$P = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -8463,7 +8467,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$O} {
+      .${rootClassName$P} {
         width: 100%;
       }
 
@@ -8490,7 +8494,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$R} {
+        .${rootClassName$S} {
           margin: 0;
         }
       }
@@ -8498,13 +8502,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$N = 'dot-form-group';
+const rootClassName$O = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$N} > * {
+    &.${rootClassName$O} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -8517,7 +8521,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -8556,7 +8560,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$P, rootClassName$O, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, rootClassName$P, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -8641,12 +8645,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$M = 'chip-list';
+const rootClassName$N = 'chip-list';
 const StyledChipList = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$N} {
       display: flex;
       gap: ${theme.spacing(1)};
     }
@@ -8721,19 +8725,19 @@ function DotChipList({
     setChips(itemElements);
   }, [items, maxChars]);
   return jsx(StyledChipList, {
-    className: rootClassName$M,
+    className: rootClassName$N,
     "data-testid": dataTestId,
     style: style,
     children: chips
   });
 }
 
-const rootClassName$L = 'dot-dialog';
+const rootClassName$M = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$M} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -8779,7 +8783,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$L,
+  'data-pendoid': dataPendoId = rootClassName$M,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -8793,7 +8797,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   const hasSecondaryAction = !!secondaryButtonProps;
@@ -8930,7 +8934,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$K = 'dot-grid';
+const rootClassName$L = 'dot-grid';
 const frGetter = value => typeof value === 'number' ? `repeat(${value}, 1fr)` : value;
 const breakpointsGetter$1 = (theme, columnsBreakpoints, columnGap, rowGap) => `${theme.breakpoints.up('xs')} {
     column-gap: ${`${columnGap.xs}px`};
@@ -8990,10 +8994,11 @@ const Grid = ({
   children,
   isLoading
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
   return jsxs("div", {
     className: rootClasses,
     children: [children, isLoading && jsx(DotProgress, {
+      ariaLabel: "Loading more data",
       className: "loading-more-data",
       color: "inherit",
       size: 20
@@ -9013,7 +9018,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$L} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -9284,12 +9289,12 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$J = 'dot-pill';
+const rootClassName$K = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$K} {
       background-color: ${({
   backgroundcolor,
   variant
@@ -9413,7 +9418,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$J, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -10989,18 +10994,18 @@ function addAutoHideDuration(severity) {
   return severity === 'error' ? null : 10000;
 }
 
-const rootClassName$I = 'dot-snackbar';
+const rootClassName$J = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1k} {
+      .${rootClassName$1l} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -11053,7 +11058,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -11123,10 +11128,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$H = 'dot-snackbar-container';
+const rootClassName$I = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -11158,10 +11163,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$H,
+    className: rootClassName$I,
     children: jsx("div", {
-      className: rootClassName$H,
-      "data-testid": rootClassName$H,
+      className: rootClassName$I,
+      "data-testid": rootClassName$I,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoCloseOnAction: autoCloseOnAction,
@@ -11235,12 +11240,12 @@ const useEnqueueErrorMessage = error => {
   }, [error]);
 };
 
-const rootClassName$G = 'dot-dashboard-details';
+const rootClassName$H = 'dot-dashboard-details';
 const StyledDashboardDetails = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$H} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -11366,7 +11371,7 @@ const DotDashboardDetailsView = ({
   modifiedAuthorUser
 }) => {
   var _a, _b;
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   const closeHandler = useCallback(event => {
     onClose && onClose(event);
   }, [onClose]);
@@ -11782,6 +11787,7 @@ function DotDashboardDialog({
   onContinue,
   title
 }) {
+  var _a;
   const [isDirty, setIsDirty] = useState(false);
   const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
   const [nameError, setNameError] = useState(null);
@@ -11858,13 +11864,19 @@ function DotDashboardDialog({
     const useFormValues = Object.assign(Object.assign({}, formValues), {
       id: (editDashboard === null || editDashboard === void 0 ? void 0 : editDashboard.parent_id) ? editDashboard === null || editDashboard === void 0 ? void 0 : editDashboard.parent_id : editDashboard === null || editDashboard === void 0 ? void 0 : editDashboard.id
     });
-    const validName = yield validateName(useFormValues.name);
-    // If we fail name validation, set the nameError and don't call the submit function because it will fail.
-    if (validName) {
-      yield onSubmit(useFormValues, isDone);
-    }
-    isSubmittingRef.current = false;
-    setIsLoadingSubmit(false);
+    yield cancelablePromise(validateName(useFormValues.name)).then(validName => {
+      // If we fail name validation, set the nameError and don't call
+      // the submit function because it will fail.
+      if (validName) {
+        cancelablePromise(onSubmit(useFormValues, isDone)).then(() => {
+          isSubmittingRef.current = false;
+          setIsLoadingSubmit(false);
+        });
+      } else {
+        isSubmittingRef.current = false;
+        setIsLoadingSubmit(false);
+      }
+    });
   }), [formValues, editDashboard, validateName]);
   const handleMouseDown = () => {
     isSubmittingRef.current = true;
@@ -11904,11 +11916,9 @@ function DotDashboardDialog({
     const availableCategoryOptions = [];
     if (availableCategories) {
       availableCategories.forEach(category => {
-        if (!categories.includes(category)) {
-          availableCategoryOptions.push({
-            title: category
-          });
-        }
+        availableCategoryOptions.push({
+          title: category
+        });
       });
     }
     return availableCategoryOptions;
@@ -11953,7 +11963,7 @@ function DotDashboardDialog({
     }, message)), jsx(DotInputText, {
       autoFocus: true,
       "data-testid": "dashboard-dialog-name-input",
-      error: nameError || name.length > DASHBOARD_NAME_MAX_LENGTH,
+      error: !!nameError || name.length > DASHBOARD_NAME_MAX_LENGTH,
       helperText: nameError || name.length > DASHBOARD_NAME_MAX_LENGTH && `Name must be ${DASHBOARD_NAME_MAX_LENGTH} characters or less`,
       id: "name",
       label: "Dashboard name",
@@ -11987,7 +11997,7 @@ function DotDashboardDialog({
         "data-testid": "dashboard-dialog-apptype-input",
         name: "Select application",
         disabled: isDisabled('apptype'),
-        value: editDashboard.target_apps[0]
+        value: ((_a = editDashboard.target_apps) === null || _a === void 0 ? void 0 : _a.length) > 0 ? editDashboard.target_apps[0] : undefined
       })]
     }), jsx(DotTypography, {
       variant: "h3",
@@ -12028,12 +12038,12 @@ function DotDashboardDialog({
   });
 }
 
-const rootClassName$F = 'dot-impact-dialog';
+const rootClassName$G = 'dot-impact-dialog';
 const StyledImpactDialog = styled(DotDialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$F} {
+    &.${rootClassName$G} {
       .high-impact-default-content {
         margin-top: ${theme.spacing(2)};
         margin-bottom: ${theme.spacing(3)};
@@ -12139,7 +12149,7 @@ const DotImpactDialog = ({
     }
     return '';
   }, [action, capitalize, impact, record]);
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   return jsx(StyledImpactDialog, {
     "data-testid": dataTestId,
     className: rootClasses,
@@ -12751,8 +12761,7 @@ function DotDashboardOptionsMenu({
     return updateDashboard(dashboard, {
       name: data.name,
       description: data.description,
-      categories: data.categories,
-      target_apps: data.target_apps
+      categories: data.categories
     }).then(result => {
       if (result && 'id' in result) {
         setIsEditPropertiesDialogOpen(false);
@@ -13482,7 +13491,7 @@ function DotDashboardHeader({
   });
 }
 
-const rootClassName$E = 'dot-empty-state';
+const rootClassName$F = 'dot-empty-state';
 const emptyStateImageSizing = {
   xsmall: 9,
   dense: 15,
@@ -13553,9 +13562,9 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
-const rootClassName$D = 'dot-illustration';
+const rootClassName$E = 'dot-illustration';
 const StyledIllustration = styled.span`
-  &.${rootClassName$D} {
+  &.${rootClassName$E} {
     display: inline-block;
   }
 `;
@@ -13572,17 +13581,17 @@ const DotIllustration = ({
   tooltip,
   tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     title: tooltip,
     placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$D}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$E}-tooltip`,
     children: jsx(StyledIllustration, {
       "aria-hidden": "false",
       "aria-label": ariaLabel || title || 'Illustration',
       className: rootClasses,
-      "data-testid": dataTestId || rootClassName$D,
+      "data-testid": dataTestId || rootClassName$E,
       role: ariaRole,
       children: jsx("img", {
         alt: alt || 'Illustration',
@@ -13608,7 +13617,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: `${rootClasses} ${size}`,
@@ -13689,20 +13698,20 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$R} {
+      .${rootClassName$S} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$C = 'dot-date-picker';
+const rootClassName$D = 'dot-date-picker';
 const popperClassName = 'dot-date-picker-popper';
 const containerClassName$2 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
 const StyledDatePickerContainer = styled.div`
   ${() => css`
-    &.${rootClassName$C} .full-width {
+    &.${rootClassName$D} .full-width {
       width: 100%;
     }
   `}
@@ -13711,7 +13720,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$C} {
+    &.${rootClassName$D} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13751,7 +13760,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$B = 'dot-time-picker';
+const rootClassName$C = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
 const TIME_SELECTION_WIDTH_SPACING = 14.5;
@@ -13822,7 +13831,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$B} {
+    &.${rootClassName$C} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13841,36 +13850,36 @@ const StyledTimePicker = styled(TimePicker)`
   `}
 `;
 
-const rootClassName$A = 'dot-form';
+const rootClassName$B = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$A} {
+    &.${rootClassName$B} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$P},
-        .${rootClassName$R},
-        .${rootClassName$1o},
+      .${rootClassName$Q},
+        .${rootClassName$S},
+        .${rootClassName$1p},
         .${rootSelectClassName},
-        .${rootClassName$C},
-        .${rootClassName$B} {
+        .${rootClassName$D},
+        .${rootClassName$C} {
         margin: ${theme.spacing(1, 0)};
       }
 
       .${wrapperClassName$2} {
-        + .${rootClassName$1o},
+        + .${rootClassName$1p},
         .${wrapperClassName$2}
         + .${rootSelectClassName},
         .${wrapperClassName$2}
-        + .${rootClassName$C},
+        + .${rootClassName$D},
         .${wrapperClassName$2}
-        + .${rootClassName$B} {
+        + .${rootClassName$C} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$O}, .${groupClassName} {
-        .${rootClassName$R} {
+      .${rootClassName$P}, .${groupClassName} {
+        .${rootClassName$S} {
           margin: 0;
         }
       }
@@ -13885,7 +13894,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -13898,10 +13907,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$z = 'dot-dynamic-form';
+const rootClassName$A = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$A} {
     }
   `}
 `;
@@ -14081,12 +14090,12 @@ const checkIfFormDataValid = formState => {
   return true;
 };
 
-const rootClassName$y = 'dot-progress-button';
+const rootClassName$z = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$y} {
+    &.${rootClassName$z} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -14111,7 +14120,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$y,
+  'data-pendoid': dataPendoId = rootClassName$z,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -14125,7 +14134,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -14155,12 +14164,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$x = 'dot-radio';
+const rootClassName$y = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$x} {
+    &.${rootClassName$y} {
       padding: 8px;
 
       svg {
@@ -14178,7 +14187,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$R,
+  'data-pendoid': dataPendoId = rootClassName$S,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -14191,7 +14200,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -14199,7 +14208,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$x
+      root: rootClassName$y
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -14245,7 +14254,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -14310,7 +14319,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$w = 'dot-switch';
+const rootClassName$x = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -14339,7 +14348,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$w,
+  'data-pendoid': dataPendoId = rootClassName$x,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -14349,7 +14358,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -14379,7 +14388,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$R,
+    className: rootClassName$S,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -14700,7 +14709,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
   // Memoize this operation so that is doesn't get executed each time this
   // component re-renders
   const initialFormState = useMemo(() => getInitialFormState(config, liveValidation), [config, liveValidation, getInitialFormState]);
@@ -14946,7 +14955,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$v = 'dot-inline-edit';
+const rootClassName$w = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -14958,7 +14967,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$w} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -15172,7 +15181,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$v,
+  'data-pendoid': dataPendoId = rootClassName$w,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -15208,7 +15217,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -15396,13 +15405,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$u = 'dot-navigation-rail';
+const rootClassName$v = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$v} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -15461,7 +15470,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -15512,12 +15521,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$t = 'dot-skeleton';
+const rootClassName$u = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$u} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -15532,7 +15541,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -15547,12 +15556,12 @@ const DotSkeleton = ({
   });
 };
 
-const rootClassName$s = 'dot-split-button-group';
+const rootClassName$t = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$t} {
       &.outlined,
       &.text {
         .expand-button {
@@ -15618,7 +15627,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$s,
+  'data-pendoid': dataPendoId = rootClassName$t,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -15634,7 +15643,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$s, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$t, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -15702,7 +15711,7 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$r = 'dot-stepper';
+const rootClassName$s = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
@@ -15710,7 +15719,7 @@ const StyledStepper = styled.div`
   theme,
   offset
 }) => css`
-    &.${rootClassName$r} {
+    &.${rootClassName$s} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -16025,7 +16034,7 @@ const DotStepper = ({
       return ['left', 'right'].includes(stepsPosition) ? stepsPosition : 'left';
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$r, getStepsPosition(), className);
+  const rootClasses = useStylesWithRootClass(rootClassName$s, getStepsPosition(), className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
@@ -16243,12 +16252,12 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$q = 'dot-table-pagination-custom-actions';
+const rootClassName$r = 'dot-table-pagination-custom-actions';
 const StyledTablePaginationCustomActions = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$r} {
       margin-left: ${theme.spacing(2.5)};
       display: flex;
       align-items: center;
@@ -16372,7 +16381,7 @@ const DotTablePaginationCustomActions = props => {
     });
   };
   return jsxs(StyledTablePaginationCustomActions, {
-    className: rootClassName$q,
+    className: rootClassName$r,
     children: [jsx(DotIconButton, {
       ariaLabel: "previous page",
       className: "page-control-button",
@@ -16419,7 +16428,7 @@ const DotTablePaginationCustomActions = props => {
   });
 };
 
-const rootClassName$p = 'dot-table-pagination';
+const rootClassName$q = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -16427,7 +16436,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$p} {
+    .${rootClassName$q} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -16470,7 +16479,7 @@ const DotTablePagination = ({
   showJumpToPageActionButton = false,
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$q, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -16479,7 +16488,7 @@ const DotTablePagination = ({
   };
   return (/* Container is used to pass 'typography' prop to a styled component */
     jsx(StyledTablePagination, {
-      className: rootClassName$p,
+      className: rootClassName$q,
       typography: typography,
       children: jsx(TablePagination, {
         ActionsComponent: showJumpToPageActionButton ? DotTablePaginationCustomActions : undefined,
@@ -16506,14 +16515,14 @@ const DotTablePagination = ({
   );
 };
 
-const rootClassName$o = 'dot-table';
+const rootClassName$p = 'dot-table';
 const MULTISELECT_COLUMN_WIDTH = 52;
 const COLLAPSIBLE_COLUMN_WIDTH = 42;
 const StyledPaper$1 = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$p} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -16656,10 +16665,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$n = 'dot-tbody';
+const rootClassName$o = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$o} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -16854,12 +16863,12 @@ function stableSort(array, comparator) {
   return stabilizedThis.map(el => el[0]);
 }
 
-const rootClassName$m = 'dot-td';
+const rootClassName$n = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$m} {
+    &.${rootClassName$n} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -16954,7 +16963,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -17022,13 +17031,13 @@ const EmptyDotRow = ({
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$l = 'dot-th-checkbox';
+const rootClassName$m = 'dot-th-checkbox';
 const styledTableHeaderCheckboxElement = (isCell = true) => {
   return styled(isCell ? TableCell : 'div')`
     ${({
     theme
   }) => css`
-      &.${rootClassName$l} {
+      &.${rootClassName$m} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
         padding: ${theme.spacing(0, 1)};
         width: ${theme.spacing(5)};
@@ -17056,7 +17065,7 @@ const DotHeaderCheckboxCell = ({
   isFromTableSelectionToolbar,
   multiSelectHeader
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$l, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$m, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
   const [multiSelectState, setMultiSelectState] = useState('unchecked');
   const {
     onCheckAllChange,
@@ -17106,12 +17115,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$k = 'dot-th';
+const rootClassName$l = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$l} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -17151,7 +17160,7 @@ const DotHeaderCell = ({
   value,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$k, pinned ? 'dot-pinned-cell' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$l, pinned ? 'dot-pinned-cell' : '', className);
   const headerTitle = isString$2(value) ? value : null;
   const formattedValue = getFormattedTableCellValue(value, typography);
   const getCellValue = () => {
@@ -17242,12 +17251,12 @@ const DotHeaderRow = ({
   });
 };
 
-const rootClassName$j = 'dot-tr';
+const rootClassName$k = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$j} {
+    &.${rootClassName$k} {
       &.selected {
         &,
         .dot-td.dot-pinned-cell,
@@ -17473,12 +17482,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$i = 'dot-td-checkbox';
+const rootClassName$j = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$i} {
+    &.${rootClassName$j} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -17497,7 +17506,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -17550,7 +17559,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$j, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$k, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -17671,7 +17680,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$n
+        root: rootClassName$o
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -17686,12 +17695,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$h = 'dot-table-selection-toolbar';
+const rootClassName$i = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$h} {
+    &.${rootClassName$i} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -17746,7 +17755,7 @@ const DotTableSelectionToolbar = ({
   multiSelectHeader,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -17825,7 +17834,14 @@ const DotTable = ({
     order,
     rowsPerPage
   }));
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
+  // If the 'page' prop provided has changed since initial render, we need to update
+  // the `tablePage` state so that it's passed to the TablePagination component.
+  useEffect(() => {
+    if (page !== tablePage) {
+      setPage(page);
+    }
+  }, [page]);
+  const rootClasses = useStylesWithRootClass(rootClassName$p, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
   const updateData = (newOrder, newOrderBy, newPage, newRowsPerPage) => {
     const newData = stableSort(data, getComparator(newOrder, newOrderBy));
     setPageData(newRowsPerPage ? newData.slice(newPage * newRowsPerPage, newPage * newRowsPerPage + newRowsPerPage) : newData);
@@ -18028,7 +18044,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$g = 'dot-table-actions';
+const rootClassName$h = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -18118,7 +18134,7 @@ const DotTableActions = ({
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$g,
+      className: rootClassName$h,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -18142,12 +18158,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$f = 'dot-tabs';
+const rootClassName$g = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$f} {
+    &.${rootClassName$g} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -18200,7 +18216,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$f,
+  'data-pendoid': dataPendoId = rootClassName$g,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -18209,7 +18225,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$g, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -18263,9 +18279,9 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$e = 'dot-file-upload';
-const containerClassName = `${rootClassName$e}-container`;
-const dropZoneClassName = `${rootClassName$e}-drop-zone`;
+const rootClassName$f = 'dot-file-upload';
+const containerClassName = `${rootClassName$f}-container`;
+const dropZoneClassName = `${rootClassName$f}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
@@ -18285,7 +18301,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$e}.${dropZoneClassName} {
+    &.${rootClassName$f}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -18310,18 +18326,19 @@ const StyledFileUpload = styled.div`
 
         i.dot-i {
           height: 100px;
+          width: 100px;
         }
       }
     }
   `}
 `;
 
-const rootClassName$d = 'dot-file-list-item';
+const rootClassName$e = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$d} {
+    &.${rootClassName$e} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -18333,7 +18350,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$d}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$e}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -18343,7 +18360,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$d}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$e}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -18385,7 +18402,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$d, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$e, className, error ? 'file-error' : 'file-success');
   const defaultIcon = error ? 'error-solid' : 'check-solid';
   const [endIcon, setEndIcon] = useState(defaultIcon);
   const handleItemClick = clickedFile => _event => onClick === null || onClick === void 0 ? void 0 : onClick(clickedFile);
@@ -18418,7 +18435,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$d}-end-icon`,
+      className: `${rootClassName$e}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -18542,7 +18559,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$e,
+  'data-pendoid': dataPendoId = rootClassName$f,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -18555,7 +18572,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$e, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$f, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
   const maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
   const allowMultiple = maxFiles === undefined || maxFiles > 1;
   const setNewlyUploadedFiles = (acceptedFiles, fileRejections) => {
@@ -18627,12 +18644,12 @@ const DotFileUpload = ({
   });
 };
 
-const rootClassName$c = 'dot-divider';
+const rootClassName$d = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$c} {
+    &.${rootClassName$d} {
       color: ${theme.palette.figma.border.darker};
 
       .MuiDivider-light {
@@ -18652,7 +18669,7 @@ const DotDivider = ({
   orientation,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$d, className);
   return jsx(StyledDivider, {
     absolute: absolute,
     "aria-label": ariaLabel,
@@ -18681,7 +18698,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -18746,14 +18763,14 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const rootClassName$b = 'dot-draggable-list';
+const rootClassName$c = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
   ${({
   theme,
   draggableHandle
 }) => css`
-    &.${rootClassName$b} {
+    &.${rootClassName$c} {
       padding: ${theme.spacing(1, 0)};
       position: relative;
 
@@ -18788,7 +18805,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$b,
+  'data-pendoid': dataPendoId = rootClassName$c,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -18797,7 +18814,7 @@ const DotDraggableList = ({
   rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
   width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$b, className, draggableHandle ? 'with-draggable-handle' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$c, className, draggableHandle ? 'with-draggable-handle' : '');
   const listItemClasses = useStylesWithRootClass(listItemClassName, draggableHandle && !disableDrag ? 'with-handle-grab-cursor' : '', draggableHandle || disableDrag ? 'with-default-cursor' : '');
   const listWidth = isNumber(width) ? `${width}px` : width;
   const [orderedItems, setOrderedItems] = useState([]);
@@ -52147,7 +52164,7 @@ cjs.exports.DraggableCore = DraggableCore;
 
 var Draggable$1 = cjs.exports;
 
-const rootClassName$a = 'dot-draggable-window';
+const rootClassName$b = 'dot-draggable-window';
 const defaultWidth = '600px';
 const defaultHeight = '324px';
 const StyledPaper = styled(Paper)`
@@ -52156,7 +52173,7 @@ const StyledPaper = styled(Paper)`
   $maxHeight,
   $maxWidth
 }) => css`
-    &.${rootClassName$a} {
+    &.${rootClassName$b} {
       max-width: ${$maxWidth !== null && $maxWidth !== void 0 ? $maxWidth : defaultWidth};
       max-height: ${$maxHeight !== null && $maxHeight !== void 0 ? $maxHeight : defaultHeight};
       ${$maxWidth ? '' : `width: ${defaultWidth};`}
@@ -52194,7 +52211,7 @@ const StyledPaper = styled(Paper)`
 const DotDraggableWindow = ({
   ariaLabel,
   anchorEl,
-  'data-pendoid': dataPendoId = rootClassName$a,
+  'data-pendoid': dataPendoId = rootClassName$b,
   'data-testid': dataTestId,
   className,
   children,
@@ -52203,7 +52220,7 @@ const DotDraggableWindow = ({
   onClose,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$b, className);
   const nodeRef = useRef(null);
   return jsx(Draggable$1, {
     bounds: "body",
@@ -52245,12 +52262,12 @@ const DotDraggableWindow = ({
   });
 };
 
-const rootClassName$9 = 'dot-linear-progress';
+const rootClassName$a = 'dot-linear-progress';
 const StyledLinearProgress = styled(LinearProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$9} {
+    &.${rootClassName$a} {
       &.MuiLinearProgress-colorError {
         color: ${theme.palette.figma.inProgress.error};
       }
@@ -52282,7 +52299,7 @@ const DotLinearProgress = ({
   valueBuffer,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$9, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
@@ -52333,7 +52350,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$C,
+  'data-pendoid': dataPendoId = rootClassName$D,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -52374,7 +52391,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$C, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -52594,7 +52611,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$B,
+  'data-pendoid': dataPendoId = rootClassName$C,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -52626,7 +52643,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$C, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -52918,13 +52935,13 @@ const DotTimePicker = ({
   });
 };
 
-const rootClassName$8 = 'dot-carousel';
+const rootClassName$9 = 'dot-carousel';
 const StyledCarousel = styled.div`
   ${({
   backgroundColor,
   theme
 }) => css`
-    &.${rootClassName$8} {
+    &.${rootClassName$9} {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -53024,7 +53041,7 @@ const DotCarousel = ({
   progressIndicator,
   showPagesButtons = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$8, className, backgroundColor ? 'with-background-color' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$9, className, backgroundColor ? 'with-background-color' : '');
   const rightNavigationButtonClasses = useStylesWithRootClass('carousel-right-arrow', displayNavigationButtons);
   const leftNavigationButtonClasses = useStylesWithRootClass('carousel-left-arrow', displayNavigationButtons);
   const createUuids = () => {
@@ -53175,13 +53192,13 @@ const DotCarousel = ({
   });
 };
 
-const rootClassName$7 = 'dot-sticky-with-border';
+const rootClassName$8 = 'dot-sticky-with-border';
 const StyledStickyWithBorder = styled.div`
   ${({
   pinnedStickyBorder,
   unpinnedStickyBorder
 }) => css`
-    &.${rootClassName$7} {
+    &.${rootClassName$8} {
       position: sticky;
       top: -1px;
 
@@ -53209,7 +53226,7 @@ const DotStickyWithBorder = ({
 }) => {
   const [isPinned, setIsPinned] = useState(false);
   const ref = useRef();
-  const rootClasses = useStylesWithRootClass(rootClassName$7, className, isPinned ? 'pinned' : 'unpinned');
+  const rootClasses = useStylesWithRootClass(rootClassName$8, className, isPinned ? 'pinned' : 'unpinned');
   useEffect(() => {
     const element = ref.current;
     const observer = new IntersectionObserver(([e]) => setIsPinned(e.intersectionRatio < 1), {
@@ -53231,18 +53248,18 @@ const DotStickyWithBorder = ({
   });
 };
 
-const rootClassName$6 = 'dot--board';
+const rootClassName$7 = 'dot--board';
 const classNames$5 = {
-  root: rootClassName$6,
-  spacingNormal: `${rootClassName$6}-normal`,
-  spacingDense: `${rootClassName$6}-dense`,
-  loading: `${rootClassName$6}-loading`
+  root: rootClassName$7,
+  spacingNormal: `${rootClassName$7}-normal`,
+  spacingDense: `${rootClassName$7}-dense`,
+  loading: `${rootClassName$7}-loading`
 };
 const StyledBoard = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$6} {
+    &.${rootClassName$7} {
       display: flex;
       overflow-x: auto;
       flex: 1;
@@ -53250,7 +53267,7 @@ const StyledBoard = styled.div`
     }
 
     @media (max-width: 650px) {
-      &.${rootClassName$6} {
+      &.${rootClassName$7} {
         justify-content: center;
       }
     }
@@ -53351,18 +53368,18 @@ const Board = React__default.forwardRef(({
   });
 });
 
-const rootClassName$5 = 'dot--board-column';
+const rootClassName$6 = 'dot--board-column';
 const classNames$4 = {
-  root: rootClassName$5,
-  spacingNormal: `${rootClassName$5}-normal`,
-  spacingDense: `${rootClassName$5}-dense`,
-  collapse: `${rootClassName$5}-collapse`
+  root: rootClassName$6,
+  spacingNormal: `${rootClassName$6}-normal`,
+  spacingDense: `${rootClassName$6}-dense`,
+  collapse: `${rootClassName$6}-collapse`
 };
 const StyledBoardColumn = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$5} {
+    &.${rootClassName$6} {
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -53453,13 +53470,13 @@ const BoardColumn = React__default.forwardRef(({
   });
 });
 
-const rootClassName$4 = 'dot--board-column-header';
+const rootClassName$5 = 'dot--board-column-header';
 const classNames$3 = {
-  root: rootClassName$4,
-  spacingNormal: `${rootClassName$4}-normal`,
-  spacingDense: `${rootClassName$4}-dense`,
-  colorBar: `${rootClassName$4}-color-bar`,
-  title: `${rootClassName$4}-title`
+  root: rootClassName$5,
+  spacingNormal: `${rootClassName$5}-normal`,
+  spacingDense: `${rootClassName$5}-dense`,
+  colorBar: `${rootClassName$5}-color-bar`,
+  title: `${rootClassName$5}-title`
 };
 const StyledBoardColumnHeader = styled.div`
   ${({
@@ -53527,11 +53544,11 @@ const BoardColumnHeader = ({
   });
 };
 
-const rootClassName$3 = 'dot--board-column-items';
+const rootClassName$4 = 'dot--board-column-items';
 const classNames$2 = {
-  root: rootClassName$3,
-  spacingNormal: `${rootClassName$3}-normal`,
-  spacingDense: `${rootClassName$3}-dense`
+  root: rootClassName$4,
+  spacingNormal: `${rootClassName$4}-normal`,
+  spacingDense: `${rootClassName$4}-dense`
 };
 const StyledBoardColumnItems = styled.div`
   ${({
@@ -53583,11 +53600,11 @@ const BoardColumnItems = ({
   });
 };
 
-const rootClassName$2 = 'dot--board-column-action-bar';
+const rootClassName$3 = 'dot--board-column-action-bar';
 const classNames$1 = {
-  root: rootClassName$2,
-  spacingNormal: `${rootClassName$2}-normal`,
-  spacingDense: `${rootClassName$2}-dense`
+  root: rootClassName$3,
+  spacingNormal: `${rootClassName$3}-normal`,
+  spacingDense: `${rootClassName$3}-dense`
 };
 const StyledBoardColumnActionBar = styled(DotActionToolbar)`
   ${({
@@ -53658,13 +53675,13 @@ const BoardColumnCollapse = ({
   return useMemo(() => collapsed ? children : null, [children, collapsed]);
 };
 
-const rootClassName$1 = 'dot--board-column-header';
+const rootClassName$2 = 'dot--board-column-header';
 const classNames = {
-  root: rootClassName$1,
-  spacingNormal: `${rootClassName$1}-normal`,
-  spacingDense: `${rootClassName$1}-dense`,
-  title: `${rootClassName$1}-title`,
-  text: `${rootClassName$1}-text`
+  root: rootClassName$2,
+  spacingNormal: `${rootClassName$2}-normal`,
+  spacingDense: `${rootClassName$2}-dense`,
+  title: `${rootClassName$2}-title`,
+  text: `${rootClassName$2}-text`
 };
 const StyledBoardColumnSummary = styled.div`
   ${({
@@ -53726,12 +53743,12 @@ const BoardColumnSummary = ({
   });
 };
 
-const rootClassName = 'dot-search';
+const rootClassName$1 = 'dot-search';
 const StyledSearch = styled(DotInputText)`
   ${({
   theme
 }) => css`
-    &.${rootClassName} {
+    &.${rootClassName$1} {
       &.with-value .MuiInputBase-root {
         background-color: ${theme.palette.figma.primary.light};
 
@@ -53774,7 +53791,7 @@ const DotSearch = _a => {
       value
     } = _a,
     rest = __rest(_a, ["ariaLabel", "className", 'data-testid', "disabled", "hasDebounce", "id", "name", "onSearch", "onClear", "placeholder", "value"]);
-  const rootClasses = useStylesWithRootClass(rootClassName, className, value ? 'with-value' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1, className, value ? 'with-value' : '');
   return jsx(StyledSearch, Object.assign({}, rest, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -53793,4 +53810,126 @@ const DotSearch = _a => {
   }));
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };
+const rootClassName = 'dot-toggle-switch';
+const StyledToggleSwitch = styled(Stack)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName} {
+      gap: ${theme.spacing(2)};
+      cursor: pointer;
+
+      .dot-options {
+        height: ${theme.spacing(3.5)};
+        border-radius: 999px;
+        background-color: ${theme.palette.figma.background.level1.deep};
+
+        &:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 2px
+              ${theme.palette.figma.background.level0.bckgWhite},
+            0 0 0 4px ${theme.palette.figma.primary.normal};
+        }
+
+        .dot-chip-container {
+          display: flex;
+          gap: ${theme.spacing(0.25)};
+          margin: ${theme.spacing(0.25)};
+
+          .dot-toggle-switch-chip {
+            height: ${theme.spacing(3)};
+            user-select: none;
+            cursor: pointer;
+
+            .MuiChip-label {
+              padding: ${theme.spacing(0, 1)};
+            }
+
+            &:not(.selected) {
+              background-color: transparent;
+            }
+          }
+        }
+      }
+
+      &.dot-disabled {
+        &,
+        .dot-toggle-switch-chip {
+          cursor: default !important;
+        }
+
+        .dot-toggle-switch-label {
+          color: ${theme.palette.figma.typography.disabled};
+        }
+      }
+    }
+  `}
+`;
+
+const DotToggleSwitch = ({
+  ariaLabel,
+  className,
+  'data-pendoid': dataPendoId = rootClassName,
+  'data-testid': dataTestId,
+  disabled = false,
+  label,
+  onChange,
+  options,
+  value
+}) => {
+  const toggleOptions = options.slice(0, 2);
+  const isChecked = toggleOptions[1].value === value;
+  const rootClasses = useStylesWithRootClass(rootClassName, className, disabled ? 'dot-disabled' : '');
+  const toggleValue = () => {
+    const [firstOption, secondOption] = toggleOptions;
+    const newValue = value === firstOption.value ? secondOption.value : firstOption.value;
+    onChange(newValue);
+  };
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      toggleValue();
+    }
+  };
+  return jsxs(StyledToggleSwitch, {
+    className: rootClasses,
+    "data-testid": dataTestId,
+    "data-pendoid": dataPendoId,
+    direction: "row",
+    alignItems: "center",
+    display: "inline-flex",
+    onClick: disabled ? undefined : toggleValue,
+    onKeyDown: handleKeyDown,
+    children: [jsx("div", {
+      "aria-label": ariaLabel,
+      "aria-checked": isChecked,
+      className: "dot-options",
+      role: "switch",
+      tabIndex: disabled ? -1 : 0,
+      children: jsx("div", {
+        className: "dot-chip-container",
+        children: toggleOptions.map(({
+          text: optionText,
+          value: optionValue
+        }) => {
+          const isSelected = value === optionValue;
+          const chipClasses = useStylesWithRootClass('dot-toggle-switch-chip', isSelected ? 'selected' : '');
+          return jsx(Chip, {
+            className: chipClasses,
+            color: isSelected && !disabled ? 'primary' : 'default',
+            "data-testid": dataTestId ? `${dataTestId}-chip-${optionValue}` : undefined,
+            label: optionText,
+            tabIndex: -1,
+            variant: "filled"
+          }, optionValue.toString());
+        })
+      })
+    }), label && jsx(DotTypography, {
+      className: "dot-toggle-switch-label",
+      variant: "body1",
+      children: label
+    })]
+  });
+};
+
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotToggleSwitch, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };