@digital-ai/dot-components 5.11.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';
@@ -30,6 +30,63 @@ function useStylesWithRootClass(name, className, ...args) {
   return [name, ...(className ? [className] : [])].concat(args).join(' ').trim();
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const checkIfOverflowPresentInElementTree = element => {
   if (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight) {
     return true;
@@ -1319,10 +1376,12 @@ const DotTooltip = ({
   open,
   placement = 'bottom',
   popperClassName,
+  popperOptions,
   slotProps,
   title,
   childrenDisplayStyle
 }) => {
+  var _a;
   const rootClasses = useStylesWithRootClass('dot-tooltip', className);
   const [hasTooltipOnHover, setHasTooltipOnHover] = useState(false);
   const childrenWrapperRef = useRef(undefined);
@@ -1347,6 +1406,16 @@ const DotTooltip = ({
   if (!title) {
     return children;
   }
+  // MUI v5 Tooltip reads popperOptions exclusively from PopperProps.popperOptions —
+  // it overrides any popperOptions in slotProps.popper at render time (see Tooltip.js:573).
+  // To ensure both the popperOptions prop and any consumer-provided slotProps.popper.popperOptions
+  // are forwarded to createPopper, we merge them here and pass via PopperProps.
+  const _b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.popper) !== null && _a !== void 0 ? _a : {},
+    {
+      popperOptions: slotPopperOptions
+    } = _b,
+    restPopperSlotProps = __rest(_b, ["popperOptions"]);
+  const resolvedPopperOptions = popperOptions || slotPopperOptions ? Object.assign(Object.assign({}, popperOptions), slotPopperOptions) : undefined;
   return jsx(Tooltip, {
     "aria-hidden": false,
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : isString$2(title) ? title.toString() : 'Information tooltip',
@@ -1362,10 +1431,14 @@ const DotTooltip = ({
     open: open,
     placement: placement,
     PopperProps: {
-      disablePortal,
-      className: popperClassName
+      popperOptions: resolvedPopperOptions
     },
-    slotProps: slotProps,
+    slotProps: Object.assign(Object.assign({}, slotProps), {
+      popper: Object.assign({
+        disablePortal,
+        className: popperClassName
+      }, restPopperSlotProps)
+    }),
     role: ariaRole,
     title: title,
     followCursor: followCursor,
@@ -2082,63 +2155,6 @@ const DotAnnotation = ({
   });
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const OpenAPI$1 = {
   BASE: '',
   TOKEN: undefined,
@@ -2786,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,
@@ -2853,6 +2917,7 @@ const DotAvatar = ({
   text = alt,
   type = 'image',
   tooltip,
+  tooltipClassname,
   variant = 'circular',
   style
 }) => {
@@ -2863,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,
@@ -2898,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)};
@@ -3056,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,
@@ -3074,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) {
@@ -3105,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,
@@ -3117,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,
@@ -3137,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 {
@@ -3156,7 +3222,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1m,
+  'data-pendoid': dataPendoId = rootClassName$1l,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -3169,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) {
@@ -3220,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';
@@ -3228,7 +3294,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1l} {
+      &.${rootClassName$1k} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -3322,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 {
@@ -3428,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(() => {
@@ -3517,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;
 
@@ -3582,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};
     }
   `}
@@ -3612,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;
 
@@ -3627,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};
       }
@@ -3707,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 {
@@ -3816,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) => {
@@ -3928,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
@@ -4016,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};
     }
 
@@ -4040,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;
@@ -4056,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;
             ` : ''}
@@ -4148,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,
@@ -4162,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",
@@ -4199,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,
@@ -4216,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;
@@ -4240,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,
@@ -4255,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)};
     }
   `}
@@ -4273,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,
@@ -4289,7 +4355,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -4312,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';
@@ -4787,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';
@@ -4887,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 {
@@ -4918,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,
@@ -4967,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,
@@ -5266,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} {
     }
   `}
 `;
@@ -5286,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 => {
@@ -5542,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;
@@ -5657,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();
@@ -6035,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;
@@ -6334,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;
@@ -6368,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,
@@ -6482,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,
@@ -6558,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;
 
@@ -6598,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: {
@@ -6620,7 +6686,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$15 = 'dot-app-toolbar';
+const rootClassName$14 = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6660,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};
@@ -6789,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(() => {
@@ -6941,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};
@@ -7052,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,
@@ -7066,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",
@@ -7102,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';
@@ -7110,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)};
@@ -7209,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;
@@ -7232,7 +7298,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -7302,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 => {
@@ -7652,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,
@@ -7674,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: {
@@ -7683,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
     })))
   });
@@ -15860,6 +15971,20 @@ const StyledNavigationRail = styled.div`
           }
         }
 
+        &.ai-rail {
+          &.selected,
+          &:focus-visible,
+          &:hover {
+            background-color: ${theme.palette.figma.aiPink.light} !important;
+          }
+          &.selected {
+            border-image: ${theme.palette.figma.gradient.active} 1;
+          }
+          .dot-icon {
+            color: transparent !important;
+          }
+        }
+
         .rail-item-text {
           word-break: break-word;
           padding: ${theme.spacing(0, 0.5)};
@@ -15869,7 +15994,7 @@ const StyledNavigationRail = styled.div`
   `}
 `;
 
-const MAX_ALLOWED_ITEMS = 7;
+const MAX_ALLOWED_ITEMS = 8;
 const DotNavigationRail = ({
   ariaLabel,
   className,
@@ -15891,8 +16016,9 @@ const DotNavigationRail = ({
     onChange && onChange(index);
   };
   const checkIfSelected = index => selectedItemIndex === index;
-  const renderIcon = (iconId, railIconBadge) => {
+  const renderIcon = (ai, iconId, railIconBadge) => {
     const icon = jsx(DotIcon, {
+      ai: ai,
       className: "rail-item-button-icon",
       iconId: iconId
     });
@@ -15904,18 +16030,20 @@ const DotNavigationRail = ({
   };
   const renderRailItems = () => {
     return railItems === null || railItems === void 0 ? void 0 : railItems.slice(0, MAX_ALLOWED_ITEMS).map(({
+      ai,
       ariaLabel: itemAriaLabel,
       iconBadge,
       iconId,
       title
     }, index) => jsxs(DotButton, {
       ariaLabel: itemAriaLabel,
-      className: useStylesWithRootClass('rail-item-button', checkIfSelected(index) && 'selected'),
+      className: useStylesWithRootClass('rail-item-button', ai ? 'ai-rail' : '', checkIfSelected(index) && 'selected'),
       "data-testid": `rail-item-${index}`,
       disableRipple: true,
       onClick: onItemSelect(index),
       type: "text",
-      children: [iconId && renderIcon(iconId, iconBadge), jsx(DotTypography, {
+      children: [iconId && renderIcon(ai, iconId, iconBadge), jsx(DotTypography, {
+        ai: ai,
         className: "rail-item-text",
         variant: "body2",
         children: title
@@ -19178,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.11.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>;

package/src/lib/components/navigation-rail/NavigationRail.d.ts

@@ -3,6 +3,8 @@ import { BadgeProps } from '../badge';
 export type RailItemsPosition = 'flex-start' | 'center' | 'flex-end';
 export type RailIconBadge = Omit<BadgeProps, 'children'>;
 export interface RailItem {
+    /** If true, applies AI color scheme on the elements */
+    ai?: boolean;
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
     /** Optional badge which will be displayed over an icon **/

package/src/lib/components/tooltip/Tooltip.d.ts

@@ -33,8 +33,10 @@ export interface TooltipProps extends CommonProps {
     open?: boolean;
     placement?: TooltipPlacement;
     popperClassName?: string;
+    /** Options forwarded to the underlying Popper.js instance (e.g. strategy, modifiers). */
+    popperOptions?: PopperProps['popperOptions'];
     /** The extra props for the slot components, like popper. It allows to override the existing props or add new ones. */
     slotProps?: SlotProps;
     title?: ReactNode | string | number;
 }
-export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, disableInteractive, followCursor, enterDelay, enterNextDelay, hoverVisibility, leaveDelay, onClose, open, placement, popperClassName, slotProps, title, childrenDisplayStyle, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, disableInteractive, followCursor, enterDelay, enterNextDelay, hoverVisibility, leaveDelay, onClose, open, placement, popperClassName, popperOptions, slotProps, title, childrenDisplayStyle, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;