@digital-ai/dot-components 3.12.0 → 3.13.1

package/index.esm.js

@@ -104,12 +104,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$1i = 'dot-icon';
+const rootClassName$1j = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1j} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -146,7 +146,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -207,7 +207,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$1h = 'dot-accordion';
+const rootClassName$1i = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -218,7 +218,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1h} .${summaryClassName} {
+    &.${rootClassName$1i} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -263,7 +263,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1h,
+  'data-pendoid': dataPendoId = rootClassName$1i,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -274,7 +274,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -390,7 +390,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1g = 'dot-text-field';
+const rootClassName$1h = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
@@ -438,7 +438,7 @@ const StyledTextField = styled(TextField)`
   theme,
   InputProps
 }) => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1h} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -482,7 +482,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1g} {
+    &.${rootSelectClassName}, &.${rootClassName$1h} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -573,15 +573,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1f = 'dot-action-toolbar';
+const rootClassName$1g = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1g} .MuiInputBase-root {
+      .${rootClassName$1h} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -595,7 +595,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1665,12 +1665,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$1e = 'dot-alert-banner';
+const rootClassName$1f = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1705,7 +1705,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1e,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1713,7 +1713,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2391,7 +2391,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1d = 'dot-avatar';
+const rootClassName$1e = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2401,7 +2401,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2513,7 +2513,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2552,12 +2552,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1c = 'dot-button';
+const rootClassName$1d = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1c} {
+    &.${rootClassName$1d} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2641,7 +2641,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1c,
+  'data-pendoid': dataPendoId = rootClassName$1d,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2657,7 +2657,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   let color;
   let variant;
   switch (type) {
@@ -2681,7 +2681,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
-    "data-testid": `${dataTestId || rootClassName$1c}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1d}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2690,7 +2690,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1c,
+      "data-testid": dataTestId || rootClassName$1d,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2709,10 +2709,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1b = 'dot-link';
+const rootClassName$1c = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1c} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2728,7 +2728,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1b,
+  'data-pendoid': dataPendoId = rootClassName$1c,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2740,7 +2740,7 @@ const DotLink = ({
   tooltip,
   underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -2790,7 +2790,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1a = 'dot-list';
+const rootClassName$1b = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2798,7 +2798,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1a} {
+      &.${rootClassName$1b} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2810,13 +2810,13 @@ const StyledList = styled(List)`
         }
 
         .MuiCollapse-root {
-          padding-top: ${theme.spacing(1)};
-          margin-bottom: ${theme.spacing(-1)};
+          &.${nestedListClassName} .${listItemRootClass} {
+            padding-left: ${theme.spacing(6)};
+            padding-right: ${theme.spacing(2)};
+          }
 
           .MuiCollapse-wrapper {
-            margin: ${theme.spacing(0, 2)};
             overflow: hidden;
-            width: calc(100% - ${theme.spacing(4)});
           }
 
           .MuiListSubheader-root .MuiTypography-root {
@@ -2881,12 +2881,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$19 = 'dot-progress';
+const rootClassName$1a = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -2937,7 +2937,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3003,34 +3003,112 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$18 = 'dot-popper';
+const rootClassName$19 = 'dot-popper';
+const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
+
+      &[data-popper-placement='top'],
+      &[data-popper-placement='top-start'],
+      &[data-popper-placement='top-end'] {
+        .${arrowClassName} {
+          bottom: 0;
+          left: 0;
+          margin-bottom: -10px;
+          &::before {
+            transform-origin: 100% 0;
+          }
+        }
+      }
+
+      &[data-popper-placement='right'],
+      &[data-popper-placement='right-start'],
+      &[data-popper-placement='right-end'] {
+        .${arrowClassName} {
+          left: 0;
+          margin-left: -10px;
+          height: 14px;
+          width: 10px;
+          &::before {
+            transform-origin: 100% 100%;
+          }
+        }
+      }
+
+      &[data-popper-placement='bottom'],
+      &[data-popper-placement='bottom-start'],
+      &[data-popper-placement='bottom-end'] {
+        .${arrowClassName} {
+          top: 0;
+          left: 0;
+          margin-top: -10px;
+          &::before {
+            transform-origin: 0 100%;
+          }
+        }
+      }
+
+      &[data-popper-placement='left'],
+      &[data-popper-placement='left-start'],
+      &[data-popper-placement='left-end'] {
+        .${arrowClassName} {
+          right: 0;
+          margin-right: -10px;
+          height: 14px;
+          width: 10px;
+          &::before {
+            transform-origin: 0 0;
+          }
+        }
+      }
     }
 
-    &.${rootClassName$18}, &.${rootClassName$18} > .dot-popper-paper {
+    &.${rootClassName$19}, &.${rootClassName$19} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
 `;
+const StyledArrow = styled('span')`
+  ${({
+  theme
+}) => css`
+    &.${arrowClassName} {
+      overflow: hidden;
+      position: absolute;
+      width: 14px;
+      height: 10px;
+      box-sizing: border-box;
+      &::before {
+        content: '';
+        margin: auto;
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: ${theme.palette.figma.background.level1.white};
+        box-shadow: ${theme.shadows[1]};
+        transform: rotate(45deg);
+      }
+    }
+  `}
+`;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$17 = 'dot-menu';
+const rootClassName$18 = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$17}, &.${rootClassName$18} {
+    &.${rootClassName$18}, &.${rootClassName$19} {
       .MuiPaper-root {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3110,14 +3188,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$16 = 'dot-ul';
+const rootClassName$17 = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3213,7 +3291,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3324,7 +3402,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3412,12 +3490,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$15 = 'dot-drawer';
+const rootClassName$16 = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} .MuiBackdrop-root {
+    &.${rootClassName$16} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3436,12 +3514,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$14 = 'dot-drawer-header';
+const rootClassName$15 = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3452,13 +3530,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$13 = 'dot-icon-btn';
+const rootClassName$14 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3517,7 +3595,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$14,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3530,7 +3608,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$13, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3565,7 +3643,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3582,10 +3660,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$12 = 'dot-drawer-body';
+const rootClassName$13 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3606,7 +3684,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3621,12 +3699,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$11 = 'dot-drawer-footer';
+const rootClassName$12 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3639,7 +3717,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3655,7 +3733,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$15,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3678,7 +3756,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, 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';
@@ -4073,12 +4151,14 @@ const DotList = ({
   items = [],
   menuPlacement = 'right-start',
   nestedDrawerLeftSpacing = 240,
+  nestedListCloseOnClickAway = true,
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
+  const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
   const [listItemIndex, setListItemIndex] = useState(null);
   const updateSelectedListItem = currentIndex => {
     currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
@@ -4089,93 +4169,94 @@ const DotList = ({
   const handleHrefClick = index => () => {
     updateSelectedListItem(index);
   };
-  return jsx(DotClickAwayListener, {
-    onClickAway: handleClickAway,
-    children: jsxs(StyledList, {
-      "aria-label": ariaLabel,
-      classes: {
-        root: rootClasses
-      },
-      component: component,
-      "data-testid": dataTestId,
-      dense: dense,
-      disablePadding: disablePadding,
-      ref: listRef,
-      role: ariaRole,
-      style: {
-        width: listWidth
-      },
-      children: [items.map((item, index) => {
+  const list = jsxs(StyledList, {
+    "aria-label": ariaLabel,
+    classes: {
+      root: rootClasses
+    },
+    component: component,
+    "data-testid": dataTestId,
+    dense: dense,
+    disablePadding: disablePadding,
+    ref: listRef,
+    role: ariaRole,
+    style: {
+      width: listWidth
+    },
+    children: [items.map((item, index) => {
+      var _a;
+      const handleListItemClick = e => {
         var _a;
-        const handleListItemClick = e => {
-          var _a;
-          const target = e.target;
-          e.stopPropagation();
-          (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-          // If clicking on a nested list item, don't update the selected index
-          // Do nothing if clicking on the drawer itself
-          if (shouldToggleOpen(target.className)) {
-            updateSelectedListItem(index);
-          }
-        };
-        const determineOnClick = item.onClick || ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? handleListItemClick : null;
-        const handleMenuLeave = event => {
-          // TODO: Need to apply animation to open/close
-          var _a, _b;
-          // Remove index only if clicked element is not found within the list
-          if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-            setListItemIndex(null);
-            (_b = item.onMenuLeave) === null || _b === void 0 ? void 0 : _b.call(item, event);
-          }
-        };
-        if (item.child) {
-          return jsx("div", {
-            onClick: item.onClick,
-            role: "listitem",
-            children: item.child
-          }, `item-child-${item.id || CreateUUID()}`);
+        const target = e.target;
+        e.stopPropagation();
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+        // If clicking on a nested list item, don't update the selected index
+        // Do nothing if clicking on the drawer itself
+        if (shouldToggleOpen(target.className)) {
+          updateSelectedListItem(index);
         }
-        if (item.divider) {
-          return jsx(DotListDivider, {
-            index: index,
-            item: item
-          }, `divider-${item.id || CreateUUID()}`);
+      };
+      const determineOnClick = item.onClick || ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? handleListItemClick : null;
+      const handleMenuLeave = event => {
+        // TODO: Need to apply animation to open/close
+        var _a, _b;
+        // Remove index only if clicked element is not found within the list
+        if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+          setListItemIndex(null);
+          (_b = item.onMenuLeave) === null || _b === void 0 ? void 0 : _b.call(item, event);
         }
-        return jsx(DotListItem, {
-          ariaLabel: item.text || item.primaryText,
-          className: item.className,
-          component: item.component,
-          "data-testid": `${dataTestId}-item-${index}`,
-          endIcon: item.endIcon,
-          href: item.href,
-          isOpened: listItemIndex === index,
-          items: item.items,
-          menuPlacement: menuPlacement,
-          nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-          nestedListType: nestedListType,
-          onClick: determineOnClick,
-          onHrefClick: item.href ? handleHrefClick(index) : undefined,
-          onMenuLeave: handleMenuLeave,
-          primaryText: item.primaryText,
-          secondaryText: item.secondaryText,
-          selected: item.selected,
-          startIcon: item.startIcon,
-          target: item.target,
-          text: item.text,
-          tooltip: item.tooltip,
-          tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
-        }, item.id || item.text);
-      }), children]
-    })
+      };
+      if (item.child) {
+        return jsx("div", {
+          onClick: item.onClick,
+          role: "listitem",
+          children: item.child
+        }, `item-child-${item.id || CreateUUID()}`);
+      }
+      if (item.divider) {
+        return jsx(DotListDivider, {
+          index: index,
+          item: item
+        }, `divider-${item.id || CreateUUID()}`);
+      }
+      return jsx(DotListItem, {
+        ariaLabel: item.text || item.primaryText,
+        className: item.className,
+        component: item.component,
+        "data-testid": `${dataTestId}-item-${index}`,
+        endIcon: item.endIcon,
+        href: item.href,
+        isOpened: item.isOpened ? item.isOpened : listItemIndex === index,
+        items: item.items,
+        menuPlacement: menuPlacement,
+        nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+        nestedListType: nestedListType,
+        onClick: determineOnClick,
+        onHrefClick: item.href ? handleHrefClick(index) : undefined,
+        onMenuLeave: handleMenuLeave,
+        primaryText: item.primaryText,
+        secondaryText: item.secondaryText,
+        selected: item.selected,
+        startIcon: item.startIcon,
+        target: item.target,
+        text: item.text,
+        tooltip: item.tooltip,
+        tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
+      }, item.id || item.text);
+    }), children]
+  });
+  return disableCloseOnClickAway ? list : jsx(DotClickAwayListener, {
+    onClickAway: handleClickAway,
+    children: list
   });
 };
 
-const rootClassName$10 = 'dot-copy-button';
+const rootClassName$11 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} .copied-to-clipboard {
+    &.${rootClassName$11} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4201,7 +4282,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$10,
+  'data-pendoid': dataPendoId = rootClassName$11,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4249,7 +4330,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$10,
+    className: rootClassName$11,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4338,7 +4419,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1h,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4384,7 +4465,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1g, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1h, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4520,10 +4601,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$$ = 'dot-search-input';
+const rootClassName$10 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
     }
   `}
 `;
@@ -4540,7 +4621,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4796,12 +4877,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$_ = 'dot-app-switcher';
+const rootClassName$$ = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -4911,7 +4992,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5289,12 +5370,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$Z = 'dot-sidebar';
+const rootClassName$_ = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5588,10 +5669,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$Y = 'dot-truncate-with-tooltip';
+const rootClassName$Z = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5622,7 +5703,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5746,7 +5827,7 @@ const DotSidebar = ({
     };
   }, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5802,7 +5883,7 @@ const DotSidebar = ({
         children: jsx(DotIconButton, {
           ariaLabel: "collapse sidebar navigation",
           "data-testid": "toggle-nav",
-          iconId: isOpen ? 'collapse' : 'expand',
+          iconId: isOpen ? 'push-left' : 'push-right',
           iconSize: "small",
           onClick: toggleNavCollapseState,
           size: "small"
@@ -5814,12 +5895,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$X = 'dot-badge';
+const rootClassName$Y = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5854,7 +5935,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5876,7 +5957,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$W = 'dot-app-toolbar';
+const rootClassName$X = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5916,7 +5997,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6038,7 +6119,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6168,14 +6249,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$V = 'dot-autocomplete';
+const rootClassName$W = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6212,12 +6293,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$U = 'dot-chip';
+const rootClassName$V = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6323,7 +6404,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$U,
+  'data-pendoid': dataPendoId = rootClassName$V,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6336,7 +6417,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6436,7 +6517,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-pendoid': dataPendoId = rootClassName$W,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6468,6 +6549,7 @@ const DotAutoComplete = ({
   persistentLabel,
   placeholder,
   popperClassName,
+  preserveGroupOrder = false,
   readOnly = false,
   renderGroup,
   renderOption,
@@ -6488,10 +6570,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$V, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1g, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1h, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
-  const popperClasses = useStylesWithRootClass(rootClassName$18, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$19, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -6517,11 +6599,12 @@ const DotAutoComplete = ({
     setShowPlaceholder(parseAutoCompleteValue(val) === '');
   };
   const sortOptions = () => {
-    return group ? options.sort((a, b) => {
+    if (!group || preserveGroupOrder) return options;
+    return options.sort((a, b) => {
       const aGroup = a.group ? a.group : '';
       const bGroup = b.group ? b.group : '';
       return -bGroup.localeCompare(aGroup);
-    }) : options;
+    });
   };
   const handleBlur = event => {
     event.relatedTarget !== actionItemRef.current && setIsOpened(false);
@@ -6768,10 +6851,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$T = 'dot-avatar-group';
+const rootClassName$U = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$T} {
+      &.${rootClassName$U} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6790,7 +6873,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6805,13 +6888,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$S = 'dot-breadcrumbs';
+const rootClassName$T = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6831,7 +6914,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7159,7 +7242,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$S,
+        root: rootClassName$T,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7190,14 +7273,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$R = 'dot-button-toggle';
+const rootClassName$S = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$R} {
+    &.${rootClassName$S} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7313,7 +7396,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$R,
+  'data-pendoid': dataPendoId = rootClassName$S,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7323,7 +7406,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7406,12 +7489,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$Q = 'dot-card';
+const rootClassName$R = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$R} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7423,7 +7506,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7452,12 +7535,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$P = 'dot-card-footer';
+const rootClassName$Q = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$Q} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7469,7 +7552,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7478,6 +7561,23 @@ const DotCardFooter = ({
   });
 };
 
+const rootClassName$P = 'dot-card-header';
+const StyledCardHeader = styled(CardHeader)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$P} {
+      .MuiCardHeader-content {
+        overflow-x: hidden;
+
+        .dot-card-subheader {
+          color: ${theme.palette.figma.typography.gray};
+        }
+      }
+    }
+  `}
+`;
+
 const DotCardHeader = ({
   action,
   ariaLabel,
@@ -7489,16 +7589,11 @@ const DotCardHeader = ({
   title,
   titleSize = 'large'
 }) => {
-  const rootClasses = useStylesWithRootClass('dot-card-header', className);
-  const titleVariant = titleSize === 'small' ? 'h4' : titleSize === 'medium' ? 'h3' : 'h2';
-  const titleTypographyProps = {
-    variant: titleVariant
-  };
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const nonSmallTitleSize = titleSize === 'medium' ? 'h3' : 'h2';
+  const titleVariant = titleSize === 'small' ? 'h4' : nonSmallTitleSize;
   const subheaderVariant = subheaderSize === 'small' ? 'body2' : 'body1';
-  const subheaderTypographyProps = {
-    variant: subheaderVariant
-  };
-  return jsx(CardHeader, {
+  return jsx(StyledCardHeader, {
     action: action,
     "aria-label": ariaLabel,
     avatar: avatar,
@@ -7506,10 +7601,26 @@ const DotCardHeader = ({
       root: rootClasses
     },
     "data-testid": dataTestId,
-    subheader: subheader,
-    subheaderTypographyProps: subheaderTypographyProps,
-    title: title,
-    titleTypographyProps: titleTypographyProps
+    subheader: jsx(DotTooltip, {
+      hoverVisibility: "overflow",
+      title: subheader,
+      children: jsx(DotTypography, {
+        className: "dot-card-subheader",
+        children: subheader,
+        noWrap: true,
+        variant: subheaderVariant
+      })
+    }),
+    title: jsx(DotTooltip, {
+      hoverVisibility: "overflow",
+      title: title,
+      children: jsx(DotTypography, {
+        className: "dot-card-header-title",
+        children: title,
+        noWrap: true,
+        variant: titleVariant
+      })
+    })
   });
 };
 
@@ -9679,7 +9790,7 @@ const StyledSnackbar = styled(Snackbar)`
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1e} {
+      .${rootClassName$1f} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -11707,7 +11818,7 @@ const StyledFormContainer = styled.div`
 
       .${rootClassName$M},
         .${rootClassName$O},
-        .${rootClassName$1g},
+        .${rootClassName$1h},
         .${rootSelectClassName},
         .${rootClassName$A},
         .${rootClassName$z} {
@@ -11715,7 +11826,7 @@ const StyledFormContainer = styled.div`
       }
 
       label
-        + .${rootClassName$1g},
+        + .${rootClassName$1h},
         label
         + .${rootSelectClassName},
         label
@@ -16279,25 +16390,34 @@ const DotPopper = ({
   className,
   'data-testid': dataTestId,
   disablePortal,
+  hasArrow = false,
   modifiers,
   onClickAway,
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const [arrowRef, setArrowRef] = useState(null);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
       onClickAway(event);
     }
   };
+  const arrowModifier = {
+    name: 'arrow',
+    enabled: true,
+    options: {
+      element: arrowRef
+    }
+  };
   return jsx(StyledPopper$1, {
     anchorEl: anchorEl,
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
     disablePortal: disablePortal,
-    modifiers: modifiers,
+    modifiers: [...(modifiers || []), ...(hasArrow ? [arrowModifier] : [])],
     open: open,
     placement: placement,
     role: "presentation",
@@ -16305,16 +16425,20 @@ const DotPopper = ({
     children: ({
       TransitionProps
     }) => jsx(Fade, Object.assign({}, TransitionProps, {
-      children: jsx(Paper, {
+      children: jsxs(Paper, {
         className: "dot-popper-paper",
-        children: jsx(ClickAwayListener, {
+        children: [hasArrow && jsx(StyledArrow, {
+          className: arrowClassName,
+          "data-testid": "popper-arrow",
+          ref: setArrowRef
+        }), jsx(ClickAwayListener, {
           onClickAway: handleClickAway,
           children: jsx("div", {
             className: "dot-popper-content-wrapper",
             "data-testid": dataTestId && `${dataTestId}-content-wrapper`,
             children: children
           })
-        })
+        })]
       })
     }))
   });
@@ -17914,4 +18038,4 @@ const BoardColumnSummary = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };