@digital-ai/dot-components 2.22.1 → 2.24.0

package/index.esm.js

@@ -8,8 +8,11 @@ import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import jwt_decode from 'jwt-decode';
 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';
 
 class ApiError extends Error {
   constructor(response, message) {
@@ -152,6 +155,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId = 'dot-accordion',
   disabled: _disabled = false,
   expanded,
@@ -175,6 +179,7 @@ const DotAccordion = ({
   return jsxs(StyledAccordion, {
     "aria-label": ariaLabel,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: _disabled,
     elevation: elevation,
@@ -249,7 +254,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}&.", " .MuiInputBase-root,.MuiInputBase-root.Mui-disabled{", ";}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputLabel-root.Mui-error{color:", ";}.MuiInputBase-root{background:", ";margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$15, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$15, adornmentIconClassName, theme.palette.figma.icon.black, theme.typography.body2.fontSize, theme.palette.figma.typography.black, theme.palette.figma.neutral.normal, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.figma.success.normal, adornmentIconClassName, theme.palette.figma.success.normal, errorClassName, theme.palette.figma.destructive.normal, adornmentIconClassName, theme.palette.figma.destructive.normal, warningClassName, theme.palette.figma.warning.normal, adornmentIconClassName, theme.palette.figma.warning.normal, warningClassName, fieldsetClassName, theme.palette.figma.warning.normal, formHelperTextRootStyles(theme)));
+}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}&.", " .MuiInputBase-root,.MuiInputBase-root.Mui-disabled{", ";}.MuiInputBase-adornedEnd .clear-icon-button.hidden{visibility:hidden;}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputLabel-root.Mui-error{color:", ";}.MuiInputBase-root{background:", ";margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$15, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$15, adornmentIconClassName, theme.palette.figma.icon.black, theme.typography.body2.fontSize, theme.palette.figma.typography.black, theme.palette.figma.neutral.normal, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.figma.success.normal, adornmentIconClassName, theme.palette.figma.success.normal, errorClassName, theme.palette.figma.destructive.normal, adornmentIconClassName, theme.palette.figma.destructive.normal, warningClassName, theme.palette.figma.warning.normal, adornmentIconClassName, theme.palette.figma.warning.normal, warningClassName, fieldsetClassName, theme.palette.figma.warning.normal, formHelperTextRootStyles(theme)));
 
 const rootClassName$14 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar).withConfig({
@@ -1346,6 +1351,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   onClose,
   roundedCorners: _roundedCorners = true,
@@ -1372,6 +1378,7 @@ const DotAlertBanner = ({
     classes: {
       root: rootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     iconMapping: AlertBannerIconMapping,
     onClose: onClose,
@@ -2151,6 +2158,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
   autoFocus: _autoFocus = false,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$11,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   disableRipple: _disableRipple = false,
@@ -2195,6 +2203,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
         root: rootClasses
       },
       color: color,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       disableRipple: _disableRipple,
       disabled: _disabled,
@@ -2226,6 +2235,7 @@ const DotLink = ({
   children,
   className,
   color: _color = 'primary',
+  'data-pendoid': dataPendoId = rootClassName$10,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2262,6 +2272,7 @@ const DotLink = ({
         root: rootClasses
       },
       color: _color === 'initial' ? 'inherit' : _color,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       href: href,
       onClick: onClick,
@@ -2544,6 +2555,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
         ariaLabel: itemAriaLabel,
         children,
         classes,
+        'data-pendoid': dataPendoId = 'dot-menu-list-item',
         disabled,
         divider,
         height,
@@ -2571,6 +2583,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
         autoFocus: hasAutoFocus,
         "aria-label": itemAriaLabel,
         className: menuItemClasses,
+        "data-pendoid": dataPendoId,
         disabled: disabled,
         disableRipple: hasSubmenu,
         divider: divider,
@@ -2737,6 +2750,7 @@ const DotIconButton = ({
   ariaRole: _ariaRole = 'button',
   className,
   color: _color = 'inherit',
+  'data-pendoid': dataPendoId = rootClassName$U,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   disableRipple: _disableRipple = false,
@@ -2758,6 +2772,7 @@ const DotIconButton = ({
         root: rootClasses
       },
       color: _color,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       disableRipple: _disableRipple,
       disabled: _disabled,
@@ -2860,6 +2875,7 @@ const DotDrawer = ({
   ariaRole: _ariaRole = 'dialog',
   className,
   children,
+  'data-pendoid': dataPendoId = rootClassName$W,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -2885,6 +2901,7 @@ const DotDrawer = ({
   const rootClasses = useStylesWithRootClass(rootClassName$W, 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';
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return jsxs(StyledDrawer, {
     ModalProps: ModalProps,
@@ -2899,6 +2916,7 @@ const DotDrawer = ({
       root: rootClasses,
       paper: 'dot-drawer-paper'
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     height: height,
     onClose: handleClose,
@@ -2908,12 +2926,14 @@ const DotDrawer = ({
     width: _width,
     children: [drawerHeaderProps && jsx(DotDrawerHeader, {
       className: drawerHeaderProps.className,
+      "data-pendoid": drawerHeaderProps['data-pendoid'],
       "data-testid": drawerHeaderProps[`data-testid`],
       onClose: handleClose,
       variant: _variant,
       children: drawerHeaderProps.children
     }), drawerBodyProps && jsx(DotDrawerBody, {
       className: drawerBodyProps === null || drawerBodyProps === void 0 ? void 0 : drawerBodyProps.className,
+      "data-pendoid": bodyPendoId,
       "data-testid": bodyTestId,
       headerExists: headerExists,
       onClose: handleClose,
@@ -2921,6 +2941,7 @@ const DotDrawer = ({
       children: drawerBodyProps.children
     }), !drawerBodyProps && children, drawerFooterProps && jsx(DotDrawerFooter, {
       className: drawerFooterProps.className,
+      "data-pendoid": drawerFooterProps['data-pendoid'],
       "data-testid": drawerFooterProps[`data-testid`],
       children: drawerFooterProps.children
     })]
@@ -3056,6 +3077,7 @@ const DotListItem = ({
   ariaRole: _ariaRole = 'listitem',
   className,
   component: _component = 'li',
+  'data-pendoid': dataPendoId = listItemRootClass,
   'data-testid': dataTestId,
   divider: _divider = false,
   endIcon,
@@ -3134,6 +3156,7 @@ const DotListItem = ({
         root: rootClasses
       },
       component: _component,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       divider: _divider,
       href: onClick ? null : href,
@@ -3281,6 +3304,96 @@ const DotList = ({
   });
 };
 
+const rootClassName$R = 'dot-copy-button';
+const StyledCopyButton = styled.span.withConfig({
+  displayName: "CopyButtonstyles__StyledCopyButton",
+  componentId: "sc-18ff0u-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", " .copied-to-clipboard{color:", ";&.MuiIcon-fontSizeSmall.button-size-small{padding:4px;}&.MuiIcon-fontSizeMedium.button-size-small{padding:3px;}&.MuiIcon-fontSizeSmall.button-size-medium{padding:11px;}&.MuiIcon-fontSizeMedium.button-size-medium{padding:10px;}}"], rootClassName$R, theme.palette.figma.success.normal));
+
+const DotCopyButton = ({
+  ariaLabel: _ariaLabel = 'Copy to clipboard',
+  ariaRole: _ariaRole = 'button',
+  className,
+  color: _color = 'inherit',
+  copiedTooltip: _copiedTooltip = 'Copied!',
+  copyTooltip: _copyTooltip = 'Copy to clipboard',
+  'data-pendoid': dataPendoId = rootClassName$R,
+  'data-testid': dataTestId = 'dot-copy-button',
+  disabled: _disabled = false,
+  disableRipple: _disableRipple = false,
+  iconId: _iconId = 'duplicate',
+  iconSize: _iconSize = 'small',
+  onClick: _onClick = null,
+  shape: _shape = 'circle',
+  showCopiedIcon: _showCopiedIcon = true,
+  size: _size = 'small',
+  tooltip,
+  value
+}) => {
+  const [timedShowCopiedIcon, setTimedShowCopiedIcon] = useState(false);
+  const [timedDisabled, setTimedDisabled] = useState(false);
+  // To keep backward compatibility if tooltip is not set, use copyTooltip
+  if (!tooltip) {
+    tooltip = _copyTooltip;
+  }
+  const copyToClipboard = useCallback(() => {
+    // The check for navigator.clipboard.writeText is because this function is
+    // only supported in secure contexts (https). This will always be the case in
+    // production but not when running locally.
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      console.warn('Copy to clipboard is only supported in secure context (https)', value);
+    } else {
+      navigator.clipboard.writeText(value);
+    }
+  }, [value]);
+  const copy = useCallback(event => {
+    copyToClipboard();
+    if (_showCopiedIcon) {
+      setTimedShowCopiedIcon(true);
+      setTimeout(function () {
+        setTimedShowCopiedIcon(false);
+      }, 3000);
+    } else if (!_disabled) {
+      setTimedDisabled(true);
+      setTimeout(function () {
+        setTimedDisabled(false);
+      }, 3000);
+    }
+    if (_onClick) {
+      return _onClick(event);
+    }
+    return false;
+  }, [value, _showCopiedIcon, _disabled, _onClick]);
+  return jsxs(StyledCopyButton, {
+    className: rootClassName$R,
+    "data-testid": dataTestId,
+    children: [!timedShowCopiedIcon && jsx(DotIconButton, {
+      ariaLabel: _ariaLabel,
+      ariaRole: _ariaRole,
+      className: className,
+      color: _color,
+      "data-pendoid": dataPendoId,
+      "data-testid": `${dataTestId}-button`,
+      disabled: _disabled || timedDisabled,
+      disableRipple: _disableRipple,
+      iconId: _iconId,
+      iconSize: _iconSize,
+      onClick: copy,
+      shape: _shape,
+      size: _size,
+      tooltip: tooltip
+    }), timedShowCopiedIcon && jsx(DotIcon, {
+      className: `copied-to-clipboard button-size-${_size}`,
+      "data-testid": `${dataTestId}-icon`,
+      fontSize: _iconSize,
+      iconId: "check-solid",
+      tooltip: _copiedTooltip
+    })]
+  });
+};
+
 const DotInputLabel = ({
   'data-testid': dataTestId,
   disabled: _disabled = false,
@@ -3335,14 +3448,15 @@ const EndAdornment = ({
     children: styledAdornment
   }) : styledAdornment;
 };
-const getInitialState = value => ({
-  inputValue: value || ''
+const getInitialState = (value, defaultValue) => ({
+  inputValue: value || defaultValue || ''
 });
 const DotInputText = ({
   autoComplete: _autoComplete = 'off',
   autoFocus,
   className,
   defaultValue,
+  'data-pendoid': dataPendoId = rootClassName$15,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   error: _error = false,
@@ -3365,6 +3479,7 @@ const DotInputText = ({
   name,
   onBlur,
   onChange,
+  onClear,
   onFocus,
   onKeyDown,
   onMouseUp,
@@ -3384,14 +3499,13 @@ const DotInputText = ({
   const hasWarning = !_error && _warning && warningClassName;
   const hasSuccess = !_error && !_warning && success && successClassName;
   const hasEndAdornmentIcon = endIcon || _error || hasWarning || hasSuccess;
-  // This state is used only with debounce feature enabled
-  const [inputTextState, setInputTextState] = useState(hasDebounce && getInitialState(value));
+  const internalInputRef = useRef(null);
+  const textFieldInputRef = inputRef || internalInputRef;
+  const [inputTextState, setInputTextState] = useState(getInitialState(value));
   const rootStyles = useStylesWithRootClass(rootClassName$15, hasError, hasWarning, hasSuccess, _readOnly && readOnlyClassName$1);
-  // Used to control text value from the consumer component
-  // when debounce feature is enabled
   useEffect(() => {
-    if (hasDebounce && value !== inputTextState.inputValue) {
-      setInputTextState(getInitialState(value));
+    if (value !== inputTextState.inputValue) {
+      setInputTextState(getInitialState(value, defaultValue));
     }
   }, [value]);
   // Improve performance by avoiding callback execution
@@ -3406,17 +3520,21 @@ const DotInputText = ({
     return () => clearTimeout(handler);
   }, [inputTextState]);
   const handleChange = e => {
-    // We need to have control over change event and input value separately
-    // so that we can set initial state via 'value' prop (if needed)
-    hasDebounce ? setInputTextState({
+    setInputTextState({
       changeEvent: e,
       inputValue: e.target.value
-    }) : onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    });
+    !hasDebounce && (onChange === null || onChange === void 0 ? void 0 : onChange(e));
+  };
+  const handleClearButtonClick = () => {
+    setInputTextState({
+      inputValue: ''
+    });
+    if ('current' in textFieldInputRef) {
+      textFieldInputRef.current.focus();
+    }
+    onClear();
   };
-  const inputTextValue = hasDebounce ? inputTextState.inputValue : value;
-  // Don't use default value when debounce feature is enabled because
-  // in that case component is controlled
-  const defaultInputValue = hasDebounce ? undefined : defaultValue;
   const startAdornmentIcon = () => {
     if (!startIcon) return null;
     return jsx(StyledAdornment, {
@@ -3437,6 +3555,27 @@ const DotInputText = ({
       warning: _warning
     });
   };
+  const getClearIconButton = () => {
+    if (!onClear) return null;
+    const clearIconButtonClasses = useStylesWithRootClass('clear-icon-button', inputTextState.inputValue === '' ? 'hidden' : '');
+    return jsx(DotIconButton, {
+      className: clearIconButtonClasses,
+      "data-testid": dataTestId && `${dataTestId}-clear-btn`,
+      iconId: "close",
+      size: "small",
+      onClick: handleClearButtonClick
+    });
+  };
+  const getEndAdornment = () => {
+    const iconOrText = endAdornmentIconOrText();
+    const clearIconButton = getClearIconButton();
+    if (iconOrText || clearIconButton) {
+      return jsxs(Fragment, {
+        children: [iconOrText, clearIconButton]
+      });
+    }
+    return null;
+  };
   const wrapperClassName = useStylesWithRootClass(_fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
   const inputClassName = useStylesWithRootClass('dot-input', _readOnly && readOnlyClassName$1);
   return jsxs(StyledTextFieldContainer, {
@@ -3450,7 +3589,7 @@ const DotInputText = ({
     }), jsx(StyledTextField, {
       InputProps: {
         startAdornment: startAdornmentIcon(),
-        endAdornment: endAdornmentIconOrText()
+        endAdornment: getEndAdornment()
       },
       "aria-label": name || label,
       autoComplete: _autoComplete,
@@ -3458,7 +3597,6 @@ const DotInputText = ({
       classes: {
         root: rootStyles
       },
-      defaultValue: defaultInputValue,
       disabled: _disabled,
       error: _error,
       fullWidth: _fullWidth,
@@ -3469,6 +3607,7 @@ const DotInputText = ({
       },
       inputProps: {
         className: inputClassName,
+        'data-pendoid': dataPendoId,
         'data-testid': dataTestId,
         max,
         maxLength: maxLength,
@@ -3477,14 +3616,14 @@ const DotInputText = ({
         readOnly: _readOnly,
         tabIndex: 0
       },
-      inputRef: inputRef,
+      inputRef: textFieldInputRef,
       label: persistentLabel ? null : label,
       maxRows: _multiline ? maxRows : null,
       minRows: _multiline ? minRows : null,
       multiline: _multiline,
       name: name,
       onBlur: onBlur,
-      onChange: hasDebounce ? handleChange : onChange,
+      onChange: handleChange,
       onFocus: onFocus,
       onKeyDown: onKeyDown,
       onMouseUp: onMouseUp,
@@ -3493,17 +3632,17 @@ const DotInputText = ({
       role: "textbox",
       size: _size,
       type: _type,
-      value: inputTextValue,
+      value: inputTextState.inputValue,
       variant: "outlined"
     })]
   });
 };
 
-const rootClassName$R = 'dot-search-input';
+const rootClassName$Q = 'dot-search-input';
 const StyledSearchInput = styled.span.withConfig({
   displayName: "SearchInputstyles__StyledSearchInput",
   componentId: "qlwzku-0"
-})(["", ""], () => css(["&.", "{}"], rootClassName$R));
+})(["", ""], () => css(["&.", "{}"], rootClassName$Q));
 
 function SearchInput({
   'data-testid': dataTestId,
@@ -3517,7 +3656,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -3568,94 +3707,6 @@ function SearchInput({
   });
 }
 
-const rootClassName$Q = 'dot-copy-button';
-const StyledCopyButton = styled.span.withConfig({
-  displayName: "CopyButtonstyles__StyledCopyButton",
-  componentId: "sc-18ff0u-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", " .copied-to-clipboard{color:", ";&.MuiIcon-fontSizeSmall.button-size-small{padding:4px;}&.MuiIcon-fontSizeMedium.button-size-small{padding:3px;}&.MuiIcon-fontSizeSmall.button-size-medium{padding:11px;}&.MuiIcon-fontSizeMedium.button-size-medium{padding:10px;}}"], rootClassName$Q, theme.palette.figma.success.normal));
-
-const DotCopyButton = ({
-  ariaLabel: _ariaLabel = 'Copy to clipboard',
-  ariaRole: _ariaRole = 'button',
-  className,
-  color: _color = 'inherit',
-  copiedTooltip: _copiedTooltip = 'Copied!',
-  copyTooltip: _copyTooltip = 'Copy to clipboard',
-  'data-testid': dataTestId = 'dot-copy-button',
-  disabled: _disabled = false,
-  disableRipple: _disableRipple = false,
-  iconId: _iconId = 'duplicate',
-  iconSize: _iconSize = 'small',
-  onClick: _onClick = null,
-  shape: _shape = 'circle',
-  showCopiedIcon: _showCopiedIcon = true,
-  size: _size = 'small',
-  tooltip,
-  value
-}) => {
-  const [timedShowCopiedIcon, setTimedShowCopiedIcon] = useState(false);
-  const [timedDisabled, setTimedDisabled] = useState(false);
-  // To keep backward compatibility if tooltip is not set, use copyTooltip
-  if (!tooltip) {
-    tooltip = _copyTooltip;
-  }
-  const copyToClipboard = useCallback(() => {
-    // The check for navigator.clipboard.writeText is because this function is
-    // only supported in secure contexts (https). This will always be the case in
-    // production but not when running locally.
-    if (!navigator.clipboard || !navigator.clipboard.writeText) {
-      console.warn('Copy to clipboard is only supported in secure context (https)', value);
-    } else {
-      navigator.clipboard.writeText(value);
-    }
-  }, [value]);
-  const copy = useCallback(event => {
-    copyToClipboard();
-    if (_showCopiedIcon) {
-      setTimedShowCopiedIcon(true);
-      setTimeout(function () {
-        setTimedShowCopiedIcon(false);
-      }, 3000);
-    } else if (!_disabled) {
-      setTimedDisabled(true);
-      setTimeout(function () {
-        setTimedDisabled(false);
-      }, 3000);
-    }
-    if (_onClick) {
-      return _onClick(event);
-    }
-    return false;
-  }, [value, _showCopiedIcon, _disabled, _onClick]);
-  return jsxs(StyledCopyButton, {
-    className: rootClassName$Q,
-    "data-testid": dataTestId,
-    children: [!timedShowCopiedIcon && jsx(DotIconButton, {
-      ariaLabel: _ariaLabel,
-      ariaRole: _ariaRole,
-      className: className,
-      color: _color,
-      "data-testid": `${dataTestId}-button`,
-      disabled: _disabled || timedDisabled,
-      disableRipple: _disableRipple,
-      iconId: _iconId,
-      iconSize: _iconSize,
-      onClick: copy,
-      shape: _shape,
-      size: _size,
-      tooltip: tooltip
-    }), timedShowCopiedIcon && jsx(DotIcon, {
-      className: `copied-to-clipboard button-size-${_size}`,
-      "data-testid": `${dataTestId}-icon`,
-      fontSize: _iconSize,
-      iconId: "check-solid",
-      tooltip: _copiedTooltip
-    })]
-  });
-};
-
 var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M12.4332 16.3533V14.8333H11.5665V16.3533L10.7432 15.8933L9.85651 16.4033L11.9998 17.6366L14.1932 16.3733L13.3332 15.8766L12.4332 16.3533Z' fill='white'/%3e%3cpath d='M7.99328 10.1866L9.24661 10.9132L9.67995 10.1399L8.36995 9.4299L9.09328 9.01657V8.03323L7.11328 9.18323L7.11661 11.5532L7.99328 11.0566V10.1866Z' fill='white'/%3e%3cpath d='M14.6934 10.9133L15.9934 10.1733L15.99 11.0566L16.8867 11.5599V9.1766L14.81 7.98993L14.7767 8.9566L15.6167 9.45326L14.29 10.0799L14.6934 10.9133Z' fill='white'/%3e%3cpath d='M16.8801 12.5435L16.0001 12.0402V12.0935V13.7068L12.4167 11.6868V7.61015L13.9667 8.49015V7.51682L12.0001 6.35349L9.95006 7.52348V8.52348L11.4967 7.63015V11.6868L8.00006 13.8168V12.0202L7.12006 12.5235V14.8202L8.96672 15.8502L9.86672 15.3335L8.40006 14.5268L12.0001 12.4368L15.5567 14.5035L14.1301 15.3268L15.0567 15.8701L16.8701 14.8268L16.8801 12.5435Z' fill='white'/%3e%3c/svg%3e";
 
 var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M14.1867 11.2667L12.1634 10.0833L10.1367 11.2667V13.62L12.1634 14.7867L14.1867 13.62V11.2667Z' fill='white'/%3e%3cpath d='M8.43666 12.0001L7.47333 11.1501V15.1667L10.41 16.8367V15.7034L8.43666 14.5401V12.0001Z' fill='white'/%3e%3cpath d='M15.8965 12V14.5833L13.9632 15.7033V16.9367L16.8532 15.1533V11.0967L15.8965 12Z' fill='white'/%3e%3cpath d='M12.1565 8.13333L14.7165 9.61333L15.4165 8.89L12.1565 7L8.87988 8.90667L9.57988 9.63333L12.1565 8.13333Z' fill='white'/%3e%3c/svg%3e";
@@ -4717,6 +4768,7 @@ const DotChip = ({
   charactersLimit: _charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$J,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   error: _error = false,
@@ -4747,6 +4799,7 @@ const DotChip = ({
     },
     clickable: _isClickable,
     color: "default",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: _disabled,
     icon: avatar ? null : startIcon,
@@ -4825,6 +4878,7 @@ const DotAutoComplete = ({
   ariaLabel,
   autoFocus,
   className,
+  'data-pendoid': dataPendoId = rootClassName$K,
   'data-testid': dataTestId,
   defaultValue,
   dense: _dense = true,
@@ -5046,6 +5100,7 @@ const DotAutoComplete = ({
       root: rootClasses,
       inputRoot: inputRootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     defaultValue: _multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
     disabled: _disabled,
@@ -5521,6 +5576,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
+  'data-pendoid': dataPendoId = rootClassName$G,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple: _disableFocusRipple = false,
   disableRipple: _disableRipple = false,
@@ -5574,6 +5630,7 @@ const DotButtonToggle = ({
       root: rootClasses
     },
     color: color,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     exclusive: _exclusive,
     onChange: onChange,
@@ -5720,6 +5777,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
+  'data-pendoid': dataPendoId = rootClassName$D,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -5744,6 +5802,7 @@ function DotCheckbox({
       root: rootClassName$C
     },
     color: "primary",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disableRipple: disableRipple,
     disabled: disabled,
@@ -5943,6 +6002,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible: _cancelButtonVisible = true,
   className,
+  'data-pendoid': dataPendoId = rootClassName$y,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -5987,6 +6047,7 @@ const DotDialog = ({
     classes: {
       root: rootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     onClose: handleClickAway,
     open: isOpen,
@@ -6012,6 +6073,7 @@ const DotDialog = ({
       children: [_cancelButtonVisible && jsx(DotButton, {
         autoFocus: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.autoFocus,
         className: cancelClasses,
+        "data-pendoid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-pendoid'],
         "data-testid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-testid'],
         disableRipple: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disableRipple,
         disabled: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disabled,
@@ -6024,6 +6086,7 @@ const DotDialog = ({
       }), _hasPrimaryAction && jsx(DotButton, {
         autoFocus: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.autoFocus,
         className: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.className,
+        "data-pendoid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-pendoid'],
         "data-testid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-testid'],
         disableRipple: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disableRipple,
         disabled: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled,
@@ -6042,6 +6105,7 @@ const DotConfirmationDialog = ({
   ariaLabel,
   cancelButtonProps,
   className,
+  'data-pendoid': dataPendoId = 'dot-confirmation-dialog',
   'data-testid': dataTestId,
   message: _message = '',
   onCancel,
@@ -6058,6 +6122,7 @@ const DotConfirmationDialog = ({
     ariaLabel: ariaLabel,
     cancelButtonProps: cancelButtonProps,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     onCancel: onCancel,
     onSubmit: onSubmit,
@@ -6556,6 +6621,7 @@ const DotInputSelect = ({
   ariaLabel,
   autoFocus,
   className,
+  'data-pendoid': dataPendoId = rootSelectClassName,
   'data-testid': dataTestId,
   defaultValue,
   disabled: _disabled = false,
@@ -6634,6 +6700,7 @@ const DotInputSelect = ({
       },
       inputProps: {
         'aria-label': ariaLabel,
+        'data-pendoid': dataPendoId,
         'data-testid': dataTestId,
         className: inputStyles,
         readOnly: _readOnly
@@ -6675,6 +6742,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$t,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   disableRipple: _disableRipple = false,
@@ -6694,6 +6762,7 @@ const DotProgressButton = ({
   return jsxs(StyledProgressButton, {
     ariaLabel: ariaLabel || tooltip,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disableRipple: _disableRipple,
     disabled: isButtonDisabled,
@@ -6726,6 +6795,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
+  'data-pendoid': dataPendoId = rootClassName$D,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -6749,6 +6819,7 @@ function DotRadioButton({
       root: rootClassName$s
     },
     color: "primary",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: disabled,
     id: id,
@@ -6869,6 +6940,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
+  'data-pendoid': dataPendoId = rootClassName$r,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   id,
@@ -6895,6 +6967,7 @@ const DotSwitch = ({
       root: rootClasses
     },
     color: "primary",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: _disabled,
     id: id,
@@ -7574,6 +7647,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
+  'data-pendoid': dataPendoId = rootClassName$q,
   'data-testid': dataTestId,
   fullWidth: _fullWidth = true,
   hideActionButtons,
@@ -7723,6 +7797,7 @@ const DotInlineEdit = ({
         error: false,
         fullWidth: _fullWidth,
         inputProps: {
+          'data-pendoid': `${dataPendoId}-input`,
           'data-testid': `${dataTestId}-input`,
           className: 'dot-input',
           maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
@@ -7739,6 +7814,7 @@ const DotInlineEdit = ({
       }), !hideActionButtons && jsxs("div", {
         className: editActionsClassName,
         children: [jsx(DotButton, {
+          "data-pendoid": dataPendoId && `${dataPendoId}-cancel`,
           "data-testid": dataTestId && `${dataTestId}-cancel`,
           onClick: handleCancel,
           size: "small",
@@ -7748,6 +7824,7 @@ const DotInlineEdit = ({
             iconId: "close"
           })
         }), jsx(DotButton, {
+          "data-pendoid": dataPendoId && `${dataPendoId}-save`,
           "data-testid": dataTestId && `${dataTestId}-save`,
           disabled: isSaveDisabled,
           onClick: handleSave,
@@ -7765,6 +7842,7 @@ const DotInlineEdit = ({
     "aria-expanded": editing ? true : false,
     "aria-label": ariaLabel,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     fullWidth: _fullWidth,
     onBlur: !readOnly ? handleBlur : undefined,
@@ -7969,6 +8047,7 @@ const DotSnackbar = ({
   children,
   className,
   'data-testid': dataTestId,
+  hideOnClickAway: _hideOnClickAway = true,
   onClose,
   open,
   severity,
@@ -7980,6 +8059,11 @@ const DotSnackbar = ({
     action
   });
   const rootClasses = useStylesWithRootClass(rootClassName$m, className);
+  const handleSnackbarClose = reason => {
+    if (_hideOnClickAway || !_hideOnClickAway && reason !== 'clickaway') {
+      onClose();
+    }
+  };
   return jsx(StyledSnackbar, {
     anchorOrigin: _anchorOrigin,
     "aria-label": ariaLabel,
@@ -7988,7 +8072,7 @@ const DotSnackbar = ({
       root: rootClasses
     },
     "data-testid": dataTestId,
-    onClose: onClose,
+    onClose: (_e, r) => handleSnackbarClose(r),
     open: open,
     severity: severity,
     children: jsx(Alert, {
@@ -8017,7 +8101,9 @@ const DotSnackbarContext = /*#__PURE__*/createContext({
   enqueueMessage: (_message, _severity) => null,
   removeMessage: _id => null
 });
-const DotSnackbarContainer = () => {
+const DotSnackbarContainer = ({
+  hideOnClickAway
+}) => {
   const {
     alerts,
     removeMessage
@@ -8034,6 +8120,7 @@ const DotSnackbarContainer = () => {
       "data-testid": rootClassName$l,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
+          hideOnClickAway: hideOnClickAway,
           onClose: handleClose(alert.id),
           open: alert.open,
           severity: alert.severity,
@@ -8044,7 +8131,8 @@ const DotSnackbarContainer = () => {
   });
 };
 const DotSnackbarProvider = ({
-  children
+  children,
+  hideOnClickAway: _hideOnClickAway = true
 }) => {
   const [alerts, setAlerts] = useState([]);
   function enqueueMessage(message, severity) {
@@ -8058,6 +8146,7 @@ const DotSnackbarProvider = ({
     setAlerts(prevState => {
       return [...prevState, Object.assign({}, queue)];
     });
+    return id;
   }
   const removeMessage = id => {
     setAlerts(prev => {
@@ -8076,7 +8165,9 @@ const DotSnackbarProvider = ({
   const memoizedValues = useMemo(() => DotSnackbarValues, [alerts]);
   return jsxs(DotSnackbarContext.Provider, {
     value: memoizedValues,
-    children: [jsx(DotSnackbarContainer, {}), children]
+    children: [jsx(DotSnackbarContainer, {
+      hideOnClickAway: _hideOnClickAway
+    }), children]
   });
 };
 const useDotSnackbarContext = () => {
@@ -8105,6 +8196,7 @@ const DotSplitButton = ({
   autoFocus: _autoFocus = false,
   ariaLabel,
   className,
+  'data-pendoid': dataPendoId = rootClassName$k,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled: _disabled = false,
@@ -8145,6 +8237,7 @@ const DotSplitButton = ({
       children: [jsx(DotButton, {
         autoFocus: _autoFocus,
         className: "label-button",
+        "data-pendoid": dataPendoId,
         "data-testid": dataTestId,
         disableRipple: _disableRipple,
         disabled: isMainOptionDisabled,
@@ -8156,6 +8249,7 @@ const DotSplitButton = ({
         children: mainOptionChildren
       }), jsx(DotButton, {
         className: "expand-button",
+        "data-pendoid": dataPendoId && `${dataPendoId}-expand`,
         "data-testid": dataTestId && `${dataTestId}-expand`,
         disableRipple: _disableRipple,
         disabled: isMenuButtonDisabled,
@@ -8555,6 +8649,65 @@ value, typographyVariant) => {
   }
   return value;
 };
+const renderAvatarWithTextCell = avatarWithText => {
+  const {
+    avatarIcon,
+    avatarImageSrc,
+    mainText,
+    secondaryText
+  } = avatarWithText;
+  return jsxs("div", {
+    className: "cell-avatar-with-text",
+    children: [(avatarImageSrc || avatarIcon) && jsx(DotAvatar, {
+      alt: mainText,
+      className: "cell-avatar",
+      "data-testid": "cell-avatar",
+      iconId: avatarIcon,
+      imageSrc: avatarImageSrc,
+      size: "small",
+      type: avatarImageSrc ? 'image' : 'icon'
+    }), jsxs("div", {
+      className: "cell-text",
+      children: [jsx(DotTypography, {
+        variant: "body1",
+        children: mainText
+      }), secondaryText && jsx(DotTypography, {
+        "data-testid": "cell-secondary-text",
+        variant: "body2",
+        children: secondaryText
+      })]
+    })]
+  });
+};
+const renderInlineEditCell = inlineEdit => {
+  return jsx(DotInlineEdit, Object.assign({}, inlineEdit, {
+    ariaLabel: "inline edit cell",
+    className: `inline-edit-cell ${inlineEdit.className ? inlineEdit.className : ''}`
+  }));
+};
+const getValuesForSort = (a, b, orderBy) => {
+  var _a, _b, _c, _d;
+  let valueA;
+  let valueB;
+  if (((_a = a.rowData[orderBy]) === null || _a === void 0 ? void 0 : _a.mainText) && ((_b = b.rowData[orderBy]) === null || _b === void 0 ? void 0 : _b.mainText)) {
+    // use mainText value for sort in case when data for the table cell is passed with AvatarWithTextCell
+    valueA = a.rowData[orderBy].mainText;
+    valueB = b.rowData[orderBy].mainText;
+  } else if (((_c = a.rowData[orderBy]) === null || _c === void 0 ? void 0 : _c.name) && ((_d = b.rowData[orderBy]) === null || _d === void 0 ? void 0 : _d.name)) {
+    // name is the only required prop from InlineEditProps, so if it is there, the cell is considered as inline edit cell
+    // use value from inline edit for sort in case when data for the table cell is passed with InlineEditProps
+    // if value is not defined, then treat it as empty string
+    valueA = a.rowData[orderBy].value || '';
+    valueB = b.rowData[orderBy].value || '';
+  } else {
+    valueA = a.rowData[orderBy];
+    valueB = b.rowData[orderBy];
+  }
+  return {
+    valueA,
+    valueB
+  };
+};
 // If maxHeight is provided, make this the max height for the
 // table container. If it is not provided but stickyHeader is true,
 // calculate a max height based on screen size.
@@ -8627,7 +8780,7 @@ const StyledTableCell = styled(TableCell).withConfig({
   componentId: "e84k25-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding-top:0;padding-bottom:0;&.actionItems,&.noWrap p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}&.actionItems{max-width:0;text-align:right;text-overflow:clip;}&.noWrap p{max-width:calc(100% - 1px);}.action-cell-wrapper{width:100%;}.cell-avatar-with-text{display:flex;align-items:center;.cell-avatar{margin-right:", ";}.cell-text{width:100%;}}}"], rootClassName$f, theme.spacing(1)));
+}) => css(["&.", "{padding-top:0;padding-bottom:0;&.actionItems,&.noWrap p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}&.actionItems{max-width:0;text-align:right;text-overflow:clip;}&.noWrap p{max-width:calc(100% - 1px);}.action-cell-wrapper{width:100%;}.cell-avatar-with-text{display:flex;align-items:center;.cell-avatar{margin-right:", ";}.cell-text{width:100%;}}.inline-edit-cell{input{background-color:", ";}.dot-view-mode:not(.dot-read-only):hover{background-color:", ";}}}"], rootClassName$f, theme.spacing(1), theme.palette.figma.background.level0.bckgWhiteBlack, theme.palette.figma.neutral.active));
 
 /**
  * A wrapper component around the TableCell component from @material-ui.
@@ -8702,34 +8855,10 @@ const DotBodyCell = ({
       });
     }
     if (value === null || value === void 0 ? void 0 : value.mainText) {
-      const {
-        avatarIcon,
-        avatarImageSrc,
-        mainText,
-        secondaryText
-      } = value;
-      return jsxs("div", {
-        className: "cell-avatar-with-text",
-        children: [(avatarImageSrc || avatarIcon) && jsx(DotAvatar, {
-          alt: mainText,
-          className: "cell-avatar",
-          "data-testid": "cell-avatar",
-          iconId: avatarIcon,
-          imageSrc: avatarImageSrc,
-          size: "small",
-          type: avatarImageSrc ? 'image' : 'icon'
-        }), jsxs("div", {
-          className: "cell-text",
-          children: [jsx(DotTypography, {
-            variant: "body1",
-            children: mainText
-          }), secondaryText && jsx(DotTypography, {
-            "data-testid": "cell-secondary-text",
-            variant: "body2",
-            children: secondaryText
-          })]
-        })]
-      });
+      return renderAvatarWithTextCell(value);
+    }
+    if (value === null || value === void 0 ? void 0 : value.name) {
+      return renderInlineEditCell(value);
     }
     return getFormattedTableCellValue(value, typography);
   };
@@ -9355,14 +9484,10 @@ const DotTableSelectionToolbar = ({
 };
 
 const sortComparator = (a, b, orderBy) => {
-  var _a, _b;
-  let valueA = a.rowData[orderBy];
-  let valueB = b.rowData[orderBy];
-  if (((_a = a.rowData[orderBy]) === null || _a === void 0 ? void 0 : _a.mainText) && ((_b = b.rowData[orderBy]) === null || _b === void 0 ? void 0 : _b.mainText)) {
-    // use mainText value for sort in case when data for the table cell is of type CustomCellDataWrapper
-    valueA = a.rowData[orderBy].mainText;
-    valueB = b.rowData[orderBy].mainText;
-  }
+  const {
+    valueA,
+    valueB
+  } = getValuesForSort(a, b, orderBy);
   if (valueB < valueA) {
     return -1;
   }
@@ -9733,6 +9858,7 @@ const DotTabs = ({
   centered: _centered = false,
   className,
   color,
+  'data-pendoid': dataPendoId = rootClassName$8,
   'data-testid': dataTestId,
   initialValue: _initialValue = 0,
   onChange,
@@ -9768,6 +9894,7 @@ const DotTabs = ({
     });
     const tabElement = jsx(Tab, {
       "aria-label": tab.ariaLabel,
+      "data-pendoid": tab['data-pendoid'],
       "data-testid": tab['data-testid'],
       disableRipple: true,
       disabled: tab.disabled,
@@ -9782,6 +9909,7 @@ const DotTabs = ({
     classes: {
       root: rootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     indicatorColor: "primary",
     onChange: handleChange,
@@ -9980,6 +10108,7 @@ const DotFileUpload = ({
   },
   buttonOnly: _buttonOnly = false,
   className,
+  'data-pendoid': dataPendoId = rootClassName$7,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -10046,6 +10175,7 @@ const DotFileUpload = ({
     children: [jsxs(StyledFileUpload, Object.assign({}, getRootProps(), {
       "aria-label": ariaLabel,
       className: rootClasses,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       children: [jsx("input", Object.assign({}, getInputProps())), renderDropzoneContent({
         buttonProps: _buttonProps,
@@ -10177,6 +10307,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
+  'data-pendoid': dataPendoId = rootClassName$4,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -10202,6 +10333,7 @@ const DotDraggableList = ({
   return jsx(StyledDraggableList, {
     "aria-label": ariaLabel,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     draggableHandle: draggableHandle,
     width: listWidth,
@@ -10222,6 +10354,7 @@ const DotDraggableList = ({
         children
       }) => {
         return jsx(ListItem, {
+          "data-pendoid": dataPendoId && `${dataPendoId}-item`,
           "data-testid": dataTestId && `${dataTestId}-item`,
           button: true,
           children: renderNodeOrTypography(children),
@@ -10279,16 +10412,6 @@ var DatePickerKeydownContext;
   DatePickerKeydownContext[DatePickerKeydownContext["Popper"] = 2] = "Popper";
 })(DatePickerKeydownContext || (DatePickerKeydownContext = {}));
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
-}(dayjs_min));
-
-var dayjs = dayjs_min.exports;
-
 /** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
 const checkIfValidDate = (date, format) => dayjs(date, format, true).isValid();
 const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
@@ -10302,14 +10425,6 @@ const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
   return currentContextEnum;
 };
 
-var updateLocale$1 = {exports: {}};
-
-(function (module, exports) {
-!function(e,n){module.exports=n();}(commonjsGlobal,(function(){return function(e,n,t){t.updateLocale=function(e,n){var o=t.Ls[e];if(o)return (n?Object.keys(n):[]).forEach((function(e){o[e]=n[e];})),o};}}));
-}(updateLocale$1));
-
-var updateLocale = updateLocale$1.exports;
-
 const rootClassName$2 = 'dot-date-picker';
 const popperClassName = 'dot-date-picker-popper';
 const containerClassName$1 = 'dot-date-picker-container';
@@ -10343,6 +10458,7 @@ const DotDatePicker = ({
   autoFocus: _autoFocus = false,
   className,
   closeOnSelect: _closeOnSelect = true,
+  'data-pendoid': dataPendoId = rootClassName$2,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -10439,10 +10555,12 @@ const DotDatePicker = ({
   };
   return jsx(StyledDatePickerContainer, {
     className: containerClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     children: jsxs(LocalizationProvider, {
       dateAdapter: AdapterDayjs,
       children: [persistentLabel && jsx(DotInputLabel, {
+        'data-pendoid': 'date-picker-persistent-label',
         'data-testid': 'date-picker-persistent-label',
         disabled,
         error,
@@ -10479,6 +10597,7 @@ const DotDatePicker = ({
               iconId: "error-solid"
             }), jsx(DotIconButton, {
               ariaLabel: "Open date picker",
+              "data-pendoid": "date-picker-open-btn",
               "data-testid": "date-picker-open-btn",
               iconId: "calendar",
               onClick: pickerButtonProps.onClick,
@@ -10496,6 +10615,7 @@ const DotDatePicker = ({
             focused: isInputReadOnly ? false : undefined,
             inputProps: {
               className: 'dot-input',
+              'data-pendoid': 'dot-date-picker-input',
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
@@ -10532,14 +10652,6 @@ const mockScrollIntoView = scrollIntoViewMock => {
   window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 };
 
-var utc$1 = {exports: {}};
-
-(function (module, exports) {
-!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}}));
-}(utc$1));
-
-var utc = utc$1.exports;
-
 const getDayjsUtcDate = (value, timeFormat) => dayjs.utc(value, timeFormat);
 const createNumbersArray = (length, offset) => Array.from({
   length
@@ -10624,6 +10736,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus: _autoFocus = false,
   className,
+  'data-pendoid': dataPendoId = rootClassName$1,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker: _disableOpenPicker = false,
@@ -10794,6 +10907,7 @@ const DotTimePicker = ({
     const isSelected = pickerTime ? selectedPickerHour === hour : false;
     return jsx(DotButton, {
       className: "dot-picker-button",
+      "data-pendoid": dataPendoId && `${dataPendoId}-hour-button-${hour}`,
       "data-testid": dataTestId && `${dataTestId}-hour-button-${hour}`,
       onClick: () => handleHourClick(hour),
       onKeyDown: handleTimeKeydown(hoursRef, index),
@@ -10806,6 +10920,7 @@ const DotTimePicker = ({
     const isSelected = pickerTime ? pickerTime.minute() === minute : false;
     return jsx(DotButton, {
       className: "dot-picker-button",
+      "data-pendoid": dataPendoId && `${dataPendoId}-minute-button-${minute}`,
       "data-testid": dataTestId && `${dataTestId}-minute-button-${minute}`,
       type: isSelected ? 'primary' : 'text',
       onClick: () => handleMinuteClick(minute),
@@ -10817,12 +10932,14 @@ const DotTimePicker = ({
   const renderTimePickerActionButtons = () => jsxs("div", {
     className: "dot-time-picker-action-buttons",
     children: [jsx(DotButton, {
+      "data-pendoid": dataPendoId && `${dataPendoId}-cancel`,
       "data-testid": dataTestId && `${dataTestId}-cancel`,
       onClick: handleCancel,
       size: "small",
       type: "text",
       children: "Cancel"
     }), jsx(DotButton, {
+      "data-pendoid": dataPendoId && `${dataPendoId}-set`,
       "data-testid": dataTestId && `${dataTestId}-set`,
       onClick: handleSet,
       size: "small",
@@ -10835,6 +10952,7 @@ const DotTimePicker = ({
     ref: daytimeRef,
     children: [jsx(DotButton, {
       className: "dot-picker-button",
+      "data-pendoid": dataPendoId && `${dataPendoId}-am-button`,
       "data-testid": dataTestId && `${dataTestId}-am-button`,
       onClick: () => handleDaytimeSelection(Daytime.AM),
       onKeyDown: handleTimeKeydown(daytimeRef, 0),
@@ -10843,6 +10961,7 @@ const DotTimePicker = ({
       children: Daytime.AM
     }, Daytime.AM), jsx(DotButton, {
       className: "dot-picker-button",
+      "data-pendoid": dataPendoId && `${dataPendoId}-pm-button`,
       "data-testid": dataTestId && `${dataTestId}-pm-button`,
       onClick: () => handleDaytimeSelection(Daytime.PM),
       onKeyDown: handleTimeKeydown(daytimeRef, 1),
@@ -10869,6 +10988,7 @@ const DotTimePicker = ({
   });
   return jsxs(StyledTimePickerContainer, {
     className: containerClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     onKeyDown: handleTimePickerKeyDown,
     children: [jsxs(LocalizationProvider, {
@@ -10903,6 +11023,7 @@ const DotTimePicker = ({
                   iconId: "error-solid"
                 }), !_disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
                   ariaLabel: "Open time picker",
+                  "data-pendoid": dataPendoId && `${dataPendoId}-open-btn`,
                   "data-testid": dataTestId && `${dataTestId}-open-btn`,
                   iconId: "pending-clock",
                   onClick: _event => handleTimePickerButtonClick(),
@@ -10912,6 +11033,7 @@ const DotTimePicker = ({
             },
             inputProps: {
               className: 'dot-input',
+              'data-pendoid': dataPendoId && `${dataPendoId}-input`,
               'data-testid': dataTestId && `${dataTestId}-input`,
               onBlur
             },