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

package/lib/components/ArrayField/ArrayField.js

@@ -21,6 +21,7 @@ import { mergeProps, useLabel } from 'react-aria';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, FieldHelperText, Label, Text } from '../..';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
@@ -119,7 +120,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  return ___EmotionJSX(Box, _extends({}, nonAriaProps, {
+  return ___EmotionJSX(Box, _extends({}, getPendoID('ArrayField'), nonAriaProps, {
     ref: ref
   }), ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
     children: label

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -26,7 +26,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
   var breadcrumbsRef = useLocalOrForwardRef(ref);
   usePropWarning(props, 'disabled', 'isDisabled');
   var createBreadcrumb = useCallback(function (child, idx) {
-    var isCurrentItem = idx && _Array$isArray(children) && _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
+    var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === React.Children.toArray(children).length - 1 : true;
     return ___EmotionJSX(React.Fragment, {
       key: "li-".concat(child.key)
     }, ___EmotionJSX(BreadcrumbItem, _extends({

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

@@ -51,11 +51,10 @@ test('should render nodes from the children', function () {
 test('should render correct amount of icons', function () {
   getComponent({
     iconProps: {
-      'data-testid': testIconId,
-      icon: ChevronRightIcon
+      'data-testid': testIconId
     }
   });
-  expect(screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 2);
+  expect(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/components/Button/Button.js

@@ -17,8 +17,10 @@ import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import { Button as ThemeUIButton } from 'theme-ui';
 import { useAriaLabelWarning, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'Button';
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -91,7 +93,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       alignItems: 'center'
     } : {},
     variant: variant
-  }, others, mergeProps(_objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, getPendoID(displayName), others, mergeProps(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
   }), hoverProps, focusProps)), isLoading ? ___EmotionJSX("span", {
     style: {
@@ -108,5 +110,5 @@ Button.defaultProps = {
   isDisabled: false,
   variant: 'default'
 };
-Button.displayName = 'Button';
+Button.displayName = displayName;
 export default Button;

package/lib/components/CheckboxField/CheckboxField.js

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

package/lib/components/ColorField/ColorField.js

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

package/lib/components/ComboBoxField/ComboBoxField.js

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

package/lib/components/DatePicker/DatePicker.js

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

package/lib/components/FileInputField/FileInputField.js

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

package/lib/components/HelpHint/HelpHint.stories.js

@@ -26,12 +26,12 @@ export 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'
   }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(Box, {
-    p: 50
+    p: 100
   }, ___EmotionJSX(HelpHint, args));
 };
 Default.parameters = {
@@ -42,7 +42,7 @@ Default.parameters = {
 };
 export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
   return ___EmotionJSX(Box, {
-    p: 50
+    p: 100
   }, ___EmotionJSX(HelpHint, {
     popoverProps: {
       'data-testid': 'popover-container'
@@ -51,14 +51,14 @@ export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProp
       '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"));
 };
 export var ContentWithLink = function ContentWithLink() {
   return ___EmotionJSX(Box, {
-    p: 70
+    p: 100
   }, ___EmotionJSX(HelpHint, null, ___EmotionJSX(Text, {
     variant: "popover"
-  }, "Text of the popover right here... "), ___EmotionJSX(Link, {
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"), ___EmotionJSX(Link, {
     variant: "popover",
     href: "https://uilibrary.ping-eng.com/",
     target: "_blank"
@@ -72,7 +72,7 @@ ContentWithLink.parameters = {
 };
 export var WithDelay = function WithDelay(args) {
   return ___EmotionJSX(Box, {
-    p: 50
+    p: 100
   }, ___EmotionJSX(HelpHint, _extends({}, args, {
     closeDelay: 5000
   })));

package/lib/components/IconButton/IconButton.js

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

package/lib/components/ImageUploadField/ImageUploadField.js

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

package/lib/components/Input/Input.js

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

package/lib/components/LinkSelectField/LinkSelectField.js

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

package/lib/components/ListViewItem/ListViewItem.js

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

package/lib/components/Messages/Message.js

@@ -1,24 +1,13 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["color"];
-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) { _defineProperty(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; }
 import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
-import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Text } from '../..';
 import useStatusClasses from '../../hooks/useStatusClasses';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ARIA_STATUSES = {
@@ -44,28 +33,26 @@ var CloseButton = function CloseButton(_ref) {
     }
   }));
 };
-CloseButton.propTypes = {
-  color: PropTypes.string
-};
 var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
     item = _ref2.item,
     onClose = _ref2.onClose;
   var key = item.key,
     itemProps = item.props;
-  var children = itemProps.children,
-    _itemProps$status = itemProps.status,
-    status = _itemProps$status === void 0 ? 'default' : _itemProps$status,
-    bg = itemProps.bg,
-    color = itemProps.color,
-    icon = itemProps.icon,
-    _itemProps$isHidden = itemProps.isHidden,
-    isHidden = _itemProps$isHidden === void 0 ? false : _itemProps$isHidden,
-    dataId = itemProps['data-id'];
+  var _ref3 = itemProps,
+    children = _ref3.children,
+    _ref3$status = _ref3.status,
+    status = _ref3$status === void 0 ? statuses.DEFAULT : _ref3$status,
+    bg = _ref3.bg,
+    color = _ref3.color,
+    icon = _ref3.icon,
+    _ref3$isHidden = _ref3.isHidden,
+    isHidden = _ref3$isHidden === void 0 ? false : _ref3$isHidden,
+    dataId = _ref3['data-id'];
   var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),
     statusClasses = _useStatusClasses.classNames;
   var onCloseHandler = function onCloseHandler() {
-    if (onClose) {
+    if (onClose && key) {
       onClose(key);
     }
   };
@@ -75,7 +62,8 @@ var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     innerHeight = _useState2[0],
     setInnerHeight = _useState2[1];
   useLayoutEffect(function () {
-    setInnerHeight(innerRef.current.clientHeight);
+    var _innerRef$current$cli, _innerRef$current;
+    setInnerHeight((_innerRef$current$cli = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.clientHeight) !== null && _innerRef$current$cli !== void 0 ? _innerRef$current$cli : 0);
   }, [children]);
   var _useStatusClasses3 = useStatusClasses(className, {
       isHidden: isHidden
@@ -133,24 +121,4 @@ var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     color: color
   }))));
 });
-Message.propTypes = {
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    props: PropTypes.shape({
-      children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-      /* Background color */
-      bg: PropTypes.string,
-      /* Text color */
-      color: PropTypes.string,
-      /* Message icon */
-      icon: PropTypes.elementType,
-      /* Hides the message with an animated transition */
-      isHidden: PropTypes.bool,
-      'data-id': PropTypes.string,
-      status: _objectSpread({}, statusPropTypes).status
-    })
-  }),
-  /* Callback for clicking the message's close button */
-  onClose: PropTypes.func
-};
 export default Message;

package/lib/components/Messages/Messages.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["items", "onClose"];
+var _excluded = ["onClose"];
 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) { _defineProperty(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; }
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -19,14 +19,11 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useCollection } from '@react-stately/collections';
 import { ListCollection } from '@react-stately/list';
-import PropTypes from 'prop-types';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
 import Message from './Message';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
-  var items = props.items,
-    onClose = props.onClose,
+  var onClose = props.onClose,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -70,16 +67,6 @@ var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }));
 });
-Messages.propTypes = {
-  /* For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections). */
-  items: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
-    key: PropTypes.string,
-    text: PropTypes.string,
-    node: PropTypes.node
-  }, statusPropTypes))),
-  /* Callback for clicking the message's close button */
-  onClose: PropTypes.func
-};
 Messages.defaultProps = {
   items: []
 };