@digital-ai/dot-components 2.26.0 → 2.27.0

package/index.esm.js

@@ -62,12 +62,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$17 = 'dot-icon';
+const rootClassName$18 = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$18} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -104,7 +104,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -165,7 +165,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$16 = 'dot-accordion';
+const rootClassName$17 = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -176,7 +176,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$16} .${summaryClassName} {
+    &.${rootClassName$17} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -221,7 +221,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$16,
+  'data-pendoid': dataPendoId = rootClassName$17,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -232,7 +232,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -348,7 +348,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$15 = 'dot-text-field';
+const rootClassName$16 = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
@@ -396,7 +396,7 @@ const StyledTextField = styled(TextField)`
   theme,
   InputProps
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -440,7 +440,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$15} {
+    &.${rootSelectClassName}, &.${rootClassName$16} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -531,15 +531,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$14 = 'dot-action-toolbar';
+const rootClassName$15 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$15} .MuiInputBase-root {
+      .${rootClassName$16} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -553,7 +553,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -563,12 +563,12 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$13 = 'dot-alert-banner';
+const rootClassName$14 = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       align-items: center;
       border-radius: 8px;
       box-sizing: border-box;
@@ -1671,7 +1671,10 @@ const getAvatarColorForInputText = value => {
   const colorOptions = [...Object.keys(avatarColors)];
   if (!value || !colorOptions || colorOptions.length <= 0) return 'default';
   const numberFromValue = calculateNumberFromText(value);
-  return colorOptions[numberFromValue % colorOptions.length];
+  const index = numberFromValue % colorOptions.length;
+  // if number is 9 (transparent), return default color
+  if (index === 9) return 'default';
+  return colorOptions[index];
 };
 const isString$1 = str => typeof str === 'string';
 const isLowerCase = str => str === str.toLowerCase();
@@ -1690,7 +1693,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$14,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1708,7 +1711,7 @@ const DotAlertBanner = ({
     success: AlertBannerIcon('check-solid'),
     warning: AlertBannerIcon('warning-solid')
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$13, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$1(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2357,7 +2360,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$12 = 'dot-avatar';
+const rootClassName$13 = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2367,7 +2370,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2479,7 +2482,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2518,12 +2521,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$11 = 'dot-button';
+const rootClassName$12 = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2607,7 +2610,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$11,
+  'data-pendoid': dataPendoId = rootClassName$12,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2622,7 +2625,7 @@ const DotButton = forwardRef(({
   tooltip,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   let color;
   let variant;
   switch (type) {
@@ -2672,10 +2675,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$10 = 'dot-link';
+const rootClassName$11 = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2691,7 +2694,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$10,
+  'data-pendoid': dataPendoId = rootClassName$11,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2703,7 +2706,7 @@ const DotLink = ({
   tooltip,
   underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$1(children) && !ariaLabel) {
@@ -2753,7 +2756,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$$ = 'dot-list';
+const rootClassName$10 = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2761,7 +2764,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$$} {
+      &.${rootClassName$10} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2844,12 +2847,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$_ = 'dot-progress';
+const rootClassName$$ = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       &.MuiCircularProgress-colorPrimary {
         color: ${theme.palette.figma.inProgress.normal};
       }
@@ -2871,7 +2874,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -2912,35 +2915,35 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$Z = 'dot-popper';
+const rootClassName$_ = 'dot-popper';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
     }
 
-    &.${rootClassName$Z}, &.${rootClassName$Z} > .dot-popper-paper {
+    &.${rootClassName$_}, &.${rootClassName$_} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$Y = 'dot-menu';
+const rootClassName$Z = 'dot-menu';
 const getListMaxHeight = maxHeight => isString$1(maxHeight) ? maxHeight : `${maxHeight}px`;
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$Y}, &.${rootClassName$Z} {
+    &.${rootClassName$Z}, &.${rootClassName$_} {
       &.loading .MuiPaper-root {
         align-items: center;
         display: flex;
@@ -3011,14 +3014,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$X = 'dot-ul';
+const rootClassName$Y = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3114,7 +3117,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3225,7 +3228,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3313,12 +3316,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$W = 'dot-drawer';
+const rootClassName$X = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} .MuiBackdrop-root {
+    &.${rootClassName$X} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3337,12 +3340,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$V = 'dot-drawer-header';
+const rootClassName$W = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3353,13 +3356,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$U = 'dot-icon-btn';
+const rootClassName$V = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3418,7 +3421,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$U,
+  'data-pendoid': dataPendoId = rootClassName$V,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -3430,7 +3433,7 @@ const DotIconButton = ({
   size = 'medium'
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$U, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     title: tooltip,
@@ -3464,7 +3467,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3481,10 +3484,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$T = 'dot-drawer-body';
+const rootClassName$U = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$T} {
+    &.${rootClassName$U} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3505,7 +3508,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3520,12 +3523,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$S = 'dot-drawer-footer';
+const rootClassName$T = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3538,7 +3541,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3554,7 +3557,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$W,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3577,7 +3580,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, 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';
@@ -3947,7 +3950,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const [listItemIndex, setListItemIndex] = useState(null);
@@ -4036,12 +4039,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$R = 'dot-copy-button';
+const rootClassName$S = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$R} .copied-to-clipboard {
+    &.${rootClassName$S} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4067,7 +4070,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$R,
+  'data-pendoid': dataPendoId = rootClassName$S,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4115,7 +4118,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$R,
+    className: rootClassName$S,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4204,7 +4207,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$15,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4250,7 +4253,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$15, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$16, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4386,10 +4389,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$Q = 'dot-search-input';
+const rootClassName$R = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$R} {
     }
   `}
 `;
@@ -4406,7 +4409,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4457,19 +4460,19 @@ function SearchInput({
   });
 }
 
-var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M12.4332 16.3533V14.8333H11.5665V16.3533L10.7432 15.8933L9.85651 16.4033L11.9998 17.6366L14.1932 16.3733L13.3332 15.8766L12.4332 16.3533Z' fill='white'/%3e%3cpath d='M7.99328 10.1866L9.24661 10.9132L9.67995 10.1399L8.36995 9.4299L9.09328 9.01657V8.03323L7.11328 9.18323L7.11661 11.5532L7.99328 11.0566V10.1866Z' fill='white'/%3e%3cpath d='M14.6934 10.9133L15.9934 10.1733L15.99 11.0566L16.8867 11.5599V9.1766L14.81 7.98993L14.7767 8.9566L15.6167 9.45326L14.29 10.0799L14.6934 10.9133Z' fill='white'/%3e%3cpath d='M16.8801 12.5435L16.0001 12.0402V12.0935V13.7068L12.4167 11.6868V7.61015L13.9667 8.49015V7.51682L12.0001 6.35349L9.95006 7.52348V8.52348L11.4967 7.63015V11.6868L8.00006 13.8168V12.0202L7.12006 12.5235V14.8202L8.96672 15.8502L9.86672 15.3335L8.40006 14.5268L12.0001 12.4368L15.5567 14.5035L14.1301 15.3268L15.0567 15.8701L16.8701 14.8268L16.8801 12.5435Z' fill='white'/%3e%3c/svg%3e";
+var img$7 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M12.4332 16.3533V14.8333H11.5665V16.3533L10.7432 15.8933L9.85651 16.4033L11.9998 17.6366L14.1932 16.3733L13.3332 15.8766L12.4332 16.3533Z' fill='white'/%3e%3cpath d='M7.99328 10.1866L9.24661 10.9132L9.67995 10.1399L8.36995 9.4299L9.09328 9.01657V8.03323L7.11328 9.18323L7.11661 11.5532L7.99328 11.0566V10.1866Z' fill='white'/%3e%3cpath d='M14.6934 10.9133L15.9934 10.1733L15.99 11.0566L16.8867 11.5599V9.1766L14.81 7.98993L14.7767 8.9566L15.6167 9.45326L14.29 10.0799L14.6934 10.9133Z' fill='white'/%3e%3cpath d='M16.8801 12.5435L16.0001 12.0402V12.0935V13.7068L12.4167 11.6868V7.61015L13.9667 8.49015V7.51682L12.0001 6.35349L9.95006 7.52348V8.52348L11.4967 7.63015V11.6868L8.00006 13.8168V12.0202L7.12006 12.5235V14.8202L8.96672 15.8502L9.86672 15.3335L8.40006 14.5268L12.0001 12.4368L15.5567 14.5035L14.1301 15.3268L15.0567 15.8701L16.8701 14.8268L16.8801 12.5435Z' fill='white'/%3e%3c/svg%3e";
 
-var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M14.1867 11.2667L12.1634 10.0833L10.1367 11.2667V13.62L12.1634 14.7867L14.1867 13.62V11.2667Z' fill='white'/%3e%3cpath d='M8.43666 12.0001L7.47333 11.1501V15.1667L10.41 16.8367V15.7034L8.43666 14.5401V12.0001Z' fill='white'/%3e%3cpath d='M15.8965 12V14.5833L13.9632 15.7033V16.9367L16.8532 15.1533V11.0967L15.8965 12Z' fill='white'/%3e%3cpath d='M12.1565 8.13333L14.7165 9.61333L15.4165 8.89L12.1565 7L8.87988 8.90667L9.57988 9.63333L12.1565 8.13333Z' fill='white'/%3e%3c/svg%3e";
+var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M14.1867 11.2667L12.1634 10.0833L10.1367 11.2667V13.62L12.1634 14.7867L14.1867 13.62V11.2667Z' fill='white'/%3e%3cpath d='M8.43666 12.0001L7.47333 11.1501V15.1667L10.41 16.8367V15.7034L8.43666 14.5401V12.0001Z' fill='white'/%3e%3cpath d='M15.8965 12V14.5833L13.9632 15.7033V16.9367L16.8532 15.1533V11.0967L15.8965 12Z' fill='white'/%3e%3cpath d='M12.1565 8.13333L14.7165 9.61333L15.4165 8.89L12.1565 7L8.87988 8.90667L9.57988 9.63333L12.1565 8.13333Z' fill='white'/%3e%3c/svg%3e";
 
-var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%2333D389'/%3e%3cpath d='M17.0033 7.62322H16.4567C16.3925 7.62863 16.3324 7.65679 16.2871 7.70264C16.2419 7.74848 16.2146 7.80898 16.21 7.87322V9.14322C15.7432 8.43248 15.1064 7.84955 14.3572 7.44732C13.6081 7.04509 12.7703 6.8363 11.92 6.83989C11.0845 6.84475 10.2627 7.05243 9.52515 7.44508C8.78763 7.83772 8.15649 8.40359 7.68598 9.09405C7.21547 9.7845 6.91966 10.5789 6.82398 11.4089C6.72831 12.2389 6.83562 13.0798 7.13669 13.8592C7.43777 14.6386 7.92361 15.3332 8.55245 15.8834C9.18128 16.4335 9.93431 16.8227 10.7468 17.0176C11.5593 17.2124 12.4069 17.207 13.2169 17.0019C14.0269 16.7967 14.7749 16.398 15.3967 15.8399C15.4257 15.8182 15.4492 15.79 15.4654 15.7576C15.4816 15.7252 15.49 15.6894 15.49 15.6532C15.49 15.617 15.4816 15.5813 15.4654 15.5489C15.4492 15.5165 15.4257 15.4883 15.3967 15.4666L14.9833 15.0532C14.9369 15.0135 14.8778 14.9917 14.8167 14.9917C14.7556 14.9917 14.6965 15.0135 14.65 15.0532C13.9076 15.7352 12.9312 16.1052 11.9233 16.0866C11.1892 16.087 10.4684 15.8897 9.83687 15.5154C9.20531 15.141 8.68627 14.6034 8.33429 13.9591C7.98231 13.3148 7.81039 12.5876 7.83662 11.8539C7.86284 11.1202 8.08624 10.4071 8.48332 9.78959C8.8804 9.17207 9.4365 8.67292 10.0932 8.34461C10.7499 8.0163 11.4828 7.87095 12.2151 7.92384C12.9474 7.97674 13.6519 8.22592 14.2545 8.6452C14.8572 9.06448 15.3358 9.63837 15.64 10.3066H14.1467C14.0828 10.3112 14.0227 10.3387 13.9774 10.384C13.9321 10.4293 13.9046 10.4893 13.9 10.5532V11.0466C13.9046 11.1104 13.9321 11.1705 13.9774 11.2158C14.0227 11.2611 14.0828 11.2886 14.1467 11.2932H17C17.0639 11.2886 17.124 11.2611 17.1693 11.2158C17.2146 11.1705 17.242 11.1104 17.2467 11.0466V7.87322C17.2422 7.8095 17.2154 7.74942 17.1708 7.70364C17.1263 7.65787 17.0669 7.62938 17.0033 7.62322Z' fill='white'/%3e%3cpath d='M12.1232 9.39987C12.1667 9.39747 12.2077 9.37914 12.2384 9.34839C12.2692 9.31764 12.2875 9.27662 12.2899 9.2332C12.2899 9.2332 12.3399 8.8332 12.3399 8.69987C12.3399 8.56653 12.2499 8.4932 12.1666 8.48987C11.5045 8.45232 10.8457 8.60791 10.2703 8.93771C9.69497 9.26752 9.22779 9.75734 8.92557 10.3477C8.62335 10.938 8.4991 11.6034 8.56792 12.263C8.63675 12.9226 8.89568 13.548 9.31325 14.0632C9.83849 14.7239 10.5905 15.1658 11.4232 15.3032C11.5166 15.3032 11.5999 15.2632 11.6299 15.1365C11.6299 15.1365 11.6999 14.8032 11.7132 14.6832C11.7233 14.639 11.7157 14.5927 11.692 14.554C11.6684 14.5154 11.6305 14.4876 11.5866 14.4765C11.225 14.4227 10.8806 14.2869 10.5795 14.0795C10.2785 13.8721 10.029 13.5986 9.84992 13.2799C9.64046 12.9274 9.51393 12.5318 9.47992 12.1232C9.44986 11.7648 9.49697 11.4042 9.61806 11.0655C9.73915 10.7269 9.93142 10.4181 10.1819 10.1601C10.4324 9.90199 10.7353 9.70061 11.0702 9.56947C11.405 9.43834 11.7641 9.38051 12.1232 9.39987Z' fill='white'/%3e%3cpath d='M13.9433 13.1568C13.96 13.1389 13.9724 13.1175 13.9796 13.0942C13.9868 13.0708 13.9885 13.0461 13.9846 13.0219C13.9808 12.9978 13.9714 12.9749 13.9573 12.9549C13.9432 12.9349 13.9247 12.9185 13.9033 12.9068L13.6133 12.7001C13.5739 12.6762 13.5272 12.6674 13.4818 12.6754C13.4364 12.6833 13.3955 12.7075 13.3666 12.7434C13.2321 12.9033 13.0642 13.0318 12.8747 13.12C12.6853 13.2082 12.4789 13.2538 12.2699 13.2538C12.061 13.2538 11.8546 13.2082 11.6651 13.12C11.4757 13.0318 11.3078 12.9033 11.1733 12.7434C11.1277 12.6913 11.0864 12.6356 11.0499 12.5768C10.9268 12.3776 10.8582 12.1495 10.8512 11.9155C10.8442 11.6814 10.8989 11.4496 11.0099 11.2434C11.0314 11.2102 11.0389 11.1699 11.0308 11.1312C11.0227 11.0925 10.9996 11.0585 10.9666 11.0368L10.6333 10.7901C10.5891 10.7715 10.5396 10.7697 10.4942 10.7851C10.4487 10.8004 10.4105 10.8319 10.3866 10.8734C10.2376 11.1465 10.153 11.45 10.1391 11.7608C10.1253 12.0716 10.1825 12.3815 10.3066 12.6668C10.4127 12.938 10.5831 13.1794 10.8033 13.3701C11.1902 13.7461 11.7104 13.9534 12.2499 13.9468C12.5743 13.9565 12.8964 13.8902 13.1905 13.753C13.4845 13.6158 13.7424 13.4116 13.9433 13.1568Z' fill='white'/%3e%3c/svg%3e";
+var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%2333D389'/%3e%3cpath d='M17.0033 7.62322H16.4567C16.3925 7.62863 16.3324 7.65679 16.2871 7.70264C16.2419 7.74848 16.2146 7.80898 16.21 7.87322V9.14322C15.7432 8.43248 15.1064 7.84955 14.3572 7.44732C13.6081 7.04509 12.7703 6.8363 11.92 6.83989C11.0845 6.84475 10.2627 7.05243 9.52515 7.44508C8.78763 7.83772 8.15649 8.40359 7.68598 9.09405C7.21547 9.7845 6.91966 10.5789 6.82398 11.4089C6.72831 12.2389 6.83562 13.0798 7.13669 13.8592C7.43777 14.6386 7.92361 15.3332 8.55245 15.8834C9.18128 16.4335 9.93431 16.8227 10.7468 17.0176C11.5593 17.2124 12.4069 17.207 13.2169 17.0019C14.0269 16.7967 14.7749 16.398 15.3967 15.8399C15.4257 15.8182 15.4492 15.79 15.4654 15.7576C15.4816 15.7252 15.49 15.6894 15.49 15.6532C15.49 15.617 15.4816 15.5813 15.4654 15.5489C15.4492 15.5165 15.4257 15.4883 15.3967 15.4666L14.9833 15.0532C14.9369 15.0135 14.8778 14.9917 14.8167 14.9917C14.7556 14.9917 14.6965 15.0135 14.65 15.0532C13.9076 15.7352 12.9312 16.1052 11.9233 16.0866C11.1892 16.087 10.4684 15.8897 9.83687 15.5154C9.20531 15.141 8.68627 14.6034 8.33429 13.9591C7.98231 13.3148 7.81039 12.5876 7.83662 11.8539C7.86284 11.1202 8.08624 10.4071 8.48332 9.78959C8.8804 9.17207 9.4365 8.67292 10.0932 8.34461C10.7499 8.0163 11.4828 7.87095 12.2151 7.92384C12.9474 7.97674 13.6519 8.22592 14.2545 8.6452C14.8572 9.06448 15.3358 9.63837 15.64 10.3066H14.1467C14.0828 10.3112 14.0227 10.3387 13.9774 10.384C13.9321 10.4293 13.9046 10.4893 13.9 10.5532V11.0466C13.9046 11.1104 13.9321 11.1705 13.9774 11.2158C14.0227 11.2611 14.0828 11.2886 14.1467 11.2932H17C17.0639 11.2886 17.124 11.2611 17.1693 11.2158C17.2146 11.1705 17.242 11.1104 17.2467 11.0466V7.87322C17.2422 7.8095 17.2154 7.74942 17.1708 7.70364C17.1263 7.65787 17.0669 7.62938 17.0033 7.62322Z' fill='white'/%3e%3cpath d='M12.1232 9.39987C12.1667 9.39747 12.2077 9.37914 12.2384 9.34839C12.2692 9.31764 12.2875 9.27662 12.2899 9.2332C12.2899 9.2332 12.3399 8.8332 12.3399 8.69987C12.3399 8.56653 12.2499 8.4932 12.1666 8.48987C11.5045 8.45232 10.8457 8.60791 10.2703 8.93771C9.69497 9.26752 9.22779 9.75734 8.92557 10.3477C8.62335 10.938 8.4991 11.6034 8.56792 12.263C8.63675 12.9226 8.89568 13.548 9.31325 14.0632C9.83849 14.7239 10.5905 15.1658 11.4232 15.3032C11.5166 15.3032 11.5999 15.2632 11.6299 15.1365C11.6299 15.1365 11.6999 14.8032 11.7132 14.6832C11.7233 14.639 11.7157 14.5927 11.692 14.554C11.6684 14.5154 11.6305 14.4876 11.5866 14.4765C11.225 14.4227 10.8806 14.2869 10.5795 14.0795C10.2785 13.8721 10.029 13.5986 9.84992 13.2799C9.64046 12.9274 9.51393 12.5318 9.47992 12.1232C9.44986 11.7648 9.49697 11.4042 9.61806 11.0655C9.73915 10.7269 9.93142 10.4181 10.1819 10.1601C10.4324 9.90199 10.7353 9.70061 11.0702 9.56947C11.405 9.43834 11.7641 9.38051 12.1232 9.39987Z' fill='white'/%3e%3cpath d='M13.9433 13.1568C13.96 13.1389 13.9724 13.1175 13.9796 13.0942C13.9868 13.0708 13.9885 13.0461 13.9846 13.0219C13.9808 12.9978 13.9714 12.9749 13.9573 12.9549C13.9432 12.9349 13.9247 12.9185 13.9033 12.9068L13.6133 12.7001C13.5739 12.6762 13.5272 12.6674 13.4818 12.6754C13.4364 12.6833 13.3955 12.7075 13.3666 12.7434C13.2321 12.9033 13.0642 13.0318 12.8747 13.12C12.6853 13.2082 12.4789 13.2538 12.2699 13.2538C12.061 13.2538 11.8546 13.2082 11.6651 13.12C11.4757 13.0318 11.3078 12.9033 11.1733 12.7434C11.1277 12.6913 11.0864 12.6356 11.0499 12.5768C10.9268 12.3776 10.8582 12.1495 10.8512 11.9155C10.8442 11.6814 10.8989 11.4496 11.0099 11.2434C11.0314 11.2102 11.0389 11.1699 11.0308 11.1312C11.0227 11.0925 10.9996 11.0585 10.9666 11.0368L10.6333 10.7901C10.5891 10.7715 10.5396 10.7697 10.4942 10.7851C10.4487 10.8004 10.4105 10.8319 10.3866 10.8734C10.2376 11.1465 10.153 11.45 10.1391 11.7608C10.1253 12.0716 10.1825 12.3815 10.3066 12.6668C10.4127 12.938 10.5831 13.1794 10.8033 13.3701C11.1902 13.7461 11.7104 13.9534 12.2499 13.9468C12.5743 13.9565 12.8964 13.8902 13.1905 13.753C13.4845 13.6158 13.7424 13.4116 13.9433 13.1568Z' fill='white'/%3e%3c/svg%3e";
 
-var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M17.6865 10.0334C17.3062 9.49067 16.7772 9.06934 16.1632 8.82008C15.6426 8.61932 15.0801 8.55138 14.5267 8.62237C13.9733 8.69337 13.4462 8.90108 12.9932 9.22674C12.4991 9.62868 12.0519 10.0849 11.6598 10.5867L11.4232 10.8534L13.0198 11.5434L13.1498 11.4067C13.4002 11.1158 13.6697 10.8419 13.9565 10.5867C14.1891 10.4177 14.4599 10.3085 14.7448 10.269C15.0297 10.2294 15.3199 10.2607 15.5898 10.3601C15.916 10.4798 16.1929 10.7051 16.3765 11.0001C16.5305 11.2108 16.6383 11.4516 16.6932 11.7067C16.7448 11.9619 16.7448 12.2249 16.6932 12.4801C16.6319 12.8145 16.4783 13.125 16.2498 13.3767C16.0471 13.5809 15.7972 13.7319 15.5221 13.8162C15.2471 13.9005 14.9554 13.9156 14.6732 13.8601C14.318 13.7558 13.9714 13.6243 13.6365 13.4667L13.4598 13.3967L12.3032 14.6934L12.6365 14.8367C13.196 15.1144 13.7809 15.3376 14.3832 15.5034C14.841 15.5831 15.3102 15.5706 15.7632 15.4667C16.4116 15.3301 17.0012 14.9945 17.4498 14.5067C17.907 14.0252 18.2099 13.4182 18.3198 12.7634C18.4116 12.2979 18.4116 11.8189 18.3198 11.3534C18.186 10.8803 17.9717 10.4338 17.6865 10.0334Z' fill='white'/%3e%3cpath d='M12.8401 13.0499L11.2468 12.3599L11.1168 12.4966C10.8669 12.7942 10.5962 13.0738 10.3068 13.3332C10.0741 13.5023 9.80337 13.6115 9.51849 13.651C9.2336 13.6905 8.94336 13.6593 8.67345 13.5599C8.35219 13.4397 8.07852 13.2187 7.89345 12.9299C7.74251 12.7191 7.63591 12.4798 7.58012 12.2266C7.51653 11.9342 7.52262 11.6311 7.5979 11.3415C7.67318 11.052 7.81553 10.7842 8.01345 10.5599C8.2156 10.3551 8.46564 10.2039 8.74095 10.1201C9.01626 10.0363 9.30813 10.0225 9.59012 10.0799C9.94807 10.1781 10.2971 10.3063 10.6335 10.4632L10.8101 10.5299L11.9668 9.23324L11.6735 9.11324C11.1141 8.8326 10.5278 8.60924 9.92345 8.44657C9.37154 8.32869 8.79848 8.35611 8.26035 8.52614C7.72222 8.69617 7.23744 9.00299 6.85345 9.41657C6.38782 9.89208 6.08347 10.5019 5.98345 11.1599C5.88532 11.6248 5.88532 12.105 5.98345 12.5699C6.08588 13.0347 6.28211 13.4736 6.56012 13.8599C6.92983 14.4125 7.46217 14.8365 8.08345 15.0732C8.69864 15.3134 9.37049 15.369 10.0168 15.2332C10.4725 15.1299 10.9023 14.9348 11.2801 14.6599C11.7741 14.258 12.2214 13.8018 12.6135 13.2999L12.8401 13.0499Z' fill='white'/%3e%3c/svg%3e";
+var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M17.6865 10.0334C17.3062 9.49067 16.7772 9.06934 16.1632 8.82008C15.6426 8.61932 15.0801 8.55138 14.5267 8.62237C13.9733 8.69337 13.4462 8.90108 12.9932 9.22674C12.4991 9.62868 12.0519 10.0849 11.6598 10.5867L11.4232 10.8534L13.0198 11.5434L13.1498 11.4067C13.4002 11.1158 13.6697 10.8419 13.9565 10.5867C14.1891 10.4177 14.4599 10.3085 14.7448 10.269C15.0297 10.2294 15.3199 10.2607 15.5898 10.3601C15.916 10.4798 16.1929 10.7051 16.3765 11.0001C16.5305 11.2108 16.6383 11.4516 16.6932 11.7067C16.7448 11.9619 16.7448 12.2249 16.6932 12.4801C16.6319 12.8145 16.4783 13.125 16.2498 13.3767C16.0471 13.5809 15.7972 13.7319 15.5221 13.8162C15.2471 13.9005 14.9554 13.9156 14.6732 13.8601C14.318 13.7558 13.9714 13.6243 13.6365 13.4667L13.4598 13.3967L12.3032 14.6934L12.6365 14.8367C13.196 15.1144 13.7809 15.3376 14.3832 15.5034C14.841 15.5831 15.3102 15.5706 15.7632 15.4667C16.4116 15.3301 17.0012 14.9945 17.4498 14.5067C17.907 14.0252 18.2099 13.4182 18.3198 12.7634C18.4116 12.2979 18.4116 11.8189 18.3198 11.3534C18.186 10.8803 17.9717 10.4338 17.6865 10.0334Z' fill='white'/%3e%3cpath d='M12.8401 13.0499L11.2468 12.3599L11.1168 12.4966C10.8669 12.7942 10.5962 13.0738 10.3068 13.3332C10.0741 13.5023 9.80337 13.6115 9.51849 13.651C9.2336 13.6905 8.94336 13.6593 8.67345 13.5599C8.35219 13.4397 8.07852 13.2187 7.89345 12.9299C7.74251 12.7191 7.63591 12.4798 7.58012 12.2266C7.51653 11.9342 7.52262 11.6311 7.5979 11.3415C7.67318 11.052 7.81553 10.7842 8.01345 10.5599C8.2156 10.3551 8.46564 10.2039 8.74095 10.1201C9.01626 10.0363 9.30813 10.0225 9.59012 10.0799C9.94807 10.1781 10.2971 10.3063 10.6335 10.4632L10.8101 10.5299L11.9668 9.23324L11.6735 9.11324C11.1141 8.8326 10.5278 8.60924 9.92345 8.44657C9.37154 8.32869 8.79848 8.35611 8.26035 8.52614C7.72222 8.69617 7.23744 9.00299 6.85345 9.41657C6.38782 9.89208 6.08347 10.5019 5.98345 11.1599C5.88532 11.6248 5.88532 12.105 5.98345 12.5699C6.08588 13.0347 6.28211 13.4736 6.56012 13.8599C6.92983 14.4125 7.46217 14.8365 8.08345 15.0732C8.69864 15.3134 9.37049 15.369 10.0168 15.2332C10.4725 15.1299 10.9023 14.9348 11.2801 14.6599C11.7741 14.258 12.2214 13.8018 12.6135 13.2999L12.8401 13.0499Z' fill='white'/%3e%3c/svg%3e";
 
-var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23F7B731'/%3e%3cpath d='M17.0168 10.4836C16.8598 10.4819 16.704 10.5111 16.5583 10.5697C16.4126 10.6282 16.2799 10.715 16.1679 10.8249C16.0558 10.9348 15.9665 11.0658 15.9051 11.2103C15.8437 11.3548 15.8114 11.51 15.8101 11.667C15.8125 11.8887 15.8759 12.1056 15.9934 12.2936L15.3268 13.0036C15.1062 12.8766 14.8516 12.8214 14.5982 12.8459C14.3449 12.8704 14.1055 12.9733 13.9134 13.1403L13.2168 12.667C13.3204 12.3753 13.3514 12.0627 13.307 11.7564C13.2626 11.45 13.1441 11.1591 12.9619 10.9089C12.7796 10.6587 12.5391 10.4567 12.2611 10.3204C11.9832 10.1842 11.6762 10.1178 11.3668 10.127C10.9257 10.1237 10.4963 10.268 10.1468 10.537L9.2801 9.74364C9.38078 9.56935 9.43368 9.37158 9.43343 9.1703C9.43084 9.01345 9.39725 8.85866 9.33461 8.71484C9.27197 8.57101 9.18151 8.44099 9.06844 8.33225C8.95537 8.22352 8.82191 8.13821 8.67575 8.08124C8.52958 8.02427 8.3736 7.99677 8.21677 8.0003C7.89915 8.00103 7.59426 8.12525 7.36658 8.34671C7.13891 8.56817 7.00628 8.86949 6.99677 9.18697C6.99848 9.34467 7.03153 9.50046 7.09399 9.64528C7.15645 9.7901 7.24707 9.92106 7.36059 10.0305C7.4741 10.14 7.60825 10.2259 7.75524 10.283C7.90222 10.3402 8.0591 10.3676 8.21677 10.3636C8.43906 10.3609 8.65657 10.2987 8.84677 10.1836L9.71343 10.977C9.49991 11.2949 9.3884 11.6704 9.39376 12.0533C9.39912 12.4363 9.5211 12.8085 9.74343 13.1203L9.07677 13.8303C8.87595 13.7162 8.64759 13.6597 8.41677 13.667C8.18607 13.6729 7.96224 13.7467 7.77327 13.8791C7.5843 14.0116 7.43859 14.1968 7.35437 14.4117C7.27015 14.6265 7.25115 14.8615 7.29975 15.087C7.34836 15.3126 7.46241 15.5189 7.62763 15.68C7.79286 15.8411 8.00192 15.9499 8.22867 15.9928C8.45542 16.0357 8.68978 16.0108 8.90244 15.9212C9.11509 15.8315 9.2966 15.6812 9.42425 15.4889C9.5519 15.2967 9.62002 15.0711 9.6201 14.8403C9.61839 14.6452 9.57041 14.4533 9.4801 14.2803L10.1468 13.5703C10.5613 13.8772 11.0792 14.0102 11.5902 13.9411C12.1013 13.872 12.5653 13.6062 12.8834 13.2003L13.5501 13.637C13.5048 13.7597 13.4811 13.8894 13.4801 14.0203C13.4963 14.3289 13.6304 14.6196 13.8546 14.8323C14.0788 15.045 14.376 15.1636 14.6851 15.1636C14.9942 15.1636 15.2914 15.045 15.5156 14.8323C15.7398 14.6196 15.8739 14.3289 15.8901 14.0203C15.8923 13.8081 15.8333 13.5998 15.7201 13.4203L16.3868 12.7103C16.5613 12.81 16.7591 12.8617 16.9601 12.8603C17.1212 12.8706 17.2827 12.8481 17.4348 12.794C17.5869 12.74 17.7264 12.6555 17.8448 12.5458C17.9633 12.4361 18.0581 12.3035 18.1237 12.156C18.1893 12.0085 18.2241 11.8492 18.2261 11.6878C18.2282 11.5264 18.1974 11.3662 18.1356 11.2171C18.0737 11.068 17.9822 10.933 17.8666 10.8203C17.751 10.7077 17.6137 10.6198 17.463 10.5619C17.3123 10.504 17.1514 10.4774 16.9901 10.4836H17.0168ZM11.3501 13.2436C11.1161 13.2377 10.8891 13.163 10.6973 13.0287C10.5056 12.8944 10.3578 12.7065 10.2723 12.4886C10.1868 12.2707 10.1675 12.0325 10.2167 11.8036C10.266 11.5748 10.3816 11.3656 10.5492 11.2021C10.7167 11.0387 10.9288 10.9283 11.1588 10.8848C11.3887 10.8412 11.6264 10.8665 11.8422 10.9574C12.0579 11.0483 12.242 11.2007 12.3714 11.3957C12.5009 11.5907 12.57 11.8196 12.5701 12.0536C12.5657 12.3719 12.4357 12.6756 12.2085 12.8985C11.9812 13.1214 11.6751 13.2454 11.3568 13.2436H11.3501Z' fill='white'/%3e%3c/svg%3e";
+var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23F7B731'/%3e%3cpath d='M17.0168 10.4836C16.8598 10.4819 16.704 10.5111 16.5583 10.5697C16.4126 10.6282 16.2799 10.715 16.1679 10.8249C16.0558 10.9348 15.9665 11.0658 15.9051 11.2103C15.8437 11.3548 15.8114 11.51 15.8101 11.667C15.8125 11.8887 15.8759 12.1056 15.9934 12.2936L15.3268 13.0036C15.1062 12.8766 14.8516 12.8214 14.5982 12.8459C14.3449 12.8704 14.1055 12.9733 13.9134 13.1403L13.2168 12.667C13.3204 12.3753 13.3514 12.0627 13.307 11.7564C13.2626 11.45 13.1441 11.1591 12.9619 10.9089C12.7796 10.6587 12.5391 10.4567 12.2611 10.3204C11.9832 10.1842 11.6762 10.1178 11.3668 10.127C10.9257 10.1237 10.4963 10.268 10.1468 10.537L9.2801 9.74364C9.38078 9.56935 9.43368 9.37158 9.43343 9.1703C9.43084 9.01345 9.39725 8.85866 9.33461 8.71484C9.27197 8.57101 9.18151 8.44099 9.06844 8.33225C8.95537 8.22352 8.82191 8.13821 8.67575 8.08124C8.52958 8.02427 8.3736 7.99677 8.21677 8.0003C7.89915 8.00103 7.59426 8.12525 7.36658 8.34671C7.13891 8.56817 7.00628 8.86949 6.99677 9.18697C6.99848 9.34467 7.03153 9.50046 7.09399 9.64528C7.15645 9.7901 7.24707 9.92106 7.36059 10.0305C7.4741 10.14 7.60825 10.2259 7.75524 10.283C7.90222 10.3402 8.0591 10.3676 8.21677 10.3636C8.43906 10.3609 8.65657 10.2987 8.84677 10.1836L9.71343 10.977C9.49991 11.2949 9.3884 11.6704 9.39376 12.0533C9.39912 12.4363 9.5211 12.8085 9.74343 13.1203L9.07677 13.8303C8.87595 13.7162 8.64759 13.6597 8.41677 13.667C8.18607 13.6729 7.96224 13.7467 7.77327 13.8791C7.5843 14.0116 7.43859 14.1968 7.35437 14.4117C7.27015 14.6265 7.25115 14.8615 7.29975 15.087C7.34836 15.3126 7.46241 15.5189 7.62763 15.68C7.79286 15.8411 8.00192 15.9499 8.22867 15.9928C8.45542 16.0357 8.68978 16.0108 8.90244 15.9212C9.11509 15.8315 9.2966 15.6812 9.42425 15.4889C9.5519 15.2967 9.62002 15.0711 9.6201 14.8403C9.61839 14.6452 9.57041 14.4533 9.4801 14.2803L10.1468 13.5703C10.5613 13.8772 11.0792 14.0102 11.5902 13.9411C12.1013 13.872 12.5653 13.6062 12.8834 13.2003L13.5501 13.637C13.5048 13.7597 13.4811 13.8894 13.4801 14.0203C13.4963 14.3289 13.6304 14.6196 13.8546 14.8323C14.0788 15.045 14.376 15.1636 14.6851 15.1636C14.9942 15.1636 15.2914 15.045 15.5156 14.8323C15.7398 14.6196 15.8739 14.3289 15.8901 14.0203C15.8923 13.8081 15.8333 13.5998 15.7201 13.4203L16.3868 12.7103C16.5613 12.81 16.7591 12.8617 16.9601 12.8603C17.1212 12.8706 17.2827 12.8481 17.4348 12.794C17.5869 12.74 17.7264 12.6555 17.8448 12.5458C17.9633 12.4361 18.0581 12.3035 18.1237 12.156C18.1893 12.0085 18.2241 11.8492 18.2261 11.6878C18.2282 11.5264 18.1974 11.3662 18.1356 11.2171C18.0737 11.068 17.9822 10.933 17.8666 10.8203C17.751 10.7077 17.6137 10.6198 17.463 10.5619C17.3123 10.504 17.1514 10.4774 16.9901 10.4836H17.0168ZM11.3501 13.2436C11.1161 13.2377 10.8891 13.163 10.6973 13.0287C10.5056 12.8944 10.3578 12.7065 10.2723 12.4886C10.1868 12.2707 10.1675 12.0325 10.2167 11.8036C10.266 11.5748 10.3816 11.3656 10.5492 11.2021C10.7167 11.0387 10.9288 10.9283 11.1588 10.8848C11.3887 10.8412 11.6264 10.8665 11.8422 10.9574C12.0579 11.0483 12.242 11.2007 12.3714 11.3957C12.5009 11.5907 12.57 11.8196 12.5701 12.0536C12.5657 12.3719 12.4357 12.6756 12.2085 12.8985C11.9812 13.1214 11.6751 13.2454 11.3568 13.2436H11.3501Z' fill='white'/%3e%3c/svg%3e";
 
-var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23205AB7'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0859 8.30868C16.4108 8.42839 16.6831 8.6593 16.8542 8.96074L16.8628 8.97583L16.8705 8.99134C17.0174 9.28464 17.0775 9.61353 17.0441 9.93936C17.0123 11.03 16.8132 12.1093 16.4535 13.1395L16.4528 13.1415C16.1368 14.0377 15.4456 15.1335 14.6589 16.0108C14.2622 16.4533 13.8228 16.8611 13.3705 17.1668C12.9284 17.4656 12.4155 17.7067 11.8835 17.7262L11.8597 17.7271L11.8358 17.7262C11.291 17.7072 10.7708 17.4701 10.3204 17.1682C9.86244 16.8612 9.42376 16.4516 9.03057 16.0079C8.24999 15.1271 7.57941 14.0321 7.26533 13.1415L7.2645 13.1391C6.90532 12.1083 6.70674 11.0285 6.67566 9.93751C6.64229 9.61177 6.70236 9.28297 6.84922 8.98974L6.85684 8.97453L6.86522 8.95974C7.03585 8.65846 7.30747 8.42744 7.63179 8.30728L11.3874 6.76891C11.4429 6.74689 11.4996 6.7281 11.5571 6.71254C11.7538 6.6514 11.9644 6.6514 12.161 6.71254C12.2186 6.7281 12.2753 6.74693 12.3307 6.76895L12.3374 6.77159L16.0859 8.30868ZM11.9735 7.35255C11.8994 7.32695 11.8188 7.32695 11.7447 7.35255C11.7069 7.36213 11.6698 7.37415 11.6335 7.38855L7.87245 8.92913C7.69157 8.99369 7.53996 9.12117 7.44531 9.28828C7.35196 9.47467 7.31578 9.6845 7.34132 9.89139C7.36791 10.9234 7.55437 11.9449 7.89404 12.9198C8.45396 14.5075 10.3737 17.008 11.8591 17.06C13.2749 17.008 15.2642 14.5075 15.8241 12.9198C16.1642 11.9455 16.3512 10.9245 16.3784 9.89299C16.404 9.6861 16.3678 9.47627 16.2745 9.28988C16.1794 9.12247 16.0272 8.99495 15.8457 8.93073L12.0847 7.38855C12.0484 7.37415 12.0113 7.36213 11.9735 7.35255Z' fill='white'/%3e%3cpath d='M11.8631 8.29559L8.22357 9.77059V10.8904L11.8631 9.33705L15.5025 10.8904V9.77059L11.8631 8.29559Z' fill='white'/%3e%3cpath d='M10.6184 15.718C10.7942 16.0092 11.3957 16.4678 11.8633 16.4774C12.3078 16.4678 12.9324 16.0092 13.108 15.718C13.2835 15.4268 10.4426 15.427 10.6184 15.718Z' fill='white'/%3e%3c/svg%3e";
+var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23205AB7'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0859 8.30868C16.4108 8.42839 16.6831 8.6593 16.8542 8.96074L16.8628 8.97583L16.8705 8.99134C17.0174 9.28464 17.0775 9.61353 17.0441 9.93936C17.0123 11.03 16.8132 12.1093 16.4535 13.1395L16.4528 13.1415C16.1368 14.0377 15.4456 15.1335 14.6589 16.0108C14.2622 16.4533 13.8228 16.8611 13.3705 17.1668C12.9284 17.4656 12.4155 17.7067 11.8835 17.7262L11.8597 17.7271L11.8358 17.7262C11.291 17.7072 10.7708 17.4701 10.3204 17.1682C9.86244 16.8612 9.42376 16.4516 9.03057 16.0079C8.24999 15.1271 7.57941 14.0321 7.26533 13.1415L7.2645 13.1391C6.90532 12.1083 6.70674 11.0285 6.67566 9.93751C6.64229 9.61177 6.70236 9.28297 6.84922 8.98974L6.85684 8.97453L6.86522 8.95974C7.03585 8.65846 7.30747 8.42744 7.63179 8.30728L11.3874 6.76891C11.4429 6.74689 11.4996 6.7281 11.5571 6.71254C11.7538 6.6514 11.9644 6.6514 12.161 6.71254C12.2186 6.7281 12.2753 6.74693 12.3307 6.76895L12.3374 6.77159L16.0859 8.30868ZM11.9735 7.35255C11.8994 7.32695 11.8188 7.32695 11.7447 7.35255C11.7069 7.36213 11.6698 7.37415 11.6335 7.38855L7.87245 8.92913C7.69157 8.99369 7.53996 9.12117 7.44531 9.28828C7.35196 9.47467 7.31578 9.6845 7.34132 9.89139C7.36791 10.9234 7.55437 11.9449 7.89404 12.9198C8.45396 14.5075 10.3737 17.008 11.8591 17.06C13.2749 17.008 15.2642 14.5075 15.8241 12.9198C16.1642 11.9455 16.3512 10.9245 16.3784 9.89299C16.404 9.6861 16.3678 9.47627 16.2745 9.28988C16.1794 9.12247 16.0272 8.99495 15.8457 8.93073L12.0847 7.38855C12.0484 7.37415 12.0113 7.36213 11.9735 7.35255Z' fill='white'/%3e%3cpath d='M11.8631 8.29559L8.22357 9.77059V10.8904L11.8631 9.33705L15.5025 10.8904V9.77059L11.8631 8.29559Z' fill='white'/%3e%3cpath d='M10.6184 15.718C10.7942 16.0092 11.3957 16.4678 11.8633 16.4774C12.3078 16.4678 12.9324 16.0092 13.108 15.718C13.2835 15.4268 10.4426 15.427 10.6184 15.718Z' fill='white'/%3e%3c/svg%3e";
 
-var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='-8 -8 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M19.7521 0.348161H20.3976V2.23694H20.7722L20.7752 0.351063H21.4208V0.00290065L19.7521 0V0.348161Z' fill='%232B2B2B'/%3e %3cpath d='M22.31 0.00290065H21.7223V2.23114H22.0785L22.0816 0.438104H22.0877L22.718 2.23404H22.9799L23.6224 0.441005H23.6285L23.6255 2.23404H23.997L24 0.00290065H23.4093L22.8642 1.58994H22.8551L22.31 0.00290065Z' fill='%232B2B2B'/%3e %3cpath d='M16.4863 0C15.3048 0 14.5435 0.713733 14.5435 1.81915L14.5374 8.1557C13.3194 6.89362 11.4893 6.20309 9.34245 6.20019C4.36976 6.19729 0.00609663 10.3636 6.37628e-06 15.1219C-0.00608387 19.8453 4.35149 23.9942 9.32114 24C11.5258 24.0029 13.5904 22.9207 14.6836 21.853C14.8968 23.0135 15.6306 23.6489 16.7726 23.6489C17.7165 23.6489 18.4017 22.9584 18.4047 22.0068L18.4291 1.82495C18.4291 0.734042 17.6496 0.00290135 16.4863 0ZM9.28764 20.0803C6.42218 20.0774 4.08961 17.852 4.09266 15.1161C4.0957 12.383 6.43131 10.1605 9.29677 10.1634C12.1622 10.1663 14.4948 12.3917 14.4918 15.1277C14.4887 17.8607 12.1531 20.0832 9.28764 20.0803Z' fill='%232B2B2B'/%3e %3cpath d='M9.29431 11.7998C7.3363 11.7998 5.74979 13.3143 5.74979 15.1799C5.74979 17.0455 7.3363 18.56 9.29431 18.56C11.2523 18.56 12.8419 17.0455 12.8419 15.1799C12.8419 13.3143 11.2523 11.7998 9.29431 11.7998Z' fill='%23517934'/%3e%3c/svg%3e";
+var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='-8 -8 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M19.7521 0.348161H20.3976V2.23694H20.7722L20.7752 0.351063H21.4208V0.00290065L19.7521 0V0.348161Z' fill='%232B2B2B'/%3e %3cpath d='M22.31 0.00290065H21.7223V2.23114H22.0785L22.0816 0.438104H22.0877L22.718 2.23404H22.9799L23.6224 0.441005H23.6285L23.6255 2.23404H23.997L24 0.00290065H23.4093L22.8642 1.58994H22.8551L22.31 0.00290065Z' fill='%232B2B2B'/%3e %3cpath d='M16.4863 0C15.3048 0 14.5435 0.713733 14.5435 1.81915L14.5374 8.1557C13.3194 6.89362 11.4893 6.20309 9.34245 6.20019C4.36976 6.19729 0.00609663 10.3636 6.37628e-06 15.1219C-0.00608387 19.8453 4.35149 23.9942 9.32114 24C11.5258 24.0029 13.5904 22.9207 14.6836 21.853C14.8968 23.0135 15.6306 23.6489 16.7726 23.6489C17.7165 23.6489 18.4017 22.9584 18.4047 22.0068L18.4291 1.82495C18.4291 0.734042 17.6496 0.00290135 16.4863 0ZM9.28764 20.0803C6.42218 20.0774 4.08961 17.852 4.09266 15.1161C4.0957 12.383 6.43131 10.1605 9.29677 10.1634C12.1622 10.1663 14.4948 12.3917 14.4918 15.1277C14.4887 17.8607 12.1531 20.0832 9.28764 20.0803Z' fill='%232B2B2B'/%3e %3cpath d='M9.29431 11.7998C7.3363 11.7998 5.74979 13.3143 5.74979 15.1799C5.74979 17.0455 7.3363 18.56 9.29431 18.56C11.2523 18.56 12.8419 17.0455 12.8419 15.1799C12.8419 13.3143 11.2523 11.7998 9.29431 11.7998Z' fill='%23517934'/%3e%3c/svg%3e";
 
 // Takes a appType name and returns its logo as a data url.
 // If appType does not exist the Digital.ai logo is returned.
@@ -4477,31 +4480,31 @@ const getLogoForAppType = appType => {
   switch (appType) {
     case 'Release':
       {
-        return img$6;
+        return img$7;
       }
     case 'Deploy':
       {
-        return img$5;
+        return img$6;
       }
     case 'Agility':
       {
-        return img$4;
+        return img$5;
       }
     case 'Continuous Testing':
       {
-        return img$3;
+        return img$4;
       }
     case 'Intelligence':
       {
-        return img$2;
+        return img$3;
       }
     case 'Application Protection':
       {
-        return img$1;
+        return img$2;
       }
     default:
       {
-        return img;
+        return img$1;
       }
   }
 };
@@ -4662,12 +4665,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$P = 'dot-app-switcher';
+const rootClassName$Q = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$Q} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -4777,7 +4780,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5155,12 +5158,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$O = 'dot-sidebar';
+const rootClassName$P = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$O} {
+    &.${rootClassName$P} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5434,10 +5437,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$N = 'dot-truncate-with-tooltip';
+const rootClassName$O = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$O} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5468,7 +5471,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5578,7 +5581,7 @@ const DotSidebar = ({
     setIsOpen(!isOpen);
   };
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$O, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5645,12 +5648,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$M = 'dot-badge';
+const rootClassName$N = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$N} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5685,7 +5688,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$M, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5707,7 +5710,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$L = 'dot-app-toolbar';
+const rootClassName$M = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5747,7 +5750,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$M} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -5869,7 +5872,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -5999,14 +6002,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$K = 'dot-autocomplete';
+const rootClassName$L = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$K} {
+    &.${rootClassName$L} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6043,12 +6046,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$J = 'dot-chip';
+const rootClassName$K = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$K} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6154,7 +6157,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$J,
+  'data-pendoid': dataPendoId = rootClassName$K,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6166,7 +6169,7 @@ const DotChip = ({
   startIcon
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$J, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$K, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6264,7 +6267,7 @@ const DotAutoComplete = ({
   ariaLabel,
   autoFocus,
   className,
-  'data-pendoid': dataPendoId = rootClassName$K,
+  'data-pendoid': dataPendoId = rootClassName$L,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6296,6 +6299,7 @@ const DotAutoComplete = ({
   persistentLabel,
   placeholder,
   readOnly = false,
+  renderGroup,
   renderOption,
   renderTags,
   required = false,
@@ -6314,8 +6318,8 @@ const DotAutoComplete = ({
   const popperOpen = !readOnly && (open || isOpened);
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(rootClassName$K, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$15, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$16, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
   let highlightedOption = null;
   let textFieldInput;
@@ -6360,7 +6364,7 @@ const DotAutoComplete = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const DotPopper = props => {
     if (!isActionItemDefined) return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$Z,
+      className: rootClassName$_,
       disablePortal: disablePortal,
       "$maxHeight": maxHeight
     }));
@@ -6382,7 +6386,7 @@ const DotAutoComplete = ({
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
     return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$Z,
+      className: rootClassName$_,
       disablePortal: disablePortal,
       "$maxHeight": maxHeight,
       children: jsxs(Paper, Object.assign({}, paperProps, {
@@ -6583,6 +6587,7 @@ const DotAutoComplete = ({
         })
       );
     },
+    renderGroup: group ? renderGroup : undefined,
     renderOption: renderOption,
     renderTags: handleTagsRender(),
     size: size,
@@ -6590,10 +6595,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$I = 'dot-avatar-group';
+const rootClassName$J = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$I} {
+      &.${rootClassName$J} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6612,7 +6617,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6627,13 +6632,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$H = 'dot-breadcrumbs';
+const rootClassName$I = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6653,7 +6658,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -6981,7 +6986,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$H,
+        root: rootClassName$I,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7012,14 +7017,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$G = 'dot-button-toggle';
+const rootClassName$H = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$H} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7135,7 +7140,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$G,
+  'data-pendoid': dataPendoId = rootClassName$H,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7145,7 +7150,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7228,12 +7233,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$F = 'dot-card';
+const rootClassName$G = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$F} {
+    &.${rootClassName$G} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7245,7 +7250,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7274,12 +7279,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$E = 'dot-card-footer';
+const rootClassName$F = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$E} {
+    &.${rootClassName$F} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7291,7 +7296,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7335,9 +7340,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$D = 'dot-form-control-label';
+const rootClassName$E = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$D} {
+  &.${rootClassName$E} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -7360,12 +7365,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$C = 'dot-checkbox';
+const rootClassName$D = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$C} {
+    &.${rootClassName$D} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -7384,7 +7389,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$D,
+  'data-pendoid': dataPendoId = rootClassName$E,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7399,14 +7404,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$C
+      root: rootClassName$D
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -7435,13 +7440,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$B = 'dot-form-group';
+const rootClassName$C = '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$B} {
+  &.${rootClassName$C} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -7472,7 +7477,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$A = 'dot-checkbox-group';
+const rootClassName$B = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -7481,7 +7486,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$A} {
+      .${rootClassName$B} {
         width: 100%;
       }
 
@@ -7504,7 +7509,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$D} {
+        .${rootClassName$E} {
           margin: 0;
         }
       }
@@ -7512,13 +7517,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$z = 'dot-form-group';
+const rootClassName$A = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$z} > * {
+    &.${rootClassName$A} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -7531,7 +7536,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7570,7 +7575,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$B, rootClassName$A, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, rootClassName$B, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -7655,12 +7660,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$y = 'dot-dialog';
+const rootClassName$z = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$y} {
+    &.${rootClassName$z} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -7706,7 +7711,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$y,
+  'data-pendoid': dataPendoId = rootClassName$z,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -7719,7 +7724,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   useEffect(() => {
@@ -7837,7 +7842,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$x = 'dot-grid';
+const rootClassName$y = '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`};
@@ -7889,7 +7894,7 @@ const Grid = ({
   className,
   children
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
   return jsx("div", {
     className: rootClasses,
     children: children
@@ -7908,7 +7913,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$x} {
+    &.${rootClassName$y} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -8114,7 +8119,7 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$w = 'dot-empty-state';
+const rootClassName$x = 'dot-empty-state';
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -8154,7 +8159,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -8174,6 +8179,26 @@ const DotEmptyState = ({
   });
 };
 
+var img = "data:image/svg+xml,%3csvg width='297' height='253' viewBox='0 0 297 253' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M43.6231 229.335C101.544 259.595 195.456 259.595 253.383 229.335C311.311 199.075 311.304 150.017 253.383 119.757C195.462 89.4972 101.544 89.4903 43.6161 119.757C-14.3114 150.024 -14.3045 199.075 43.6231 229.335Z' fill='%23F3F5F6'/%3e%3cpath d='M196.97 234.893C208.68 234.893 218.173 230.368 218.173 224.786C218.173 219.204 208.68 214.678 196.97 214.678C185.259 214.678 175.766 219.204 175.766 224.786C175.766 230.368 185.259 234.893 196.97 234.893Z' fill='%23E3E5E8'/%3e%3cpath d='M31.1652 50.0008V84.7753C31.1652 85.916 31.9671 86.3861 32.9626 85.8123L113.698 39.1951C114.22 38.8537 114.655 38.3943 114.967 37.8539C115.279 37.3135 115.46 36.7073 115.495 36.0841V1.28195C115.495 0.141239 114.686 -0.328873 113.698 0.24494L32.9626 46.8621C32.4354 47.205 31.9973 47.6686 31.6848 48.2143C31.3722 48.7601 31.1941 49.3725 31.1652 50.0008Z' fill='%23F3F5F6'/%3e%3cpath d='M36.7858 49.4546L60.9827 35.4895C62.0958 34.8466 62.9876 35.3651 62.9876 36.6441V60.9586C62.9497 61.652 62.7483 62.3267 62.3998 62.9274C62.0514 63.5282 61.5658 64.038 60.9827 64.4153L36.7858 78.3873C35.6796 79.0233 34.7809 78.5048 34.7809 77.2258V52.9252C34.8183 52.2297 35.0194 51.5529 35.3678 50.9499C35.7162 50.3468 36.202 49.8345 36.7858 49.4546Z' fill='%23F3F5F6'/%3e%3cpath d='M56.3784 47.6226L49.1815 62.5417L45.5174 60.4262C45.1656 60.2338 44.7528 60.1853 44.366 60.2911C43.9792 60.3968 43.6484 60.6485 43.4434 60.9931L34.7809 75.933V77.2396C34.7809 78.5186 35.6796 79.0371 36.7858 78.4011L60.9827 64.4291C61.5647 64.0506 62.0494 63.5404 62.3977 62.94C62.7459 62.3395 62.948 61.6654 62.9876 60.9724V52.4205L58.1482 47.346C58.0402 47.1949 57.8922 47.0768 57.7209 47.0048C57.5496 46.9329 57.3616 46.91 57.1781 46.9387C56.9945 46.9674 56.8225 47.0465 56.6813 47.1673C56.5401 47.288 56.4352 47.4457 56.3784 47.6226Z' fill='%235A82AD'/%3e%3cpath d='M38.4173 58.3522C39.9124 57.377 41.1567 56.0632 42.0491 54.5174C42.9416 52.9715 43.4572 51.237 43.554 49.4546C43.554 47.9544 43.0701 46.869 42.275 46.2883L36.7858 49.4546C36.2039 49.8331 35.7192 50.3433 35.3709 50.9438C35.0226 51.5443 34.8205 52.2183 34.7809 52.9113V58.6979C35.728 59.2509 37.0001 59.168 38.4173 58.3522Z' fill='%235A82AD'/%3e%3cpath d='M72.0164 31.3899L108.374 10.3938C109.204 9.91682 109.874 10.2556 109.874 11.1543C109.838 11.658 109.683 12.1459 109.422 12.5784C109.162 13.0108 108.802 13.3757 108.374 13.6432L72.0164 34.6323C71.1868 35.1093 70.5162 34.7706 70.5162 33.8718C70.5538 33.3694 70.7092 32.8828 70.9698 32.4516C71.2305 32.0204 71.589 31.6567 72.0164 31.3899Z' fill='%23E3E5E8'/%3e%3cpath d='M72.0164 38.5729L108.374 17.5769C109.204 17.0999 109.874 17.4386 109.874 18.3374C109.838 18.841 109.683 19.3289 109.422 19.7614C109.162 20.1939 108.802 20.5587 108.374 20.8262L72.0164 41.8153C71.1868 42.2924 70.5162 41.9536 70.5162 41.0618C70.5528 40.5581 70.7077 40.0702 70.9683 39.6377C71.229 39.2052 71.5881 38.8404 72.0164 38.5729Z' fill='%23E3E5E8'/%3e%3cpath d='M72.0164 45.756L108.374 24.7669C109.204 24.2899 109.874 24.6286 109.874 25.5204C109.838 26.0241 109.683 26.512 109.422 26.9445C109.162 27.377 108.802 27.7418 108.374 28.0093L72.0164 48.9984C71.1868 49.4824 70.5162 49.1436 70.5162 48.2449C70.5528 47.7412 70.7077 47.2533 70.9683 46.8208C71.229 46.3883 71.5881 46.0235 72.0164 45.756Z' fill='%23E3E5E8'/%3e%3cpath d='M72.0164 52.939L108.374 31.9499C109.204 31.4729 109.874 31.8116 109.874 32.7104C109.837 33.2128 109.681 33.6993 109.421 34.1305C109.16 34.5617 108.802 34.9255 108.374 35.1923L72.0164 56.2229C71.1868 56.6999 70.5162 56.3612 70.5162 55.4624C70.5474 54.9528 70.6998 54.4579 70.9607 54.019C71.2217 53.5801 71.5836 53.2099 72.0164 52.939Z' fill='%23E3E5E8'/%3e%3cpath d='M14.2964 159.413V108.385C14.3296 107.761 14.5098 107.154 14.8221 106.614C15.1345 106.073 15.5703 105.614 16.0939 105.274L77.1532 70.0151C78.1418 69.4413 78.9507 69.9045 78.9507 71.0521V122.08C78.9158 122.703 78.735 123.309 78.4228 123.85C78.1105 124.39 77.6756 124.85 77.1532 125.191L16.0939 160.45C15.0983 161.023 14.2964 160.56 14.2964 159.413Z' fill='%23F3F5F6'/%3e%3cpath d='M14.2964 156.862V159.413C14.2964 160.561 15.0983 161.024 16.0939 160.45L77.1532 125.191C77.6756 124.85 78.1105 124.391 78.4228 123.85C78.735 123.31 78.9158 122.704 78.9507 122.08V119.522L14.2964 156.862Z' fill='%235A82AD'/%3e%3cpath d='M17.3909 110.888V112.685C17.3909 113.493 17.9614 113.82 18.6697 113.415L62.112 88.5817C62.4837 88.3413 62.7931 88.0177 63.0153 87.637C63.2374 87.2564 63.3661 86.8294 63.3909 86.3905V84.5889L17.3909 110.888Z' fill='%235A82AD'/%3e%3cpath d='M17.3909 118.913V120.028C17.3909 120.53 17.7506 120.732 18.1971 120.481L45.5846 105.067C45.819 104.918 46.014 104.717 46.1541 104.481C46.2941 104.245 46.3752 103.98 46.3909 103.707V102.589L17.3909 118.913Z' fill='%235A82AD'/%3e%3cpath d='M17.3909 125.913V127.028C17.3909 127.53 17.7506 127.732 18.1971 127.481L45.5846 112.067C45.819 111.918 46.014 111.717 46.1541 111.481C46.2941 111.245 46.3752 110.98 46.3909 110.707V109.589L17.3909 125.913Z' fill='%235A82AD'/%3e%3cpath d='M88.3942 156.004C88.3942 156.004 90.89 140.103 85.3454 126.429C79.8008 112.754 72.3274 111.911 68.4559 113.853C64.5844 115.796 67.0732 123.38 70.5299 128.475C75.1343 135.16 82.739 149.554 82.4902 162.482L88.3942 156.004Z' fill='%235A82AD'/%3e%3cpath opacity='0.2' d='M88.3942 156.004C88.3942 156.004 90.89 140.103 85.3454 126.429C79.8008 112.754 72.3274 111.911 68.4559 113.853C64.5844 115.796 67.0732 123.38 70.5299 128.475C75.1343 135.16 82.739 149.554 82.4902 162.482L88.3942 156.004Z' fill='black'/%3e%3cpath d='M85.9054 157.014C85.8433 157.012 85.7823 156.998 85.7258 156.972C85.6694 156.946 85.6187 156.909 85.5767 156.863C85.5348 156.818 85.5025 156.764 85.4818 156.705C85.4611 156.647 85.4523 156.585 85.456 156.523C86.3686 134.753 75.4938 118.499 70.7996 115.333C70.7483 115.298 70.7043 115.254 70.6701 115.202C70.6359 115.151 70.6122 115.093 70.6003 115.033C70.5884 114.972 70.5886 114.909 70.6009 114.849C70.6131 114.788 70.6372 114.731 70.6717 114.679C70.7062 114.628 70.7504 114.584 70.8019 114.55C70.8535 114.516 70.9112 114.492 70.9719 114.48C71.0325 114.468 71.0949 114.468 71.1555 114.481C71.2161 114.493 71.2737 114.517 71.325 114.551C76.8557 118.243 87.3088 134.863 86.3893 156.564C86.3876 156.626 86.3736 156.686 86.3482 156.742C86.3228 156.798 86.2866 156.849 86.2415 156.89C86.1965 156.932 86.1436 156.965 86.0859 156.986C86.0281 157.007 85.9668 157.017 85.9054 157.014Z' fill='white'/%3e%3cpath d='M87.4125 174.885C86.4654 172.507 84.0181 169.852 77.7338 167.017C71.4495 164.183 66.7207 160.401 65.8496 157.664C65.5875 156.907 65.5532 156.091 65.7511 155.315C65.949 154.54 66.3702 153.839 66.9627 153.301C66.9627 153.301 61.0379 152.61 60.2912 148.98C59.3579 144.404 64.536 144.106 64.536 144.106C64.536 144.106 57.7402 134.538 55.9358 130.28C54.1314 126.021 56.2123 125.765 60.5954 127.39C64.9785 129.014 73.3299 137.193 74.6227 139.689C74.6227 139.689 76.8834 136.923 79.3169 138.742C81.7505 140.56 81.868 146.001 80.43 147.964C81.3997 147.783 82.401 147.888 83.3127 148.264C84.2243 148.641 85.0073 149.274 85.5667 150.086C88.0417 153.329 88.8575 161.438 88.8575 161.438L87.4125 174.885Z' fill='%235A82AD'/%3e%3cpath d='M87.855 172.673C87.75 172.671 87.6483 172.635 87.5658 172.57C87.4833 172.505 87.4246 172.415 87.3987 172.313C84.0388 158.313 68.0895 135.969 58.1826 128.862C58.1322 128.826 58.0894 128.781 58.0566 128.729C58.0237 128.676 58.0016 128.618 57.9913 128.557C57.981 128.496 57.9829 128.433 57.9967 128.373C58.0106 128.313 58.0361 128.256 58.072 128.206C58.1079 128.155 58.1533 128.112 58.2057 128.079C58.2581 128.047 58.3165 128.024 58.3775 128.014C58.4385 128.004 58.5009 128.006 58.5612 128.02C58.6214 128.033 58.6784 128.059 58.7288 128.095C68.7601 135.292 84.9099 157.919 88.3182 172.092C88.3453 172.214 88.3235 172.341 88.2576 172.447C88.1917 172.553 88.0869 172.629 87.9656 172.659L87.855 172.673Z' fill='white'/%3e%3cpath d='M212.995 31.7009C212.913 31.6999 212.832 31.6786 212.76 31.6387L210.817 30.5118C210.764 30.4809 210.717 30.4398 210.679 30.3908C210.641 30.3418 210.614 30.2858 210.598 30.2261C210.582 30.1664 210.577 30.1042 210.585 30.0429C210.593 29.9816 210.613 29.9224 210.644 29.8689C210.675 29.8153 210.716 29.7683 210.765 29.7307C210.814 29.693 210.87 29.6653 210.93 29.6493C210.99 29.6332 211.052 29.6291 211.113 29.6371C211.175 29.6452 211.234 29.6652 211.287 29.696L213.23 30.8229C213.284 30.8537 213.331 30.8948 213.368 30.9438C213.406 30.9928 213.434 31.0488 213.45 31.1085C213.466 31.1683 213.47 31.2306 213.462 31.2919C213.454 31.3532 213.434 31.4123 213.403 31.4659C213.361 31.5375 213.302 31.5969 213.23 31.6381C213.159 31.6794 213.078 31.7011 212.995 31.7009Z' fill='white'/%3e%3cpath d='M87.4127 72.6906V175.548C87.4127 176.696 88.2147 177.159 89.2033 176.585L209.179 107.32C209.701 106.978 210.136 106.519 210.448 105.979C210.761 105.438 210.941 104.832 210.976 104.209V1.35102C210.976 0.203393 210.167 -0.259806 209.179 0.314007L89.2033 69.5796C88.6814 69.9209 88.2472 70.3805 87.9361 70.921C87.625 71.4616 87.4457 72.0678 87.4127 72.6906Z' fill='%23455A64'/%3e%3cpath d='M101.454 91.6886C101.454 95.2767 104.129 96.6317 107.441 94.7236L202.549 39.8103V26.8407L107.441 81.7471C104.129 83.6621 101.454 88.1075 101.454 91.6886Z' fill='%23F5F5F5'/%3e%3cpath d='M210.637 22.188C213.942 20.2799 216.624 21.6349 216.624 25.216C216.624 28.7972 213.942 33.2494 210.637 35.1575L202.583 39.8103V26.8407L210.637 22.188Z' fill='%235A82AD'/%3e%3cpath d='M207.734 33.1182C207.389 33.1231 207.05 33.0347 206.752 32.8624C206.385 32.6166 206.091 32.2761 205.901 31.877C205.711 31.4779 205.633 31.0349 205.674 30.5948C205.723 29.5127 206.032 28.4584 206.573 27.5201C207.114 26.5818 207.873 25.787 208.785 25.2023C209.133 24.9184 209.559 24.7472 210.007 24.7114C210.455 24.6757 210.903 24.7771 211.292 25.0023C211.68 25.2274 211.991 25.5656 212.183 25.9718C212.375 26.3781 212.439 26.8331 212.366 27.2764C212.314 28.358 212.005 29.4118 211.464 30.3498C210.923 31.2878 210.165 32.0829 209.255 32.6688C208.796 32.9493 208.271 33.1042 207.734 33.1182ZM210.299 25.6863C209.928 25.7046 209.568 25.8189 209.255 26.0181C208.491 26.5254 207.855 27.2026 207.397 27.9966C206.939 28.7906 206.671 29.6799 206.614 30.5948C206.542 30.8701 206.563 31.1612 206.673 31.4235C206.784 31.6858 206.977 31.9047 207.223 32.0468C207.469 32.1888 207.756 32.2461 208.038 32.2098C208.32 32.1736 208.582 32.0458 208.785 31.8461C209.549 31.3396 210.185 30.6627 210.644 29.8685C211.102 29.0743 211.37 28.1846 211.426 27.2695C211.461 26.9953 211.423 26.7167 211.317 26.4617C211.21 26.2068 211.037 25.9846 210.817 25.8176C210.66 25.7274 210.48 25.6819 210.299 25.6863Z' fill='white'/%3e%3cpath d='M212.02 50.5745L120.072 103.628C119.547 103.967 119.111 104.426 118.798 104.967C118.486 105.508 118.306 106.115 118.274 106.739V135.036C118.274 136.183 119.076 136.647 120.072 136.073L212.02 82.9984C212.544 82.6582 212.979 82.1991 213.292 81.6584C213.604 81.1178 213.784 80.5109 213.818 79.8874V51.6115C213.783 50.4639 212.981 50.0007 212.02 50.5745Z' fill='%235A82AD'/%3e%3cpath opacity='0.2' d='M212.02 50.5745L120.072 103.628C119.547 103.967 119.111 104.426 118.798 104.967C118.486 105.508 118.306 106.115 118.274 106.739V135.036C118.274 136.183 119.076 136.647 120.072 136.073L212.02 82.9984C212.544 82.6582 212.979 82.1991 213.292 81.6584C213.604 81.1178 213.784 80.5109 213.818 79.8874V51.6115C213.783 50.4639 212.981 50.0007 212.02 50.5745Z' fill='white'/%3e%3cpath d='M153.498 89.0477L170.159 79.4242C170.989 78.9472 171.66 79.286 171.66 80.1847C171.622 80.6872 171.467 81.1737 171.206 81.6049C170.945 82.0361 170.587 82.3998 170.159 82.6666L153.498 92.2901C152.668 92.7671 151.998 92.4284 151.998 91.5296C152.035 91.0272 152.191 90.5407 152.451 90.1095C152.712 89.6783 153.071 89.3145 153.498 89.0477Z' fill='white'/%3e%3cpath d='M151.998 98.0143C151.998 98.9131 152.689 99.2519 153.498 98.7748L203.862 69.697C204.289 69.4283 204.646 69.063 204.906 68.6307C205.165 68.1983 205.319 67.711 205.356 67.2081C205.356 66.3163 204.664 65.9776 203.862 66.4546L153.498 95.5324C153.071 95.7992 152.712 96.163 152.451 96.5942C152.191 97.0254 152.035 97.5119 151.998 98.0143Z' fill='white'/%3e%3cpath d='M151.998 104.499C151.998 105.398 152.689 105.737 153.498 105.26L203.862 76.1819C204.289 75.9132 204.646 75.548 204.906 75.1156C205.165 74.6833 205.319 74.196 205.356 73.6931C205.356 72.8012 204.664 72.4625 203.862 72.9395L153.498 102.017C153.071 102.284 152.712 102.648 152.451 103.079C152.191 103.51 152.035 103.997 151.998 104.499Z' fill='white'/%3e%3cpath d='M151.998 110.984C151.998 111.883 152.689 112.222 153.498 111.744L203.862 82.6667C204.289 82.398 204.646 82.0327 204.906 81.6004C205.165 81.168 205.319 80.6807 205.356 80.1778C205.356 79.286 204.664 78.9472 203.862 79.4243L153.498 108.502C153.071 108.769 152.712 109.133 152.451 109.564C152.191 109.995 152.035 110.482 151.998 110.984Z' fill='white'/%3e%3cpath d='M122.906 105.246L144.587 92.7256C145.582 92.1587 146.384 92.6219 146.384 93.7626V115.561C146.35 116.184 146.17 116.791 145.858 117.331C145.545 117.872 145.11 118.331 144.587 118.672L122.906 131.185C121.918 131.759 121.109 131.296 121.109 130.155V108.357C121.142 107.733 121.322 107.126 121.634 106.586C121.947 106.045 122.383 105.586 122.906 105.246Z' fill='white'/%3e%3cpath d='M140.466 103.607L134.016 116.978L130.732 115.084C130.415 114.901 130.038 114.851 129.684 114.946C129.33 115.04 129.028 115.271 128.845 115.588L121.109 128.98V130.148C121.109 131.296 121.918 131.759 122.906 131.185L144.587 118.672C145.11 118.331 145.546 117.872 145.858 117.332C146.171 116.791 146.351 116.184 146.384 115.561V107.907L142.022 103.358C141.923 103.231 141.792 103.133 141.642 103.074C141.492 103.015 141.329 102.997 141.17 103.023C141.011 103.048 140.862 103.116 140.738 103.219C140.614 103.322 140.52 103.456 140.466 103.607Z' fill='%235A82AD'/%3e%3cpath d='M124.365 113.224C125.705 112.349 126.821 111.171 127.621 109.785C128.421 108.399 128.883 106.844 128.969 105.246C129.015 104.715 128.935 104.181 128.736 103.688C128.536 103.194 128.223 102.754 127.822 102.404L122.906 105.246C122.383 105.586 121.947 106.045 121.634 106.586C121.322 107.126 121.142 107.733 121.109 108.357V113.542C121.945 114.026 123.093 113.957 124.365 113.224Z' fill='%235A82AD'/%3e%3cpath d='M212.02 92.7257L120.072 145.779C119.548 146.119 119.112 146.579 118.8 147.119C118.487 147.66 118.307 148.267 118.274 148.89V177.208C118.274 178.348 119.076 178.812 120.072 178.245L212.02 125.157C212.544 124.816 212.979 124.357 213.292 123.817C213.604 123.276 213.784 122.669 213.818 122.045V93.7627C213.783 92.622 212.981 92.1726 212.02 92.7257Z' fill='%235A82AD'/%3e%3cpath opacity='0.2' d='M212.02 92.7257L120.072 145.779C119.548 146.119 119.112 146.579 118.8 147.119C118.487 147.66 118.307 148.267 118.274 148.89V177.208C118.274 178.348 119.076 178.812 120.072 178.245L212.02 125.157C212.544 124.816 212.979 124.357 213.292 123.817C213.604 123.276 213.784 122.669 213.818 122.045V93.7627C213.783 92.622 212.981 92.1726 212.02 92.7257Z' fill='white'/%3e%3cpath d='M153.498 131.199L170.159 121.582C170.989 121.105 171.66 121.444 171.66 122.336C171.623 122.839 171.468 123.327 171.207 123.76C170.947 124.192 170.588 124.557 170.159 124.825L153.498 134.441C152.668 134.918 151.998 134.579 151.998 133.688C152.034 133.184 152.189 132.696 152.45 132.264C152.711 131.831 153.07 131.466 153.498 131.199Z' fill='white'/%3e%3cpath d='M151.998 140.172C151.998 141.064 152.689 141.403 153.498 140.926L203.862 111.848C204.288 111.58 204.645 111.216 204.904 110.785C205.164 110.354 205.318 109.868 205.356 109.366C205.356 108.468 204.664 108.129 203.862 108.606L153.498 137.684C153.07 137.951 152.711 138.316 152.45 138.748C152.189 139.181 152.034 139.669 151.998 140.172Z' fill='white'/%3e%3cpath d='M151.998 146.657C151.998 147.549 152.689 147.888 153.498 147.411L203.862 118.333C204.288 118.065 204.645 117.701 204.904 117.27C205.164 116.839 205.318 116.353 205.356 115.851C205.356 114.952 204.664 114.614 203.862 115.091L153.498 144.168C153.07 144.436 152.711 144.801 152.45 145.233C152.189 145.666 152.034 146.154 151.998 146.657Z' fill='white'/%3e%3cpath d='M151.998 153.142C151.998 154.034 152.689 154.373 153.498 153.896L203.862 124.818C204.288 124.55 204.645 124.186 204.904 123.754C205.164 123.323 205.318 122.838 205.356 122.336C205.356 121.437 204.664 121.098 203.862 121.575L153.498 150.653C153.07 150.921 152.711 151.285 152.45 151.718C152.189 152.15 152.034 152.638 151.998 153.142Z' fill='white'/%3e%3cpath d='M122.906 147.404L144.587 134.884C145.582 134.31 146.384 134.773 146.384 135.921V157.712C146.352 158.336 146.172 158.943 145.86 159.484C145.547 160.024 145.111 160.483 144.587 160.823L122.906 173.343C121.918 173.917 121.109 173.454 121.109 172.306V150.515C121.142 149.891 121.322 149.285 121.634 148.744C121.947 148.203 122.383 147.744 122.906 147.404Z' fill='white'/%3e%3cpath d='M140.466 145.765L134.016 159.136L130.732 157.235C130.575 157.144 130.401 157.086 130.221 157.063C130.041 157.04 129.858 157.052 129.682 157.1C129.507 157.147 129.343 157.229 129.199 157.34C129.056 157.451 128.935 157.589 128.845 157.746L121.109 171.138V172.306C121.109 173.454 121.918 173.917 122.906 173.343L144.587 160.823C145.11 160.484 145.546 160.026 145.858 159.487C146.171 158.947 146.351 158.341 146.384 157.719V150.059L142.022 145.516C141.924 145.387 141.793 145.287 141.643 145.227C141.493 145.166 141.329 145.148 141.169 145.173C141.009 145.199 140.859 145.268 140.736 145.372C140.612 145.476 140.519 145.612 140.466 145.765Z' fill='%235A82AD'/%3e%3cpath d='M124.365 155.375C125.705 154.502 126.821 153.325 127.621 151.94C128.421 150.555 128.883 149.001 128.969 147.404C129.015 146.873 128.935 146.339 128.736 145.846C128.536 145.352 128.223 144.912 127.822 144.562L122.906 147.404C122.383 147.744 121.947 148.203 121.634 148.744C121.322 149.285 121.142 149.891 121.109 150.515V155.7C121.945 156.177 123.093 156.108 124.365 155.375Z' fill='%235A82AD'/%3e%3cpath d='M210.976 5.75487V1.35102C210.976 0.203393 210.167 -0.259806 209.179 0.314007L89.2102 69.5796C88.6866 69.9198 88.2509 70.3789 87.9385 70.9196C87.6261 71.4602 87.4459 72.0671 87.4127 72.6906V77.1013L210.976 5.75487Z' fill='%235A82AD'/%3e%3cpath d='M196.257 9.46046C195.871 9.71441 195.549 10.0557 195.319 10.4568C195.088 10.8579 194.955 11.3076 194.93 11.7695C194.93 12.6199 195.525 12.9656 196.257 12.5369C196.646 12.2865 196.97 11.9471 197.202 11.5468C197.434 11.1465 197.568 10.6968 197.592 10.2348C197.592 9.38441 196.997 9.03874 196.257 9.46046Z' fill='%23F5F5F5'/%3e%3cpath d='M201.546 6.44624C201.158 6.69942 200.835 7.04038 200.603 7.44152C200.372 7.84266 200.238 8.29273 200.212 8.75532C200.212 9.60567 200.813 9.94443 201.546 9.52271C201.935 9.27076 202.259 8.9301 202.491 8.5287C202.723 8.12729 202.857 7.67661 202.88 7.21363C202.88 6.32871 202.286 5.98996 201.546 6.44624Z' fill='%23F5F5F5'/%3e%3cpath d='M206.835 3.36278C206.446 3.61323 206.122 3.9526 205.89 4.35289C205.658 4.75318 205.525 5.20291 205.501 5.66495C205.501 6.5153 206.095 6.86097 206.835 6.43925C207.222 6.1853 207.543 5.84401 207.774 5.44292C208.004 5.04182 208.138 4.59215 208.162 4.13017C208.162 3.27982 207.568 2.93415 206.835 3.36278Z' fill='%23F5F5F5'/%3e%3cpath d='M212.891 220.223C213.1 220.755 213.244 221.309 213.32 221.875C213.515 222.461 213.56 223.086 213.451 223.694C212.985 224.469 212.245 225.042 211.377 225.298C210.76 225.44 210.119 225.452 209.496 225.333C208.874 225.214 208.283 224.966 207.761 224.606C206.496 223.853 205.549 222.933 203.752 222.428C202.47 222.152 201.262 221.603 200.212 220.818C199.216 220.023 197.889 217.81 199.79 217.299C201.691 216.787 205.833 218.592 209.6 218.757L212.891 220.223Z' fill='%23263238'/%3e%3cpath d='M212.712 217.734C212.712 217.734 212.933 220.375 212.933 220.7C212.933 221.592 209.642 222.774 209.034 220.7L208.508 217.893L212.712 217.734Z' fill='%23F28F8F'/%3e%3cpath d='M208.674 159.793C209.806 161.457 210.842 163.183 211.778 164.964C211.778 164.964 212.103 168.808 212.103 171.366C212.103 176.067 211.377 179.697 210.72 188.961C211.79 190.783 212.402 192.837 212.504 194.948C212.781 199.144 212.787 199.096 212.815 218.453C212.185 218.793 211.494 219.004 210.782 219.072C210.069 219.141 209.35 219.067 208.667 218.854L202.445 191.747L201.754 181.107L199.804 167.882L208.674 159.793Z' fill='%2337474F'/%3e%3cpath d='M193.948 225.069C194.17 225.298 194.094 225.761 194.197 226.521C194.312 227.106 194.343 227.704 194.287 228.298C193.924 229.12 193.269 229.778 192.448 230.144C191.852 230.359 191.217 230.449 190.584 230.407C189.951 230.365 189.334 230.193 188.77 229.902C187.429 229.307 186.371 228.519 184.526 228.236C183.219 228.123 181.953 227.729 180.813 227.081C179.728 226.39 178.131 224.385 179.956 223.625C181.781 222.864 186.358 224.226 190.112 223.922L193.948 225.069Z' fill='%23263238'/%3e%3cpath d='M194.813 221.751C194.813 221.751 194.121 224.765 193.935 225.436C193.52 227.047 189.946 227.13 189.946 225.27L190.188 220.984L194.813 221.751Z' fill='%23F28F8F'/%3e%3cpath d='M200.606 160.616C202.397 164.135 204.125 167.239 204.18 170.986C204.312 178.915 201.021 187.647 199.811 193.378C200.172 195.452 200.274 197.563 200.115 199.663C199.873 202.062 194.405 223.86 194.405 223.86C194.405 223.86 191.363 224.496 190.07 223.12L191.605 181.148L192.02 168.96L200.606 160.616Z' fill='%2337474F'/%3e%3cpath d='M198.145 139.122L199.272 145.365L204.913 144.95L203.731 137.877L198.145 139.122Z' fill='%23FFA8A7'/%3e%3cpath d='M210.866 144.493C210.306 142.8 208.156 140.954 206.026 141.355C202.828 141.898 199.676 142.684 196.596 143.705C194.626 144.397 192.828 146.118 192.663 152.603L192.047 168.919C192.899 169.676 193.921 170.217 195.027 170.495C198.02 171.318 199.998 171.808 204.547 170.813C210.472 169.52 211.882 165.932 211.882 165.932C211.882 165.932 211.654 157.297 211.474 152.603C211.329 148.614 211.246 145.662 210.866 144.493Z' fill='%23455A64'/%3e%3cpath d='M195.739 131.151L167.014 123.359C164.414 122.91 163.329 129.256 165.928 129.699L195.428 132.678L195.739 131.151Z' fill='%23263238'/%3e%3cpath d='M187.478 144.314L181.608 144.493C181.608 144.493 182.493 135.762 183.039 134.614C183.585 133.467 184.892 133.231 186.192 132.865C187.491 132.499 187.484 131.876 187.484 131.876L186.316 131.759C185.293 131.655 184.885 130.376 185.327 129.512C185.542 129.111 185.887 128.475 186.51 128.648L188.058 129.07C188.082 128.386 187.912 127.71 187.567 127.12C187.049 126.546 186.703 126.726 185.666 126.366C184.899 126.097 183.33 125.62 182.064 126.138C180.799 126.657 179.838 129.035 179.513 130.715C179.185 132.658 178.652 134.56 177.923 136.391C176.796 139.502 175.158 145.89 174.985 148.448C174.909 149.63 175.02 150.335 176.333 150.646C177.647 150.957 187.312 150.978 187.312 150.978L187.478 144.314Z' fill='%23FFA8A7'/%3e%3cpath d='M193.969 131.731C193.969 131.731 192.586 133.75 192.78 133.971C193.092 134.179 193.439 134.332 193.803 134.421L193.969 131.731Z' fill='%23FFA8A7'/%3e%3cpath d='M198.138 125.357C196.824 126.049 194.557 127.245 193.928 132.056C193.285 136.992 194.135 138.583 194.799 139.239C195.255 139.682 197.702 139.709 198.947 139.336C200.482 138.88 203.945 137.559 205.528 135.022C207.388 132.036 207.803 128.04 205.708 126.45C204.642 125.641 203.388 125.117 202.064 124.925C200.74 124.734 199.389 124.883 198.138 125.357Z' fill='%23FFA8A7'/%3e%3cpath d='M202.003 184.93L204.996 176.468C207.317 175.645 209.396 174.258 211.045 172.431C211.045 172.431 210.354 174.843 205.625 177.318L202.341 185.324V189.776L202.003 184.93Z' fill='%23263238'/%3e%3cpath d='M193.658 126.982C194.087 128.164 194.813 131.068 197.841 132.277C197.841 132.277 198.276 130.432 199.825 130.625C201.374 130.819 201.643 132.803 200.689 134.033C199.735 135.264 198.809 134.822 198.809 134.822C198.809 134.822 198.601 137.469 200.371 138.672C201.03 139.061 201.77 139.291 202.533 139.345C203.296 139.399 204.061 139.275 204.768 138.983C205.784 138.52 207.229 136.08 208.073 134.075C209.856 129.844 210.112 126.47 207.381 125.378C207.043 123.456 206.178 122.73 204.436 122.371C200.689 121.603 197.855 124.064 194.709 123.629C193.098 123.401 193.16 125.627 193.658 126.982Z' fill='%23263238'/%3e%3cpath d='M207.471 126.048L209.241 124.949C209.087 124.734 208.856 124.585 208.596 124.533C208.336 124.481 208.066 124.53 207.841 124.67C207.616 124.81 207.452 125.03 207.384 125.286C207.315 125.542 207.346 125.815 207.471 126.048Z' fill='%23263238'/%3e%3cpath d='M186.164 144.196C186.164 144.196 194.425 143.719 196.534 143.705C198.643 143.691 200.883 147.293 199.569 149.748C198.698 151.358 195.981 151.912 192.559 152.077C189.137 152.243 185.687 152.243 185.687 152.243C185.687 152.243 182.61 148.738 186.164 144.196Z' fill='%23455A64'/%3e%3cpath d='M192.663 152.077C192.663 152.077 197.896 152.008 199.611 149.748C199.611 149.748 199.21 151.13 197.177 151.981C195.72 152.541 194.186 152.872 192.628 152.962L192.663 152.077Z' fill='%2337474F'/%3e%3cpath d='M167.014 123.359C164.414 122.91 163.329 129.256 165.928 129.699L170.076 130.114C168.39 129.941 169.558 124.044 170.844 124.389L167.014 123.359Z' fill='%23455A64'/%3e%3cpath d='M271.628 121.665C271.628 122.952 271.241 124.21 270.516 125.273C269.791 126.336 268.763 127.157 267.565 127.627C266.367 128.097 265.055 128.196 263.8 127.909C262.546 127.622 261.407 126.964 260.532 126.021L260.11 125.509C259.126 124.197 258.683 122.557 258.873 120.928C259.063 119.299 259.871 117.804 261.13 116.753C262.389 115.703 264.004 115.175 265.641 115.28C267.278 115.385 268.812 116.114 269.927 117.317L270.362 117.842C271.184 118.948 271.627 120.288 271.628 121.665Z' fill='%23455A64'/%3e%3cpath d='M271.628 121.665C271.628 122.952 271.241 124.209 270.516 125.273C269.791 126.336 268.763 127.157 267.565 127.627C266.367 128.097 265.055 128.195 263.801 127.909C262.546 127.622 261.407 126.964 260.532 126.021L260.11 125.509L233.452 93.3133L244.686 86.8285L269.927 117.303L270.363 117.828C271.186 118.938 271.63 120.283 271.628 121.665Z' fill='%23455A64'/%3e%3cpath d='M249.574 112.782C250.693 113.956 252.217 114.661 253.837 114.755C255.456 114.849 257.051 114.324 258.299 113.287C259.547 112.25 260.354 110.778 260.558 109.169C260.762 107.559 260.347 105.932 259.398 104.617L256.1 100.642C257.086 101.954 257.529 103.596 257.339 105.226C257.149 106.857 256.34 108.352 255.079 109.403C253.817 110.454 252.2 110.98 250.562 110.873C248.924 110.766 247.39 110.033 246.276 108.827L249.574 112.782Z' fill='%235A82AD'/%3e%3cpath d='M244.257 36.2155C246.27 36.4395 248.215 37.0723 249.975 38.0752L241.865 33.3603C236.424 29.6201 228.592 29.8414 219.888 34.8605C203.454 44.3526 190.125 67.4365 190.125 86.4208C190.125 95.747 193.299 102.412 198.532 105.578L198.643 105.647L207.298 110.632C205.763 109.633 204.425 108.36 203.351 106.878C205.483 107.111 207.64 106.987 209.732 106.511C210.492 106.345 211.26 106.145 212.041 105.896C211.939 105.865 211.839 105.826 211.744 105.778C211.327 105.584 210.93 105.352 210.554 105.087C209.874 104.613 209.268 104.04 208.757 103.386C208.058 102.492 207.49 101.503 207.07 100.448C206.507 100.53 205.938 100.571 205.369 100.573C204.024 100.599 202.688 100.333 201.456 99.7913C201.168 99.6594 200.889 99.5093 200.62 99.3419C200.378 99.1899 200.136 99.0101 199.928 98.8304C199.428 96.4902 199.185 94.1025 199.203 91.7095C199.203 72.7322 212.532 49.6414 228.979 40.1493C231.079 38.9243 233.303 37.9277 235.616 37.1765C236.239 37.431 236.825 37.7682 237.358 38.1789C237.922 38.612 238.431 39.1137 238.872 39.6722C239.573 40.5689 240.143 41.5605 240.566 42.6174C241.131 42.5381 241.702 42.4988 242.273 42.4998C243.836 42.4579 245.382 42.8325 246.753 43.5852C247.1 43.7742 247.431 43.9916 247.742 44.2351C247.617 43.682 247.486 43.1359 247.327 42.6174C246.702 40.3142 245.662 38.1446 244.257 36.2155Z' fill='%23263238'/%3e%3cpath d='M249.975 38.0752L249.505 37.8194C247.87 36.9635 246.091 36.4195 244.257 36.2155C242.29 35.9961 240.3 36.087 238.36 36.4851C237.426 36.6622 236.503 36.893 235.595 37.1764C233.283 37.9276 231.058 38.9243 228.958 40.1492C212.511 49.6413 199.182 72.7322 199.182 91.7095C199.164 94.1024 199.408 96.4902 199.908 98.8303C199.998 99.252 200.101 99.653 200.205 100.054C200.821 102.501 201.89 104.811 203.358 106.864C204.013 107.767 204.766 108.595 205.604 109.332C206.139 109.802 206.707 110.232 207.305 110.618C212.732 114.123 220.441 113.819 228.944 108.896C245.391 99.4041 258.72 76.3202 258.72 57.336C258.713 47.8439 255.374 41.1724 249.975 38.0752ZM246.726 43.6059C247.072 43.7949 247.403 44.0123 247.714 44.2558C248.235 44.6792 248.711 45.1566 249.131 45.68C251.205 48.2794 252.305 52.3237 252.305 57.3567C252.305 73.9489 240.137 95.0487 225.736 103.366C222.107 105.44 218.616 106.573 215.65 106.573C214.413 106.588 213.185 106.353 212.041 105.882C211.939 105.851 211.839 105.812 211.744 105.764C211.328 105.57 210.93 105.338 210.554 105.073C210.088 104.746 209.657 104.37 209.269 103.953C209.096 103.773 208.93 103.573 208.764 103.372C208.065 102.478 207.497 101.489 207.077 100.434C206.024 97.6443 205.521 94.6768 205.598 91.6957C205.598 91.4744 205.598 91.2601 205.598 91.0043C205.902 74.4813 217.938 53.8585 232.152 45.6592C232.477 45.4726 232.809 45.2859 233.141 45.113C235.433 43.8327 237.936 42.9733 240.531 42.5758C241.097 42.4966 241.667 42.4573 242.239 42.4583C243.469 42.4477 244.689 42.6827 245.827 43.1496C246.139 43.2735 246.439 43.4239 246.726 43.599V43.6059Z' fill='%23455A64'/%3e%3cpath d='M252.305 57.3498C252.305 73.942 240.137 95.0417 225.736 103.359C224.863 103.867 223.963 104.329 223.04 104.741C220.737 105.853 218.227 106.47 215.67 106.553C214.433 106.567 213.206 106.332 212.062 105.861C211.959 105.83 211.86 105.791 211.764 105.744C211.348 105.549 210.95 105.318 210.575 105.052C209.895 104.578 209.289 104.005 208.778 103.352C208.598 103.11 208.411 102.875 208.245 102.605C208.57 102.605 208.937 102.653 209.255 102.653C212.221 102.653 215.712 101.54 219.342 99.4456C233.721 91.1771 245.896 70.105 245.896 53.4575C245.896 48.8878 244.99 45.1614 243.269 42.5412C244.484 42.621 245.665 42.973 246.726 43.5713C247.072 43.7604 247.403 43.9777 247.714 44.2212C248.236 44.6446 248.711 45.122 249.131 45.6454C250.957 47.9337 252.028 51.3351 252.249 55.5454C252.284 56.1538 252.305 56.7483 252.305 57.3498Z' fill='%2337474F'/%3e%3cpath opacity='0.6' d='M249.525 55.4347C249.525 72.0269 237.358 93.1267 222.957 101.444C219.328 103.518 215.843 104.651 212.871 104.651C211.636 104.666 210.41 104.431 209.269 103.96C209.096 103.78 208.93 103.58 208.764 103.379C208.065 102.485 207.497 101.496 207.077 100.441C206.024 97.6512 205.522 94.6836 205.598 91.7025C205.598 91.4813 205.598 91.267 205.598 91.0112C205.902 74.4881 217.938 53.8654 232.152 45.6661C232.477 45.4794 232.809 45.2927 233.141 45.1199C235.433 43.8395 237.936 42.9802 240.531 42.5827C241.097 42.5034 241.667 42.4642 242.239 42.4652C243.469 42.4545 244.689 42.6896 245.827 43.1565C246.013 43.3432 246.186 43.5436 246.352 43.7441C248.426 46.3574 249.525 50.4018 249.525 55.4347Z' fill='white'/%3e%3c/svg%3e";
+
+const DotEmptyFilterState = ({
+  ariaLabel,
+  className,
+  'data-testid': dataTestId,
+  imageAltText = 'no results found',
+  imageSrc = img
+}) => {
+  return jsx(DotEmptyState, {
+    ariaLabel: ariaLabel,
+    className: className,
+    "data-testid": dataTestId,
+    imageAltText: imageAltText,
+    imageSrc: imageSrc,
+    title: "No results found",
+    subtitle: "No results match the current filter selection. Please, adjust the filters and attempt your search again."
+  });
+};
+
 const wrapperClassName = 'dot-radio-group-wrapper';
 const groupClassName = 'dot-radio-group';
 const StyledRadioGroupWrapper = styled.div`
@@ -8208,30 +8233,30 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$D} {
+      .${rootClassName$E} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$v = 'dot-form';
+const rootClassName$w = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$w} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$B},
-        .${rootClassName$D},
-        .${rootClassName$15},
+      .${rootClassName$C},
+        .${rootClassName$E},
+        .${rootClassName$16},
         .${rootSelectClassName} {
         margin: ${theme.spacing(1, 0)};
       }
 
-      .${rootClassName$A}, .${groupClassName} {
-        .${rootClassName$D} {
+      .${rootClassName$B}, .${groupClassName} {
+        .${rootClassName$E} {
           margin: 0;
         }
       }
@@ -8246,7 +8271,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -8259,10 +8284,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$u = 'dot-dynamic-form';
+const rootClassName$v = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$v} {
     }
   `}
 `;
@@ -8553,12 +8578,12 @@ const DotInputSelect = ({
   });
 };
 
-const rootClassName$t = 'dot-progress-button';
+const rootClassName$u = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$u} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -8583,7 +8608,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$t,
+  'data-pendoid': dataPendoId = rootClassName$u,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -8596,7 +8621,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -8624,12 +8649,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$s = 'dot-radio';
+const rootClassName$t = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$t} {
       padding: 8px;
 
       svg {
@@ -8647,7 +8672,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$D,
+  'data-pendoid': dataPendoId = rootClassName$E,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -8660,7 +8685,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -8668,7 +8693,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$s
+      root: rootClassName$t
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8714,7 +8739,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$C, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -8779,7 +8804,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$r = 'dot-switch';
+const rootClassName$s = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -8808,7 +8833,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$r,
+  'data-pendoid': dataPendoId = rootClassName$s,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -8818,7 +8843,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$r, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -8848,7 +8873,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$D,
+    className: rootClassName$E,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -9169,7 +9194,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$v, 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]);
@@ -9415,7 +9440,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$q = 'dot-inline-edit';
+const rootClassName$r = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -9427,7 +9452,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$r} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -9637,7 +9662,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$q,
+  'data-pendoid': dataPendoId = rootClassName$r,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -9670,7 +9695,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$r, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -9849,13 +9874,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$p = 'dot-navigation-rail';
+const rootClassName$q = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$p} {
+    &.${rootClassName$q} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -9902,7 +9927,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$q, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -9953,12 +9978,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$o = 'dot-pill';
+const rootClassName$p = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$p} {
       background-color: ${({
   backgroundcolor
 }) => {
@@ -10079,7 +10104,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$p, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -10097,12 +10122,12 @@ const DotPill = ({
   });
 };
 
-const rootClassName$n = 'dot-skeleton';
+const rootClassName$o = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$o} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -10117,7 +10142,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -10132,12 +10157,12 @@ const DotSkeleton = ({
   });
 };
 
-const rootClassName$m = 'dot-snackbar';
+const rootClassName$n = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme
 }) => css`
-  &.${rootClassName$m} {
+  &.${rootClassName$n} {
     .dot-icon-btn .dot-icon {
       color: ${theme.palette.figma.icon.white};
     }
@@ -10225,7 +10250,7 @@ const DotSnackbar = ({
     onClose,
     action
   });
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
   const handleSnackbarClose = reason => {
     if (hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -10257,10 +10282,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$l = 'dot-snackbar-container';
+const rootClassName$m = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$m} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -10291,10 +10316,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$l,
+    className: rootClassName$m,
     children: jsx("div", {
-      className: rootClassName$l,
-      "data-testid": rootClassName$l,
+      className: rootClassName$m,
+      "data-testid": rootClassName$m,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoHideDuration: alert.autoHideDuration,
@@ -10353,12 +10378,12 @@ const useDotSnackbarContext = () => {
   return useContext(DotSnackbarContext);
 };
 
-const rootClassName$k = 'dot-split-button-group';
+const rootClassName$l = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$l} {
       &.outlined,
       &.text {
         .expand-button {
@@ -10425,7 +10450,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$k,
+  'data-pendoid': dataPendoId = rootClassName$l,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -10439,7 +10464,7 @@ const DotSplitButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$k, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$l, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -10504,14 +10529,14 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$j = 'dot-stepper';
+const rootClassName$k = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$j} {
+    &.${rootClassName$k} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -10714,6 +10739,7 @@ const StepActionsContainer = styled.div`
     position: -webkit-sticky;
     bottom: 0;
     z-index: 2;
+    background-color: ${theme.palette.figma.background.level0.bckgWhite};
 
     &.with-top-border {
       border-top: 1px solid ${theme.palette.figma.border.default};
@@ -10783,9 +10809,9 @@ const DotStepper = ({
   const displayFinalContent = finalContent && currentStep > steps.length;
   const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
   const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
-  const rootClasses = useStylesWithRootClass(rootClassName$j, stepsPosition, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$k, stepsPosition, className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
-  const stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
+  const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
   useEffect(() => {
     const actionsElement = actionsRef.current;
@@ -10982,7 +11008,7 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$i = 'dot-table-pagination';
+const rootClassName$j = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -10990,7 +11016,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$i} {
+    .${rootClassName$j} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -11028,7 +11054,7 @@ const DotTablePagination = ({
   rowsPerPageOptions = [...ROWS_PER_PAGE_OPTIONS],
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -11037,7 +11063,7 @@ const DotTablePagination = ({
   };
   return (/* Container is used to pass 'typography' prop to a styled component */
     jsx(StyledTablePagination, {
-      className: rootClassName$i,
+      className: rootClassName$j,
       typography: typography,
       children: jsx(TablePagination, {
         "aria-label": ariaLabel,
@@ -11063,12 +11089,12 @@ const DotTablePagination = ({
   );
 };
 
-const rootClassName$h = 'dot-table';
+const rootClassName$i = 'dot-table';
 const StyledPaper = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$h} {
+    &.${rootClassName$i} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -11137,10 +11163,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$g = 'dot-tbody';
+const rootClassName$h = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$g} {
+    &.${rootClassName$h} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -11288,12 +11314,12 @@ const parseCellMaxWidth = width => {
   return width;
 };
 
-const rootClassName$f = 'dot-td';
+const rootClassName$g = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$f} {
+    &.${rootClassName$g} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -11388,7 +11414,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$f, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$g, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -11453,12 +11479,12 @@ const EmptyDotRow = ({
   }, CreateUUID());
 };
 
-const rootClassName$e = 'dot-tr';
+const rootClassName$f = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$e} {
+    &.${rootClassName$f} {
       &.selected {
         background: ${theme.palette.figma.overlay.table.highlights};
 
@@ -11487,12 +11513,12 @@ const StyledTableRowStyles = styled(TableRow)`
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$d = 'dot-th-checkbox';
+const rootClassName$e = 'dot-th-checkbox';
 const StyledTableHeaderCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$d} {
+    &.${rootClassName$e} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
@@ -11511,7 +11537,7 @@ const DotHeaderCheckboxCell = ({
   multiSelectState,
   onCheckAllChange
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$e, className);
   const [checkboxState, setCheckboxState] = useState('unchecked');
   useEffect(() => {
     setCheckboxState(multiSelectState);
@@ -11542,12 +11568,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$c = 'dot-th';
+const rootClassName$d = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$c} {
+    &.${rootClassName$d} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -11606,7 +11632,7 @@ const DotHeaderCell = ({
   return jsx(StyledTableHeaderCell, {
     align: align,
     classes: {
-      root: rootClassName$c
+      root: rootClassName$d
     },
     sortDirection: sortable ? sortDirection : undefined,
     style: headerCellStyle,
@@ -11877,12 +11903,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$b = 'dot-td-checkbox';
+const rootClassName$c = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$b} {
+    &.${rootClassName$c} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -11901,7 +11927,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -11953,7 +11979,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$e, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$f, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -12070,7 +12096,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$g
+        root: rootClassName$h
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -12085,12 +12111,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$a = 'dot-table-selection-toolbar';
+const rootClassName$b = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$a} {
+    &.${rootClassName$b} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -12148,7 +12174,7 @@ const DotTableSelectionToolbar = ({
   onClearAll,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$b, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -12242,7 +12268,7 @@ const DotTable = ({
     return onUpdateData ? data : stableSort(data, getComparator(order, orderBy));
   };
   const [pageData, setPageData] = useState(getSortedData().slice(0, rowsPerPage ? rowsPerPage : data.length));
-  const rootClasses = useStylesWithRootClass(rootClassName$h, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$i, className, loading ? 'loading' : '');
   const updateData = (newOrder, newOrderBy, newPage, newRowsPerPage) => {
     const newData = stableSort(data, getComparator(newOrder, newOrderBy));
     setPageData(newRowsPerPage ? newData.slice(newPage * newRowsPerPage, newPage * newRowsPerPage + newRowsPerPage) : newData);
@@ -12440,7 +12466,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$9 = 'dot-table-actions';
+const rootClassName$a = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -12515,13 +12541,14 @@ const DotTableActions = ({
     return actions && actions.map((action, index) => index < 2 && jsx(DotTableAction, {
       iconId: action.iconId,
       label: action.label,
+      disabled: action.disabled,
       tooltip: action.tooltip || action.label,
       onClick: e => handleTableActionClick(e, action)
     }, `action-${index}`));
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$9,
+      className: rootClassName$a,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -12545,12 +12572,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$8 = 'dot-tabs';
+const rootClassName$9 = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$8} {
+    &.${rootClassName$9} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -12595,7 +12622,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$8,
+  'data-pendoid': dataPendoId = rootClassName$9,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -12604,7 +12631,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$8, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$9, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -12658,9 +12685,9 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$7 = 'dot-file-upload';
-const containerClassName$2 = `${rootClassName$7}-container`;
-const dropZoneClassName = `${rootClassName$7}-drop-zone`;
+const rootClassName$8 = 'dot-file-upload';
+const containerClassName$2 = `${rootClassName$8}-container`;
+const dropZoneClassName = `${rootClassName$8}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
@@ -12680,7 +12707,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$7}.${dropZoneClassName} {
+    &.${rootClassName$8}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -12711,12 +12738,12 @@ const StyledFileUpload = styled.div`
   `}
 `;
 
-const rootClassName$6 = 'dot-file-list-item';
+const rootClassName$7 = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$6} {
+    &.${rootClassName$7} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -12728,7 +12755,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$6}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$7}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -12738,7 +12765,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$6}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$7}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -12780,7 +12807,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$6, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$7, 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);
@@ -12813,7 +12840,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$6}-end-icon`,
+      className: `${rootClassName$7}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -12937,7 +12964,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$7,
+  'data-pendoid': dataPendoId = rootClassName$8,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -12950,7 +12977,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$7, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$8, 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) => {
@@ -13022,12 +13049,12 @@ const DotFileUpload = ({
   });
 };
 
-const rootClassName$5 = 'dot-divider';
+const rootClassName$6 = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$5} {
+    &.${rootClassName$6} {
       color: ${theme.palette.figma.border.darker};
 
       .MuiDivider-light {
@@ -13047,7 +13074,7 @@ const DotDivider = ({
   orientation,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$5, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$6, className);
   return jsx(StyledDivider, {
     absolute: absolute,
     "aria-label": ariaLabel,
@@ -13074,7 +13101,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -13110,14 +13137,14 @@ const DotPopper = ({
   });
 };
 
-const rootClassName$4 = 'dot-draggable-list';
+const rootClassName$5 = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
   ${({
   theme,
   draggableHandle
 }) => css`
-    &.${rootClassName$4} {
+    &.${rootClassName$5} {
       padding: ${theme.spacing(1, 0)};
       position: relative;
 
@@ -13166,7 +13193,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$4,
+  'data-pendoid': dataPendoId = rootClassName$5,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -13175,7 +13202,7 @@ const DotDraggableList = ({
   rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
   width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$4, className, draggableHandle ? 'with-draggable-handle' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$5, 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([]);
@@ -13228,12 +13255,12 @@ const DotDraggableList = ({
   });
 };
 
-const rootClassName$3 = 'dot-linear-progress';
+const rootClassName$4 = 'dot-linear-progress';
 const StyledLinearProgress = styled(LinearProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$3} {
+    &.${rootClassName$4} {
       &.MuiLinearProgress-colorError {
         color: ${theme.palette.figma.inProgress.error};
       }
@@ -13265,7 +13292,7 @@ const DotLinearProgress = ({
   valueBuffer,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$3, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$4, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
@@ -13304,13 +13331,13 @@ const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
   return currentContextEnum;
 };
 
-const rootClassName$2 = 'dot-date-picker';
+const rootClassName$3 = 'dot-date-picker';
 const popperClassName = 'dot-date-picker-popper';
 const containerClassName$1 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
 const StyledDatePickerContainer = styled.div`
   ${() => css`
-    &.${rootClassName$2} .full-width {
+    &.${rootClassName$3} .full-width {
       width: 100%;
     }
   `}
@@ -13319,7 +13346,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$2} {
+    &.${rootClassName$3} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13371,7 +13398,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$2,
+  'data-pendoid': dataPendoId = rootClassName$3,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -13411,7 +13438,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$2, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$3, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -13621,7 +13648,7 @@ const getTimePickerButtonType = selectedDaytime => selectedDaytime && selectedDa
 const checkIfOpenPropDefined = open => open !== null && open !== undefined;
 const getDaytimeButtonType = daytimeSelected => daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text';
 
-const rootClassName$1 = 'dot-time-picker';
+const rootClassName$2 = 'dot-time-picker';
 const containerClassName = 'dot-time-picker-container';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
 const TIME_SELECTION_WIDTH_SPACING = 14.5;
@@ -13692,7 +13719,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1} {
+    &.${rootClassName$2} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -13720,7 +13747,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1,
+  'data-pendoid': dataPendoId = rootClassName$2,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -13752,7 +13779,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$1, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$2, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -14044,13 +14071,13 @@ const DotTimePicker = ({
   });
 };
 
-const rootClassName = 'dot-carousel';
+const rootClassName$1 = 'dot-carousel';
 const StyledCarousel = styled.div`
   ${({
   backgroundColor,
   theme
 }) => css`
-    &.${rootClassName} {
+    &.${rootClassName$1} {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -14149,7 +14176,7 @@ const DotCarousel = ({
   progressIndicator,
   showPagesButtons = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName, className, backgroundColor ? 'with-background-color' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1, className, backgroundColor ? 'with-background-color' : '');
   const rightNavigationButtonClasses = useStylesWithRootClass('carousel-right-arrow', displayNavigationButtons);
   const leftNavigationButtonClasses = useStylesWithRootClass('carousel-left-arrow', displayNavigationButtons);
   const createUuids = () => {
@@ -14300,4 +14327,60 @@ const DotCarousel = ({
   });
 };
 
-export { ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+const rootClassName = 'dot-sticky-with-border';
+const StyledStickyWithBorder = styled.div`
+  ${({
+  pinnedStickyBorder,
+  unpinnedStickyBorder
+}) => css`
+    &.${rootClassName} {
+      position: sticky;
+      top: -1px;
+
+      &.pinned {
+        border-bottom: ${pinnedStickyBorder.width}px ${pinnedStickyBorder.style}
+          ${pinnedStickyBorder.color};
+      }
+      &.unpinned {
+        ${() => unpinnedStickyBorder && `
+            border-bottom: ${unpinnedStickyBorder.width}px ${unpinnedStickyBorder.style}
+            ${unpinnedStickyBorder.color};
+        `}
+      }
+    }
+  `}
+`;
+
+const DotStickyWithBorder = ({
+  ariaLabel,
+  className,
+  children,
+  'data-testid': dataTestId,
+  pinnedStickyBorder,
+  unpinnedStickyBorder
+}) => {
+  const [isPinned, setIsPinned] = useState(false);
+  const ref = useRef();
+  const rootClasses = useStylesWithRootClass(rootClassName, className, isPinned ? 'pinned' : 'unpinned');
+  useEffect(() => {
+    const element = ref.current;
+    const observer = new IntersectionObserver(([e]) => setIsPinned(e.intersectionRatio < 1), {
+      threshold: [1]
+    });
+    observer.observe(element);
+    return function () {
+      observer.unobserve(element);
+    };
+  }, []);
+  return jsx(StyledStickyWithBorder, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-testid": dataTestId,
+    pinnedStickyBorder: pinnedStickyBorder,
+    ref: ref,
+    unpinnedStickyBorder: unpinnedStickyBorder,
+    children: children
+  });
+};
+
+export { ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };