@digital-ai/dot-components 3.8.2 → 3.10.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import React__default, { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
@@ -104,12 +104,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$1a = 'dot-icon';
+const rootClassName$1g = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1g} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -146,7 +146,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -207,7 +207,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$19 = 'dot-accordion';
+const rootClassName$1f = '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$19} .${summaryClassName} {
+    &.${rootClassName$1f} .${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$19,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -274,7 +274,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -390,7 +390,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$18 = 'dot-text-field';
+const rootClassName$1e = '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$18} {
+    &.${rootClassName$1e} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -482,7 +482,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$18} {
+    &.${rootSelectClassName}, &.${rootClassName$1e} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -573,15 +573,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$17 = 'dot-action-toolbar';
+const rootClassName$1d = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$1d} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$18} .MuiInputBase-root {
+      .${rootClassName$1e} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -595,7 +595,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1226,7 +1226,8 @@ const typographyOptions = {
     fontFamily: 'LatoBold, sans-serif',
     fontSize: 14,
     lineHeight: '20px',
-    letterSpacing: '0.03em'
+    letterSpacing: '0.03em',
+    fontWeight: 700
   },
   body1: {
     fontSize: 14,
@@ -1664,12 +1665,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$16 = 'dot-alert-banner';
+const rootClassName$1c = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$1c} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1704,7 +1705,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$16,
+  'data-pendoid': dataPendoId = rootClassName$1c,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1712,7 +1713,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2390,7 +2391,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$15 = 'dot-avatar';
+const rootClassName$1b = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2400,7 +2401,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$1b} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2512,7 +2513,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2551,12 +2552,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$14 = 'dot-button';
+const rootClassName$1a = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$1a} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2640,7 +2641,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$14,
+  'data-pendoid': dataPendoId = rootClassName$1a,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2656,7 +2657,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   let color;
   let variant;
   switch (type) {
@@ -2680,7 +2681,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
-    "data-testid": `${dataTestId || rootClassName$14}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1a}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2689,7 +2690,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$14,
+      "data-testid": dataTestId || rootClassName$1a,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2708,10 +2709,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$13 = 'dot-link';
+const rootClassName$19 = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$19} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2727,7 +2728,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$19,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2739,7 +2740,7 @@ const DotLink = ({
   tooltip,
   underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -2789,7 +2790,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$12 = 'dot-list';
+const rootClassName$18 = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2797,7 +2798,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$12} {
+      &.${rootClassName$18} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2880,12 +2881,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$11 = 'dot-progress';
+const rootClassName$17 = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$17} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -2936,7 +2937,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3002,35 +3003,38 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$10 = 'dot-popper';
+const rootClassName$16 = 'dot-popper';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$16} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
     }
 
-    &.${rootClassName$10}, &.${rootClassName$10} > .dot-popper-paper {
+    &.${rootClassName$16}, &.${rootClassName$16} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$$ = 'dot-menu';
-const getListMaxHeight = maxHeight => isString$2(maxHeight) ? maxHeight : `${maxHeight}px`;
+const rootClassName$15 = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$16} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$$}, &.${rootClassName$10} {
+    &.${rootClassName$15}, &.${rootClassName$16} {
+      .MuiPaper-root {
+        border: 1px solid ${theme.palette.layer.n100};
+      }
+
       &.loading .MuiPaper-root {
         align-items: center;
         display: flex;
@@ -3100,19 +3104,20 @@ const StyledPopper = styled(Popper)`
     }
   `}
 `;
+const getListMaxHeight = maxHeight => isString$2(maxHeight) ? maxHeight : `${maxHeight}px`;
 
 const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$_ = 'dot-ul';
+const rootClassName$14 = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$14} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3208,7 +3213,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3319,7 +3324,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3407,12 +3412,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$Z = 'dot-drawer';
+const rootClassName$13 = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} .MuiBackdrop-root {
+    &.${rootClassName$13} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3431,12 +3436,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$Y = 'dot-drawer-header';
+const rootClassName$12 = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$12} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3447,13 +3452,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$X = 'dot-icon-btn';
+const rootClassName$11 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$11} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3512,7 +3517,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$11,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3525,7 +3530,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$X, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3560,7 +3565,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3577,10 +3582,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$W = 'dot-drawer-body';
+const rootClassName$10 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$10} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3601,7 +3606,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3616,12 +3621,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$V = 'dot-drawer-footer';
+const rootClassName$$ = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$$} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3634,7 +3639,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3650,7 +3655,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$Z,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3673,7 +3678,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, 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';
@@ -3755,6 +3760,14 @@ const styledListItemElement = elementType => {
     theme
   }) => css`
       &.${listItemRootClass} {
+        &.open {
+          .dot-typography {
+            font-weight: bold;
+          }
+
+          background-color: ${theme.palette.figma.primary.light};
+        }
+
         & > span:first-of-type {
           display: flex;
           width: 100%;
@@ -3926,6 +3939,7 @@ const DotListItem = ({
   isOpened = false,
   onClick,
   onKeyDown,
+  onHrefClick,
   onMenuLeave,
   items = [],
   menuPlacement,
@@ -3974,9 +3988,9 @@ const DotListItem = ({
     children: text
   });
   const renderListItemEndIcon = () => {
-    if (hasChildren || !endIcon) {
+    if (hasChildren && !endIcon) {
       return jsx(DotIcon, {
-        iconId: hasChildren && getChevronIcon(nestedListType, navIsOpened)
+        iconId: getChevronIcon(nestedListType, navIsOpened)
       });
     }
     return endIcon;
@@ -3985,6 +3999,7 @@ const DotListItem = ({
     ariaLabel: ariaLabel || tooltip,
     className: listItemLinkClassName,
     href: href,
+    onClick: onHrefClick,
     target: target,
     underline: "none",
     children: [startIcon && jsx(ListItemIcon, {
@@ -4007,7 +4022,7 @@ const DotListItem = ({
       onClick: !isLink ? handleClick : null,
       onKeyDown: onKeyDown,
       role: ariaRole,
-      selected: isFlyout ? navIsOpened : selected,
+      selected: isFlyout ? false : selected,
       tabIndex: isLink ? -1 : 0,
       target: target,
       children: jsx(DotTooltip, {
@@ -4061,7 +4076,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const [listItemIndex, setListItemIndex] = useState(null);
@@ -4071,6 +4086,9 @@ const DotList = ({
   const handleClickAway = () => {
     setListItemIndex(null);
   };
+  const handleHrefClick = index => () => {
+    updateSelectedListItem(index);
+  };
   return jsx(DotClickAwayListener, {
     onClickAway: handleClickAway,
     children: jsxs(StyledList, {
@@ -4136,6 +4154,7 @@ const DotList = ({
           nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
           nestedListType: nestedListType,
           onClick: determineOnClick,
+          onHrefClick: item.href ? handleHrefClick(index) : undefined,
           onMenuLeave: handleMenuLeave,
           primaryText: item.primaryText,
           secondaryText: item.secondaryText,
@@ -4151,12 +4170,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$U = 'dot-copy-button';
+const rootClassName$_ = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} .copied-to-clipboard {
+    &.${rootClassName$_} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4182,7 +4201,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$U,
+  'data-pendoid': dataPendoId = rootClassName$_,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4230,7 +4249,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$U,
+    className: rootClassName$_,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4319,7 +4338,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$18,
+  'data-pendoid': dataPendoId = rootClassName$1e,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4365,7 +4384,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$18, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1e, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4501,10 +4520,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$T = 'dot-search-input';
+const rootClassName$Z = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$Z} {
     }
   `}
 `;
@@ -4521,7 +4540,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4777,12 +4796,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$S = 'dot-app-switcher';
+const rootClassName$Y = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$Y} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -4892,7 +4911,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5270,12 +5289,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$R = 'dot-sidebar';
+const rootClassName$X = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$R} {
+    &.${rootClassName$X} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5428,7 +5447,7 @@ const StyledSidebar = styled.aside`
           }
 
           &:hover {
-            background-color: ${theme.palette.figma.overlay.table.highlights};
+            background-color: ${theme.palette.figma.overlay.table.hoverRow};
             color: ${theme.palette.figma.toggleTabs.text};
 
             .dot-typography,
@@ -5569,10 +5588,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$Q = 'dot-truncate-with-tooltip';
+const rootClassName$W = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$W} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5603,7 +5622,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5726,7 +5745,7 @@ const DotSidebar = ({
     };
   }, [isOpen]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$R, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5794,12 +5813,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$P = 'dot-badge';
+const rootClassName$V = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$V} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5834,7 +5853,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5856,7 +5875,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$O = 'dot-app-toolbar';
+const rootClassName$U = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5896,7 +5915,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$O} {
+    &.${rootClassName$U} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6018,7 +6037,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6148,14 +6167,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$N = 'dot-autocomplete';
+const rootClassName$T = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$T} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6168,8 +6187,8 @@ const StyledAutocomplete = styled(Autocomplete)`
 
       .${inputRootClassName} {
         /* Override only top/bottom, but preserve left/right padding */
-        padding-top: ${theme.spacing(0)};
-        padding-bottom: ${theme.spacing(0)};
+        padding-top: ${theme.spacing(1)};
+        padding-bottom: ${theme.spacing(1)};
       }
 
       .dot-chip:first-child {
@@ -6192,12 +6211,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$M = 'dot-chip';
+const rootClassName$S = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$S} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6303,7 +6322,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$M,
+  'data-pendoid': dataPendoId = rootClassName$S,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6316,7 +6335,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6416,7 +6435,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$N,
+  'data-pendoid': dataPendoId = rootClassName$T,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6468,10 +6487,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$N, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$18, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1e, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
-  const popperClasses = useStylesWithRootClass(rootClassName$10, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$16, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -6748,10 +6767,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$L = 'dot-avatar-group';
+const rootClassName$R = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$L} {
+      &.${rootClassName$R} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6770,7 +6789,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6785,13 +6804,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$K = 'dot-breadcrumbs';
+const rootClassName$Q = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$Q} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6811,7 +6830,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$Q} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7139,7 +7158,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$K,
+        root: rootClassName$Q,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7170,14 +7189,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$J = 'dot-button-toggle';
+const rootClassName$P = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$P} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7293,7 +7312,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$J,
+  'data-pendoid': dataPendoId = rootClassName$P,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7303,7 +7322,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7386,12 +7405,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$I = 'dot-card';
+const rootClassName$O = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$O} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7403,7 +7422,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7432,12 +7451,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$H = 'dot-card-footer';
+const rootClassName$N = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$N} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7449,7 +7468,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7493,9 +7512,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$G = 'dot-form-control-label';
+const rootClassName$M = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$G} {
+  &.${rootClassName$M} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -7518,12 +7537,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$F = 'dot-checkbox';
+const rootClassName$L = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$F} {
+    &.${rootClassName$L} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -7542,7 +7561,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$G,
+  'data-pendoid': dataPendoId = rootClassName$M,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7557,14 +7576,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$F
+      root: rootClassName$L
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -7593,13 +7612,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$E = 'dot-form-group';
+const rootClassName$K = '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$E} {
+  &.${rootClassName$K} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -7630,7 +7649,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$D = 'dot-checkbox-group';
+const rootClassName$J = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -7639,13 +7658,17 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$D} {
+      .${rootClassName$J} {
         width: 100%;
       }
 
       .MuiFormLabel-root {
         display: inline;
         width: 100%;
+        font-weight: ${theme.typography.subtitle2.fontWeight};
+        &:not(.Mui-error) {
+          color: ${theme.palette.figma.typography.black};
+        }
       }
 
       .MuiFormHelperText-root {
@@ -7662,7 +7685,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$G} {
+        .${rootClassName$M} {
           margin: 0;
         }
       }
@@ -7670,13 +7693,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$C = 'dot-form-group';
+const rootClassName$I = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$C} > * {
+    &.${rootClassName$I} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -7689,7 +7712,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7728,7 +7751,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$E, rootClassName$D, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, rootClassName$J, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -7813,12 +7836,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$B = 'dot-dialog';
+const rootClassName$H = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$B} {
+    &.${rootClassName$H} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -7864,7 +7887,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$B,
+  'data-pendoid': dataPendoId = rootClassName$H,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -7877,7 +7900,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   useEffect(() => {
@@ -7995,7 +8018,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$A = 'dot-grid';
+const rootClassName$G = '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`};
@@ -8047,7 +8070,7 @@ const Grid = ({
   className,
   children
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   return jsx("div", {
     className: rootClasses,
     children: children
@@ -8066,7 +8089,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$A} {
+    &.${rootClassName$G} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -9726,18 +9749,18 @@ function addAutoHideDuration(severity) {
   return severity === 'error' ? null : 10000;
 }
 
-const rootClassName$z = 'dot-snackbar';
+const rootClassName$F = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$F} {
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$16} {
+      .${rootClassName$1c} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -9789,7 +9812,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -9847,10 +9870,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$y = 'dot-snackbar-container';
+const rootClassName$E = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$y} {
+    &.${rootClassName$E} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -9881,10 +9904,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$y,
+    className: rootClassName$E,
     children: jsx("div", {
-      className: rootClassName$y,
-      "data-testid": rootClassName$y,
+      className: rootClassName$E,
+      "data-testid": rootClassName$E,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoHideDuration: alert.autoHideDuration,
@@ -10679,7 +10702,7 @@ function DotDashboardHeader({
   });
 }
 
-const rootClassName$x = 'dot-empty-state';
+const rootClassName$D = 'dot-empty-state';
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -10714,9 +10737,9 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
-const rootClassName$w = 'dot-illustration';
+const rootClassName$C = 'dot-illustration';
 const StyledIllustration = styled.span`
-  &.${rootClassName$w} {
+  &.${rootClassName$C} {
     display: inline-block;
   }
 `;
@@ -10733,16 +10756,16 @@ const DotIllustration = ({
   tooltip,
   tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
   return jsx(DotTooltip, {
     title: tooltip,
     placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$w}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$C}-tooltip`,
     children: jsx(StyledIllustration, {
       "aria-hidden": "false",
       "aria-label": ariaLabel || title || 'Illustration',
       className: rootClasses,
-      "data-testid": dataTestId || rootClassName$w,
+      "data-testid": dataTestId || rootClassName$C,
       role: ariaRole,
       children: jsx("img", {
         alt: alt || 'Illustration',
@@ -10767,7 +10790,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -10848,20 +10871,20 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$G} {
+      .${rootClassName$M} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$v = 'dot-date-picker';
+const rootClassName$B = '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$v} .full-width {
+    &.${rootClassName$B} .full-width {
       width: 100%;
     }
   `}
@@ -10870,7 +10893,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$B} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -10910,7 +10933,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$u = 'dot-time-picker';
+const rootClassName$A = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
 const TIME_SELECTION_WIDTH_SPACING = 14.5;
@@ -10981,7 +11004,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$A} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -11000,36 +11023,36 @@ const StyledTimePicker = styled(TimePicker)`
   `}
 `;
 
-const rootClassName$t = 'dot-form';
+const rootClassName$z = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$z} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$E},
-        .${rootClassName$G},
-        .${rootClassName$18},
+      .${rootClassName$K},
+        .${rootClassName$M},
+        .${rootClassName$1e},
         .${rootSelectClassName},
-        .${rootClassName$v},
-        .${rootClassName$u} {
+        .${rootClassName$B},
+        .${rootClassName$A} {
         margin: ${theme.spacing(1, 0)};
       }
 
       label
-        + .${rootClassName$18},
+        + .${rootClassName$1e},
         label
         + .${rootSelectClassName},
         label
-        + .${rootClassName$v},
+        + .${rootClassName$B},
         label
-        + .${rootClassName$u} {
+        + .${rootClassName$A} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$D}, .${groupClassName} {
-        .${rootClassName$G} {
+      .${rootClassName$J}, .${groupClassName} {
+        .${rootClassName$M} {
           margin: 0;
         }
       }
@@ -11044,7 +11067,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -11057,10 +11080,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$s = 'dot-dynamic-form';
+const rootClassName$y = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$y} {
     }
   `}
 `;
@@ -11240,12 +11263,12 @@ const checkIfFormDataValid = formState => {
   return true;
 };
 
-const rootClassName$r = 'dot-progress-button';
+const rootClassName$x = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$r} {
+    &.${rootClassName$x} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -11270,7 +11293,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$r,
+  'data-pendoid': dataPendoId = rootClassName$x,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -11283,7 +11306,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$r, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -11312,12 +11335,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$q = 'dot-radio';
+const rootClassName$w = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$w} {
       padding: 8px;
 
       svg {
@@ -11335,7 +11358,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$G,
+  'data-pendoid': dataPendoId = rootClassName$M,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -11348,7 +11371,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -11356,7 +11379,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$q
+      root: rootClassName$w
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -11402,7 +11425,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -11467,7 +11490,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$p = 'dot-switch';
+const rootClassName$v = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -11496,7 +11519,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$p,
+  'data-pendoid': dataPendoId = rootClassName$v,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -11506,7 +11529,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -11536,7 +11559,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$G,
+    className: rootClassName$M,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -11857,7 +11880,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$y, 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]);
@@ -12103,7 +12126,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$o = 'dot-inline-edit';
+const rootClassName$u = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -12115,7 +12138,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$u} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -12327,7 +12350,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$o,
+  'data-pendoid': dataPendoId = rootClassName$u,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -12360,7 +12383,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -12539,13 +12562,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$n = 'dot-navigation-rail';
+const rootClassName$t = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$t} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -12592,7 +12615,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -12643,12 +12666,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$m = 'dot-pill';
+const rootClassName$s = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$m} {
+    &.${rootClassName$s} {
       background-color: ${({
   backgroundcolor,
   variant
@@ -12767,11 +12790,12 @@ const DotPill = ({
   icon,
   label,
   labelcolor,
+  onClick,
   size = 'medium',
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -12779,22 +12803,23 @@ const DotPill = ({
     classes: {
       root: rootClasses
     },
-    clickable: false,
+    clickable: !!onClick,
     "data-testid": dataTestId,
     icon: icon,
     label: label,
     labelcolor: labelcolor,
+    onClick: onClick,
     size: size,
     variant: variant
   });
 };
 
-const rootClassName$l = 'dot-skeleton';
+const rootClassName$r = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$r} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -12809,7 +12834,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$r, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -12824,12 +12849,12 @@ const DotSkeleton = ({
   });
 };
 
-const rootClassName$k = 'dot-split-button-group';
+const rootClassName$q = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$q} {
       &.outlined,
       &.text {
         .expand-button {
@@ -12896,7 +12921,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$k,
+  'data-pendoid': dataPendoId = rootClassName$q,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -12911,7 +12936,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$k, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$q, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -12977,14 +13002,14 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$j = 'dot-stepper';
+const rootClassName$p = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$j} {
+    &.${rootClassName$p} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -13257,7 +13282,7 @@ const DotStepper = ({
   const displayFinalContent = finalContent && currentStep > steps.length;
   const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
   const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
-  const rootClasses = useStylesWithRootClass(rootClassName$j, stepsPosition, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$p, stepsPosition, className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
@@ -13456,12 +13481,12 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$i = 'dot-table-pagination-custom-actions';
+const rootClassName$o = 'dot-table-pagination-custom-actions';
 const StyledTablePaginationCustomActions = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$i} {
+    &.${rootClassName$o} {
       margin-left: ${theme.spacing(2.5)};
       display: flex;
       align-items: center;
@@ -13585,7 +13610,7 @@ const DotTablePaginationCustomActions = props => {
     });
   };
   return jsxs(StyledTablePaginationCustomActions, {
-    className: rootClassName$i,
+    className: rootClassName$o,
     children: [jsx(DotIconButton, {
       ariaLabel: "previous page",
       className: "page-control-button",
@@ -13632,7 +13657,7 @@ const DotTablePaginationCustomActions = props => {
   });
 };
 
-const rootClassName$h = 'dot-table-pagination';
+const rootClassName$n = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -13640,7 +13665,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$h} {
+    .${rootClassName$n} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -13683,7 +13708,7 @@ const DotTablePagination = ({
   showJumpToPageActionButton = false,
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$h, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -13692,7 +13717,7 @@ const DotTablePagination = ({
   };
   return (/* Container is used to pass 'typography' prop to a styled component */
     jsx(StyledTablePagination, {
-      className: rootClassName$h,
+      className: rootClassName$n,
       typography: typography,
       children: jsx(TablePagination, {
         ActionsComponent: showJumpToPageActionButton ? DotTablePaginationCustomActions : undefined,
@@ -13719,12 +13744,12 @@ const DotTablePagination = ({
   );
 };
 
-const rootClassName$g = 'dot-table';
+const rootClassName$m = 'dot-table';
 const StyledPaper = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$g} {
+    &.${rootClassName$m} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -13793,10 +13818,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$f = 'dot-tbody';
+const rootClassName$l = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$f} {
+    &.${rootClassName$l} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -13944,12 +13969,12 @@ const parseCellMaxWidth = width => {
   return width;
 };
 
-const rootClassName$e = 'dot-td';
+const rootClassName$k = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$e} {
+    &.${rootClassName$k} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -14044,7 +14069,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$e, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$k, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -14109,12 +14134,12 @@ const EmptyDotRow = ({
   }, CreateUUID());
 };
 
-const rootClassName$d = 'dot-tr';
+const rootClassName$j = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$d} {
+    &.${rootClassName$j} {
       &.selected {
         background: ${theme.palette.figma.overlay.table.highlights};
 
@@ -14143,12 +14168,12 @@ const StyledTableRowStyles = styled(TableRow)`
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$c = 'dot-th-checkbox';
+const rootClassName$i = 'dot-th-checkbox';
 const StyledTableHeaderCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$c} {
+    &.${rootClassName$i} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
@@ -14167,7 +14192,7 @@ const DotHeaderCheckboxCell = ({
   multiSelectState,
   onCheckAllChange
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
   const [checkboxState, setCheckboxState] = useState('unchecked');
   useEffect(() => {
     setCheckboxState(multiSelectState);
@@ -14198,12 +14223,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$b = 'dot-th';
+const rootClassName$h = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$b} {
+    &.${rootClassName$h} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -14262,7 +14287,7 @@ const DotHeaderCell = ({
   return jsx(StyledTableHeaderCell, {
     align: align,
     classes: {
-      root: rootClassName$b
+      root: rootClassName$h
     },
     sortDirection: sortable ? sortDirection : undefined,
     style: headerCellStyle,
@@ -14534,12 +14559,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$a = 'dot-td-checkbox';
+const rootClassName$g = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$a} {
+    &.${rootClassName$g} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -14558,7 +14583,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$g, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -14610,7 +14635,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$d, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$j, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -14727,7 +14752,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$f
+        root: rootClassName$l
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -14742,12 +14767,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$9 = 'dot-table-selection-toolbar';
+const rootClassName$f = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$9} {
+    &.${rootClassName$f} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -14805,7 +14830,7 @@ const DotTableSelectionToolbar = ({
   onClearAll,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$9, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$f, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -14899,7 +14924,7 @@ const DotTable = ({
     return onUpdateData ? data : stableSort(data, getComparator(order, orderBy));
   };
   const [pageData, setPageData] = useState(getSortedData().slice(0, rowsPerPage ? rowsPerPage : data.length));
-  const rootClasses = useStylesWithRootClass(rootClassName$g, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$m, className, loading ? 'loading' : '');
   const updateData = (newOrder, newOrderBy, newPage, newRowsPerPage) => {
     const newData = stableSort(data, getComparator(newOrder, newOrderBy));
     setPageData(newRowsPerPage ? newData.slice(newPage * newRowsPerPage, newPage * newRowsPerPage + newRowsPerPage) : newData);
@@ -15097,7 +15122,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$8 = 'dot-table-actions';
+const rootClassName$e = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -15180,7 +15205,7 @@ const DotTableActions = ({
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$8,
+      className: rootClassName$e,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -15204,12 +15229,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$7 = 'dot-tabs';
+const rootClassName$d = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$7} {
+    &.${rootClassName$d} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -15254,7 +15279,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$7,
+  'data-pendoid': dataPendoId = rootClassName$d,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -15263,7 +15288,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$7, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$d, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -15317,9 +15342,9 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$6 = 'dot-file-upload';
-const containerClassName = `${rootClassName$6}-container`;
-const dropZoneClassName = `${rootClassName$6}-drop-zone`;
+const rootClassName$c = 'dot-file-upload';
+const containerClassName = `${rootClassName$c}-container`;
+const dropZoneClassName = `${rootClassName$c}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
@@ -15339,7 +15364,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$6}.${dropZoneClassName} {
+    &.${rootClassName$c}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -15370,12 +15395,12 @@ const StyledFileUpload = styled.div`
   `}
 `;
 
-const rootClassName$5 = 'dot-file-list-item';
+const rootClassName$b = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$5} {
+    &.${rootClassName$b} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -15387,7 +15412,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$5}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$b}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -15397,7 +15422,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$5}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$b}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -15439,7 +15464,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$5, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$b, className, error ? 'file-error' : 'file-success');
   const defaultIcon = error ? 'error-solid' : 'check-solid';
   const [endIcon, setEndIcon] = useState(defaultIcon);
   const handleItemClick = clickedFile => _event => onClick === null || onClick === void 0 ? void 0 : onClick(clickedFile);
@@ -15472,7 +15497,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$5}-end-icon`,
+      className: `${rootClassName$b}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -15596,7 +15621,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$6,
+  'data-pendoid': dataPendoId = rootClassName$c,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -15609,7 +15634,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$6, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$c, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
   const maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
   const allowMultiple = maxFiles === undefined || maxFiles > 1;
   const setNewlyUploadedFiles = (acceptedFiles, fileRejections) => {
@@ -15681,12 +15706,12 @@ const DotFileUpload = ({
   });
 };
 
-const rootClassName$4 = 'dot-divider';
+const rootClassName$a = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$4} {
+    &.${rootClassName$a} {
       color: ${theme.palette.figma.border.darker};
 
       .MuiDivider-light {
@@ -15706,7 +15731,7 @@ const DotDivider = ({
   orientation,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$4, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
   return jsx(StyledDivider, {
     absolute: absolute,
     "aria-label": ariaLabel,
@@ -15733,7 +15758,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -15787,14 +15812,14 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const rootClassName$3 = 'dot-draggable-list';
+const rootClassName$9 = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
   ${({
   theme,
   draggableHandle
 }) => css`
-    &.${rootClassName$3} {
+    &.${rootClassName$9} {
       padding: ${theme.spacing(1, 0)};
       position: relative;
 
@@ -15829,7 +15854,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$3,
+  'data-pendoid': dataPendoId = rootClassName$9,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -15838,7 +15863,7 @@ const DotDraggableList = ({
   rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
   width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$3, className, draggableHandle ? 'with-draggable-handle' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$9, className, draggableHandle ? 'with-draggable-handle' : '');
   const listItemClasses = useStylesWithRootClass(listItemClassName, draggableHandle && !disableDrag ? 'with-handle-grab-cursor' : '', draggableHandle || disableDrag ? 'with-default-cursor' : '');
   const listWidth = isNumber(width) ? `${width}px` : width;
   const [orderedItems, setOrderedItems] = useState([]);
@@ -15885,12 +15910,12 @@ const DotDraggableList = ({
   });
 };
 
-const rootClassName$2 = 'dot-linear-progress';
+const rootClassName$8 = 'dot-linear-progress';
 const StyledLinearProgress = styled(LinearProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$2} {
+    &.${rootClassName$8} {
       &.MuiLinearProgress-colorError {
         color: ${theme.palette.figma.inProgress.error};
       }
@@ -15922,7 +15947,7 @@ const DotLinearProgress = ({
   valueBuffer,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$2, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$8, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
@@ -15973,7 +15998,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$v,
+  'data-pendoid': dataPendoId = rootClassName$B,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -16013,7 +16038,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$B, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -16232,7 +16257,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$u,
+  'data-pendoid': dataPendoId = rootClassName$A,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -16264,7 +16289,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -16556,13 +16581,13 @@ const DotTimePicker = ({
   });
 };
 
-const rootClassName$1 = 'dot-carousel';
+const rootClassName$7 = 'dot-carousel';
 const StyledCarousel = styled.div`
   ${({
   backgroundColor,
   theme
 }) => css`
-    &.${rootClassName$1} {
+    &.${rootClassName$7} {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -16661,7 +16686,7 @@ const DotCarousel = ({
   progressIndicator,
   showPagesButtons = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1, className, backgroundColor ? 'with-background-color' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$7, className, backgroundColor ? 'with-background-color' : '');
   const rightNavigationButtonClasses = useStylesWithRootClass('carousel-right-arrow', displayNavigationButtons);
   const leftNavigationButtonClasses = useStylesWithRootClass('carousel-left-arrow', displayNavigationButtons);
   const createUuids = () => {
@@ -16812,13 +16837,13 @@ const DotCarousel = ({
   });
 };
 
-const rootClassName = 'dot-sticky-with-border';
+const rootClassName$6 = 'dot-sticky-with-border';
 const StyledStickyWithBorder = styled.div`
   ${({
   pinnedStickyBorder,
   unpinnedStickyBorder
 }) => css`
-    &.${rootClassName} {
+    &.${rootClassName$6} {
       position: sticky;
       top: -1px;
 
@@ -16846,7 +16871,7 @@ const DotStickyWithBorder = ({
 }) => {
   const [isPinned, setIsPinned] = useState(false);
   const ref = useRef();
-  const rootClasses = useStylesWithRootClass(rootClassName, className, isPinned ? 'pinned' : 'unpinned');
+  const rootClasses = useStylesWithRootClass(rootClassName$6, className, isPinned ? 'pinned' : 'unpinned');
   useEffect(() => {
     const element = ref.current;
     const observer = new IntersectionObserver(([e]) => setIsPinned(e.intersectionRatio < 1), {
@@ -16868,4 +16893,499 @@ const DotStickyWithBorder = ({
   });
 };
 
-export { ApiError$1 as ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, 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, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };
+const rootClassName$5 = 'dot--board';
+const classNames$5 = {
+  root: rootClassName$5,
+  spacingNormal: `${rootClassName$5}-normal`,
+  spacingDense: `${rootClassName$5}-dense`,
+  loading: `${rootClassName$5}-loading`
+};
+const StyledBoard = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$5} {
+      display: flex;
+      overflow-x: auto;
+      flex: 1;
+      max-height: calc(100vh - ${theme.spacing(4)});
+    }
+
+    @media (max-width: 650px) {
+      &.${rootClassName$5} {
+        justify-content: center;
+      }
+    }
+
+    &.${classNames$5.spacingNormal} {
+      gap: ${theme.spacing(1)};
+    }
+
+    &.${classNames$5.spacingDense} {
+      gap: ${theme.spacing(0.5)};
+    }
+  `}
+`;
+const StyledLoadingIndicator = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${classNames$5.loading} {
+      position: absolute;
+      background-color: rgba(255, 255, 255, 0.644);
+      /*dim the background*/
+      width: 100%;
+      height: 100%;
+      color: black;
+      text-align: center;
+      z-index: 1000;
+
+      > span {
+        position: 'absolute'
+        top: 30%;
+        left: 50%;
+        -webkit-transform: translate(-30%, -50%);
+        transform: translate(-30%, -50%);
+      }
+    }
+  `}
+`;
+
+const BoardStatusContext = createContext({
+  spacing: 'normal'
+});
+const useBoardStatus = () => useContext(BoardStatusContext);
+const BoardStatusProvider = ({
+  children,
+  spacing
+}) => {
+  return jsx(BoardStatusContext.Provider, {
+    value: {
+      spacing: spacing
+    },
+    children: children
+  });
+};
+
+/**
+ * A flexible framework component for creating a  board.
+ * Subcomponents may be used or omitted as desired
+ * `useBoardStatus` can be used to get state information about the board
+ */
+const Board = React__default.forwardRef(({
+  ariaLabel,
+  'data-testid': dataTestId,
+  children,
+  className,
+  loading = false,
+  spacing = 'normal',
+  style
+}, ref) => {
+  const classNameBySpacing = {
+    normal: classNames$5.spacingNormal,
+    dense: classNames$5.spacingDense
+  };
+  const spacingClassName = classNameBySpacing[spacing];
+  const rootClasses = useStylesWithRootClass(classNames$5.root, spacingClassName, className);
+  const loadingIndicator = jsx(StyledLoadingIndicator, {
+    "data-testid": `${dataTestId}-loading`,
+    className: classNames$5.loading,
+    children: jsx("span", {
+      children: jsx(DotProgress, {
+        tooltip: "Loading Data...",
+        color: "primary",
+        variant: "indeterminate",
+        ariaLabel: "Loading..."
+      })
+    })
+  });
+  if (loading) return loadingIndicator;
+  return jsx(StyledBoard, {
+    "aria-label": ariaLabel,
+    style: style,
+    "data-testid": dataTestId,
+    className: rootClasses,
+    ref: ref,
+    children: jsx(BoardStatusProvider, {
+      spacing: spacing,
+      children: children
+    })
+  });
+});
+
+const rootClassName$4 = 'dot--board-column';
+const classNames$4 = {
+  root: rootClassName$4,
+  spacingNormal: `${rootClassName$4}-normal`,
+  spacingDense: `${rootClassName$4}-dense`,
+  collapse: `${rootClassName$4}-collapse`
+};
+const StyledBoardColumn = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$4} {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-height: ${theme.spacing(31)};
+      background-color: ${theme.palette.figma.background.level0.bckgGray};
+      border-radius: ${theme.spacing(0.5)};
+      margin-bottom: ${theme.spacing(0.5)}
+      flex: 1;
+    }
+
+    &.${classNames$4.collapse} {
+      width: fit-content;
+      min-width: fit-content;
+      max-width: ${theme.spacing(2)};
+    }
+
+    &.${classNames$4.spacingNormal} {
+      width: ${theme.spacing(42)};
+      min-width: ${theme.spacing(42)};
+    }
+
+    &.${classNames$4.spacingDense} {
+      min-width: ${theme.spacing(31)};
+      max-width: ${theme.spacing(42)};
+      width: auto;
+    }
+  `}
+`;
+
+const BoardColumnStatusContext = createContext({
+  collapsed: false,
+  setCollapsed: () => {
+    return;
+  }
+});
+const useColumnStatus = () => useContext(BoardColumnStatusContext);
+const ColumnStatusProvider = ({
+  children,
+  onCollapseToggle
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  useEffect(() => {
+    if (onCollapseToggle) onCollapseToggle(isCollapsed);
+  }, [isCollapsed]);
+  return jsx(BoardColumnStatusContext.Provider, {
+    value: {
+      collapsed: isCollapsed,
+      setCollapsed: setIsCollapsed
+    },
+    children: children
+  });
+};
+
+/**
+ * Represents a single column in the board.
+ * useColumnStatus can be used to get state information about the column
+ */
+const BoardColumn = React__default.forwardRef(({
+  ariaLabel,
+  'data-testid': dataTestId,
+  children,
+  className,
+  style
+}, ref) => {
+  const classNameBySpacing = {
+    normal: classNames$4.spacingNormal,
+    dense: classNames$4.spacingDense
+  };
+  const {
+    spacing
+  } = useBoardStatus();
+  const [spacingClassName, setSpacingClassName] = useState(classNameBySpacing[spacing]);
+  const rootClasses = useStylesWithRootClass(classNames$4.root, spacingClassName, className);
+  const handleCollapseToggle = isCollapsed => {
+    const className = isCollapsed ? classNames$4.collapse : classNameBySpacing[spacing];
+    setSpacingClassName(className);
+  };
+  return jsx(StyledBoardColumn, {
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    className: rootClasses,
+    style: style,
+    ref: ref,
+    children: jsx(ColumnStatusProvider, {
+      onCollapseToggle: handleCollapseToggle,
+      children: children
+    })
+  });
+});
+
+const rootClassName$3 = 'dot--board-column-header';
+const classNames$3 = {
+  root: rootClassName$3,
+  spacingNormal: `${rootClassName$3}-normal`,
+  spacingDense: `${rootClassName$3}-dense`,
+  colorBar: `${rootClassName$3}-color-bar`,
+  title: `${rootClassName$3}-title`
+};
+const StyledBoardColumnHeader = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${classNames$3.root} {
+      display: flex;
+      flex-direction: column;
+    }
+
+    > .${classNames$3.colorBar} {
+      height: ${theme.spacing(0.5)};
+      width: 100%;
+    }
+
+    > .${classNames$3.title} {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &.${classNames$3.spacingNormal} > .${classNames$3.title} {
+      padding: ${theme.spacing(1)};
+    }
+
+    &.${classNames$3.spacingDense} > .${classNames$3.title} {
+      padding: ${theme.spacing(0.5)};
+    }
+  `}
+`;
+
+/**
+ * Header for the column. Expects lineBarHexColor to have the form: "#XXXXXX"
+ */
+const BoardColumnHeader = ({
+  ariaLabel,
+  'data-testid': dataTestId,
+  children,
+  className,
+  lineBarHexColor,
+  style
+}) => {
+  const classNameBySpacing = {
+    normal: classNames$3.spacingNormal,
+    dense: classNames$3.spacingDense
+  };
+  const {
+    spacing
+  } = useBoardStatus();
+  const spacingClassName = classNameBySpacing[spacing];
+  const rootClasses = useStylesWithRootClass(classNames$3.root, spacingClassName, className);
+  return jsxs(StyledBoardColumnHeader, {
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    className: rootClasses,
+    style: style,
+    children: [jsx("div", {
+      className: classNames$3.colorBar,
+      style: {
+        background: lineBarHexColor || 'inherit'
+      }
+    }), jsx("div", {
+      className: classNames$3.title,
+      children: children
+    })]
+  });
+};
+
+const rootClassName$2 = 'dot--board-column-items';
+const classNames$2 = {
+  root: rootClassName$2,
+  spacingNormal: `${rootClassName$2}-normal`,
+  spacingDense: `${rootClassName$2}-dense`
+};
+const StyledBoardColumnItems = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${classNames$2.root} {
+      overflow-y: auto;
+      height: 100%;
+      display: flex;
+      gap: ${theme.spacing(0.5)};
+      flex-direction: column;
+    }
+
+    &.${classNames$2.spacingNormal} {
+      padding: 0 ${theme.spacing(1)};
+    }
+
+    &.${classNames$2.spacingDense} {
+      padding: 0 ${theme.spacing(0.5)};
+    }
+  `}
+`;
+
+/**
+ * Container for items within a column
+ */
+const BoardColumnItems = ({
+  ariaLabel,
+  'data-testid': dataTestId,
+  children,
+  className,
+  style
+}) => {
+  const classNameBySpacing = {
+    normal: classNames$2.spacingNormal,
+    dense: classNames$2.spacingDense
+  };
+  const {
+    spacing
+  } = useBoardStatus();
+  const spacingClassName = classNameBySpacing[spacing];
+  const rootClasses = useStylesWithRootClass(classNames$2.root, spacingClassName, className);
+  return jsx(StyledBoardColumnItems, {
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    className: rootClasses,
+    style: style,
+    children: children
+  });
+};
+
+const rootClassName$1 = 'dot--board-column-action-bar';
+const classNames$1 = {
+  root: rootClassName$1,
+  spacingNormal: `${rootClassName$1}-normal`,
+  spacingDense: `${rootClassName$1}-dense`
+};
+const StyledBoardColumnActionBar = styled(DotActionToolbar)`
+  ${({
+  theme
+}) => css`
+    &.${classNames$1.root} {
+      display: flex;
+      justify-content: space-around;
+    }
+
+    &.${classNames$1.spacingNormal} {
+      padding: 0 ${theme.spacing(1)};
+    }
+
+    &.${classNames$1.spacingDense} {
+      padding: 0;
+    }
+  `}
+`;
+
+/*
+  Represents an action bar within the column.
+ */
+const BoardColumnActionBar = ({
+  ariaLabel,
+  'data-testid': dataTestId,
+  children,
+  className
+}) => {
+  const classNameBySpacing = {
+    normal: classNames$1.spacingNormal,
+    dense: classNames$1.spacingDense
+  };
+  const {
+    spacing
+  } = useBoardStatus();
+  const spacingClassName = classNameBySpacing[spacing];
+  const rootClasses = useStylesWithRootClass(classNames$1.root, spacingClassName, className);
+  return jsx(StyledBoardColumnActionBar, {
+    ariaLabel: ariaLabel,
+    "data-testid": dataTestId,
+    className: rootClasses,
+    children: children
+  });
+};
+
+/**
+ * Optional component. Displays any children when the column is expanded.
+ */
+const BoardColumnExpand = ({
+  children
+}) => {
+  const {
+    collapsed
+  } = useColumnStatus();
+  return useMemo(() => collapsed ? null : children, [children, collapsed]);
+};
+
+/**
+ * Optional component. Displays any children when the column is collapsed.
+ */
+const BoardColumnCollapse = ({
+  children
+}) => {
+  const {
+    collapsed
+  } = useColumnStatus();
+  return useMemo(() => collapsed ? children : null, [children, collapsed]);
+};
+
+const rootClassName = 'dot--board-column-header';
+const classNames = {
+  root: rootClassName,
+  spacingNormal: `${rootClassName}-normal`,
+  spacingDense: `${rootClassName}-dense`,
+  title: `${rootClassName}-title`,
+  text: `${rootClassName}-text`
+};
+const StyledBoardColumnSummary = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${classNames.root} {
+      height: 100%;
+      padding: 0 ${theme.spacing(1)};
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+      overflow-y: hidden;
+    }
+
+    > .${classNames.title} {
+      display: inline-block;
+	    margin-bottom: ${theme.spacing(1)};
+    }
+
+    > .${classNames.text} {
+      font-weight: 600;
+      color: #667385
+    }
+  `}
+`;
+
+/**
+ * A summary component for a a column. Displays test verticially instead of horizonally.
+ */
+const BoardColumnSummary = ({
+  ariaLabel,
+  'data-testid': dataTestId,
+  className,
+  style,
+  text,
+  title
+}) => {
+  const classNameBySpacing = {
+    normal: classNames.spacingNormal,
+    dense: classNames.spacingDense
+  };
+  const {
+    spacing
+  } = useBoardStatus();
+  const spacingClassName = classNameBySpacing[spacing];
+  const rootClasses = useStylesWithRootClass(classNames.root, spacingClassName, className);
+  return jsxs(StyledBoardColumnSummary, {
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    className: rootClasses,
+    style: style,
+    children: [jsx(DotTypography, {
+      className: classNames.title,
+      variant: "h4",
+      children: title
+    }), jsx("span", {
+      className: classNames.text,
+      children: text
+    })]
+  });
+};
+
+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 };