@digital-ai/dot-components 4.2.0 → 4.3.1

package/index.esm.js

@@ -175,7 +175,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1k = 'dot-text-field';
+const rootClassName$1l = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
@@ -228,7 +228,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1l} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -290,7 +290,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1k} {
+    &.${rootSelectClassName}, &.${rootClassName$1l} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -381,12 +381,12 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1j = 'dot-icon';
+const rootClassName$1k = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1k} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -427,7 +427,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -488,7 +488,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$1i = 'dot-accordion';
+const rootClassName$1j = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -499,7 +499,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1i} .${summaryClassName} {
+    &.${rootClassName$1j} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -544,7 +544,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1i,
+  'data-pendoid': dataPendoId = rootClassName$1j,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -555,7 +555,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -606,15 +606,15 @@ const DotAccordion = ({
   });
 };
 
-const rootClassName$1h = 'dot-action-toolbar';
+const rootClassName$1i = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1i} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1k} .MuiInputBase-root {
+      .${rootClassName$1l} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -628,7 +628,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1698,12 +1698,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$1g = 'dot-alert-banner';
+const rootClassName$1h = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1h} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1738,7 +1738,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1h,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1746,7 +1746,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2424,7 +2424,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1f = 'dot-avatar';
+const rootClassName$1g = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2434,7 +2434,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2546,7 +2546,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2585,12 +2585,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1e = 'dot-button';
+const rootClassName$1f = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2674,7 +2674,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1e,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2690,7 +2690,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
   let color;
   let variant;
   switch (type) {
@@ -2714,7 +2714,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
-    "data-testid": `${dataTestId || rootClassName$1e}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1f}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2723,7 +2723,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1e,
+      "data-testid": dataTestId || rootClassName$1f,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2742,10 +2742,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1d = 'dot-link';
+const rootClassName$1e = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2761,7 +2761,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1d,
+  'data-pendoid': dataPendoId = rootClassName$1e,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2774,7 +2774,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -2825,7 +2825,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1c = 'dot-list';
+const rootClassName$1d = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2833,7 +2833,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1c} {
+      &.${rootClassName$1d} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2926,12 +2926,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1b = 'dot-progress';
+const rootClassName$1c = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1c} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -2982,7 +2982,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3048,13 +3048,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$1a = 'dot-popper';
+const rootClassName$1b = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1b} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3113,7 +3113,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$1a}, &.${rootClassName$1a} > .dot-popper-paper {
+    &.${rootClassName$1b}, &.${rootClassName$1b} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3143,12 +3143,12 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$19 = 'dot-menu';
+const rootClassName$1a = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1b} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3158,7 +3158,7 @@ const StyledPopper = styled(Popper)`
 }) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}      
       }
     }
-    &.${rootClassName$19}, &.${rootClassName$1a} {
+    &.${rootClassName$1a}, &.${rootClassName$1b} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3238,14 +3238,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$18 = 'dot-ul';
+const rootClassName$19 = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3341,7 +3341,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3452,7 +3452,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3540,12 +3540,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$17 = 'dot-drawer';
+const rootClassName$18 = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} .MuiBackdrop-root {
+    &.${rootClassName$18} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3564,12 +3564,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$16 = 'dot-drawer-header';
+const rootClassName$17 = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3580,13 +3580,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$15 = 'dot-icon-btn';
+const rootClassName$16 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3645,7 +3645,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$15,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3658,7 +3658,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$15, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3693,7 +3693,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3710,10 +3710,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$14 = 'dot-drawer-body';
+const rootClassName$15 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3734,7 +3734,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3749,12 +3749,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$13 = 'dot-drawer-footer';
+const rootClassName$14 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3767,7 +3767,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3783,7 +3783,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$17,
+  'data-pendoid': dataPendoId = rootClassName$18,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3806,7 +3806,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, 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';
@@ -4264,7 +4264,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4362,12 +4362,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$12 = 'dot-copy-button';
+const rootClassName$13 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} .copied-to-clipboard {
+    &.${rootClassName$13} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4393,7 +4393,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$12,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4441,7 +4441,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$12,
+    className: rootClassName$13,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4545,7 +4545,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1k,
+  'data-pendoid': dataPendoId = rootClassName$1l,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4593,7 +4593,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1k, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1l, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4735,10 +4735,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$11 = 'dot-search-input';
+const rootClassName$12 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
     }
   `}
 `;
@@ -4755,7 +4755,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -5011,12 +5011,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$10 = 'dot-app-switcher';
+const rootClassName$11 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5126,7 +5126,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5504,12 +5504,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$$ = 'dot-sidebar';
+const rootClassName$10 = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5803,10 +5803,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$_ = 'dot-truncate-with-tooltip';
+const rootClassName$$ = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5837,7 +5837,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5949,7 +5949,7 @@ const DotSidebar = ({
   };
   useKeyPress(collapsable && collapseKey, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$$, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6018,12 +6018,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$Z = 'dot-badge';
+const rootClassName$_ = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -6058,7 +6058,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -6080,7 +6080,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$Y = 'dot-app-toolbar';
+const rootClassName$Z = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6120,7 +6120,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6242,7 +6242,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6372,14 +6372,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$X = 'dot-autocomplete';
+const rootClassName$Y = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6416,12 +6416,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$W = 'dot-chip';
+const rootClassName$X = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6527,7 +6527,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$W,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6540,7 +6540,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6640,7 +6640,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6696,10 +6696,10 @@ const DotAutoComplete = ({
   const popperOpen = !readOnly && (open || isOpened);
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(rootClassName$X, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1k, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1l, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
-  const popperClasses = useStylesWithRootClass(rootClassName$1a, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1b, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -6982,10 +6982,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$V = 'dot-avatar-group';
+const rootClassName$W = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$V} {
+      &.${rootClassName$W} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -7004,7 +7004,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7019,6 +7019,89 @@ const DotAvatarGroup = ({
   });
 };
 
+const rootClassName$V = 'dot-avatar-with-details';
+const StyledAvatarWithDetails = styled.div`
+  ${({
+  theme,
+  $maxSubtitleLines,
+  $maxTitleLines
+}) => css`
+    &.${rootClassName$V} {
+      gap: ${theme.spacing(2)};
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .dot-avatar-with-details-title-and-subtitle {
+        overflow-x: hidden;
+        width: 100%;
+
+        .dot-avatar-with-details-title,
+        .dot-avatar-with-details-subtitle {
+          overflow-wrap: break-word;
+
+          &.max-lines-clamp {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            white-space: normal;
+            overflow: hidden;
+          }
+        }
+        .dot-avatar-with-details-title.max-lines-clamp {
+          -webkit-line-clamp: ${$maxTitleLines};
+        }
+        .dot-avatar-with-details-subtitle.max-lines-clamp {
+          -webkit-line-clamp: ${$maxSubtitleLines};
+        }
+      }
+    }
+  `}
+`;
+
+const DotAvatarWithDetails = ({
+  ariaLabel,
+  avatar,
+  className,
+  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-testid': dataTestId,
+  subtitle,
+  title
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const titleClasses = useStylesWithRootClass('dot-avatar-with-details-title', title.maxLines ? 'max-lines-clamp' : '');
+  const subtitleClasses = useStylesWithRootClass('dot-avatar-with-details-subtitle', (subtitle === null || subtitle === void 0 ? void 0 : subtitle.maxLines) ? 'max-lines-clamp' : '');
+  return jsxs(StyledAvatarWithDetails, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    "$maxSubtitleLines": subtitle === null || subtitle === void 0 ? void 0 : subtitle.maxLines,
+    "$maxTitleLines": title.maxLines,
+    children: [jsx(DotAvatar, Object.assign({}, avatar)), jsxs("div", {
+      className: "dot-avatar-with-details-title-and-subtitle",
+      children: [jsx(DotTooltip, {
+        hoverVisibility: "overflow",
+        title: title.text,
+        children: jsx(DotTypography, {
+          className: titleClasses,
+          "data-testid": "avatar-title",
+          variant: title.typographyVariant || 'subtitle1',
+          children: title.text
+        })
+      }), (subtitle === null || subtitle === void 0 ? void 0 : subtitle.text) && jsx(DotTooltip, {
+        hoverVisibility: "overflow",
+        title: subtitle.text,
+        children: jsx(DotTypography, {
+          className: subtitleClasses,
+          "data-testid": "avatar-subtitle",
+          variant: subtitle.typographyVariant || 'body2',
+          children: subtitle.text
+        })
+      })]
+    })]
+  });
+};
+
 const rootClassName$U = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
@@ -9643,7 +9726,7 @@ const dashboard3 = {
   author_id: 'id3a',
   target_apps: ['AGILITY'],
   external_id: '3',
-  name: 'dashboard3',
+  name: 'dummy dashboard 3',
   description: '',
   dashboard_url: 'https://test.com',
   server_url: 'https://test.com',
@@ -9668,7 +9751,7 @@ const dashboard4 = {
   author_id: 'id4a',
   target_apps: ['DEPLOY'],
   external_id: '4',
-  name: 'dashboard4',
+  name: 'dummy dashboard',
   description: '',
   dashboard_url: 'https://test.com',
   server_url: 'https://test.com',
@@ -9688,7 +9771,7 @@ const dashboard4 = {
   favorite: false,
   updated_dt: '2023-11-21T04:42:07.951000+00:00'
 };
-({
+const dashboard5 = {
   author_fullname: 'Dashboard5 Author',
   author_id: 'id5a',
   target_apps: ['CHANGERISKPREDICTION'],
@@ -9712,9 +9795,9 @@ const dashboard4 = {
   filter_configuration: [],
   favorite: false,
   updated_dt: '2023-11-21T04:42:07.951000+00:00'
-});
+};
 // Dashboard with in-progress edits
-({
+const dashboard6 = {
   author_fullname: 'Dashboard6 Author',
   author_id: 'id6a',
   target_apps: ['AGILITY'],
@@ -9742,7 +9825,8 @@ const dashboard4 = {
   updated_dt: '2023-11-22T06:42:07.952000+00:00',
   is_being_modified: true,
   modified_author_id: 'id123'
-});
+};
+const dummyDashboards = [dashboard1, dashboard2, dashboard3, dashboard4, dashboard5, dashboard6];
 const getCategoriesMock = {
   categories: {
     AGILITY: ['Scrum Master', 'DevOps Manager', 'Release Train Engineer', 'Agility Analytics'],
@@ -9925,7 +10009,8 @@ const DotMetadataApiProvider = ({
     }) => {
       if (OpenAPI.BASE === MOCK_API_URL) {
         setDashboardsError(null);
-        return Promise.resolve([]);
+        const results = dummyDashboards.filter(dashboard => (name === null || name === void 0 ? void 0 : name.toLowerCase()) === dashboard.name.toLowerCase());
+        return Promise.resolve(results);
       }
       setAccountIdHeader(accountId);
       setDashboardSearchLoading(true);
@@ -10150,7 +10235,7 @@ const StyledSnackbar = styled(Snackbar)`
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1g} {
+      .${rootClassName$1h} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -11059,9 +11144,10 @@ function DotDashboardDialog({
       validateName(newName);
     }
   }, [validateName]);
-  const validateRequiredFields = useCallback(() => {
-    return !!formValues.name && !nameError;
-  }, [formValues.name, nameError]);
+  const isDescriptionError = description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH;
+  const validateFields = useCallback(() => {
+    return !!formValues.name && !nameError && !isDescriptionError;
+  }, [formValues.name, nameError, isDescriptionError]);
   return jsxs(StyledDashboardDialog, {
     cancelButtonProps: {
       'data-testid': 'cancel-create-dashboard-button'
@@ -11101,8 +11187,8 @@ function DotDashboardDialog({
       value: name
     }), jsx(DotInputText, {
       "data-testid": "dashboard-dialog-description-input",
-      error: description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH,
-      helperText: description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH && `Description must be ${DASHBOARD_DESCRIPTION_MAX_LENGTH} characters or less`,
+      error: isDescriptionError,
+      helperText: isDescriptionError && `Description must be ${DASHBOARD_DESCRIPTION_MAX_LENGTH} characters or less`,
       id: "description",
       label: "Description",
       multiline: true,
@@ -11153,7 +11239,7 @@ function DotDashboardDialog({
           children: "Cancel"
         }), jsx(DotButton, {
           "data-testid": "save-edit-exit-dashboard-button",
-          disabled: dashboardSearchLoading || isLoadingSubmit || !isDirty || !validateRequiredFields(),
+          disabled: dashboardSearchLoading || isLoadingSubmit || !isDirty || !validateFields(),
           onClick: handleSubmitEdit,
           type: "primary",
           children: "Save"
@@ -11764,6 +11850,9 @@ const StyledDotMenu = styled(DotMenu)`
       .dot-ul .dot-li {
         padding: 0;
 
+        .disabled-menu-item {
+          color: ${theme.palette.layer['n200']};
+        }
         .dot-link {
           padding: ${theme.spacing(0.5, 2)};
 
@@ -11782,7 +11871,7 @@ const StyledDotMenu = styled(DotMenu)`
   `}
 `;
 
-const disabledFieldsMessage = 'Dashboard name and description cannot be modified while the dashboard editor is active. Please save your changes and close the editor, if you need to make a name or description change.';
+const disabledPropsMessage = 'Dashboard properties cannot be modified while the dashboard editor is active. If you need to make property changes, please close the editor.';
 const inProgressEditMessage = 'This is a published dashboard; changes will not be visible to other users until you publish the updated dashboard.';
 function DotDashboardOptionsMenu({
   dashboard,
@@ -11820,6 +11909,7 @@ function DotDashboardOptionsMenu({
   }, [dashboard, onViewMode]);
   const handleEditPropertiesClick = useCallback(() => {
     var _a;
+    if (isEdit) return;
     handleMenuClose();
     setIsEditPropertiesDialogOpen(true);
     if (((_a = dashboard === null || dashboard === void 0 ? void 0 : dashboard.target_apps) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -11832,7 +11922,7 @@ function DotDashboardOptionsMenu({
     } else {
       setCategoryOptions([]);
     }
-  }, [dashboard]);
+  }, [dashboard, isEdit]);
   const handleSubmitEditProperties = useCallback((data, isDone) => __awaiter(this, void 0, void 0, function* () {
     return updateDashboard(dashboard.id, {
       name: data.name,
@@ -11864,15 +11954,26 @@ function DotDashboardOptionsMenu({
     });
   }
   if (onUpdatedProperties && !dashboard.is_ootb_dashboard) {
-    menuItems.push({
-      children: jsx(DotButton, {
-        ariaLabel: "Edit dashboard properties",
-        type: "text",
-        startIcon: jsx(DotIcon, {
-          iconId: "edit"
-        }),
-        children: "Edit properties"
+    let menuItem = jsx(DotButton, {
+      ariaLabel: "Edit dashboard properties",
+      className: isEdit ? 'disabled-menu-item' : '',
+      disabled: isEdit,
+      type: "text",
+      startIcon: jsx(DotIcon, {
+        className: isEdit ? 'disabled-menu-item' : '',
+        iconId: "edit"
       }),
+      children: "Edit properties"
+    });
+    if (isEdit) {
+      menuItem = jsx(DotTooltip, {
+        title: disabledPropsMessage,
+        placement: "left-start",
+        children: menuItem
+      });
+    }
+    menuItems.push({
+      children: menuItem,
       key: 'edit-props'
     });
   }
@@ -12023,9 +12124,6 @@ function DotDashboardOptionsMenu({
   if (dashboard.is_being_modified || dashboard.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED) {
     messages.push(inProgressEditMessage);
   }
-  if (isEdit) {
-    messages.push(disabledFieldsMessage);
-  }
   return menuItems.length > 0 ? jsxs(Fragment, {
     children: [jsx(DotDashboardDialog, {
       title: "Edit dashboard properties",
@@ -12860,7 +12958,7 @@ const StyledFormContainer = styled.div`
 
       .${rootClassName$N},
         .${rootClassName$P},
-        .${rootClassName$1k},
+        .${rootClassName$1l},
         .${rootSelectClassName},
         .${rootClassName$A},
         .${rootClassName$z} {
@@ -12868,7 +12966,7 @@ const StyledFormContainer = styled.div`
       }
 
       .${wrapperClassName$2} {
-        + .${rootClassName$1k},
+        + .${rootClassName$1l},
         .${wrapperClassName$2}
         + .${rootSelectClassName},
         .${wrapperClassName$2}
@@ -17445,7 +17543,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -19088,4 +19186,4 @@ const BoardColumnSummary = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };

package/package.json

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

package/src/lib/components/avatar-with-details/AvatarWithDetails.d.ts

@@ -0,0 +1,20 @@
+import { CommonProps } from '../CommonProps';
+import { AvatarProps } from '../avatar/Avatar';
+import { TypographyVariant } from '../typography/Typography';
+export interface AvatarTitleProps {
+    /** If defined, determines the maximum number of lines (if text exceeds the lines, it is truncated and has a tooltip). */
+    maxLines?: number;
+    /** The text being shown. */
+    text: string;
+    /** Determines the typography variant. */
+    typographyVariant?: TypographyVariant;
+}
+export interface AvatarWithDetailsProps extends CommonProps {
+    /** The props for avatar component. */
+    avatar: AvatarProps;
+    /** The props for subtitle text component. If defined, it has typography variant `body2` by default. */
+    subtitle?: AvatarTitleProps;
+    /** The props for title text component. By default, it has typography variant `subtitle1`. */
+    title: AvatarTitleProps;
+}
+export declare const DotAvatarWithDetails: ({ ariaLabel, avatar, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, subtitle, title, }: AvatarWithDetailsProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/avatar-with-details/AvatarWithDetails.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const rootClassName = "dot-avatar-with-details";
+interface StyledAvatarWithDetailsProps {
+    $maxSubtitleLines?: number;
+    $maxTitleLines?: number;
+}
+export declare const StyledAvatarWithDetails: import("styled-components").StyledComponent<"div", any, StyledAvatarWithDetailsProps, never>;
+export {};

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

@@ -3,6 +3,7 @@ export { ApiError } from './core-api/openapi/core/ApiError';
 export type { AppToolbarProps } from './app-toolbar/AppToolbar';
 export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, AutocompleteRenderGroupParams, AutocompleteRenderOptionState, FilterOptionsState, } from './auto-complete';
 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';
@@ -54,6 +55,7 @@ export { DotAppToolbar } from './app-toolbar/AppToolbar';
 export { DotAutoComplete, parseAutoCompleteValue } from './auto-complete';
 export { DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
+export { DotAvatarWithDetails } from './avatar-with-details/AvatarWithDetails';
 export { DotBadge } from './badge';
 export { DotBreadcrumbs } from './breadcrumbs/Breadcrumbs';
 export { DotButton, DotCopyButton, DotIconButton } from './button';