@digital-ai/dot-components 3.10.1 → 3.11.1

package/index.esm.js

@@ -104,12 +104,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$1g = 'dot-icon';
+const rootClassName$1i = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1i} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -146,7 +146,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -207,7 +207,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$1f = 'dot-accordion';
+const rootClassName$1h = '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$1f} .${summaryClassName} {
+    &.${rootClassName$1h} .${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$1f,
+  'data-pendoid': dataPendoId = rootClassName$1h,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -274,7 +274,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -390,7 +390,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1e = 'dot-text-field';
+const rootClassName$1g = '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$1e} {
+    &.${rootClassName$1g} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -482,7 +482,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1e} {
+    &.${rootSelectClassName}, &.${rootClassName$1g} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -573,15 +573,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1d = 'dot-action-toolbar';
+const rootClassName$1f = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1f} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1e} .MuiInputBase-root {
+      .${rootClassName$1g} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -595,7 +595,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, 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$1c = 'dot-alert-banner';
+const rootClassName$1e = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1c} {
+    &.${rootClassName$1e} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1705,7 +1705,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1c,
+  'data-pendoid': dataPendoId = rootClassName$1e,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1713,7 +1713,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, 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$1b = 'dot-avatar';
+const rootClassName$1d = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2401,7 +2401,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1d} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2513,7 +2513,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, 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$1a = 'dot-button';
+const rootClassName$1c = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1c} {
       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$1a,
+  'data-pendoid': dataPendoId = rootClassName$1c,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2657,7 +2657,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, 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$1a}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1c}-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$1a,
+      "data-testid": dataTestId || rootClassName$1c,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2709,10 +2709,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$19 = 'dot-link';
+const rootClassName$1b = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1b} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2728,7 +2728,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$19,
+  'data-pendoid': dataPendoId = rootClassName$1b,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2740,7 +2740,7 @@ const DotLink = ({
   tooltip,
   underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, 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$18 = 'dot-list';
+const rootClassName$1a = '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$18} {
+      &.${rootClassName$1a} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2881,12 +2881,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$17 = 'dot-progress';
+const rootClassName$19 = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$19} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -2937,7 +2937,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3003,34 +3003,34 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$16 = 'dot-popper';
+const rootClassName$18 = 'dot-popper';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$18} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
     }
 
-    &.${rootClassName$16}, &.${rootClassName$16} > .dot-popper-paper {
+    &.${rootClassName$18}, &.${rootClassName$18} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$15 = 'dot-menu';
+const rootClassName$17 = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$18} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$15}, &.${rootClassName$16} {
+    &.${rootClassName$17}, &.${rootClassName$18} {
       .MuiPaper-root {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3110,14 +3110,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$14 = 'dot-ul';
+const rootClassName$16 = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$16} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3213,7 +3213,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3324,7 +3324,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3412,12 +3412,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$13 = 'dot-drawer';
+const rootClassName$15 = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} .MuiBackdrop-root {
+    &.${rootClassName$15} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3436,12 +3436,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$12 = 'dot-drawer-header';
+const rootClassName$14 = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$14} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3452,13 +3452,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$11 = 'dot-icon-btn';
+const rootClassName$13 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$13} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3517,7 +3517,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$11,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3530,7 +3530,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$11, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3565,7 +3565,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3582,10 +3582,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$10 = 'dot-drawer-body';
+const rootClassName$12 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$12} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3606,7 +3606,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3621,12 +3621,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$$ = 'dot-drawer-footer';
+const rootClassName$11 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$11} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3639,7 +3639,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3655,7 +3655,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$15,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3678,7 +3678,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, 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';
@@ -4076,7 +4076,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const [listItemIndex, setListItemIndex] = useState(null);
@@ -4170,12 +4170,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$_ = 'dot-copy-button';
+const rootClassName$10 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} .copied-to-clipboard {
+    &.${rootClassName$10} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4201,7 +4201,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$_,
+  'data-pendoid': dataPendoId = rootClassName$10,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4249,7 +4249,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$_,
+    className: rootClassName$10,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4338,7 +4338,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1e,
+  'data-pendoid': dataPendoId = rootClassName$1g,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4384,7 +4384,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1e, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1g, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4520,10 +4520,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$Z = 'dot-search-input';
+const rootClassName$$ = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$$} {
     }
   `}
 `;
@@ -4540,7 +4540,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4796,12 +4796,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$Y = 'dot-app-switcher';
+const rootClassName$_ = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$_} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -4911,7 +4911,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5289,12 +5289,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$X = 'dot-sidebar';
+const rootClassName$Z = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Z} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5588,10 +5588,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$W = 'dot-truncate-with-tooltip';
+const rootClassName$Y = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$Y} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5622,7 +5622,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5746,7 +5746,7 @@ const DotSidebar = ({
     };
   }, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$X, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5814,12 +5814,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$V = 'dot-badge';
+const rootClassName$X = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$X} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5854,7 +5854,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5876,7 +5876,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$U = 'dot-app-toolbar';
+const rootClassName$W = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5916,7 +5916,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$W} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6038,7 +6038,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$W, 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 +6168,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$T = 'dot-autocomplete';
+const rootClassName$V = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$V} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6212,12 +6212,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$S = 'dot-chip';
+const rootClassName$U = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$U} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6323,7 +6323,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$S,
+  'data-pendoid': dataPendoId = rootClassName$U,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6336,7 +6336,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6436,7 +6436,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$T,
+  'data-pendoid': dataPendoId = rootClassName$V,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6488,10 +6488,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$T, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1e, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1g, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
-  const popperClasses = useStylesWithRootClass(rootClassName$16, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$18, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -6768,10 +6768,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$R = 'dot-avatar-group';
+const rootClassName$T = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$R} {
+      &.${rootClassName$T} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6790,7 +6790,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6805,13 +6805,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$Q = 'dot-breadcrumbs';
+const rootClassName$S = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$S} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6831,7 +6831,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$S} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7159,7 +7159,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$Q,
+        root: rootClassName$S,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7190,14 +7190,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$P = 'dot-button-toggle';
+const rootClassName$R = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$R} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7313,7 +7313,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$P,
+  'data-pendoid': dataPendoId = rootClassName$R,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7323,7 +7323,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7406,12 +7406,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$O = 'dot-card';
+const rootClassName$Q = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$O} {
+    &.${rootClassName$Q} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7423,7 +7423,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7452,12 +7452,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$N = 'dot-card-footer';
+const rootClassName$P = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$P} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7469,7 +7469,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7513,9 +7513,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$M = 'dot-form-control-label';
+const rootClassName$O = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$M} {
+  &.${rootClassName$O} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -7538,12 +7538,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$L = 'dot-checkbox';
+const rootClassName$N = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$N} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -7562,7 +7562,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$M,
+  'data-pendoid': dataPendoId = rootClassName$O,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7577,14 +7577,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$L
+      root: rootClassName$N
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -7613,13 +7613,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$K = 'dot-form-group';
+const rootClassName$M = 'dot-form-group';
 const groupLabelClassName = 'dot-form-group-label';
 const startAdornmentClassName = 'dot-start-adornment';
 const endAdornmentClassName = 'dot-end-adornment';
 const placementClassName = 'dot-';
 const StyledFormControl = styled(FormControl)`
-  &.${rootClassName$K} {
+  &.${rootClassName$M} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -7650,7 +7650,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$J = 'dot-checkbox-group';
+const rootClassName$L = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -7659,7 +7659,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$J} {
+      .${rootClassName$L} {
         width: 100%;
       }
 
@@ -7686,7 +7686,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$M} {
+        .${rootClassName$O} {
           margin: 0;
         }
       }
@@ -7694,13 +7694,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$I = 'dot-form-group';
+const rootClassName$K = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$I} > * {
+    &.${rootClassName$K} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -7713,7 +7713,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7752,7 +7752,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$K, rootClassName$J, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, rootClassName$L, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -7837,12 +7837,99 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$H = 'dot-dialog';
+const rootClassName$J = 'chip-list';
+const StyledChipList = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$J} {
+      display: flex;
+      gap: ${theme.spacing(1)};
+    }
+  `}
+`;
+
+const formatListForTooltip = words => {
+  const elements = [];
+  if (words.length > 1) {
+    words.forEach(word => {
+      elements.push(jsx("div", {
+        children: word
+      }));
+    });
+    return jsx("div", {
+      children: elements
+    });
+  }
+  return '';
+};
+function DotChipList({
+  dataTestId,
+  items,
+  maxChars = -1,
+  size = 'small',
+  style = {}
+}) {
+  const [chips, setChips] = useState([]);
+  useEffect(() => {
+    const extraItems = [];
+    let itemElements = [];
+    if (items && maxChars > 0) {
+      let chars = 0;
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const label = item.label;
+        if (chars + label.length <= maxChars && extraItems.length === 0) {
+          chars += label.length;
+          itemElements.push(jsx(DotChip, {
+            size: size,
+            children: label
+          }, item.key));
+        } else if (i === 0) {
+          // With first item, truncate if item is too long rather than pushing to extraItems.
+          const truncatedItem = label.substring(0, maxChars - 3) + '...';
+          chars = truncatedItem.length;
+          itemElements.push(jsx(DotTooltip, {
+            title: label,
+            children: jsx(DotChip, {
+              size: size,
+              children: truncatedItem
+            }, item.key)
+          }, item.key));
+        } else {
+          extraItems.push(label);
+        }
+      }
+      if (extraItems.length > 0) {
+        itemElements.push(jsx(DotTooltip, {
+          title: formatListForTooltip(items === null || items === void 0 ? void 0 : items.map(item => item.label)),
+          children: jsxs(DotTypography, {
+            children: ["+", extraItems.length]
+          })
+        }));
+      }
+    } else {
+      itemElements = items === null || items === void 0 ? void 0 : items.map(item => jsx(DotChip, {
+        size: size,
+        children: item.label
+      }, item.key));
+    }
+    setChips(itemElements);
+  }, [items, maxChars]);
+  return jsx(StyledChipList, {
+    className: rootClassName$J,
+    "data-testid": dataTestId,
+    style: style,
+    children: chips
+  });
+}
+
+const rootClassName$I = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -7888,7 +7975,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$H,
+  'data-pendoid': dataPendoId = rootClassName$I,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -7901,7 +7988,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   useEffect(() => {
@@ -8019,7 +8106,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$G = 'dot-grid';
+const rootClassName$H = 'dot-grid';
 const frGetter = value => typeof value === 'number' ? `repeat(${value}, 1fr)` : value;
 const breakpointsGetter$1 = (theme, columnsBreakpoints, columnGap, rowGap) => `${theme.breakpoints.up('xs')} {
     column-gap: ${`${columnGap.xs}px`};
@@ -8071,7 +8158,7 @@ const Grid = ({
   className,
   children
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   return jsx("div", {
     className: rootClasses,
     children: children
@@ -8090,7 +8177,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$H} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -8296,114 +8383,151 @@ const CssGridDebug = ({
   });
 };
 
-const DotInputSelect = ({
+const rootClassName$G = 'dot-pill';
+const StyledPill = styled(Chip)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$G} {
+      background-color: ${({
+  backgroundcolor,
+  variant
+}) => {
+  const defaultBackground = variant === 'filled' ? theme.palette.grey[200] : theme.palette.grey[50];
+  return backgroundcolor !== null && backgroundcolor !== void 0 ? backgroundcolor : defaultBackground;
+}};
+      border-color: ${({
+  bordercolor
+}) => {
+  return bordercolor ? bordercolor : theme.palette.grey[200];
+}};
+      color: ${({
+  labelcolor
+}) => {
+  return labelcolor ? labelcolor : theme.palette.layer.n700;
+}};
+      .dot-icon {
+        color: ${({
+  labelcolor
+}) => {
+  return labelcolor ? labelcolor : theme.palette.grey.main;
+}};
+        margin: ${theme.spacing(0, -0.5, 0, 1)};
+      }
+
+      &.MuiChip-sizeSmall .dot-icon {
+        margin-left: 5px;
+      }
+
+      &.MuiChip-outlined {
+        &.error {
+          background-color: ${theme.palette.error[50]};
+          border-color: ${theme.palette.error.main};
+          color: ${theme.palette.layer.n700};
+          .dot-icon {
+            color: ${theme.palette.error.main};
+          }
+        }
+
+        &.success {
+          background-color: ${theme.palette.figma.success.light};
+          border-color: ${theme.palette.figma.success.normal};
+          color: ${theme.palette.layer.n700};
+          .dot-icon {
+            color: ${theme.palette.success.main};
+          }
+        }
+
+        &.warning {
+          background-color: ${theme.palette.figma.warning.light};
+          border-color: ${theme.palette.figma.warning.normal};
+          color: ${theme.palette.layer.n700};
+          .dot-icon {
+            color: ${theme.palette.warning.main};
+          }
+        }
+
+        &.in-progress {
+          background-color: ${theme.palette.figma.primary.light};
+          border-color: ${theme.palette.figma.primary.normal};
+          color: ${theme.palette.layer.n700};
+          .dot-icon {
+            color: ${theme.palette.primary.main};
+          }
+        }
+      }
+
+      &.MuiChip-filled {
+        &.error {
+          background-color: ${theme.palette.error.main};
+          border-color: ${theme.palette.error.main};
+          color: ${theme.palette.layer.n0};
+          .dot-icon {
+            color: ${theme.palette.layer.n0};
+          }
+        }
+
+        &.success {
+          background-color: ${theme.palette.success.main};
+          border-color: ${theme.palette.success.main};
+          color: ${theme.palette.layer.n0};
+          .dot-icon {
+            color: ${theme.palette.layer.n0};
+          }
+        }
+
+        &.warning {
+          background-color: ${theme.palette.warning.main};
+          border-color: ${theme.palette.warning.main};
+          color: ${theme.palette.layer.n700};
+          .dot-icon {
+            color: ${theme.palette.layer.n700};
+          }
+        }
+
+        &.in-progress {
+          background-color: ${theme.palette.primary.main};
+          border-color: ${theme.palette.primary.main};
+          color: ${theme.palette.layer.n0};
+          .dot-icon {
+            color: ${theme.palette.layer.n0};
+          }
+        }
+      }
+    }
+  `}
+`;
+
+const DotPill = ({
   ariaLabel,
-  autoFocus,
+  backgroundcolor,
+  bordercolor,
   className,
-  'data-pendoid': dataPendoId = rootSelectClassName,
   'data-testid': dataTestId,
-  defaultValue,
-  disabled = false,
-  endIcon,
-  endText,
-  error = false,
-  fullWidth = true,
-  helperText,
-  id,
-  inputRef,
+  icon,
   label,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  onKeyDown,
-  options = [],
-  persistentLabel,
-  readOnly = false,
-  required,
-  shrink,
-  size = 'small',
-  startIcon,
-  success,
-  value,
-  warning = false
+  labelcolor,
+  onClick,
+  size = 'medium',
+  status = 'default',
+  variant = 'filled'
 }) => {
-  const hasWarning = !error && warning && warningClassName;
-  const hasSuccess = !error && !warning && success && successClassName;
-  const endAdornment = endIcon || endText;
-  const inputStyles = useStylesWithRootClass('dot-select', readOnly && readOnlyClassName$1);
-  const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning);
-  const getOption = option => {
-    return typeof option === 'string' ? option : option.option;
-  };
-  const getValue = option => {
-    return typeof option === 'string' ? option : (option === null || option === void 0 ? void 0 : option.value) || option.option;
-  };
-  return jsxs("div", {
-    className: className,
-    children: [persistentLabel && jsx(DotInputLabel, {
-      disabled,
-      error,
-      id,
-      label,
-      required
-    }), jsx(StyledTextField, {
-      InputProps: {
-        startAdornment: startIcon && jsx(StyledAdornment, {
-          className: `${adornmentIconClassName} start`,
-          position: "start",
-          children: startIcon
-        }),
-        endAdornment: endAdornment && jsx(StyledAdornment, {
-          className: `${adornmentIconClassName} end`,
-          position: "end",
-          children: endAdornment
-        })
-      },
-      SelectProps: {
-        native: !readOnly,
-        readOnly,
-        open: readOnly ? false : undefined
-      },
-      "aria-label": ariaLabel || label,
-      autoFocus: autoFocus,
-      className: rootStyles,
-      defaultValue: defaultValue,
-      disabled: disabled,
-      error: error,
-      fullWidth: fullWidth,
-      helperText: helperText,
-      id: id,
-      InputLabelProps: {
-        shrink: shrink
-      },
-      inputProps: {
-        'aria-label': ariaLabel,
-        'data-pendoid': dataPendoId,
-        'data-testid': dataTestId,
-        className: inputStyles,
-        readOnly
-      },
-      inputRef: inputRef,
-      label: persistentLabel ? null : label,
-      multiline: false,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      onFocus: onFocus,
-      onKeyDown: onKeyDown,
-      required: required,
-      role: "textbox",
-      select: true,
-      size: size,
-      value: value,
-      variant: "outlined",
-      children: options.map(option => jsx("option", {
-        className: "dot-option",
-        value: getValue(option),
-        children: getOption(option)
-      }, getValue(option)))
-    })]
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className, status);
+  return jsx(StyledPill, {
+    "aria-label": ariaLabel,
+    bordercolor: bordercolor,
+    backgroundcolor: backgroundcolor,
+    classes: {
+      root: rootClasses
+    },
+    clickable: !!onClick,
+    "data-testid": dataTestId,
+    icon: icon,
+    label: label,
+    labelcolor: labelcolor,
+    onClick: onClick,
+    size: size,
+    variant: variant
   });
 };
 
@@ -9121,6 +9245,26 @@ class HelpContentService {
   }
 }
 
+function DotDashboardStatusPill({
+  status
+}) {
+  if (status === DashboardView.lifecycle_state.DRAFT) {
+    return jsx(DotPill, {
+      label: "Draft",
+      size: "small",
+      variant: "outlined",
+      status: "in-progress"
+    });
+  } else {
+    return jsx(DotPill, {
+      status: "success",
+      label: "Published",
+      size: "small",
+      variant: "outlined"
+    });
+  }
+}
+
 const helpContent = {
   id: 'test-help-content-1',
   content: '<html><h1>Test</h1></html>'
@@ -9143,7 +9287,9 @@ const helpContent = {
   bi_type: DashboardView.bi_type.SUPERSET,
   is_ootb_dashboard: false,
   thumbnail: '',
-  external_object: {},
+  external_object: {
+    page_count: 3
+  },
   embed_config: {},
   help_content_id: helpContent.id,
   filter_configuration: [],
@@ -9299,17 +9445,19 @@ const DotMetadataApiProvider = ({
   const [dashboards, setDashboards] = useState();
   const [dashboardsLoading, setDashboardsLoading] = useState(true);
   const [helpContentLoading, setHelpContentLoading] = useState(true);
+  const [openedDashboardDetails, setOpenedDashboardDetails] = useState(null);
   const [dashboardsError, setDashboardsError] = useState(null);
   const [platformConsoleUrl, setPlatformConsoleUrl] = useState(null);
   const MOCK_API_URL = 'https://demo-mock-api';
   const memoizedValues = useMemo(() => ({
     categories,
     categoriesLoading,
-    dashboards,
     dashboardsError,
     dashboardsLoading,
     helpContentLoading,
+    openedDashboardDetails,
     platformConsoleUrl,
+    setOpenedDashboardDetails,
     setOverrideAccountId: id => {
       setAccountId(id);
     },
@@ -9436,7 +9584,7 @@ const DotMetadataApiProvider = ({
         });
       }
     })
-  }), [categories, categoriesLoading, dashboards, dashboardsError, dashboardsLoading, platformConsoleUrl]);
+  }), [categories, categoriesLoading, dashboardsError, dashboardsLoading, openedDashboardDetails, platformConsoleUrl]);
   if (apiUrl && OpenAPI.BASE !== apiUrl) {
     OpenAPI.BASE = apiUrl;
   }
@@ -9456,74 +9604,734 @@ const useDotMetadataApiContext = () => {
   return useContext(DotMetadataApiContext);
 };
 
-const StyledDashboardDialog = styled(DotDialog)`
+const getSnackbarTitleFromSeverity = severity => {
+  switch (severity) {
+    case 'success':
+      return 'Success';
+    case 'warning':
+      return 'Warning';
+    case 'error':
+      return 'Error';
+    case 'info':
+      return 'Info';
+    default:
+      return 'Success';
+  }
+};
+function getErrorText(error) {
+  var _a, _b;
+  if ('status' in error && error.status === 304) {
+    return 'No changes made';
+  } else if ('body' in error) {
+    return ((_b = (_a = error.body) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message) ? error.body.error.message : 'Unexpected API error';
+  } else if ('message' in error) {
+    return error.message;
+  }
+  return 'Unexpected API error';
+}
+
+function addAutoHideDuration(severity) {
+  return severity === 'error' ? null : 10000;
+}
+
+const rootClassName$F = 'dot-snackbar';
+const StyledSnackbar = styled(Snackbar)`
   ${({
-  theme
+  theme,
+  width,
+  $anchorOriginTop
 }) => css`
-    .dot-text-field {
-      margin-bottom: ${theme.spacing(2)};
-      width: 40vw;
-    }
-    .dot-autocomplete {
-      margin-top: ${theme.spacing(1.5)};
-    }
-    .dot-input-select {
-      margin-bottom: ${theme.spacing(2)};
+    &.${rootClassName$F} {
+      .MuiAlert-message {
+        word-break: break-word;
+      }
+      .${rootClassName$1e} {
+        align-items: flex-start;
+      }
+      &.MuiSnackbar-anchorOriginTopLeft,
+      &.MuiSnackbar-anchorOriginTopCenter,
+      &.MuiSnackbar-anchorOriginTopRight {
+        top: ${$anchorOriginTop}px;
+        z-index: ${levelFourth};
+      }
+
+      .dot-snackbar-actions {
+        display: flex;
+        align-items: center;
+        margin-top: ${theme.spacing(1)};
+        gap: ${theme.spacing(2)};
+
+        .primary-action-btn {
+          background-color: transparent;
+        }
+      }
+
+      .MuiAlert-root {
+        max-width: ${width ? 'unset' : '500px'};
+        min-width: ${width ? 'unset' : '344px'};
+        z-index: ${levelFourth};
+      }
     }
   `}
 `;
-const StyledDialogActions = styled(DialogActions)`
-  padding-right: 0;
-`;
 
-const DashboardAppTypeOptions = [
-// Matches target_app values in Dashboard model
-{
-  option: 'Agility',
-  value: 'AGILITY'
-}, {
-  option: 'Release',
-  value: 'RELEASE'
-}, {
-  option: 'Deploy',
-  value: 'DEPLOY'
-}, {
-  option: 'Continuous Testing',
-  value: 'CONTINUOUSTEST'
-}, {
-  option: 'TeamForge',
-  value: 'TEAMFORGE'
-}];
-const initialFormState = {
-  categories: [],
-  description: '',
-  name: ''
+const DEFAULT_ANCHOR_ORIGIN = {
+  vertical: 'top',
+  horizontal: 'right'
 };
-const DASHBOARD_NAME_MAX_LENGTH = 250;
-const DASHBOARD_DESCRIPTION_MAX_LENGTH = 250;
-function DotDashboardDialog({
-  availableCategories,
-  copyDashboard,
-  editDashboard,
-  open,
+const DotSnackbar = ({
+  anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
+  anchorOriginTop = 108,
+  ariaLabel,
+  autoHideDuration,
+  children,
+  className,
+  'data-testid': dataTestId,
+  hideOnClickAway = true,
   onClose,
-  onSubmit,
-  onContinue,
-  title
-}) {
-  const [isDirty, setIsDirty] = useState(false);
-  const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
-  const [nameError, setNameError] = useState(null);
-  const [formValues, setFormValues] = useState(initialFormState);
-  const {
-    categories,
-    description,
-    name
-  } = formValues;
-  const {
-    searchDashboards
-  } = useDotMetadataApiContext();
-  const {
+  open,
+  primaryAction,
+  secondaryAction,
+  severity,
+  width
+}) => {
+  const hasActions = !!(primaryAction || secondaryAction);
+  const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const handleSnackbarClose = reason => {
+    if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
+      onClose();
+    }
+  };
+  return jsx(StyledSnackbar, {
+    anchorOrigin: anchorOrigin,
+    "$anchorOriginTop": anchorOriginTop,
+    "aria-label": ariaLabel,
+    autoHideDuration: calculatedAutoHideDuration,
+    classes: {
+      root: rootClasses
+    },
+    "data-testid": dataTestId,
+    onClose: (_e, r) => handleSnackbarClose(r),
+    open: open,
+    severity: severity,
+    width: width,
+    children: jsx("div", {
+      children: jsx(DotAlertBanner, {
+        severity: severity,
+        width: width,
+        onClose: _e => handleSnackbarClose(),
+        children: jsxs("div", {
+          children: [jsx(DotTypography, {
+            variant: "subtitle2",
+            noMarginBottom: false,
+            children: getSnackbarTitleFromSeverity(severity)
+          }), isString$2(children) ? jsx(DotTypography, {
+            ariaLabel: severity,
+            variant: "body1",
+            children: children
+          }) : jsx("span", {
+            "aria-label": severity,
+            children: children
+          }), hasActions && jsxs("div", {
+            className: "dot-snackbar-actions",
+            children: [primaryAction && jsx(DotButton, {
+              className: "primary-action-btn",
+              "data-testid": "primary-action-btn",
+              onClick: primaryAction.onClick,
+              size: "small",
+              type: "outlined",
+              children: primaryAction.label
+            }), secondaryAction && jsx(DotLink, {
+              "data-testid": "secondary-action-link",
+              href: secondaryAction.href,
+              color: "inherit",
+              children: secondaryAction.label
+            })]
+          })]
+        })
+      })
+    })
+  });
+};
+
+const rootClassName$E = 'dot-snackbar-container';
+const StyledSnackbarContainer = styled.div`
+  ${() => css`
+    &.${rootClassName$E} {
+      position: absolute;
+      top: 0;
+      width: 250px;
+      height: auto;
+      right: 0;
+      & > div {
+        position: relative;
+      }
+    }
+  `}
+`;
+
+const DotSnackbarContext = createContext({
+  alerts: [],
+  enqueueMessage: (_message, _severity, _autoHideDuration, _primaryAction, _secondaryAction) => null,
+  removeMessage: _id => null
+});
+const DotSnackbarContainer = ({
+  hideOnClickAway
+}) => {
+  const {
+    alerts,
+    removeMessage
+  } = useDotSnackbarContext();
+  function handleClose(id) {
+    return () => {
+      removeMessage(id);
+    };
+  }
+  return jsx(StyledSnackbarContainer, {
+    className: rootClassName$E,
+    children: jsx("div", {
+      className: rootClassName$E,
+      "data-testid": rootClassName$E,
+      children: alerts.slice().reverse().map(alert => {
+        return jsx(DotSnackbar, {
+          autoHideDuration: alert.autoHideDuration,
+          hideOnClickAway: hideOnClickAway,
+          onClose: handleClose(alert.id),
+          open: alert.open,
+          severity: alert.severity,
+          primaryAction: alert.primaryAction,
+          secondaryAction: alert.secondaryAction,
+          children: alert.message
+        }, alert.id);
+      })
+    })
+  });
+};
+const DotSnackbarProvider = ({
+  children,
+  hideOnClickAway = true
+}) => {
+  const [alerts, setAlerts] = useState([]);
+  function enqueueMessage(message, severity, autoHideDuration, primaryAction, secondaryAction) {
+    const id = CreateUUID();
+    const queue = {
+      id,
+      message,
+      severity,
+      open: true,
+      autoHideDuration,
+      primaryAction,
+      secondaryAction
+    };
+    setAlerts(prevState => {
+      return [...prevState, Object.assign({}, queue)];
+    });
+    return id;
+  }
+  const removeMessage = id => {
+    setAlerts(prev => {
+      return prev.map(a => {
+        return a.id === id ? Object.assign(Object.assign({}, a), {
+          open: false
+        }) : a;
+      });
+    });
+  };
+  const DotSnackbarValues = {
+    alerts,
+    enqueueMessage,
+    removeMessage
+  };
+  const memoizedValues = useMemo(() => DotSnackbarValues, [alerts]);
+  return jsxs(DotSnackbarContext.Provider, {
+    value: memoizedValues,
+    children: [jsx(DotSnackbarContainer, {
+      hideOnClickAway: hideOnClickAway
+    }), children]
+  });
+};
+const useDotSnackbarContext = () => {
+  return useContext(DotSnackbarContext);
+};
+const useEnqueueErrorMessage = error => {
+  const {
+    enqueueMessage
+  } = useDotSnackbarContext();
+  useEffect(() => {
+    error && enqueueMessage(getErrorText(error), 'error');
+  }, [error]);
+};
+
+const rootClassName$D = 'dot-dashboard-details';
+const StyledDashboardDetails = styled(DotDrawer)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$D} {
+      .dot-drawer-paper {
+        padding: 0;
+        width: 382px;
+      }
+      .dot-card {
+        border: none;
+        padding: ${theme.spacing(0, 2)};
+
+        .dot-card-header {
+          padding: ${theme.spacing(2, 1, 0, 0)};
+        }
+        .dot-card-content {
+          padding: ${theme.spacing(0, 0, 3, 0)};
+        }
+      }
+      .content {
+        overflow-y: auto;
+      }
+      .dot-avatar {
+        flex-basis: 40px;
+      }
+      .section-title {
+        display: flex;
+        align-items: center;
+        padding: ${theme.spacing(2)};
+      }
+      .section-title-border {
+        margin: ${theme.spacing(1, -2, 0)};
+        border-bottom: 1px solid ${theme.palette.figma.border.default};
+      }
+      .dot-icon {
+        flex-basis: content;
+      }
+      .field-value {
+        margin-top: ${theme.spacing(2)};
+        .dashboard-details-label {
+          margin-bottom: ${theme.spacing(0.5)};
+        }
+      }
+      .dashboard-details-header {
+        align-items: end;
+        border-bottom: 1px solid ${theme.palette.figma.border.default};
+        display: flex;
+        justify-content: space-between;
+        padding: ${theme.spacing(0, 2, 1, 2)};
+
+        .dashboard-details-header-title {
+          display: flex;
+          align-items: center;
+          gap: ${theme.spacing(2)};
+        }
+      }
+    }
+  `}
+`;
+
+const DashboardDetailsField = ({
+  children,
+  className,
+  label,
+  value
+}) => {
+  let c = 'field-value';
+  if (className) {
+    c += ` ${className}`;
+  }
+  return jsxs("div", {
+    className: c,
+    children: [jsx(DotTypography, {
+      ariaRole: "heading",
+      className: "dashboard-details-label",
+      component: "h4",
+      variant: "h4",
+      children: label
+    }), value && jsx(DotTypography, {
+      className: "dashboard-details-value",
+      children: value
+    }), children]
+  });
+};
+const DashboardDetailsSectionHeading = ({
+  className,
+  label
+}) => {
+  let c = 'section-title';
+  if (className) {
+    c += ` ${className}`;
+  }
+  return jsx("div", {
+    className: "section-title-border",
+    children: jsx(DotTypography, {
+      ariaRole: "heading",
+      ariaLevel: 2,
+      className: c,
+      component: "div",
+      variant: "body1",
+      children: label
+    })
+  });
+};
+const DotDashboardDetailsView = ({
+  className,
+  dashboard,
+  onClose,
+  onFavorite,
+  open,
+  yOffset = 56,
+  zIndex = 990
+}) => {
+  var _a, _b;
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const closeHandler = useCallback(event => {
+    onClose && onClose(event);
+  }, [onClose]);
+  const favoriteHandler = useCallback(() => {
+    const favoriteValue = !dashboard.favorite;
+    onFavorite && onFavorite(dashboard.id, favoriteValue);
+  }, [dashboard]);
+  const header = useMemo(() => ({
+    className: 'dashboard-details-header',
+    children: jsxs("div", {
+      "aria-level": 1,
+      className: "dashboard-details-header-title",
+      role: "heading",
+      style: {
+        marginTop: yOffset + 'px',
+        width: '80%'
+      },
+      children: [jsx(DotAvatar, {
+        iconId: "file-lines",
+        alt: "dashboard details image",
+        type: "image",
+        variant: "circular"
+      }), jsx(DotTypography, {
+        ariaRole: "heading",
+        ariaLevel: 1,
+        className: "dashboard-details-label",
+        children: "Details"
+      })]
+    })
+  }), [yOffset]);
+  return jsx(StyledDashboardDetails, {
+    ariaLabel: "Dashboard details",
+    ariaRole: "dialog",
+    "aria-modal": "true",
+    className: rootClasses,
+    drawerHeaderProps: header,
+    ModalProps: {
+      style: {
+        zIndex
+      }
+    },
+    open: open,
+    onClose: closeHandler,
+    width: "340px",
+    variant: "temporary",
+    children: jsx("div", {
+      className: "content",
+      role: "contentinfo",
+      children: jsxs(DotCard, {
+        "data-testid": "dashboard-details-card",
+        children: [jsx(DotCardHeader, {
+          action: jsx("div", {
+            children: jsx(DotIconButton, {
+              iconId: `star-favorites-${dashboard.favorite ? 'active' : 'default'}`,
+              "data-testid": `dashboard-favorite-icon-${dashboard.id}`,
+              tooltip: dashboard.favorite ? 'Remove from favorites' : 'Add to favorites',
+              onClick: favoriteHandler
+            })
+          }),
+          avatar: jsx(DotAvatar, {
+            alt: "dashboard avatar",
+            iconId: dashboard.is_ootb_dashboard ? 'lock' : 'dashboard',
+            type: "icon"
+          }),
+          title: dashboard.name,
+          subheader: `by ${dashboard.is_ootb_dashboard ? 'Digital.ai' : dashboard.author_fullname}`
+        }), jsxs(DotCardContent, {
+          children: [jsx(DashboardDetailsSectionHeading, {
+            label: "GENERAL"
+          }), jsx(DashboardDetailsField, {
+            className: "dashboard-details-description",
+            label: "Description",
+            value: dashboard.description
+          }), jsx(DashboardDetailsField, {
+            className: "dashboard-details-author",
+            label: "Created by",
+            value: dashboard.author_fullname
+          }), jsx(DashboardDetailsField, {
+            className: "dashboard-details-status",
+            label: "Status",
+            children: jsx(DotDashboardStatusPill, {
+              status: dashboard.lifecycle_state
+            })
+          }), jsx(DashboardDetailsField, {
+            className: "dashboard-details-category",
+            label: "Category",
+            children: jsx(DotChipList, {
+              items: (_a = dashboard.categories) === null || _a === void 0 ? void 0 : _a.map(c => ({
+                key: c,
+                label: c
+              })),
+              maxChars: 30
+            })
+          }), ((_b = dashboard.external_object) === null || _b === void 0 ? void 0 : _b.page_count) && jsxs(Fragment, {
+            children: [jsx(DashboardDetailsSectionHeading, {
+              label: "DASHBOARD PAGE SUMMARY"
+            }), jsx(DashboardDetailsField, {
+              className: "dashboard-details-pages",
+              label: "Pages",
+              value: dashboard.external_object.page_count
+            })]
+          }), jsx(DashboardDetailsSectionHeading, {
+            label: "ADDITIONAL DETAILS"
+          }), jsx(DashboardDetailsField, {
+            className: "dashboard-details-created-dt",
+            label: "Created on",
+            value: dashboard.created_dt
+          }), dashboard.updated_dt && jsx(DashboardDetailsField, {
+            className: "dashboard-details-updated-dt",
+            label: "Modified on",
+            value: dashboard.updated_dt
+          }), dashboard.updated_by_fullname && jsx(DashboardDetailsField, {
+            className: "dashboard-details-updated-by",
+            label: "Modified by",
+            value: dashboard.updated_by_fullname
+          })]
+        })]
+      })
+    })
+  });
+};
+const DotDashboardDetails = _a => {
+  var {
+      dashboard,
+      onClose,
+      onFavorite
+    } = _a,
+    commonProps = __rest(_a, ["dashboard", "onClose", "onFavorite"]);
+  const [_openedDashboard, _setOpenedDashboard] = useState(dashboard);
+  const metadataApiContext = useDotMetadataApiContext();
+  const {
+    openedDashboardDetails: openedDashboard,
+    setOpenedDashboardDetails: setOpenedDashboard
+  } = metadataApiContext ? metadataApiContext : {
+    openedDashboardDetails: _openedDashboard,
+    setOpenedDashboardDetails: _setOpenedDashboard
+  };
+  const {
+    dashboardsError,
+    favoriteDashboard,
+    setOpenedDashboardDetails
+  } = useDotMetadataApiContext();
+  const {
+    enqueueMessage
+  } = useDotSnackbarContext();
+  useEnqueueErrorMessage(dashboardsError);
+  const closeHandler = useCallback(event => {
+    setOpenedDashboard(null);
+    onClose && onClose(event);
+  }, [onClose]);
+  const favoriteHandler = useCallback((dashboardId, favoriteValue) => {
+    // being optimistic; if the api call fails, there will be an error message
+    enqueueMessage(`Dashboard has been ${favoriteValue ? '' : 'un-'}favorited.`, 'success');
+    onFavorite && onFavorite(dashboardId, favoriteValue);
+    setOpenedDashboardDetails(Object.assign(Object.assign({}, openedDashboard), {
+      favorite: favoriteValue
+    }));
+    favoriteDashboard(openedDashboard.id, favoriteValue).then(response => {
+      setOpenedDashboardDetails(response);
+    });
+  }, [openedDashboard]);
+  const viewProps = Object.assign({}, commonProps);
+  if (openedDashboard) {
+    return jsx(DotDashboardDetailsView, Object.assign({}, viewProps, {
+      dashboard: openedDashboard,
+      open: true,
+      onFavorite: favoriteHandler,
+      onClose: closeHandler
+    }));
+  }
+  return null;
+};
+
+const DotInputSelect = ({
+  ariaLabel,
+  autoFocus,
+  className,
+  'data-pendoid': dataPendoId = rootSelectClassName,
+  'data-testid': dataTestId,
+  defaultValue,
+  disabled = false,
+  endIcon,
+  endText,
+  error = false,
+  fullWidth = true,
+  helperText,
+  id,
+  inputRef,
+  label,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  options = [],
+  persistentLabel,
+  readOnly = false,
+  required,
+  shrink,
+  size = 'small',
+  startIcon,
+  success,
+  value,
+  warning = false
+}) => {
+  const hasWarning = !error && warning && warningClassName;
+  const hasSuccess = !error && !warning && success && successClassName;
+  const endAdornment = endIcon || endText;
+  const inputStyles = useStylesWithRootClass('dot-select', readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning);
+  const getOption = option => {
+    return typeof option === 'string' ? option : option.option;
+  };
+  const getValue = option => {
+    return typeof option === 'string' ? option : (option === null || option === void 0 ? void 0 : option.value) || option.option;
+  };
+  return jsxs("div", {
+    className: className,
+    children: [persistentLabel && jsx(DotInputLabel, {
+      disabled,
+      error,
+      id,
+      label,
+      required
+    }), jsx(StyledTextField, {
+      InputProps: {
+        startAdornment: startIcon && jsx(StyledAdornment, {
+          className: `${adornmentIconClassName} start`,
+          position: "start",
+          children: startIcon
+        }),
+        endAdornment: endAdornment && jsx(StyledAdornment, {
+          className: `${adornmentIconClassName} end`,
+          position: "end",
+          children: endAdornment
+        })
+      },
+      SelectProps: {
+        native: !readOnly,
+        readOnly,
+        open: readOnly ? false : undefined
+      },
+      "aria-label": ariaLabel || label,
+      autoFocus: autoFocus,
+      className: rootStyles,
+      defaultValue: defaultValue,
+      disabled: disabled,
+      error: error,
+      fullWidth: fullWidth,
+      helperText: helperText,
+      id: id,
+      InputLabelProps: {
+        shrink: shrink
+      },
+      inputProps: {
+        'aria-label': ariaLabel,
+        'data-pendoid': dataPendoId,
+        'data-testid': dataTestId,
+        className: inputStyles,
+        readOnly
+      },
+      inputRef: inputRef,
+      label: persistentLabel ? null : label,
+      multiline: false,
+      name: name,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      required: required,
+      role: "textbox",
+      select: true,
+      size: size,
+      value: value,
+      variant: "outlined",
+      children: options.map(option => jsx("option", {
+        className: "dot-option",
+        value: getValue(option),
+        children: getOption(option)
+      }, getValue(option)))
+    })]
+  });
+};
+
+const StyledDashboardDialog = styled(DotDialog)`
+  ${({
+  theme
+}) => css`
+    .dot-text-field {
+      margin-bottom: ${theme.spacing(2)};
+      width: 40vw;
+    }
+    .dot-autocomplete {
+      margin-top: ${theme.spacing(1.5)};
+    }
+    .dot-input-select {
+      margin-bottom: ${theme.spacing(2)};
+    }
+  `}
+`;
+const StyledDialogActions = styled(DialogActions)`
+  padding-right: 0;
+`;
+
+const DashboardAppTypeOptions = [
+// Matches target_app values in Dashboard model
+{
+  option: 'Agility',
+  value: 'AGILITY'
+}, {
+  option: 'Release',
+  value: 'RELEASE'
+}, {
+  option: 'Deploy',
+  value: 'DEPLOY'
+}, {
+  option: 'Continuous Testing',
+  value: 'CONTINUOUSTEST'
+}, {
+  option: 'TeamForge',
+  value: 'TEAMFORGE'
+}];
+const initialFormState = {
+  categories: [],
+  description: '',
+  name: ''
+};
+const DASHBOARD_NAME_MAX_LENGTH = 250;
+const DASHBOARD_DESCRIPTION_MAX_LENGTH = 250;
+function DotDashboardDialog({
+  availableCategories,
+  copyDashboard,
+  editDashboard,
+  open,
+  onClose,
+  onSubmit,
+  onContinue,
+  title
+}) {
+  const [isDirty, setIsDirty] = useState(false);
+  const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
+  const [nameError, setNameError] = useState(null);
+  const [formValues, setFormValues] = useState(initialFormState);
+  const {
+    categories,
+    description,
+    name
+  } = formValues;
+  const {
+    searchDashboards
+  } = useDotMetadataApiContext();
+  const {
     cancelablePromise
   } = useCancelablePromise();
   useEffect(() => {
@@ -9707,277 +10515,18 @@ function DotDashboardDialog({
           disabled: isLoadingSubmit || !isDirty,
           onClick: handleSubmitEditExit,
           type: "outlined",
-          children: "Save and exit"
-        }), jsx(DotButton, {
-          "data-testid": "save-edit-continue-dashboard-button",
-          disabled: isLoadingSubmit,
-          onClick: handleSubmitEditContinue,
-          type: "primary",
-          children: isDirty ? 'Save and continue' : 'Continue'
-        })]
-      })
-    })]
-  });
-}
-
-const getSnackbarTitleFromSeverity = severity => {
-  switch (severity) {
-    case 'success':
-      return 'Success';
-    case 'warning':
-      return 'Warning';
-    case 'error':
-      return 'Error';
-    case 'info':
-      return 'Info';
-    default:
-      return 'Success';
-  }
-};
-function getErrorText(error) {
-  var _a, _b;
-  if ('status' in error && error.status === 304) {
-    return 'No changes made';
-  } else if ('body' in error) {
-    return ((_b = (_a = error.body) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message) ? error.body.error.message : 'Unexpected API error';
-  } else if ('message' in error) {
-    return error.message;
-  }
-  return 'Unexpected API error';
-}
-
-function addAutoHideDuration(severity) {
-  return severity === 'error' ? null : 10000;
-}
-
-const rootClassName$F = 'dot-snackbar';
-const StyledSnackbar = styled(Snackbar)`
-  ${({
-  theme,
-  width,
-  $anchorOriginTop
-}) => css`
-    &.${rootClassName$F} {
-      .MuiAlert-message {
-        word-break: break-word;
-      }
-      .${rootClassName$1c} {
-        align-items: flex-start;
-      }
-      &.MuiSnackbar-anchorOriginTopLeft,
-      &.MuiSnackbar-anchorOriginTopCenter,
-      &.MuiSnackbar-anchorOriginTopRight {
-        top: ${$anchorOriginTop}px;
-        z-index: ${levelFourth};
-      }
-
-      .dot-snackbar-actions {
-        display: flex;
-        align-items: center;
-        margin-top: ${theme.spacing(1)};
-        gap: ${theme.spacing(2)};
-
-        .primary-action-btn {
-          background-color: transparent;
-        }
-      }
-
-      .MuiAlert-root {
-        max-width: ${width ? 'unset' : '500px'};
-        min-width: ${width ? 'unset' : '344px'};
-        z-index: ${levelFourth};
-      }
-    }
-  `}
-`;
-
-const DEFAULT_ANCHOR_ORIGIN = {
-  vertical: 'top',
-  horizontal: 'right'
-};
-const DotSnackbar = ({
-  anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
-  anchorOriginTop = 108,
-  ariaLabel,
-  autoHideDuration,
-  children,
-  className,
-  'data-testid': dataTestId,
-  hideOnClickAway = true,
-  onClose,
-  open,
-  primaryAction,
-  secondaryAction,
-  severity,
-  width
-}) => {
-  const hasActions = !!(primaryAction || secondaryAction);
-  const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
-  const handleSnackbarClose = reason => {
-    if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
-      onClose();
-    }
-  };
-  return jsx(StyledSnackbar, {
-    anchorOrigin: anchorOrigin,
-    "$anchorOriginTop": anchorOriginTop,
-    "aria-label": ariaLabel,
-    autoHideDuration: calculatedAutoHideDuration,
-    classes: {
-      root: rootClasses
-    },
-    "data-testid": dataTestId,
-    onClose: (_e, r) => handleSnackbarClose(r),
-    open: open,
-    severity: severity,
-    width: width,
-    children: jsx("div", {
-      children: jsx(DotAlertBanner, {
-        severity: severity,
-        width: width,
-        onClose: _e => handleSnackbarClose(),
-        children: jsxs("div", {
-          children: [jsx(DotTypography, {
-            variant: "subtitle2",
-            noMarginBottom: false,
-            children: getSnackbarTitleFromSeverity(severity)
-          }), isString$2(children) ? jsx(DotTypography, {
-            ariaLabel: severity,
-            variant: "body1",
-            children: children
-          }) : jsx("span", {
-            "aria-label": severity,
-            children: children
-          }), hasActions && jsxs("div", {
-            className: "dot-snackbar-actions",
-            children: [primaryAction && jsx(DotButton, {
-              className: "primary-action-btn",
-              "data-testid": "primary-action-btn",
-              onClick: primaryAction.onClick,
-              size: "small",
-              type: "outlined",
-              children: primaryAction.label
-            }), secondaryAction && jsx(DotLink, {
-              "data-testid": "secondary-action-link",
-              href: secondaryAction.href,
-              color: "inherit",
-              children: secondaryAction.label
-            })]
-          })]
-        })
-      })
-    })
-  });
-};
-
-const rootClassName$E = 'dot-snackbar-container';
-const StyledSnackbarContainer = styled.div`
-  ${() => css`
-    &.${rootClassName$E} {
-      position: absolute;
-      top: 0;
-      width: 250px;
-      height: auto;
-      right: 0;
-      & > div {
-        position: relative;
-      }
-    }
-  `}
-`;
-
-const DotSnackbarContext = createContext({
-  alerts: [],
-  enqueueMessage: (_message, _severity, _autoHideDuration, _primaryAction, _secondaryAction) => null,
-  removeMessage: _id => null
-});
-const DotSnackbarContainer = ({
-  hideOnClickAway
-}) => {
-  const {
-    alerts,
-    removeMessage
-  } = useDotSnackbarContext();
-  function handleClose(id) {
-    return () => {
-      removeMessage(id);
-    };
-  }
-  return jsx(StyledSnackbarContainer, {
-    className: rootClassName$E,
-    children: jsx("div", {
-      className: rootClassName$E,
-      "data-testid": rootClassName$E,
-      children: alerts.slice().reverse().map(alert => {
-        return jsx(DotSnackbar, {
-          autoHideDuration: alert.autoHideDuration,
-          hideOnClickAway: hideOnClickAway,
-          onClose: handleClose(alert.id),
-          open: alert.open,
-          severity: alert.severity,
-          primaryAction: alert.primaryAction,
-          secondaryAction: alert.secondaryAction,
-          children: alert.message
-        }, alert.id);
+          children: "Save and exit"
+        }), jsx(DotButton, {
+          "data-testid": "save-edit-continue-dashboard-button",
+          disabled: isLoadingSubmit,
+          onClick: handleSubmitEditContinue,
+          type: "primary",
+          children: isDirty ? 'Save and continue' : 'Continue'
+        })]
       })
-    })
-  });
-};
-const DotSnackbarProvider = ({
-  children,
-  hideOnClickAway = true
-}) => {
-  const [alerts, setAlerts] = useState([]);
-  function enqueueMessage(message, severity, autoHideDuration, primaryAction, secondaryAction) {
-    const id = CreateUUID();
-    const queue = {
-      id,
-      message,
-      severity,
-      open: true,
-      autoHideDuration,
-      primaryAction,
-      secondaryAction
-    };
-    setAlerts(prevState => {
-      return [...prevState, Object.assign({}, queue)];
-    });
-    return id;
-  }
-  const removeMessage = id => {
-    setAlerts(prev => {
-      return prev.map(a => {
-        return a.id === id ? Object.assign(Object.assign({}, a), {
-          open: false
-        }) : a;
-      });
-    });
-  };
-  const DotSnackbarValues = {
-    alerts,
-    enqueueMessage,
-    removeMessage
-  };
-  const memoizedValues = useMemo(() => DotSnackbarValues, [alerts]);
-  return jsxs(DotSnackbarContext.Provider, {
-    value: memoizedValues,
-    children: [jsx(DotSnackbarContainer, {
-      hideOnClickAway: hideOnClickAway
-    }), children]
+    })]
   });
-};
-const useDotSnackbarContext = () => {
-  return useContext(DotSnackbarContext);
-};
-const useEnqueueErrorMessage = error => {
-  const {
-    enqueueMessage
-  } = useDotSnackbarContext();
-  useEffect(() => {
-    error && enqueueMessage(getErrorText(error), 'error');
-  }, [error]);
-};
+}
 
 const InlineMessage = styled(DotTypography)`
   ${({
@@ -10374,8 +10923,14 @@ function DotDashboardPublishConfirm({
 }
 
 const StyledDotMenu = styled(DotMenu)`
-  ${() => css`
+  ${({
+  theme
+}) => css`
     z-index: 9999;
+
+    .dot-link .dot-icon {
+      margin-right: ${theme.spacing(1)};
+    }
   `}
 `;
 
@@ -10384,7 +10939,8 @@ function DotDashboardOptionsMenu({
   isEdit = false,
   onStartDuplicate,
   onStartStatusChange,
-  onViewMode
+  onViewMode,
+  onDetails
 }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
@@ -10458,6 +11014,21 @@ function DotDashboardOptionsMenu({
       onclick: handleDuplicateClick
     });
   }
+  if (onDetails) {
+    menuItems.push({
+      children: jsxs(DotLink, {
+        ariaLabel: "Dashboard details",
+        color: "inherit",
+        onClick: () => onDetails(dashboard),
+        underline: "none",
+        children: [jsx(DotIcon, {
+          iconId: "file-lines"
+        }), " Details"]
+      }),
+      key: 'dashboard-details',
+      onClick: () => onDetails(dashboard)
+    });
+  }
   return menuItems.length > 0 ? jsxs(Fragment, {
     children: [jsx(DotIconButton, {
       className: "expand-button",
@@ -10564,7 +11135,8 @@ function DotDashboardActions({
   onFavorite,
   onStatusChanged,
   onDuplicated,
-  onViewMode
+  onViewMode,
+  onDetails
 }) {
   // NOTE:  useState functions need to stay at the top of the file so that
   // they are evaluated before any context imports. If they are evaluated
@@ -10573,7 +11145,8 @@ function DotDashboardActions({
   const [dashboardToPublish, setDashboardToPublish] = useState(null);
   const [dashboardToUnpublish, setDashboardToUnpublish] = useState(null);
   const {
-    duplicateDashboard
+    duplicateDashboard,
+    setOpenedDashboardDetails
   } = useDotMetadataApiContext();
   const handlePublishConfirm = useCallback(publishedDashboard => {
     setDashboardToPublish(null);
@@ -10635,7 +11208,8 @@ function DotDashboardActions({
       isEdit: isEdit,
       onViewMode: onViewMode,
       onStartStatusChange: handleStartStatusChangeIfConfig,
-      onStartDuplicate: handleStartDuplicateIfConfig
+      onStartDuplicate: handleStartDuplicateIfConfig,
+      onDetails: () => setOpenedDashboardDetails(dashboard)
     }), jsx(CloseButton, {
       dashboard: dashboard,
       onClose: onClose
@@ -10703,7 +11277,7 @@ function DotDashboardHeader({
   });
 }
 
-const rootClassName$D = 'dot-empty-state';
+const rootClassName$C = 'dot-empty-state';
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -10738,9 +11312,9 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
-const rootClassName$C = 'dot-illustration';
+const rootClassName$B = 'dot-illustration';
 const StyledIllustration = styled.span`
-  &.${rootClassName$C} {
+  &.${rootClassName$B} {
     display: inline-block;
   }
 `;
@@ -10757,16 +11331,16 @@ const DotIllustration = ({
   tooltip,
   tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
   return jsx(DotTooltip, {
     title: tooltip,
     placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$C}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$B}-tooltip`,
     children: jsx(StyledIllustration, {
       "aria-hidden": "false",
       "aria-label": ariaLabel || title || 'Illustration',
       className: rootClasses,
-      "data-testid": dataTestId || rootClassName$C,
+      "data-testid": dataTestId || rootClassName$B,
       role: ariaRole,
       children: jsx("img", {
         alt: alt || 'Illustration',
@@ -10791,7 +11365,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -10872,20 +11446,20 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$M} {
+      .${rootClassName$O} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$B = 'dot-date-picker';
+const rootClassName$A = 'dot-date-picker';
 const popperClassName = 'dot-date-picker-popper';
 const containerClassName$2 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
 const StyledDatePickerContainer = styled.div`
   ${() => css`
-    &.${rootClassName$B} .full-width {
+    &.${rootClassName$A} .full-width {
       width: 100%;
     }
   `}
@@ -10894,7 +11468,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$B} {
+    &.${rootClassName$A} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -10934,7 +11508,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$A = 'dot-time-picker';
+const rootClassName$z = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
 const TIME_SELECTION_WIDTH_SPACING = 14.5;
@@ -11005,7 +11579,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$A} {
+    &.${rootClassName$z} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -11024,36 +11598,36 @@ const StyledTimePicker = styled(TimePicker)`
   `}
 `;
 
-const rootClassName$z = 'dot-form';
+const rootClassName$y = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$y} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$K},
-        .${rootClassName$M},
-        .${rootClassName$1e},
+      .${rootClassName$M},
+        .${rootClassName$O},
+        .${rootClassName$1g},
         .${rootSelectClassName},
-        .${rootClassName$B},
-        .${rootClassName$A} {
+        .${rootClassName$A},
+        .${rootClassName$z} {
         margin: ${theme.spacing(1, 0)};
       }
 
       label
-        + .${rootClassName$1e},
+        + .${rootClassName$1g},
         label
         + .${rootSelectClassName},
         label
-        + .${rootClassName$B},
+        + .${rootClassName$A},
         label
-        + .${rootClassName$A} {
+        + .${rootClassName$z} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$J}, .${groupClassName} {
-        .${rootClassName$M} {
+      .${rootClassName$L}, .${groupClassName} {
+        .${rootClassName$O} {
           margin: 0;
         }
       }
@@ -11068,7 +11642,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -11081,10 +11655,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$y = 'dot-dynamic-form';
+const rootClassName$x = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$y} {
+    &.${rootClassName$x} {
     }
   `}
 `;
@@ -11264,12 +11838,12 @@ const checkIfFormDataValid = formState => {
   return true;
 };
 
-const rootClassName$x = 'dot-progress-button';
+const rootClassName$w = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$x} {
+    &.${rootClassName$w} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -11294,7 +11868,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$x,
+  'data-pendoid': dataPendoId = rootClassName$w,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -11307,7 +11881,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -11336,12 +11910,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$w = 'dot-radio';
+const rootClassName$v = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$w} {
+    &.${rootClassName$v} {
       padding: 8px;
 
       svg {
@@ -11359,7 +11933,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$M,
+  'data-pendoid': dataPendoId = rootClassName$O,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -11372,7 +11946,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -11380,7 +11954,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$w
+      root: rootClassName$v
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -11426,7 +12000,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -11491,7 +12065,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$v = 'dot-switch';
+const rootClassName$u = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -11520,7 +12094,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$v,
+  'data-pendoid': dataPendoId = rootClassName$u,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -11530,7 +12104,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -11560,7 +12134,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$M,
+    className: rootClassName$O,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -11881,7 +12455,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
   // Memoize this operation so that is doesn't get executed each time this
   // component re-renders
   const initialFormState = useMemo(() => getInitialFormState(config, liveValidation), [config, liveValidation, getInitialFormState]);
@@ -12127,7 +12701,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$u = 'dot-inline-edit';
+const rootClassName$t = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -12139,7 +12713,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$t} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -12351,7 +12925,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$u,
+  'data-pendoid': dataPendoId = rootClassName$t,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -12384,7 +12958,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$t, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -12563,13 +13137,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$t = 'dot-navigation-rail';
+const rootClassName$s = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$s} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -12616,7 +13190,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -12667,154 +13241,6 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$s = 'dot-pill';
-const StyledPill = styled(Chip)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$s} {
-      background-color: ${({
-  backgroundcolor,
-  variant
-}) => {
-  const defaultBackground = variant === 'filled' ? theme.palette.grey[200] : theme.palette.grey[50];
-  return backgroundcolor !== null && backgroundcolor !== void 0 ? backgroundcolor : defaultBackground;
-}};
-      border-color: ${({
-  bordercolor
-}) => {
-  return bordercolor ? bordercolor : theme.palette.grey[200];
-}};
-      color: ${({
-  labelcolor
-}) => {
-  return labelcolor ? labelcolor : theme.palette.layer.n700;
-}};
-      .dot-icon {
-        color: ${({
-  labelcolor
-}) => {
-  return labelcolor ? labelcolor : theme.palette.grey.main;
-}};
-        margin: ${theme.spacing(0, -0.5, 0, 1)};
-      }
-
-      &.MuiChip-sizeSmall .dot-icon {
-        margin-left: 5px;
-      }
-
-      &.MuiChip-outlined {
-        &.error {
-          background-color: ${theme.palette.error[50]};
-          border-color: ${theme.palette.error.main};
-          color: ${theme.palette.layer.n700};
-          .dot-icon {
-            color: ${theme.palette.error.main};
-          }
-        }
-
-        &.success {
-          background-color: ${theme.palette.figma.success.light};
-          border-color: ${theme.palette.figma.success.normal};
-          color: ${theme.palette.layer.n700};
-          .dot-icon {
-            color: ${theme.palette.success.main};
-          }
-        }
-
-        &.warning {
-          background-color: ${theme.palette.figma.warning.light};
-          border-color: ${theme.palette.figma.warning.normal};
-          color: ${theme.palette.layer.n700};
-          .dot-icon {
-            color: ${theme.palette.warning.main};
-          }
-        }
-
-        &.in-progress {
-          background-color: ${theme.palette.figma.primary.light};
-          border-color: ${theme.palette.figma.primary.normal};
-          color: ${theme.palette.layer.n700};
-          .dot-icon {
-            color: ${theme.palette.primary.main};
-          }
-        }
-      }
-
-      &.MuiChip-filled {
-        &.error {
-          background-color: ${theme.palette.error.main};
-          border-color: ${theme.palette.error.main};
-          color: ${theme.palette.layer.n0};
-          .dot-icon {
-            color: ${theme.palette.layer.n0};
-          }
-        }
-
-        &.success {
-          background-color: ${theme.palette.success.main};
-          border-color: ${theme.palette.success.main};
-          color: ${theme.palette.layer.n0};
-          .dot-icon {
-            color: ${theme.palette.layer.n0};
-          }
-        }
-
-        &.warning {
-          background-color: ${theme.palette.warning.main};
-          border-color: ${theme.palette.warning.main};
-          color: ${theme.palette.layer.n700};
-          .dot-icon {
-            color: ${theme.palette.layer.n700};
-          }
-        }
-
-        &.in-progress {
-          background-color: ${theme.palette.primary.main};
-          border-color: ${theme.palette.primary.main};
-          color: ${theme.palette.layer.n0};
-          .dot-icon {
-            color: ${theme.palette.layer.n0};
-          }
-        }
-      }
-    }
-  `}
-`;
-
-const DotPill = ({
-  ariaLabel,
-  backgroundcolor,
-  bordercolor,
-  className,
-  'data-testid': dataTestId,
-  icon,
-  label,
-  labelcolor,
-  onClick,
-  size = 'medium',
-  status = 'default',
-  variant = 'filled'
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$s, className, status);
-  return jsx(StyledPill, {
-    "aria-label": ariaLabel,
-    bordercolor: bordercolor,
-    backgroundcolor: backgroundcolor,
-    classes: {
-      root: rootClasses
-    },
-    clickable: !!onClick,
-    "data-testid": dataTestId,
-    icon: icon,
-    label: label,
-    labelcolor: labelcolor,
-    onClick: onClick,
-    size: size,
-    variant: variant
-  });
-};
-
 const rootClassName$r = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
@@ -15759,7 +16185,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -15999,7 +16425,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$B,
+  'data-pendoid': dataPendoId = rootClassName$A,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -16039,7 +16465,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -16258,7 +16684,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$A,
+  'data-pendoid': dataPendoId = rootClassName$z,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -16290,7 +16716,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$A, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -17389,4 +17815,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, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, 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, 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 };