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

package/lib/cjs/components/Messages/Message.js

@@ -1,15 +1,9 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -21,17 +15,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _NoticeIcon = require("../Icon/NoticeIcon");
 var _react2 = require("@emotion/react");
 var _excluded = ["color"];
 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; }
-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 ARIA_STATUSES = {
   SUCCESS: 'Success Message',
   ERROR: 'Error Message',
@@ -56,28 +47,26 @@ var CloseButton = function CloseButton(_ref) {
     }
   }));
 };
-CloseButton.propTypes = {
-  color: _propTypes["default"].string
-};
 var Message = /*#__PURE__*/(0, _react.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"].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 = (0, _useStatusClasses4["default"])(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
     statusClasses = _useStatusClasses.classNames;
   var onCloseHandler = function onCloseHandler() {
-    if (onClose) {
+    if (onClose && key) {
       onClose(key);
     }
   };
@@ -87,7 +76,8 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     innerHeight = _useState2[0],
     setInnerHeight = _useState2[1];
   (0, _react.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 = (0, _useStatusClasses4["default"])(className, {
       isHidden: isHidden
@@ -145,25 +135,5 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     color: color
   }))));
 });
-Message.propTypes = {
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({
-      children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-      /* Background color */
-      bg: _propTypes["default"].string,
-      /* Text color */
-      color: _propTypes["default"].string,
-      /* Message icon */
-      icon: _propTypes["default"].elementType,
-      /* Hides the message with an animated transition */
-      isHidden: _propTypes["default"].bool,
-      'data-id': _propTypes["default"].string,
-      status: _objectSpread({}, _statusProp.statusPropTypes).status
-    })
-  }),
-  /* Callback for clicking the message's close button */
-  onClose: _propTypes["default"].func
-};
 var _default = Message;
 exports["default"] = _default;

package/lib/cjs/components/Messages/Message.styles.d.ts

@@ -0,0 +1,151 @@
+export declare const 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;
+            };
+        };
+    };
+};
+declare const _default: {
+    wrapper: {
+        position: string;
+        right: string;
+        bottom: string;
+        left: string;
+        alignItems: string;
+        pointerEvents: string;
+    };
+    transition: {
+        transition: string;
+        opacity: number;
+        '&.is-hidden': {
+            opacity: number;
+        };
+    };
+    item: {
+        maxWidth: number;
+        pointerEvents: string;
+        mb: string;
+        p: string;
+        wordBreak: string;
+        alignItems: string;
+        bg: string;
+        color: string;
+        borderRadius: number;
+        '&.is-success, > .is-success': {
+            bg: string;
+            color: string;
+        };
+        '&.is-warning, > .is-warning': {
+            bg: string;
+            color: string;
+        };
+        '&.is-error, > .is-error': {
+            bg: string;
+            color: string;
+        };
+    };
+    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;
+                };
+            };
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/Messages/Messages.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MessageItem, MessagesProps } from '../../types';
+declare const Messages: React.ForwardRefExoticComponent<MessagesProps<MessageItem> & React.RefAttributes<HTMLDivElement>>;
+export default Messages;

package/lib/cjs/components/Messages/Messages.js

@@ -26,19 +26,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _collections = require("@react-stately/collections");
 var _list = require("@react-stately/list");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Message = _interopRequireDefault(require("./Message"));
 var _react2 = require("@emotion/react");
-var _excluded = ["items", "onClose"];
+var _excluded = ["onClose"];
 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; }
 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 _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 Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var items = props.items,
-    onClose = props.onClose,
+  var onClose = props.onClose,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -82,16 +79,6 @@ var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }));
 });
-Messages.propTypes = {
-  /* For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections). */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape(_objectSpread({
-    key: _propTypes["default"].string,
-    text: _propTypes["default"].string,
-    node: _propTypes["default"].node
-  }, _statusProp.statusPropTypes))),
-  /* Callback for clicking the message's close button */
-  onClose: _propTypes["default"].func
-};
 Messages.defaultProps = {
   items: []
 };

package/lib/cjs/components/Messages/Messages.stories.d.ts

@@ -0,0 +1,128 @@
+import React from 'react';
+import { MessageItem } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../index").MessagesProps<MessageItem> & React.RefAttributes<HTMLDivElement>>;
+    decorators: ((...args: any) => any)[];
+    argTypes: {
+        items: {
+            control: {
+                type: string;
+            };
+        };
+        onClose: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const DefaultDynamic: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Controlled: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const ControlledWithButton: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const WithCustomColorsAndIcons: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const UseReducer: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const UseReducerWithMultipleContainers: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const WithTextStyling: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};

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

@@ -29,7 +29,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _index2 = require("./index");
 var _Messages = _interopRequireDefault(require("./Messages.mdx"));
@@ -73,15 +73,15 @@ var messages = [{
 }, {
   key: 'message2',
   text: loremText,
-  status: 'success'
+  status: _statuses["default"].SUCCESS
 }, {
   key: 'message3',
   text: loremText,
-  status: 'warning'
+  status: _statuses["default"].WARNING
 }, {
   key: 'message4',
   text: loremText,
-  status: 'error'
+  status: _statuses["default"].ERROR
 }];
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
@@ -90,7 +90,7 @@ var Default = function Default(args) {
   }, loremText), (0, _react2.jsx)(_reactStately.Item, {
     key: "message2",
     "data-id": "message2",
-    status: "success"
+    status: _statuses["default"].SUCCESS
   }, loremText));
 };
 exports.Default = Default;
@@ -101,18 +101,26 @@ Default.parameters = {
   }
 };
 var DefaultDynamic = function DefaultDynamic(args) {
-  return (
-    // messages = [{...}]
-    (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
-      items: messages
-    }), function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, item, item.text);
-    })
-  );
+  return (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
+    items: messages
+  }), function (item) {
+    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+  });
 };
+
+// Added to bypass color contrast in safari
 exports.DefaultDynamic = DefaultDynamic;
+DefaultDynamic.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var Controlled = function Controlled(args) {
-  // messages = [{...}]
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     items = _useState2[0],
@@ -139,7 +147,19 @@ var Controlled = function Controlled(args) {
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   });
 };
+
+// Added to bypass color contrast in safari
 exports.Controlled = Controlled;
+Controlled.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var ControlledWithButton = function ControlledWithButton(args) {
   var _useState3 = (0, _react.useState)([]),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -174,7 +194,19 @@ var ControlledWithButton = function ControlledWithButton(args) {
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
 exports.ControlledWithButton = ControlledWithButton;
+ControlledWithButton.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
   return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
     bg: "accent.99",
@@ -182,7 +214,19 @@ var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
     icon: _AccountIcon["default"]
   }, loremText));
 };
+
+// Added to bypass color contrast in safari
 exports.WithCustomColorsAndIcons = WithCustomColorsAndIcons;
+WithCustomColorsAndIcons.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -197,7 +241,7 @@ var UseReducer = function UseReducer() {
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
 
-  var _useReducer = (0, _react.useReducer)(_index2.messagesReducerStory),
+  var _useReducer = (0, _react.useReducer)(_index2.messagesReducerStory, []),
     _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
     items = _useReducer2[0],
     dispatch = _useReducer2[1];
@@ -225,7 +269,19 @@ var UseReducer = function UseReducer() {
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
 exports.UseReducer = UseReducer;
+UseReducer.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
   var _useReducer3 = (0, _react.useReducer)(_index2.multiMessagesReducerStory, {
       'container-one': [],
@@ -277,7 +333,19 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
 exports.UseReducerWithMultipleContainers = UseReducerWithMultipleContainers;
+UseReducerWithMultipleContainers.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var WithTextStyling = function WithTextStyling(args) {
   var items = [{
     key: 'message1',
@@ -301,4 +369,16 @@ var WithTextStyling = function WithTextStyling(args) {
     return (0, _react2.jsx)(_reactStately.Item, item, item.node || item.text);
   });
 };
-exports.WithTextStyling = WithTextStyling;
+
+// Added to bypass color contrast in safari
+exports.WithTextStyling = WithTextStyling;
+WithTextStyling.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};

package/lib/cjs/components/Messages/Messages.test.d.ts

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