@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

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

@@ -28,19 +28,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
-
 var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
 
-var _data = require("@react-stately/data");
+var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 
-var _addonActions = require("@storybook/addon-actions");
+var _reactStately = require("react-stately");
 
-var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
+var _addonActions = require("@storybook/addon-actions");
 
 var _ = _interopRequireDefault(require("."));
 
@@ -599,7 +597,7 @@ var Default = function Default(_ref2) {
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, args, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name,
       "data-id": item.key
@@ -748,7 +746,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     };
   }();
 
-  var list = (0, _data.useAsyncList)({
+  var list = (0, _reactStately.useAsyncList)({
     load: function load(_ref5) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
         var signal, cursor, filterText;
@@ -792,7 +790,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     loadingState: list.loadingState,
     onLoadMore: list.loadMore
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ListElement, {
@@ -819,7 +817,7 @@ var MultipleSelection = function MultipleSelection(_ref6) {
     items: items,
     selectionMode: "multiple"
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ListElement, {

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

@@ -14,11 +14,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _reactStately = require("react-stately");
 
-var _collections = require("@react-stately/collections");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
@@ -78,12 +78,12 @@ var getComponent = function getComponent() {
       _ref$renderFn = _ref.renderFn,
       renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
 
-  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
@@ -101,7 +101,7 @@ var getComponentEmpty = function getComponentEmpty() {
       _ref2$renderFn = _ref2.renderFn,
       renderFn = _ref2$renderFn === void 0 ? _testWrapper.render : _ref2$renderFn;
 
-  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props))));
 };
@@ -113,12 +113,12 @@ var getComponentWithCheckbox = function getComponentWithCheckbox() {
       _ref3$renderFn = _ref3.renderFn,
       renderFn = _ref3$renderFn === void 0 ? _testWrapper.render : _ref3$renderFn;
 
-  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key

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

@@ -20,12 +20,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@react-aria/utils");
-
-var _focus = require("@react-aria/focus");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactAria = require("react-aria");
+
 var _list = require("@react-aria/list");
 
 var _interactions = require("@react-aria/interactions");
@@ -60,13 +58,13 @@ var ListViewItem = function ListViewItem(props) {
   var rowRef = (0, _react.useRef)();
   var isSelectable = state.selectionManager.selectionMode !== 'none';
 
-  var _useFocusRing = (0, _focus.useFocusRing)({
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
     within: true
   }),
       isFocusVisibleWithin = _useFocusRing.isFocusVisible,
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
@@ -83,7 +81,7 @@ var ListViewItem = function ListViewItem(props) {
       gridCellProps = _useListItem.gridCellProps;
 
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = (0, _utils.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
+  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isSelectable && isHovered,
@@ -103,9 +101,9 @@ var ListViewItem = function ListViewItem(props) {
       outline: 'none'
     }
   }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: "div"
+    as: "div",
+    variant: "listViewItem.container"
   }, gridCellProps, {
-    variant: "boxes.listViewItem",
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,
     isSelected: isSelected,

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

@@ -0,0 +1,88 @@
+"use strict";
+
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+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 container = {
+  display: 'flex',
+  padding: '0px 15px 0px 25px',
+  flex: '1 1 0px',
+  minHeight: '80px',
+  justifyContent: 'center',
+  bg: 'accent.99',
+  outline: 'none',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white',
+    cursor: 'pointer'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.hairline'
+  }
+};
+
+var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
+  minHeight: '75px',
+  height: '76px',
+  '&.has-inset-separator': {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      width: 'calc(100% - 43px)',
+      right: 0,
+      bottom: 0,
+      borderBottom: '1px solid',
+      borderBottomColor: 'line.hairline'
+    },
+    '&.is-focused': {
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 'calc(100% - 43px)',
+        right: 0,
+        bottom: 0,
+        borderBottom: '1px solid',
+        borderBottomColor: 'focus'
+      }
+    }
+  }
+});
+
+var _default = {
+  container: container,
+  linkedViewContainer: linkedViewContainer
+};
+exports["default"] = _default;

package/lib/cjs/components/Menu/Menu.js

@@ -42,11 +42,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _menu = require("@react-aria/menu");
+var _reactAria = require("react-aria");
 
-var _tree = require("@react-stately/tree");
-
-var _focus = require("@react-aria/focus");
+var _reactStately = require("react-stately");
 
 var _utils = require("@react-aria/utils");
 
@@ -88,9 +86,9 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var contextProps = (0, _react.useContext)(_MenuContext.MenuContext);
 
-  var completeProps = _objectSpread({}, (0, _utils.mergeProps)(contextProps, props));
+  var completeProps = _objectSpread({}, (0, _reactAria.mergeProps)(contextProps, props));
 
-  var state = (0, _tree.useTreeState)(completeProps);
+  var state = (0, _reactStately.useTreeState)(completeProps);
   var menuRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -99,10 +97,10 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return menuRef.current;
   });
 
-  var _useMenu = (0, _menu.useMenu)(completeProps, state, menuRef),
+  var _useMenu = (0, _reactAria.useMenu)(completeProps, state, menuRef),
       menuProps = _useMenu.menuProps;
 
-  var _useFocusRing = (0, _focus.useFocusRing)({
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
     within: true
   }),
       isFocusVisible = _useFocusRing.isFocusVisible,
@@ -115,7 +113,7 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": _orientation["default"].VERTICAL
-  }, others, (0, _utils.mergeProps)(focusProps, menuProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_MenuItem["default"], {
       key: item.key,
       item: item,

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

@@ -14,7 +14,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _reactStately = require("react-stately");
 
 var _Menu = _interopRequireDefault(require("../Menu"));
 
@@ -87,15 +87,15 @@ var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, _ref);
   return (0, _react2.jsx)(_Menu["default"], (0, _extends2["default"])({
     "aria-label": "Example Menu"
-  }, args), (0, _react2.jsx)(_collections.Item, {
+  }, args), (0, _react2.jsx)(_reactStately.Item, {
     key: "edit",
     textValue: "Edit",
     "data-id": "edit"
-  }, (0, _react2.jsx)(_Text["default"], null, "Edit")), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Edit")), (0, _react2.jsx)(_reactStately.Item, {
     key: "duplicate",
     textValue: "Duplicate",
     "data-id": "duplicate"
-  }, (0, _react2.jsx)(_Text["default"], null, "Duplicate")), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Duplicate")), (0, _react2.jsx)(_reactStately.Item, {
     key: "delete",
     textValue: "Delete",
     "data-id": "delete"

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -26,9 +26,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _utils = require("@react-aria/utils");
-
-var _menu = require("@react-aria/menu");
+var _reactAria = require("react-aria");
 
 var _interactions = require("@react-aria/interactions");
 
@@ -83,7 +81,7 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return menuItemRef.current;
   });
 
-  var _useMenuItem = (0, _menu.useMenuItem)({
+  var _useMenuItem = (0, _reactAria.useMenuItem)({
     key: item.key,
     'aria-label': item['aria-label'],
     isDisabled: isDisabled,
@@ -138,7 +136,7 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
     "data-id": dataId,
     "aria-disabled": isDisabled
-  }, (0, _utils.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
+  }, (0, _reactAria.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
 });
 MenuItem.displayName = 'MenuItem';
 MenuItem.propTypes = {

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

@@ -139,7 +139,7 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     status: status
   }, messageIconProps));
   return (0, _react2.jsx)(_.Box, {
-    variant: "messages.transition",
+    variant: "message.transition",
     className: wrapperClasses,
     sx: {
       maxHeight: !isHidden ? innerHeight : 0
@@ -153,7 +153,7 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   }, (0, _react2.jsx)(_.Box, {
     ref: ref,
     isRow: true,
-    variant: "messages.item",
+    variant: "message.item",
     className: statusClasses,
     bg: bg
   }, messageIcon, (0, _react2.jsx)(_.Text, {
@@ -162,7 +162,7 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     mr: "md"
   }, children), (0, _react2.jsx)(CloseButton, {
     onPress: onCloseHandler,
-    variant: "close",
+    variant: "messageCloseButton",
     className: statusClasses,
     color: color
   }))));

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

@@ -0,0 +1,110 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.messageCloseButton = exports["default"] = void 0;
+var wrapper = {
+  position: 'absolute',
+  right: 'lg',
+  bottom: 'lg',
+  left: 'lg',
+  alignItems: 'flex-end',
+  pointerEvents: 'none'
+};
+var transition = {
+  transition: 'opacity 200ms, max-height 200ms',
+  opacity: 1,
+  '&.is-hidden': {
+    opacity: 0
+  }
+};
+var item = {
+  maxWidth: 400,
+  pointerEvents: 'all',
+  mb: 'md',
+  p: 'md',
+  wordBreak: 'break-word',
+  alignItems: 'center',
+  bg: 'neutral.95',
+  color: 'neutral.10',
+  borderRadius: 4,
+  '&.is-success, > .is-success': {
+    bg: 'success.light',
+    color: 'success.dark'
+  },
+  '&.is-warning, > .is-warning': {
+    bg: 'warning.light',
+    color: 'warning.dark'
+  },
+  '&.is-error, > .is-error': {
+    bg: 'critical.light',
+    color: 'critical.dark'
+  }
+};
+var messageCloseButton = {
+  p: 0,
+  ml: 'auto',
+  outline: 'none',
+  path: {
+    fill: 'neutral.10'
+  },
+  '&.is-hovered': {
+    bg: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-pressed': {
+    boxShadow: 'standard',
+    bg: 'neutral.10',
+    path: {
+      fill: 'white'
+    }
+  },
+  '&.is-success': {
+    path: {
+      fill: 'success.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'success.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  },
+  '&.is-warning': {
+    path: {
+      fill: 'warning.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'warning.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  },
+  '&.is-error': {
+    path: {
+      fill: 'critical.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'critical.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  }
+};
+exports.messageCloseButton = messageCloseButton;
+var _default = {
+  wrapper: wrapper,
+  transition: transition,
+  item: item,
+  messageCloseButton: messageCloseButton
+};
+exports["default"] = _default;

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

@@ -59,7 +59,7 @@ var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _list.useListState)(props);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
-    variant: "messages.wrapper"
+    variant: "message.wrapper"
   }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_Message["default"], {
       key: item.key,

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

@@ -46,10 +46,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _collections = require("@react-stately/collections");
-
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 
+var _reactStately = require("react-stately");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _ = require("../..");
@@ -109,10 +109,10 @@ var messages = [{
 var messageText = ['WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! Oh yeah, good luck with that.', "Oh no! The professor will hit me! But if Zoidberg 'fixes' it… then perhaps gifts! You've killed me! Oh, you've killed me!", 'Does anybody else feel jealous and aroused and worried?', "Stop it, stop it. It's fine. I will 'destroy' you! Um, is this the boring, peaceful kind of taking to the streets?", "She also liked to shut up! Fry! Stay back! He's too powerful!", "This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel."];
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_collections.Item, {
+  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
     key: "message1",
     "data-id": "message1"
-  }, "Here is a very neutral thing"), (0, _react2.jsx)(_collections.Item, {
+  }, "Here is a very neutral thing"), (0, _react2.jsx)(_reactStately.Item, {
     key: "message2",
     "data-id": "message2",
     status: "success"
@@ -126,7 +126,7 @@ var DefaultDynamic = function DefaultDynamic(args) {
     (0, _react2.jsx)(_.Messages, (0, _extends2["default"])({}, args, {
       items: messages
     }), function (item) {
-      return (0, _react2.jsx)(_collections.Item, item, item.text);
+      return (0, _react2.jsx)(_reactStately.Item, item, item.text);
     })
   );
 };
@@ -161,7 +161,7 @@ var Controlled = function Controlled(args) {
     items: items,
     onClose: removeMessage
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.text);
+    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   });
 };
 
@@ -202,22 +202,22 @@ var ControlledWithButton = function ControlledWithButton(args) {
     items: items,
     onClose: removeMessage
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.text);
+    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
 
 exports.ControlledWithButton = ControlledWithButton;
 
 var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
-  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_collections.Item, {
+  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
     bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]
-  }, "We have to take a look with this camera."), (0, _react2.jsx)(_collections.Item, {
+  }, "We have to take a look with this camera."), (0, _react2.jsx)(_reactStately.Item, {
     bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]
-  }, "Who said that? SURE you can die! You want to die?! Oh yeah, good luck with that. Stop! Do not shoot fire stick in space canoe! Cause explosive decompression!"), (0, _react2.jsx)(_collections.Item, {
+  }, "Who said that? SURE you can die! You want to die?! Oh yeah, good luck with that. Stop! Do not shoot fire stick in space canoe! Cause explosive decompression!"), (0, _react2.jsx)(_reactStately.Item, {
     bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]
@@ -268,7 +268,7 @@ var UseReducer = function UseReducer() {
     items: items,
     onClose: removeMessage
   }, function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.text);
+    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
 
@@ -316,7 +316,7 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       width: '45%'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.text);
+    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }), (0, _react2.jsx)(_.Messages, {
     items: items['container-two'],
     onClose: function onClose(key) {
@@ -326,7 +326,7 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       left: '55%'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.text);
+    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
 
@@ -352,7 +352,7 @@ var WithTextStyling = function WithTextStyling(args) {
   return (0, _react2.jsx)(_.Messages, (0, _extends2["default"])({}, args, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.node || item.text);
+    return (0, _react2.jsx)(_reactStately.Item, item, item.node || item.text);
   });
 };
 

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

@@ -20,7 +20,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _reactStately = require("react-stately");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
@@ -62,10 +62,10 @@ var items = [{
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var renderFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _testWrapper.render;
-  return renderFn((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  return renderFn((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
     key: "message1",
     "data-id": "message1"
-  }, "Here is a very neutral thing"), (0, _react2.jsx)(_collections.Item, {
+  }, "Here is a very neutral thing"), (0, _react2.jsx)(_reactStately.Item, {
     key: "message2",
     "data-id": "message2",
     status: "success"
@@ -76,7 +76,7 @@ var getWithDynamicList = function getWithDynamicList() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var renderFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _testWrapper.render;
   return renderFn((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), function (item) {
-    return (0, _react2.jsx)(_collections.Item, item, item.text);
+    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 }; // Need to be added to each test file to test accessibility using axe.