@pingux/astro 2.54.0-alpha.0 → 2.54.0-alpha.2

package/lib/cjs/components/Messages/utils/tests/messagesReducer.test.js

@@ -52,7 +52,7 @@ var getComponent = function getComponent() {
   return renderFn((0, _react2.jsx)(TestComponent, props));
 };
 test('should create an empty state', function () {
-  var state = (0, _messagesReducer["default"])();
+  var state = (0, _messagesReducer["default"])([], {});
   expect(state.length).toBe(0);
 });
 test('should add a new message', function () {
@@ -76,11 +76,12 @@ test('should clear all messages', function () {
   expect(state.length).toBe(0);
 });
 test('should show and hide a message', function () {
+  var _screen$queryByTestId, _screen$queryByTestId2;
   jest.useFakeTimers();
   getComponent();
-  expect(_testWrapper.screen.queryByTestId(testId).children.length).toBe(1);
+  expect((_screen$queryByTestId = _testWrapper.screen.queryByTestId(testId)) === null || _screen$queryByTestId === void 0 ? void 0 : _screen$queryByTestId.children.length).toBe(1);
   (0, _testUtils.act)(function () {
     jest.runAllTimers();
   });
-  expect(_testWrapper.screen.queryByTestId(testId).children.length).toBe(0);
+  expect((_screen$queryByTestId2 = _testWrapper.screen.queryByTestId(testId)) === null || _screen$queryByTestId2 === void 0 ? void 0 : _screen$queryByTestId2.children.length).toBe(0);
 });

package/lib/cjs/components/Messages/utils/tests/multiMessagesReducer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Messages/utils/tests/multiMessagesReducer.test.js

@@ -83,11 +83,12 @@ test('should clear all messages', function () {
   expect(state['container-one'].length).toBe(0);
 });
 test('should show and hide a message', function () {
+  var _screen$queryByTestId, _screen$queryByTestId2;
   jest.useFakeTimers();
   getComponent();
-  expect(_testWrapper.screen.queryByTestId(testId).children.length).toBe(1);
+  expect((_screen$queryByTestId = _testWrapper.screen.queryByTestId(testId)) === null || _screen$queryByTestId === void 0 ? void 0 : _screen$queryByTestId.children.length).toBe(1);
   (0, _testUtils.act)(function () {
     jest.runAllTimers();
   });
-  expect(_testWrapper.screen.queryByTestId(testId).children.length).toBe(0);
+  expect((_screen$queryByTestId2 = _testWrapper.screen.queryByTestId(testId)) === null || _screen$queryByTestId2 === void 0 ? void 0 : _screen$queryByTestId2.children.length).toBe(0);
 });

package/lib/cjs/types/index.d.ts

@@ -22,6 +22,7 @@ export * from './listItem';
 export * from './loader';
 export * from './menu';
 export * from './menuItem';
+export * from './messages';
 export * from './Modal';
 export * from './navBar';
 export * from './overlayPanel';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -271,8 +271,19 @@ _forEachInstanceProperty(_context24 = _Object$keys(_menuItem)).call(_context24,
     }
   });
 });
+var _messages = require("./messages");
+_forEachInstanceProperty(_context25 = _Object$keys(_messages)).call(_context25, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _messages[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _messages[key];
+    }
+  });
+});
 var _Modal = require("./Modal");
-_forEachInstanceProperty(_context25 = _Object$keys(_Modal)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_Modal)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Modal[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_Modal)).call(_context25, fun
   });
 });
 var _navBar = require("./navBar");
-_forEachInstanceProperty(_context26 = _Object$keys(_navBar)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_navBar)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_navBar)).call(_context26, fu
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context27 = _Object$keys(_overlayPanel)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_overlayPanel)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context28 = _Object$keys(_popoverContainer)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_popoverContainer)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context29 = _Object$keys(_popoverMenu)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_popoverMenu)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_popoverMenu)).call(_context2
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context30 = _Object$keys(_requirementsList)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_requirementsList)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context31 = _Object$keys(_rockerButtonGroup)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_rockerButtonGroup)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -349,7 +360,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context32 = _Object$keys(_scrollBox)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_scrollBox)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_scrollBox)).call(_context32,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context33 = _Object$keys(_separator)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_separator)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_separator)).call(_context33,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context34 = _Object$keys(_shared)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_shared)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -382,7 +393,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_shared)).call(_context34, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context35 = _Object$keys(_table)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_table)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -393,7 +404,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_table)).call(_context35, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context36 = _Object$keys(_text)).call(_context36, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_text)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -404,7 +415,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_text)).call(_context36, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context37 = _Object$keys(_tooltipTrigger)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_tooltipTrigger)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/item.d.ts

@@ -1,5 +1,6 @@
 import { ElementType, Key } from 'react';
 import type { ItemProps } from '@react-types/shared';
+import { IconTypeExtended } from './icon';
 import { DOMAttributes, StyleProps } from './shared';
 export interface Status {
     status?: 'default' | 'error' | 'success' | 'warning';
@@ -31,6 +32,7 @@ declare module '@react-types/shared' {
         slots?: {
             postHeading: React.ReactNode;
         };
+        icon?: IconTypeExtended;
         /** isCurrent for the Breadcrumbs item. */
         isCurrent?: boolean;
     }

package/lib/cjs/types/messages.d.ts

@@ -0,0 +1,43 @@
+import { Key, ReactElement } from 'react';
+import type { Collection, CollectionChildren, CollectionStateBase, Node } from '@react-types/shared';
+import { ThemeUICSSObject } from 'theme-ui';
+import { Status } from './item';
+export interface MessageItemProps {
+    children?: React.ReactNode | string;
+    bg?: string;
+    color?: string;
+    icon?: React.ElementType;
+    isHidden?: boolean;
+    'data-id'?: string;
+    status?: Status;
+}
+export interface MessageItem {
+    text?: string;
+    node?: React.ReactNode;
+    key?: Key;
+    props?: MessageItemProps;
+    status?: Status;
+}
+export interface CollectionOptions<T, C extends Collection<Node<T>>> extends Omit<CollectionStateBase<T, C>, 'children'> {
+    children?: ReactElement | ReactElement[] | ((item: T) => ReactElement);
+}
+export interface MessagesProps<T> {
+    children: CollectionChildren<T>;
+    items?: MessageItem[];
+    onClose?: (key: Key) => void;
+    sx?: ThemeUICSSObject;
+}
+export interface CloseButtonProps {
+    color?: string;
+    onPress?: () => void;
+    variant?: string;
+    className?: string;
+}
+export interface MessageProps {
+    className?: string;
+    item: {
+        key?: Key;
+        props?: MessageItemProps;
+    };
+    onClose?: (key: Key) => void;
+}

package/lib/cjs/types/messages.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

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/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/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: []
 };

package/lib/components/Messages/Messages.stories.js

@@ -21,7 +21,7 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Messages } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import MessagesReadme from './Messages.mdx';
@@ -60,15 +60,15 @@ var messages = [{
 }, {
   key: 'message2',
   text: loremText,
-  status: 'success'
+  status: statuses.SUCCESS
 }, {
   key: 'message3',
   text: loremText,
-  status: 'warning'
+  status: statuses.WARNING
 }, {
   key: 'message4',
   text: loremText,
-  status: 'error'
+  status: statuses.ERROR
 }];
 export var Default = function Default(args) {
   return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
@@ -77,7 +77,7 @@ export var Default = function Default(args) {
   }, loremText), ___EmotionJSX(Item, {
     key: "message2",
     "data-id": "message2",
-    status: "success"
+    status: statuses.SUCCESS
   }, loremText));
 };
 Default.parameters = {
@@ -87,17 +87,25 @@ Default.parameters = {
   }
 };
 export var DefaultDynamic = function DefaultDynamic(args) {
-  return (
-    // messages = [{...}]
-    ___EmotionJSX(Messages, _extends({}, args, {
-      items: messages
-    }), function (item) {
-      return ___EmotionJSX(Item, item, item.text);
-    })
-  );
+  return ___EmotionJSX(Messages, _extends({}, args, {
+    items: messages
+  }), function (item) {
+    return ___EmotionJSX(Item, item, item.text);
+  });
+};
+
+// Added to bypass color contrast in safari
+DefaultDynamic.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };
 export var Controlled = function Controlled(args) {
-  // messages = [{...}]
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -124,6 +132,18 @@ export var Controlled = function Controlled(args) {
     return ___EmotionJSX(Item, item, item.text);
   });
 };
+
+// Added to bypass color contrast in safari
+Controlled.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var ControlledWithButton = function ControlledWithButton(args) {
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -158,6 +178,18 @@ export var ControlledWithButton = function ControlledWithButton(args) {
     return ___EmotionJSX(Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
+ControlledWithButton.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
   return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
     bg: "accent.99",
@@ -165,6 +197,18 @@ export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
     icon: AccountIcon
   }, loremText));
 };
+
+// Added to bypass color contrast in safari
+WithCustomColorsAndIcons.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -179,7 +223,7 @@ export var UseReducer = function UseReducer() {
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
 
-  var _useReducer = useReducer(messagesReducer),
+  var _useReducer = useReducer(messagesReducer, []),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     items = _useReducer2[0],
     dispatch = _useReducer2[1];
@@ -207,6 +251,18 @@ export var UseReducer = function UseReducer() {
     return ___EmotionJSX(Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
+UseReducer.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
   var _useReducer3 = useReducer(multiMessagesReducer, {
       'container-one': [],
@@ -258,6 +314,18 @@ export var UseReducerWithMultipleContainers = function UseReducerWithMultipleCon
     return ___EmotionJSX(Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
+UseReducerWithMultipleContainers.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var WithTextStyling = function WithTextStyling(args) {
   var items = [{
     key: 'message1',
@@ -280,4 +348,16 @@ export var WithTextStyling = function WithTextStyling(args) {
   }), function (item) {
     return ___EmotionJSX(Item, item, item.node || item.text);
   });
+};
+
+// Added to bypass color contrast in safari
+WithTextStyling.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };