@digital-ai/dot-components 4.26.1 → 4.28.0

package/index.esm.js

@@ -1390,7 +1390,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1p = 'dot-text-field';
+const rootClassName$1q = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
@@ -1466,7 +1466,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1p} {
+    &.${rootClassName$1q} {
       .MuiInputBase-root {
         margin-bottom: 0;
 
@@ -1550,7 +1550,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1p} {
+    &.${rootSelectClassName}, &.${rootClassName$1q} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -1655,13 +1655,13 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1o = 'dot-icon';
+const rootClassName$1p = 'dot-icon';
 const aiIconClassName = 'dot-icon-ai';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1o} {
+    &.${rootClassName$1p} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -1711,7 +1711,7 @@ const DotIcon = ({
   tooltip,
   ai = false
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1o, className, ai ? aiIconClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1p, className, ai ? aiIconClassName : '');
   return jsx(DotTooltip, {
     disableInteractive: disableInteractive,
     childrenDisplayStyle: "inline-block",
@@ -1735,7 +1735,7 @@ const DotIcon = ({
   });
 };
 
-const rootClassName$1n = 'dot-accordion';
+const rootClassName$1o = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -1746,7 +1746,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1n} .${summaryClassName} {
+    &.${rootClassName$1o} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -1791,7 +1791,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1n,
+  'data-pendoid': dataPendoId = rootClassName$1o,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -1802,7 +1802,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1o, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -1853,15 +1853,15 @@ const DotAccordion = ({
   });
 };
 
-const rootClassName$1m = 'dot-action-toolbar';
+const rootClassName$1n = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1m} {
+    &.${rootClassName$1n} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1p} .MuiInputBase-root {
+      .${rootClassName$1q} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -1875,7 +1875,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1m, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1885,12 +1885,12 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$1l = 'dot-alert-banner';
+const rootClassName$1m = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1l} {
+    &.${rootClassName$1m} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1925,7 +1925,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1l,
+  'data-pendoid': dataPendoId = rootClassName$1m,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1933,7 +1933,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1l, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1m, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -1976,12 +1976,12 @@ const DotAppLogo = ({
   });
 };
 
-const rootClassName$1k = 'dot-annotation';
+const rootClassName$1l = 'dot-annotation';
 const StyledAnnotation = styled.kbd`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1l} {
       font-family: inherit;
       background-color: ${theme.palette.figma.background.level0.bckgGray};
       color: ${theme.palette.figma.typography.disabled};
@@ -2007,13 +2007,13 @@ const StyledAnnotation = styled.kbd`
 
 const DotAnnotation = ({
   ariaLabel,
-  'data-pendoid': dataPendoId = rootClassName$1k,
+  'data-pendoid': dataPendoId = rootClassName$1l,
   'data-testid': dataTestId,
   className,
   content,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, className, type === 'secondary' ? 'secondary' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1l, className, type === 'secondary' ? 'secondary' : '');
   return jsx(StyledAnnotation, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -2658,7 +2658,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1j = 'dot-avatar';
+const rootClassName$1k = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2668,7 +2668,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1k} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2781,7 +2781,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2822,12 +2822,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1i = 'dot-button';
+const rootClassName$1j = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1j} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2980,7 +2980,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1i,
+  'data-pendoid': dataPendoId = rootClassName$1j,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -2998,7 +2998,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   let color;
   let variant;
   switch (type) {
@@ -3029,7 +3029,7 @@ const DotButton = forwardRef(({
   }
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
-    "data-testid": `${dataTestId || rootClassName$1i}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1j}-tooltip`,
     disableInteractive: disableInteractive,
     placement: tooltipPlacement,
     title: tooltip,
@@ -3041,7 +3041,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1i,
+      "data-testid": dataTestId || rootClassName$1j,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -3061,10 +3061,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1h = 'dot-link';
+const rootClassName$1i = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1i} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -3080,7 +3080,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1h,
+  'data-pendoid': dataPendoId = rootClassName$1i,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -3093,7 +3093,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -3144,7 +3144,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1g = 'dot-list';
+const rootClassName$1h = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -3152,7 +3152,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1g} {
+      &.${rootClassName$1h} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -3246,12 +3246,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1f = 'dot-progress';
+const rootClassName$1g = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -3302,7 +3302,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3368,13 +3368,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$1e = 'dot-popper';
+const rootClassName$1f = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3433,7 +3433,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$1e}, &.${rootClassName$1e} > .dot-popper-paper {
+    &.${rootClassName$1f}, &.${rootClassName$1f} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3463,12 +3463,12 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$1d = 'dot-menu';
+const rootClassName$1e = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3478,7 +3478,7 @@ const StyledPopper = styled(Popper)`
 }) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}      
       }
     }
-    &.${rootClassName$1d}, &.${rootClassName$1e} {
+    &.${rootClassName$1e}, &.${rootClassName$1f} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3558,14 +3558,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$1c = 'dot-ul';
+const rootClassName$1d = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1c} {
+    &.${rootClassName$1d} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3667,7 +3667,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3779,7 +3779,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3867,12 +3867,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$1b = 'dot-drawer';
+const rootClassName$1c = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1b} .MuiBackdrop-root {
+    &.${rootClassName$1c} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3891,12 +3891,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$1a = 'dot-drawer-header';
+const rootClassName$1b = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1b} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3907,13 +3907,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$19 = 'dot-icon-btn';
+const rootClassName$1a = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3999,7 +3999,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$19,
+  'data-pendoid': dataPendoId = rootClassName$1a,
   'data-testid': dataTestId,
   disableInteractive,
   disableRipple = false,
@@ -4013,7 +4013,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$19, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     "data-testid": "icon-button-tooltip",
@@ -4050,7 +4050,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -4067,10 +4067,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$18 = 'dot-drawer-body';
+const rootClassName$19 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -4091,7 +4091,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4106,12 +4106,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$17 = 'dot-drawer-footer';
+const rootClassName$18 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$18} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -4124,7 +4124,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -4140,7 +4140,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$1b,
+  'data-pendoid': dataPendoId = rootClassName$1c,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -4163,7 +4163,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, 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';
@@ -4638,7 +4638,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4738,12 +4738,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$16 = 'dot-copy-button';
+const rootClassName$17 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} .copied-to-clipboard {
+    &.${rootClassName$17} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4769,7 +4769,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$16,
+  'data-pendoid': dataPendoId = rootClassName$17,
   'data-testid': dataTestId = 'dot-copy-button',
   disableInteractive,
   disabled = false,
@@ -4818,7 +4818,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$16,
+    className: rootClassName$17,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4925,7 +4925,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1p,
+  'data-pendoid': dataPendoId = rootClassName$1q,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4974,7 +4974,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1p, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1q, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -5117,10 +5117,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$15 = 'dot-search-input';
+const rootClassName$16 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
     }
   `}
 `;
@@ -5137,7 +5137,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -5393,12 +5393,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$14 = 'dot-app-switcher';
+const rootClassName$15 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5508,7 +5508,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5792,15 +5792,15 @@ const DotAppSwitcher = _a => {
 };
 
 var _path$2, _path2$2, _path3, _path4;
-var _excluded$2 = ["title", "titleId"];
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded$b = ["title", "titleId"];
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$3(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoD = function SvgLogoD(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$2(_ref, _excluded$2);
-  return /*#__PURE__*/React$1.createElement("svg", _extends$2({
+    props = _objectWithoutProperties$2(_ref, _excluded$b);
+  return /*#__PURE__*/React$1.createElement("svg", _extends$3({
     width: 26,
     height: 27,
     viewBox: "0 0 26 27",
@@ -5829,15 +5829,15 @@ var SvgLogoD = function SvgLogoD(_ref, ref) {
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgLogoD);
 
 var _path$1, _path2$1;
-var _excluded$1 = ["title", "titleId"];
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded$a = ["title", "titleId"];
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoDigitalAi = function SvgLogoDigitalAi(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1(_ref, _excluded$1);
-  return /*#__PURE__*/React$1.createElement("svg", _extends$1({
+    props = _objectWithoutProperties$1(_ref, _excluded$a);
+  return /*#__PURE__*/React$1.createElement("svg", _extends$2({
     width: 93,
     height: 23,
     viewBox: "0 0 93 23",
@@ -5858,15 +5858,15 @@ var SvgLogoDigitalAi = function SvgLogoDigitalAi(_ref, ref) {
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgLogoDigitalAi);
 
 var _path, _path2;
-var _excluded = ["title", "titleId"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded$9 = ["title", "titleId"];
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React$1.createElement("svg", _extends({
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  return /*#__PURE__*/React$1.createElement("svg", _extends$1({
     width: 100,
     height: 26,
     viewBox: "0 0 100 26",
@@ -5886,12 +5886,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$13 = 'dot-sidebar';
+const rootClassName$14 = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -6185,10 +6185,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$12 = 'dot-truncate-with-tooltip';
+const rootClassName$13 = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -6219,7 +6219,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -6333,7 +6333,7 @@ const DotSidebar = ({
     keys: collapseKeys
   }, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$13, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6408,12 +6408,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$11 = 'dot-badge';
+const rootClassName$12 = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -6448,7 +6448,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -6470,7 +6470,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$10 = 'dot-app-toolbar';
+const rootClassName$11 = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6510,7 +6510,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6639,7 +6639,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6791,12 +6791,12 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$$ = 'dot-chip';
+const rootClassName$10 = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6902,7 +6902,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$$,
+  'data-pendoid': dataPendoId = rootClassName$10,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6916,7 +6916,7 @@ const DotChip = ({
   tooltipProps
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className, errorClass);
   const isTruncated = charactersLimit > 0 && children.length > charactersLimit;
   const getChipLabelWithTooltip = label => jsx(DotTooltip, Object.assign({}, tooltipProps, {
     hoverVisibility: "always",
@@ -6952,7 +6952,7 @@ const DotChip = ({
   });
 };
 
-const rootClassName$_ = 'dot-autocomplete';
+const rootClassName$$ = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const inputAiClassName = 'dot-input-ai';
@@ -6960,7 +6960,7 @@ const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -7066,8 +7066,8 @@ const isEmptyValue = value => {
     return !value;
   }
 };
-const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$_, size === 'medium' && inputMediumClassName, className);
-const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1p, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
+const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$$, size === 'medium' && inputMediumClassName, className);
+const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1q, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
 const getInputRootClassNames = isDense => useStylesWithRootClass(inputRootClassName, !isDense && inputMediumClassName);
 const getDefaultAutoCompleteValue = (hasMultiple, defaultValue) => hasMultiple && isString$2(defaultValue) ? [defaultValue] : defaultValue;
 const getAutoCompleteGroupBy = group => group ? option => option.group : undefined;
@@ -7089,7 +7089,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$_,
+  'data-pendoid': dataPendoId = rootClassName$$,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -7158,7 +7158,7 @@ const DotAutoComplete = ({
   const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), ai ? inputAiClassName : '');
   const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
   const inputRootClasses = getInputRootClassNames(dense);
-  const popperClasses = useStylesWithRootClass(rootClassName$1e, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1f, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -7508,10 +7508,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$Z = 'dot-avatar-group';
+const rootClassName$_ = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$Z} {
+      &.${rootClassName$_} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -7530,7 +7530,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7545,14 +7545,14 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$Y = 'dot-avatar-with-details';
+const rootClassName$Z = 'dot-avatar-with-details';
 const StyledAvatarWithDetails = styled.div`
   ${({
   theme,
   $maxSubtitleLines,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       gap: ${theme.spacing(2)};
       display: flex;
       align-items: center;
@@ -7588,12 +7588,12 @@ const DotAvatarWithDetails = ({
   ariaLabel,
   avatar,
   className,
-  'data-pendoid': dataPendoId = rootClassName$Y,
+  'data-pendoid': dataPendoId = rootClassName$Z,
   'data-testid': dataTestId,
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
   const titleClasses = useStylesWithRootClass('dot-avatar-with-details-title', title.maxLines ? 'max-lines-clamp' : '');
   const subtitleClasses = useStylesWithRootClass('dot-avatar-with-details-subtitle', (subtitle === null || subtitle === void 0 ? void 0 : subtitle.maxLines) ? 'max-lines-clamp' : '');
   return jsxs(StyledAvatarWithDetails, {
@@ -7628,13 +7628,13 @@ const DotAvatarWithDetails = ({
   });
 };
 
-const rootClassName$X = 'dot-breadcrumbs';
+const rootClassName$Y = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -7654,7 +7654,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7982,7 +7982,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$X,
+        root: rootClassName$Y,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -8013,14 +8013,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$W = 'dot-button-toggle';
+const rootClassName$X = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -8143,7 +8143,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$W,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -8153,7 +8153,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -8238,12 +8238,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$V = 'dot-card';
+const rootClassName$W = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -8257,7 +8257,7 @@ const DotCard = ({
   onMouseEnter,
   onMouseLeave
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -8288,12 +8288,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$U = 'dot-card-footer';
+const rootClassName$V = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -8305,7 +8305,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -8314,14 +8314,14 @@ const DotCardFooter = ({
   });
 };
 
-const rootClassName$T = 'dot-card-header';
+const rootClassName$U = 'dot-card-header';
 const StyledCardHeader = styled(CardHeader)`
   ${({
   theme,
   $maxSubheaderLines,
   $maxTitleLines
 }) => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$U} {
       .MuiCardHeader-content {
         overflow-x: hidden;
 
@@ -8359,7 +8359,7 @@ const DotCardHeader = ({
   titleMaxLines = 1,
   titleSize = 'large'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   const nonSmallTitleSize = titleSize === 'medium' ? 'h3' : 'h2';
   const titleVariant = titleSize === 'small' ? 'h4' : nonSmallTitleSize;
   const subheaderVariant = subheaderSize === 'small' ? 'body2' : 'body1';
@@ -8396,9 +8396,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$S = 'dot-form-control-label';
+const rootClassName$T = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$S} {
+  &.${rootClassName$T} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -8421,12 +8421,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$R = 'dot-checkbox';
+const rootClassName$S = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$R} {
+    &.${rootClassName$S} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -8445,7 +8445,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$S,
+  'data-pendoid': dataPendoId = rootClassName$T,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -8460,14 +8460,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$R
+      root: rootClassName$S
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8496,13 +8496,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$Q = 'dot-form-group';
+const rootClassName$R = '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$Q} {
+  &.${rootClassName$R} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -8533,7 +8533,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$P = 'dot-checkbox-group';
+const rootClassName$Q = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -8542,7 +8542,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$P} {
+      .${rootClassName$Q} {
         width: 100%;
       }
 
@@ -8569,7 +8569,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$S} {
+        .${rootClassName$T} {
           margin: 0;
         }
       }
@@ -8577,13 +8577,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$O = 'dot-form-group';
+const rootClassName$P = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$O} > * {
+    &.${rootClassName$P} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -8596,7 +8596,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -8635,7 +8635,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, rootClassName$P, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, rootClassName$Q, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -8720,12 +8720,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$N = 'chip-list';
+const rootClassName$O = 'chip-list';
 const StyledChipList = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$O} {
       display: flex;
       gap: ${theme.spacing(1)};
     }
@@ -8800,19 +8800,19 @@ function DotChipList({
     setChips(itemElements);
   }, [items, maxChars]);
   return jsx(StyledChipList, {
-    className: rootClassName$N,
+    className: rootClassName$O,
     "data-testid": dataTestId,
     style: style,
     children: chips
   });
 }
 
-const rootClassName$M = 'dot-dialog';
+const rootClassName$N = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$N} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -8858,7 +8858,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$M,
+  'data-pendoid': dataPendoId = rootClassName$N,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -8872,7 +8872,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   const hasSecondaryAction = !!secondaryButtonProps;
@@ -9009,7 +9009,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$L = 'dot-grid';
+const rootClassName$M = '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`};
@@ -9069,7 +9069,7 @@ const Grid = ({
   children,
   isLoading
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
   return jsxs("div", {
     className: rootClasses,
     children: [children, isLoading && jsx(DotProgress, {
@@ -9093,7 +9093,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$M} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -9364,12 +9364,12 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$K = 'dot-pill';
+const rootClassName$L = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$L} {
       background-color: ${({
   backgroundcolor,
   variant
@@ -9493,7 +9493,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -9810,7 +9810,7 @@ class DashboardsService {
    * @param isOotbDashboard Boolean match on Dashboard OOTB status.
    * @param lifecycleState String match on Dashboard lifecycle state - 'DRAFT' or 'PUBLISHED'.
    * @param name String match on Dashboard name.
-   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY', 'RELEASE', 'TEAMFORGE', 'CHANGERISKPREDICTION', or APPLICATIONSECURITY.
+   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY', 'RELEASE', 'TEAMFORGE', 'CHANGERISKPREDICTION', 'APPLICATIONSECURITY', or 'SERVICEMGMTPROCESSOPTIMIZATION'.
    * @param viewModified Return dashboards with modified changes if they exist for this user.
    * @returns DashboardViewPagedResponse OK
    * @returns Error Default error response
@@ -10236,7 +10236,7 @@ class DashboardsService {
    * * **Filterable field names**: author_fullname, bi_type, categories, created_dt, description, is_ootb_dashboard, lifecycle_state, name, updated_by_fullname, updated_dt
    * * **Searchable field names**: author_fullname, categories, description, name
    *
-   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY', 'RELEASE', 'TEAMFORGE', 'CHANGERISKPREDICTION', or 'APPLICATIONSECURITY'.
+   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY', 'RELEASE', 'TEAMFORGE', 'CHANGERISKPREDICTION', 'APPLICATIONSECURITY', or 'SERVICEMGMTPROCESSOPTIMIZATION'.
    * @param biType String match on Dashboard bi type - 'MICROSTRATEGY'.
    * @param isOotbDashboard Boolean match on Dashboard OOTB status.
    * @param lifecycleState String match on Dashboard lifecycle state - 'DRAFT' or 'PUBLISHED'.
@@ -10684,7 +10684,8 @@ const getCategoriesMock = {
     RELEASE: ['DevOps COE', 'Engineering Manager', 'Release Manager', 'Platform Engineer', 'Platform Product Manager'],
     TEAMFORGE: ['Scrum Master'],
     CHANGERISKPREDICTION: [],
-    APPLICATIONSECURITY: []
+    APPLICATIONSECURITY: [],
+    SERVICEMGMTPROCESSOPTIMIZATION: []
   }
 };
 const getAuthorsMock = [{
@@ -11100,18 +11101,18 @@ function addAutoHideDuration(severity) {
   return severity === 'error' ? null : 10000;
 }
 
-const rootClassName$J = 'dot-snackbar';
+const rootClassName$K = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$K} {
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1l} {
+      .${rootClassName$1m} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -11164,7 +11165,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -11234,10 +11235,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$I = 'dot-snackbar-container';
+const rootClassName$J = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -11269,10 +11270,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$I,
+    className: rootClassName$J,
     children: jsx("div", {
-      className: rootClassName$I,
-      "data-testid": rootClassName$I,
+      className: rootClassName$J,
+      "data-testid": rootClassName$J,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoCloseOnAction: autoCloseOnAction,
@@ -11346,12 +11347,12 @@ const useEnqueueErrorMessage = error => {
   }, [error]);
 };
 
-const rootClassName$H = 'dot-dashboard-details';
+const rootClassName$I = 'dot-dashboard-details';
 const StyledDashboardDetails = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -11477,7 +11478,7 @@ const DotDashboardDetailsView = ({
   modifiedAuthorUser
 }) => {
   var _a, _b;
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
   const closeHandler = useCallback(event => {
     onClose && onClose(event);
   }, [onClose]);
@@ -11873,6 +11874,9 @@ const DashboardAppTypeOptions = [
 }, {
   option: 'Application Security',
   value: 'APPLICATIONSECURITY'
+}, {
+  option: 'Service Mgmt. Process Optimization',
+  value: 'SERVICEMGMTPROCESSOPTIMIZATION'
 }];
 const initialFormState = {
   categories: [],
@@ -12146,12 +12150,12 @@ function DotDashboardDialog({
   });
 }
 
-const rootClassName$G = 'dot-impact-dialog';
+const rootClassName$H = 'dot-impact-dialog';
 const StyledImpactDialog = styled(DotDialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$H} {
       .high-impact-default-content {
         margin-top: ${theme.spacing(2)};
         margin-bottom: ${theme.spacing(3)};
@@ -12257,7 +12261,7 @@ const DotImpactDialog = ({
     }
     return '';
   }, [action, capitalize, impact, record]);
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   return jsx(StyledImpactDialog, {
     "data-testid": dataTestId,
     className: rootClasses,
@@ -13629,7 +13633,7 @@ function DotDashboardHeader({
   });
 }
 
-const rootClassName$F = 'dot-empty-state';
+const rootClassName$G = 'dot-empty-state';
 const emptyStateImageSizing = {
   xsmall: 9,
   dense: 15,
@@ -13700,9 +13704,9 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
-const rootClassName$E = 'dot-illustration';
+const rootClassName$F = 'dot-illustration';
 const StyledIllustration = styled.span`
-  &.${rootClassName$E} {
+  &.${rootClassName$F} {
     display: inline-block;
   }
 `;
@@ -13719,17 +13723,17 @@ const DotIllustration = ({
   tooltip,
   tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
     title: tooltip,
     placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$E}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$F}-tooltip`,
     children: jsx(StyledIllustration, {
       "aria-hidden": "false",
       "aria-label": ariaLabel || title || 'Illustration',
       className: rootClasses,
-      "data-testid": dataTestId || rootClassName$E,
+      "data-testid": dataTestId || rootClassName$F,
       role: ariaRole,
       children: jsx("img", {
         alt: alt || 'Illustration',
@@ -13755,7 +13759,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: `${rootClasses} ${size}`,
@@ -13836,20 +13840,20 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$S} {
+      .${rootClassName$T} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$D = 'dot-date-picker';
+const rootClassName$E = '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$D} .full-width {
+    &.${rootClassName$E} .full-width {
       width: 100%;
     }
   `}
@@ -13858,7 +13862,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$D} {
+    &.${rootClassName$E} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13900,7 +13904,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$C = 'dot-time-picker';
+const rootClassName$D = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const timePickerPopperClassName = 'dot-time-picker-popper';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
@@ -13920,7 +13924,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$C} {
+    &.${rootClassName$D} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13997,36 +14001,36 @@ const StyledTimePickerPopper = styled(Popper)`
   `}
 `;
 
-const rootClassName$B = 'dot-form';
+const rootClassName$C = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$B} {
+    &.${rootClassName$C} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$Q},
-        .${rootClassName$S},
-        .${rootClassName$1p},
+      .${rootClassName$R},
+        .${rootClassName$T},
+        .${rootClassName$1q},
         .${rootSelectClassName},
-        .${rootClassName$D},
-        .${rootClassName$C} {
+        .${rootClassName$E},
+        .${rootClassName$D} {
         margin: ${theme.spacing(1, 0)};
       }
 
       .${wrapperClassName$2} {
-        + .${rootClassName$1p},
+        + .${rootClassName$1q},
         .${wrapperClassName$2}
         + .${rootSelectClassName},
         .${wrapperClassName$2}
-        + .${rootClassName$D},
+        + .${rootClassName$E},
         .${wrapperClassName$2}
-        + .${rootClassName$C} {
+        + .${rootClassName$D} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$P}, .${groupClassName} {
-        .${rootClassName$S} {
+      .${rootClassName$Q}, .${groupClassName} {
+        .${rootClassName$T} {
           margin: 0;
         }
       }
@@ -14041,7 +14045,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -14054,10 +14058,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$A = 'dot-dynamic-form';
+const rootClassName$B = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$A} {
+    &.${rootClassName$B} {
     }
   `}
 `;
@@ -14237,12 +14241,12 @@ const checkIfFormDataValid = formState => {
   return true;
 };
 
-const rootClassName$z = 'dot-progress-button';
+const rootClassName$A = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$A} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -14267,7 +14271,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$z,
+  'data-pendoid': dataPendoId = rootClassName$A,
   'data-testid': dataTestId,
   disabled = false,
   disableInteractive,
@@ -14281,7 +14285,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -14311,12 +14315,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$y = 'dot-radio';
+const rootClassName$z = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$y} {
+    &.${rootClassName$z} {
       padding: 8px;
 
       svg {
@@ -14334,7 +14338,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$S,
+  'data-pendoid': dataPendoId = rootClassName$T,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -14347,7 +14351,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -14355,7 +14359,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$y
+      root: rootClassName$z
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -14401,7 +14405,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -14466,7 +14470,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$x = 'dot-switch';
+const rootClassName$y = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -14495,7 +14499,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$x,
+  'data-pendoid': dataPendoId = rootClassName$y,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -14505,7 +14509,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -14535,7 +14539,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$S,
+    className: rootClassName$T,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -14856,7 +14860,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$B, 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]);
@@ -15102,7 +15106,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$w = 'dot-inline-edit';
+const rootClassName$x = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -15114,7 +15118,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$w} {
+    &.${rootClassName$x} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -15328,7 +15332,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$w,
+  'data-pendoid': dataPendoId = rootClassName$x,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -15364,7 +15368,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -15552,13 +15556,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$v = 'dot-navigation-rail';
+const rootClassName$w = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$w} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -15617,7 +15621,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -15668,12 +15672,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$u = 'dot-skeleton';
+const rootClassName$v = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$v} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -15688,7 +15692,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -15703,12 +15707,12 @@ const DotSkeleton = ({
   });
 };
 
-const rootClassName$t = 'dot-split-button-group';
+const rootClassName$u = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$u} {
       &.outlined,
       &.text {
         .expand-button {
@@ -15774,7 +15778,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$t,
+  'data-pendoid': dataPendoId = rootClassName$u,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -15790,7 +15794,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -15858,7 +15862,7 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$s = 'dot-stepper';
+const rootClassName$t = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
@@ -15866,7 +15870,7 @@ const StyledStepper = styled.div`
   theme,
   offset
 }) => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$t} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -16181,7 +16185,7 @@ const DotStepper = ({
       return ['left', 'right'].includes(stepsPosition) ? stepsPosition : 'left';
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$s, getStepsPosition(), className);
+  const rootClasses = useStylesWithRootClass(rootClassName$t, getStepsPosition(), className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
@@ -16399,12 +16403,12 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$r = 'dot-table-pagination-custom-actions';
+const rootClassName$s = 'dot-table-pagination-custom-actions';
 const StyledTablePaginationCustomActions = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$r} {
+    &.${rootClassName$s} {
       margin-left: ${theme.spacing(2.5)};
       display: flex;
       align-items: center;
@@ -16528,7 +16532,7 @@ const DotTablePaginationCustomActions = props => {
     });
   };
   return jsxs(StyledTablePaginationCustomActions, {
-    className: rootClassName$r,
+    className: rootClassName$s,
     children: [jsx(DotIconButton, {
       ariaLabel: "previous page",
       className: "page-control-button",
@@ -16575,7 +16579,7 @@ const DotTablePaginationCustomActions = props => {
   });
 };
 
-const rootClassName$q = 'dot-table-pagination';
+const rootClassName$r = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -16583,7 +16587,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$q} {
+    .${rootClassName$r} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -16626,7 +16630,7 @@ const DotTablePagination = ({
   showJumpToPageActionButton = false,
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$r, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -16635,7 +16639,7 @@ const DotTablePagination = ({
   };
   return (/* Container is used to pass 'typography' prop to a styled component */
     jsx(StyledTablePagination, {
-      className: rootClassName$q,
+      className: rootClassName$r,
       typography: typography,
       children: jsx(TablePagination, {
         ActionsComponent: showJumpToPageActionButton ? DotTablePaginationCustomActions : undefined,
@@ -16662,14 +16666,14 @@ const DotTablePagination = ({
   );
 };
 
-const rootClassName$p = 'dot-table';
+const rootClassName$q = 'dot-table';
 const MULTISELECT_COLUMN_WIDTH = 52;
 const COLLAPSIBLE_COLUMN_WIDTH = 42;
 const StyledPaper$1 = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$p} {
+    &.${rootClassName$q} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -16812,10 +16816,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$o = 'dot-tbody';
+const rootClassName$p = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$p} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -17010,12 +17014,12 @@ function stableSort(array, comparator) {
   return stabilizedThis.map(el => el[0]);
 }
 
-const rootClassName$n = 'dot-td';
+const rootClassName$o = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$o} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -17110,7 +17114,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -17178,13 +17182,13 @@ const EmptyDotRow = ({
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$m = 'dot-th-checkbox';
+const rootClassName$n = 'dot-th-checkbox';
 const styledTableHeaderCheckboxElement = (isCell = true) => {
   return styled(isCell ? TableCell : 'div')`
     ${({
     theme
   }) => css`
-      &.${rootClassName$m} {
+      &.${rootClassName$n} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
         padding: ${theme.spacing(0, 1)};
         width: ${theme.spacing(5)};
@@ -17212,7 +17216,7 @@ const DotHeaderCheckboxCell = ({
   isFromTableSelectionToolbar,
   multiSelectHeader
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
   const [multiSelectState, setMultiSelectState] = useState('unchecked');
   const {
     onCheckAllChange,
@@ -17262,12 +17266,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$l = 'dot-th';
+const rootClassName$m = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$m} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -17307,7 +17311,7 @@ const DotHeaderCell = ({
   value,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$l, pinned ? 'dot-pinned-cell' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$m, pinned ? 'dot-pinned-cell' : '', className);
   const headerTitle = isString$2(value) ? value : null;
   const formattedValue = getFormattedTableCellValue(value, typography);
   const getCellValue = () => {
@@ -17398,12 +17402,12 @@ const DotHeaderRow = ({
   });
 };
 
-const rootClassName$k = 'dot-tr';
+const rootClassName$l = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$l} {
       &.selected {
         &,
         .dot-td.dot-pinned-cell,
@@ -17629,12 +17633,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$j = 'dot-td-checkbox';
+const rootClassName$k = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$j} {
+    &.${rootClassName$k} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -17653,7 +17657,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$k, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -17706,7 +17710,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$k, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$l, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -17827,7 +17831,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$o
+        root: rootClassName$p
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -17842,12 +17846,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$i = 'dot-table-selection-toolbar';
+const rootClassName$j = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$i} {
+    &.${rootClassName$j} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -17902,7 +17906,7 @@ const DotTableSelectionToolbar = ({
   multiSelectHeader,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -17988,7 +17992,7 @@ const DotTable = ({
       setPage(page);
     }
   }, [page]);
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$q, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
   const updateData = (newOrder, newOrderBy, newPage, newRowsPerPage) => {
     const newData = stableSort(data, getComparator(newOrder, newOrderBy));
     setPageData(newRowsPerPage ? newData.slice(newPage * newRowsPerPage, newPage * newRowsPerPage + newRowsPerPage) : newData);
@@ -18191,7 +18195,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$h = 'dot-table-actions';
+const rootClassName$i = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -18281,7 +18285,7 @@ const DotTableActions = ({
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$h,
+      className: rootClassName$i,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -18305,12 +18309,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$g = 'dot-tabs';
+const rootClassName$h = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$g} {
+    &.${rootClassName$h} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -18363,7 +18367,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$g,
+  'data-pendoid': dataPendoId = rootClassName$h,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -18372,7 +18376,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$g, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$h, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -18426,9 +18430,9 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$f = 'dot-file-upload';
-const containerClassName = `${rootClassName$f}-container`;
-const dropZoneClassName = `${rootClassName$f}-drop-zone`;
+const rootClassName$g = 'dot-file-upload';
+const containerClassName = `${rootClassName$g}-container`;
+const dropZoneClassName = `${rootClassName$g}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
@@ -18448,7 +18452,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$f}.${dropZoneClassName} {
+    &.${rootClassName$g}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -18480,12 +18484,12 @@ const StyledFileUpload = styled.div`
   `}
 `;
 
-const rootClassName$e = 'dot-file-list-item';
+const rootClassName$f = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$e} {
+    &.${rootClassName$f} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -18497,7 +18501,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$e}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$f}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -18507,7 +18511,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$e}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$f}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -18549,7 +18553,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$e, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$f, 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);
@@ -18582,7 +18586,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$e}-end-icon`,
+      className: `${rootClassName$f}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -18706,7 +18710,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$f,
+  'data-pendoid': dataPendoId = rootClassName$g,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -18719,7 +18723,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$f, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$g, 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) => {
@@ -18791,12 +18795,12 @@ const DotFileUpload = ({
   });
 };
 
-const rootClassName$d = 'dot-divider';
+const rootClassName$e = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$d} {
+    &.${rootClassName$e} {
       color: ${theme.palette.figma.border.darker};
 
       .MuiDivider-light {
@@ -18816,7 +18820,7 @@ const DotDivider = ({
   orientation,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$e, className);
   return jsx(StyledDivider, {
     absolute: absolute,
     "aria-label": ariaLabel,
@@ -18845,7 +18849,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -18910,14 +18914,14 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const rootClassName$c = 'dot-draggable-list';
+const rootClassName$d = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
   ${({
   theme,
   draggableHandle
 }) => css`
-    &.${rootClassName$c} {
+    &.${rootClassName$d} {
       padding: ${theme.spacing(1, 0)};
       position: relative;
 
@@ -18952,7 +18956,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$c,
+  'data-pendoid': dataPendoId = rootClassName$d,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -18961,7 +18965,7 @@ const DotDraggableList = ({
   rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
   width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$c, className, draggableHandle ? 'with-draggable-handle' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$d, 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([]);
@@ -52499,7 +52503,7 @@ cjs.exports.DraggableCore = DraggableCore;
 var cjsExports = cjs.exports;
 var Draggable$1 = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);
 
-const rootClassName$b = 'dot-draggable-window';
+const rootClassName$c = 'dot-draggable-window';
 const defaultWidth = '600px';
 const defaultHeight = '324px';
 const StyledPaper = styled(Paper)`
@@ -52508,7 +52512,7 @@ const StyledPaper = styled(Paper)`
   $maxHeight,
   $maxWidth
 }) => css`
-    &.${rootClassName$b} {
+    &.${rootClassName$c} {
       max-width: ${$maxWidth !== null && $maxWidth !== void 0 ? $maxWidth : defaultWidth};
       max-height: ${$maxHeight !== null && $maxHeight !== void 0 ? $maxHeight : defaultHeight};
       ${$maxWidth ? '' : `width: ${defaultWidth};`}
@@ -52546,7 +52550,7 @@ const StyledPaper = styled(Paper)`
 const DotDraggableWindow = ({
   ariaLabel,
   anchorEl,
-  'data-pendoid': dataPendoId = rootClassName$b,
+  'data-pendoid': dataPendoId = rootClassName$c,
   'data-testid': dataTestId,
   className,
   children,
@@ -52555,7 +52559,7 @@ const DotDraggableWindow = ({
   onClose,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
   const nodeRef = useRef(null);
   return jsx(Draggable$1, {
     bounds: "body",
@@ -52597,12 +52601,12 @@ const DotDraggableWindow = ({
   });
 };
 
-const rootClassName$a = 'dot-linear-progress';
+const rootClassName$b = 'dot-linear-progress';
 const StyledLinearProgress = styled(LinearProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$a} {
+    &.${rootClassName$b} {
       &.MuiLinearProgress-colorError {
         color: ${theme.palette.figma.inProgress.error};
       }
@@ -52634,7 +52638,7 @@ const DotLinearProgress = ({
   valueBuffer,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$b, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
@@ -52685,7 +52689,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$D,
+  'data-pendoid': dataPendoId = rootClassName$E,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -52726,7 +52730,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -52947,7 +52951,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$C,
+  'data-pendoid': dataPendoId = rootClassName$D,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -52979,7 +52983,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$C, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$D, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -53275,13 +53279,13 @@ const DotTimePicker = ({
   });
 };
 
-const rootClassName$9 = 'dot-carousel';
+const rootClassName$a = 'dot-carousel';
 const StyledCarousel = styled.div`
   ${({
   backgroundColor,
   theme
 }) => css`
-    &.${rootClassName$9} {
+    &.${rootClassName$a} {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -53381,7 +53385,7 @@ const DotCarousel = ({
   progressIndicator,
   showPagesButtons = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$9, className, backgroundColor ? 'with-background-color' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$a, className, backgroundColor ? 'with-background-color' : '');
   const rightNavigationButtonClasses = useStylesWithRootClass('carousel-right-arrow', displayNavigationButtons);
   const leftNavigationButtonClasses = useStylesWithRootClass('carousel-left-arrow', displayNavigationButtons);
   const createUuids = () => {
@@ -53532,13 +53536,13 @@ const DotCarousel = ({
   });
 };
 
-const rootClassName$8 = 'dot-sticky-with-border';
+const rootClassName$9 = 'dot-sticky-with-border';
 const StyledStickyWithBorder = styled.div`
   ${({
   pinnedStickyBorder,
   unpinnedStickyBorder
 }) => css`
-    &.${rootClassName$8} {
+    &.${rootClassName$9} {
       position: sticky;
       top: -1px;
 
@@ -53566,7 +53570,7 @@ const DotStickyWithBorder = ({
 }) => {
   const [isPinned, setIsPinned] = useState(false);
   const ref = useRef();
-  const rootClasses = useStylesWithRootClass(rootClassName$8, className, isPinned ? 'pinned' : 'unpinned');
+  const rootClasses = useStylesWithRootClass(rootClassName$9, className, isPinned ? 'pinned' : 'unpinned');
   useEffect(() => {
     const element = ref.current;
     const observer = new IntersectionObserver(([e]) => setIsPinned(e.intersectionRatio < 1), {
@@ -53588,18 +53592,18 @@ const DotStickyWithBorder = ({
   });
 };
 
-const rootClassName$7 = 'dot--board';
+const rootClassName$8 = 'dot--board';
 const classNames$5 = {
-  root: rootClassName$7,
-  spacingNormal: `${rootClassName$7}-normal`,
-  spacingDense: `${rootClassName$7}-dense`,
-  loading: `${rootClassName$7}-loading`
+  root: rootClassName$8,
+  spacingNormal: `${rootClassName$8}-normal`,
+  spacingDense: `${rootClassName$8}-dense`,
+  loading: `${rootClassName$8}-loading`
 };
 const StyledBoard = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$7} {
+    &.${rootClassName$8} {
       display: flex;
       overflow-x: auto;
       flex: 1;
@@ -53607,7 +53611,7 @@ const StyledBoard = styled.div`
     }
 
     @media (max-width: 650px) {
-      &.${rootClassName$7} {
+      &.${rootClassName$8} {
         justify-content: center;
       }
     }
@@ -53708,18 +53712,18 @@ const Board = React__default.forwardRef(({
   });
 });
 
-const rootClassName$6 = 'dot--board-column';
+const rootClassName$7 = 'dot--board-column';
 const classNames$4 = {
-  root: rootClassName$6,
-  spacingNormal: `${rootClassName$6}-normal`,
-  spacingDense: `${rootClassName$6}-dense`,
-  collapse: `${rootClassName$6}-collapse`
+  root: rootClassName$7,
+  spacingNormal: `${rootClassName$7}-normal`,
+  spacingDense: `${rootClassName$7}-dense`,
+  collapse: `${rootClassName$7}-collapse`
 };
 const StyledBoardColumn = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$6} {
+    &.${rootClassName$7} {
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -53810,13 +53814,13 @@ const BoardColumn = React__default.forwardRef(({
   });
 });
 
-const rootClassName$5 = 'dot--board-column-header';
+const rootClassName$6 = 'dot--board-column-header';
 const classNames$3 = {
-  root: rootClassName$5,
-  spacingNormal: `${rootClassName$5}-normal`,
-  spacingDense: `${rootClassName$5}-dense`,
-  colorBar: `${rootClassName$5}-color-bar`,
-  title: `${rootClassName$5}-title`
+  root: rootClassName$6,
+  spacingNormal: `${rootClassName$6}-normal`,
+  spacingDense: `${rootClassName$6}-dense`,
+  colorBar: `${rootClassName$6}-color-bar`,
+  title: `${rootClassName$6}-title`
 };
 const StyledBoardColumnHeader = styled.div`
   ${({
@@ -53884,11 +53888,11 @@ const BoardColumnHeader = ({
   });
 };
 
-const rootClassName$4 = 'dot--board-column-items';
+const rootClassName$5 = 'dot--board-column-items';
 const classNames$2 = {
-  root: rootClassName$4,
-  spacingNormal: `${rootClassName$4}-normal`,
-  spacingDense: `${rootClassName$4}-dense`
+  root: rootClassName$5,
+  spacingNormal: `${rootClassName$5}-normal`,
+  spacingDense: `${rootClassName$5}-dense`
 };
 const StyledBoardColumnItems = styled.div`
   ${({
@@ -53940,11 +53944,11 @@ const BoardColumnItems = ({
   });
 };
 
-const rootClassName$3 = 'dot--board-column-action-bar';
+const rootClassName$4 = 'dot--board-column-action-bar';
 const classNames$1 = {
-  root: rootClassName$3,
-  spacingNormal: `${rootClassName$3}-normal`,
-  spacingDense: `${rootClassName$3}-dense`
+  root: rootClassName$4,
+  spacingNormal: `${rootClassName$4}-normal`,
+  spacingDense: `${rootClassName$4}-dense`
 };
 const StyledBoardColumnActionBar = styled(DotActionToolbar)`
   ${({
@@ -54015,13 +54019,13 @@ const BoardColumnCollapse = ({
   return useMemo(() => collapsed ? children : null, [children, collapsed]);
 };
 
-const rootClassName$2 = 'dot--board-column-header';
+const rootClassName$3 = 'dot--board-column-header';
 const classNames = {
-  root: rootClassName$2,
-  spacingNormal: `${rootClassName$2}-normal`,
-  spacingDense: `${rootClassName$2}-dense`,
-  title: `${rootClassName$2}-title`,
-  text: `${rootClassName$2}-text`
+  root: rootClassName$3,
+  spacingNormal: `${rootClassName$3}-normal`,
+  spacingDense: `${rootClassName$3}-dense`,
+  title: `${rootClassName$3}-title`,
+  text: `${rootClassName$3}-text`
 };
 const StyledBoardColumnSummary = styled.div`
   ${({
@@ -54083,12 +54087,12 @@ const BoardColumnSummary = ({
   });
 };
 
-const rootClassName$1 = 'dot-search';
+const rootClassName$2 = 'dot-search';
 const StyledSearch = styled(DotInputText)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1} {
+    &.${rootClassName$2} {
       &.with-value .MuiInputBase-root {
         background-color: ${theme.palette.figma.primary.light};
 
@@ -54131,7 +54135,7 @@ const DotSearch = _a => {
       value
     } = _a,
     rest = __rest(_a, ["ariaLabel", "className", 'data-testid', "disabled", "hasDebounce", "id", "name", "onSearch", "onClear", "placeholder", "value"]);
-  const rootClasses = useStylesWithRootClass(rootClassName$1, className, value ? 'with-value' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$2, className, value ? 'with-value' : '');
   return jsx(StyledSearch, Object.assign({}, rest, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -54150,12 +54154,12 @@ const DotSearch = _a => {
   }));
 };
 
-const rootClassName = 'dot-toggle-switch';
+const rootClassName$1 = 'dot-toggle-switch';
 const StyledToggleSwitch = styled(Stack)`
   ${({
   theme
 }) => css`
-    &.${rootClassName} {
+    &.${rootClassName$1} {
       gap: ${theme.spacing(2)};
       cursor: pointer;
 
@@ -54209,7 +54213,7 @@ const StyledToggleSwitch = styled(Stack)`
 const DotToggleSwitch = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName,
+  'data-pendoid': dataPendoId = rootClassName$1,
   'data-testid': dataTestId,
   disabled = false,
   label,
@@ -54219,7 +54223,7 @@ const DotToggleSwitch = ({
 }) => {
   const toggleOptions = options.slice(0, 2);
   const isChecked = toggleOptions[1].value === value;
-  const rootClasses = useStylesWithRootClass(rootClassName, className, disabled ? 'dot-disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1, className, disabled ? 'dot-disabled' : '');
   const toggleValue = () => {
     const [firstOption, secondOption] = toggleOptions;
     const newValue = value === firstOption.value ? secondOption.value : firstOption.value;
@@ -54272,4 +54276,1313 @@ const DotToggleSwitch = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotToggleSwitch, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var RGB_MAX = 255;
+var SV_MAX = 100;
+/**
+ * ```js
+ * rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }
+ * ```
+ */
+var rgbaToHsva = _ref => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = _ref;
+  var max = Math.max(r, g, b);
+  var delta = max - Math.min(r, g, b);
+
+  // prettier-ignore
+  var hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
+  return {
+    h: 60 * (hh < 0 ? hh + 6 : hh),
+    s: max ? delta / max * SV_MAX : 0,
+    v: max / RGB_MAX * SV_MAX,
+    a
+  };
+};
+var hsvaToHslaString = hsva => {
+  var {
+    h,
+    s,
+    l,
+    a
+  } = hsvaToHsla(hsva);
+  return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
+};
+var hsvaToHsla = _ref5 => {
+  var {
+    h,
+    s,
+    v,
+    a
+  } = _ref5;
+  var hh = (200 - s) * v / SV_MAX;
+  return {
+    h,
+    s: hh > 0 && hh < 200 ? s * v / SV_MAX / (hh <= SV_MAX ? hh : 200 - hh) * SV_MAX : 0,
+    l: hh / 2,
+    a
+  };
+};
+var rgbToHex = _ref7 => {
+  var {
+    r,
+    g,
+    b
+  } = _ref7;
+  var bin = r << 16 | g << 8 | b;
+  return "#" + (h => new Array(7 - h.length).join('0') + h)(bin.toString(16));
+};
+var rgbaToHexa = _ref8 => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = _ref8;
+  var alpha = typeof a === 'number' && (a * 255 | 1 << 8).toString(16).slice(1);
+  return "" + rgbToHex({
+    r,
+    g,
+    b
+  }) + (alpha ? alpha : '');
+};
+var hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
+var hexToRgba = hex => {
+  var htemp = hex.replace('#', '');
+  if (/^#?/.test(hex) && htemp.length === 3) {
+    hex = "#" + htemp.charAt(0) + htemp.charAt(0) + htemp.charAt(1) + htemp.charAt(1) + htemp.charAt(2) + htemp.charAt(2);
+  }
+  var reg = new RegExp("[A-Za-z0-9]{2}", 'g');
+  var [r, g, b = 0, a] = hex.match(reg).map(v => parseInt(v, 16));
+  return {
+    r,
+    g,
+    b,
+    a: (a != null ? a : 255) / RGB_MAX
+  };
+};
+
+/**
+ * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
+ * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
+ */
+var hsvaToRgba = _ref9 => {
+  var {
+    h,
+    s,
+    v,
+    a
+  } = _ref9;
+  var _h = h / 60,
+    _s = s / SV_MAX,
+    _v = v / SV_MAX,
+    hi = Math.floor(_h) % 6;
+  var f = _h - Math.floor(_h),
+    _p = RGB_MAX * _v * (1 - _s),
+    _q = RGB_MAX * _v * (1 - _s * f),
+    _t = RGB_MAX * _v * (1 - _s * (1 - f));
+  _v *= RGB_MAX;
+  var rgba = {};
+  switch (hi) {
+    case 0:
+      rgba.r = _v;
+      rgba.g = _t;
+      rgba.b = _p;
+      break;
+    case 1:
+      rgba.r = _q;
+      rgba.g = _v;
+      rgba.b = _p;
+      break;
+    case 2:
+      rgba.r = _p;
+      rgba.g = _v;
+      rgba.b = _t;
+      break;
+    case 3:
+      rgba.r = _p;
+      rgba.g = _q;
+      rgba.b = _v;
+      break;
+    case 4:
+      rgba.r = _t;
+      rgba.g = _p;
+      rgba.b = _v;
+      break;
+    case 5:
+      rgba.r = _v;
+      rgba.g = _p;
+      rgba.b = _q;
+      break;
+  }
+  rgba.r = Math.round(rgba.r);
+  rgba.g = Math.round(rgba.g);
+  rgba.b = Math.round(rgba.b);
+  return _extends({}, rgba, {
+    a
+  });
+};
+var hsvaToRgbaString = hsva => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = hsvaToRgba(hsva);
+  return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
+};
+var rgbaToRgb = _ref0 => {
+  var {
+    r,
+    g,
+    b
+  } = _ref0;
+  return {
+    r,
+    g,
+    b
+  };
+};
+var hslaToHsl = _ref1 => {
+  var {
+    h,
+    s,
+    l
+  } = _ref1;
+  return {
+    h,
+    s,
+    l
+  };
+};
+var hsvaToHex = hsva => rgbToHex(hsvaToRgba(hsva));
+var hsvaToHsv = _ref10 => {
+  var {
+    h,
+    s,
+    v
+  } = _ref10;
+  return {
+    h,
+    s,
+    v
+  };
+};
+
+/**
+ * Converts RGB to XY. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/
+ * @param color RGB color as an array [0-255, 0-255, 0-255]
+ */
+var rgbToXY = _ref12 => {
+  var {
+    r,
+    g,
+    b
+  } = _ref12;
+  var translateColor = function translateColor(color) {
+    return color <= 0.04045 ? color / 12.92 : Math.pow((color + 0.055) / 1.055, 2.4);
+  };
+  var red = translateColor(r / 255);
+  var green = translateColor(g / 255);
+  var blue = translateColor(b / 255);
+  var xyz = {};
+  xyz.x = red * 0.4124 + green * 0.3576 + blue * 0.1805;
+  xyz.y = red * 0.2126 + green * 0.7152 + blue * 0.0722;
+  xyz.bri = red * 0.0193 + green * 0.1192 + blue * 0.9505;
+  return xyz;
+};
+var color = str => {
+  var rgb;
+  var hsl;
+  var hsv;
+  var rgba;
+  var hsla;
+  var hsva;
+  var xy;
+  var hex;
+  var hexa;
+  if (typeof str === 'string' && validHex$1(str)) {
+    hsva = hexToHsva(str);
+    hex = str;
+  } else if (typeof str !== 'string') {
+    hsva = str;
+  }
+  if (hsva) {
+    hsv = hsvaToHsv(hsva);
+    hsla = hsvaToHsla(hsva);
+    rgba = hsvaToRgba(hsva);
+    hexa = rgbaToHexa(rgba);
+    hex = hsvaToHex(hsva);
+    hsl = hslaToHsl(hsla);
+    rgb = rgbaToRgb(rgba);
+    xy = rgbToXY(rgb);
+  }
+  return {
+    rgb,
+    hsl,
+    hsv,
+    rgba,
+    hsla,
+    hsva,
+    hex,
+    hexa,
+    xy
+  };
+};
+var validHex$1 = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+
+// Saves incoming handler to the ref in order to avoid "useCallback hell"
+function useEventCallback(handler) {
+  var callbackRef = useRef(handler);
+  useEffect(() => {
+    callbackRef.current = handler;
+  });
+  return useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
+}
+
+// Check if an event was triggered by touch
+var isTouch = event => 'touches' in event;
+
+// Browsers introduced an intervention, making touch events passive by default.
+// This workaround removes `preventDefault` call from the touch handlers.
+// https://github.com/facebook/react/issues/19651
+var preventDefaultMove = event => {
+  !isTouch(event) && event.preventDefault && event.preventDefault();
+};
+// Clamps a value between an upper and lower bound.
+// We use ternary operators because it makes the minified code
+// 2 times shorter then `Math.min(Math.max(a,b),c)`
+var clamp = function clamp(number, min, max) {
+  if (min === void 0) {
+    min = 0;
+  }
+  if (max === void 0) {
+    max = 1;
+  }
+  return number > max ? max : number < min ? min : number;
+};
+// Returns a relative position of the pointer inside the node's bounding box
+var getRelativePosition = (node, event) => {
+  var rect = node.getBoundingClientRect();
+
+  // Get user's pointer position from `touches` array if it's a `TouchEvent`
+  var pointer = isTouch(event) ? event.touches[0] : event;
+  return {
+    left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
+    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
+    width: rect.width,
+    height: rect.height,
+    x: pointer.pageX - (rect.left + window.pageXOffset),
+    y: pointer.pageY - (rect.top + window.pageYOffset)
+  };
+};
+
+var _excluded$8 = ["prefixCls", "className", "onMove", "onDown"];
+var Interactive = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-interactive',
+      className,
+      onMove,
+      onDown
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded$8);
+  var container = useRef(null);
+  var hasTouched = useRef(false);
+  var [isDragging, setDragging] = useState(false);
+  var onMoveCallback = useEventCallback(onMove);
+  var onKeyCallback = useEventCallback(onDown);
+
+  // Prevent mobile browsers from handling mouse events (conflicting with touch ones).
+  // If we detected a touch interaction before, we prefer reacting to touch events only.
+  var isValid = event => {
+    if (hasTouched.current && !isTouch(event)) return false;
+    hasTouched.current = isTouch(event);
+    return true;
+  };
+  var handleMove = useCallback(event => {
+    preventDefaultMove(event);
+    if (!container.current) return;
+    var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
+    if (!isDown) {
+      setDragging(false);
+      return;
+    }
+    onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
+  }, [onMoveCallback]);
+  var handleMoveEnd = useCallback(() => setDragging(false), []);
+  var toggleDocumentEvents = useCallback(state => {
+    if (state) {
+      window.addEventListener(hasTouched.current ? 'touchmove' : 'mousemove', handleMove);
+      window.addEventListener(hasTouched.current ? 'touchend' : 'mouseup', handleMoveEnd);
+    } else {
+      window.removeEventListener('mousemove', handleMove);
+      window.removeEventListener('mouseup', handleMoveEnd);
+      window.removeEventListener('touchmove', handleMove);
+      window.removeEventListener('touchend', handleMoveEnd);
+    }
+  }, [handleMove, handleMoveEnd]);
+  useEffect(() => {
+    toggleDocumentEvents(isDragging);
+    return () => {
+      toggleDocumentEvents(false);
+    };
+  }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
+  var handleMoveStart = useCallback(event => {
+    var activeEl = document.activeElement;
+    activeEl == null || activeEl.blur();
+    preventDefaultMove(event.nativeEvent);
+    if (!isValid(event.nativeEvent)) return;
+    if (!container.current) return;
+    onKeyCallback == null || onKeyCallback(getRelativePosition(container.current, event.nativeEvent), event.nativeEvent);
+    setDragging(true);
+  }, [onKeyCallback]);
+  return /*#__PURE__*/jsx("div", _extends({}, reset, {
+    className: [prefixCls, className || ''].filter(Boolean).join(' '),
+    style: _extends({}, reset.style, {
+      touchAction: 'none'
+    }),
+    ref: container,
+    tabIndex: 0,
+    onMouseDown: handleMoveStart,
+    onTouchStart: handleMoveStart
+  }));
+});
+Interactive.displayName = 'Interactive';
+var Interactive$1 = Interactive;
+
+var Pointer$1 = _ref => {
+  var {
+    className,
+    color,
+    left,
+    top,
+    prefixCls
+  } = _ref;
+  var style = {
+    position: 'absolute',
+    top,
+    left
+  };
+  var stylePointer = {
+    '--saturation-pointer-box-shadow': 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
+    width: 6,
+    height: 6,
+    transform: 'translate(-3px, -3px)',
+    boxShadow: 'var(--saturation-pointer-box-shadow)',
+    borderRadius: '50%',
+    backgroundColor: color
+  };
+  return useMemo(() => /*#__PURE__*/jsx("div", {
+    className: prefixCls + "-pointer " + (className || ''),
+    style: style,
+    children: /*#__PURE__*/jsx("div", {
+      className: prefixCls + "-fill",
+      style: stylePointer
+    })
+  }), [top, left, color, className, prefixCls]);
+};
+
+var _excluded$7 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
+var Saturation = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var _hsva$h;
+  var {
+      prefixCls = 'w-color-saturation',
+      radius = 0,
+      pointer,
+      className,
+      hue = 0,
+      style,
+      hsva,
+      onChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+  var containerStyle = _extends({
+    width: 200,
+    height: 200,
+    borderRadius: radius
+  }, style, {
+    position: 'relative'
+  });
+  var handleChange = (interaction, event) => {
+    onChange && hsva && onChange({
+      h: hsva.h,
+      s: interaction.left * 100,
+      v: (1 - interaction.top) * 100,
+      a: hsva.a
+      // source: 'hsv',
+    });
+  };
+  var handleKeyDown = useCallback(event => {
+    if (!hsva || !onChange) return;
+    var step = 1; // 1% step for saturation and value
+    var newS = hsva.s;
+    var newV = hsva.v;
+    var changed = false;
+    switch (event.key) {
+      case 'ArrowLeft':
+        newS = Math.max(0, hsva.s - step);
+        changed = true;
+        event.preventDefault();
+        break;
+      case 'ArrowRight':
+        newS = Math.min(100, hsva.s + step);
+        changed = true;
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+        newV = Math.min(100, hsva.v + step);
+        changed = true;
+        event.preventDefault();
+        break;
+      case 'ArrowDown':
+        newV = Math.max(0, hsva.v - step);
+        changed = true;
+        event.preventDefault();
+        break;
+      default:
+        return;
+    }
+    if (changed) {
+      onChange({
+        h: hsva.h,
+        s: newS,
+        v: newV,
+        a: hsva.a
+      });
+    }
+  }, [hsva, onChange]);
+  var pointerElement = useMemo(() => {
+    if (!hsva) return null;
+    var comProps = {
+      top: 100 - hsva.v + "%",
+      left: hsva.s + "%",
+      color: hsvaToHslaString(hsva)
+    };
+    if (pointer && typeof pointer === 'function') {
+      return pointer(_extends({
+        prefixCls
+      }, comProps));
+    }
+    return /*#__PURE__*/jsx(Pointer$1, _extends({
+      prefixCls: prefixCls
+    }, comProps));
+  }, [hsva, pointer, prefixCls]);
+  var handleClick = useCallback(event => {
+    event.target.focus();
+  }, []);
+  return /*#__PURE__*/jsx(Interactive$1, _extends({
+    className: [prefixCls, className || ''].filter(Boolean).join(' ')
+  }, other, {
+    style: _extends({
+      position: 'absolute',
+      inset: 0,
+      cursor: 'crosshair',
+      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((_hsva$h = hsva == null ? void 0 : hsva.h) != null ? _hsva$h : hue) + ", 100%, 50%))"
+    }, containerStyle, {
+      outline: 'none'
+    }),
+    ref: ref,
+    onMove: handleChange,
+    onDown: handleChange,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    children: pointerElement
+  }));
+});
+Saturation.displayName = 'Saturation';
+var Saturation$1 = Saturation;
+
+var _excluded$6 = ["className", "prefixCls", "left", "top", "style", "fillProps"];
+var Pointer = _ref => {
+  var {
+      className,
+      prefixCls,
+      left,
+      top,
+      style,
+      fillProps
+    } = _ref,
+    reset = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var styleWrapper = _extends({}, style, {
+    position: 'absolute',
+    left,
+    top
+  });
+  var stylePointer = _extends({
+    width: 18,
+    height: 18,
+    boxShadow: 'var(--alpha-pointer-box-shadow)',
+    borderRadius: '50%',
+    backgroundColor: 'var(--alpha-pointer-background-color)'
+  }, fillProps == null ? void 0 : fillProps.style, {
+    transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)'
+  });
+  return /*#__PURE__*/jsx("div", _extends({
+    className: prefixCls + "-pointer " + (className || ''),
+    style: styleWrapper
+  }, reset, {
+    children: /*#__PURE__*/jsx("div", _extends({
+      className: prefixCls + "-fill"
+    }, fillProps, {
+      style: stylePointer
+    }))
+  }));
+};
+
+var _excluded$5 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
+var BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
+var Alpha = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-alpha',
+      className,
+      hsva,
+      background,
+      bgProps = {},
+      innerProps = {},
+      pointerProps = {},
+      radius = 0,
+      width,
+      height = 16,
+      direction = 'horizontal',
+      style,
+      onChange,
+      pointer
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+  var handleChange = offset => {
+    onChange && onChange(_extends({}, hsva, {
+      a: direction === 'horizontal' ? offset.left : offset.top
+    }), offset);
+  };
+  var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
+    a: 1
+  }));
+  var innerBackground = "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
+  var comProps = {};
+  if (direction === 'horizontal') {
+    comProps.left = hsva.a * 100 + "%";
+  } else {
+    comProps.top = hsva.a * 100 + "%";
+  }
+  var styleWrapper = _extends({
+    '--alpha-background-color': '#fff',
+    '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
+    '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
+    borderRadius: radius,
+    background: "url(" + BACKGROUND_IMG + ") left center",
+    backgroundColor: 'var(--alpha-background-color)'
+  }, {
+    width,
+    height
+  }, style, {
+    position: 'relative'
+  });
+  var handleKeyDown = useCallback(event => {
+    var step = 0.01; // 1% step
+    var currentAlpha = hsva.a;
+    var newAlpha = currentAlpha;
+    switch (event.key) {
+      case 'ArrowLeft':
+        if (direction === 'horizontal') {
+          newAlpha = Math.max(0, currentAlpha - step);
+          event.preventDefault();
+        }
+        break;
+      case 'ArrowRight':
+        if (direction === 'horizontal') {
+          newAlpha = Math.min(1, currentAlpha + step);
+          event.preventDefault();
+        }
+        break;
+      case 'ArrowUp':
+        if (direction === 'vertical') {
+          newAlpha = Math.max(0, currentAlpha - step);
+          event.preventDefault();
+        }
+        break;
+      case 'ArrowDown':
+        if (direction === 'vertical') {
+          newAlpha = Math.min(1, currentAlpha + step);
+          event.preventDefault();
+        }
+        break;
+      default:
+        return;
+    }
+    if (newAlpha !== currentAlpha) {
+      var syntheticOffset = {
+        left: direction === 'horizontal' ? newAlpha : hsva.a,
+        top: direction === 'vertical' ? newAlpha : hsva.a,
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      };
+      onChange && onChange(_extends({}, hsva, {
+        a: newAlpha
+      }), syntheticOffset);
+    }
+  }, [hsva, direction, onChange]);
+  var handleClick = useCallback(event => {
+    event.target.focus();
+  }, []);
+  var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
+    prefixCls
+  }, pointerProps, comProps)) : /*#__PURE__*/jsx(Pointer, _extends({}, pointerProps, {
+    prefixCls: prefixCls
+  }, comProps));
+  return /*#__PURE__*/jsxs("div", _extends({}, other, {
+    className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
+    style: styleWrapper,
+    ref: ref,
+    children: [/*#__PURE__*/jsx("div", _extends({}, bgProps, {
+      style: _extends({
+        inset: 0,
+        position: 'absolute',
+        background: background || innerBackground,
+        borderRadius: radius
+      }, bgProps.style)
+    })), /*#__PURE__*/jsx(Interactive$1, _extends({}, innerProps, {
+      style: _extends({}, innerProps.style, {
+        inset: 0,
+        zIndex: 1,
+        position: 'absolute',
+        outline: 'none'
+      }),
+      onMove: handleChange,
+      onDown: handleChange,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: pointerElement
+    }))]
+  }));
+});
+Alpha.displayName = 'Alpha';
+var Alpha$1 = Alpha;
+
+var _excluded$4 = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
+var validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+var getNumberValue = value => Number(String(value).replace(/%/g, ''));
+var EditableInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-editable-input',
+      placement = 'bottom',
+      label,
+      value: initValue,
+      className,
+      style,
+      labelStyle,
+      inputStyle,
+      onChange,
+      onBlur,
+      renderInput
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  var [value, setValue] = useState(initValue);
+  var isFocus = useRef(false);
+  useEffect(() => {
+    if (props.value !== value) {
+      if (!isFocus.current) {
+        setValue(props.value);
+      }
+    }
+  }, [props.value]);
+  function handleChange(evn, valInit) {
+    var value = (valInit || evn.target.value).trim().replace(/^#/, '');
+    if (validHex(value)) {
+      onChange && onChange(evn, value);
+    }
+    var val = getNumberValue(value);
+    if (!isNaN(val)) {
+      onChange && onChange(evn, val);
+    }
+    setValue(value);
+  }
+  function handleBlur(evn) {
+    isFocus.current = false;
+    setValue(props.value);
+    onBlur && onBlur(evn);
+  }
+  var placementStyle = {};
+  if (placement === 'bottom') {
+    placementStyle['flexDirection'] = 'column';
+  }
+  if (placement === 'top') {
+    placementStyle['flexDirection'] = 'column-reverse';
+  }
+  if (placement === 'left') {
+    placementStyle['flexDirection'] = 'row-reverse';
+  }
+  var wrapperStyle = _extends({
+    '--editable-input-label-color': 'rgb(153, 153, 153)',
+    '--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
+    '--editable-input-color': '#666',
+    position: 'relative',
+    alignItems: 'center',
+    display: 'flex',
+    fontSize: 11
+  }, placementStyle, style);
+  var editableStyle = _extends({
+    width: '100%',
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 3,
+    paddingRight: 3,
+    fontSize: 11,
+    background: 'transparent',
+    boxSizing: 'border-box',
+    border: 'none',
+    color: 'var(--editable-input-color)',
+    boxShadow: 'var(--editable-input-box-shadow)'
+  }, inputStyle);
+  var inputProps = _extends({
+    value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    autoComplete: 'off',
+    onFocus: () => isFocus.current = true
+  }, other, {
+    style: editableStyle
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: [prefixCls, className || ''].filter(Boolean).join(' '),
+    style: wrapperStyle,
+    children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/jsx("input", _extends({
+      ref: ref
+    }, inputProps)), label && /*#__PURE__*/jsx("span", {
+      style: _extends({
+        color: 'var(--editable-input-label-color)',
+        textTransform: 'capitalize'
+      }, labelStyle),
+      children: label
+    })]
+  });
+});
+EditableInput.displayName = 'EditableInput';
+var EditableInput$1 = EditableInput;
+
+var _excluded$3 = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
+var EditableInputRGBA = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-editable-input-rgba',
+      hsva,
+      placement = 'bottom',
+      rProps = {},
+      gProps = {},
+      bProps = {},
+      aProps = {},
+      className,
+      style,
+      onChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  var rgba = hsva ? hsvaToRgba(hsva) : {};
+  function handleBlur(evn) {
+    var value = Number(evn.target.value);
+    if (value && value > 255) {
+      evn.target.value = '255';
+    }
+    if (value && value < 0) {
+      evn.target.value = '0';
+    }
+  }
+  var handleChange = (value, type, evn) => {
+    if (typeof value === 'number') {
+      if (type === 'a') {
+        if (value < 0) value = 0;
+        if (value > 100) value = 100;
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          a: value / 100
+        }))));
+      }
+      if (value > 255) {
+        value = 255;
+        evn.target.value = '255';
+      }
+      if (value < 0) {
+        value = 0;
+        evn.target.value = '0';
+      }
+      if (type === 'r') {
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          r: value
+        }))));
+      }
+      if (type === 'g') {
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          g: value
+        }))));
+      }
+      if (type === 'b') {
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          b: value
+        }))));
+      }
+    }
+  };
+  return /*#__PURE__*/jsxs("div", _extends({
+    ref: ref,
+    className: [prefixCls, className || ''].filter(Boolean).join(' ')
+  }, other, {
+    style: _extends({
+      fontSize: 11,
+      display: 'flex'
+    }, style),
+    children: [/*#__PURE__*/jsx(EditableInput$1, _extends({
+      label: "R",
+      value: rgba.r || 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'r', evn)
+    }, rProps, {
+      style: _extends({}, rProps.style)
+    })), /*#__PURE__*/jsx(EditableInput$1, _extends({
+      label: "G",
+      value: rgba.g || 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'g', evn)
+    }, gProps, {
+      style: _extends({
+        marginLeft: 5
+      }, rProps.style)
+    })), /*#__PURE__*/jsx(EditableInput$1, _extends({
+      label: "B",
+      value: rgba.b || 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'b', evn)
+    }, bProps, {
+      style: _extends({
+        marginLeft: 5
+      }, bProps.style)
+    })), aProps && /*#__PURE__*/jsx(EditableInput$1, _extends({
+      label: "A",
+      value: rgba.a ? parseInt(String(rgba.a * 100), 10) : 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'a', evn)
+    }, aProps, {
+      style: _extends({
+        marginLeft: 5
+      }, aProps.style)
+    }))]
+  }));
+});
+EditableInputRGBA.displayName = 'EditableInputRGBA';
+var RGBA = EditableInputRGBA;
+
+var _excluded$2 = ["prefixCls", "className", "hue", "onChange", "direction"];
+var Hue = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-hue',
+      className,
+      hue = 0,
+      onChange: _onChange,
+      direction = 'horizontal'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  return /*#__PURE__*/jsx(Alpha$1, _extends({
+    ref: ref,
+    className: prefixCls + " " + (className || '')
+  }, other, {
+    direction: direction,
+    background: "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
+    hsva: {
+      h: hue,
+      s: 100,
+      v: 100,
+      a: hue / 360
+    },
+    onChange: (_, interaction) => {
+      _onChange && _onChange({
+        h: direction === 'horizontal' ? 360 * interaction.left : 360 * interaction.top
+      });
+    }
+  }));
+});
+Hue.displayName = 'Hue';
+var Hue$1 = Hue;
+
+var _excluded$1 = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
+var Swatch = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-swatch',
+      className,
+      color: color$1,
+      colors = [],
+      style,
+      rectProps = {},
+      onChange,
+      addonAfter,
+      addonBefore,
+      rectRender
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  var rectStyle = _extends({
+    '--swatch-background-color': 'rgb(144, 19, 254)',
+    background: 'var(--swatch-background-color)',
+    height: 15,
+    width: 15,
+    marginRight: 5,
+    marginBottom: 5,
+    cursor: 'pointer',
+    position: 'relative',
+    outline: 'none',
+    borderRadius: 2
+  }, rectProps.style);
+  var handleClick = (hex, evn) => {
+    onChange && onChange(hexToHsva(hex), color(hexToHsva(hex)), evn);
+  };
+  return /*#__PURE__*/jsxs("div", _extends({
+    ref: ref
+  }, other, {
+    className: [prefixCls, className || ''].filter(Boolean).join(' '),
+    style: _extends({
+      display: 'flex',
+      flexWrap: 'wrap',
+      position: 'relative'
+    }, style),
+    children: [addonBefore && /*#__PURE__*/React__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
+      var title = '';
+      var background = '';
+      if (typeof item === 'string') {
+        title = item;
+        background = item;
+      }
+      if (typeof item === 'object' && item.color) {
+        title = item.title || item.color;
+        background = item.color;
+      }
+      var checked = color$1 && color$1.toLocaleLowerCase() === background.toLocaleLowerCase();
+      var render = rectRender && rectRender({
+        title,
+        color: background,
+        checked: !!checked,
+        style: _extends({}, rectStyle, {
+          background
+        }),
+        onClick: evn => handleClick(background, evn)
+      });
+      if (render) {
+        return /*#__PURE__*/jsx(Fragment$1, {
+          children: render
+        }, idx);
+      }
+      var child = rectProps.children && /*#__PURE__*/React__default.isValidElement(rectProps.children) ? /*#__PURE__*/React__default.cloneElement(rectProps.children, {
+        color: background,
+        checked
+      }) : null;
+      return /*#__PURE__*/jsx("div", _extends({
+        tabIndex: 0,
+        title: title,
+        onClick: evn => handleClick(background, evn)
+      }, rectProps, {
+        children: child,
+        style: _extends({}, rectStyle, {
+          background
+        })
+      }), idx);
+    }), addonAfter && /*#__PURE__*/React__default.isValidElement(addonAfter) && addonAfter]
+  }));
+});
+Swatch.displayName = 'Swatch';
+var Swatch$1 = Swatch;
+
+var _excluded = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"];
+var PRESET_COLORS = ['#D0021B', '#F5A623', '#f8e61b', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'];
+var Bar = props => /*#__PURE__*/jsx("div", {
+  style: {
+    boxShadow: 'rgb(0 0 0 / 60%) 0px 0px 2px',
+    width: 4,
+    top: 1,
+    bottom: 1,
+    left: props.left,
+    borderRadius: 1,
+    position: 'absolute',
+    backgroundColor: '#fff'
+  }
+});
+var Sketch = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-sketch',
+      className,
+      onChange,
+      width = 218,
+      presetColors = PRESET_COLORS,
+      color: color$1,
+      editableDisable = true,
+      disableAlpha = false,
+      style
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var [hsva, setHsva] = useState({
+    h: 209,
+    s: 36,
+    v: 90,
+    a: 1
+  });
+  useEffect(() => {
+    if (typeof color$1 === 'string' && validHex$1(color$1)) {
+      setHsva(hexToHsva(color$1));
+    }
+    if (typeof color$1 === 'object') {
+      setHsva(color$1);
+    }
+  }, [color$1]);
+  var handleChange = hsv => {
+    setHsva(hsv);
+    onChange && onChange(color(hsv));
+  };
+  var handleHex = (value, evn) => {
+    if (typeof value === 'string' && validHex$1(value) && /(3|6)/.test(String(value.length))) {
+      handleChange(hexToHsva(value));
+    }
+  };
+  var handleAlphaChange = newAlpha => handleChange(_extends({}, hsva, {
+    a: newAlpha.a
+  }));
+  var handleSaturationChange = newColor => handleChange(_extends({}, hsva, newColor, {
+    a: hsva.a
+  }));
+  var styleMain = _extends({
+    '--sketch-background': 'rgb(255, 255, 255)',
+    '--sketch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+    '--sketch-swatch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset',
+    '--sketch-alpha-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset',
+    '--sketch-swatch-border-top': '1px solid rgb(238, 238, 238)',
+    background: 'var(--sketch-background)',
+    borderRadius: 4,
+    boxShadow: 'var(--sketch-box-shadow)',
+    width
+  }, style);
+  var styleAlpha = {
+    borderRadius: 2,
+    background: hsvaToRgbaString(hsva),
+    boxShadow: 'var(--sketch-alpha-box-shadow)'
+  };
+  var styleSwatch = {
+    borderTop: 'var(--sketch-swatch-border-top)',
+    paddingTop: 10,
+    paddingLeft: 10
+  };
+  var styleSwatchRect = {
+    marginRight: 10,
+    marginBottom: 10,
+    borderRadius: 3,
+    boxShadow: 'var(--sketch-swatch-box-shadow)'
+  };
+  return /*#__PURE__*/jsxs("div", _extends({}, other, {
+    className: prefixCls + " " + (className || ''),
+    ref: ref,
+    style: styleMain,
+    children: [/*#__PURE__*/jsxs("div", {
+      style: {
+        padding: '10px 10px 8px'
+      },
+      children: [/*#__PURE__*/jsx(Saturation$1, {
+        hsva: hsva,
+        style: {
+          width: 'auto',
+          height: 150
+        },
+        onChange: handleSaturationChange
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          marginTop: 4
+        },
+        children: [/*#__PURE__*/jsxs("div", {
+          style: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/jsx(Hue$1, {
+            width: "auto",
+            height: 10,
+            hue: hsva.h,
+            pointer: Bar,
+            innerProps: {
+              style: {
+                marginLeft: 1,
+                marginRight: 5
+              }
+            },
+            onChange: newHue => handleChange(_extends({}, hsva, newHue))
+          }), !disableAlpha && /*#__PURE__*/jsx(Alpha$1, {
+            width: "auto",
+            height: 10,
+            hsva: hsva,
+            pointer: Bar,
+            style: {
+              marginTop: 4
+            },
+            innerProps: {
+              style: {
+                marginLeft: 1,
+                marginRight: 5
+              }
+            },
+            onChange: handleAlphaChange
+          })]
+        }), !disableAlpha && /*#__PURE__*/jsx(Alpha$1, {
+          width: 24,
+          height: 24,
+          hsva: hsva,
+          radius: 2,
+          style: {
+            marginLeft: 4
+          },
+          bgProps: {
+            style: {
+              background: 'transparent'
+            }
+          },
+          innerProps: {
+            style: styleAlpha
+          },
+          pointer: () => /*#__PURE__*/jsx(Fragment$1, {})
+        })]
+      })]
+    }), editableDisable && /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        margin: '0 10px 3px 10px'
+      },
+      children: [/*#__PURE__*/jsx(EditableInput$1, {
+        label: "Hex",
+        value: hsvaToHex(hsva).replace(/^#/, '').toLocaleUpperCase(),
+        onChange: (evn, val) => handleHex(val),
+        style: {
+          minWidth: 58
+        }
+      }), /*#__PURE__*/jsx(RGBA, {
+        hsva: hsva,
+        style: {
+          marginLeft: 6
+        },
+        aProps: !disableAlpha ? {} : false,
+        onChange: result => handleChange(result.hsva)
+      })]
+    }), presetColors && presetColors.length > 0 && /*#__PURE__*/jsx(Swatch$1, {
+      style: styleSwatch,
+      colors: presetColors,
+      color: hsvaToHex(hsva),
+      onChange: hsvColor => handleChange(hsvColor),
+      rectProps: {
+        style: styleSwatchRect
+      }
+    })]
+  }));
+});
+Sketch.displayName = 'Sketch';
+var Sketch$1 = Sketch;
+
+const rootClassName = 'dot-color-picker';
+const StyledColorPicker = styled(Sketch$1)`
+  ${({
+  theme,
+  $hideShadow
+}) => css`
+    &.${rootClassName} {
+      --sketch-background: ${theme.palette.figma.background.level0.componentsBackground} !important;
+      --sketch-swatch-border-top: none !important;
+      --sketch-box-shadow: ${theme.shadows[1]} !important;
+      box-shadow: ${$hideShadow ? 'none !important' : 'var(--sketch-box-shadow)'};
+      font-family: ${theme.typography.fontFamily} !important;
+
+      .w-color-interactive,
+      .w-color-hue > div,
+      .w-color-alpha-horizontal > div {
+        border-radius: ${theme.spacing(0.5)} !important;
+      }
+
+      .w-color-editable-input {
+        --editable-input-color: ${theme.palette.figma.typography.black} !important;
+        --editable-input-label-color: ${theme.palette.figma.typography.black} !important;
+        --editable-input-box-shadow: none !important;
+
+        input {
+          border-radius: ${theme.spacing(0.5)};
+          border: 1px solid ${theme.palette.figma.border.default} !important;
+
+          &:focus-visible {
+            background: ${theme.palette.figma.neutral.elevated};
+            outline: none;
+            border: 1px solid ${theme.palette.figma.border.inputActive} !important;
+          }
+        }
+      }
+
+      .w-color-swatch div {
+        height: ${theme.spacing(3)} !important;
+        width: ${theme.spacing(3)} !important;
+      }
+    }
+  `}
+`;
+
+const DotColorPicker = ({
+  ariaLabel,
+  ariaRole,
+  className,
+  color,
+  'data-pendoid': dataPendoId,
+  'data-testid': dataTestId,
+  hideAlpha,
+  hideRGB,
+  hideShadow,
+  onChange,
+  presetColors,
+  style,
+  width
+}) => {
+  return jsx(StyledColorPicker, {
+    "$hideShadow": hideShadow,
+    "aria-label": ariaLabel,
+    className: rootClassName,
+    color: color,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    disableAlpha: hideAlpha,
+    editableDisable: !hideRGB,
+    onChange: onChange,
+    prefixCls: className,
+    presetColors: presetColors,
+    role: ariaRole,
+    style: style,
+    width: width
+  });
+};
+
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotColorPicker, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDraggableWindow, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMenuList, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSearch, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotToggleSwitch, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };