@digital-ai/dot-components 3.15.3 → 3.16.0

package/index.esm.js

@@ -108,12 +108,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$1j = 'dot-icon';
+const rootClassName$1k = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1k} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -150,7 +150,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -211,7 +211,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$1i = 'dot-accordion';
+const rootClassName$1j = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -222,7 +222,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1i} .${summaryClassName} {
+    &.${rootClassName$1j} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -267,7 +267,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1i,
+  'data-pendoid': dataPendoId = rootClassName$1j,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -278,7 +278,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -394,7 +394,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1h = 'dot-text-field';
+const rootClassName$1i = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
@@ -403,6 +403,8 @@ const successClassName = 'dot-success';
 const adornmentIconClassName = 'dot-adornment-icon';
 const fieldsetClassName = 'MuiOutlinedInput-notchedOutline';
 const readOnlyClassName$1 = 'read-only';
+const resizerClassName = 'with-resizer';
+const ROW_HEIGHT = 37;
 const StyledAdornment = styled(InputAdornment)`
   .dot-icon {
     ${adornmentIconStyles()};
@@ -440,9 +442,11 @@ const StyledTextFieldContainer = styled.div`
 const StyledTextField = styled(TextField)`
   ${({
   theme,
-  InputProps
+  InputProps,
+  $maxRows,
+  $minRows
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1i} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -461,9 +465,27 @@ const StyledTextField = styled(TextField)`
           height: 19px;
         }
       }
-      .MuiInputBase-inputMultiline {
-        padding: 0;
+
+      .MuiInputBase-multiline {
+        .MuiInputBase-inputMultiline {
+          padding: 0;
+        }
+
+        &.${resizerClassName} {
+          resize: both;
+          overflow: auto;
+          height: ${$minRows ? ROW_HEIGHT * $minRows : ROW_HEIGHT}px;
+          min-height: ${$minRows ? ROW_HEIGHT * $minRows : ROW_HEIGHT}px;
+          max-height: ${$maxRows ? `${ROW_HEIGHT * $maxRows}px` : 'unset'};
+          min-width: 170px;
+
+          #custom-text-input.MuiInputBase-inputMultiline {
+            height: 100% !important;
+            width: 100%;
+          }
+        }
       }
+
       &.${readOnlyClassName$1} .MuiInputBase-root,
       .MuiInputBase-root.Mui-disabled {
         ${readOnlyStyles(theme)};
@@ -486,7 +508,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1h} {
+    &.${rootSelectClassName}, &.${rootClassName$1i} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -577,15 +599,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1g = 'dot-action-toolbar';
+const rootClassName$1h = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1h} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1h} .MuiInputBase-root {
+      .${rootClassName$1i} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -599,7 +621,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1669,12 +1691,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$1f = 'dot-alert-banner';
+const rootClassName$1g = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1709,7 +1731,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1f,
+  'data-pendoid': dataPendoId = rootClassName$1g,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1717,7 +1739,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2395,7 +2417,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1e = 'dot-avatar';
+const rootClassName$1f = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2405,7 +2427,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2517,7 +2539,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2556,12 +2578,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1d = 'dot-button';
+const rootClassName$1e = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2645,7 +2667,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1d,
+  'data-pendoid': dataPendoId = rootClassName$1e,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2661,7 +2683,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   let color;
   let variant;
   switch (type) {
@@ -2685,7 +2707,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
-    "data-testid": `${dataTestId || rootClassName$1d}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1e}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2694,7 +2716,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1d,
+      "data-testid": dataTestId || rootClassName$1e,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2713,10 +2735,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1c = 'dot-link';
+const rootClassName$1d = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1c} {
+    &.${rootClassName$1d} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2732,7 +2754,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1c,
+  'data-pendoid': dataPendoId = rootClassName$1d,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2745,7 +2767,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -2796,7 +2818,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1b = 'dot-list';
+const rootClassName$1c = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2804,7 +2826,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1b} {
+      &.${rootClassName$1c} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2897,12 +2919,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1a = 'dot-progress';
+const rootClassName$1b = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1b} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -2953,7 +2975,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3019,13 +3041,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$19 = 'dot-popper';
+const rootClassName$1a = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3084,7 +3106,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$19}, &.${rootClassName$19} > .dot-popper-paper {
+    &.${rootClassName$1a}, &.${rootClassName$1a} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3114,17 +3136,17 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$18 = 'dot-menu';
+const rootClassName$19 = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$18}, &.${rootClassName$19} {
+    &.${rootClassName$19}, &.${rootClassName$1a} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3204,14 +3226,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$17 = 'dot-ul';
+const rootClassName$18 = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$18} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3307,7 +3329,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3418,7 +3440,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3506,12 +3528,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$16 = 'dot-drawer';
+const rootClassName$17 = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} .MuiBackdrop-root {
+    &.${rootClassName$17} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3530,12 +3552,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$15 = 'dot-drawer-header';
+const rootClassName$16 = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3546,13 +3568,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$14 = 'dot-icon-btn';
+const rootClassName$15 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3611,7 +3633,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$14,
+  'data-pendoid': dataPendoId = rootClassName$15,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3624,7 +3646,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$14, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3659,7 +3681,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3676,10 +3698,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$13 = 'dot-drawer-body';
+const rootClassName$14 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3700,7 +3722,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3715,12 +3737,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$12 = 'dot-drawer-footer';
+const rootClassName$13 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3733,7 +3755,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3749,7 +3771,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$16,
+  'data-pendoid': dataPendoId = rootClassName$17,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3772,7 +3794,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, 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';
@@ -4172,7 +4194,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4268,12 +4290,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$11 = 'dot-copy-button';
+const rootClassName$12 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} .copied-to-clipboard {
+    &.${rootClassName$12} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4299,7 +4321,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$11,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4347,7 +4369,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$11,
+    className: rootClassName$12,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4436,13 +4458,14 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1h,
+  'data-pendoid': dataPendoId = rootClassName$1i,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
   endAdornmentTooltip,
   fullWidth = true,
   hasDebounce,
+  hasResizer = false,
   helperText,
   endIcon,
   endText,
@@ -4482,7 +4505,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1h, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1i, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4556,6 +4579,8 @@ const DotInputText = ({
     }
     return null;
   };
+  const getMinRows = () => multiline && !hasResizer ? minRows : null;
+  const getMaxRows = () => multiline && !hasResizer ? maxRows : null;
   const wrapperClassName = useStylesWithRootClass(fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
   const inputClassName = useStylesWithRootClass('dot-input', readOnly && readOnlyClassName$1);
   return jsxs(StyledTextFieldContainer, {
@@ -4567,7 +4592,10 @@ const DotInputText = ({
       label,
       required
     }), jsx(StyledTextField, {
+      "$maxRows": maxRows,
+      "$minRows": minRows,
       InputProps: {
+        className: multiline && hasResizer && resizerClassName || undefined,
         startAdornment: startAdornmentIcon(),
         endAdornment: getEndAdornment()
       },
@@ -4598,8 +4626,8 @@ const DotInputText = ({
       },
       inputRef: textFieldInputRef,
       label: persistentLabel ? null : label,
-      maxRows: multiline ? maxRows : null,
-      minRows: multiline ? minRows : null,
+      maxRows: getMaxRows(),
+      minRows: getMinRows(),
       multiline: multiline,
       name: name,
       onBlur: onBlur,
@@ -4618,10 +4646,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$10 = 'dot-search-input';
+const rootClassName$11 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
     }
   `}
 `;
@@ -4638,7 +4666,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4894,12 +4922,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$$ = 'dot-app-switcher';
+const rootClassName$10 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5009,7 +5037,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5387,12 +5415,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$_ = 'dot-sidebar';
+const rootClassName$$ = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5686,10 +5714,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$Z = 'dot-truncate-with-tooltip';
+const rootClassName$_ = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5720,7 +5748,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5844,7 +5872,7 @@ const DotSidebar = ({
     };
   }, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$_, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5912,12 +5940,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$Y = 'dot-badge';
+const rootClassName$Z = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5952,7 +5980,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5974,7 +6002,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$X = 'dot-app-toolbar';
+const rootClassName$Y = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6014,7 +6042,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6136,7 +6164,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6266,14 +6294,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$W = 'dot-autocomplete';
+const rootClassName$X = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6310,12 +6338,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$V = 'dot-chip';
+const rootClassName$W = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6421,7 +6449,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-pendoid': dataPendoId = rootClassName$W,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6434,7 +6462,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6534,7 +6562,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$W,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6587,10 +6615,10 @@ const DotAutoComplete = ({
   const popperOpen = !readOnly && (open || isOpened);
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(rootClassName$W, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1h, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1i, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
-  const popperClasses = useStylesWithRootClass(rootClassName$19, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1a, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -6869,10 +6897,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$U = 'dot-avatar-group';
+const rootClassName$V = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$U} {
+      &.${rootClassName$V} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6891,7 +6919,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6906,13 +6934,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$T = 'dot-breadcrumbs';
+const rootClassName$U = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$U} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6932,7 +6960,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$U} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7260,7 +7288,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$T,
+        root: rootClassName$U,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7291,14 +7319,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$S = 'dot-button-toggle';
+const rootClassName$T = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7414,7 +7442,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$S,
+  'data-pendoid': dataPendoId = rootClassName$T,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7424,7 +7452,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7507,12 +7535,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$R = 'dot-card';
+const rootClassName$S = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$R} {
+    &.${rootClassName$S} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7524,7 +7552,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7553,12 +7581,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$Q = 'dot-card-footer';
+const rootClassName$R = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$R} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7570,7 +7598,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7579,12 +7607,12 @@ const DotCardFooter = ({
   });
 };
 
-const rootClassName$P = 'dot-card-header';
+const rootClassName$Q = 'dot-card-header';
 const StyledCardHeader = styled(CardHeader)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$Q} {
       .MuiCardHeader-content {
         overflow-x: hidden;
 
@@ -7607,7 +7635,7 @@ const DotCardHeader = ({
   title,
   titleSize = 'large'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   const nonSmallTitleSize = titleSize === 'medium' ? 'h3' : 'h2';
   const titleVariant = titleSize === 'small' ? 'h4' : nonSmallTitleSize;
   const subheaderVariant = subheaderSize === 'small' ? 'body2' : 'body1';
@@ -7642,9 +7670,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$O = 'dot-form-control-label';
+const rootClassName$P = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$O} {
+  &.${rootClassName$P} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -7667,12 +7695,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$N = 'dot-checkbox';
+const rootClassName$O = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$O} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -7691,7 +7719,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$O,
+  'data-pendoid': dataPendoId = rootClassName$P,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7706,14 +7734,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$N
+      root: rootClassName$O
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -7742,13 +7770,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$M = 'dot-form-group';
+const rootClassName$N = '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$M} {
+  &.${rootClassName$N} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -7779,7 +7807,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$L = 'dot-checkbox-group';
+const rootClassName$M = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -7788,7 +7816,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$L} {
+      .${rootClassName$M} {
         width: 100%;
       }
 
@@ -7815,7 +7843,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$O} {
+        .${rootClassName$P} {
           margin: 0;
         }
       }
@@ -7823,13 +7851,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$K = 'dot-form-group';
+const rootClassName$L = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$K} > * {
+    &.${rootClassName$L} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -7842,7 +7870,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7881,7 +7909,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$M, rootClassName$L, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, rootClassName$M, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -7966,12 +7994,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$J = 'chip-list';
+const rootClassName$K = 'chip-list';
 const StyledChipList = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$K} {
       display: flex;
       gap: ${theme.spacing(1)};
     }
@@ -8046,19 +8074,19 @@ function DotChipList({
     setChips(itemElements);
   }, [items, maxChars]);
   return jsx(StyledChipList, {
-    className: rootClassName$J,
+    className: rootClassName$K,
     "data-testid": dataTestId,
     style: style,
     children: chips
   });
 }
 
-const rootClassName$I = 'dot-dialog';
+const rootClassName$J = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -8104,7 +8132,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$I,
+  'data-pendoid': dataPendoId = rootClassName$J,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -8117,7 +8145,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   useEffect(() => {
@@ -8235,7 +8263,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$H = 'dot-grid';
+const rootClassName$I = '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`};
@@ -8287,7 +8315,7 @@ const Grid = ({
   className,
   children
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
   return jsx("div", {
     className: rootClasses,
     children: children
@@ -8306,7 +8334,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -8512,12 +8540,12 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$G = 'dot-pill';
+const rootClassName$H = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$H} {
       background-color: ${({
   backgroundcolor,
   variant
@@ -8641,7 +8669,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -9683,6 +9711,17 @@ const DotMetadataApiProvider = ({
         }
       });
     },
+    deleteDashboard: dashboardId => {
+      setAccountIdHeader(accountId);
+      return cancelablePromise(DashboardsService.deleteDashboardsService(dashboardId)).then(() => {
+        setDashboardsError(null);
+        setDashboards(dashboards.filter(dashboard => dashboard.id !== dashboardId));
+        return true;
+      }).catch(error => {
+        setDashboardsError(error);
+        return false;
+      });
+    },
     duplicateDashboard: (dashboardId, dashboard) => {
       setAccountIdHeader(accountId);
       return cancelablePromise(DashboardsService.postDashboardsService1(dashboardId, dashboard)).then(response => {
@@ -9835,18 +9874,18 @@ function addAutoHideDuration(severity) {
   return severity === 'error' ? null : 10000;
 }
 
-const rootClassName$F = 'dot-snackbar';
+const rootClassName$G = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$F} {
+    &.${rootClassName$G} {
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1f} {
+      .${rootClassName$1g} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -9898,7 +9937,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -9956,10 +9995,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$E = 'dot-snackbar-container';
+const rootClassName$F = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$E} {
+    &.${rootClassName$F} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -9990,10 +10029,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$E,
+    className: rootClassName$F,
     children: jsx("div", {
-      className: rootClassName$E,
-      "data-testid": rootClassName$E,
+      className: rootClassName$F,
+      "data-testid": rootClassName$F,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoHideDuration: alert.autoHideDuration,
@@ -10064,12 +10103,12 @@ const useEnqueueErrorMessage = error => {
   }, [error]);
 };
 
-const rootClassName$D = 'dot-dashboard-details';
+const rootClassName$E = 'dot-dashboard-details';
 const StyledDashboardDetails = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$D} {
+    &.${rootClassName$E} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -10192,7 +10231,7 @@ const DotDashboardDetailsView = ({
   zIndex = 990
 }) => {
   var _a, _b;
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
   const closeHandler = useCallback(event => {
     onClose && onClose(event);
   }, [onClose]);
@@ -10804,6 +10843,151 @@ function DotDashboardDialog({
   });
 }
 
+const rootClassName$D = 'dot-impact-dialog';
+const StyledImpactDialog = styled(DotDialog)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$D} {
+      .high-impact-default-content {
+        margin-top: ${theme.spacing(2)};
+        margin-bottom: ${theme.spacing(3)};
+      }
+      .item-name {
+        font-weight: bold;
+        white-space: pre;
+      }
+    }
+  `}
+`;
+
+function capitalize(word) {
+  return word[0].toUpperCase() + word.slice(1);
+}
+function HighImpact({
+  message,
+  record,
+  action,
+  objectType,
+  inputValue,
+  handleUpdate
+}) {
+  const defaultMessage = useMemo(() => jsxs(DotTypography, {
+    className: "high-impact-default-content",
+    variant: "body1",
+    children: ["This action cannot be undone. This will permanently", ' ', action.toUpperCase(), objectType && ' the ', jsx("span", {
+      className: "item-name",
+      children: record
+    }), objectType && ` ${objectType}`, ". Some data may be lost."]
+  }), [action, objectType, record]);
+  return jsxs(Fragment, {
+    children: [message ? message : defaultMessage, jsxs(DotTypography, {
+      variant: "body1",
+      children: ["Please type ", jsx("span", {
+        className: "item-name",
+        children: record
+      }), " to confirm."]
+    }), jsx(DotInputText, {
+      autoFocus: true,
+      onChange: handleUpdate,
+      value: inputValue,
+      type: "text",
+      name: "record-name",
+      id: "record-name"
+    })]
+  });
+}
+function MediumImpact({
+  message,
+  record,
+  action
+}) {
+  const defaultMessage = useMemo(() => jsxs(DotTypography, {
+    children: ["You are about to ", action.toUpperCase(), jsxs("strong", {
+      children: [" ", record]
+    }), ". This action cannot be undone."]
+  }), [action, record]);
+  if (message) {
+    return jsx(DotTypography, {
+      children: message
+    });
+  }
+  return defaultMessage;
+}
+const DotImpactDialog = ({
+  'data-testid': dataTestId,
+  className,
+  record = '',
+  action = 'delete',
+  actionIcon = 'delete',
+  objectType,
+  impact = 'medium',
+  message = null,
+  open,
+  onSubmit,
+  onCancel
+}) => {
+  const [inputValue, setInputField] = useState('');
+  const [buttonDisabled, setButtonDisabled] = useState(true);
+  const handleUpdate = useCallback(e => {
+    setInputField(e.target.value);
+  }, []);
+  useEffect(() => {
+    if (impact === 'high' && !objectType) {
+      console.warn("The 'objectType' property should be passed to DotImpactDialog when 'impact' property value is 'high'.");
+    }
+  }, [impact, objectType]);
+  useEffect(() => {
+    if (impact === 'medium') return setButtonDisabled(false);
+    if (record && record === inputValue) {
+      return setButtonDisabled(false);
+    } else if (record !== inputValue) {
+      return setButtonDisabled(true);
+    }
+  }, [impact, inputValue, record]);
+  const submitButtonLabel = useMemo(() => {
+    switch (impact) {
+      case 'high':
+        return `I understand the risks, ${capitalize(action)} ${record}.`;
+      case 'medium':
+        return `${capitalize(action)}`;
+    }
+    return '';
+  }, [action, capitalize, impact, record]);
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  return jsx(StyledImpactDialog, {
+    "data-testid": dataTestId,
+    className: rootClasses,
+    open: open,
+    title: "Are you sure?",
+    ariaLabel: `${impact}-impact-dialog`,
+    closeIconVisible: false,
+    onSubmit: onSubmit,
+    onCancel: onCancel,
+    submitButtonProps: {
+      disabled: buttonDisabled,
+      type: 'destructive',
+      label: submitButtonLabel,
+      'data-testid': `${impact}-impact-button`,
+      startIcon: jsx(DotIcon, {
+        iconId: actionIcon
+      })
+    },
+    children: impact === 'high' ? jsx(HighImpact, {
+      inputValue: inputValue,
+      action: action,
+      handleUpdate: handleUpdate,
+      record: record,
+      objectType: objectType,
+      message: message
+    }) : jsx(MediumImpact, {
+      record: record,
+      action: action,
+      message: message
+    })
+  });
+};
+
 const InlineMessage = styled(DotTypography)`
   ${({
   theme
@@ -11229,8 +11413,26 @@ const StyledDotMenu = styled(DotMenu)`
 }) => css`
     z-index: 9999;
 
-    .dot-link .dot-icon {
-      margin-right: ${theme.spacing(1)};
+    &.dot-menu {
+      width: 200px;
+
+      .dot-ul .dot-li {
+        padding: 0;
+
+        .dot-link {
+          padding: ${theme.spacing(0.5, 2)};
+
+          .dot-icon {
+            margin-right: ${theme.spacing(2)};
+          }
+        }
+        .dashboard-details-border {
+          border-top: 1px solid #999;
+          width: 100%;
+          margin-bottom: ${theme.spacing(1)};
+          margin-top: ${theme.spacing(1)};
+        }
+      }
     }
   `}
 `;
@@ -11238,6 +11440,7 @@ const StyledDotMenu = styled(DotMenu)`
 function DotDashboardOptionsMenu({
   dashboard,
   isEdit = false,
+  onStartDelete,
   onStartDuplicate,
   onStartStatusChange,
   onViewMode,
@@ -11315,7 +11518,33 @@ function DotDashboardOptionsMenu({
       onclick: handleDuplicateClick
     });
   }
+  if (onStartDelete && !dashboard.is_ootb_dashboard) {
+    const handleDeleteClick = () => {
+      handleMenuClose();
+      onStartDelete(dashboard);
+    };
+    menuItems.push({
+      children: jsxs(DotLink, {
+        ariaLabel: "Delete dashboard",
+        color: "inherit",
+        onClick: handleDeleteClick,
+        underline: "none",
+        children: [jsx(DotIcon, {
+          iconId: "delete"
+        }), " Delete"]
+      }),
+      key: 'delete',
+      onclick: handleDeleteClick
+    });
+  }
   if (onDetails) {
+    menuItems.push({
+      children: jsx("div", {
+        className: "dashboard-details-border"
+      }),
+      disabled: true,
+      key: 'dashboard-details-border'
+    });
     menuItems.push({
       children: jsxs(DotLink, {
         ariaLabel: "Dashboard details",
@@ -11326,6 +11555,7 @@ function DotDashboardOptionsMenu({
           iconId: "file-lines"
         }), " Details"]
       }),
+      classes: 'dashboard-details',
       key: 'dashboard-details',
       onClick: () => onDetails(dashboard)
     });
@@ -11342,6 +11572,7 @@ function DotDashboardOptionsMenu({
       className: "card-header-action-menu",
       disablePortal: true,
       id: "card-header-action-menu",
+      menuItemHeight: "auto",
       menuItems: menuItems,
       open: open,
       onLeave: handleMenuClose
@@ -11434,6 +11665,7 @@ function DotDashboardActions({
   onClose,
   onFavorite,
   onStatusChanged,
+  onDeleted,
   onDuplicated,
   onViewMode
 }) {
@@ -11441,14 +11673,19 @@ function DotDashboardActions({
   // they are evaluated before any context imports. If they are evaluated
   // after they can cause React state issues when rendering.
   const [dashboardToCopy, setDashboardToCopy] = useState(null);
+  const [dashboardToDelete, setDashboardToDelete] = useState(null);
   const [dashboardToPublish, setDashboardToPublish] = useState(null);
   const [dashboardToUnpublish, setDashboardToUnpublish] = useState(null);
   const [appCategories, setAppCategories] = useState(null);
   const {
+    deleteDashboard,
     duplicateDashboard,
     getCategories,
     setOpenedDashboardDetails
   } = useDotMetadataApiContext();
+  const {
+    cancelablePromise
+  } = useCancelablePromise();
   useEffect(() => {
     var _a;
     if (dashboard && ((_a = dashboard.target_apps) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -11470,6 +11707,16 @@ function DotDashboardActions({
     setDashboardToUnpublish(null);
     setDashboardToPublish(dashboard);
   }, [dashboard]);
+  const handleDeleteClose = useCallback(() => {
+    setDashboardToDelete(null);
+  }, []);
+  const handleDeleteSubmit = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+    const dashboardId = dashboardToDelete.id;
+    return cancelablePromise(deleteDashboard(dashboardId)).then(deleted => {
+      setDashboardToDelete(null);
+      onDeleted(dashboardId, deleted);
+    });
+  }), [dashboardToDelete, onDeleted]);
   const handleDuplicateClose = useCallback(() => {
     setDashboardToCopy(null);
   }, []);
@@ -11482,15 +11729,19 @@ function DotDashboardActions({
     };
     return duplicateDashboard(dashboard.id, copyData).then(result => {
       if (result && 'id' in result) {
-        onDuplicated(result, isDone);
+        onDuplicated && onDuplicated(result, isDone);
       }
     });
-  }, [dashboard]);
+  }, [dashboard, onDuplicated]);
+  const handleStartDelete = useCallback(dashboardToDel => {
+    setDashboardToDelete(dashboardToDel);
+  }, []);
   const handleStartDuplicate = useCallback(dashboardToDupe => {
     setDashboardToCopy(dashboardToDupe);
   }, []);
   const handleStartDuplicateIfConfig = onDuplicated ? handleStartDuplicate : undefined;
   const handleStartStatusChangeIfConfig = onStatusChanged ? handleStartStatusChange : undefined;
+  const handleStartDeleteIfConfig = onDeleted ? handleStartDelete : undefined;
   return jsxs(StyledDashboardActions, {
     "data-testid": "dot-dashboard-actions",
     children: [jsx(DotDashboardPublishConfirm, {
@@ -11506,6 +11757,11 @@ function DotDashboardActions({
       open: true,
       onClose: handleDuplicateClose,
       onSubmit: handleDuplicateSubmit
+    }), dashboardToDelete && jsx(DotImpactDialog, {
+      onCancel: handleDeleteClose,
+      onSubmit: handleDeleteSubmit,
+      record: dashboardToDelete === null || dashboardToDelete === void 0 ? void 0 : dashboardToDelete.name,
+      open: true
     }), jsx(HelpButton, {
       dashboard: dashboard
     }), onFavorite && jsx(FavoriteButton, {
@@ -11517,8 +11773,9 @@ function DotDashboardActions({
       onViewMode: onViewMode,
       onStartStatusChange: handleStartStatusChangeIfConfig,
       onStartDuplicate: handleStartDuplicateIfConfig,
+      onStartDelete: handleStartDeleteIfConfig,
       onDetails: () => setOpenedDashboardDetails(dashboard)
-    }), jsx(CloseButton, {
+    }), onClose && jsx(CloseButton, {
       dashboard: dashboard,
       onClose: onClose
     })]
@@ -11544,6 +11801,7 @@ function DotDashboardHeader({
   onClose,
   onFavorite,
   onStatusChanged,
+  onDeleted,
   onDuplicated,
   onViewMode
 }) {
@@ -11569,12 +11827,13 @@ function DotDashboardHeader({
       children: dashboard === null || dashboard === void 0 ? void 0 : dashboard.name
     }), jsx(DotDashboardActions, {
       applications: applications,
+      canEdit: canEdit,
       dashboard: dashboard,
       isEdit: isEdit,
-      canEdit: canEdit,
       onClose: onClose,
       onFavorite: onFavorite,
       onStatusChanged: onStatusChanged,
+      onDeleted: onDeleted,
       onDuplicated: onDuplicated,
       onViewMode: onViewMode
     })]
@@ -11750,7 +12009,7 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$O} {
+      .${rootClassName$P} {
         margin: 0;
       }
     }
@@ -11910,9 +12169,9 @@ const StyledFormContainer = styled.div`
     &.${rootClassName$y} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$M},
-        .${rootClassName$O},
-        .${rootClassName$1h},
+      .${rootClassName$N},
+        .${rootClassName$P},
+        .${rootClassName$1i},
         .${rootSelectClassName},
         .${rootClassName$A},
         .${rootClassName$z} {
@@ -11920,7 +12179,7 @@ const StyledFormContainer = styled.div`
       }
 
       label
-        + .${rootClassName$1h},
+        + .${rootClassName$1i},
         label
         + .${rootSelectClassName},
         label
@@ -11930,8 +12189,8 @@ const StyledFormContainer = styled.div`
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$L}, .${groupClassName} {
-        .${rootClassName$O} {
+      .${rootClassName$M}, .${groupClassName} {
+        .${rootClassName$P} {
           margin: 0;
         }
       }
@@ -12237,7 +12496,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$O,
+  'data-pendoid': dataPendoId = rootClassName$P,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -12250,7 +12509,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -12304,7 +12563,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -12438,7 +12697,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$O,
+    className: rootClassName$P,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -16499,7 +16758,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -18140,4 +18399,4 @@ const BoardColumnSummary = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };