@digital-ai/dot-components 2.23.0 → 2.24.1

package/index.esm.js

@@ -155,6 +155,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId = 'dot-accordion',
   disabled: _disabled = false,
   expanded,
@@ -178,6 +179,7 @@ const DotAccordion = ({
   return jsxs(StyledAccordion, {
     "aria-label": ariaLabel,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: _disabled,
     elevation: elevation,
@@ -1349,6 +1351,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId,
   onClose,
   roundedCorners: _roundedCorners = true,
@@ -1375,6 +1378,7 @@ const DotAlertBanner = ({
     classes: {
       root: rootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     iconMapping: AlertBannerIconMapping,
     onClose: onClose,
@@ -2154,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,
@@ -2198,6 +2203,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
         root: rootClasses
       },
       color: color,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       disableRipple: _disableRipple,
       disabled: _disabled,
@@ -2229,6 +2235,7 @@ const DotLink = ({
   children,
   className,
   color: _color = 'primary',
+  'data-pendoid': dataPendoId = rootClassName$10,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2265,6 +2272,7 @@ const DotLink = ({
         root: rootClasses
       },
       color: _color === 'initial' ? 'inherit' : _color,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       href: href,
       onClick: onClick,
@@ -2547,6 +2555,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
         ariaLabel: itemAriaLabel,
         children,
         classes,
+        'data-pendoid': dataPendoId = 'dot-menu-list-item',
         disabled,
         divider,
         height,
@@ -2574,6 +2583,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
         autoFocus: hasAutoFocus,
         "aria-label": itemAriaLabel,
         className: menuItemClasses,
+        "data-pendoid": dataPendoId,
         disabled: disabled,
         disableRipple: hasSubmenu,
         divider: divider,
@@ -2732,14 +2742,16 @@ const StyledIconButton = styled(IconButton).withConfig({
   displayName: "IconButtonstyles__StyledIconButton",
   componentId: "eko0kb-0"
 })(["", ""], ({
-  theme
-}) => css(["&.", "{color:", ";font-size:inherit;padding:10px;&:hover{background-color:", ";}&:active{background-color:", ";}&:focus{background-color:", ";}&.Mui-disabled .dot-icon{color:", ";}&.ripple-disabled{&:hover,&:focus{background:", ";}}&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";&:active{background:", ";}}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}"], rootClassName$U, theme.palette.figma.icon.black, theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.ripple, theme.palette.figma.neutral.active, theme.palette.figma.icon.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.border.defaultButton, theme.spacing(1), theme.palette.figma.toggleTabs.bckg));
+  theme,
+  color
+}) => css(["&.", "{", " ", " font-size:inherit;padding:10px;&:hover{background-color:", ";}&:active{background-color:", ";}&:focus{background-color:", ";}&.Mui-disabled .dot-icon{color:", ";}&.ripple-disabled{&:hover,&:focus{background:", ";}}&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";&:active{background:", ";}}.dot-icon{color:inherit;}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}"], rootClassName$U, color === 'inherit' ? css(["color:inherit;"]) : '', color === 'default' ? css(["color:", ";"], theme.palette.figma.icon.black) : '', theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.ripple, theme.palette.figma.neutral.active, theme.palette.figma.icon.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.border.defaultButton, theme.spacing(1), theme.palette.figma.toggleTabs.bckg));
 
 const DotIconButton = ({
   ariaLabel,
   ariaRole: _ariaRole = 'button',
   className,
   color: _color = 'inherit',
+  'data-pendoid': dataPendoId = rootClassName$U,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   disableRipple: _disableRipple = false,
@@ -2761,6 +2773,7 @@ const DotIconButton = ({
         root: rootClasses
       },
       color: _color,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       disableRipple: _disableRipple,
       disabled: _disabled,
@@ -2863,6 +2876,7 @@ const DotDrawer = ({
   ariaRole: _ariaRole = 'dialog',
   className,
   children,
+  'data-pendoid': dataPendoId = rootClassName$W,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -2888,6 +2902,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,
@@ -2902,6 +2917,7 @@ const DotDrawer = ({
       root: rootClasses,
       paper: 'dot-drawer-paper'
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     height: height,
     onClose: handleClose,
@@ -2911,12 +2927,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,
@@ -2924,6 +2942,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
     })]
@@ -3059,6 +3078,7 @@ const DotListItem = ({
   ariaRole: _ariaRole = 'listitem',
   className,
   component: _component = 'li',
+  'data-pendoid': dataPendoId = listItemRootClass,
   'data-testid': dataTestId,
   divider: _divider = false,
   endIcon,
@@ -3137,6 +3157,7 @@ const DotListItem = ({
         root: rootClasses
       },
       component: _component,
+      "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       divider: _divider,
       href: onClick ? null : href,
@@ -3299,6 +3320,7 @@ const DotCopyButton = ({
   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,
@@ -3353,6 +3375,7 @@ const DotCopyButton = ({
       ariaRole: _ariaRole,
       className: className,
       color: _color,
+      "data-pendoid": dataPendoId,
       "data-testid": `${dataTestId}-button`,
       disabled: _disabled || timedDisabled,
       disableRipple: _disableRipple,
@@ -3434,6 +3457,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
+  'data-pendoid': dataPendoId = rootClassName$15,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   error: _error = false,
@@ -3584,6 +3608,7 @@ const DotInputText = ({
       },
       inputProps: {
         className: inputClassName,
+        'data-pendoid': dataPendoId,
         'data-testid': dataTestId,
         max,
         maxLength: maxLength,
@@ -4744,6 +4769,7 @@ const DotChip = ({
   charactersLimit: _charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$J,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   error: _error = false,
@@ -4774,6 +4800,7 @@ const DotChip = ({
     },
     clickable: _isClickable,
     color: "default",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: _disabled,
     icon: avatar ? null : startIcon,
@@ -4852,6 +4879,7 @@ const DotAutoComplete = ({
   ariaLabel,
   autoFocus,
   className,
+  'data-pendoid': dataPendoId = rootClassName$K,
   'data-testid': dataTestId,
   defaultValue,
   dense: _dense = true,
@@ -5073,6 +5101,7 @@ const DotAutoComplete = ({
       root: rootClasses,
       inputRoot: inputRootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     defaultValue: _multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
     disabled: _disabled,
@@ -5548,6 +5577,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
+  'data-pendoid': dataPendoId = rootClassName$G,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple: _disableFocusRipple = false,
   disableRipple: _disableRipple = false,
@@ -5601,6 +5631,7 @@ const DotButtonToggle = ({
       root: rootClasses
     },
     color: color,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     exclusive: _exclusive,
     onChange: onChange,
@@ -5747,6 +5778,7 @@ function DotCheckbox({
   ariaLabelledby,
   checked,
   className,
+  'data-pendoid': dataPendoId = rootClassName$D,
   'data-testid': dataTestId,
   disabled,
   disableRipple,
@@ -5771,6 +5803,7 @@ function DotCheckbox({
       root: rootClassName$C
     },
     color: "primary",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disableRipple: disableRipple,
     disabled: disabled,
@@ -5970,6 +6003,7 @@ const DotDialog = ({
   cancelButtonProps,
   cancelButtonVisible: _cancelButtonVisible = true,
   className,
+  'data-pendoid': dataPendoId = rootClassName$y,
   'data-testid': dataTestId,
   children,
   closeIconVisible,
@@ -6014,6 +6048,7 @@ const DotDialog = ({
     classes: {
       root: rootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     onClose: handleClickAway,
     open: isOpen,
@@ -6039,6 +6074,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,
@@ -6051,6 +6087,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,
@@ -6069,6 +6106,7 @@ const DotConfirmationDialog = ({
   ariaLabel,
   cancelButtonProps,
   className,
+  'data-pendoid': dataPendoId = 'dot-confirmation-dialog',
   'data-testid': dataTestId,
   message: _message = '',
   onCancel,
@@ -6085,6 +6123,7 @@ const DotConfirmationDialog = ({
     ariaLabel: ariaLabel,
     cancelButtonProps: cancelButtonProps,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     onCancel: onCancel,
     onSubmit: onSubmit,
@@ -6203,19 +6242,18 @@ const CssCell = styled(Cell).withConfig({
   middle: _middle = true,
   md,
   sm,
-  start,
   theme,
   top,
-  width,
   xl,
+  xxl,
   xs
-}) => css(["height:", ";min-width:0;box-sizing:border-box;", ";", ";", ";", ";grid-row-end:", ";", ";", ";", " ", " ", " ", " ", " ", " grid-column:", ";}"], height ? height : '100%', top && `grid-row-start: ${top}`, _center && `text-align: center`, !start && `grid-column-start: ${start}`, !width && `grid-column-end: span ${width}`, height && `span ${height}`, area && `grid-area: ${area}`, _middle && `
+}) => css(["height:", ";min-width:0;box-sizing:border-box;", ";", ";grid-row-end:", ";", ";", ";", " ", " ", " ", " ", " ", " grid-column:", ";}"], height ? height : '100%', top && `grid-row-start: ${top}`, _center && `text-align: center`, height && `span ${height}`, area && `grid-area: ${area}`, _middle && `
     display: inline-flex;
     flex-flow: column wrap;
     justify-content: ${_justifyContent};
     align-items: ${_alignItems};
     justify-self: stretch;
-  `, xs && breakpointsGetter(xs, theme, 'xs'), sm && breakpointsGetter(sm, theme, 'sm'), md && breakpointsGetter(md, theme, 'md'), lg && breakpointsGetter(lg, theme, 'lg'), lg && breakpointsGetter(lg, theme, 'lg'), xl && breakpointsGetter(lg, theme, 'xl'), gridColumn));
+  `, xs && breakpointsGetter(xs, theme, 'xs'), sm && breakpointsGetter(sm, theme, 'sm'), md && breakpointsGetter(md, theme, 'md'), lg && breakpointsGetter(lg, theme, 'lg'), xl && breakpointsGetter(xl, theme, 'xl'), xxl && breakpointsGetter(xxl, theme, 'xxl'), gridColumn));
 
 const gridClassName = 'debug-grid';
 const gridClassContainer = 'debug-grid-container';
@@ -6306,13 +6344,9 @@ const CssGridDebug = ({
     }), jsx(StyledGridOverlay, {
       className: gridClassName,
       rows: "minmax(100vh, 100%)",
-      children: [...Array(columns)].map((item, i) => {
-        return jsx(CssCell, {
-          className: `${cellClassName}`,
-          start: i + 1,
-          width: 1
-        }, i);
-      })
+      children: Array.from(Array(columns), (_item, i) => jsx(CssCell, {
+        className: `${cellClassName}`
+      }, i))
     })]
   });
 };
@@ -6583,6 +6617,7 @@ const DotInputSelect = ({
   ariaLabel,
   autoFocus,
   className,
+  'data-pendoid': dataPendoId = rootSelectClassName,
   'data-testid': dataTestId,
   defaultValue,
   disabled: _disabled = false,
@@ -6661,6 +6696,7 @@ const DotInputSelect = ({
       },
       inputProps: {
         'aria-label': ariaLabel,
+        'data-pendoid': dataPendoId,
         'data-testid': dataTestId,
         className: inputStyles,
         readOnly: _readOnly
@@ -6702,6 +6738,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
+  'data-pendoid': dataPendoId = rootClassName$t,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   disableRipple: _disableRipple = false,
@@ -6721,6 +6758,7 @@ const DotProgressButton = ({
   return jsxs(StyledProgressButton, {
     ariaLabel: ariaLabel || tooltip,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disableRipple: _disableRipple,
     disabled: isButtonDisabled,
@@ -6753,6 +6791,7 @@ function DotRadioButton({
   ariaLabel,
   checked,
   className,
+  'data-pendoid': dataPendoId = rootClassName$D,
   'data-testid': dataTestId,
   disabled,
   id,
@@ -6776,6 +6815,7 @@ function DotRadioButton({
       root: rootClassName$s
     },
     color: "primary",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: disabled,
     id: id,
@@ -6896,6 +6936,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
+  'data-pendoid': dataPendoId = rootClassName$r,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   id,
@@ -6922,6 +6963,7 @@ const DotSwitch = ({
       root: rootClasses
     },
     color: "primary",
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     disabled: _disabled,
     id: id,
@@ -7601,6 +7643,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
+  'data-pendoid': dataPendoId = rootClassName$q,
   'data-testid': dataTestId,
   fullWidth: _fullWidth = true,
   hideActionButtons,
@@ -7750,6 +7793,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
@@ -7766,6 +7810,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",
@@ -7775,6 +7820,7 @@ const DotInlineEdit = ({
             iconId: "close"
           })
         }), jsx(DotButton, {
+          "data-pendoid": dataPendoId && `${dataPendoId}-save`,
           "data-testid": dataTestId && `${dataTestId}-save`,
           disabled: isSaveDisabled,
           onClick: handleSave,
@@ -7792,6 +7838,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,
@@ -8145,6 +8192,7 @@ const DotSplitButton = ({
   autoFocus: _autoFocus = false,
   ariaLabel,
   className,
+  'data-pendoid': dataPendoId = rootClassName$k,
   'data-testid': dataTestId,
   defaultMainOptionKey,
   disabled: _disabled = false,
@@ -8185,6 +8233,7 @@ const DotSplitButton = ({
       children: [jsx(DotButton, {
         autoFocus: _autoFocus,
         className: "label-button",
+        "data-pendoid": dataPendoId,
         "data-testid": dataTestId,
         disableRipple: _disableRipple,
         disabled: isMainOptionDisabled,
@@ -8196,6 +8245,7 @@ const DotSplitButton = ({
         children: mainOptionChildren
       }), jsx(DotButton, {
         className: "expand-button",
+        "data-pendoid": dataPendoId && `${dataPendoId}-expand`,
         "data-testid": dataTestId && `${dataTestId}-expand`,
         disableRipple: _disableRipple,
         disabled: isMenuButtonDisabled,
@@ -9804,6 +9854,7 @@ const DotTabs = ({
   centered: _centered = false,
   className,
   color,
+  'data-pendoid': dataPendoId = rootClassName$8,
   'data-testid': dataTestId,
   initialValue: _initialValue = 0,
   onChange,
@@ -9839,6 +9890,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,
@@ -9853,6 +9905,7 @@ const DotTabs = ({
     classes: {
       root: rootClasses
     },
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     indicatorColor: "primary",
     onChange: handleChange,
@@ -10051,6 +10104,7 @@ const DotFileUpload = ({
   },
   buttonOnly: _buttonOnly = false,
   className,
+  'data-pendoid': dataPendoId = rootClassName$7,
   'data-testid': dataTestId,
   disabled,
   hideFilesList,
@@ -10117,6 +10171,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,
@@ -10248,6 +10303,7 @@ const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
+  'data-pendoid': dataPendoId = rootClassName$4,
   'data-testid': dataTestId,
   disableDrag,
   draggableHandle,
@@ -10273,6 +10329,7 @@ const DotDraggableList = ({
   return jsx(StyledDraggableList, {
     "aria-label": ariaLabel,
     className: rootClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     draggableHandle: draggableHandle,
     width: listWidth,
@@ -10293,6 +10350,7 @@ const DotDraggableList = ({
         children
       }) => {
         return jsx(ListItem, {
+          "data-pendoid": dataPendoId && `${dataPendoId}-item`,
           "data-testid": dataTestId && `${dataTestId}-item`,
           button: true,
           children: renderNodeOrTypography(children),
@@ -10396,6 +10454,7 @@ const DotDatePicker = ({
   autoFocus: _autoFocus = false,
   className,
   closeOnSelect: _closeOnSelect = true,
+  'data-pendoid': dataPendoId = rootClassName$2,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -10492,10 +10551,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,
@@ -10532,6 +10593,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,
@@ -10549,6 +10611,7 @@ const DotDatePicker = ({
             focused: isInputReadOnly ? false : undefined,
             inputProps: {
               className: 'dot-input',
+              'data-pendoid': 'dot-date-picker-input',
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
@@ -10669,6 +10732,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus: _autoFocus = false,
   className,
+  'data-pendoid': dataPendoId = rootClassName$1,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker: _disableOpenPicker = false,
@@ -10839,6 +10903,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),
@@ -10851,6 +10916,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),
@@ -10862,12 +10928,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",
@@ -10880,6 +10948,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),
@@ -10888,6 +10957,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),
@@ -10914,6 +10984,7 @@ const DotTimePicker = ({
   });
   return jsxs(StyledTimePickerContainer, {
     className: containerClasses,
+    "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     onKeyDown: handleTimePickerKeyDown,
     children: [jsxs(LocalizationProvider, {
@@ -10948,6 +11019,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(),
@@ -10957,6 +11029,7 @@ const DotTimePicker = ({
             },
             inputProps: {
               className: 'dot-input',
+              'data-pendoid': dataPendoId && `${dataPendoId}-input`,
               'data-testid': dataTestId && `${dataTestId}-input`,
               onBlur
             },

package/package.json

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

package/src/lib/components/CommonProps.d.ts

@@ -4,8 +4,10 @@ export interface CommonProps {
     ariaLabel?: string;
     /** The ARIA role attribute of the element **/
     ariaRole?: AriaRoles;
-    /** classes to be attributed to the root of the component */
+    /** classes to be attributed to the root of the component **/
     className?: string;
-    /** data attribute passed through for testing purposes ONLY */
+    /** data attribute passed through for pendo purposes ONLY **/
+    'data-pendoid'?: string;
+    /** data attribute passed through for testing purposes ONLY **/
     'data-testid'?: string;
 }

package/src/lib/components/accordion/Accordion.d.ts

@@ -25,4 +25,4 @@ export interface AccordionProps extends CommonProps {
     /** The text within the expanded Accordion */
     summary: ReactNode | string;
 }
-export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/alert-banner/AlertBanner.d.ts

@@ -16,4 +16,4 @@ export interface AlertBannerProps extends CommonProps {
     /** when specified, will control the text that is used inside the alert banner */
     textVariant?: TypographyVariant;
 }
-export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/app-switcher/AppSwitcher.styles.d.ts

@@ -1,2 +1,2 @@
 export declare const rootClassName = "dot-app-switcher";
-export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/src/lib/components/app-toolbar/AppToolbar.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const rootClassName = "dot-app-toolbar";
 export declare const denseClassName = "dense";
-export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledAppToolbar: import("styled-components").StyledComponent<"header", any, {}, never>;

package/src/lib/components/auto-complete/AutoComplete.d.ts

@@ -86,4 +86,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/button/CopyButton.d.ts

@@ -11,4 +11,4 @@ export interface CopyButtonProps extends CommonIconButtonProps {
     /** The content which will be copied to the clipboard */
     value: string;
 }
-export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/button/IconButton.d.ts

@@ -26,4 +26,4 @@ export interface IconButtonProps extends CommonIconButtonProps {
     /** The icon to display on the button */
     iconId: string;
 }
-export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/button-toggle/ButtonToggle.d.ts

@@ -21,4 +21,4 @@ export interface ButtonToggleProps extends CommonProps {
     /** The value to associate with the button when selected in a ToggleButtonGroup */
     value?: ButtonToggleValue;
 }
-export declare const DotButtonToggle: ({ ariaLabel, buttonOptions, className, color, "data-testid": dataTestId, disableFocusRipple, disableRipple, exclusive, onChange, orientation, size, value, }: ButtonToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotButtonToggle: ({ ariaLabel, buttonOptions, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableFocusRipple, disableRipple, exclusive, onChange, orientation, size, value, }: ButtonToggleProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/checkbox/Checkbox.d.ts

@@ -9,4 +9,4 @@ export interface CheckboxProps extends RadioButtonProps {
     /** if true the checkbox will display with intermediate */
     indeterminate?: boolean;
 }
-export declare function DotCheckbox({ ariaLabel, ariaLabelledby, checked, className, 'data-testid': dataTestId, disabled, disableRipple, id, indeterminate, inputRef, label, labelPlacement, name, onChange, required, size, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function DotCheckbox({ ariaLabel, ariaLabelledby, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, disabled, disableRipple, id, indeterminate, inputRef, label, labelPlacement, name, onChange, required, size, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/chip/Chip.d.ts

@@ -26,4 +26,4 @@ export interface ChipProps extends CommonProps {
     /** The icon to display on the chip */
     startIcon?: ReactElement;
 }
-export declare const DotChip: ({ ariaLabel, avatar, charactersLimit, children, className, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotChip: ({ ariaLabel, avatar, charactersLimit, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, }: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/confirmation-dialog/ConfirmationDialog.d.ts

@@ -17,4 +17,4 @@ export interface ConfirmationDialogProps extends CommonProps {
     /** The dialog title */
     title?: ReactNode;
 }
-export declare const DotConfirmationDialog: ({ ariaLabel, cancelButtonProps, className, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, open, title, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotConfirmationDialog: ({ ariaLabel, cancelButtonProps, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, open, title, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/css-grid/CssCell.d.ts

@@ -28,15 +28,14 @@ export interface CssCellProps extends CommonProps {
     middle?: boolean;
     /** Small column breakpoint */
     sm?: CellSize;
-    /** Column start when Cell column breakpoints are not used */
-    start?: number | string;
     /** Row start override */
     top?: number | string;
-    width?: number;
     /** Extra large column breakpoint */
     xl?: CellSize;
     /** Extra small column breakpoint */
     xs?: CellSize;
+    /** Extra, extra large column breakpoint */
+    xxl?: CellSize;
 }
 export declare const Cell: ({ children, className }: CssCellProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CssCell: import("styled-components").StyledComponent<({ children, className }: CssCellProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/src/lib/components/date-picker/DatePicker.d.ts

@@ -80,4 +80,4 @@ export interface DatePickerProps extends CommonProps {
     /** The selected value. Used when the component is controlled. Date in ISO 8601 format, ie: YYYY-MM-DD  */
     value?: string;
 }
-export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/dialog/Dialog.d.ts

@@ -39,4 +39,4 @@ export interface DialogProps extends CommonProps {
     /** dialog heading */
     title: ReactNode;
 }
-export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/draggable-list/DraggableList.d.ts

@@ -20,4 +20,4 @@ export interface DraggableListProps extends CommonProps {
     /** Width of the draggable list, defaults to '100%' */
     width?: number | string;
 }
-export declare const DotDraggableList: ({ ariaLabel, className, "data-testid": dataTestId, disableDrag, draggableHandle, items, onChange, rowHeight, width, }: DraggableListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotDraggableList: ({ ariaLabel, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableDrag, draggableHandle, items, onChange, rowHeight, width, }: DraggableListProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/drawer/Drawer.d.ts

@@ -42,4 +42,4 @@ export interface DrawerProps extends CommonProps {
     /** The width of the drawer when anchor is 'left' or 'right' */
     width?: string;
 }
-export declare const DotDrawer: ({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotDrawer: ({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/file-upload/FileUpload.d.ts

@@ -33,5 +33,5 @@ export interface FileUploadProps extends CommonProps {
     /** Optional callback which gets triggered when the file (from the list) is clicked.  */
     onFileClick?: (file: ListItemFile) => void;
 }
-export declare const DotFileUpload: ({ accept, ariaLabel, ariaRole, buttonProps, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotFileUpload: ({ accept, ariaLabel, ariaRole, buttonProps, buttonOnly, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/inline-edit/InlineEdit.d.ts

@@ -36,4 +36,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input-form-fields/InputSelect.d.ts

@@ -12,4 +12,4 @@ export interface InputSelectProps extends InputProps {
     /** options of select dropdown */
     options: Array<OptionType>;
 }
-export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input-form-fields/InputText.d.ts

@@ -36,4 +36,4 @@ export interface EndIconProps {
     success?: boolean;
     warning?: boolean;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/link/Link.d.ts

@@ -27,4 +27,4 @@ export interface LinkProps extends CommonProps {
     /**  underline the link */
     underline?: LinkUnderline;
 }
-export declare const DotLink: ({ ariaLabel, ariaRole, children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotLink: ({ ariaLabel, ariaRole, children, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/list/ListItem.d.ts

@@ -1,2 +1,2 @@
 import { ListItemProps } from './utils/models';
-export declare const DotListItem: ({ ariaLabel, ariaRole, className, component, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotListItem: ({ ariaLabel, ariaRole, className, component, "data-pendoid": dataPendoId, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/list/NestedList.styles.d.ts

@@ -1 +1 @@
-export declare const StyledDotDrawer: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledDotDrawer: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/src/lib/components/menu/Menu.d.ts

@@ -36,6 +36,8 @@ export interface MenuItemProps {
     children?: ReactNode;
     /** Space delimited CSS classes to be attributed to the menu item */
     classes?: string;
+    /** data attribute passed through for pendo purposes ONLY **/
+    'data-pendoid'?: string;
     /** If true, the item will be displayed in a disabled state. */
     disabled?: boolean;
     /** If true, a 1px light border is added to the bottom of the menu item. */

package/src/lib/components/progress-button/ProgressButton.d.ts

@@ -5,4 +5,4 @@ export interface ProgressButtonProps extends ButtonProps {
     /** Is spinner displayed */
     isLoading?: boolean;
 }
-export declare const DotProgressButton: ({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotProgressButton: ({ ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/radio/RadioButton.d.ts

@@ -28,4 +28,4 @@ export interface RadioButtonProps extends RadioButtonBaseProps {
     /** A function that should be executed when the value of the radio buttom changes */
     onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
 }
-export declare function DotRadioButton({ ariaLabel, checked, className, 'data-testid': dataTestId, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function DotRadioButton({ ariaLabel, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/split-button/SplitButton.d.ts

@@ -12,4 +12,4 @@ export interface SplitButtonProps extends BaseButtonProps {
     /**The options within the button dropdown */
     options: Array<MenuItemProps>;
 }
-export declare const DotSplitButton: ({ autoFocus, ariaLabel, className, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, tooltip, type, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSplitButton: ({ autoFocus, ariaLabel, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, tooltip, type, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/switch/Switch.d.ts

@@ -23,4 +23,4 @@ export interface SwitchProps extends CommonProps {
     /** controls the size of the switch 'medium', 'small' */
     size?: SwitchSize;
 }
-export declare const DotSwitch: ({ ariaLabel, checked, className, color, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSwitch: ({ ariaLabel, checked, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/tabs/Tabs.d.ts

@@ -28,4 +28,4 @@ export interface TabsProps extends CommonProps {
     /** Determines additional display behavior of the tabs */
     variant?: TabsVariant;
 }
-export declare const DotTabs: ({ centered, className, color, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTabs: ({ centered, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/time-picker/TimePicker.d.ts

@@ -60,4 +60,4 @@ export interface TimePickerProps extends CommonProps {
 export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME = "01:00";
-export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;