@pingux/astro 2.53.1 → 2.54.0-alpha.1

package/lib/components/Calendar/CalendarGrid.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -6,7 +7,6 @@ import React from 'react';
 import { getWeeksInMonth } from '@internationalized/date';
 import { useCalendarGrid } from '@react-aria/calendar';
 import { useLocale } from '@react-aria/i18n';
-import PropTypes from 'prop-types';
 import { Table, TableBody, TableCell, TableHead, TableRow } from '../../index';
 import CalendarCell from './CalendarCell';
 
@@ -33,7 +33,9 @@ var CalendarGrid = function CalendarGrid(props) {
     var _context;
     return _concatInstanceProperty(_context = "".concat(day, "-")).call(_context, index);
   };
-  return ___EmotionJSX(Table, gridProps, ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(_context2 = customWeekDays || weekDays).call(_context2, function (day, index) {
+  return ___EmotionJSX(Table, _extends({}, gridProps, {
+    role: "grid"
+  }), ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(_context2 = customWeekDays || weekDays).call(_context2, function (day, index) {
     return ___EmotionJSX(TableCell, {
       variant: "calendar.columnHeader",
       key: getKey(day, index),
@@ -46,23 +48,12 @@ var CalendarGrid = function CalendarGrid(props) {
     return ___EmotionJSX(TableRow, {
       key: weekIndex
     }, _mapInstanceProperty(_context5 = getDatesInWeek(weekIndex)).call(_context5, function (date) {
-      return date.day && ___EmotionJSX(CalendarCell, {
-        key: date,
+      return (date === null || date === void 0 ? void 0 : date.day) && ___EmotionJSX(CalendarCell, {
+        key: date.toString(),
         state: state,
         date: date
       });
     }));
   })));
 };
-CalendarGrid.propTypes = {
-  /** State object that is passed in from the  useCalendar hook */
-  state: PropTypes.shape({
-    visibleRange: PropTypes.shape({
-      start: PropTypes.shape({})
-    }),
-    getDatesInWeek: PropTypes.func
-  }),
-  /** Custom week days for other international calendars */
-  customWeekDays: PropTypes.arrayOf(PropTypes.string)
-};
 export default CalendarGrid;

package/lib/components/CheckboxField/CheckboxField.js

@@ -18,10 +18,12 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'CheckboxField';
 var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
     _props$controlProps = props.controlProps,
@@ -68,7 +70,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
-  return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, _extends({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef,
@@ -124,5 +126,5 @@ CheckboxField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** Handler that is called when a key is released. */
   onKeyUp: PropTypes.func
 }, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-CheckboxField.displayName = 'CheckboxField';
+CheckboxField.displayName = displayName;
 export default CheckboxField;

package/lib/components/ColorField/ColorField.js

@@ -20,11 +20,13 @@ import { useColorFieldState } from '@react-stately/color';
 import PropTypes from 'prop-types';
 import { Box, Button, FieldHelperText, Input, Label } from '../..';
 import useField from '../../hooks/useField';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import PopoverContainer from '../PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'ColorField';
 var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var align = props.align,
@@ -91,7 +93,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     var colorValue = _ref.colorValue;
     return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
-  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Button, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Button, _extends({
     "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
@@ -144,5 +146,5 @@ ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'
 };
-ColorField.displayName = 'ColorField';
+ColorField.displayName = displayName;
 export default ColorField;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -25,6 +25,7 @@ import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -33,6 +34,7 @@ import ListBox from '../ListBox';
 import PopoverContainer from '../PopoverContainer';
 import ScrollBox from '../ScrollBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'ComboBoxField';
 var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var hasAutoFocus = props.hasAutoFocus,
     hasAddOption = props.hasAddOption,
@@ -198,7 +200,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, otherListBoxProps))), ___EmotionJSX(DismissButton, {
     onDismiss: state.close
   })));
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, props, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, getPendoID(displayName), props, {
     isOpen: state.isOpen,
     inputProps: inputProps,
     labelProps: labelProps,
@@ -337,5 +339,5 @@ ComboBoxField.defaultProps = {
   },
   defaultItems: []
 };
-ComboBoxField.displayName = 'ComboBoxField';
+ComboBoxField.displayName = displayName;
 export default ComboBoxField;

package/lib/components/DatePicker/DatePicker.js

@@ -18,8 +18,10 @@ import { FocusScope } from '@react-aria/focus';
 import { useOverlayPosition } from '@react-aria/overlays';
 import { mergeProps } from '@react-aria/utils';
 import { useDatePickerState } from '@react-stately/datepicker';
+import { omit } from 'lodash/object';
 import PropTypes from 'prop-types';
 import { Calendar, FieldHelperText, PopoverContainer } from '../../index';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { isDateWithinRanges } from '../../utils/devUtils/props/isDateWithinRanges';
 import DateField from './DateField';
@@ -96,11 +98,11 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     contain: true,
     restoreFocus: true
   }, ___EmotionJSX(Calendar, calendarProps)));
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DateField, _extends({}, props, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DateField, _extends({}, getPendoID('DatePicker'), props, {
     ref: ref,
     buttonProps: buttonProps,
     fieldProps: fieldProps,
-    groupProps: groupProps,
+    groupProps: omit(groupProps, 'data-pendo-id'),
     groupRef: groupRef,
     helperText: helperText,
     labelProps: labelProps,

package/lib/components/FileInputField/FileInputField.js

@@ -27,6 +27,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Box, FieldHelperText, Input, Label, Loader } from '../..';
 import useField from '../../hooks/useField';
 import useStatusClasses from '../../hooks/useStatusClasses';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
@@ -34,6 +35,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import FileItem from './FileItem';
 import FileSelect from './FileSelect';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'FileInputField';
 var FILE_CHANGE_STATUS = {
   ADDED: 'added',
   DELETED: 'deleted'
@@ -194,7 +196,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     fieldContainerProps: fieldContainerProps
   }, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.fileInputField.wrapper"
-  }, mergeProps(fieldControlWrapperProps, nonAriaProps), {
+  }, getPendoID(displayName), mergeProps(fieldControlWrapperProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
@@ -227,7 +229,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     role: "status"
   }, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX("h1", null, fileChangeMessage))));
 });
-FileInputField.displayName = 'FileInputField';
+FileInputField.displayName = displayName;
 FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,

package/lib/components/IconButton/IconButton.js

@@ -18,8 +18,10 @@ import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'IconButton';
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -86,7 +88,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   useAriaLabelWarning('IconButton', ariaLabel);
   var button = ___EmotionJSX(Pressable, _extends({
     ref: buttonRef
-  }, mergeProps(buttonProps, others, hoverProps, focusProps)), ___EmotionJSX(ThemeUIIconButton, {
+  }, getPendoID(displayName), mergeProps(buttonProps, others, hoverProps, focusProps)), ___EmotionJSX(ThemeUIIconButton, {
     tabIndex: 0,
     className: classNames,
     "aria-label": ariaLabel,
@@ -109,5 +111,5 @@ IconButton.defaultProps = {
   variant: 'base',
   isDisabled: false
 };
-IconButton.displayName = 'IconButton';
+IconButton.displayName = displayName;
 export default IconButton;

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -16,12 +16,14 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Item, Menu } from '../..';
 import { useImageUploadState } from '../../hooks/useImageUploadState';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import ImagePreviewButton from './ImagePreviewButton';
 import ImageUploadFieldBase from './ImageUploadFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'ImageUploadField';
 var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
   var isLoading = props.isLoading,
     loaderSize = props.loaderSize,
@@ -62,7 +64,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     isMenuOpen: state.isMenuOpen,
     ref: inputRef,
     widthHeightSx: state.widthHeightSx
-  }, props), ___EmotionJSX(ImagePreviewButton, {
+  }, getPendoID(displayName), props), ___EmotionJSX(ImagePreviewButton, {
     defaultPreviewImage: state.defaultPreviewImage,
     defaultPreviewNode: state.defaultPreviewNode,
     isImageType: state.isImageType,
@@ -135,5 +137,5 @@ ImageUploadField.defaultProps = {
   uploadItemText: 'Upload New Image',
   removeItemText: 'Remove Image'
 };
-ImageUploadField.displayName = 'ImageUploadField';
+ImageUploadField.displayName = displayName;
 export default ImageUploadField;

package/lib/components/Input/Input.js

@@ -5,7 +5,7 @@ var _excluded = ["name", "placeholder", "maxLength"];
 import React, { forwardRef } from 'react';
 import { flexbox, layout, typography } from 'styled-system';
 import { Input as ThemeUIInput } from 'theme-ui';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 /**
  * Base input component.
  *
@@ -16,13 +16,14 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  * We instead encourage developers to utilize our Field components wherever possible.
  * If this component is used, accessibility is left to the developer.
  */
-
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'Input';
 var ExtendedInput = /*#__PURE__*/_styled(ThemeUIInput, process.env.NODE_ENV === "production" ? {
   target: "e1lpwkt50"
 } : {
   target: "e1lpwkt50",
   label: "ExtendedInput"
-})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG4vKipcbiAqIEJhc2UgaW5wdXQgY29tcG9uZW50LlxuICpcbiAqIEFjY2VwdHMgcmVsZXZhbnQgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiBbSW5wdXQgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9pbnB1dC8pLlxuICpcbiAqICoqTm90ZSoqOiBUaGlzIGNvbXBvbmVudCBkb2VzIG5vdCBzdXBwbHkgYWxsIG9mIHRoZSBhY2Nlc3NpYmlsaXR5IGFzc2lzdGFuY2Ugb24gaXRzIG93bi5cbiAqIFdlIGluc3RlYWQgZW5jb3VyYWdlIGRldmVsb3BlcnMgdG8gdXRpbGl6ZSBvdXIgRmllbGQgY29tcG9uZW50cyB3aGVyZXZlciBwb3NzaWJsZS5cbiAqIElmIHRoaXMgY29tcG9uZW50IGlzIHVzZWQsIGFjY2Vzc2liaWxpdHkgaXMgbGVmdCB0byB0aGUgZGV2ZWxvcGVyLlxuICovXG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSAnSW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBJbnB1dDtcbiJdfQ== */");
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQnNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRQZW5kb0lEIH0gZnJvbSAnLi4vLi4vdXRpbHMvZGV2VXRpbHMvY29uc3RhbnRzL3BlbmRvSUQnO1xuLyoqXG4gKiBCYXNlIGlucHV0IGNvbXBvbmVudC5cbiAqXG4gKiBBY2NlcHRzIHJlbGV2YW50IHN0eWxpbmcgcHJvcHMgZnJvbSBbc3R5bGVkLXN5c3RlbV0oaHR0cHM6Ly9zdHlsZWQtc3lzdGVtLmNvbS90YWJsZSkuXG4gKiBCdWlsdCBvbiB0b3Agb2YgW0lucHV0IGZyb20gVGhlbWUtVUldKGh0dHBzOi8vdGhlbWUtdWkuY29tL2NvbXBvbmVudHMvaW5wdXQvKS5cbiAqXG4gKiAqKk5vdGUqKjogVGhpcyBjb21wb25lbnQgZG9lcyBub3Qgc3VwcGx5IGFsbCBvZiB0aGUgYWNjZXNzaWJpbGl0eSBhc3Npc3RhbmNlIG9uIGl0cyBvd24uXG4gKiBXZSBpbnN0ZWFkIGVuY291cmFnZSBkZXZlbG9wZXJzIHRvIHV0aWxpemUgb3VyIEZpZWxkIGNvbXBvbmVudHMgd2hlcmV2ZXIgcG9zc2libGUuXG4gKiBJZiB0aGlzIGNvbXBvbmVudCBpcyB1c2VkLCBhY2Nlc3NpYmlsaXR5IGlzIGxlZnQgdG8gdGhlIGRldmVsb3Blci5cbiAqL1xuXG5jb25zdCBkaXNwbGF5TmFtZSA9ICdJbnB1dCc7XG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4uZ2V0UGVuZG9JRChkaXNwbGF5TmFtZSl9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSBkaXNwbGF5TmFtZTtcblxuZXhwb3J0IGRlZmF1bHQgSW5wdXQ7XG4iXX0= */");
 var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   var name = props.name,
     placeholder = props.placeholder,
@@ -33,7 +34,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     name: name,
     placeholder: placeholder,
     maxLength: maxLength && maxLength
-  }, others));
+  }, getPendoID(displayName), others));
 });
-Input.displayName = 'Input';
+Input.displayName = displayName;
 export default Input;

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -18,12 +18,14 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
 import { usePropWarning, useSelectField } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import SelectFieldBase from '../SelectFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'LinkSelectField';
 var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
     isDisabled = props.isDisabled,
@@ -52,7 +54,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: triggerRef,
     variant: "link",
     tabIndex: isDisabled ? -1 : 0
-  }, triggerProps, ariaProps, {
+  }, getPendoID(displayName), triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
     variant: "label",
@@ -149,5 +151,5 @@ LinkSelectField.defaultProps = _objectSpread({
   align: 'start',
   direction: 'bottom'
 }, statusDefaultProp);
-LinkSelectField.displayName = 'LinkSelectField';
+LinkSelectField.displayName = displayName;
 export default LinkSelectField;

package/lib/components/ListViewItem/ListViewItem.js

@@ -6,9 +6,11 @@ import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { Box, Icon, Image, Text } from '../..';
 import { useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { listViewItemPropTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var LIST_ITEM_ICON = '-list-item-icon';
+var displayName = 'ListViewItem';
 var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _context;
   var children = _ref.children,
@@ -75,7 +77,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: classNames,
     ref: ref,
     variant: "listViewItem.styledContainer"
-  }, hoverProps, others), ___EmotionJSX(Box, {
+  }, hoverProps, getPendoID(displayName), others), ___EmotionJSX(Box, {
     isRow: true,
     variant: getWrapperVariant()
   }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
@@ -88,5 +90,5 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, children)));
 });
 ListViewItem.propTypes = listViewItemPropTypes;
-ListViewItem.displayName = 'ListViewItem';
+ListViewItem.displayName = displayName;
 export default ListViewItem;

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -32,8 +32,9 @@ import PropTypes from 'prop-types';
 import { Badge, Box, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
 import { usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import ListBox from '../ListBox';
@@ -70,8 +71,6 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     scrollBoxProps = props.scrollBoxProps,
     status = props.status,
     others = _objectWithoutProperties(props, _excluded);
-  var _getAriaAttributeProp = getAriaAttributeProps(others),
-    ariaProps = _getAriaAttributeProp.ariaProps;
   var hasCustomValue = mode === 'non-restrictive';
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useState = useState([]),
@@ -487,7 +486,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, ariaProps, inputProps)), ___EmotionJSX(PopoverContainer, {
+  }, getPendoID('MultivaluesField'), others, inputProps)), ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
     isNonModal: true,
     isOpen: !state.collection.size ? false : isOpen,

package/lib/components/NumberField/NumberField.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -99,7 +100,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   // extract numeric value in case input value use units like '4 inches' or 'USD 45.00'
   // aria-valuenow accept only number value type
   var inputPropsNumericValue = typeof inputPropsValue === 'string' ? inputPropsValue.match(/[-]{0,1}[\d]*[.]{0,1}[\d]+/g)[0] : inputPropsValue;
-  return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID('NumberField'), fieldContainerProps), ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.arrowsWrapper"

package/lib/components/PasswordField/PasswordField.js

@@ -26,11 +26,13 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import PropTypes from 'prop-types';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../..';
 import { useDebounce, useField, useProgressiveState, usePropWarning, useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'PasswordField';
 var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
   HIDE: 'hide password',
   SHOW: 'show password'
@@ -153,7 +155,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+  }, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldControlWrapper",
     isRow: true
   }, fieldControlWrapperProps, {
@@ -282,5 +284,5 @@ PasswordField.defaultProps = _objectSpread({
   requirements: [],
   type: 'password'
 }, statusDefaultProp);
-PasswordField.displayName = 'PasswordField';
+PasswordField.displayName = displayName;
 export default PasswordField;

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -18,11 +18,13 @@ import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label } from '../..';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { RadioContext } from '../RadioField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'RadioGroupField';
 var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -51,7 +53,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classNames
-  }, unhandledAriaProps, radioGroupProps), ___EmotionJSX(Label, _extends({
+  }, getPendoID(displayName), unhandledAriaProps, radioGroupProps), ___EmotionJSX(Label, _extends({
     isDisabled: isDisabled,
     hintText: hintText,
     isRequired: isRequired,
@@ -102,5 +104,5 @@ RadioGroupField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string
 }, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-RadioGroupField.displayName = 'RadioGroupField';
+RadioGroupField.displayName = displayName;
 export default RadioGroupField;

package/lib/components/SearchField/SearchField.js

@@ -18,9 +18,11 @@ import SearchIcon from '@pingux/mdi-react/SearchIcon';
 import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'SearchField';
 var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var autocomplete = props.autocomplete,
     hasAutoFocus = props.hasAutoFocus,
@@ -60,7 +62,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
       state.setValue('');
     }
   };
-  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.search.wrapper"
   }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
     variant: "forms.input.search",
@@ -257,5 +259,5 @@ SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: SearchIcon
 };
-SearchField.displayName = 'SearchField';
+SearchField.displayName = displayName;
 export default SearchField;

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -19,6 +19,7 @@ import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { modes } from '../../utils/devUtils/constants/labelModes';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
@@ -96,7 +97,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps, {
+  }, getPendoID('SelectField'), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), ___EmotionJSX(Label, fieldLabelProps, label), ___EmotionJSX(HiddenSelect, {
     state: state,

package/lib/components/SwitchField/SwitchField.js

@@ -20,9 +20,11 @@ import { usePress } from '@react-aria/interactions';
 import omit from 'lodash/omit';
 import { Box, FieldHelperText, Label, Switch } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { statusDefaultProp } from '../../utils/docUtils/statusProp';
 import { switchFieldPropTypes } from './switchFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
     helperText = props.helperText,
@@ -84,16 +86,16 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     'aria-controls': others['aria-controls'],
     'aria-errormessage': others['aria-errormessage']
   };
-  return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, _extends({
     variant: "forms.switch.label"
   }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, others))), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, unhandledAriaProps, omit(others, 'data-pendo-id')))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
 SwitchField.propTypes = switchFieldPropTypes;
 SwitchField.defaultProps = _objectSpread({}, statusDefaultProp);
-SwitchField.displayName = 'SwitchField';
+SwitchField.displayName = displayName;
 export default SwitchField;

package/lib/components/Tab/Tab.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { Box, Text, Tooltip, TooltipTrigger } from '../..';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import TabPicker from '../TabPicker';
 import { TabsContext } from '../Tabs';
 
@@ -71,7 +72,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "tab"
-  }, mergeProps(focusProps, hoverProps, tabProps), otherItemProps, {
+  }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), otherItemProps, {
     ref: tabRef,
     title: titleAttr || undefined
   }), icon, ___EmotionJSX(Text, _extends({

package/lib/components/TextAreaField/TextAreaField.js

@@ -16,10 +16,12 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label, TextArea } from '../..';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'TextAreaField';
 var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
     isUnresizable = props.isUnresizable,
@@ -101,7 +103,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, labelNode);
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps, {
+  }, getPendoID(displayName), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
@@ -203,5 +205,5 @@ TextAreaField.defaultProps = _objectSpread({
   isUnresizable: false,
   rows: 4
 }, statusDefaultProp);
-TextAreaField.displayName = 'TextAreaField';
+TextAreaField.displayName = displayName;
 export default TextAreaField;

package/lib/components/TextField/TextField.js

@@ -16,10 +16,12 @@ import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Input, Label } from '../..';
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
 import useColumnStyles from '../../hooks/useColumnStyles';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'TextField';
 var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
     helpHintProps = props.helpHintProps,
@@ -48,7 +50,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = uuid();
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps, {
+  }, getPendoID(displayName), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
     ref: labelRef,
@@ -140,5 +142,5 @@ TextField.defaultProps = _objectSpread({
   isReadOnly: false,
   isRequired: false
 }, statusDefaultProp);
-TextField.displayName = 'TextField';
+TextField.displayName = displayName;
 export default TextField;