@digital-ai/dot-components 3.2.1 → 3.3.0

package/index.esm.js

@@ -104,12 +104,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$19 = 'dot-icon';
+const rootClassName$1a = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -146,7 +146,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -207,7 +207,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$18 = 'dot-accordion';
+const rootClassName$19 = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -218,7 +218,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$18} .${summaryClassName} {
+    &.${rootClassName$19} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -263,7 +263,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$18,
+  'data-pendoid': dataPendoId = rootClassName$19,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -274,7 +274,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -390,7 +390,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$17 = 'dot-text-field';
+const rootClassName$18 = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
@@ -438,7 +438,7 @@ const StyledTextField = styled(TextField)`
   theme,
   InputProps
 }) => css`
-    &.${rootClassName$17} {
+    &.${rootClassName$18} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -482,7 +482,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$17} {
+    &.${rootSelectClassName}, &.${rootClassName$18} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -573,15 +573,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$16 = 'dot-action-toolbar';
+const rootClassName$17 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$17} .MuiInputBase-root {
+      .${rootClassName$18} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -595,7 +595,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1663,12 +1663,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$15 = 'dot-alert-banner';
+const rootClassName$16 = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1703,7 +1703,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$15,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1711,7 +1711,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$15, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$1(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2360,7 +2360,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$14 = 'dot-avatar';
+const rootClassName$15 = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2370,7 +2370,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2482,7 +2482,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2521,12 +2521,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$13 = 'dot-button';
+const rootClassName$14 = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2610,7 +2610,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$14,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2626,7 +2626,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   let color;
   let variant;
   switch (type) {
@@ -2650,7 +2650,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
-    "data-testid": `${dataTestId || rootClassName$13}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$14}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2659,7 +2659,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$13,
+      "data-testid": dataTestId || rootClassName$14,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2678,10 +2678,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$12 = 'dot-link';
+const rootClassName$13 = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2697,7 +2697,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$12,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2709,7 +2709,7 @@ const DotLink = ({
   tooltip,
   underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$1(children) && !ariaLabel) {
@@ -2759,7 +2759,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$11 = 'dot-list';
+const rootClassName$12 = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2767,7 +2767,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$11} {
+      &.${rootClassName$12} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2850,12 +2850,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$10 = 'dot-progress';
+const rootClassName$11 = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
       &.MuiCircularProgress-colorPrimary {
         color: ${theme.palette.figma.inProgress.normal};
       }
@@ -2877,7 +2877,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -2918,35 +2918,35 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$$ = 'dot-popper';
+const rootClassName$10 = 'dot-popper';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
     }
 
-    &.${rootClassName$$}, &.${rootClassName$$} > .dot-popper-paper {
+    &.${rootClassName$10}, &.${rootClassName$10} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$_ = 'dot-menu';
+const rootClassName$$ = 'dot-menu';
 const getListMaxHeight = maxHeight => isString$1(maxHeight) ? maxHeight : `${maxHeight}px`;
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$_}, &.${rootClassName$$} {
+    &.${rootClassName$$}, &.${rootClassName$10} {
       &.loading .MuiPaper-root {
         align-items: center;
         display: flex;
@@ -3021,14 +3021,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$Z = 'dot-ul';
+const rootClassName$_ = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3124,7 +3124,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3235,7 +3235,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3323,12 +3323,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$Y = 'dot-drawer';
+const rootClassName$Z = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} .MuiBackdrop-root {
+    &.${rootClassName$Z} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3347,12 +3347,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$X = 'dot-drawer-header';
+const rootClassName$Y = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3363,13 +3363,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$W = 'dot-icon-btn';
+const rootClassName$X = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3428,7 +3428,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$W,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3441,7 +3441,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$W, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3476,7 +3476,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3493,10 +3493,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$V = 'dot-drawer-body';
+const rootClassName$W = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3517,7 +3517,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3532,12 +3532,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$U = 'dot-drawer-footer';
+const rootClassName$V = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3550,7 +3550,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3566,7 +3566,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$Y,
+  'data-pendoid': dataPendoId = rootClassName$Z,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3589,7 +3589,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, 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';
@@ -3831,6 +3831,7 @@ const NestedList = ({
 const DotListItem = ({
   ariaLabel,
   ariaRole = 'listitem',
+  autoFocus,
   className,
   component = 'li',
   'data-pendoid': dataPendoId = listItemRootClass,
@@ -3840,6 +3841,7 @@ const DotListItem = ({
   href,
   isOpened = false,
   onClick,
+  onKeyDown,
   onMenuLeave,
   items = [],
   menuPlacement,
@@ -3909,6 +3911,7 @@ const DotListItem = ({
   return jsxs(Fragment, {
     children: [jsx(ListItem, {
       "aria-label": ariaLabel || tooltip,
+      autoFocus: autoFocus,
       classes: {
         root: rootClasses
       },
@@ -3918,6 +3921,7 @@ const DotListItem = ({
       divider: divider,
       href: onClick ? null : href,
       onClick: !isLink ? handleClick : null,
+      onKeyDown: onKeyDown,
       role: ariaRole,
       selected: isFlyout ? navIsOpened : selected,
       tabIndex: isLink ? -1 : 0,
@@ -3973,7 +3977,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const [listItemIndex, setListItemIndex] = useState(null);
@@ -4063,12 +4067,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$T = 'dot-copy-button';
+const rootClassName$U = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$T} .copied-to-clipboard {
+    &.${rootClassName$U} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4094,7 +4098,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$T,
+  'data-pendoid': dataPendoId = rootClassName$U,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4142,7 +4146,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$T,
+    className: rootClassName$U,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4231,7 +4235,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$17,
+  'data-pendoid': dataPendoId = rootClassName$18,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4277,7 +4281,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$17, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$18, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4413,10 +4417,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$S = 'dot-search-input';
+const rootClassName$T = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
     }
   `}
 `;
@@ -4433,7 +4437,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4689,12 +4693,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$R = 'dot-app-switcher';
+const rootClassName$S = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$R} {
+    &.${rootClassName$S} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -4804,7 +4808,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5182,12 +5186,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$Q = 'dot-sidebar';
+const rootClassName$R = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$R} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5463,10 +5467,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$P = 'dot-truncate-with-tooltip';
+const rootClassName$Q = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$Q} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5497,7 +5501,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5607,7 +5611,7 @@ const DotSidebar = ({
     setIsOpen(!isOpen);
   };
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5674,12 +5678,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$O = 'dot-badge';
+const rootClassName$P = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$O} {
+    &.${rootClassName$P} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5714,7 +5718,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$O, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5736,7 +5740,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$N = 'dot-app-toolbar';
+const rootClassName$O = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5776,7 +5780,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$N} {
+    &.${rootClassName$O} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -5898,7 +5902,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$N, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$O, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6028,14 +6032,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$M = 'dot-autocomplete';
+const rootClassName$N = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$M} {
+    &.${rootClassName$N} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6072,12 +6076,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$L = 'dot-chip';
+const rootClassName$M = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$L} {
+    &.${rootClassName$M} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6183,7 +6187,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$L,
+  'data-pendoid': dataPendoId = rootClassName$M,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6192,10 +6196,11 @@ const DotChip = ({
   onClick,
   onDelete,
   size = 'medium',
-  startIcon
+  startIcon,
+  tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$L, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$M, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6222,6 +6227,7 @@ const DotChip = ({
     onClick: event => onClick && onClick(event),
     onDelete: isDeletable && onDelete ? event => onDelete(event) : undefined,
     size: size,
+    tabIndex: tabIndex,
     variant: "outlined"
   });
 };
@@ -6293,7 +6299,7 @@ const DotAutoComplete = ({
   ariaLabel,
   autoFocus,
   className,
-  'data-pendoid': dataPendoId = rootClassName$M,
+  'data-pendoid': dataPendoId = rootClassName$N,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6344,8 +6350,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$M, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$17, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$N, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$18, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
   let highlightedOption = null;
   let textFieldInput;
@@ -6390,7 +6396,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$$,
+      className: rootClassName$10,
       disablePortal: disablePortal,
       "$maxHeight": maxHeight
     }));
@@ -6412,7 +6418,7 @@ const DotAutoComplete = ({
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
     return jsx(StyledPopper, Object.assign({}, props, {
-      className: rootClassName$$,
+      className: rootClassName$10,
       disablePortal: disablePortal,
       "$maxHeight": maxHeight,
       children: jsxs(Paper, Object.assign({}, paperProps, {
@@ -6621,10 +6627,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$K = 'dot-avatar-group';
+const rootClassName$L = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$K} {
+      &.${rootClassName$L} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6643,7 +6649,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$K, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$L, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6658,13 +6664,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$J = 'dot-breadcrumbs';
+const rootClassName$K = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$K} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6684,7 +6690,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$J} {
+    &.${rootClassName$K} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7012,7 +7018,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$J,
+        root: rootClassName$K,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7043,14 +7049,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$I = 'dot-button-toggle';
+const rootClassName$J = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$I} {
+    &.${rootClassName$J} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7166,7 +7172,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$I,
+  'data-pendoid': dataPendoId = rootClassName$J,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7176,7 +7182,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$J, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7259,12 +7265,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$H = 'dot-card';
+const rootClassName$I = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$H} {
+    &.${rootClassName$I} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7276,7 +7282,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$I, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7305,12 +7311,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$G = 'dot-card-footer';
+const rootClassName$H = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$G} {
+    &.${rootClassName$H} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7322,7 +7328,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$H, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7366,9 +7372,9 @@ const DotCardHeader = ({
   });
 };
 
-const rootClassName$F = 'dot-form-control-label';
+const rootClassName$G = 'dot-form-control-label';
 const StyledFormControlLabel = styled(FormControlLabel)`
-  &.${rootClassName$F} {
+  &.${rootClassName$G} {
     .MuiFormControlLabel-label {
       margin-bottom: 0;
       padding: 0 0 0 4px;
@@ -7391,12 +7397,12 @@ const StyledFormControlLabel = styled(FormControlLabel)`
   }
 `;
 
-const rootClassName$E = 'dot-checkbox';
+const rootClassName$F = 'dot-checkbox';
 const StyledCheckbox = styled(Checkbox)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$E} {
+    &.${rootClassName$F} {
       padding: ${theme.spacing(1)};
 
       &.MuiCheckbox-indeterminate {
@@ -7415,7 +7421,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$F,
+  'data-pendoid': dataPendoId = rootClassName$G,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -7430,14 +7436,14 @@ function DotCheckbox({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
   const checkboxControl = jsx(StyledCheckbox, {
     checked: checked,
     classes: {
-      root: rootClassName$E
+      root: rootClassName$F
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -7466,13 +7472,13 @@ function DotCheckbox({
   });
 }
 
-const rootClassName$D = 'dot-form-group';
+const rootClassName$E = '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$D} {
+  &.${rootClassName$E} {
     .MuiFormLabel-root {
       width: 100%;
       line-height: 24px;
@@ -7503,7 +7509,7 @@ const StyledFormControl = styled(FormControl)`
   }
 `;
 
-const rootClassName$C = 'dot-checkbox-group';
+const rootClassName$D = 'dot-checkbox-group';
 const wrapperClassName$1 = 'dot-checkbox-group-wrapper';
 const checkboxListClassName = 'dot-checkbox-list';
 const checkboxListItemClassName = 'dot-checkbox-list-item';
@@ -7512,7 +7518,7 @@ const StyledCheckboxGroup = styled.div`
   theme
 }) => css`{
     &.${wrapperClassName$1} {
-      .${rootClassName$C} {
+      .${rootClassName$D} {
         width: 100%;
       }
 
@@ -7535,7 +7541,7 @@ const StyledCheckboxGroup = styled.div`
         margin-top: 0;
         padding-left: ${theme.spacing(2.5)};
 
-        .${rootClassName$F} {
+        .${rootClassName$G} {
           margin: 0;
         }
       }
@@ -7543,13 +7549,13 @@ const StyledCheckboxGroup = styled.div`
   `}
 `;
 
-const rootClassName$B = 'dot-form-group';
+const rootClassName$C = 'dot-form-group';
 const StyledFormGroup = styled(FormGroup)`
   ${({
   theme,
   row
 }) => css`
-    &.${rootClassName$B} > * {
+    &.${rootClassName$C} > * {
       margin: ${row ? `${theme.spacing(0.5)}` : 0};
     }
   `}
@@ -7562,7 +7568,7 @@ function DotFormGroup({
   'data-testid': dataTestId,
   row
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className);
   return jsx(StyledFormGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7601,7 +7607,7 @@ function DotCheckboxGroup({
   size = 'medium'
 }) {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$D, rootClassName$C, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, rootClassName$D, className, placement);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [allChecked, setAllChecked] = useState(false);
   /* This will ensure that state can be updated from the outside */
@@ -7686,12 +7692,12 @@ function DotCheckboxGroup({
   });
 }
 
-const rootClassName$A = 'dot-dialog';
+const rootClassName$B = 'dot-dialog';
 const StyledDialog = styled(Dialog)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$A} {
+    &.${rootClassName$B} {
       .MuiDialog-paper {
         background: ${theme.palette.figma.background.level1.white};
         color: ${theme.palette.figma.typography.black};
@@ -7737,7 +7743,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible = true,
   className,
-  'data-pendoid': dataPendoId = rootClassName$A,
+  'data-pendoid': dataPendoId = rootClassName$B,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -7750,7 +7756,7 @@ const DotDialog = ({
   submitButtonProps,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$B, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
   useEffect(() => {
@@ -7868,7 +7874,7 @@ const DotConfirmationDialog = ({
   });
 };
 
-const rootClassName$z = 'dot-grid';
+const rootClassName$A = '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`};
@@ -7920,7 +7926,7 @@ const Grid = ({
   className,
   children
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
   return jsx("div", {
     className: rootClasses,
     children: children
@@ -7939,7 +7945,7 @@ const StyledGrid = styled(Grid)`
   theme,
   width
 }) => css`
-    &.${rootClassName$z} {
+    &.${rootClassName$A} {
       display: grid;
       grid-template-rows: ${frGetter(rows)};
       ${columns ? `${columns && `grid-template-columns: ${frGetter(columns)}`};` : breakpointsGetter$1(theme, columnsBreakpoints, columnGap, rowGap)}
@@ -8145,7 +8151,7 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$y = 'dot-empty-state';
+const rootClassName$z = 'dot-empty-state';
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -8180,9 +8186,9 @@ const StyledEmptyState = styled.div`
   `}
 `;
 
-const rootClassName$x = 'dot-illustration';
+const rootClassName$y = 'dot-illustration';
 const StyledIllustration = styled.span`
-  &.${rootClassName$x} {
+  &.${rootClassName$y} {
     display: inline-block;
   }
 `;
@@ -8199,16 +8205,16 @@ const DotIllustration = ({
   tooltip,
   tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
   return jsx(DotTooltip, {
     title: tooltip,
     placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$x}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$y}-tooltip`,
     children: jsx(StyledIllustration, {
       "aria-hidden": "false",
       "aria-label": ariaLabel || title || 'Illustration',
       className: rootClasses,
-      "data-testid": dataTestId || rootClassName$x,
+      "data-testid": dataTestId || rootClassName$y,
       role: ariaRole,
       children: jsx("img", {
         alt: alt || 'Illustration',
@@ -8233,7 +8239,7 @@ const DotEmptyState = ({
   subtitle,
   title
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -8293,6 +8299,7 @@ const StyledRadioGroupWrapper = styled.div`
       }
 
       .MuiFormLabel-root {
+        color: ${theme.palette.figma.typography.black};
         display: inline;
         width: 100%;
       }
@@ -8315,20 +8322,20 @@ const StyledRadioGroup = styled(RadioGroup)`
     &.${groupClassName} {
       padding-left: ${theme.spacing(2.5)};
 
-      .${rootClassName$F} {
+      .${rootClassName$G} {
         margin: 0;
       }
     }
   `}
 `;
 
-const rootClassName$w = 'dot-date-picker';
+const rootClassName$x = 'dot-date-picker';
 const popperClassName = 'dot-date-picker-popper';
 const containerClassName$2 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
 const StyledDatePickerContainer = styled.div`
   ${() => css`
-    &.${rootClassName$w} .full-width {
+    &.${rootClassName$x} .full-width {
       width: 100%;
     }
   `}
@@ -8337,7 +8344,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$w} {
+    &.${rootClassName$x} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -8377,7 +8384,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$v = 'dot-time-picker';
+const rootClassName$w = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
 const TIME_SELECTION_WIDTH_SPACING = 14.5;
@@ -8448,7 +8455,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$w} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -8467,36 +8474,36 @@ const StyledTimePicker = styled(TimePicker)`
   `}
 `;
 
-const rootClassName$u = 'dot-form';
+const rootClassName$v = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$v} {
       margin: ${theme.spacing(3, 0)};
 
-      .${rootClassName$D},
-        .${rootClassName$F},
-        .${rootClassName$17},
+      .${rootClassName$E},
+        .${rootClassName$G},
+        .${rootClassName$18},
         .${rootSelectClassName},
-        .${rootClassName$w},
-        .${rootClassName$v} {
+        .${rootClassName$x},
+        .${rootClassName$w} {
         margin: ${theme.spacing(1, 0)};
       }
 
       label
-        + .${rootClassName$17},
+        + .${rootClassName$18},
         label
         + .${rootSelectClassName},
         label
-        + .${rootClassName$w},
+        + .${rootClassName$x},
         label
-        + .${rootClassName$v} {
+        + .${rootClassName$w} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
-      .${rootClassName$C}, .${groupClassName} {
-        .${rootClassName$F} {
+      .${rootClassName$D}, .${groupClassName} {
+        .${rootClassName$G} {
           margin: 0;
         }
       }
@@ -8511,7 +8518,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -8524,10 +8531,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$t = 'dot-dynamic-form';
+const rootClassName$u = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$u} {
     }
   `}
 `;
@@ -8818,12 +8825,12 @@ const DotInputSelect = ({
   });
 };
 
-const rootClassName$s = 'dot-progress-button';
+const rootClassName$t = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$t} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -8848,7 +8855,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$s,
+  'data-pendoid': dataPendoId = rootClassName$t,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -8861,7 +8868,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -8889,12 +8896,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$r = 'dot-radio';
+const rootClassName$s = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$r} {
+    &.${rootClassName$s} {
       padding: 8px;
 
       svg {
@@ -8912,7 +8919,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
-  'data-pendoid': dataPendoId = rootClassName$F,
+  'data-pendoid': dataPendoId = rootClassName$G,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -8925,7 +8932,7 @@ function DotRadioButton({
   size = 'medium',
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$F, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
@@ -8933,7 +8940,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$r
+      root: rootClassName$s
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8979,7 +8986,7 @@ const DotRadioGroup = ({
   size = 'medium'
 }) => {
   const placement = `${placementClassName}${labelPlacement}`;
-  const rootClasses = useStylesWithRootClass(rootClassName$D, className, placement);
+  const rootClasses = useStylesWithRootClass(rootClassName$E, className, placement);
   const radioValue = value || defaultValue;
   const [selectedValue, setSelectedValue] = useState(radioValue);
   /* This will ensure that value can be updated from the outside */
@@ -9044,7 +9051,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$q = 'dot-switch';
+const rootClassName$r = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -9073,7 +9080,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$q,
+  'data-pendoid': dataPendoId = rootClassName$r,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -9083,7 +9090,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$r, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -9113,7 +9120,7 @@ const DotSwitch = ({
     tabIndex: 0
   });
   return jsx(StyledFormControlLabel, {
-    className: rootClassName$F,
+    className: rootClassName$G,
     control: switchControl,
     label: label,
     labelPlacement: labelPlacement
@@ -9434,7 +9441,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$u, 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]);
@@ -9680,7 +9687,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$p = 'dot-inline-edit';
+const rootClassName$q = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -9692,7 +9699,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$p} {
+    &.${rootClassName$q} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -9904,7 +9911,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$p,
+  'data-pendoid': dataPendoId = rootClassName$q,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -9937,7 +9944,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$q, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -10116,13 +10123,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$o = 'dot-navigation-rail';
+const rootClassName$p = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$p} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -10169,7 +10176,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$p, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -10220,21 +10227,23 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$n = 'dot-pill';
+const rootClassName$o = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$o} {
       background-color: ${({
-  backgroundcolor
+  backgroundcolor,
+  variant
 }) => {
-  return backgroundcolor || theme.palette.grey[200];
+  const defaultBackground = variant === 'filled' ? theme.palette.grey[200] : theme.palette.grey[50];
+  return backgroundcolor !== null && backgroundcolor !== void 0 ? backgroundcolor : defaultBackground;
 }};
       border-color: ${({
   bordercolor
 }) => {
-  return bordercolor ? bordercolor : theme.palette.layer.n700;
+  return bordercolor ? bordercolor : theme.palette.grey[200];
 }};
       color: ${({
   labelcolor
@@ -10245,7 +10254,7 @@ const StyledPill = styled(Chip)`
         color: ${({
   labelcolor
 }) => {
-  return labelcolor ? labelcolor : theme.palette.layer.n700;
+  return labelcolor ? labelcolor : theme.palette.grey.main;
 }};
         margin: ${theme.spacing(0, -0.5, 0, 1)};
       }
@@ -10264,18 +10273,9 @@ const StyledPill = styled(Chip)`
           }
         }
 
-        &.default {
-          background-color: ${theme.palette.grey[50]};
-          border-color: ${theme.palette.grey[200]};
-          color: ${theme.palette.layer.n700};
-          .dot-icon {
-            color: ${theme.palette.grey.main};
-          }
-        }
-
         &.success {
-          background-color: ${theme.palette.success[50]};
-          border-color: ${theme.palette.success.main};
+          background-color: ${theme.palette.figma.success.light};
+          border-color: ${theme.palette.figma.success.normal};
           color: ${theme.palette.layer.n700};
           .dot-icon {
             color: ${theme.palette.success.main};
@@ -10283,8 +10283,8 @@ const StyledPill = styled(Chip)`
         }
 
         &.warning {
-          background-color: ${theme.palette.warning[50]};
-          border-color: ${theme.palette.warning.main};
+          background-color: ${theme.palette.figma.warning.light};
+          border-color: ${theme.palette.figma.warning.normal};
           color: ${theme.palette.layer.n700};
           .dot-icon {
             color: ${theme.palette.warning.main};
@@ -10292,8 +10292,8 @@ const StyledPill = styled(Chip)`
         }
 
         &.in-progress {
-          background-color: ${theme.palette.primary[50]};
-          border-color: ${theme.palette.primary.main};
+          background-color: ${theme.palette.figma.primary.light};
+          border-color: ${theme.palette.figma.primary.normal};
           color: ${theme.palette.layer.n700};
           .dot-icon {
             color: ${theme.palette.primary.main};
@@ -10302,15 +10302,6 @@ const StyledPill = styled(Chip)`
       }
 
       &.MuiChip-filled {
-        &.default {
-          background-color: ${theme.palette.grey[200]};
-          border-color: ${theme.palette.grey[200]};
-          color: ${theme.palette.layer.n700};
-          .dot-icon {
-            color: ${theme.palette.grey.main};
-          }
-        }
-
         &.error {
           background-color: ${theme.palette.error.main};
           border-color: ${theme.palette.error.main};
@@ -10364,7 +10355,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -10382,12 +10373,12 @@ const DotPill = ({
   });
 };
 
-const rootClassName$m = 'dot-skeleton';
+const rootClassName$n = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$m} {
+    &.${rootClassName$n} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -10402,7 +10393,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -10436,18 +10427,18 @@ const getSnackbarTitleFromSeverity = severity => {
   }
 };
 
-const rootClassName$l = 'dot-snackbar';
+const rootClassName$m = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$m} {
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$15} {
+      .${rootClassName$16} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -10499,7 +10490,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$m, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -10557,10 +10548,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$k = 'dot-snackbar-container';
+const rootClassName$l = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$l} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -10591,10 +10582,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$k,
+    className: rootClassName$l,
     children: jsx("div", {
-      className: rootClassName$k,
-      "data-testid": rootClassName$k,
+      className: rootClassName$l,
+      "data-testid": rootClassName$l,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoHideDuration: alert.autoHideDuration,
@@ -10657,12 +10648,12 @@ const useDotSnackbarContext = () => {
   return useContext(DotSnackbarContext);
 };
 
-const rootClassName$j = 'dot-split-button-group';
+const rootClassName$k = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$j} {
+    &.${rootClassName$k} {
       &.outlined,
       &.text {
         .expand-button {
@@ -10729,7 +10720,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$j,
+  'data-pendoid': dataPendoId = rootClassName$k,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -10744,7 +10735,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$j, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$k, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -10810,14 +10801,14 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$i = 'dot-stepper';
+const rootClassName$j = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$i} {
+    &.${rootClassName$j} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -11090,7 +11081,7 @@ const DotStepper = ({
   const displayFinalContent = finalContent && currentStep > steps.length;
   const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
   const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
-  const rootClasses = useStylesWithRootClass(rootClassName$i, stepsPosition, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$j, stepsPosition, className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
@@ -11289,6 +11280,175 @@ const DotStepper = ({
   });
 };
 
+const rootClassName$i = 'dot-table-pagination-custom-actions';
+const StyledTablePaginationCustomActions = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$i} {
+      margin-left: ${theme.spacing(2.5)};
+      display: flex;
+      align-items: center;
+
+      .page-picker-button {
+        width: ${theme.spacing(5)};
+      }
+
+      .page-control-button {
+        padding: ${theme.spacing(1.5)};
+        .dot-icon {
+          font-size: ${theme.typography.body1.fontSize}px;
+          i {
+            height: ${theme.typography.body1.fontSize}px;
+          }
+        }
+      }
+
+      .page-selection {
+        width: ${theme.spacing(7)};
+        padding: ${theme.spacing(1, 0)};
+        display: flex;
+
+        .pagination-page-picker {
+          max-height: ${theme.spacing(18)};
+          width: 100%;
+          overflow: auto;
+
+          /* Hide scrollbar for Chrome, Safari and Opera */
+          ::-webkit-scrollbar {
+            display: none;
+          }
+
+          /* Hide scrollbar for IE, Edge and Firefox */
+          -ms-overflow-style: none; /* IE and Edge */
+          scrollbar-width: none; /* Firefox */
+
+          .page-number-item {
+            height: ${theme.spacing(4)};
+            text-align: center;
+          }
+        }
+      }
+    }
+  `}
+`;
+
+const scrollOptions = {
+  behavior: 'auto',
+  block: 'start',
+  inline: 'nearest'
+};
+const DotTablePaginationCustomActions = props => {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    onPageChange
+  } = props;
+  const pagePickerButtonRef = useRef(null);
+  const pageSelectionRef = useRef(null);
+  const [showPageSelectionPopper, setShowPageSelectionPopper] = useState(false);
+  const pageToDisplay = page + 1;
+  const numberOfPages = Math.ceil(count / rowsPerPage);
+  const isFirstPage = pageToDisplay === 1;
+  const isLastPage = pageToDisplay === numberOfPages;
+  useEffect(() => {
+    if (showPageSelectionPopper) {
+      scrollToSelectedPage();
+    }
+  }, [showPageSelectionPopper]);
+  const scrollToSelectedPage = () => {
+    if (!(pageSelectionRef === null || pageSelectionRef === void 0 ? void 0 : pageSelectionRef.current)) return;
+    pageSelectionRef.current.children[page].scrollIntoView(scrollOptions);
+  };
+  const handleBackButtonClick = event => {
+    !isFirstPage && onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = event => {
+    !isLastPage && onPageChange(event, page + 1);
+  };
+  const handlePageChange = newPage => {
+    onPageChange(null, newPage);
+    setShowPageSelectionPopper(false);
+    pagePickerButtonRef === null || pagePickerButtonRef === void 0 ? void 0 : pagePickerButtonRef.current.focus();
+  };
+  const handlePageKeydown = pageNumber => event => {
+    const prevElement = pageNumber > 0 && pageSelectionRef.current.children[pageNumber - 1];
+    const nextElement = pageNumber < numberOfPages - 1 && pageSelectionRef.current.children[pageNumber + 1];
+    if (event.key === 'ArrowUp' && prevElement) {
+      event.preventDefault();
+      prevElement.focus();
+    } else if (event.key === 'ArrowDown' && nextElement) {
+      event.preventDefault();
+      nextElement.focus();
+    } else if (event.key === 'Tab' || event.key === 'Escape') {
+      event.preventDefault();
+      setShowPageSelectionPopper(false);
+      pagePickerButtonRef === null || pagePickerButtonRef === void 0 ? void 0 : pagePickerButtonRef.current.focus();
+    }
+  };
+  const renderPagesList = () => {
+    return Array.from(Array(numberOfPages)).map((_value, index) => {
+      const pageNumberToDisplay = index + 1;
+      const isSelected = index === page;
+      return jsx(DotListItem, {
+        ariaLabel: `page ${pageNumberToDisplay}`,
+        autoFocus: isSelected,
+        className: "page-number-item",
+        "data-testid": `page-number-item-${index}`,
+        onClick: _event => handlePageChange(index),
+        onKeyDown: handlePageKeydown(index),
+        text: pageNumberToDisplay.toString(),
+        selected: isSelected
+      }, pageNumberToDisplay);
+    });
+  };
+  return jsxs(StyledTablePaginationCustomActions, {
+    className: rootClassName$i,
+    children: [jsx(DotIconButton, {
+      ariaLabel: "previous page",
+      className: "page-control-button",
+      "data-testid": "previous-page-button",
+      disabled: isFirstPage,
+      iconId: "chevron-left",
+      onClick: handleBackButtonClick
+    }), jsx(DotButton, {
+      ariaLabel: "jump to page",
+      className: "page-picker-button",
+      onClick: () => setShowPageSelectionPopper(!showPageSelectionPopper),
+      ref: pagePickerButtonRef,
+      type: "text",
+      children: pageToDisplay
+    }), jsx(DotIconButton, {
+      ariaLabel: "next page",
+      className: "page-control-button",
+      "data-testid": "next-page-button",
+      disabled: isLastPage,
+      iconId: "chevron-right",
+      onClick: handleNextButtonClick
+    }), jsx(Popper, {
+      anchorEl: pagePickerButtonRef === null || pagePickerButtonRef === void 0 ? void 0 : pagePickerButtonRef.current,
+      disablePortal: true,
+      open: showPageSelectionPopper,
+      placement: "top",
+      children: jsx(ClickAwayListener, {
+        onClickAway: () => setShowPageSelectionPopper(false),
+        children: jsx(Paper, {
+          elevation: 8,
+          children: jsx("div", {
+            className: "page-selection",
+            children: jsx("div", {
+              className: "pagination-page-picker",
+              ref: pageSelectionRef,
+              children: renderPagesList()
+            })
+          })
+        })
+      })
+    })]
+  });
+};
+
 const rootClassName$h = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
@@ -11316,6 +11476,10 @@ const StyledTablePagination = styled.div`
       .MuiInputBase-root {
         margin-bottom: 0;
       }
+
+      &.with-custom-actions {
+        overflow: unset;
+      }
     }
   `}
 `;
@@ -11333,9 +11497,10 @@ const DotTablePagination = ({
   page = 0,
   rowsPerPage = 10,
   rowsPerPageOptions = [...ROWS_PER_PAGE_OPTIONS],
+  showJumpToPageActionButton = false,
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$h, className, showJumpToPageActionButton ? 'with-custom-actions' : '');
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -11347,6 +11512,7 @@ const DotTablePagination = ({
       className: rootClassName$h,
       typography: typography,
       children: jsx(TablePagination, {
+        ActionsComponent: showJumpToPageActionButton ? DotTablePaginationCustomActions : undefined,
         "aria-label": ariaLabel,
         classes: {
           root: rootClasses,
@@ -13383,7 +13549,7 @@ const DotPopper = ({
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -13623,7 +13789,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$w,
+  'data-pendoid': dataPendoId = rootClassName$x,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -13663,7 +13829,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -13882,7 +14048,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$v,
+  'data-pendoid': dataPendoId = rootClassName$w,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -13914,7 +14080,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);