@digital-ai/dot-components 5.7.0 → 5.9.0

package/index.esm.js

@@ -2,7 +2,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, Fab, LinearProgress, Slide, Stack, Select } from '@mui/material';
-import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
+import styled, { keyframes, css, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import '@digital-ai/dot-icons';
 import jwt_decode from 'jwt-decode';
@@ -42,14 +42,49 @@ const checkIfOverflowPresentInElementTree = element => {
   return false;
 };
 
-const rootClassName$1t = 'dot-typography';
+const rootClassName$1v = 'dot-typography';
+const shimmer = keyframes`
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+`;
 const StyledTypography = styled(Typography)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1t} {
+    &.${rootClassName$1v} {
       &.dot-typography-ai {
         background: ${theme.palette.figma.gradient.ai};
+      }
+
+      &.dot-typography-shimmer {
+        background-image: linear-gradient(
+          134deg,
+          #111 0%,
+          #aaa 40%,
+          #ddd 50%,
+          #aaa 60%,
+          #111 100%
+        );
+        background-size: 200% 100%;
+        animation: ${shimmer} 1.5s infinite linear;
+      }
+
+      &.dot-typography-ai.dot-typography-shimmer {
+        background-image: linear-gradient(
+            134deg,
+            transparent 30%,
+            #ddd 50%,
+            transparent 70%
+          ),
+          ${theme.palette.figma.gradient.ai};
+      }
+
+      &.dot-typography-shimmer,
+      &.dot-typography-ai {
         background-clip: text;
         -webkit-background-clip: text;
         color: transparent;
@@ -69,11 +104,12 @@ const DotTypography = ({
   'data-testid': dataTestId,
   children,
   component,
+  hasShimmer,
   noMarginBottom,
   noWrap,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1t, ai ? 'dot-typography-ai' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1v, ai ? 'dot-typography-ai' : '', hasShimmer ? 'dot-typography-shimmer' : '', className);
   useEffect(() => {
     if (ariaRole === 'heading' && !ariaLevel) {
       console.warn('please include ariaLevel when using ariaRole="heading"');
@@ -1409,7 +1445,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1s = 'dot-text-field';
+const rootClassName$1u = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
@@ -1485,7 +1521,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1s} {
+    &.${rootClassName$1u} {
       .MuiInputBase-root {
         margin-bottom: 0;
 
@@ -1574,7 +1610,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1s} {
+    &.${rootSelectClassName}, &.${rootClassName$1u} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.gray};
 
@@ -1669,13 +1705,13 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1r = 'dot-icon';
+const rootClassName$1t = 'dot-icon';
 const aiIconClassName = 'dot-icon-ai';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1r} {
+    &.${rootClassName$1t} {
       color: ${theme.palette.figma.icon.gray};
       font-size: 20px;
 
@@ -1684,7 +1720,7 @@ const StyledIcon = styled(Icon)`
         width: 20px;
       }
 
-      &.MuiIcon-fontSizeLarge {
+      &.dot-icon-large {
         font-size: 24px;
 
         i {
@@ -1692,7 +1728,8 @@ const StyledIcon = styled(Icon)`
           width: 24px;
         }
       }
-      &.MuiIcon-fontSizeSmall {
+
+      &.dot-icon-small {
         font-size: 18px;
 
         i {
@@ -1701,6 +1738,15 @@ const StyledIcon = styled(Icon)`
         }
       }
 
+      &.dot-icon-xs {
+        font-size: 12px;
+
+        i {
+          height: 12px;
+          width: 12px;
+        }
+      }
+
       &.${warningClassName} {
         color: ${theme.palette.figma.warning.normal};
       }
@@ -1725,7 +1771,7 @@ const DotIcon = ({
   tooltip,
   ai = false
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1r, className, ai ? aiIconClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1t, className, ai ? aiIconClassName : '', `dot-icon-${fontSize}`);
   return jsx(DotTooltip, {
     disableInteractive: disableInteractive,
     childrenDisplayStyle: "inline-block",
@@ -1737,7 +1783,6 @@ const DotIcon = ({
         root: rootClasses
       },
       "data-testid": dataTestId,
-      fontSize: fontSize,
       role: ariaRole,
       children: jsx("i", {
         "aria-label": ariaLabel || `${iconId} icon`,
@@ -1749,7 +1794,7 @@ const DotIcon = ({
   });
 };
 
-const rootClassName$1q = 'dot-accordion';
+const rootClassName$1s = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -1760,7 +1805,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1q} .${summaryClassName} {
+    &.${rootClassName$1s} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -1805,7 +1850,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1q,
+  'data-pendoid': dataPendoId = rootClassName$1s,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -1816,7 +1861,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1s, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -1867,15 +1912,15 @@ const DotAccordion = ({
   });
 };
 
-const rootClassName$1p = 'dot-action-toolbar';
+const rootClassName$1r = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1p} {
+    &.${rootClassName$1r} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1s} .MuiInputBase-root {
+      .${rootClassName$1u} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -1889,7 +1934,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1p, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1r, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1899,12 +1944,12 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$1o = 'dot-alert-banner';
+const rootClassName$1q = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1o} {
+    &.${rootClassName$1q} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1939,7 +1984,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1o,
+  'data-pendoid': dataPendoId = rootClassName$1q,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1947,7 +1992,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1o, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1q, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -1990,12 +2035,12 @@ const DotAppLogo = ({
   });
 };
 
-const rootClassName$1n = 'dot-annotation';
+const rootClassName$1p = 'dot-annotation';
 const StyledAnnotation = styled.kbd`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1n} {
+    &.${rootClassName$1p} {
       font-family: inherit;
       background-color: ${theme.palette.figma.background.level0.bckgGray};
       color: ${theme.palette.figma.typography.disabled};
@@ -2021,13 +2066,13 @@ const StyledAnnotation = styled.kbd`
 
 const DotAnnotation = ({
   ariaLabel,
-  'data-pendoid': dataPendoId = rootClassName$1n,
+  'data-pendoid': dataPendoId = rootClassName$1p,
   'data-testid': dataTestId,
   className,
   content,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1n, className, type === 'secondary' ? 'secondary' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1p, className, type === 'secondary' ? 'secondary' : '');
   return jsx(StyledAnnotation, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2076,6 +2121,19 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -2260,7 +2318,7 @@ function getResponseBody$1(response) {
     return null;
   });
 }
-function catchErrors$1(options, result) {
+function catchErrors(options, result) {
   const errors = Object.assign({
     400: 'Bad Request',
     401: 'Unauthorized',
@@ -2297,7 +2355,7 @@ function request$1(options) {
       statusText: response.statusText,
       body: responseHeader || responseBody
     };
-    catchErrors$1(options, result);
+    catchErrors(options, result);
     return result;
   });
 }
@@ -2664,8 +2722,9 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1m = 'dot-avatar';
+const rootClassName$1o = 'dot-avatar';
 const avatarSpacing = {
+  xs: 2,
   small: 3,
   medium: 5,
   large: 7
@@ -2674,7 +2733,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1m} {
+    &.${rootClassName$1o} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2704,17 +2763,22 @@ const StyledAvatar = styled(Avatar)`
         margin-bottom: 0;
       }
 
-      &.small {
+      &.dot-size-xs {
+        height: ${theme.spacing(avatarSpacing.xs)};
+        width: ${theme.spacing(avatarSpacing.xs)};
+      }
+
+      &.dot-size-small {
         height: ${theme.spacing(avatarSpacing.small)};
         width: ${theme.spacing(avatarSpacing.small)};
       }
 
-      &.medium {
+      &.dot-size-medium {
         height: ${theme.spacing(avatarSpacing.medium)};
         width: ${theme.spacing(avatarSpacing.medium)};
       }
 
-      &.large {
+      &.dot-size-large {
         height: ${theme.spacing(avatarSpacing.large)};
         width: ${theme.spacing(avatarSpacing.large)};
       }
@@ -2752,7 +2816,7 @@ const AvatarContent = ({
     }
   };
   const getHeadingFromAvatarSize = () => size === 'large' ? 'h1' : 'h3';
-  const getIconFontSizeFromAvatarSize = () => size === 'small' ? size : 'medium';
+  const getIconFontSizeFromAvatarSize = () => ['xs', 'small'].includes(size) ? size : 'medium';
   if (type === 'icon' || type === 'image' && !imageSrc) {
     return jsx(DotIcon, {
       ai: ai,
@@ -2764,7 +2828,7 @@ const AvatarContent = ({
   if (type === 'text') {
     return jsx(DotTypography, {
       ai: ai,
-      variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize(),
+      variant: ['xs', 'small'].includes(size) ? 'caption' : getHeadingFromAvatarSize(),
       children: parsedNumber() || parsedText()
     });
   }
@@ -2792,7 +2856,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1o, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2806,7 +2870,7 @@ const DotAvatar = ({
     children: jsx(StyledAvatar, {
       alt: alt,
       "aria-label": ariaLabel || alt,
-      className: size,
+      className: `dot-size-${size}`,
       classes: {
         root: rootClasses,
         img: 'dot-img'
@@ -2834,12 +2898,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1l = 'dot-button';
+const rootClassName$1n = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1l} {
+    &.${rootClassName$1n} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2992,7 +3056,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1l,
+  'data-pendoid': dataPendoId = rootClassName$1n,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -3010,7 +3074,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
   let color;
   let variant;
   switch (type) {
@@ -3041,7 +3105,7 @@ const DotButton = forwardRef(({
   }
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
-    "data-testid": `${dataTestId || rootClassName$1l}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1n}-tooltip`,
     disableInteractive: disableInteractive,
     placement: tooltipPlacement,
     title: tooltip,
@@ -3053,7 +3117,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1l,
+      "data-testid": dataTestId || rootClassName$1n,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -3073,10 +3137,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1k = 'dot-link';
+const rootClassName$1m = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1m} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -3092,7 +3156,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1k,
+  'data-pendoid': dataPendoId = rootClassName$1m,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -3105,7 +3169,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -3156,7 +3220,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1j = 'dot-list';
+const rootClassName$1l = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -3164,7 +3228,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1j} {
+      &.${rootClassName$1l} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -3258,14 +3322,27 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1i = 'dot-progress';
+const rootClassName$1k = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
-  theme
+  theme,
+  $aiProgressGradientId
 }) => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1k} {
       line-height: 0;
 
+      .dot-progress-with-ai-wrapper {
+        position: relative;
+        display: inline-flex;
+
+        .dot-avatar {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+
       .dot-progress-with-label-wrapper {
         position: relative;
         display: inline-flex;
@@ -3290,6 +3367,10 @@ const StyledProgress = styled.div`
       }
 
       .dot-circular-progress {
+        & .MuiCircularProgress-circle {
+          stroke: ${$aiProgressGradientId ? `url(#${$aiProgressGradientId})` : undefined};
+        }
+
         &.MuiCircularProgress-colorPrimary {
           color: ${theme.palette.figma.inProgress.normal};
         }
@@ -3302,7 +3383,40 @@ const StyledProgress = styled.div`
   `}
 `;
 
+const AiGradientSvg = ({
+  id
+}) => jsx("svg", {
+  width: 0,
+  height: 0,
+  children: jsx("defs", {
+    children: jsxs("linearGradient", {
+      id: id,
+      x1: "0%",
+      y1: "0%",
+      x2: "100%",
+      y2: "100%",
+      children: [jsx("stop", {
+        offset: "0%",
+        stopColor: "#DBD1FA"
+      }), jsx("stop", {
+        offset: "25%",
+        stopColor: "rgba(182,163,245,0.4)"
+      }), jsx("stop", {
+        offset: "50%",
+        stopColor: "#9275F0"
+      }), jsx("stop", {
+        offset: "100%",
+        stopColor: "#E44EB9"
+      })]
+    })
+  })
+});
+
+const AI_PROGRESS_GRADIENT_ID = 'dot-progress-ai-gradient';
+const AI_PROGRESS_SIZE = 24;
+const AI_PROGRESS_THICKNESS = 2;
 const DotProgress = ({
+  ai,
   ariaLabel,
   color = 'secondary',
   className,
@@ -3314,7 +3428,9 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
+  const calculatedSize = ai ? AI_PROGRESS_SIZE : size;
+  const calculatedThickness = ai ? AI_PROGRESS_THICKNESS : thickness;
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3327,8 +3443,8 @@ const DotProgress = ({
       color: color,
       "data-testid": dataTestId,
       role: "progressbar",
-      size: size,
-      thickness: thickness,
+      size: calculatedSize,
+      thickness: calculatedThickness,
       value: value,
       variant: variant
     });
@@ -3338,8 +3454,8 @@ const DotProgress = ({
         children: [jsx(CircularProgress, {
           "aria-label": "background progress",
           className: "dot-progress-background",
-          size: size,
-          thickness: thickness,
+          size: calculatedSize,
+          thickness: calculatedThickness,
           value: 100,
           variant: "determinate"
         }), circularProgress]
@@ -3347,19 +3463,40 @@ const DotProgress = ({
     }
     return circularProgress;
   };
-  return jsx(StyledProgress, {
-    className: rootClasses,
-    children: jsx(DotTooltip, {
-      title: tooltip,
-      children: hasPercentageLabel ? jsxs("div", {
+  const renderProgress = () => {
+    if (ai) {
+      return jsxs("div", {
+        className: "dot-progress-with-ai-wrapper",
+        children: [renderCircularProgress(true), jsx(DotAvatar, {
+          ai: true,
+          alt: "AI Avatar",
+          iconId: "ai",
+          size: "xs",
+          type: "icon"
+        })]
+      });
+    }
+    if (hasPercentageLabel) {
+      return jsxs("div", {
         className: "dot-progress-with-label-wrapper",
         children: [renderCircularProgress(true), jsxs(DotTypography, {
           className: "progress-label-typography",
           variant: "caption",
           children: [value, "%"]
         })]
-      }) : renderCircularProgress()
-    })
+      });
+    }
+    return renderCircularProgress();
+  };
+  return jsxs(StyledProgress, {
+    className: rootClasses,
+    "$aiProgressGradientId": ai ? AI_PROGRESS_GRADIENT_ID : undefined,
+    children: [ai && jsx(AiGradientSvg, {
+      id: AI_PROGRESS_GRADIENT_ID
+    }), jsx(DotTooltip, {
+      title: tooltip,
+      children: renderProgress()
+    })]
   });
 };
 
@@ -3380,13 +3517,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$1h = 'dot-popper';
+const rootClassName$1j = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1j} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3445,7 +3582,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$1h}, &.${rootClassName$1h} > .dot-popper-paper {
+    &.${rootClassName$1j}, &.${rootClassName$1j} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3475,12 +3612,12 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$1g = 'dot-menu';
+const rootClassName$1i = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1j} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3490,7 +3627,7 @@ const StyledPopper = styled(Popper)`
 }) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}
       }
     }
-    &.${rootClassName$1g}, &.${rootClassName$1h} {
+    &.${rootClassName$1i}, &.${rootClassName$1j} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3570,14 +3707,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$1f = 'dot-ul';
+const rootClassName$1h = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1h} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3679,7 +3816,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3791,7 +3928,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3879,12 +4016,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$1e = 'dot-drawer';
+const rootClassName$1g = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} .MuiBackdrop-root {
+    &.${rootClassName$1g} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3903,12 +4040,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$1d = 'dot-drawer-header';
+const rootClassName$1f = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1f} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3919,13 +4056,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$1c = 'dot-icon-btn';
+const rootClassName$1e = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$1c} {
+    &.${rootClassName$1e} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3996,7 +4133,7 @@ const StyledIconButton = styled(IconButton)`
         color: inherit;
       }
 
-      .dot-icon.MuiIcon-fontSizeSmall {
+      .dot-icon.dot-icon-small {
         padding: 1px;
       }
 
@@ -4011,7 +4148,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$1c,
+  'data-pendoid': dataPendoId = rootClassName$1e,
   'data-testid': dataTestId,
   disableInteractive,
   disableRipple = false,
@@ -4025,7 +4162,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     "data-testid": "icon-button-tooltip",
@@ -4062,7 +4199,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -4079,10 +4216,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$1b = 'dot-drawer-body';
+const rootClassName$1d = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1d} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -4103,7 +4240,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4118,12 +4255,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$1a = 'dot-drawer-footer';
+const rootClassName$1c = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1c} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -4136,7 +4273,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4152,7 +4289,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$1e,
+  'data-pendoid': dataPendoId = rootClassName$1g,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -4175,7 +4312,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, 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';
@@ -4650,7 +4787,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef(undefined);
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4750,12 +4887,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$19 = 'dot-copy-button';
+const rootClassName$1b = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} .copied-to-clipboard {
+    &.${rootClassName$1b} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4781,7 +4918,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$19,
+  'data-pendoid': dataPendoId = rootClassName$1b,
   'data-testid': dataTestId = 'dot-copy-button',
   disableInteractive,
   disabled = false,
@@ -4830,7 +4967,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$19,
+    className: rootClassName$1b,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4937,7 +5074,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1s,
+  'data-pendoid': dataPendoId = rootClassName$1u,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4986,7 +5123,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1s, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1u, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -5129,10 +5266,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$18 = 'dot-search-input';
+const rootClassName$1a = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$1a} {
     }
   `}
 `;
@@ -5149,7 +5286,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -5405,12 +5542,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$17 = 'dot-app-switcher';
+const rootClassName$19 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$19} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5520,7 +5657,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5898,12 +6035,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$16 = 'dot-sidebar';
+const rootClassName$18 = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$18} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -6197,10 +6334,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$15 = 'dot-truncate-with-tooltip';
+const rootClassName$17 = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$17} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -6231,7 +6368,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -6345,7 +6482,7 @@ const DotSidebar = ({
     keys: collapseKeys
   }, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$16, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6421,12 +6558,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$14 = 'dot-badge';
+const rootClassName$16 = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$16} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -6461,7 +6598,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -6483,7 +6620,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$13 = 'dot-app-toolbar';
+const rootClassName$15 = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6523,7 +6660,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$15} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6652,7 +6789,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6804,12 +6941,12 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$12 = 'dot-chip';
+const rootClassName$14 = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$14} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6915,7 +7052,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$12,
+  'data-pendoid': dataPendoId = rootClassName$14,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6929,7 +7066,7 @@ const DotChip = ({
   tooltipProps
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className, errorClass);
   const isTruncated = charactersLimit > 0 && children.length > charactersLimit;
   const getChipLabelWithTooltip = label => jsx(DotTooltip, Object.assign({}, tooltipProps, {
     hoverVisibility: "always",
@@ -6965,7 +7102,7 @@ const DotChip = ({
   });
 };
 
-const rootClassName$11 = 'dot-autocomplete';
+const rootClassName$13 = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const inputAiClassName = 'dot-input-ai';
@@ -6973,7 +7110,7 @@ const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$13} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -7072,8 +7209,8 @@ const isEmptyValue = value => {
     return !value;
   }
 };
-const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$11, size === 'medium' && inputMediumClassName, className);
-const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1s, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
+const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$13, size === 'medium' && inputMediumClassName, className);
+const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1u, 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;
@@ -7095,7 +7232,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$11,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -7165,7 +7302,7 @@ const DotAutoComplete = ({
   const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), isAiEnabled ? inputAiClassName : '');
   const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
   const inputRootClasses = getInputRootClassNames(dense);
-  const popperClasses = useStylesWithRootClass(rootClassName$1h, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1j, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -7515,10 +7652,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$10 = 'dot-avatar-group';
+const rootClassName$12 = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$10} {
+      &.${rootClassName$12} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -7537,7 +7674,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7552,14 +7689,14 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$$ = 'dot-avatar-with-details';
+const rootClassName$11 = 'dot-avatar-with-details';
 const StyledAvatarWithDetails = styled.div`
   ${({
   theme,
   $maxSubtitleLines,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$11} {
       gap: ${theme.spacing(2)};
       display: flex;
       align-items: center;
@@ -7595,12 +7732,12 @@ const DotAvatarWithDetails = ({
   ariaLabel,
   avatar,
   className,
-  'data-pendoid': dataPendoId = rootClassName$$,
+  'data-pendoid': dataPendoId = rootClassName$11,
   'data-testid': dataTestId,
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, 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, {
@@ -7635,13 +7772,13 @@ const DotAvatarWithDetails = ({
   });
 };
 
-const rootClassName$_ = 'dot-breadcrumbs';
+const rootClassName$10 = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$10} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -7661,7 +7798,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$10} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7989,7 +8126,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$_,
+        root: rootClassName$10,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -8020,14 +8157,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$Z = 'dot-button-toggle';
+const rootClassName$$ = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$$} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -8150,7 +8287,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$Z,
+  'data-pendoid': dataPendoId = rootClassName$$,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -8160,7 +8297,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -8245,12 +8382,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$Y = 'dot-card';
+const rootClassName$_ = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$_} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -8264,7 +8401,7 @@ const DotCard = ({
   onMouseEnter,
   onMouseLeave
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -8295,12 +8432,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$X = 'dot-card-footer';
+const rootClassName$Z = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Z} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -8312,7 +8449,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -8321,14 +8458,14 @@ const DotCardFooter = ({
   });
 };
 
-const rootClassName$W = 'dot-card-header';
+const rootClassName$Y = 'dot-card-header';
 const StyledCardHeader = styled(CardHeader)`
   ${({
   theme,
   $maxSubheaderLines,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$Y} {
       .MuiCardHeader-content {
         overflow-x: hidden;
 
@@ -8366,7 +8503,7 @@ const DotCardHeader = ({
   titleMaxLines = 1,
   titleSize = 'large'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   const nonSmallTitleSize = titleSize === 'medium' ? 'h3' : 'h2';
   const titleVariant = titleSize === 'small' ? 'h4' : nonSmallTitleSize;
   const subheaderVariant = subheaderSize === 'small' ? 'body2' : 'body1';
@@ -8403,9 +8540,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$V = 'dot-form-control-label';
+const rootClassName$X = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$V} {
+  &.${rootClassName$X} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -8428,12 +8565,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$U = 'dot-checkbox';
+const rootClassName$W = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$W} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -8452,7 +8589,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -8467,14 +8604,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$U
+      root: rootClassName$W
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8503,13 +8640,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$T = 'dot-form-group';
+const rootClassName$V = '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$T} {
+  &.${rootClassName$V} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -8540,7 +8677,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$S = 'dot-checkbox-group';
+const rootClassName$U = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -8549,7 +8686,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`
     &.${wrapperClassName$1} {
-      .${rootClassName$S} {
+      .${rootClassName$U} {
         width: 100%;
       }
 
@@ -8576,7 +8713,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$V} {
+        .${rootClassName$X} {
           margin: 0;
         }
       }
@@ -8584,13 +8721,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$R = 'dot-form-group';
+const rootClassName$T = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$R} > * {
+    &.${rootClassName$T} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -8603,7 +8740,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -8642,7 +8779,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$T, rootClassName$S, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, rootClassName$U, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -8727,12 +8864,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$Q = 'chip-list';
+const rootClassName$S = 'chip-list';
 const StyledChipList = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$S} {
       display: flex;
       gap: ${theme.spacing(1)};
     }
@@ -8807,19 +8944,19 @@ function DotChipList({
     setChips(itemElements);
   }, [items, maxChars]);
   return jsx(StyledChipList, {
-    className: rootClassName$Q,
+    className: rootClassName$S,
     "data-testid": dataTestId,
     style: style,
     children: chips
   });
 }
 
-const rootClassName$P = 'dot-dialog';
+const rootClassName$R = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$R} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -8865,7 +9002,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$P,
+  'data-pendoid': dataPendoId = rootClassName$R,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -8879,7 +9016,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   const hasSecondaryAction = !!secondaryButtonProps;
@@ -9016,7 +9153,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$O = 'dot-grid';
+const rootClassName$Q = '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`};
@@ -9076,7 +9213,7 @@ const Grid = ({
   children,
   isLoading
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   return jsxs("div", {
     className: rootClasses,
     children: [children, isLoading && jsx(DotProgress, {
@@ -9100,7 +9237,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$O} {
+    &.${rootClassName$Q} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -9371,12 +9508,12 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$N = 'dot-pill';
+const rootClassName$P = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$P} {
       background-color: ${({
   backgroundcolor,
   variant
@@ -9500,7 +9637,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -9520,25 +9657,126 @@ const DotPill = ({
 };
 
 class ApiError extends Error {
-  constructor(response, message) {
+  constructor(request, response, message) {
     super(message);
+    this.name = 'ApiError';
     this.url = response.url;
     this.status = response.status;
     this.statusText = response.statusText;
     this.body = response.body;
+    this.request = request;
+  }
+}
+
+var _CancelablePromise_isResolved, _CancelablePromise_isRejected, _CancelablePromise_isCancelled, _CancelablePromise_cancelHandlers, _CancelablePromise_promise, _CancelablePromise_resolve, _CancelablePromise_reject;
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+class CancelError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'CancelError';
+  }
+  get isCancelled() {
+    return true;
+  }
+}
+class CancelablePromise {
+  constructor(executor) {
+    _CancelablePromise_isResolved.set(this, void 0);
+    _CancelablePromise_isRejected.set(this, void 0);
+    _CancelablePromise_isCancelled.set(this, void 0);
+    _CancelablePromise_cancelHandlers.set(this, void 0);
+    _CancelablePromise_promise.set(this, void 0);
+    _CancelablePromise_resolve.set(this, void 0);
+    _CancelablePromise_reject.set(this, void 0);
+    __classPrivateFieldSet(this, _CancelablePromise_isResolved, false, "f");
+    __classPrivateFieldSet(this, _CancelablePromise_isRejected, false, "f");
+    __classPrivateFieldSet(this, _CancelablePromise_isCancelled, false, "f");
+    __classPrivateFieldSet(this, _CancelablePromise_cancelHandlers, [], "f");
+    __classPrivateFieldSet(this, _CancelablePromise_promise, new Promise((resolve, reject) => {
+      __classPrivateFieldSet(this, _CancelablePromise_resolve, resolve, "f");
+      __classPrivateFieldSet(this, _CancelablePromise_reject, reject, "f");
+      const onResolve = value => {
+        if (__classPrivateFieldGet(this, _CancelablePromise_isResolved, "f") || __classPrivateFieldGet(this, _CancelablePromise_isRejected, "f") || __classPrivateFieldGet(this, _CancelablePromise_isCancelled, "f")) {
+          return;
+        }
+        __classPrivateFieldSet(this, _CancelablePromise_isResolved, true, "f");
+        if (__classPrivateFieldGet(this, _CancelablePromise_resolve, "f")) __classPrivateFieldGet(this, _CancelablePromise_resolve, "f").call(this, value);
+      };
+      const onReject = reason => {
+        if (__classPrivateFieldGet(this, _CancelablePromise_isResolved, "f") || __classPrivateFieldGet(this, _CancelablePromise_isRejected, "f") || __classPrivateFieldGet(this, _CancelablePromise_isCancelled, "f")) {
+          return;
+        }
+        __classPrivateFieldSet(this, _CancelablePromise_isRejected, true, "f");
+        if (__classPrivateFieldGet(this, _CancelablePromise_reject, "f")) __classPrivateFieldGet(this, _CancelablePromise_reject, "f").call(this, reason);
+      };
+      const onCancel = cancelHandler => {
+        if (__classPrivateFieldGet(this, _CancelablePromise_isResolved, "f") || __classPrivateFieldGet(this, _CancelablePromise_isRejected, "f") || __classPrivateFieldGet(this, _CancelablePromise_isCancelled, "f")) {
+          return;
+        }
+        __classPrivateFieldGet(this, _CancelablePromise_cancelHandlers, "f").push(cancelHandler);
+      };
+      Object.defineProperty(onCancel, 'isResolved', {
+        get: () => __classPrivateFieldGet(this, _CancelablePromise_isResolved, "f")
+      });
+      Object.defineProperty(onCancel, 'isRejected', {
+        get: () => __classPrivateFieldGet(this, _CancelablePromise_isRejected, "f")
+      });
+      Object.defineProperty(onCancel, 'isCancelled', {
+        get: () => __classPrivateFieldGet(this, _CancelablePromise_isCancelled, "f")
+      });
+      return executor(onResolve, onReject, onCancel);
+    }), "f");
+  }
+  get [(_CancelablePromise_isResolved = new WeakMap(), _CancelablePromise_isRejected = new WeakMap(), _CancelablePromise_isCancelled = new WeakMap(), _CancelablePromise_cancelHandlers = new WeakMap(), _CancelablePromise_promise = new WeakMap(), _CancelablePromise_resolve = new WeakMap(), _CancelablePromise_reject = new WeakMap(), Symbol.toStringTag)]() {
+    return 'Cancellable Promise';
+  }
+  then(onFulfilled, onRejected) {
+    return __classPrivateFieldGet(this, _CancelablePromise_promise, "f").then(onFulfilled, onRejected);
+  }
+  catch(onRejected) {
+    return __classPrivateFieldGet(this, _CancelablePromise_promise, "f").catch(onRejected);
+  }
+  finally(onFinally) {
+    return __classPrivateFieldGet(this, _CancelablePromise_promise, "f").finally(onFinally);
+  }
+  cancel() {
+    if (__classPrivateFieldGet(this, _CancelablePromise_isResolved, "f") || __classPrivateFieldGet(this, _CancelablePromise_isRejected, "f") || __classPrivateFieldGet(this, _CancelablePromise_isCancelled, "f")) {
+      return;
+    }
+    __classPrivateFieldSet(this, _CancelablePromise_isCancelled, true, "f");
+    if (__classPrivateFieldGet(this, _CancelablePromise_cancelHandlers, "f").length) {
+      try {
+        for (const cancelHandler of __classPrivateFieldGet(this, _CancelablePromise_cancelHandlers, "f")) {
+          cancelHandler();
+        }
+      } catch (error) {
+        console.warn('Cancellation threw an error', error);
+        return;
+      }
+    }
+    __classPrivateFieldGet(this, _CancelablePromise_cancelHandlers, "f").length = 0;
+    if (__classPrivateFieldGet(this, _CancelablePromise_reject, "f")) __classPrivateFieldGet(this, _CancelablePromise_reject, "f").call(this, new CancelError('Request aborted'));
+  }
+  get isCancelled() {
+    return __classPrivateFieldGet(this, _CancelablePromise_isCancelled, "f");
   }
 }
 
 const OpenAPI = {
   BASE: '',
+  VERSION: '0.1',
+  WITH_CREDENTIALS: false,
+  CREDENTIALS: 'include',
   TOKEN: undefined,
   USERNAME: undefined,
   PASSWORD: undefined,
-  HEADERS: undefined};
+  HEADERS: undefined,
+  ENCODE_PATH: undefined
+};
 
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
 var DashboardCreateBody;
 (function (DashboardCreateBody) {
   (function (lifecycle_state) {
@@ -9551,9 +9789,6 @@ var DashboardCreateBody;
   })(DashboardCreateBody.bi_type || (DashboardCreateBody.bi_type = {}));
 })(DashboardCreateBody || (DashboardCreateBody = {}));
 
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
 var DashboardPatchBody;
 (function (DashboardPatchBody) {
   (function (lifecycle_state) {
@@ -9566,9 +9801,6 @@ var DashboardPatchBody;
   })(DashboardPatchBody.bi_type || (DashboardPatchBody.bi_type = {}));
 })(DashboardPatchBody || (DashboardPatchBody = {}));
 
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
 var DashboardPutBody;
 (function (DashboardPutBody) {
   (function (lifecycle_state) {
@@ -9581,9 +9813,6 @@ var DashboardPutBody;
   })(DashboardPutBody.bi_type || (DashboardPutBody.bi_type = {}));
 })(DashboardPutBody || (DashboardPutBody = {}));
 
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
 var DashboardView;
 (function (DashboardView) {
   (function (lifecycle_state) {
@@ -9596,159 +9825,180 @@ var DashboardView;
   })(DashboardView.bi_type || (DashboardView.bi_type = {}));
 })(DashboardView || (DashboardView = {}));
 
-function isDefined(value) {
+const isDefined = value => {
   return value !== undefined && value !== null;
-}
-function isString(value) {
+};
+const isString = value => {
   return typeof value === 'string';
-}
-function isStringWithValue(value) {
+};
+const isStringWithValue = value => {
   return isString(value) && value !== '';
-}
-function isBlob(value) {
-  return value instanceof Blob;
-}
-function base64(str) {
+};
+const isBlob = value => {
+  return typeof value === 'object' && typeof value.type === 'string' && typeof value.stream === 'function' && typeof value.arrayBuffer === 'function' && typeof value.constructor === 'function' && typeof value.constructor.name === 'string' && /^(Blob|File)$/.test(value.constructor.name) && /^(Blob|File)$/.test(value[Symbol.toStringTag]);
+};
+const isFormData = value => {
+  return value instanceof FormData;
+};
+const base64 = str => {
   try {
     return btoa(str);
   } catch (err) {
+    // @ts-ignore
     return Buffer.from(str).toString('base64');
   }
-}
-function getQueryString(params) {
+};
+const getQueryString = params => {
   const qs = [];
-  Object.keys(params).forEach(key => {
-    const value = params[key];
+  const append = (key, value) => {
+    qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+  };
+  const process = (key, value) => {
     if (isDefined(value)) {
       if (Array.isArray(value)) {
-        value.forEach(value => {
-          qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+        value.forEach(v => {
+          process(key, v);
+        });
+      } else if (typeof value === 'object') {
+        Object.entries(value).forEach(([k, v]) => {
+          process(`${key}[${k}]`, v);
         });
       } else {
-        qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+        append(key, value);
       }
     }
+  };
+  Object.entries(params).forEach(([key, value]) => {
+    process(key, value);
   });
   if (qs.length > 0) {
     return `?${qs.join('&')}`;
   }
   return '';
-}
-function getUrl(options) {
-  const path = options.path;
-  const url = `${OpenAPI.BASE}${path}`;
+};
+const getUrl = (config, options) => {
+  const encoder = encodeURI;
+  const path = options.url.replace('{api-version}', config.VERSION).replace(/{(.*?)}/g, (substring, group) => {
+    var _a;
+    if ((_a = options.path) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(group)) {
+      return encoder(String(options.path[group]));
+    }
+    return substring;
+  });
+  const url = `${config.BASE}${path}`;
   if (options.query) {
     return `${url}${getQueryString(options.query)}`;
   }
   return url;
-}
-function getFormData(params) {
-  const formData = new FormData();
-  Object.keys(params).forEach(key => {
-    const value = params[key];
-    if (isDefined(value)) {
-      formData.append(key, value);
-    }
-  });
-  return formData;
-}
-function resolve(options, resolver) {
-  return __awaiter(this, void 0, void 0, function* () {
-    if (typeof resolver === 'function') {
-      return resolver(options);
-    }
-    return resolver;
-  });
-}
-function getHeaders(options) {
-  return __awaiter(this, void 0, void 0, function* () {
-    const token = yield resolve(options, OpenAPI.TOKEN);
-    const username = yield resolve(options, OpenAPI.USERNAME);
-    const password = yield resolve(options, OpenAPI.PASSWORD);
-    const additionalHeaders = yield resolve(options, OpenAPI.HEADERS);
-    const defaultHeaders = Object.entries(Object.assign(Object.assign({
-      Accept: 'application/json'
-    }, additionalHeaders), options.headers)).filter(([key, value]) => isDefined(value)).reduce((headers, [key, value]) => Object.assign(Object.assign({}, headers), {
-      [key]: value
-    }), {});
-    const headers = new Headers(defaultHeaders);
-    if (isStringWithValue(token)) {
-      headers.append('Authorization', `Bearer ${token}`);
-    }
-    if (isStringWithValue(username) && isStringWithValue(password)) {
-      const credentials = base64(`${username}:${password}`);
-      headers.append('Authorization', `Basic ${credentials}`);
-    }
-    if (options.body) {
-      if (options.mediaType) {
-        headers.append('Content-Type', options.mediaType);
-      } else if (isBlob(options.body)) {
-        headers.append('Content-Type', options.body.type || 'application/octet-stream');
-      } else if (isString(options.body)) {
-        headers.append('Content-Type', 'text/plain');
+};
+const getFormData = options => {
+  if (options.formData) {
+    const formData = new FormData();
+    const process = (key, value) => {
+      if (isString(value) || isBlob(value)) {
+        formData.append(key, value);
       } else {
-        headers.append('Content-Type', 'application/json');
+        formData.append(key, JSON.stringify(value));
+      }
+    };
+    Object.entries(options.formData).filter(([_, value]) => isDefined(value)).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach(v => process(key, v));
+      } else {
+        process(key, value);
       }
+    });
+    return formData;
+  }
+  return undefined;
+};
+const resolve = (options, resolver) => __awaiter(void 0, void 0, void 0, function* () {
+  if (typeof resolver === 'function') {
+    return resolver(options);
+  }
+  return resolver;
+});
+const getHeaders = (config, options) => __awaiter(void 0, void 0, void 0, function* () {
+  const [token, username, password, additionalHeaders] = yield Promise.all([resolve(options, config.TOKEN), resolve(options, config.USERNAME), resolve(options, config.PASSWORD), resolve(options, config.HEADERS)]);
+  const headers = Object.entries(Object.assign(Object.assign({
+    Accept: 'application/json'
+  }, additionalHeaders), options.headers)).filter(([_, value]) => isDefined(value)).reduce((headers, [key, value]) => Object.assign(Object.assign({}, headers), {
+    [key]: String(value)
+  }), {});
+  if (isStringWithValue(token)) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  if (isStringWithValue(username) && isStringWithValue(password)) {
+    const credentials = base64(`${username}:${password}`);
+    headers['Authorization'] = `Basic ${credentials}`;
+  }
+  if (options.body !== undefined) {
+    if (options.mediaType) {
+      headers['Content-Type'] = options.mediaType;
+    } else if (isBlob(options.body)) {
+      headers['Content-Type'] = options.body.type || 'application/octet-stream';
+    } else if (isString(options.body)) {
+      headers['Content-Type'] = 'text/plain';
+    } else if (!isFormData(options.body)) {
+      headers['Content-Type'] = 'application/json';
     }
-    return headers;
-  });
-}
-function getRequestBody(options) {
-  var _a;
-  if (options.formData) {
-    return getFormData(options.formData);
   }
-  if (options.body) {
+  return new Headers(headers);
+});
+const getRequestBody = options => {
+  var _a;
+  if (options.body !== undefined) {
     if ((_a = options.mediaType) === null || _a === void 0 ? void 0 : _a.includes('/json')) {
       return JSON.stringify(options.body);
-    } else if (isString(options.body) || isBlob(options.body)) {
+    } else if (isString(options.body) || isBlob(options.body) || isFormData(options.body)) {
       return options.body;
     } else {
       return JSON.stringify(options.body);
     }
   }
   return undefined;
-}
-function sendRequest(options, url) {
-  return __awaiter(this, void 0, void 0, function* () {
-    const request = {
-      method: options.method,
-      headers: yield getHeaders(options),
-      body: getRequestBody(options)
-    };
-    return yield fetch(url, request);
-  });
-}
-function getResponseHeader(response, responseHeader) {
+};
+const sendRequest = (config, options, url, body, formData, headers, onCancel) => __awaiter(void 0, void 0, void 0, function* () {
+  const controller = new AbortController();
+  const request = {
+    headers,
+    body: body !== null && body !== void 0 ? body : formData,
+    method: options.method,
+    signal: controller.signal
+  };
+  onCancel(() => controller.abort());
+  return yield fetch(url, request);
+});
+const getResponseHeader = (response, responseHeader) => {
   if (responseHeader) {
     const content = response.headers.get(responseHeader);
     if (isString(content)) {
       return content;
     }
   }
-  return null;
-}
-function getResponseBody(response) {
-  return __awaiter(this, void 0, void 0, function* () {
-    if (response.status !== 204) {
-      try {
-        const contentType = response.headers.get('Content-Type');
-        if (contentType) {
-          const isJSON = contentType.toLowerCase().startsWith('application/json');
-          if (isJSON) {
-            return yield response.json();
-          } else {
-            return yield response.text();
-          }
+  return undefined;
+};
+const getResponseBody = response => __awaiter(void 0, void 0, void 0, function* () {
+  if (response.status !== 204) {
+    try {
+      const contentType = response.headers.get('Content-Type');
+      if (contentType) {
+        const jsonTypes = ['application/json', 'application/problem+json'];
+        const isJSON = jsonTypes.some(type => contentType.toLowerCase().startsWith(type));
+        if (isJSON) {
+          return yield response.json();
+        } else {
+          return yield response.text();
         }
-      } catch (error) {
-        console.error(error);
       }
+    } catch (error) {
+      console.error(error);
     }
-    return null;
-  });
-}
-function catchErrors(options, result) {
+  }
+  return undefined;
+});
+const catchErrorCodes = (options, result) => {
+  var _a, _b;
   const errors = Object.assign({
     400: 'Bad Request',
     401: 'Unauthorized',
@@ -9760,35 +10010,54 @@ function catchErrors(options, result) {
   }, options.errors);
   const error = errors[result.status];
   if (error) {
-    throw new ApiError(result, error);
+    throw new ApiError(options, result, error);
   }
   if (!result.ok) {
-    throw new ApiError(result, 'Generic Error');
+    const errorStatus = (_a = result.status) !== null && _a !== void 0 ? _a : 'unknown';
+    const errorStatusText = (_b = result.statusText) !== null && _b !== void 0 ? _b : 'unknown';
+    const errorBody = (() => {
+      try {
+        return JSON.stringify(result.body, null, 2);
+      } catch (e) {
+        return undefined;
+      }
+    })();
+    throw new ApiError(options, result, `Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`);
   }
-}
+};
 /**
- * Request using fetch client
- * @param options The request options from the the service
- * @returns ApiResult
+ * Request method
+ * @param config The OpenAPI configuration object
+ * @param options The request options from the service
+ * @returns CancelablePromise<T>
  * @throws ApiError
  */
-function request(options) {
-  return __awaiter(this, void 0, void 0, function* () {
-    const url = getUrl(options);
-    const response = yield sendRequest(options, url);
-    const responseBody = yield getResponseBody(response);
-    const responseHeader = getResponseHeader(response, options.responseHeader);
-    const result = {
-      url,
-      ok: response.ok,
-      status: response.status,
-      statusText: response.statusText,
-      body: responseHeader || responseBody
-    };
-    catchErrors(options, result);
-    return result;
-  });
-}
+const request = (config, options) => {
+  return new CancelablePromise((resolve, reject, onCancel) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      const url = getUrl(config, options);
+      const formData = getFormData(options);
+      const body = getRequestBody(options);
+      const headers = yield getHeaders(config, options);
+      if (!onCancel.isCancelled) {
+        const response = yield sendRequest(config, options, url, body, formData, headers, onCancel);
+        const responseBody = yield getResponseBody(response);
+        const responseHeader = getResponseHeader(response, options.responseHeader);
+        const result = {
+          url,
+          ok: response.ok,
+          status: response.status,
+          statusText: response.statusText,
+          body: responseHeader !== null && responseHeader !== void 0 ? responseHeader : responseBody
+        };
+        catchErrorCodes(options, result);
+        resolve(result.body);
+      }
+    } catch (error) {
+      reject(error);
+    }
+  }));
+};
 
 class DashboardsService {
   /**
@@ -9800,7 +10069,7 @@ class DashboardsService {
    * @param sort Sort ordering to apply to the query.
    * @param filter List of filters (each filter is a separate query param, and they are OR'ed).
    *
-   * * **Filterable field names**: author_fullname, author_id, bi_type, categories, created_dt, dataset_id, description, external_embedding_id, external_id, id, is_ootb_dashboard, lifecycle_state, name, target_apps, updated_by_fullname, updated_by_id, updated_dt
+   * * **Filterable field names**: author_fullname, author_id, bi_type, categories, created_dt, dataset_id, description, external_embedding_id, external_id, featured, id, is_ootb_dashboard, lifecycle_state, name, target_apps, updated_by_fullname, updated_by_id, updated_dt
    * * **Searchable field names**: author_fullname, categories, description, name, updated_by_fullname
    *
    * @param favorite Boolean flag to only return dashboards marked as favorites.
@@ -9819,39 +10088,36 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static getDashboards() {
-    return __awaiter(this, arguments, void 0, function* (xDigitalaiAccountId = null, start, count = 20, sort = 'id', filter, favorite = null, q = null, authorFullname = null, authorId = null, biType = 'MICROSTRATEGY', description = null, id = null, isOotbDashboard = null, lifecycleState = null, name = null, targetApp = null, viewModified = false) {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/dashboards`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        query: {
-          start: start,
-          count: count,
-          sort: sort,
-          filter: filter,
-          favorite: favorite,
-          q: q,
-          author_fullname: authorFullname,
-          author_id: authorId,
-          bi_type: biType,
-          description: description,
-          id: id,
-          is_ootb_dashboard: isOotbDashboard,
-          lifecycle_state: lifecycleState,
-          name: name,
-          target_app: targetApp,
-          view_modified: viewModified
-        },
-        errors: {
-          400: `An unknown parameter was specified.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static getDashboards(xDigitalaiAccountId = null, start, count = 20, sort = 'id', filter, favorite = null, q = null, authorFullname = null, authorId = null, biType = 'MICROSTRATEGY', description = null, id = null, isOotbDashboard = null, lifecycleState = null, name = null, targetApp = null, viewModified = false) {
+    return request(OpenAPI, {
+      method: 'GET',
+      url: '/metadata/bi/dashboards',
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      query: {
+        start: start,
+        count: count,
+        sort: sort,
+        filter: filter,
+        favorite: favorite,
+        q: q,
+        author_fullname: authorFullname,
+        author_id: authorId,
+        bi_type: biType,
+        description: description,
+        id: id,
+        is_ootb_dashboard: isOotbDashboard,
+        lifecycle_state: lifecycleState,
+        name: name,
+        target_app: targetApp,
+        view_modified: viewModified
+      },
+      errors: {
+        400: `An unknown parameter was specified.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -9863,23 +10129,20 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static postDashboards(requestBody_1) {
-    return __awaiter(this, arguments, void 0, function* (requestBody, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'POST',
-        path: `/metadata/bi/dashboards`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        body: requestBody,
-        mediaType: 'application/json',
-        errors: {
-          400: `The provided data is not valid.`,
-          404: `The dashboard could not be found.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static postDashboards(requestBody, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'POST',
+      url: '/metadata/bi/dashboards',
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        400: `The provided data is not valid.`,
+        404: `The dashboard could not be found.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -9891,21 +10154,21 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static getDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/dashboards/${dashboardId}`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        errors: {
-          400: `An unknown parameter was specified.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The dashboard could not be found.`
-        }
-      });
-      return result.body;
+  static getDashboard(dashboardId, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'GET',
+      url: '/metadata/bi/dashboards/{dashboard_id}',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      errors: {
+        400: `An unknown parameter was specified.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The dashboard could not be found.`
+      }
     });
   }
   /**
@@ -9919,28 +10182,28 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static putDashboard(dashboardId_1, requestBody_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
-      const result = yield request({
-        method: 'PUT',
-        path: `/metadata/bi/dashboards/${dashboardId}`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        query: {
-          is_sync: isSync
-        },
-        body: requestBody,
-        mediaType: 'application/json',
-        errors: {
-          400: `The provided data is not valid.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The dashboard could not be found.`,
-          409: `Unable to update object because IDs are different.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static putDashboard(dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
+    return request(OpenAPI, {
+      method: 'PUT',
+      url: '/metadata/bi/dashboards/{dashboard_id}',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      query: {
+        is_sync: isSync
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        400: `The provided data is not valid.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The dashboard could not be found.`,
+        409: `Unable to update object because IDs are different.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -9954,28 +10217,28 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static patchDashboard(dashboardId_1, requestBody_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
-      const result = yield request({
-        method: 'PATCH',
-        path: `/metadata/bi/dashboards/${dashboardId}`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        query: {
-          is_sync: isSync
-        },
-        body: requestBody,
-        mediaType: 'application/json',
-        errors: {
-          400: `The provided data is not valid.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The dashboard could not be found.`,
-          409: `Unable to update object because IDs are different.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static patchDashboard(dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
+    return request(OpenAPI, {
+      method: 'PATCH',
+      url: '/metadata/bi/dashboards/{dashboard_id}',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      query: {
+        is_sync: isSync
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        400: `The provided data is not valid.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The dashboard could not be found.`,
+        409: `Unable to update object because IDs are different.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -9986,16 +10249,16 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static deleteDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'DELETE',
-        path: `/metadata/bi/dashboards/${dashboardId}`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        }
-      });
-      return result.body;
+  static deleteDashboard(dashboardId, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'DELETE',
+      url: '/metadata/bi/dashboards/{dashboard_id}',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      }
     });
   }
   /**
@@ -10007,21 +10270,21 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static getInProgressDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/dashboards/${dashboardId}/inprogress`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        errors: {
-          400: `An unknown parameter was specified.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The dashboard could not be found.`
-        }
-      });
-      return result.body;
+  static getInProgressDashboard(dashboardId, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'GET',
+      url: '/metadata/bi/dashboards/{dashboard_id}/inprogress',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      errors: {
+        400: `An unknown parameter was specified.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The dashboard could not be found.`
+      }
     });
   }
   /**
@@ -10034,24 +10297,24 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static postInProgressDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null, requestBody) {
-      const result = yield request({
-        method: 'POST',
-        path: `/metadata/bi/dashboards/${dashboardId}/inprogress`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        body: requestBody,
-        mediaType: 'application/json',
-        errors: {
-          400: `The provided data is not valid.`,
-          404: `The dashboard could not be found.`,
-          409: `Unable to update object because IDs are different.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static postInProgressDashboard(dashboardId, xDigitalaiAccountId = null, requestBody) {
+    return request(OpenAPI, {
+      method: 'POST',
+      url: '/metadata/bi/dashboards/{dashboard_id}/inprogress',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        400: `The provided data is not valid.`,
+        404: `The dashboard could not be found.`,
+        409: `Unable to update object because IDs are different.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -10065,28 +10328,28 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static putInProgressDashboard(dashboardId_1, requestBody_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
-      const result = yield request({
-        method: 'PUT',
-        path: `/metadata/bi/dashboards/${dashboardId}/inprogress`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        query: {
-          is_sync: isSync
-        },
-        body: requestBody,
-        mediaType: 'application/json',
-        errors: {
-          400: `The provided data is not valid.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The dashboard could not be found.`,
-          409: `Unable to update object because IDs are different.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static putInProgressDashboard(dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
+    return request(OpenAPI, {
+      method: 'PUT',
+      url: '/metadata/bi/dashboards/{dashboard_id}/inprogress',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      query: {
+        is_sync: isSync
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        400: `The provided data is not valid.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The dashboard could not be found.`,
+        409: `Unable to update object because IDs are different.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -10100,28 +10363,28 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static patchInProgressDashboard(dashboardId_1, requestBody_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
-      const result = yield request({
-        method: 'PATCH',
-        path: `/metadata/bi/dashboards/${dashboardId}/inprogress`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        query: {
-          is_sync: isSync
-        },
-        body: requestBody,
-        mediaType: 'application/json',
-        errors: {
-          400: `The provided data is not valid.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The dashboard could not be found.`,
-          409: `Unable to update object because IDs are different.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static patchInProgressDashboard(dashboardId, requestBody, xDigitalaiAccountId = null, isSync = null) {
+    return request(OpenAPI, {
+      method: 'PATCH',
+      url: '/metadata/bi/dashboards/{dashboard_id}/inprogress',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      query: {
+        is_sync: isSync
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        400: `The provided data is not valid.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The dashboard could not be found.`,
+        409: `Unable to update object because IDs are different.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -10133,22 +10396,22 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static deleteInProgressDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null, publish = false) {
-      const result = yield request({
-        method: 'DELETE',
-        path: `/metadata/bi/dashboards/${dashboardId}/inprogress`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        query: {
-          publish: publish
-        },
-        errors: {
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static deleteInProgressDashboard(dashboardId, xDigitalaiAccountId = null, publish = false) {
+    return request(OpenAPI, {
+      method: 'DELETE',
+      url: '/metadata/bi/dashboards/{dashboard_id}/inprogress',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      query: {
+        publish: publish
+      },
+      errors: {
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -10161,23 +10424,23 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static copyDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null, requestBody) {
-      const result = yield request({
-        method: 'POST',
-        path: `/metadata/bi/dashboards/${dashboardId}/copy`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        body: requestBody,
-        mediaType: 'application/json',
-        errors: {
-          400: `The provided data is not valid.`,
-          404: `The dashboard could not be found.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static copyDashboard(dashboardId, xDigitalaiAccountId = null, requestBody) {
+    return request(OpenAPI, {
+      method: 'POST',
+      url: '/metadata/bi/dashboards/{dashboard_id}/copy',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        400: `The provided data is not valid.`,
+        404: `The dashboard could not be found.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -10189,20 +10452,20 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static favoriteDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'POST',
-        path: `/metadata/bi/dashboards/${dashboardId}/favorite`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        errors: {
-          400: `The provided data is not valid.`,
-          404: `The dashboard could not be found.`
-        }
-      });
-      return result.body;
+  static favoriteDashboard(dashboardId, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'POST',
+      url: '/metadata/bi/dashboards/{dashboard_id}/favorite',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      errors: {
+        400: `The provided data is not valid.`,
+        404: `The dashboard could not be found.`
+      }
     });
   }
   /**
@@ -10214,20 +10477,20 @@ class DashboardsService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static unfavoriteDashboard(dashboardId_1) {
-    return __awaiter(this, arguments, void 0, function* (dashboardId, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'DELETE',
-        path: `/metadata/bi/dashboards/${dashboardId}/favorite`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        errors: {
-          400: `The provided data is not valid.`,
-          404: `The dashboard could not be found.`
-        }
-      });
-      return result.body;
+  static unfavoriteDashboard(dashboardId, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'DELETE',
+      url: '/metadata/bi/dashboards/{dashboard_id}/favorite',
+      path: {
+        dashboard_id: dashboardId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      errors: {
+        400: `The provided data is not valid.`,
+        404: `The dashboard could not be found.`
+      }
     });
   }
   /**
@@ -10240,35 +10503,32 @@ class DashboardsService {
    * * **Searchable field names**: author_fullname, categories, description, name
    *
    * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY','RELEASE', 'TEAMFORGE', 'CHANGERISKPREDICTION', 'SERVICEMGMTPROCESSOPTIMIZATION', 'FLOWACCELERATION', 'INTEGRATEANDTESTANALYTICSLENS', 'OPERATEANDMONITORANALYTICSLENS', 'PLANANDCREATEANALYTICSLENS', 'QUALITYIMPROVEMENT', 'RELEASEANDDEPLOYANALYTICSLENS', or 'APPLICATIONSECURITY'.
-   * @param biType String match on Dashboard bi type - 'MICROSTRATEGY'.
-   * @param isOotbDashboard Boolean match on Dashboard OOTB status.
-   * @param lifecycleState String match on Dashboard lifecycle state - 'DRAFT' or 'PUBLISHED'.
-   * @returns MetadataResponse OK
-   * @returns Error Default error response
-   * @throws ApiError
-   */
-  static getDashboardsMetadata() {
-    return __awaiter(this, arguments, void 0, function* (xDigitalaiAccountId = null, filter, targetApp = null, biType = 'MICROSTRATEGY', isOotbDashboard = null, lifecycleState = null) {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/dashboards/metadata`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        query: {
-          filter: filter,
-          target_app: targetApp,
-          bi_type: biType,
-          is_ootb_dashboard: isOotbDashboard,
-          lifecycle_state: lifecycleState
-        },
-        errors: {
-          400: `Given query params are not valid.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+   * @param biType String match on Dashboard bi type - 'MICROSTRATEGY'.
+   * @param isOotbDashboard Boolean match on Dashboard OOTB status.
+   * @param lifecycleState String match on Dashboard lifecycle state - 'DRAFT' or 'PUBLISHED'.
+   * @returns MetadataResponse OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getDashboardsMetadata(xDigitalaiAccountId = null, filter, targetApp = null, biType = 'MICROSTRATEGY', isOotbDashboard = null, lifecycleState = null) {
+    return request(OpenAPI, {
+      method: 'GET',
+      url: '/metadata/bi/dashboards/metadata',
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      query: {
+        filter: filter,
+        target_app: targetApp,
+        bi_type: biType,
+        is_ootb_dashboard: isOotbDashboard,
+        lifecycle_state: lifecycleState
+      },
+      errors: {
+        400: `Given query params are not valid.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
 }
@@ -10282,47 +10542,42 @@ class HelpContentService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static getHelpContent() {
-    return __awaiter(this, arguments, void 0, function* (xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/helpcontent`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        errors: {
-          400: `An unknown parameter was specified.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`
-        }
-      });
-      return result.body;
+  static getHelpContent(xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'GET',
+      url: '/metadata/bi/helpcontent',
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      errors: {
+        400: `An unknown parameter was specified.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`
+      }
     });
   }
   /**
    * Upload an HTML file to be displayed as help content.
    * Upload help content.
-   * @param requestBody
+   * @param formData
    * @param xDigitalaiAccountId Perform the requested operation in the context of the Digital.ai account represented by this GUID.  <em>Requires elevated permissions.</em>
    * @returns HelpContent Content uploaded.
    * @returns Error Default error response
    * @throws ApiError
    */
-  static createHelpContent(requestBody_1) {
-    return __awaiter(this, arguments, void 0, function* (requestBody, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'POST',
-        path: `/metadata/bi/helpcontent`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        body: requestBody,
-        errors: {
-          400: `The provided data is not valid.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static createHelpContent(formData, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'POST',
+      url: '/metadata/bi/helpcontent',
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      formData: formData,
+      mediaType: 'multipart/form-data',
+      errors: {
+        400: `The provided data is not valid.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -10334,50 +10589,51 @@ class HelpContentService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static getHelpContentById(helpContentId_1) {
-    return __awaiter(this, arguments, void 0, function* (helpContentId, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/helpcontent/${helpContentId}`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        errors: {
-          400: `An unknown parameter was specified.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The help content could not be found.`
-        }
-      });
-      return result.body;
+  static getHelpContentById(helpContentId, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'GET',
+      url: '/metadata/bi/helpcontent/{help_content_id}',
+      path: {
+        help_content_id: helpContentId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      errors: {
+        400: `An unknown parameter was specified.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The help content could not be found.`
+      }
     });
   }
   /**
    * Update a help content definition.
    * Update a single help content definition, selected by ID.
    * @param helpContentId
-   * @param requestBody
+   * @param formData
    * @param xDigitalaiAccountId Perform the requested operation in the context of the Digital.ai account represented by this GUID.  <em>Requires elevated permissions.</em>
    * @returns HelpContent OK
    * @returns Error Default error response
    * @throws ApiError
    */
-  static putHelpContentById(helpContentId_1, requestBody_1) {
-    return __awaiter(this, arguments, void 0, function* (helpContentId, requestBody, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'PUT',
-        path: `/metadata/bi/helpcontent/${helpContentId}`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        body: requestBody,
-        errors: {
-          400: `An unknown parameter was specified.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The help content could not be found.`,
-          422: `Unprocessable Entity`
-        }
-      });
-      return result.body;
+  static putHelpContentById(helpContentId, formData, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'PUT',
+      url: '/metadata/bi/helpcontent/{help_content_id}',
+      path: {
+        help_content_id: helpContentId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      formData: formData,
+      mediaType: 'multipart/form-data',
+      errors: {
+        400: `An unknown parameter was specified.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The help content could not be found.`,
+        422: `Unprocessable Entity`
+      }
     });
   }
   /**
@@ -10388,21 +10644,21 @@ class HelpContentService {
    * @returns Error Default error response
    * @throws ApiError
    */
-  static deleteHelpContentById(helpContentId_1) {
-    return __awaiter(this, arguments, void 0, function* (helpContentId, xDigitalaiAccountId = null) {
-      const result = yield request({
-        method: 'DELETE',
-        path: `/metadata/bi/helpcontent/${helpContentId}`,
-        headers: {
-          'X-Digitalai-Account-ID': xDigitalaiAccountId
-        },
-        errors: {
-          400: `An unknown parameter was specified.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`,
-          404: `The help content could not be found.`
-        }
-      });
-      return result.body;
+  static deleteHelpContentById(helpContentId, xDigitalaiAccountId = null) {
+    return request(OpenAPI, {
+      method: 'DELETE',
+      url: '/metadata/bi/helpcontent/{help_content_id}',
+      path: {
+        help_content_id: helpContentId
+      },
+      headers: {
+        'X-Digitalai-Account-ID': xDigitalaiAccountId
+      },
+      errors: {
+        400: `An unknown parameter was specified.`,
+        401: `Could not resolve a valid Tenant from the provided API Token.`,
+        404: `The help content could not be found.`
+      }
     });
   }
 }
@@ -10951,6 +11207,9 @@ const DotMetadataApiProvider = ({
           if (dashboard.in_progress_changes) {
             // If the dashboard is published and has in-progress changes, we need to update the in-progress dashboard
             response = yield DashboardsService.patchInProgressDashboard(dashboard.id, updatePayload, accountId, isSync);
+          } else if (Object.keys(updatePayload).length === 1 && 'featured' in updatePayload) {
+            // If the dashboard is published and only update is related to 'featured' flag, we can update the published dashboard directly
+            response = yield DashboardsService.patchDashboard(dashboard.id, updatePayload, accountId, isSync);
           } else {
             // If the dashboard is published and has no in-progress changes, we need to create an in-progress dashboard
             response = yield DashboardsService.postInProgressDashboard(dashboard.id, accountId, updatePayload);
@@ -11089,18 +11348,18 @@ function addAutoHideDuration(severity) {
   return severity === 'error' ? null : 10000;
 }
 
-const rootClassName$M = 'dot-snackbar';
+const rootClassName$O = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$O} {
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1o} {
+      .${rootClassName$1q} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -11153,7 +11412,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -11223,10 +11482,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$L = 'dot-snackbar-container';
+const rootClassName$N = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$N} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -11258,10 +11517,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$L,
+    className: rootClassName$N,
     children: jsx("div", {
-      className: rootClassName$L,
-      "data-testid": rootClassName$L,
+      className: rootClassName$N,
+      "data-testid": rootClassName$N,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoCloseOnAction: autoCloseOnAction,
@@ -11335,12 +11594,12 @@ const useEnqueueErrorMessage = error => {
   }, [error]);
 };
 
-const rootClassName$K = 'dot-dashboard-details';
+const rootClassName$M = 'dot-dashboard-details';
 const StyledDashboardDetails = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$M} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -11466,7 +11725,7 @@ const DotDashboardDetailsView = ({
   modifiedAuthorUser
 }) => {
   var _a, _b;
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   const closeHandler = useCallback(event => {
     onClose && onClose(event);
   }, [onClose]);
@@ -12128,12 +12387,12 @@ function DotDashboardDialog({
   });
 }
 
-const rootClassName$J = 'dot-impact-dialog';
+const rootClassName$L = 'dot-impact-dialog';
 const StyledImpactDialog = styled(DotDialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$L} {
       .high-impact-default-content {
         margin-top: ${theme.spacing(2)};
         margin-bottom: ${theme.spacing(3)};
@@ -12239,7 +12498,7 @@ const DotImpactDialog = ({
     }
     return '';
   }, [action, capitalize, impact, record]);
-  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
   return jsx(StyledImpactDialog, {
     "data-testid": dataTestId,
     className: rootClasses,
@@ -12808,6 +13067,7 @@ function DotDashboardOptionsMenu({
   currentUser,
   isEdit = false,
   menuPlacement,
+  onFeature,
   onStartDelete,
   onStartDuplicate,
   onStartStatusChange,
@@ -12870,6 +13130,21 @@ function DotDashboardOptionsMenu({
   const isDraft = !dashboard.parent_id && dashboard.lifecycle_state === DashboardView.lifecycle_state.DRAFT;
   const isPublished = dashboard.parent_id || dashboard.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED;
   const menuItems = [];
+  if (onFeature && isPublished && !dashboard.in_progress_changes) {
+    const label = dashboard.featured ? 'Remove from featured page' : 'Add to featured page';
+    menuItems.push({
+      children: jsx(DotButton, {
+        "data-testid": `feature-dashboard-action-button-${dashboard.id}`,
+        ariaLabel: label,
+        type: "text",
+        startIcon: jsx(DotIcon, {
+          iconId: "add-outlined"
+        }),
+        children: label
+      }, `feature-dashboard-action-button-${dashboard.id}`),
+      key: 'feature'
+    });
+  }
   if (!isEdit && onViewMode && !dashboard.is_ootb_dashboard && !dashboardLocked(dashboard, currentUser)) {
     menuItems.push({
       children: jsx(DotButton, {
@@ -13067,6 +13342,9 @@ function DotDashboardOptionsMenu({
       case 'unpublish':
         onStartStatusChange(dashboard, DashboardView.lifecycle_state.DRAFT);
         break;
+      case 'feature':
+        onFeature(dashboard);
+        break;
     }
     handleMenuClose();
   }, [menuItems, handleMenuClose]);
@@ -13611,7 +13889,7 @@ function DotDashboardHeader({
   });
 }
 
-const rootClassName$I = 'dot-empty-state';
+const rootClassName$K = 'dot-empty-state';
 const emptyStateImageSizing = {
   xsmall: 9,
   dense: 15,
@@ -13682,9 +13960,9 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
-const rootClassName$H = 'dot-illustration';
+const rootClassName$J = 'dot-illustration';
 const StyledIllustration = styled.span`
-  &.${rootClassName$H} {
+  &.${rootClassName$J} {
     display: inline-block;
   }
 `;
@@ -13701,17 +13979,17 @@ const DotIllustration = ({
   tooltip,
   tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     title: tooltip,
     placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$H}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$J}-tooltip`,
     children: jsx(StyledIllustration, {
       "aria-hidden": "false",
       "aria-label": ariaLabel || title || 'Illustration',
       className: rootClasses,
-      "data-testid": dataTestId || rootClassName$H,
+      "data-testid": dataTestId || rootClassName$J,
       role: ariaRole,
       children: jsx("img", {
         alt: alt || 'Illustration',
@@ -13737,7 +14015,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: `${rootClasses} ${size}`,
@@ -13818,20 +14096,20 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$V} {
+      .${rootClassName$X} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$G = 'dot-date-picker';
+const rootClassName$I = '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$G} .full-width {
+    &.${rootClassName$I} .full-width {
       width: 100%;
     }
   `}
@@ -13840,7 +14118,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$I} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13882,7 +14160,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$F = 'dot-time-picker';
+const rootClassName$H = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const timePickerPopperClassName = 'dot-time-picker-popper';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
@@ -13902,7 +14180,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$F} {
+    &.${rootClassName$H} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13979,36 +14257,36 @@ const StyledTimePickerPopper = styled(Popper)`
   `}
 `;
 
-const rootClassName$E = 'dot-form';
+const rootClassName$G = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$E} {
+    &.${rootClassName$G} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$T},
-        .${rootClassName$V},
-        .${rootClassName$1s},
+      .${rootClassName$V},
+        .${rootClassName$X},
+        .${rootClassName$1u},
         .${rootSelectClassName},
-        .${rootClassName$G},
-        .${rootClassName$F} {
+        .${rootClassName$I},
+        .${rootClassName$H} {
         margin: ${theme.spacing(1, 0)};
       }
 
       .${wrapperClassName$2} {
-        + .${rootClassName$1s},
+        + .${rootClassName$1u},
         .${wrapperClassName$2}
         + .${rootSelectClassName},
         .${wrapperClassName$2}
-        + .${rootClassName$G},
+        + .${rootClassName$I},
         .${wrapperClassName$2}
-        + .${rootClassName$F} {
+        + .${rootClassName$H} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$S}, .${groupClassName} {
-        .${rootClassName$V} {
+      .${rootClassName$U}, .${groupClassName} {
+        .${rootClassName$X} {
           margin: 0;
         }
       }
@@ -14023,7 +14301,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -14036,10 +14314,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$D = 'dot-dynamic-form';
+const rootClassName$F = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$D} {
+    &.${rootClassName$F} {
     }
   `}
 `;
@@ -14219,12 +14497,12 @@ const checkIfFormDataValid = formState => {
   return true;
 };
 
-const rootClassName$C = 'dot-progress-button';
+const rootClassName$E = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$C} {
+    &.${rootClassName$E} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -14249,7 +14527,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$C,
+  'data-pendoid': dataPendoId = rootClassName$E,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -14263,7 +14541,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -14293,12 +14571,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$B = 'dot-radio';
+const rootClassName$D = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$B} {
+    &.${rootClassName$D} {
       padding: 8px;
 
       svg {
@@ -14316,7 +14594,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -14329,7 +14607,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -14337,7 +14615,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$B
+      root: rootClassName$D
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -14383,7 +14661,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -14448,7 +14726,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$A = 'dot-switch';
+const rootClassName$C = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -14475,7 +14753,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$A,
+  'data-pendoid': dataPendoId = rootClassName$C,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -14485,7 +14763,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -14515,7 +14793,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$V,
+    className: rootClassName$X,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -14836,7 +15114,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, 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]);
@@ -15082,7 +15360,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$z = 'dot-inline-edit';
+const rootClassName$B = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -15094,7 +15372,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$B} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -15308,7 +15586,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$z,
+  'data-pendoid': dataPendoId = rootClassName$B,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -15344,7 +15622,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$B, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -15532,13 +15810,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$y = 'dot-navigation-rail';
+const rootClassName$A = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$y} {
+    &.${rootClassName$A} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -15598,7 +15876,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : defaultIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -15649,12 +15927,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$x = 'dot-skeleton';
+const rootClassName$z = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$x} {
+    &.${rootClassName$z} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -15669,7 +15947,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -15684,12 +15962,12 @@ const DotSkeleton = ({
   });
 };
 
-const rootClassName$w = 'dot-split-button-group';
+const rootClassName$y = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$w} {
+    &.${rootClassName$y} {
       &.outlined,
       &.text {
         .expand-button {
@@ -15755,7 +16033,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$w,
+  'data-pendoid': dataPendoId = rootClassName$y,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -15771,7 +16049,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$y, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -15839,15 +16117,15 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$v = 'dot-stepper';
+const rootClassName$x = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
-const contentClassName = 'dot-stepper-content';
+const contentClassName$1 = 'dot-stepper-content';
 const StyledStepper = styled.div`
   ${({
   theme,
   offset
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$x} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -16006,7 +16284,7 @@ const StyledStepper = styled.div`
         }
       }
 
-      .${contentClassName} {
+      .${contentClassName$1} {
         width: 100%;
 
         .left {
@@ -16162,7 +16440,7 @@ const DotStepper = ({
       return ['left', 'right'].includes(stepsPosition) ? stepsPosition : 'left';
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$v, getStepsPosition(), className);
+  const rootClasses = useStylesWithRootClass(rootClassName$x, 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' : '');
@@ -16257,7 +16535,7 @@ const DotStepper = ({
   };
   const renderContent = () => {
     return jsx("div", {
-      className: contentClassName,
+      className: contentClassName$1,
       ref: stepperContentRef,
       children: jsxs(ScrollbarContainer, {
         offset: offset,
@@ -16380,12 +16658,12 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$u = 'dot-table-pagination-custom-actions';
+const rootClassName$w = 'dot-table-pagination-custom-actions';
 const StyledTablePaginationCustomActions = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$w} {
       margin-left: ${theme.spacing(2.5)};
       display: flex;
       align-items: center;
@@ -16509,7 +16787,7 @@ const DotTablePaginationCustomActions = props => {
     });
   };
   return jsxs(StyledTablePaginationCustomActions, {
-    className: rootClassName$u,
+    className: rootClassName$w,
     children: [jsx(DotIconButton, {
       ariaLabel: "previous page",
       className: "page-control-button",
@@ -16556,7 +16834,7 @@ const DotTablePaginationCustomActions = props => {
   });
 };
 
-const rootClassName$t = 'dot-table-pagination';
+const rootClassName$v = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -16564,7 +16842,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$t} {
+    .${rootClassName$v} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -16607,7 +16885,7 @@ const DotTablePagination = ({
   showJumpToPageActionButton = false,
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -16615,7 +16893,7 @@ const DotTablePagination = ({
     onRowsPerPageChange && onRowsPerPageChange(evt);
   };
   return /* Container is used to pass 'typography' prop to a styled component */jsx(StyledTablePagination, {
-    className: rootClassName$t,
+    className: rootClassName$v,
     typography: typography,
     children: jsx(TablePagination, {
       ActionsComponent: showJumpToPageActionButton ? DotTablePaginationCustomActions : undefined,
@@ -16641,14 +16919,14 @@ const DotTablePagination = ({
   });
 };
 
-const rootClassName$s = 'dot-table';
+const rootClassName$u = 'dot-table';
 const MULTISELECT_COLUMN_WIDTH = 52;
 const COLLAPSIBLE_COLUMN_WIDTH = 42;
 const StyledPaper$1 = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$u} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -16791,10 +17069,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$r = 'dot-tbody';
+const rootClassName$t = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$r} {
+    &.${rootClassName$t} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -16989,12 +17267,12 @@ function stableSort(array, comparator) {
   return stabilizedThis.map(el => el[0]);
 }
 
-const rootClassName$q = 'dot-td';
+const rootClassName$s = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$s} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -17089,7 +17367,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -17157,13 +17435,13 @@ const EmptyDotRow = ({
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$p = 'dot-th-checkbox';
+const rootClassName$r = 'dot-th-checkbox';
 const styledTableHeaderCheckboxElement = (isCell = true) => {
   return styled(isCell ? TableCell : 'div')`
     ${({
     theme
   }) => css`
-      &.${rootClassName$p} {
+      &.${rootClassName$r} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
         padding: ${theme.spacing(0, 1)};
         width: ${theme.spacing(5)};
@@ -17191,7 +17469,7 @@ const DotHeaderCheckboxCell = ({
   isFromTableSelectionToolbar,
   multiSelectHeader
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$r, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
   const [multiSelectState, setMultiSelectState] = useState('unchecked');
   const {
     onCheckAllChange,
@@ -17241,12 +17519,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$o = 'dot-th';
+const rootClassName$q = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$q} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -17286,7 +17564,7 @@ const DotHeaderCell = ({
   value,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$o, pinned ? 'dot-pinned-cell' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$q, pinned ? 'dot-pinned-cell' : '', className);
   const headerTitle = isString$2(value) ? value : null;
   const formattedValue = getFormattedTableCellValue(value, typography);
   const getCellValue = () => {
@@ -17377,12 +17655,12 @@ const DotHeaderRow = ({
   });
 };
 
-const rootClassName$n = 'dot-tr';
+const rootClassName$p = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$p} {
       &.selected {
         &,
         .dot-td.dot-pinned-cell,
@@ -17608,12 +17886,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$m = 'dot-td-checkbox';
+const rootClassName$o = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$m} {
+    &.${rootClassName$o} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -17632,7 +17910,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -17685,7 +17963,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$n, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$p, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -17806,7 +18084,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$r
+        root: rootClassName$t
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -17821,12 +18099,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$l = 'dot-table-selection-toolbar';
+const rootClassName$n = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$n} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -17881,7 +18159,7 @@ const DotTableSelectionToolbar = ({
   multiSelectHeader,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -17967,7 +18245,7 @@ const DotTable = ({
       setPage(page);
     }
   }, [page]);
-  const rootClasses = useStylesWithRootClass(rootClassName$s, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$u, 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);
@@ -18170,7 +18448,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$k = 'dot-table-actions';
+const rootClassName$m = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -18260,7 +18538,7 @@ const DotTableActions = ({
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$k,
+      className: rootClassName$m,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -18284,12 +18562,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$j = 'dot-tabs';
+const rootClassName$l = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$j} {
+    &.${rootClassName$l} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -18342,7 +18620,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$j,
+  'data-pendoid': dataPendoId = rootClassName$l,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -18351,7 +18629,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -18405,9 +18683,9 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$i = 'dot-file-upload';
-const containerClassName = `${rootClassName$i}-container`;
-const dropZoneClassName = `${rootClassName$i}-drop-zone`;
+const rootClassName$k = 'dot-file-upload';
+const containerClassName = `${rootClassName$k}-container`;
+const dropZoneClassName = `${rootClassName$k}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
@@ -18427,7 +18705,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$i}.${dropZoneClassName} {
+    &.${rootClassName$k}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -18459,12 +18737,12 @@ const StyledFileUpload = styled.div`
   `}
 `;
 
-const rootClassName$h = 'dot-file-list-item';
+const rootClassName$j = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$h} {
+    &.${rootClassName$j} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -18476,7 +18754,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$h}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$j}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -18486,7 +18764,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$h}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$j}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -18528,7 +18806,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$h, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$j, 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);
@@ -18561,7 +18839,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$h}-end-icon`,
+      className: `${rootClassName$j}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -18685,7 +18963,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$i,
+  'data-pendoid': dataPendoId = rootClassName$k,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -18698,7 +18976,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$i, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$k, 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) => {
@@ -18770,13 +19048,13 @@ const DotFileUpload = ({
   });
 };
 
-const rootClassName$g = 'dot-fab';
+const rootClassName$i = 'dot-fab';
 const StyledFab = styled(Fab)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$g} {
+    &.${rootClassName$i} {
       ${color === 'default' ? css`
             background-color: ${theme.palette.figma.typography.white};
             color: ${theme.palette.figma.typography.black};
@@ -18816,7 +19094,7 @@ const DotFab = ({
   children,
   className,
   color = 'default',
-  'data-pendoid': dataPendoId = rootClassName$g,
+  'data-pendoid': dataPendoId = rootClassName$i,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -18824,7 +19102,7 @@ const DotFab = ({
   size = 'large',
   variant = 'circular'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
   return jsx(StyledFab, {
     "aria-label": ariaLabel,
     color: color,
@@ -18840,12 +19118,12 @@ const DotFab = ({
   });
 };
 
-const rootClassName$f = 'dot-divider';
+const rootClassName$h = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$f} {
+    &.${rootClassName$h} {
       color: ${theme.palette.figma.border.darker};
 
       .MuiDivider-light {
@@ -18865,7 +19143,7 @@ const DotDivider = ({
   orientation,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$h, className);
   return jsx(StyledDivider, {
     absolute: absolute,
     "aria-label": ariaLabel,
@@ -18894,7 +19172,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -18959,14 +19237,14 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const rootClassName$e = 'dot-draggable-list';
+const rootClassName$g = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
   ${({
   theme,
   draggableHandle
 }) => css`
-    &.${rootClassName$e} {
+    &.${rootClassName$g} {
       padding: ${theme.spacing(1, 0)};
       position: relative;
 
@@ -19001,7 +19279,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$e,
+  'data-pendoid': dataPendoId = rootClassName$g,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -19010,7 +19288,7 @@ const DotDraggableList = ({
   rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
   width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$e, className, draggableHandle ? 'with-draggable-handle' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$g, 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([]);
@@ -22286,7 +22564,7 @@ cjs.exports.DraggableCore = DraggableCore;
 var cjsExports = cjs.exports;
 var Draggable$1 = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);
 
-const rootClassName$d = 'dot-draggable-window';
+const rootClassName$f = 'dot-draggable-window';
 const defaultWidth = '600px';
 const defaultHeight = '324px';
 const StyledPaper = styled(Paper)`
@@ -22295,7 +22573,7 @@ const StyledPaper = styled(Paper)`
   $maxHeight,
   $maxWidth
 }) => css`
-    &.${rootClassName$d} {
+    &.${rootClassName$f} {
       max-width: ${$maxWidth !== null && $maxWidth !== void 0 ? $maxWidth : defaultWidth};
       max-height: ${$maxHeight !== null && $maxHeight !== void 0 ? $maxHeight : defaultHeight};
       ${$maxWidth ? '' : `width: ${defaultWidth};`}
@@ -22333,7 +22611,7 @@ const StyledPaper = styled(Paper)`
 const DotDraggableWindow = ({
   ariaLabel,
   anchorEl,
-  'data-pendoid': dataPendoId = rootClassName$d,
+  'data-pendoid': dataPendoId = rootClassName$f,
   'data-testid': dataTestId,
   className,
   children,
@@ -22342,7 +22620,7 @@ const DotDraggableWindow = ({
   onClose,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$f, className);
   const nodeRef = useRef(null);
   return jsx(Draggable$1, {
     bounds: "body",
@@ -22384,12 +22662,12 @@ const DotDraggableWindow = ({
   });
 };
 
-const rootClassName$c = 'dot-linear-progress';
+const rootClassName$e = 'dot-linear-progress';
 const StyledLinearProgress = styled(LinearProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$c} {
+    &.${rootClassName$e} {
       &.MuiLinearProgress-colorError {
         color: ${theme.palette.figma.inProgress.error};
       }
@@ -22421,7 +22699,7 @@ const DotLinearProgress = ({
   valueBuffer,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$e, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
@@ -22472,7 +22750,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$G,
+  'data-pendoid': dataPendoId = rootClassName$I,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -22513,7 +22791,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -22734,7 +23012,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$F,
+  'data-pendoid': dataPendoId = rootClassName$H,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -22766,7 +23044,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -23062,13 +23340,13 @@ const DotTimePicker = ({
   });
 };
 
-const rootClassName$b = 'dot-carousel';
+const rootClassName$d = 'dot-carousel';
 const StyledCarousel = styled.div`
   ${({
   backgroundColor,
   theme
 }) => css`
-    &.${rootClassName$b} {
+    &.${rootClassName$d} {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -23168,7 +23446,7 @@ const DotCarousel = ({
   progressIndicator,
   showPagesButtons = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$b, className, backgroundColor ? 'with-background-color' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$d, className, backgroundColor ? 'with-background-color' : '');
   const rightNavigationButtonClasses = useStylesWithRootClass('carousel-right-arrow', displayNavigationButtons);
   const leftNavigationButtonClasses = useStylesWithRootClass('carousel-left-arrow', displayNavigationButtons);
   const createUuids = () => {
@@ -23319,13 +23597,13 @@ const DotCarousel = ({
   });
 };
 
-const rootClassName$a = 'dot-sticky-with-border';
+const rootClassName$c = 'dot-sticky-with-border';
 const StyledStickyWithBorder = styled.div`
   ${({
   pinnedStickyBorder,
   unpinnedStickyBorder
 }) => css`
-    &.${rootClassName$a} {
+    &.${rootClassName$c} {
       position: sticky;
       top: -1px;
 
@@ -23353,7 +23631,7 @@ const DotStickyWithBorder = ({
 }) => {
   const [isPinned, setIsPinned] = useState(false);
   const ref = useRef(undefined);
-  const rootClasses = useStylesWithRootClass(rootClassName$a, className, isPinned ? 'pinned' : 'unpinned');
+  const rootClasses = useStylesWithRootClass(rootClassName$c, className, isPinned ? 'pinned' : 'unpinned');
   useEffect(() => {
     const element = ref.current;
     const observer = new IntersectionObserver(([e]) => setIsPinned(e.intersectionRatio < 1), {
@@ -23375,18 +23653,18 @@ const DotStickyWithBorder = ({
   });
 };
 
-const rootClassName$9 = 'dot--board';
+const rootClassName$b = 'dot--board';
 const classNames$5 = {
-  root: rootClassName$9,
-  spacingNormal: `${rootClassName$9}-normal`,
-  spacingDense: `${rootClassName$9}-dense`,
-  loading: `${rootClassName$9}-loading`
+  root: rootClassName$b,
+  spacingNormal: `${rootClassName$b}-normal`,
+  spacingDense: `${rootClassName$b}-dense`,
+  loading: `${rootClassName$b}-loading`
 };
 const StyledBoard = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$9} {
+    &.${rootClassName$b} {
       display: flex;
       overflow-x: auto;
       flex: 1;
@@ -23394,7 +23672,7 @@ const StyledBoard = styled.div`
     }
 
     @media (max-width: 650px) {
-      &.${rootClassName$9} {
+      &.${rootClassName$b} {
         justify-content: center;
       }
     }
@@ -23495,18 +23773,18 @@ const Board = React__default.forwardRef(({
   });
 });
 
-const rootClassName$8 = 'dot--board-column';
+const rootClassName$a = 'dot--board-column';
 const classNames$4 = {
-  root: rootClassName$8,
-  spacingNormal: `${rootClassName$8}-normal`,
-  spacingDense: `${rootClassName$8}-dense`,
-  collapse: `${rootClassName$8}-collapse`
+  root: rootClassName$a,
+  spacingNormal: `${rootClassName$a}-normal`,
+  spacingDense: `${rootClassName$a}-dense`,
+  collapse: `${rootClassName$a}-collapse`
 };
 const StyledBoardColumn = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$8} {
+    &.${rootClassName$a} {
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -23597,13 +23875,13 @@ const BoardColumn = React__default.forwardRef(({
   });
 });
 
-const rootClassName$7 = 'dot--board-column-header';
+const rootClassName$9 = 'dot--board-column-header';
 const classNames$3 = {
-  root: rootClassName$7,
-  spacingNormal: `${rootClassName$7}-normal`,
-  spacingDense: `${rootClassName$7}-dense`,
-  colorBar: `${rootClassName$7}-color-bar`,
-  title: `${rootClassName$7}-title`
+  root: rootClassName$9,
+  spacingNormal: `${rootClassName$9}-normal`,
+  spacingDense: `${rootClassName$9}-dense`,
+  colorBar: `${rootClassName$9}-color-bar`,
+  title: `${rootClassName$9}-title`
 };
 const StyledBoardColumnHeader = styled.div`
   ${({
@@ -23671,11 +23949,11 @@ const BoardColumnHeader = ({
   });
 };
 
-const rootClassName$6 = 'dot--board-column-items';
+const rootClassName$8 = 'dot--board-column-items';
 const classNames$2 = {
-  root: rootClassName$6,
-  spacingNormal: `${rootClassName$6}-normal`,
-  spacingDense: `${rootClassName$6}-dense`
+  root: rootClassName$8,
+  spacingNormal: `${rootClassName$8}-normal`,
+  spacingDense: `${rootClassName$8}-dense`
 };
 const StyledBoardColumnItems = styled.div`
   ${({
@@ -23727,11 +24005,11 @@ const BoardColumnItems = ({
   });
 };
 
-const rootClassName$5 = 'dot--board-column-action-bar';
+const rootClassName$7 = 'dot--board-column-action-bar';
 const classNames$1 = {
-  root: rootClassName$5,
-  spacingNormal: `${rootClassName$5}-normal`,
-  spacingDense: `${rootClassName$5}-dense`
+  root: rootClassName$7,
+  spacingNormal: `${rootClassName$7}-normal`,
+  spacingDense: `${rootClassName$7}-dense`
 };
 const StyledBoardColumnActionBar = styled(DotActionToolbar)`
   ${({
@@ -23802,13 +24080,13 @@ const BoardColumnCollapse = ({
   return useMemo(() => collapsed ? children : null, [children, collapsed]);
 };
 
-const rootClassName$4 = 'dot--board-column-header';
+const rootClassName$6 = 'dot--board-column-header';
 const classNames = {
-  root: rootClassName$4,
-  spacingNormal: `${rootClassName$4}-normal`,
-  spacingDense: `${rootClassName$4}-dense`,
-  title: `${rootClassName$4}-title`,
-  text: `${rootClassName$4}-text`
+  root: rootClassName$6,
+  spacingNormal: `${rootClassName$6}-normal`,
+  spacingDense: `${rootClassName$6}-dense`,
+  title: `${rootClassName$6}-title`,
+  text: `${rootClassName$6}-text`
 };
 const StyledBoardColumnSummary = styled.div`
   ${({
@@ -23870,12 +24148,12 @@ const BoardColumnSummary = ({
   });
 };
 
-const rootClassName$3 = 'dot-search';
+const rootClassName$5 = 'dot-search';
 const StyledSearch = styled(DotInputText)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$3} {
+    &.${rootClassName$5} {
       &.with-value .MuiInputBase-root {
         background-color: ${theme.palette.figma.primary.light};
 
@@ -23918,7 +24196,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$3, className, value ? 'with-value' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$5, className, value ? 'with-value' : '');
   return jsx(StyledSearch, Object.assign({}, rest, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -23937,12 +24215,12 @@ const DotSearch = _a => {
   }));
 };
 
-const rootClassName$2 = 'dot-toggle-switch';
+const rootClassName$4 = 'dot-toggle-switch';
 const StyledToggleSwitch = styled(Stack)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$2} {
+    &.${rootClassName$4} {
       gap: ${theme.spacing(2)};
       cursor: pointer;
 
@@ -23996,7 +24274,7 @@ const StyledToggleSwitch = styled(Stack)`
 const DotToggleSwitch = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$2,
+  'data-pendoid': dataPendoId = rootClassName$4,
   'data-testid': dataTestId,
   disabled = false,
   label,
@@ -24006,7 +24284,7 @@ const DotToggleSwitch = ({
 }) => {
   const toggleOptions = options.slice(0, 2);
   const isChecked = toggleOptions[1].value === value;
-  const rootClasses = useStylesWithRootClass(rootClassName$2, className, disabled ? 'dot-disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$4, className, disabled ? 'dot-disabled' : '');
   const toggleValue = () => {
     const [firstOption, secondOption] = toggleOptions;
     const newValue = value === firstOption.value ? secondOption.value : firstOption.value;
@@ -25275,13 +25553,13 @@ var Sketch = /*#__PURE__*/React__default.forwardRef((props, ref) => {
 });
 Sketch.displayName = 'Sketch';
 
-const rootClassName$1 = 'dot-color-picker';
+const rootClassName$3 = 'dot-color-picker';
 const StyledColorPicker = styled(Sketch)`
   ${({
   theme,
   $hideShadow
 }) => css`
-    &.${rootClassName$1} {
+    &.${rootClassName$3} {
       --sketch-background: ${theme.palette.figma.background.level0.componentsBackground} !important;
       --sketch-swatch-border-top: none !important;
       --sketch-box-shadow: ${theme.shadows[1]} !important;
@@ -25337,7 +25615,7 @@ const DotColorPicker = ({
   return jsx(StyledColorPicker, {
     "$hideShadow": hideShadow,
     "aria-label": ariaLabel,
-    className: rootClassName$1,
+    className: rootClassName$3,
     color: color,
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
@@ -25352,14 +25630,14 @@ const DotColorPicker = ({
   });
 };
 
-const rootClassName = 'dot-select';
+const rootClassName$2 = 'dot-select';
 const StyledSelectContainer = styled.div`
   ${({
   theme,
   size,
   persistentLabel
 }) => css`
-    &.${rootClassName} {
+    &.${rootClassName$2} {
       .MuiInputBase-root {
         background: ${theme.palette.figma.neutral.normal};
         height: ${theme.spacing(7)};
@@ -25408,7 +25686,7 @@ const DotSelect = ({
   autoFocus,
   className,
   defaultValue = '',
-  'data-pendoid': dataPendoId = rootClassName,
+  'data-pendoid': dataPendoId = rootClassName$2,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -25432,7 +25710,7 @@ const DotSelect = ({
   options,
   renderOption
 }) => {
-  const rootStyles = useStylesWithRootClass(rootClassName, className);
+  const rootStyles = useStylesWithRootClass(rootClassName$2, className);
   return jsxs(StyledSelectContainer, {
     persistentLabel: persistentLabel,
     size: size,
@@ -25492,4 +25770,171 @@ const DotSelect = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardAppTypeToLabelMap, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotColorPicker, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFab, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSelect, 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 };
+const rootClassName$1 = 'dot-chat-bubble';
+const actionsClassName = 'dot-chat-bubble-actions';
+const contentClassName = 'dot-chat-bubble-content';
+const StyledChatBubble = styled.div`
+  ${({
+  theme,
+  $orientation
+}) => css`
+    &.${rootClassName$1} {
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.spacing(0.5)};
+      width: fit-content;
+
+      .${contentClassName} {
+        overflow-wrap: break-word;
+        padding: ${theme.spacing(1, 2)};
+        border-top-left-radius: ${$orientation === 'left' ? '0' : theme.spacing(2)};
+        border-top-right-radius: ${$orientation === 'right' ? '0' : theme.spacing(2)};
+        border-bottom-right-radius: ${theme.spacing(2)};
+        border-bottom-left-radius: ${theme.spacing(2)};
+
+        &.default {
+          background-color: ${theme.palette.figma.neutral.light};
+        }
+
+        &.info {
+          background-color: ${theme.palette.figma.primary.light};
+        }
+
+        &.error {
+          background-color: ${theme.palette.figma.destructive.light};
+        }
+
+        &.warning {
+          background-color: ${theme.palette.figma.warning.light};
+        }
+
+        &.success {
+          background-color: ${theme.palette.figma.success.light};
+        }
+
+        &.none {
+          padding: 0;
+          background-color: transparent;
+        }
+      }
+
+      .${actionsClassName} {
+        align-self: ${$orientation === 'left' ? 'flex-start' : 'flex-end'};
+      }
+    }
+  `}
+`;
+
+const DotChatBubble = ({
+  actions,
+  ariaLabel,
+  ariaRole,
+  className,
+  children,
+  'data-testid': dataTestId,
+  'data-pendoid': dataPendoId,
+  orientation,
+  severity = 'default'
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$1, className);
+  const contentClasses = useStylesWithRootClass(contentClassName, severity);
+  return jsxs(StyledChatBubble, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    role: ariaRole,
+    "$orientation": orientation,
+    children: [jsx("div", {
+      className: contentClasses,
+      "data-testid": dataTestId && `${dataTestId}-content`,
+      children: children
+    }), actions && jsx("div", {
+      className: actionsClassName,
+      children: actions
+    })]
+  });
+};
+
+const rootClassName = 'dot-loading-dots';
+const dotAnimation = keyframes`
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+`;
+const StyledLoadingDots = styled.div`
+  ${({
+  theme,
+  $size,
+  $duration,
+  $count
+}) => {
+  const dotSize = typeof $size === 'number' ? `${$size}px` : $size;
+  const spacing = typeof $size === 'number' ? `${$size * 0.75}px` : '6px';
+  return css`
+      &.${rootClassName} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing};
+
+        .loading-dot {
+          width: ${dotSize};
+          height: ${dotSize};
+          border-radius: 50%;
+          background-color: ${theme.palette.figma.typography.black};
+          animation: ${dotAnimation} ${$duration}s infinite ease-in-out;
+
+          ${Array.from({
+    length: $count
+  }, (_, i) => {
+    return css`
+              &:nth-child(${i + 1}) {
+                animation-delay: ${$duration / $count * i}s;
+              }
+            `;
+  })}
+        }
+      }
+    `;
+}}
+`;
+
+const DotLoadingDots = ({
+  ariaLabel,
+  className,
+  count = 3,
+  'data-pendoid': dataPendoId = rootClassName,
+  'data-testid': dataTestId,
+  size = 8,
+  speed = 0.8
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName, className);
+  useEffect(() => {
+    if (!ariaLabel) {
+      console.warn('a11y: LoadingDots should have an ariaLabel to describe the loading state');
+    }
+  }, []);
+  const dotCount = Math.max(1, Math.min(count, 10));
+  const animationDuration = 0.8 / speed;
+  return jsx(StyledLoadingDots, {
+    "aria-label": ariaLabel || 'Loading',
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    role: "status",
+    "$size": size,
+    "$duration": animationDuration,
+    "$count": dotCount,
+    children: Array.from({
+      length: dotCount
+    }, (_, i) => jsx("div", {
+      className: "loading-dot"
+    }, i))
+  });
+};
+
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardAppTypeToLabelMap, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotChatBubble, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotColorPicker, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFab, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotLoadingDots, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSelect, 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 };