@pingux/astro 2.53.1 → 2.54.0-alpha.0

package/lib/cjs/components/Calendar/CalendarGrid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CalendarGridProps } from '../../types/calendar';
+/**
+ * The calendar body component with column header and calendar cells.
+ * Utilizes useCalendarGrid to return props for an individual grid of dates in a month
+ * along with formatted weekday names based on the current locale.
+ */
+declare const CalendarGrid: (props: CalendarGridProps) => React.JSX.Element;
+export default CalendarGrid;

package/lib/cjs/components/Calendar/CalendarGrid.js

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
@@ -14,7 +15,6 @@ var _react = _interopRequireDefault(require("react"));
 var _date = require("@internationalized/date");
 var _calendar = require("@react-aria/calendar");
 var _i18n = require("@react-aria/i18n");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
 var _CalendarCell = _interopRequireDefault(require("./CalendarCell"));
 var _react2 = require("@emotion/react");
@@ -39,7 +39,9 @@ var _react2 = require("@emotion/react");
     var _context;
     return (0, _concat["default"])(_context = "".concat(day, "-")).call(_context, index);
   };
-  return (0, _react2.jsx)(_index.Table, gridProps, (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(_context2 = customWeekDays || weekDays).call(_context2, function (day, index) {
+  return (0, _react2.jsx)(_index.Table, (0, _extends2["default"])({}, gridProps, {
+    role: "grid"
+  }), (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(_context2 = customWeekDays || weekDays).call(_context2, function (day, index) {
     return (0, _react2.jsx)(_index.TableCell, {
       variant: "calendar.columnHeader",
       key: getKey(day, index),
@@ -52,24 +54,13 @@ var _react2 = require("@emotion/react");
     return (0, _react2.jsx)(_index.TableRow, {
       key: weekIndex
     }, (0, _map["default"])(_context5 = getDatesInWeek(weekIndex)).call(_context5, function (date) {
-      return date.day && (0, _react2.jsx)(_CalendarCell["default"], {
-        key: date,
+      return (date === null || date === void 0 ? void 0 : date.day) && (0, _react2.jsx)(_CalendarCell["default"], {
+        key: date.toString(),
         state: state,
         date: date
       });
     }));
   })));
 };
-CalendarGrid.propTypes = {
-  /** State object that is passed in from the  useCalendar hook */
-  state: _propTypes["default"].shape({
-    visibleRange: _propTypes["default"].shape({
-      start: _propTypes["default"].shape({})
-    }),
-    getDatesInWeek: _propTypes["default"].func
-  }),
-  /** Custom week days for other international calendars */
-  customWeekDays: _propTypes["default"].arrayOf(_propTypes["default"].string)
-};
 var _default = CalendarGrid;
 exports["default"] = _default;

package/lib/cjs/components/Calendar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Calendar';

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -25,6 +25,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -33,6 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'CheckboxField';
 var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var label = props.label,
     _props$controlProps = props.controlProps,
@@ -79,7 +81,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
-  return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
     ref: checkboxRef,
@@ -135,6 +137,6 @@ CheckboxField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** Handler that is called when a key is released. */
   onKeyUp: _propTypes["default"].func
 }, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-CheckboxField.displayName = 'CheckboxField';
+CheckboxField.displayName = displayName;
 var _default = CheckboxField;
 exports["default"] = _default;

package/lib/cjs/components/ColorField/ColorField.js

@@ -27,6 +27,7 @@ var _color2 = require("@react-stately/color");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -36,6 +37,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'ColorField';
 var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
   var align = props.align,
@@ -102,7 +104,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var colorValue = _ref.colorValue;
     return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_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 (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
@@ -155,6 +157,6 @@ ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'
 };
-ColorField.displayName = 'ColorField';
+ColorField.displayName = displayName;
 var _default = ColorField;
 exports["default"] = _default;

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -30,6 +30,7 @@ var _utils = require("@react-aria/utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -44,6 +45,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'ComboBoxField';
 var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var hasAutoFocus = props.hasAutoFocus,
     hasAddOption = props.hasAddOption,
@@ -209,7 +211,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, otherListBoxProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   })));
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBox["default"], (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBox["default"], (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), props, {
     isOpen: state.isOpen,
     inputProps: inputProps,
     labelProps: labelProps,
@@ -348,6 +350,6 @@ ComboBoxField.defaultProps = {
   },
   defaultItems: []
 };
-ComboBoxField.displayName = 'ComboBoxField';
+ComboBoxField.displayName = displayName;
 var _default = ComboBoxField;
 exports["default"] = _default;

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -25,8 +25,10 @@ var _focus = require("@react-aria/focus");
 var _overlays = require("@react-aria/overlays");
 var _utils = require("@react-aria/utils");
 var _datepicker2 = require("@react-stately/datepicker");
+var _object = require("lodash/object");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _isDateWithinRanges = require("../../utils/devUtils/props/isDateWithinRanges");
 var _DateField = _interopRequireDefault(require("./DateField"));
@@ -105,11 +107,11 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     contain: true,
     restoreFocus: true
   }, (0, _react2.jsx)(_index.Calendar, calendarProps)));
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DateField["default"], (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DateField["default"], (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('DatePicker'), props, {
     ref: ref,
     buttonProps: buttonProps,
     fieldProps: fieldProps,
-    groupProps: groupProps,
+    groupProps: (0, _object.omit)(groupProps, 'data-pendo-id'),
     groupRef: groupRef,
     helperText: helperText,
     labelProps: labelProps,

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -34,6 +34,7 @@ var _uuid = require("uuid");
 var _ = require("../..");
 var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
 var _useStatusClasses3 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
@@ -46,6 +47,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'FileInputField';
 var FILE_CHANGE_STATUS = {
   ADDED: 'added',
   DELETED: 'deleted'
@@ -206,7 +208,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     fieldContainerProps: fieldContainerProps
   }, (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.fileInputField.wrapper"
-  }, (0, _reactAria.mergeProps)(fieldControlWrapperProps, nonAriaProps), {
+  }, (0, _pendoID.getPendoID)(displayName), (0, _reactAria.mergeProps)(fieldControlWrapperProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
@@ -239,7 +241,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     role: "status"
   }, (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)("h1", null, fileChangeMessage))));
 });
-FileInputField.displayName = 'FileInputField';
+FileInputField.displayName = displayName;
 FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,

package/lib/cjs/components/IconButton/IconButton.js

@@ -24,6 +24,7 @@ var _interactions = require("@react-aria/interactions");
 var _themeUi = require("theme-ui");
 var _BadgeContext = require("../../context/BadgeContext");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "title", "variant", "onBlur", "onFocus", "onHoverChange", "onHoverEnd", "onHoverStart", "onKeyDown", "onKeyUp", "onPress", "onPressEnd", "onPressStart", "onPressChange", "onPressUp", "isDisabled"];
@@ -31,6 +32,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'IconButton';
 var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -97,7 +99,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _hooks.useAriaLabelWarning)('IconButton', ariaLabel);
   var button = (0, _react2.jsx)(_interactions.Pressable, (0, _extends2["default"])({
     ref: buttonRef
-  }, (0, _reactAria.mergeProps)(buttonProps, others, hoverProps, focusProps)), (0, _react2.jsx)(_themeUi.IconButton, {
+  }, (0, _pendoID.getPendoID)(displayName), (0, _reactAria.mergeProps)(buttonProps, others, hoverProps, focusProps)), (0, _react2.jsx)(_themeUi.IconButton, {
     tabIndex: 0,
     className: classNames,
     "aria-label": ariaLabel,
@@ -120,6 +122,6 @@ IconButton.defaultProps = {
   variant: 'base',
   isDisabled: false
 };
-IconButton.displayName = 'IconButton';
+IconButton.displayName = displayName;
 var _default = IconButton;
 exports["default"] = _default;

package/lib/cjs/components/ImageUploadField/ImageUploadField.js

@@ -23,6 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _useImageUploadState = require("../../hooks/useImageUploadState");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -33,6 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'ImageUploadField';
 var ImageUploadField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isLoading = props.isLoading,
     loaderSize = props.loaderSize,
@@ -73,7 +75,7 @@ var ImageUploadField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isMenuOpen: state.isMenuOpen,
     ref: inputRef,
     widthHeightSx: state.widthHeightSx
-  }, props), (0, _react2.jsx)(_ImagePreviewButton["default"], {
+  }, (0, _pendoID.getPendoID)(displayName), props), (0, _react2.jsx)(_ImagePreviewButton["default"], {
     defaultPreviewImage: state.defaultPreviewImage,
     defaultPreviewNode: state.defaultPreviewNode,
     isImageType: state.isImageType,
@@ -146,6 +148,6 @@ ImageUploadField.defaultProps = {
   uploadItemText: 'Upload New Image',
   removeItemText: 'Remove Image'
 };
-ImageUploadField.displayName = 'ImageUploadField';
+ImageUploadField.displayName = displayName;
 var _default = ImageUploadField;
 exports["default"] = _default;

package/lib/cjs/components/Input/Input.js

@@ -15,10 +15,9 @@ var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledSystem = require("styled-system");
 var _themeUi = require("theme-ui");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _react2 = require("@emotion/react");
 var _excluded = ["name", "placeholder", "maxLength"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * Base input component.
  *
@@ -29,13 +28,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * We instead encourage developers to utilize our Field components wherever possible.
  * If this component is used, accessibility is left to the developer.
  */
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var displayName = 'Input';
 var ExtendedInput = /*#__PURE__*/(0, _base["default"])(_themeUi.Input, process.env.NODE_ENV === "production" ? {
   target: "e1lpwkt50"
 } : {
   target: "e1lpwkt50",
   label: "ExtendedInput"
-})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnNCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG4vKipcbiAqIEJhc2UgaW5wdXQgY29tcG9uZW50LlxuICpcbiAqIEFjY2VwdHMgcmVsZXZhbnQgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiBbSW5wdXQgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9pbnB1dC8pLlxuICpcbiAqICoqTm90ZSoqOiBUaGlzIGNvbXBvbmVudCBkb2VzIG5vdCBzdXBwbHkgYWxsIG9mIHRoZSBhY2Nlc3NpYmlsaXR5IGFzc2lzdGFuY2Ugb24gaXRzIG93bi5cbiAqIFdlIGluc3RlYWQgZW5jb3VyYWdlIGRldmVsb3BlcnMgdG8gdXRpbGl6ZSBvdXIgRmllbGQgY29tcG9uZW50cyB3aGVyZXZlciBwb3NzaWJsZS5cbiAqIElmIHRoaXMgY29tcG9uZW50IGlzIHVzZWQsIGFjY2Vzc2liaWxpdHkgaXMgbGVmdCB0byB0aGUgZGV2ZWxvcGVyLlxuICovXG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSAnSW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBJbnB1dDtcbiJdfQ== */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQnNCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRQZW5kb0lEIH0gZnJvbSAnLi4vLi4vdXRpbHMvZGV2VXRpbHMvY29uc3RhbnRzL3BlbmRvSUQnO1xuLyoqXG4gKiBCYXNlIGlucHV0IGNvbXBvbmVudC5cbiAqXG4gKiBBY2NlcHRzIHJlbGV2YW50IHN0eWxpbmcgcHJvcHMgZnJvbSBbc3R5bGVkLXN5c3RlbV0oaHR0cHM6Ly9zdHlsZWQtc3lzdGVtLmNvbS90YWJsZSkuXG4gKiBCdWlsdCBvbiB0b3Agb2YgW0lucHV0IGZyb20gVGhlbWUtVUldKGh0dHBzOi8vdGhlbWUtdWkuY29tL2NvbXBvbmVudHMvaW5wdXQvKS5cbiAqXG4gKiAqKk5vdGUqKjogVGhpcyBjb21wb25lbnQgZG9lcyBub3Qgc3VwcGx5IGFsbCBvZiB0aGUgYWNjZXNzaWJpbGl0eSBhc3Npc3RhbmNlIG9uIGl0cyBvd24uXG4gKiBXZSBpbnN0ZWFkIGVuY291cmFnZSBkZXZlbG9wZXJzIHRvIHV0aWxpemUgb3VyIEZpZWxkIGNvbXBvbmVudHMgd2hlcmV2ZXIgcG9zc2libGUuXG4gKiBJZiB0aGlzIGNvbXBvbmVudCBpcyB1c2VkLCBhY2Nlc3NpYmlsaXR5IGlzIGxlZnQgdG8gdGhlIGRldmVsb3Blci5cbiAqL1xuXG5jb25zdCBkaXNwbGF5TmFtZSA9ICdJbnB1dCc7XG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4uZ2V0UGVuZG9JRChkaXNwbGF5TmFtZSl9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSBkaXNwbGF5TmFtZTtcblxuZXhwb3J0IGRlZmF1bHQgSW5wdXQ7XG4iXX0= */");
 var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var name = props.name,
     placeholder = props.placeholder,
@@ -46,8 +47,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     name: name,
     placeholder: placeholder,
     maxLength: maxLength && maxLength
-  }, others));
+  }, (0, _pendoID.getPendoID)(displayName), others));
 });
-Input.displayName = 'Input';
+Input.displayName = displayName;
 var _default = Input;
 exports["default"] = _default;

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -25,6 +25,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
@@ -35,6 +36,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'LinkSelectField';
 var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var placeholder = props.placeholder,
     isDisabled = props.isDisabled,
@@ -63,7 +65,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     ref: triggerRef,
     variant: "link",
     tabIndex: isDisabled ? -1 : 0
-  }, triggerProps, ariaProps, {
+  }, (0, _pendoID.getPendoID)(displayName), triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), (0, _react2.jsx)(_.Text, {
     variant: "label",
@@ -160,6 +162,6 @@ LinkSelectField.defaultProps = _objectSpread({
   align: 'start',
   direction: 'bottom'
 }, _statusProp.statusDefaultProp);
-LinkSelectField.displayName = 'LinkSelectField';
+LinkSelectField.displayName = displayName;
 var _default = LinkSelectField;
 exports["default"] = _default;

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -16,6 +16,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _listViewItemAttributes = require("./listViewItemAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
@@ -23,6 +24,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var LIST_ITEM_ICON = '-list-item-icon';
 exports.LIST_ITEM_ICON = LIST_ITEM_ICON;
+var displayName = 'ListViewItem';
 var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _context;
   var children = _ref.children,
@@ -89,7 +91,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: classNames,
     ref: ref,
     variant: "listViewItem.styledContainer"
-  }, hoverProps, others), (0, _react2.jsx)(_.Box, {
+  }, hoverProps, (0, _pendoID.getPendoID)(displayName), others), (0, _react2.jsx)(_.Box, {
     isRow: true,
     variant: getWrapperVariant()
   }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && (0, _react2.jsx)(_.Box, {
@@ -102,6 +104,6 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, children)));
 });
 ListViewItem.propTypes = _listViewItemAttributes.listViewItemPropTypes;
-ListViewItem.displayName = 'ListViewItem';
+ListViewItem.displayName = displayName;
 var _default = ListViewItem;
 exports["default"] = _default;

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -39,6 +39,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _MultivaluesContext = require("../../context/MultivaluesContext");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
@@ -82,8 +83,6 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     scrollBoxProps = props.scrollBoxProps,
     status = props.status,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
-    ariaProps = _getAriaAttributeProp.ariaProps;
   var hasCustomValue = mode === 'non-restrictive';
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var _useState = (0, _react.useState)([]),
@@ -499,7 +498,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, ariaProps, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
+  }, (0, _pendoID.getPendoID)('MultivaluesField'), others, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
     hasNoArrow: true,
     isNonModal: true,
     isOpen: !state.collection.size ? false : isOpen,

package/lib/cjs/components/NumberField/NumberField.js

@@ -28,6 +28,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -110,7 +111,7 @@ var NumberField = /*#__PURE__*/(0, _react.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 (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, updatedLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('NumberField'), fieldContainerProps), (0, _react2.jsx)(_.Label, updatedLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.numberField.arrowsWrapper"

package/lib/cjs/components/PasswordField/PasswordField.js

@@ -33,6 +33,7 @@ var _visuallyHidden = require("@react-aria/visually-hidden");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
@@ -43,6 +44,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'PasswordField';
 var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
   HIDE: 'hide password',
   SHOW: 'show password'
@@ -165,7 +167,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  }, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.input.fieldControlWrapper",
     isRow: true
   }, fieldControlWrapperProps, {
@@ -294,6 +296,6 @@ PasswordField.defaultProps = _objectSpread({
   requirements: [],
   type: 'password'
 }, _statusProp.statusDefaultProp);
-PasswordField.displayName = 'PasswordField';
+PasswordField.displayName = displayName;
 var _default = PasswordField;
 exports["default"] = _default;

package/lib/cjs/components/RadioGroupField/RadioGroupField.js

@@ -25,6 +25,7 @@ var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -34,6 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'RadioGroupField';
 var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -62,7 +64,7 @@ var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
     className: classNames
-  }, unhandledAriaProps, radioGroupProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+  }, (0, _pendoID.getPendoID)(displayName), unhandledAriaProps, radioGroupProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     isDisabled: isDisabled,
     hintText: hintText,
     isRequired: isRequired,
@@ -113,6 +115,6 @@ 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["default"].string
 }, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-RadioGroupField.displayName = 'RadioGroupField';
+RadioGroupField.displayName = displayName;
 var _default = RadioGroupField;
 exports["default"] = _default;

package/lib/cjs/components/SearchField/SearchField.js

@@ -25,6 +25,7 @@ var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon")
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _react2 = require("@emotion/react");
@@ -32,6 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var displayName = 'SearchField';
 var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var autocomplete = props.autocomplete,
     hasAutoFocus = props.hasAutoFocus,
@@ -71,7 +73,7 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       state.setValue('');
     }
   };
-  return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.search.wrapper"
   }, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     variant: "forms.input.search",
@@ -268,6 +270,6 @@ SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: _SearchIcon["default"]
 };
-SearchField.displayName = 'SearchField';
+SearchField.displayName = displayName;
 var _default = SearchField;
 exports["default"] = _default;

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -25,6 +25,7 @@ var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIc
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _Box = _interopRequireDefault(require("../Box"));
@@ -106,7 +107,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps, {
+  }, (0, _pendoID.getPendoID)('SelectField'), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), (0, _react2.jsx)(_Label["default"], fieldLabelProps, label), (0, _react2.jsx)(_reactAria.HiddenSelect, {
     state: state,