@digital-ai/dot-components 5.12.0 → 6.0.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { useEffect, useState, useRef, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, 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';
@@ -162,7 +162,6 @@ const DotTypography = ({
   children,
   component,
   hasShimmer,
-  noMarginBottom,
   noWrap,
   variant
 }) => {
@@ -171,9 +170,6 @@ const DotTypography = ({
     if (ariaRole === 'heading' && !ariaLevel) {
       console.warn('please include ariaLevel when using ariaRole="heading"');
     }
-    if (noMarginBottom) {
-      console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
-    }
   }, []);
   return jsx(StyledTypography, {
     "aria-label": ariaLabel,
@@ -185,9 +181,6 @@ const DotTypography = ({
     "data-testid": dataTestId,
     noWrap: noWrap,
     role: ariaRole,
-    style: {
-      marginBottom: noMarginBottom ? 0 : undefined
-    },
     variant: variant,
     children: children
   });
@@ -2802,6 +2795,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 +2910,7 @@ const DotAvatar = ({
   text = alt,
   type = 'image',
   tooltip,
+  tooltipClassname,
   variant = 'circular',
   style
 }) => {
@@ -2879,9 +2921,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 +2957,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 +3115,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 +3133,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 +3164,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 +3176,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 +3196,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 +3215,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1m,
+  'data-pendoid': dataPendoId = rootClassName$1l,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -3185,16 +3228,12 @@ 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) {
       console.warn(`a11y: Consider adding an 'ariaLabel' to 'DotLink' when used without text`);
     }
-    // Include a console warning if the color value is set to initial
-    if (color === 'initial') {
-      console.warn(`deprecated: initial color value is deprecated and inherit will be used instead`);
-    }
   }, []);
   const handleKeyPress = event => {
     if (onClick && event.key === 'Enter') {
@@ -3209,12 +3248,12 @@ const DotLink = ({
       classes: {
         root: rootClasses
       },
-      color: color === 'initial' ? 'inherit' : color,
+      color: color,
       "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       href: href,
       onClick: onClick,
-      onKeyPress: handleKeyPress,
+      onKeyDown: handleKeyPress,
       onMouseEnter: onMouseEnter,
       onPointerDown: onPointerDown,
       rel: rel,
@@ -3236,7 +3275,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 +3283,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1l} {
+      &.${rootClassName$1k} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -3338,13 +3377,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 +3483,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 +3572,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 +3637,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 +3667,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 +3682,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 +3762,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 +3871,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 +3983,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 +4071,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 +4095,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 +4111,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 +4203,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 +4217,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 +4254,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 +4271,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 +4295,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 +4310,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 +4328,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 +4344,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -4328,7 +4367,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 +4842,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 +4942,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 {
@@ -4933,8 +4972,7 @@ const DotCopyButton = ({
   className,
   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,
@@ -4950,10 +4988,6 @@ const DotCopyButton = ({
 }) => {
   const [timedShowCopiedIcon, setTimedShowCopiedIcon] = useState(false);
   const [timedDisabled, setTimedDisabled] = useState(false);
-  // To keep backward compatibility if tooltip is not set, use copyTooltip
-  if (!tooltip) {
-    tooltip = copyTooltip;
-  }
   const copyToClipboard = useCallback(() => {
     // The check for navigator.clipboard.writeText is because this function is
     // only supported in secure contexts (https). This will always be the case in
@@ -4983,7 +5017,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 +5316,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 +5336,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 => {
@@ -5441,7 +5475,7 @@ const createMenuItem = (url, title, subtitle, onClick) => jsxs("div", {
       })]
     })
   }), jsx(DotCopyButton, {
-    copyTooltip: "Copy application URL",
+    tooltip: "Copy application URL",
     value: url
   })]
 }, `app-menu-item-${title}`);
@@ -5558,12 +5592,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 +5707,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 +6085,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 +6384,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 +6418,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 +6532,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 +6608,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 +6648,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 +6670,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$15 = 'dot-app-toolbar';
+const rootClassName$14 = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6676,7 +6710,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 +6839,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 +6991,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 +7102,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 +7116,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 +7152,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 +7160,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 +7259,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 +7282,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -7318,7 +7352,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 +7702,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 +7711,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 +7766,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
     })))
   });
@@ -8211,7 +8290,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
           margin-left: 0;
         }
 
-        .MuiBadge-badge {
+        .MuiBadge-badge:not(.MuiBadge-invisible) {
           position: static;
           transform: none;
         }
@@ -8314,9 +8393,23 @@ const DotButtonToggle = ({
   value
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const checkIfValidBadge = badge => {
+    const {
+      variant,
+      badgeContent
+    } = badge;
+    return variant === 'standard' && !isNaN(badgeContent) || variant === 'dot';
+  };
+  const renderBadge = (badge, textTypography) => {
+    return jsx(DotBadge, Object.assign({}, badge, {
+      className: useStylesWithRootClass('toggle-button-badge', badge.className),
+      "data-testid": dataTestId && `${dataTestId}-badge`,
+      children: textTypography
+    }));
+  };
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
-    badgeContent: optionBadgeContent,
+    badge: optionBadge,
     className: optionClassName,
     disabled: optionDisabled,
     iconId: optionIconId,
@@ -8344,23 +8437,21 @@ const DotButtonToggle = ({
           children: optionText
         })]
       });
-      return optionBadgeContent && !isNaN(optionBadgeContent) && optionBadgeContent > 0 && optionText ? jsx(DotBadge, {
-        "data-testid": dataTestId && `${dataTestId}-badge`,
-        className: "toggle-button-badge",
-        badgeContent: optionBadgeContent,
-        variant: "standard",
-        children: optionTextTypography
-      }) : optionTextTypography;
+      return optionBadge && checkIfValidBadge(optionBadge) ? renderBadge(optionBadge, optionTextTypography) : optionTextTypography;
     };
     const children = getChildren();
-    return optionTooltip ? jsx(TooltipToggleButton, Object.assign({}, commonProps, {
+    const {
+        key: commonPropsKey
+      } = commonProps,
+      commonPropsWithoutKey = __rest(commonProps, ["key"]);
+    return optionTooltip ? createElement(TooltipToggleButton, Object.assign({}, commonPropsWithoutKey, {
+      key: commonPropsKey,
       CustomTooltipProps: {
         title: optionTooltip,
         disableInteractive: optionDisableInteractive
       },
-      value: optionValue,
-      children: children
-    })) : jsx(ToggleButton, Object.assign({}, commonProps, {
+      value: optionValue
+    }), children) : jsx(ToggleButton, Object.assign({}, commonProps, {
       role: "button",
       children: children
     }));
@@ -11468,7 +11559,6 @@ const DotSnackbar = ({
         children: jsxs("div", {
           children: [jsx(DotTypography, {
             variant: "subtitle2",
-            noMarginBottom: false,
             children: getSnackbarTitleFromSeverity(severity)
           }), isString$2(children) ? jsx(DotTypography, {
             ariaLabel: severity,
@@ -14772,7 +14862,6 @@ const DotSwitch = ({
   ariaLabel,
   checked,
   className,
-  color,
   'data-pendoid': dataPendoId = rootClassName$C,
   'data-testid': dataTestId,
   disabled = false,
@@ -14787,11 +14876,6 @@ const DotSwitch = ({
   const handleChange = event => {
     onChange && onChange(event);
   };
-  useEffect(() => {
-    if (color) {
-      console.warn('DEPRECATED: `color` prop is deprecated, please remove any usage of it in your application.');
-    }
-  }, []);
   // Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
   // https://github.com/mui/material-ui/pull/17870
   const switchControl = jsx(StyledSwitch, {
@@ -17417,16 +17501,13 @@ const DotBodyCell = ({
           onClick: () => onActionMenuTrigger(wrapperRef.current, value),
           size: "small"
         }) : value.map(item => {
-          if (item.onclick) {
-            console.warn('The onclick property is deprecated, please use onClick instead');
-          }
           return jsx(DotIconButton, {
             className: "dot-table-action-icon",
             "data-testid": item.dataTestId,
             disabled: item.disabled,
             iconId: item.iconId,
             iconSize: "small",
-            onClick: item.onClick || item.onclick,
+            onClick: item.onClick,
             size: "small",
             tooltip: item.tooltip
           }, `${cellKey}-icon-${CreateUUID()}`);
@@ -18658,7 +18739,6 @@ const StyledTabs = styled(Tabs)`
 const DotTabs = ({
   centered = false,
   className,
-  color,
   'data-pendoid': dataPendoId = rootClassName$l,
   'data-testid': dataTestId,
   initialValue = 0,
@@ -18669,11 +18749,6 @@ const DotTabs = ({
 }) => {
   const [value, setValue] = useState(initialValue);
   const rootClasses = useStylesWithRootClass(rootClassName$l, className);
-  useEffect(() => {
-    if (color) {
-      console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
-    }
-  }, []);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleChange = (_event, val) => {
     setValue(val);
@@ -19211,7 +19286,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": "6.0.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/analytics/dashboard-actions/DashboardPublishConfirm.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const dashboardCategoriesContainerClassName = "dashboard-categories-container";
-export declare const InlineMessage: 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 InlineMessage: import("styled-components").StyledComponent<({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledPublishConfirmDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, additionalLabelContent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disableCloseOnSelect, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;

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, 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>;

package/src/lib/components/button/CopyButton.d.ts

@@ -2,13 +2,11 @@ import { CommonIconButtonProps } from './IconButton';
 export interface CopyButtonProps extends CommonIconButtonProps {
     /** Tooltip shown briefly after the value has been copied. */
     copiedTooltip?: string;
-    /** DEPRECATED Use tooltip instead */
-    copyTooltip?: string;
     /** The icon to display on the button, defaults to 'duplicate' */
     iconId?: string;
-    /** By default a check icon will briefly display after the content is copied */
+    /** By default, a check icon will briefly display after the content is copied */
     showCopiedIcon?: boolean;
     /** The content which will be copied to the clipboard */
     value: string;
 }
-export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableInteractive, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableInteractive, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/button-toggle/index.d.ts

@@ -1,3 +1,3 @@
-export type { ButtonToggleOrientation, ButtonToggleOption, ButtonToggleSingleValue, ButtonToggleSize, ButtonToggleValue, } from './utils/models';
+export type { ButtonToggleBadge, ButtonToggleOrientation, ButtonToggleOption, ButtonToggleSingleValue, ButtonToggleSize, ButtonToggleValue, } from './utils/models';
 export type { ButtonToggleProps } from './ButtonToggle';
 export { DotButtonToggle } from './ButtonToggle';

package/src/lib/components/button-toggle/utils/models.d.ts

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../../CommonProps';
+import { BadgeProps } from '../../badge';
 export type ButtonToggleSingleValue = string | number | boolean;
 export type ButtonToggleSize = 'small' | 'medium' | 'large';
 export type ButtonToggleOrientation = 'horizontal' | 'vertical';
 export type ButtonToggleValue = ButtonToggleSingleValue | Array<ButtonToggleSingleValue>;
+export type ButtonToggleBadge = Omit<BadgeProps, 'children' | 'data-testid' | 'overlap'>;
 export interface ButtonToggleOption extends CommonProps {
     ariaLabel: string;
-    badgeContent?: number;
+    badge?: ButtonToggleBadge;
     disableInteractive?: boolean;
     disabled?: boolean;
     iconId?: string;

package/src/lib/components/index.d.ts

@@ -8,7 +8,7 @@ export type { AvatarProps } from './avatar/Avatar';
 export type { AvatarTitleProps, AvatarWithDetailsProps, } from './avatar-with-details/AvatarWithDetails';
 export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
 export type { ButtonProps, CopyButtonProps, IconButtonProps, IconButtonColor, IconButtonSize, } from './button';
-export type { ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSingleValue, ButtonToggleSize, } from './button-toggle';
+export type { ButtonToggleBadge, ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSingleValue, ButtonToggleSize, } from './button-toggle';
 export type { CheckboxProps } from './checkbox/Checkbox';
 export type { CheckboxGroupProps } from './checkbox/CheckboxGroup';
 export type { DialogButtonProps, SubmitButtonProps } from './dialog/Dialog';
@@ -26,7 +26,7 @@ export type { RailItem, RailItemsPosition } from './navigation-rail';
 export type { RadioButtonProps } from './radio/RadioButton';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export type { BackItemProps, SidebarProps } from './sidebar/Sidebar';
-export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './switch';
+export type { SwitchProps, SwitchSize, SwitchLabelPlacement } from './switch';
 export type { CollapsibleTableOptions } from './table/collapsible-table';
 export type { DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableActionProps, TableActionsProps, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
 export type { TabProps } from './tabs/Tabs';

package/src/lib/components/link/Link.d.ts

@@ -1,7 +1,7 @@
 import { KeyboardEvent, MouseEvent, PointerEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
-export type LinkColor = 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
+export type LinkColor = 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
 export type LinkUnderline = 'always' | 'hover' | 'none';
 export type LinkTarget = '_blank' | '_self';
 export interface LinkProps extends CommonProps {

package/src/lib/components/switch/Switch.d.ts

@@ -1,13 +1,10 @@
 import { ChangeEvent, Ref } from 'react';
 import { CommonProps } from '../CommonProps';
-export type SwitchColor = 'default' | 'primary' | 'secondary';
 export type SwitchSize = 'medium' | 'small';
 export type SwitchLabelPlacement = 'bottom' | 'end' | 'start' | 'top';
 export interface SwitchProps extends CommonProps {
     /** determines the default state of the switch */
     checked?: boolean;
-    /** DEPRECATED: this will be removed in an upcoming release */
-    color?: SwitchColor;
     /** if true makes the switch disabled */
     disabled?: boolean;
     /** id to identify the element */
@@ -23,4 +20,4 @@ export interface SwitchProps extends CommonProps {
     /** controls the size of the switch 'medium', 'small' */
     size?: SwitchSize;
 }
-export declare const DotSwitch: ({ ariaLabel, checked, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSwitch: ({ ariaLabel, checked, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/switch/index.d.ts

@@ -1,2 +1,2 @@
-export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './Switch';
+export type { SwitchProps, SwitchSize, SwitchLabelPlacement } from './Switch';
 export { DotSwitch } from './Switch';

package/src/lib/components/tabs/Tabs.d.ts

@@ -1,5 +1,4 @@
 import { CommonProps } from '../CommonProps';
-export type TabsColor = 'primary' | 'secondary';
 export type TabsScrollButtons = 'auto' | boolean;
 export type TabsVariant = 'fullWidth' | 'scrollable' | 'standard';
 export interface TabProps extends CommonProps {
@@ -15,8 +14,6 @@ export interface TabProps extends CommonProps {
 export interface TabsProps extends CommonProps {
     /** Center the tabs */
     centered?: boolean;
-    /** DEPRECATED: this will be removed in an upcoming release */
-    color?: TabsColor;
     /** The value of the initially selected tab */
     initialValue?: any;
     /** Tab change callback */
@@ -28,4 +25,4 @@ export interface TabsProps extends CommonProps {
     /** Determines additional display behavior of the tabs */
     variant?: TabsVariant;
 }
-export declare const DotTabs: ({ centered, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTabs: ({ centered, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/typography/Typography.d.ts

@@ -12,11 +12,9 @@ export interface TypographyProps extends CommonProps {
     component?: ElementType;
     /** If true, applies the shimmer styles. */
     hasShimmer?: boolean;
-    /** DEPRECATED: If true, the typography will not have a bottom margin set */
-    noMarginBottom?: boolean;
     /** If true, the text will wrap and not be truncated */
     noWrap?: boolean;
     /** Applies the theme typography styles. */
     variant?: TypographyVariant;
 }
-export declare const DotTypography: ({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noMarginBottom, noWrap, variant, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTypography: ({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noWrap, variant, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;