@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -20,7 +20,6 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { v4 as uuid } from 'uuid';
 import { Item, Menu } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import ImagePreviewButton from './ImagePreviewButton';
 import ImageUploadFieldBase from './ImageUploadFieldBase';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -101,7 +100,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: statusId
   }, state.isMenuOpen && 'Menu pop up expanded'));
 });
-ImageUploadField.propTypes = _objectSpread(_objectSpread({
+ImageUploadField.propTypes = _objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: PropTypes.string,
 
@@ -150,7 +149,7 @@ ImageUploadField.propTypes = _objectSpread(_objectSpread({
 
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,

package/lib/components/ImageUploadField/ImageUploadField.stories.js

@@ -20,7 +20,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useRef, useState } from 'react';
 import { Image, ImageUploadField, OverlayProvider } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -33,7 +32,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     previewImage: {
       control: {
         type: 'text'
@@ -90,7 +89,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen

package/lib/components/ImageUploadField/ImageUploadFieldBase.js

@@ -15,9 +15,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, useMemo, useRef } from 'react';
-import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
-import { useVisuallyHidden } from 'react-aria';
+import omit from 'lodash/omit';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import { PopoverMenu } from '../../index';
 import useField from '../../hooks/useField';
 import FieldHelperText from '../FieldHelperText';
@@ -40,8 +40,7 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
 
   var _useField = useField(_objectSpread({}, omit(props, ['onRemove']))),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var labelRef = useRef();
@@ -61,14 +60,14 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
   })), ___EmotionJSX(PopoverMenu, {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange
-  }, children), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, fieldControlInputProps, visuallyHiddenProps, {
+  }, children), ___EmotionJSX(Input, _extends({}, fieldControlProps, visuallyHiddenProps, {
     accept: acceptableInputTypes,
     "data-testid": "image-upload-input",
     onChange: handleInputChange,
     ref: inputRef,
     type: "file",
     value: ""
-  }))), !isImageType && ___EmotionJSX(FieldHelperText, {
+  })), !isImageType && ___EmotionJSX(FieldHelperText, {
     status: statuses.DEFAULT
   }, fileName), helperText && ___EmotionJSX(FieldHelperText, {
     status: status

package/lib/components/Link/Link.js

@@ -3,9 +3,11 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["className", "isDisabled", "onPress"];
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { Link as ThemeUILink } from 'theme-ui';
+import { useLink } from '@react-aria/link';
+import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 /**
  * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and

package/lib/components/Link/Link.stories.js

@@ -3,7 +3,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import Link from '.';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
-import variants from './Link.styles';
+import variants from '../../styles/variants/links';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Link',

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -21,7 +21,6 @@ import { v4 as uuid } from 'uuid';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { Box, Button, Loader, Icon, Text } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { usePropWarning, useSelectField } from '../../hooks';
 import SelectFieldBase from '../SelectFieldBase';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -56,20 +55,19 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ref),
       selectFieldProps = _extends({}, _useSelectField);
 
-  var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
+  var fieldControlProps = selectFieldProps.fieldControlProps,
       isLoadingInitial = selectFieldProps.isLoadingInitial,
       state = selectFieldProps.state,
       triggerProps = selectFieldProps.triggerProps,
       triggerRef = selectFieldProps.triggerRef;
 
   var trigger = ___EmotionJSX(Button, _extends({
-    className: fieldControlInputProps.className,
+    className: fieldControlProps.className,
     ref: triggerRef,
     variant: "link",
-    tabIndex: isDisabled ? -1 : 0
-  }, triggerProps, ariaProps, {
+    tabIndex: isDisabled ? -1 : 0,
     "aria-describedby": helperText && helperTextId
-  }), ___EmotionJSX(Text, {
+  }, triggerProps, ariaProps), ___EmotionJSX(Text, {
     variant: "label",
     color: "active"
   }, placeholder), ___EmotionJSX(Box, {
@@ -94,7 +92,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = _objectSpread(_objectSpread({
+LinkSelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -180,8 +178,20 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: PropTypes.func
-}, inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
+  onSelectionChange: PropTypes.func,
+
+  /**
+   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
+   * and/or the visible button representation for the select input.
+   */
+  controlProps: PropTypes.shape({}),
+
+  /** Props object passed along to the root container as-is. */
+  containerProps: PropTypes.shape({}),
+
+  /** Props object passed along to the label as-is. */
+  labelProps: PropTypes.shape({})
+}, ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   status: statuses.DEFAULT,

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -24,11 +24,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState } from 'react';
-import { OverlayProvider } from 'react-aria';
-import { useAsyncList } from 'react-stately';
+import { OverlayProvider } from '@react-aria/overlays';
+import { useAsyncList } from '@react-stately/data';
 import { Box, Item, LinkSelectField, Separator } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -41,7 +40,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -77,12 +76,13 @@ export default {
     isDisabled: {},
     isOpen: {},
     isRequired: {},
+    controlProps: {},
     selectedKey: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {

package/lib/components/List/List.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { forwardRef } from 'react';
+import Box from '../Box/Box';
+import { useDeprecationWarning } from '../../hooks';
+/**
+ * The intended use of List is to hold a collection of <ListItem/> components.
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+*/
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var List = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      others = _objectWithoutProperties(props, _excluded);
+
+  useDeprecationWarning('The  List component will be deprecated in Astro-UI 2.0.0, use ListView instead.');
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    role: "list",
+    as: "ul",
+    pl: "0"
+  }, others), children);
+});
+List.displayName = 'List';
+export default List;

package/lib/components/List/List.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import List from '.';
+import ListItem from '../ListItem';
+import Text from '../Text';
+import Separator from '../Separator';
+import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Deprecated/List',
+  component: [List, ListItem],
+  decorators: [function (Story, context) {
+    return withDeprecationWarning(Story, context, 'The `List` component will be deprecated in Astro-UI 2.0.0, use `ListView` instead.');
+  }]
+};
+export var Default = function Default() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    mb: "md",
+    color: "text.secondary"
+  }, "Registration Forms"), ___EmotionJSX(List, null, ___EmotionJSX(ListItem, null, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 1")), ___EmotionJSX(Separator, {
+    margin: "0"
+  }), ___EmotionJSX(ListItem, {
+    title: "Form 2"
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 2")), ___EmotionJSX(Separator, {
+    margin: "0"
+  }), ___EmotionJSX(ListItem, {
+    title: "Form 3"
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 3")), ___EmotionJSX(Separator, {
+    margin: "0"
+  })));
+};

package/lib/components/List/List.test.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import List from './List';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testLabel = 'Test Label';
+var defaultProps = {
+  title: testLabel
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(List, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders List component', function () {
+  getComponent();
+  var list = screen.getByRole('list');
+  expect(list).toBeInstanceOf(HTMLUListElement);
+  expect(list).toBeInTheDocument();
+});

package/lib/components/List/index.js

@@ -0,0 +1 @@
+export { default } from './List';

package/lib/components/ListBox/ListBox.js

@@ -18,11 +18,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps } from 'react-aria';
-import { useCollator } from '@react-aria/i18n';
 import { useListBox } from '@react-aria/listbox';
-import { ListLayout } from '@react-stately/layout';
+import { mergeProps } from '@react-aria/utils';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
+import { useCollator } from '@react-aria/i18n';
+import { ListLayout } from '@react-stately/layout';
 import { ListBoxContext } from './ListBoxContext';
 import { Option } from './index.js';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';

package/lib/components/ListBox/ListBox.test.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import React from 'react';
 import { axe } from 'jest-axe';
-import { Section } from 'react-stately';
 import { useListState } from '@react-stately/list';
 import { render, screen } from '@testing-library/react';
+import { Section } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import ListBox from '.';
 import { Item } from '../../index';

package/lib/components/ListBox/ListBoxSection.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useLocale } from '@react-aria/i18n';
 import { useListBoxSection } from '@react-aria/listbox';
+import { useLocale } from '@react-aria/i18n';
 import { layoutInfoToStyle, useVirtualizerItem } from '@react-aria/virtualizer';
 import { ListBoxContext } from './ListBoxContext';
 import Box from '../Box';
@@ -43,7 +43,7 @@ var ListBoxSection = function ListBoxSection(props) {
   }, groupProps), item.key !== state.collection.getFirstKey() && ___EmotionJSX(Separator, {
     mt: "0px"
   }), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
-    variant: "listBox.sectionTitle"
+    variant: "boxes.listBoxSectionTitle"
   }), item.rendered)), ___EmotionJSX(Box, {
     style: layoutInfoToStyle(reusableView.layoutInfo, direction)
   }, children));

package/lib/components/ListBox/Option.js

@@ -16,9 +16,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, useRef, useImperativeHandle, useContext } from 'react';
-import CircleSmallIcon from 'mdi-react/CircleSmallIcon';
 import PropTypes from 'prop-types';
 import { useOption } from '@react-aria/listbox';
+import CircleSmallIcon from 'mdi-react/CircleSmallIcon';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';

package/lib/components/ListItem/ListItem.js

@@ -33,7 +33,7 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     role: "listitem",
     ref: ref,
     as: "li",
-    variant: "listItem.container",
+    variant: "boxes.listItem",
     isRow: true
   }, hoverProps, others), children);
 });

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

@@ -7,12 +7,13 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React from 'react';
-import isChromatic from 'chromatic/isChromatic';
+import { Item } from '@react-stately/collections';
 import CreateIcon from 'mdi-react/CreateIcon';
-import FormSelectIcon from 'mdi-react/FormSelectIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import { Item, useAsyncList } from 'react-stately';
+import FormSelectIcon from 'mdi-react/FormSelectIcon';
+import { useAsyncList } from '@react-stately/data';
 import { action } from '@storybook/addon-actions';
+import isChromatic from 'chromatic/isChromatic';
 import ListView from '.';
 import Box from '../Box/Box';
 import Icon from '../Icon';

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

@@ -4,9 +4,9 @@ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import React from 'react';
 import _ from 'lodash';
-import { FocusScope } from 'react-aria';
-import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
+import { FocusScope } from '@react-aria/focus';
+import { Item } from '@react-stately/collections';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import ListView from './ListView';

package/lib/components/ListViewItem/ListViewItem.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useContext, useRef } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
-import { mergeProps, useFocusRing } from 'react-aria';
 import { useListItem } from '@react-aria/list';
 import { useHover } from '@react-aria/interactions';
 import { ListViewContext } from '../ListView/ListViewContext';
@@ -70,9 +71,9 @@ var ListViewItem = function ListViewItem(props) {
       outline: 'none'
     }
   }), ___EmotionJSX(Box, _extends({
-    as: "div",
-    variant: "listViewItem.container"
+    as: "div"
   }, gridCellProps, {
+    variant: "boxes.listViewItem",
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,
     isSelected: isSelected,

package/lib/components/Menu/Menu.js

@@ -19,9 +19,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useFocusRing, useMenu } from 'react-aria';
-import { useTreeState } from 'react-stately';
-import { useSyncRef } from '@react-aria/utils';
+import { useMenu } from '@react-aria/menu';
+import { useTreeState } from '@react-stately/tree';
+import { useFocusRing } from '@react-aria/focus';
+import { useSyncRef, mergeProps } from '@react-aria/utils';
 import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
 import MenuItem from '../MenuItem';

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Item } from 'react-stately';
+import { Item } from '@react-stately/collections';
 import Menu from '../Menu';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/MenuItem/MenuItem.js

@@ -4,7 +4,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["isSeparator", "isPressed", "data-id"];
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useMenuItem } from 'react-aria';
+import { mergeProps } from '@react-aria/utils';
+import { useMenuItem } from '@react-aria/menu';
 import { useFocus, useHover, usePress } from '@react-aria/interactions';
 import { useMenuContext } from '../../context/MenuContext';
 import { usePropWarning, useStatusClasses } from '../../hooks';

package/lib/components/Messages/Message.js

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

package/lib/components/Messages/Messages.js

@@ -26,7 +26,7 @@ var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useListState(props);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
-    variant: "message.wrapper"
+    variant: "messages.wrapper"
   }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(Message, {
       key: item.key,

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

@@ -19,8 +19,8 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useEffect, useReducer, useState } from 'react';
+import { Item } from '@react-stately/collections';
 import AccountIcon from 'mdi-react/AccountIcon';
-import { Item } from 'react-stately';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, Button, Messages } from '../..';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';

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

@@ -3,7 +3,7 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
-import { Item } from 'react-stately';
+import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import AccountIcon from 'mdi-react/AccountIcon';
 import axeTest from '../../utils/testUtils/testAxe';

package/lib/components/Modal/Modal.js

@@ -16,13 +16,16 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, useRef, useImperativeHandle } from 'react';
-import CloseIcon from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
-import { FocusScope, OverlayContainer, useDialog, useModal, useOverlay, usePreventScroll } from 'react-aria';
+import { useOverlay, usePreventScroll, useModal, OverlayContainer } from '@react-aria/overlays';
+import { useDialog } from '@react-aria/dialog';
+import { FocusScope } from '@react-aria/focus';
+import CloseIcon from 'mdi-react/CloseIcon';
 import Box from '../Box';
 import IconButton from '../IconButton';
 import Icon from '../Icon';
 import Text from '../Text';
+import { useStatusClasses, useDeprecationWarning } from '../../hooks';
 /**
   * Modals are overlays that interrupt a user’s workflow to convey an important message.
   * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
@@ -85,7 +88,16 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
       dialogProps = _useDialog.dialogProps,
       titleProps = _useDialog.titleProps;
 
+  var _useStatusClasses = useStatusClasses(className, {
+    isDarkMode: others.variant === 'modal.dark'
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  useDeprecationWarning('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
+    isActive: others.variant === 'modal.dark'
+  });
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Box, _extends({
+    className: classNames,
     variant: "modal.container"
   }, others, containerProps), ___EmotionJSX(FocusScope, {
     contain: true,