@pingux/astro 2.54.0-alpha.4 → 2.55.0-alpha.0

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -27,6 +27,7 @@ var _reactAria = require("react-aria");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -131,7 +132,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, nonAriaProps, {
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('ArrayField'), nonAriaProps, {
     ref: ref
   }), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, raLabelProps, (0, _reactAria.mergeProps)(labelProps, raLabelProps, {
     children: label

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -39,7 +39,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var breadcrumbsRef = (0, _hooks.useLocalOrForwardRef)(ref);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var createBreadcrumb = (0, _react.useCallback)(function (child, idx) {
-    var isCurrentItem = idx && (0, _isArray["default"])(children) && (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
+    var isCurrentItem = (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === _react["default"].Children.toArray(children).length - 1 : true;
     return (0, _react2.jsx)(_react["default"].Fragment, {
       key: "li-".concat(child.key)
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.test.js

@@ -54,11 +54,10 @@ test('should render nodes from the children', function () {
 test('should render correct amount of icons', function () {
   getComponent({
     iconProps: {
-      'data-testid': testIconId,
-      icon: _ChevronRightIcon["default"]
+      'data-testid': testIconId
     }
   });
-  expect(_testWrapper.screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 2);
+  expect(_testWrapper.screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 1);
 });
 test('breadcrumbItem should render breadcrumbItem as a Text component when appropriate elementType passed', function () {
   getComponent({}, {

package/lib/cjs/components/Button/Button.js

@@ -23,6 +23,7 @@ var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "isDisabled", "isLoading", "onBlur", "onFocus", "onHoverChange", "onHoverEnd", "onHoverStart", "onKeyDown", "onKeyUp", "onPress", "onPressChange", "onPressEnd", "onPressStart", "onPressUp", "tabIndex", "variant"];
@@ -30,6 +31,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 = 'Button';
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -102,7 +104,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       alignItems: 'center'
     } : {},
     variant: variant
-  }, others, (0, _reactAria.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, (0, _pendoID.getPendoID)(displayName), others, (0, _reactAria.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
   }), hoverProps, focusProps)), isLoading ? (0, _react2.jsx)("span", {
     style: {
@@ -119,6 +121,6 @@ Button.defaultProps = {
   isDisabled: false,
   variant: 'default'
 };
-Button.displayName = 'Button';
+Button.displayName = displayName;
 var _default = Button;
 exports["default"] = _default;

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/HelpHint/HelpHint.stories.js

@@ -34,13 +34,13 @@ var _default = {
     }
   },
   args: {
-    children: 'Text of the popover right here...'
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
   }
 };
 exports["default"] = _default;
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Box, {
-    p: 50
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, args));
 };
 exports.Default = Default;
@@ -52,7 +52,7 @@ Default.parameters = {
 };
 var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
   return (0, _react2.jsx)(_index.Box, {
-    p: 50
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, {
     popoverProps: {
       'data-testid': 'popover-container'
@@ -61,15 +61,15 @@ var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
       'aria-label': 'Help hint'
     },
     direction: "bottom"
-  }, "Text of the popover right here..."));
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
 };
 exports.WithPopoverAndIconButtonProps = WithPopoverAndIconButtonProps;
 var ContentWithLink = function ContentWithLink() {
   return (0, _react2.jsx)(_index.Box, {
-    p: 70
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, null, (0, _react2.jsx)(_index.Text, {
     variant: "popover"
-  }, "Text of the popover right here... "), (0, _react2.jsx)(_index.Link, {
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"), (0, _react2.jsx)(_index.Link, {
     variant: "popover",
     href: "https://uilibrary.ping-eng.com/",
     target: "_blank"
@@ -84,7 +84,7 @@ ContentWithLink.parameters = {
 };
 var WithDelay = function WithDelay(args) {
   return (0, _react2.jsx)(_index.Box, {
-    p: 50
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, (0, _extends2["default"])({}, args, {
     closeDelay: 5000
   })));

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/IconButton/IconButton.styles.d.ts

@@ -277,7 +277,78 @@ declare const _default: {
         height: string;
         outline: string;
     };
-    messageCloseButton: any;
+    messageCloseButton: {
+        p: number;
+        ml: string;
+        outline: string;
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            boxShadow: string;
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-success': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        '&.is-warning': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        '&.is-error': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        width: string;
+        height: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
     modalCloseButton: {
         position: string;
         top: number;

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/Messages/Message.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MessageProps } from '../../types';
+export declare const ARIA_STATUSES: {
+    SUCCESS: string;
+    ERROR: string;
+    WARNING: string;
+};
+declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+export default Message;