@digital-ai/dot-components 3.1.0 → 3.2.1

package/index.esm.js

@@ -7,11 +7,11 @@ import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyfr
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import jwt_decode from 'jwt-decode';
 import '@digital-ai/dot-illustrations';
+import { DatePicker, PickersDay, TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { useDropzone } from 'react-dropzone';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import dayjs from 'dayjs';
 import updateLocale from 'dayjs/plugin/updateLocale';
-import { DatePicker, PickersDay, LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import utc from 'dayjs/plugin/utc';
 
@@ -55,6 +55,7 @@ const DotTooltip = ({
   onClose,
   open,
   placement = 'bottom',
+  popperClassName,
   title
 }) => {
   const rootClasses = useStylesWithRootClass('dot-tooltip', className);
@@ -90,7 +91,8 @@ const DotTooltip = ({
     open: open,
     placement: placement,
     PopperProps: {
-      disablePortal
+      disablePortal,
+      className: popperClassName
     },
     role: ariaRole,
     title: title,
@@ -1667,10 +1669,16 @@ const StyledAlertBanner = styled(Alert)`
   theme
 }) => css`
     &.${rootClassName$15} {
+      align-items: center;
       box-sizing: border-box;
       min-height: 48px;
       overflow: hidden;
 
+      .MuiAlert-message {
+        margin: ${theme.spacing(1, 0)};
+        padding: 0;
+      }
+
       &.MuiAlert-standardSuccess {
         background: ${theme.palette.figma.overlay.alerts.success.background};
       }
@@ -3992,6 +4000,7 @@ const DotList = ({
         width: listWidth
       },
       children: [items.map((item, index) => {
+        var _a;
         const handleListItemClick = e => {
           var _a;
           const target = e.target;
@@ -4003,7 +4012,7 @@ const DotList = ({
             updateSelectedListItem(index);
           }
         };
-        const determineOnClick = item.onClick || item.items ? handleListItemClick : null;
+        const determineOnClick = item.onClick || ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? handleListItemClick : null;
         const handleMenuLeave = event => {
           // TODO: Need to apply animation to open/close
           var _a, _b;
@@ -8313,21 +8322,179 @@ const StyledRadioGroup = styled(RadioGroup)`
   `}
 `;
 
-const rootClassName$w = 'dot-form';
-const StyledFormContainer = styled.div`
+const rootClassName$w = '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 {
+      width: 100%;
+    }
+  `}
+`;
+const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
     &.${rootClassName$w} {
+      ${pickerInputStyles(theme)};
+
+      .Mui-disabled.MuiInputBase-root,
+      &.read-only .MuiInputBase-root {
+        ${readOnlyStyles(theme)};
+      }
+
+      .dot-icon-btn .dot-i {
+        margin-top: -5px;
+      }
+
+      .MuiFormLabel-root {
+        color: ${theme.palette.figma.typography.black};
+      }
+    }
+  `}
+`;
+const StyledPickersDay = styled(PickersDay)`
+  ${({
+  theme
+}) => css`
+    &.${rectanglePickersDayClassName} {
+      border-radius: ${theme.spacing(0.5)};
+      &.MuiPickersDay-today:not(.Mui-selected) {
+        background: ${theme.palette.figma.neutral.normal};
+        border: 1px solid ${theme.palette.figma.primary.normal};
+        &:hover {
+          background: ${theme.palette.figma.primary.normal};
+        }
+      }
+
+      &:hover {
+        background: ${theme.palette.figma.primary.normal};
+        color: ${theme.palette.figma.typography.white};
+      }
+    }
+  `}
+`;
+
+const rootClassName$v = 'dot-time-picker';
+const containerClassName$1 = 'dot-time-picker-container';
+const TIME_SELECTION_HEIGHT_SPACING = 34.5;
+const TIME_SELECTION_WIDTH_SPACING = 14.5;
+const TIME_UNIT_WIDTH_SPACING = 4.5;
+const TIME_UNIT_HEIGHT_SPACING = 4.5;
+const StyledTimePickerContainer = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${containerClassName$1} {
+      .full-width {
+        width: 100%;
+      }
+
+      .dot-time-picker-popper {
+        z-index: ${levelTop};
+
+        .dot-time-picker-paper {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .dot-time-picker-selection {
+            max-height: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING)};
+            width: ${theme.spacing(TIME_SELECTION_WIDTH_SPACING)};
+            display: flex;
+            margin: ${theme.spacing(1)};
+            gap: ${theme.spacing(0.5)};
+
+            .dot-time-picker-hours,
+            .dot-time-picker-minutes,
+            .dot-time-picker-daytime {
+              display: flex;
+              flex-direction: column;
+              overflow: auto;
+              gap: ${theme.spacing(0.5)};
+              padding-bottom: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING - TIME_UNIT_HEIGHT_SPACING)};
+
+              /* 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 */
+            }
+
+            .dot-picker-button {
+              width: ${theme.spacing(TIME_UNIT_WIDTH_SPACING)};
+              height: ${theme.spacing(TIME_UNIT_HEIGHT_SPACING)};
+              margin: 0;
+            }
+          }
+
+          .dot-time-picker-action-buttons {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: ${theme.spacing(0.5)};
+          }
+        }
+      }
+    }
+  `}
+`;
+const StyledTimePicker = styled(TimePicker)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$v} {
+      ${pickerInputStyles(theme)};
+
+      .Mui-disabled.MuiInputBase-root,
+      &.read-only .MuiInputBase-root {
+        ${readOnlyStyles(theme)};
+      }
+
+      .dot-icon-btn .dot-i {
+        margin-top: -5px;
+      }
+
+      .MuiFormLabel-root {
+        color: ${theme.palette.figma.typography.black};
+      }
+    }
+  `}
+`;
+
+const rootClassName$u = 'dot-form';
+const StyledFormContainer = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$u} {
       margin: ${theme.spacing(3, 0)};
 
       .${rootClassName$D},
         .${rootClassName$F},
         .${rootClassName$17},
-        .${rootSelectClassName} {
+        .${rootSelectClassName},
+        .${rootClassName$w},
+        .${rootClassName$v} {
         margin: ${theme.spacing(1, 0)};
       }
 
+      label
+        + .${rootClassName$17},
+        label
+        + .${rootSelectClassName},
+        label
+        + .${rootClassName$w},
+        label
+        + .${rootClassName$v} {
+        margin: ${theme.spacing(0, 0, 1, 0)};
+      }
+
       .${rootClassName$C}, .${groupClassName} {
         .${rootClassName$F} {
           margin: 0;
@@ -8344,7 +8511,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -8357,10 +8524,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$v = 'dot-dynamic-form';
+const rootClassName$t = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$t} {
     }
   `}
 `;
@@ -8651,12 +8818,12 @@ const DotInputSelect = ({
   });
 };
 
-const rootClassName$u = 'dot-progress-button';
+const rootClassName$s = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$s} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -8681,7 +8848,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$u,
+  'data-pendoid': dataPendoId = rootClassName$s,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -8694,7 +8861,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -8722,12 +8889,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$t = 'dot-radio';
+const rootClassName$r = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$r} {
       padding: 8px;
 
       svg {
@@ -8766,7 +8933,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$t
+      root: rootClassName$r
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -8877,7 +9044,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$s = 'dot-switch';
+const rootClassName$q = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -8906,7 +9073,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$s,
+  'data-pendoid': dataPendoId = rootClassName$q,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -8916,7 +9083,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$q, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -9267,7 +9434,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$t, 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]);
@@ -9513,7 +9680,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$r = 'dot-inline-edit';
+const rootClassName$p = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -9525,7 +9692,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$r} {
+    &.${rootClassName$p} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -9737,7 +9904,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$r,
+  'data-pendoid': dataPendoId = rootClassName$p,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -9770,7 +9937,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$r, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$p, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -9949,13 +10116,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$q = 'dot-navigation-rail';
+const rootClassName$o = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$o} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -10002,7 +10169,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -10053,12 +10220,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$p = 'dot-pill';
+const rootClassName$n = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$p} {
+    &.${rootClassName$n} {
       background-color: ${({
   backgroundcolor
 }) => {
@@ -10089,7 +10256,7 @@ const StyledPill = styled(Chip)`
 
       &.MuiChip-outlined {
         &.error {
-          background-color: ${theme.palette.error[100]};
+          background-color: ${theme.palette.error[50]};
           border-color: ${theme.palette.error.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10097,8 +10264,17 @@ 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[100]};
+          background-color: ${theme.palette.success[50]};
           border-color: ${theme.palette.success.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10107,7 +10283,7 @@ const StyledPill = styled(Chip)`
         }
 
         &.warning {
-          background-color: ${theme.palette.warning[100]};
+          background-color: ${theme.palette.warning[50]};
           border-color: ${theme.palette.warning.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10116,7 +10292,7 @@ const StyledPill = styled(Chip)`
         }
 
         &.in-progress {
-          background-color: ${theme.palette.primary[100]};
+          background-color: ${theme.palette.primary[50]};
           border-color: ${theme.palette.primary.main};
           color: ${theme.palette.layer.n700};
           .dot-icon {
@@ -10126,6 +10302,15 @@ 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};
@@ -10179,7 +10364,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -10197,12 +10382,12 @@ const DotPill = ({
   });
 };
 
-const rootClassName$o = 'dot-skeleton';
+const rootClassName$m = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$m} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -10217,7 +10402,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$m, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -10251,18 +10436,20 @@ const getSnackbarTitleFromSeverity = severity => {
   }
 };
 
-const rootClassName$n = 'dot-snackbar';
+const rootClassName$l = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
   theme,
   width,
   $anchorOriginTop
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$l} {
       .MuiAlert-message {
         word-break: break-word;
       }
-
+      .${rootClassName$15} {
+        align-items: flex-start;
+      }
       &.MuiSnackbar-anchorOriginTopLeft,
       &.MuiSnackbar-anchorOriginTopCenter,
       &.MuiSnackbar-anchorOriginTopRight {
@@ -10312,7 +10499,7 @@ const DotSnackbar = ({
 }) => {
   const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
   const handleSnackbarClose = reason => {
     if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
@@ -10370,10 +10557,10 @@ const DotSnackbar = ({
   });
 };
 
-const rootClassName$m = 'dot-snackbar-container';
+const rootClassName$k = 'dot-snackbar-container';
 const StyledSnackbarContainer = styled.div`
   ${() => css`
-    &.${rootClassName$m} {
+    &.${rootClassName$k} {
       position: absolute;
       top: 0;
       width: 250px;
@@ -10388,7 +10575,7 @@ const StyledSnackbarContainer = styled.div`
 
 const DotSnackbarContext = createContext({
   alerts: [],
-  enqueueMessage: (_message, _severity, _autoHideDuration) => null,
+  enqueueMessage: (_message, _severity, _autoHideDuration, _primaryAction, _secondaryAction) => null,
   removeMessage: _id => null
 });
 const DotSnackbarContainer = ({
@@ -10404,10 +10591,10 @@ const DotSnackbarContainer = ({
     };
   }
   return jsx(StyledSnackbarContainer, {
-    className: rootClassName$m,
+    className: rootClassName$k,
     children: jsx("div", {
-      className: rootClassName$m,
-      "data-testid": rootClassName$m,
+      className: rootClassName$k,
+      "data-testid": rootClassName$k,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
           autoHideDuration: alert.autoHideDuration,
@@ -10415,6 +10602,8 @@ const DotSnackbarContainer = ({
           onClose: handleClose(alert.id),
           open: alert.open,
           severity: alert.severity,
+          primaryAction: alert.primaryAction,
+          secondaryAction: alert.secondaryAction,
           children: alert.message
         }, alert.id);
       })
@@ -10426,14 +10615,16 @@ const DotSnackbarProvider = ({
   hideOnClickAway = true
 }) => {
   const [alerts, setAlerts] = useState([]);
-  function enqueueMessage(message, severity, autoHideDuration) {
+  function enqueueMessage(message, severity, autoHideDuration, primaryAction, secondaryAction) {
     const id = CreateUUID();
     const queue = {
       id,
       message,
       severity,
       open: true,
-      autoHideDuration
+      autoHideDuration,
+      primaryAction,
+      secondaryAction
     };
     setAlerts(prevState => {
       return [...prevState, Object.assign({}, queue)];
@@ -10466,12 +10657,12 @@ const useDotSnackbarContext = () => {
   return useContext(DotSnackbarContext);
 };
 
-const rootClassName$l = 'dot-split-button-group';
+const rootClassName$j = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$l} {
+    &.${rootClassName$j} {
       &.outlined,
       &.text {
         .expand-button {
@@ -10538,7 +10729,7 @@ const DotSplitButton = ({
   autoFocus = false,
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$l,
+  'data-pendoid': dataPendoId = rootClassName$j,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled = false,
@@ -10553,7 +10744,7 @@ const DotSplitButton = ({
   tooltipPlacement,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$l, className, type, disabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$j, className, type, disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
   const hasEmptyOptions = options.length === 0;
@@ -10619,14 +10810,14 @@ const DotSplitButton = ({
   });
 };
 
-const rootClassName$k = 'dot-stepper';
+const rootClassName$i = 'dot-stepper';
 const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$k} {
+    &.${rootClassName$i} {
       display: flex;
       align-items: flex-start;
       padding: 0;
@@ -10899,7 +11090,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$k, stepsPosition, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$i, 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' : '');
@@ -11098,7 +11289,7 @@ const DotStepper = ({
   });
 };
 
-const rootClassName$j = 'dot-table-pagination';
+const rootClassName$h = 'dot-table-pagination';
 // TO-DO: Determine how to apply styles to standard popper element
 const paginationItemClassName = 'dot-pagination-menu-item';
 const StyledTablePagination = styled.div`
@@ -11106,7 +11297,7 @@ const StyledTablePagination = styled.div`
   theme,
   typography
 }) => css`
-    .${rootClassName$j} {
+    .${rootClassName$h} {
       border-top: 1px solid ${theme.palette.figma.border.default};
 
       .dot-caption,
@@ -11144,7 +11335,7 @@ const DotTablePagination = ({
   rowsPerPageOptions = [...ROWS_PER_PAGE_OPTIONS],
   typography = 'subtitle2'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$h, className);
   const handlePageChange = (event, newPage) => {
     onPageChange && onPageChange(newPage);
   };
@@ -11153,7 +11344,7 @@ const DotTablePagination = ({
   };
   return (/* Container is used to pass 'typography' prop to a styled component */
     jsx(StyledTablePagination, {
-      className: rootClassName$j,
+      className: rootClassName$h,
       typography: typography,
       children: jsx(TablePagination, {
         "aria-label": ariaLabel,
@@ -11179,12 +11370,12 @@ const DotTablePagination = ({
   );
 };
 
-const rootClassName$i = 'dot-table';
+const rootClassName$g = 'dot-table';
 const StyledPaper = styled(Paper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$i} {
+    &.${rootClassName$g} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       border: 1px solid ${theme.palette.figma.border.default};
       overflow: hidden;
@@ -11253,10 +11444,10 @@ const StyledMenu$1 = styled(DotMenu)`
   }
 `;
 
-const rootClassName$h = 'dot-tbody';
+const rootClassName$f = 'dot-tbody';
 const StyledTableBody = styled(TableBody)`
   ${() => css`
-    &.${rootClassName$h} {
+    &.${rootClassName$f} {
       tr:last-child td {
         border-bottom: none;
       }
@@ -11404,12 +11595,12 @@ const parseCellMaxWidth = width => {
   return width;
 };
 
-const rootClassName$g = 'dot-td';
+const rootClassName$e = 'dot-td';
 const StyledTableCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$g} {
+    &.${rootClassName$e} {
       padding-top: 0;
       padding-bottom: 0;
 
@@ -11504,7 +11695,7 @@ const DotBodyCell = ({
     const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
     setShowMenu(isOverflowing);
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$g, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
+  const rootClasses = useStylesWithRootClass(rootClassName$e, className, noWrap && 'noWrap', Array.isArray(value) && 'actionItems');
   const getTableCellValue = () => {
     if (Array.isArray(value)) {
       return jsx("div", {
@@ -11569,12 +11760,12 @@ const EmptyDotRow = ({
   }, CreateUUID());
 };
 
-const rootClassName$f = 'dot-tr';
+const rootClassName$d = 'dot-tr';
 const StyledTableRowStyles = styled(TableRow)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$f} {
+    &.${rootClassName$d} {
       &.selected {
         background: ${theme.palette.figma.overlay.table.highlights};
 
@@ -11603,12 +11794,12 @@ const StyledTableRowStyles = styled(TableRow)`
 const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
-const rootClassName$e = 'dot-th-checkbox';
+const rootClassName$c = 'dot-th-checkbox';
 const StyledTableHeaderCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$e} {
+    &.${rootClassName$c} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
@@ -11627,7 +11818,7 @@ const DotHeaderCheckboxCell = ({
   multiSelectState,
   onCheckAllChange
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
   const [checkboxState, setCheckboxState] = useState('unchecked');
   useEffect(() => {
     setCheckboxState(multiSelectState);
@@ -11658,12 +11849,12 @@ const DotHeaderCheckboxCell = ({
   });
 };
 
-const rootClassName$d = 'dot-th';
+const rootClassName$b = 'dot-th';
 const StyledTableHeaderCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$d} {
+    &.${rootClassName$b} {
       background: ${theme.palette.figma.background.level0.componentsBackground};
 
       &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {
@@ -11722,7 +11913,7 @@ const DotHeaderCell = ({
   return jsx(StyledTableHeaderCell, {
     align: align,
     classes: {
-      root: rootClassName$d
+      root: rootClassName$b
     },
     sortDirection: sortable ? sortDirection : undefined,
     style: headerCellStyle,
@@ -11994,12 +12185,12 @@ const ExpandCollapseCell = ({
   });
 };
 
-const rootClassName$c = 'dot-td-checkbox';
+const rootClassName$a = 'dot-td-checkbox';
 const StyledTableBodyCheckboxCell = styled(TableCell)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$c} {
+    &.${rootClassName$a} {
       padding: ${theme.spacing(0, 1)};
       width: ${theme.spacing(5)};
 
@@ -12018,7 +12209,7 @@ const DotBodyCheckboxCell = ({
   onChange,
   rowId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$a, className);
   const [isCheckboxChecked, setIsCheckboxChecked] = useState(isChecked);
   /** This effect is used when 'checked' status is changed from the outside  */
   useEffect(() => {
@@ -12070,7 +12261,7 @@ const DotTableRow = ({
     selectedTableRowIds
   } = multiSelectBody || {};
   const isCheckboxChecked = selectedTableRowIds && selectedTableRowIds.includes(id) || false;
-  const rootClasses = useStylesWithRootClass(rootClassName$f, isCheckboxChecked ? 'selected' : undefined, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$d, isCheckboxChecked ? 'selected' : undefined, className);
   const renderCheckboxCell = () => {
     return jsx(DotBodyCheckboxCell, {
       ariaLabel: "Click to select this row",
@@ -12187,7 +12378,7 @@ const DotTableBody = ({
   return jsxs(Fragment, {
     children: [jsx(StyledTableBody, {
       classes: {
-        root: rootClassName$h
+        root: rootClassName$f
       },
       children: getTableBodyRows()
     }), jsx(StyledMenu$1, {
@@ -12202,12 +12393,12 @@ const DotTableBody = ({
   });
 };
 
-const rootClassName$b = 'dot-table-selection-toolbar';
+const rootClassName$9 = 'dot-table-selection-toolbar';
 const StyledTableSelectionToolbar = styled(DotActionToolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$b} {
+    &.${rootClassName$9} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -12265,7 +12456,7 @@ const DotTableSelectionToolbar = ({
   onClearAll,
   selectedRowsNumber
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$9, className);
   return jsxs(StyledTableSelectionToolbar, {
     ariaLabel: ariaLabel,
     className: rootClasses,
@@ -12359,7 +12550,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$i, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$g, 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);
@@ -12557,7 +12748,7 @@ const DotTableAction = ({
   });
 };
 
-const rootClassName$a = 'dot-table-actions';
+const rootClassName$8 = 'dot-table-actions';
 const TableActionsContainer = styled.div`
   overflow: hidden;
   text-overflow: clip;
@@ -12639,7 +12830,7 @@ const DotTableActions = ({
   };
   return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, {
-      className: rootClassName$a,
+      className: rootClassName$8,
       ref: wrapperRef,
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
@@ -12663,12 +12854,12 @@ const DotTableActions = ({
   });
 };
 
-const rootClassName$9 = 'dot-tabs';
+const rootClassName$7 = 'dot-tabs';
 const StyledTabs = styled(Tabs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$9} {
+    &.${rootClassName$7} {
       &.MuiTabs-root {
         width: 100%;
       }
@@ -12713,7 +12904,7 @@ const DotTabs = ({
   centered = false,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$9,
+  'data-pendoid': dataPendoId = rootClassName$7,
   'data-testid': dataTestId,
   initialValue = 0,
   onChange,
@@ -12722,7 +12913,7 @@ const DotTabs = ({
   variant = 'standard'
 }) => {
   const [value, setValue] = useState(initialValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$9, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$7, className);
   useEffect(() => {
     if (color) {
       console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
@@ -12776,14 +12967,14 @@ const DotTabs = ({
   });
 };
 
-const rootClassName$8 = 'dot-file-upload';
-const containerClassName$2 = `${rootClassName$8}-container`;
-const dropZoneClassName = `${rootClassName$8}-drop-zone`;
+const rootClassName$6 = 'dot-file-upload';
+const containerClassName = `${rootClassName$6}-container`;
+const dropZoneClassName = `${rootClassName$6}-drop-zone`;
 const StyledFileUploadContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${containerClassName$2} {
+    &.${containerClassName} {
       .dot-max-files-message.dot-max-files-reached {
         color: ${theme.palette.figma.destructive.normal};
       }
@@ -12798,7 +12989,7 @@ const StyledFileUpload = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$8}.${dropZoneClassName} {
+    &.${rootClassName$6}.${dropZoneClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level0.bckgGray};
       border: 2px dashed ${theme.palette.figma.border.defaultButton};
@@ -12829,12 +13020,12 @@ const StyledFileUpload = styled.div`
   `}
 `;
 
-const rootClassName$7 = 'dot-file-list-item';
+const rootClassName$5 = 'dot-file-list-item';
 const StyledFileListItem = styled(StyledListItem)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$7} {
+    &.${rootClassName$5} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
       &:hover {
         cursor: pointer;
@@ -12846,7 +13037,7 @@ const StyledFileListItem = styled(StyledListItem)`
         outline: none;
       }
 
-      &.file-success:not(:hover, :focus-visible) .${rootClassName$7}-end-icon {
+      &.file-success:not(:hover, :focus-visible) .${rootClassName$5}-end-icon {
         i:before {
           color: ${theme.palette.figma.success.normal};
         }
@@ -12856,7 +13047,7 @@ const StyledFileListItem = styled(StyledListItem)`
         }
       }
 
-      &.file-error:not(:hover, :focus-visible) .${rootClassName$7}-end-icon {
+      &.file-error:not(:hover, :focus-visible) .${rootClassName$5}-end-icon {
         i:before,
         .MuiListItemText-secondary {
           color: ${theme.palette.figma.destructive.normal};
@@ -12898,7 +13089,7 @@ const DotFileListItem = ({
   onKeyPress,
   tabIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$7, className, error ? 'file-error' : 'file-success');
+  const rootClasses = useStylesWithRootClass(rootClassName$5, 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);
@@ -12931,7 +13122,7 @@ const DotFileListItem = ({
       })]
     }), jsx(DotIconButton, {
       ariaLabel: "delete file",
-      className: `${rootClassName$7}-end-icon`,
+      className: `${rootClassName$5}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
       iconId: endIcon,
@@ -13055,7 +13246,7 @@ const DotFileUpload = ({
   buttonOnly = false,
   className,
   contentErrors,
-  'data-pendoid': dataPendoId = rootClassName$8,
+  'data-pendoid': dataPendoId = rootClassName$6,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -13068,7 +13259,7 @@ const DotFileUpload = ({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
   const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
-  const rootClasses = useStylesWithRootClass(rootClassName$8, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$6, 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) => {
@@ -13118,7 +13309,7 @@ const DotFileUpload = ({
     uploadedFiles
   });
   return jsxs(StyledFileUploadContainer, {
-    className: containerClassName$2,
+    className: containerClassName,
     role: ariaRole,
     children: [jsxs(StyledFileUpload, Object.assign({}, getRootProps(), {
       "aria-label": ariaLabel,
@@ -13140,12 +13331,12 @@ const DotFileUpload = ({
   });
 };
 
-const rootClassName$6 = 'dot-divider';
+const rootClassName$4 = 'dot-divider';
 const StyledDivider = styled(Divider)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$6} {
+    &.${rootClassName$4} {
       color: ${theme.palette.figma.border.darker};
 
       .MuiDivider-light {
@@ -13165,7 +13356,7 @@ const DotDivider = ({
   orientation,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$6, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$4, className);
   return jsx(StyledDivider, {
     absolute: absolute,
     "aria-label": ariaLabel,
@@ -13246,14 +13437,14 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const rootClassName$5 = 'dot-draggable-list';
+const rootClassName$3 = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
   ${({
   theme,
   draggableHandle
 }) => css`
-    &.${rootClassName$5} {
+    &.${rootClassName$3} {
       padding: ${theme.spacing(1, 0)};
       position: relative;
 
@@ -13288,7 +13479,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
-  'data-pendoid': dataPendoId = rootClassName$5,
+  'data-pendoid': dataPendoId = rootClassName$3,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -13297,7 +13488,7 @@ const DotDraggableList = ({
   rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
   width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$5, className, draggableHandle ? 'with-draggable-handle' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$3, 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([]);
@@ -13344,12 +13535,12 @@ const DotDraggableList = ({
   });
 };
 
-const rootClassName$4 = 'dot-linear-progress';
+const rootClassName$2 = 'dot-linear-progress';
 const StyledLinearProgress = styled(LinearProgress)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$4} {
+    &.${rootClassName$2} {
       &.MuiLinearProgress-colorError {
         color: ${theme.palette.figma.inProgress.error};
       }
@@ -13381,7 +13572,7 @@ const DotLinearProgress = ({
   valueBuffer,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$4, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$2, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
@@ -13420,61 +13611,6 @@ const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
   return currentContextEnum;
 };
 
-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$3} .full-width {
-      width: 100%;
-    }
-  `}
-`;
-const StyledDatePicker = styled(DatePicker)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$3} {
-      ${pickerInputStyles(theme)};
-
-      .Mui-disabled.MuiInputBase-root,
-      &.read-only .MuiInputBase-root {
-        ${readOnlyStyles(theme)};
-      }
-
-      .dot-icon-btn .dot-i {
-        margin-top: -5px;
-      }
-
-      .MuiFormLabel-root {
-        color: ${theme.palette.figma.typography.black};
-      }
-    }
-  `}
-`;
-const StyledPickersDay = styled(PickersDay)`
-  ${({
-  theme
-}) => css`
-    &.${rectanglePickersDayClassName} {
-      border-radius: ${theme.spacing(0.5)};
-      &.MuiPickersDay-today:not(.Mui-selected) {
-        background: ${theme.palette.figma.neutral.normal};
-        border: 1px solid ${theme.palette.figma.primary.normal};
-        &:hover {
-          background: ${theme.palette.figma.primary.normal};
-        }
-      }
-
-      &:hover {
-        background: ${theme.palette.figma.primary.normal};
-        color: ${theme.palette.figma.typography.white};
-      }
-    }
-  `}
-`;
-
 const RectanglePickersDay = pickersDayProps => {
   return jsx(StyledPickersDay, Object.assign({}, pickersDayProps, {
     className: rectanglePickersDayClassName,
@@ -13487,7 +13623,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$3,
+  'data-pendoid': dataPendoId = rootClassName$w,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -13527,8 +13663,8 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$3, className, isInputReadOnly ? 'read-only' : '');
-  const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className, isInputReadOnly ? 'read-only' : '');
+  const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
       ref.current.focus();
@@ -13737,96 +13873,6 @@ const getTimePickerButtonType = selectedDaytime => selectedDaytime && selectedDa
 const checkIfOpenPropDefined = open => open !== null && open !== undefined;
 const getDaytimeButtonType = daytimeSelected => daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text';
 
-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;
-const TIME_UNIT_WIDTH_SPACING = 4.5;
-const TIME_UNIT_HEIGHT_SPACING = 4.5;
-const StyledTimePickerContainer = styled.div`
-  ${({
-  theme
-}) => css`
-    &.${containerClassName} {
-      .full-width {
-        width: 100%;
-      }
-
-      .dot-time-picker-popper {
-        z-index: ${levelTop};
-
-        .dot-time-picker-paper {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          .dot-time-picker-selection {
-            max-height: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING)};
-            width: ${theme.spacing(TIME_SELECTION_WIDTH_SPACING)};
-            display: flex;
-            margin: ${theme.spacing(1)};
-            gap: ${theme.spacing(0.5)};
-
-            .dot-time-picker-hours,
-            .dot-time-picker-minutes,
-            .dot-time-picker-daytime {
-              display: flex;
-              flex-direction: column;
-              overflow: auto;
-              gap: ${theme.spacing(0.5)};
-              padding-bottom: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING - TIME_UNIT_HEIGHT_SPACING)};
-
-              /* 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 */
-            }
-
-            .dot-picker-button {
-              width: ${theme.spacing(TIME_UNIT_WIDTH_SPACING)};
-              height: ${theme.spacing(TIME_UNIT_HEIGHT_SPACING)};
-              margin: 0;
-            }
-          }
-
-          .dot-time-picker-action-buttons {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: ${theme.spacing(0.5)};
-          }
-        }
-      }
-    }
-  `}
-`;
-const StyledTimePicker = styled(TimePicker)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$2} {
-      ${pickerInputStyles(theme)};
-
-      .Mui-disabled.MuiInputBase-root,
-      &.read-only .MuiInputBase-root {
-        ${readOnlyStyles(theme)};
-      }
-
-      .dot-icon-btn .dot-i {
-        margin-top: -5px;
-      }
-
-      .MuiFormLabel-root {
-        color: ${theme.palette.figma.typography.black};
-      }
-    }
-  `}
-`;
-
 dayjs.extend(utc);
 const DEFAULT_PICKER_TIME_FORMAT = 'HH:mm';
 const DEFAULT_TIME_FORMAT = 'HH:mm';
@@ -13836,7 +13882,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$2,
+  'data-pendoid': dataPendoId = rootClassName$v,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -13868,8 +13914,8 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$2, className, isComponentReadOnly ? 'read-only' : '');
-  const containerClasses = useStylesWithRootClass(containerClassName, fullWidth ? 'full-width' : '', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className, isComponentReadOnly ? 'read-only' : '');
+  const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
   const [time, setTime] = useState(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/snackbar/SnackbarProvider.d.ts

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
-import { SnackbarSeverity } from './Snackbar';
+import { SnackbarPrimaryAction, SnackbarSecondaryAction, SnackbarSeverity } from './Snackbar';
 declare const initialState: {
     message: string;
     open: boolean;
     severity: string;
     id: string;
     autoHideDuration: number;
+    primaryAction: SnackbarPrimaryAction;
+    secondaryAction: SnackbarSecondaryAction;
 }[];
 export interface SnackbarProviderProps {
     /** The components or string that load inside the snackbar provider. */
@@ -17,7 +19,7 @@ interface SnackbarContainerProps {
 }
 interface DotSnackbarProps {
     alerts: typeof initialState;
-    enqueueMessage: (message: ReactNode, severity: SnackbarSeverity, autoHideDuration?: number | null) => string;
+    enqueueMessage: (message: ReactNode, severity: SnackbarSeverity, autoHideDuration?: number | null, primaryAction?: SnackbarPrimaryAction, secondaryAction?: SnackbarSecondaryAction) => string;
     removeMessage: (id: string) => void;
 }
 export declare const DotSnackbarContext: import("react").Context<DotSnackbarProps>;

package/src/lib/components/tooltip/Tooltip.d.ts

@@ -13,6 +13,7 @@ export interface TooltipProps extends CommonProps {
     onClose?: (event: ChangeEvent) => void;
     open?: boolean;
     placement?: TooltipPlacement;
+    popperClassName?: string;
     title?: ReactNode | string | number;
 }
-export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, hoverVisibility, leaveDelay, onClose, open, placement, title, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, hoverVisibility, leaveDelay, onClose, open, placement, popperClassName, title, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;