@digital-ai/dot-components 5.12.0 → 5.12.1

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { useEffect, useState, useRef, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, Fab, LinearProgress, Slide, Stack, Select } from '@mui/material';
+import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, AvatarGroup, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, 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, { keyframes, css, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import '@digital-ai/dot-icons';
@@ -2802,6 +2802,54 @@ const StyledAvatar = styled(Avatar)`
   `}
 `;
 
+const rootClassName$1n = 'dot-avatar-group';
+const StyledAvatarGroup = styled(AvatarGroup)`
+  ${() => css`
+      &.${rootClassName$1n} {
+        justify-content: flex-end;
+
+        .MuiAvatar-root {
+          border: none;
+          display: flex;
+        }
+      }
+    `}
+`;
+const StyledDotTooltip = styled(DotTooltip)`
+  ${({
+  theme
+}) => css`
+      &.avatar-with-tooltip {
+        margin-left: -${theme.spacing(1)};
+      }
+    `}
+`;
+const StyledDotTypography = styled(DotTypography)`
+  ${({
+  theme
+}) => css`
+       {
+        color: inherit;
+        &.xs {
+          padding: ${theme.spacing(0.5)};
+        }
+        &.small {
+          padding: ${theme.spacing(1)};
+        }
+        &.medium, &.large {
+          padding: ${theme.spacing(1.5)};
+        }
+    `}
+`;
+const StyledExtraAvatarSpan = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+`;
+
 const AvatarContent = ({
   ai,
   'data-testid': dataTestId,
@@ -2869,6 +2917,7 @@ const DotAvatar = ({
   text = alt,
   type = 'image',
   tooltip,
+  tooltipClassname,
   variant = 'circular',
   style
 }) => {
@@ -2879,9 +2928,10 @@ const DotAvatar = ({
     if (text && text !== alt) return getAvatarColorForInputText(text);
     return 'default';
   };
-  return jsx(DotTooltip, {
+  return jsx(StyledDotTooltip, {
     disableInteractive: disableInteractive,
     childrenDisplayStyle: "inline-block",
+    className: tooltipClassname,
     title: tooltip,
     children: jsx(StyledAvatar, {
       alt: alt,
@@ -2914,12 +2964,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1n = 'dot-button';
+const rootClassName$1m = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1n} {
+    &.${rootClassName$1m} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -3072,7 +3122,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1n,
+  'data-pendoid': dataPendoId = rootClassName$1m,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -3090,7 +3140,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
   let color;
   let variant;
   switch (type) {
@@ -3121,7 +3171,7 @@ const DotButton = forwardRef(({
   }
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
-    "data-testid": `${dataTestId || rootClassName$1n}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1m}-tooltip`,
     disableInteractive: disableInteractive,
     placement: tooltipPlacement,
     title: tooltip,
@@ -3133,7 +3183,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1n,
+      "data-testid": dataTestId || rootClassName$1m,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -3153,10 +3203,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1m = 'dot-link';
+const rootClassName$1l = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1m} {
+    &.${rootClassName$1l} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -3172,7 +3222,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1m,
+  'data-pendoid': dataPendoId = rootClassName$1l,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -3185,7 +3235,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -3236,7 +3286,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1l = 'dot-list';
+const rootClassName$1k = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -3244,7 +3294,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1l} {
+      &.${rootClassName$1k} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -3338,13 +3388,13 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1k = 'dot-progress';
+const rootClassName$1j = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme,
   $aiProgressGradientId
 }) => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1j} {
       line-height: 0;
 
       .dot-progress-with-ai-wrapper {
@@ -3444,7 +3494,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   const calculatedSize = ai ? AI_PROGRESS_SIZE : size;
   const calculatedThickness = ai ? AI_PROGRESS_THICKNESS : thickness;
   useEffect(() => {
@@ -3533,13 +3583,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$1j = 'dot-popper';
+const rootClassName$1i = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1i} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3598,7 +3648,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$1j}, &.${rootClassName$1j} > .dot-popper-paper {
+    &.${rootClassName$1i}, &.${rootClassName$1i} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3628,12 +3678,12 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$1i = 'dot-menu';
+const rootClassName$1h = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1i} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3643,7 +3693,7 @@ const StyledPopper = styled(Popper)`
 }) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}
       }
     }
-    &.${rootClassName$1i}, &.${rootClassName$1j} {
+    &.${rootClassName$1h}, &.${rootClassName$1i} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3723,14 +3773,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$1h = 'dot-ul';
+const rootClassName$1g = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1g} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3832,7 +3882,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3944,7 +3994,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -4032,12 +4082,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$1g = 'dot-drawer';
+const rootClassName$1f = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1g} .MuiBackdrop-root {
+    &.${rootClassName$1f} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -4056,12 +4106,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$1f = 'dot-drawer-header';
+const rootClassName$1e = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1e} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -4072,13 +4122,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$1e = 'dot-icon-btn';
+const rootClassName$1d = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1d} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -4164,7 +4214,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$1e,
+  'data-pendoid': dataPendoId = rootClassName$1d,
   'data-testid': dataTestId,
   disableInteractive,
   disableRipple = false,
@@ -4178,7 +4228,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     "data-testid": "icon-button-tooltip",
@@ -4215,7 +4265,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -4232,10 +4282,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$1d = 'dot-drawer-body';
+const rootClassName$1c = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1c} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -4256,7 +4306,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4271,12 +4321,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$1c = 'dot-drawer-footer';
+const rootClassName$1b = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1c} {
+    &.${rootClassName$1b} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -4289,7 +4339,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4305,7 +4355,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -4328,7 +4378,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, 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';
@@ -4803,7 +4853,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef(undefined);
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4903,12 +4953,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$1b = 'dot-copy-button';
+const rootClassName$1a = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1b} .copied-to-clipboard {
+    &.${rootClassName$1a} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4934,7 +4984,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$1b,
+  'data-pendoid': dataPendoId = rootClassName$1a,
   'data-testid': dataTestId = 'dot-copy-button',
   disableInteractive,
   disabled = false,
@@ -4983,7 +5033,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$1b,
+    className: rootClassName$1a,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -5282,10 +5332,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$1a = 'dot-search-input';
+const rootClassName$19 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$19} {
     }
   `}
 `;
@@ -5302,7 +5352,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -5558,12 +5608,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$19 = 'dot-app-switcher';
+const rootClassName$18 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$18} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5673,7 +5723,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -6051,12 +6101,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$18 = 'dot-sidebar';
+const rootClassName$17 = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$17} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -6350,10 +6400,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$17 = 'dot-truncate-with-tooltip';
+const rootClassName$16 = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$16} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -6384,7 +6434,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -6498,7 +6548,7 @@ const DotSidebar = ({
     keys: collapseKeys
   }, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$18, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6574,12 +6624,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$16 = 'dot-badge';
+const rootClassName$15 = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$15} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -6614,7 +6664,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -6636,7 +6686,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$15 = 'dot-app-toolbar';
+const rootClassName$14 = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6676,7 +6726,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$14} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6805,7 +6855,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6957,12 +7007,12 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$14 = 'dot-chip';
+const rootClassName$13 = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$13} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -7068,7 +7118,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$14,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -7082,7 +7132,7 @@ const DotChip = ({
   tooltipProps
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className, errorClass);
   const isTruncated = charactersLimit > 0 && children.length > charactersLimit;
   const getChipLabelWithTooltip = label => jsx(DotTooltip, Object.assign({}, tooltipProps, {
     hoverVisibility: "always",
@@ -7118,7 +7168,7 @@ const DotChip = ({
   });
 };
 
-const rootClassName$13 = 'dot-autocomplete';
+const rootClassName$12 = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const inputAiClassName = 'dot-input-ai';
@@ -7126,7 +7176,7 @@ const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$12} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -7225,7 +7275,7 @@ const isEmptyValue = value => {
     return !value;
   }
 };
-const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$13, size === 'medium' && inputMediumClassName, className);
+const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$12, 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;
@@ -7248,7 +7298,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -7318,7 +7368,7 @@ const DotAutoComplete = ({
   const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), isAiEnabled ? inputAiClassName : '');
   const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
   const inputRootClasses = getInputRootClassNames(dense);
-  const popperClasses = useStylesWithRootClass(rootClassName$1j, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1i, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -7668,21 +7718,8 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$12 = 'dot-avatar-group';
-const StyledAvatarGroup = styled(AvatarGroup)`
-  ${() => css`
-      &.${rootClassName$12} {
-        justify-content: flex-end;
-
-        .MuiAvatar-root {
-          border: none;
-        }
-      }
-    }
-  `}
-`;
-
 const DotAvatarGroup = ({
+  additionalAvatarsLabel = 'Additional Users',
   ariaLabel,
   avatars,
   className,
@@ -7690,7 +7727,53 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  var _a;
+  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
+  const firstAvatarSize = ((_a = avatars[0]) === null || _a === void 0 ? void 0 : _a.size) || 'medium';
+  // Map avatar size to pixel value
+  const sizeMap = {
+    xs: 16,
+    small: 24,
+    medium: 40,
+    large: 56
+  };
+  const textSizeMap = {
+    xs: 'caption',
+    small: 'caption',
+    medium: 'h3',
+    large: 'h1'
+  };
+  const surplusSizePixels = sizeMap[firstAvatarSize] || 40;
+  const extraAvatarTooltip = jsxs("div", {
+    children: [jsxs("div", {
+      children: [additionalAvatarsLabel, ":"]
+    }), avatars.slice(max - 1).map((avatar, index) => jsx("div", {
+      children: avatar.alt || avatar.text || ''
+    }, index))]
+  });
+  const getAvatarClassName = index => {
+    return `${avatars[index].className}`;
+  };
+  const getAvatarTooltipClassName = index => {
+    if (avatars[index] && avatars[index].tooltip) {
+      return `${avatars[index].className} ${index !== 0 && index !== max - 1 ? 'avatar-with-tooltip' : ''}`;
+    }
+    return '';
+  };
+  const renderSurplus = surplus => {
+    var _a;
+    return jsx(DotTooltip, {
+      title: extraAvatarTooltip,
+      childrenDisplayStyle: "inline-flex",
+      children: jsx(StyledExtraAvatarSpan, {
+        children: jsx(StyledDotTypography, {
+          className: firstAvatarSize,
+          variant: (_a = textSizeMap[firstAvatarSize]) !== null && _a !== void 0 ? _a : 'caption',
+          children: `+${surplus}`
+        })
+      })
+    });
+  };
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7699,7 +7782,19 @@ const DotAvatarGroup = ({
     "data-testid": dataTestId,
     max: max,
     spacing: spacing,
-    children: avatars.map((avatar, index) => createElement(DotAvatar, Object.assign({}, avatar, {
+    slotProps: {
+      additionalAvatar: {
+        sx: {
+          width: surplusSizePixels,
+          height: surplusSizePixels
+        }
+      }
+    },
+    renderSurplus: renderSurplus,
+    children: avatars.map((avatar, index) => createElement(DotAvatar, Object.assign({
+      tooltipClassname: getAvatarTooltipClassName(index),
+      className: getAvatarClassName(index)
+    }, avatar, {
       key: index
     })))
   });
@@ -19211,7 +19306,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "5.12.0",
+  "version": "5.12.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/avatar/Avatar.d.ts

@@ -33,9 +33,11 @@ export interface AvatarProps extends CommonProps {
     text?: string;
     /** Tooltip for avatar */
     tooltip?: string;
+    /** Classname for the tooltip */
+    tooltipClassname?: string;
     /** The type of the avatar */
     type?: AvatarType;
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ ai, alt, ariaLabel, ariaRole, className, component, disableInteractive, color, "data-testid": dataTestId, iconId, imageSrc, onClick, number, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAvatar: ({ ai, alt, ariaLabel, ariaRole, className, component, disableInteractive, color, "data-testid": dataTestId, iconId, imageSrc, onClick, number, size, tabIndex, text, type, tooltip, tooltipClassname, variant, style, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/avatar-group/AvatarGroup.d.ts

@@ -2,6 +2,8 @@ import { CommonProps } from '../CommonProps';
 import { AvatarProps } from '../avatar/Avatar';
 export type AvatarGroupSpacing = 'medium' | 'small' | number;
 export interface AvatarGroupProps extends CommonProps {
+    /** Label for the additional avatars displayed when the max is exceeded */
+    additionalAvatarsLabel?: string;
     /** Array of avatars displayed inside the group */
     avatars: Array<AvatarProps>;
     /** Max avatars to show before +x */
@@ -9,4 +11,4 @@ export interface AvatarGroupProps extends CommonProps {
     /** Spacing between avatars */
     spacing?: AvatarGroupSpacing;
 }
-export declare const DotAvatarGroup: ({ ariaLabel, avatars, className, "data-testid": dataTestId, max, spacing, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAvatarGroup: ({ additionalAvatarsLabel, ariaLabel, avatars, className, "data-testid": dataTestId, max, spacing, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/avatar-group/AvatarGroup.styles.d.ts

@@ -1,3 +1,6 @@
 import { AvatarGroup } from '@mui/material';
 export declare const rootClassName = "dot-avatar-group";
 export declare const StyledAvatarGroup: import("styled-components").StyledComponent<typeof AvatarGroup, any, {}, never>;
+export declare const StyledDotTooltip: import("styled-components").StyledComponent<({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, disableInteractive, followCursor, enterDelay, enterNextDelay, hoverVisibility, leaveDelay, onClose, open, placement, popperClassName, popperOptions, slotProps, title, childrenDisplayStyle, }: import("../tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledDotTypography: import("styled-components").StyledComponent<({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledExtraAvatarSpan: import("styled-components").StyledComponent<"span", any, {}, never>;