@pingux/astro 1.42.0 → 2.0.0-alpha.1

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.
 

package/lib/cjs/components/Modal/Modal.js

@@ -36,15 +36,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _overlays = require("@react-aria/overlays");
-
-var _dialog = require("@react-aria/dialog");
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _focus = require("@react-aria/focus");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+var _reactAria = require("react-aria");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -54,8 +50,6 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
-var _hooks = require("../../hooks");
-
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
@@ -113,33 +107,24 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }); // Handle interacting outside the dialog and pressing
   // the Escape key to close the modal.
 
-  var _useOverlay = (0, _overlays.useOverlay)(contentProps, modalRef),
+  var _useOverlay = (0, _reactAria.useOverlay)(contentProps, modalRef),
       overlayProps = _useOverlay.overlayProps; // Prevent scrolling while the modal is open, and hide content
   // outside the modal from screen readers.
 
 
-  (0, _overlays.usePreventScroll)();
+  (0, _reactAria.usePreventScroll)();
 
-  var _useModal = (0, _overlays.useModal)(),
+  var _useModal = (0, _reactAria.useModal)(),
       modalProps = _useModal.modalProps; // Get props for the dialog and its title
 
 
-  var _useDialog = (0, _dialog.useDialog)(contentProps, modalRef),
+  var _useDialog = (0, _reactAria.useDialog)(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
       titleProps = _useDialog.titleProps;
 
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isDarkMode: others.variant === 'modal.dark'
-  }),
-      classNames = _useStatusClasses.classNames;
-
-  (0, _hooks.useDeprecationWarning)('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
-    isActive: others.variant === 'modal.dark'
-  });
-  return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    className: classNames,
+  return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.container"
-  }, others, containerProps), (0, _react2.jsx)(_focus.FocusScope, {
+  }, others, containerProps), (0, _react2.jsx)(_reactAria.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: hasAutoFocus

package/lib/cjs/{styles/variants/modal.js → components/Modal/Modal.styles.js}

@@ -22,11 +22,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports.modalCloseButton = exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _text = require("../variants/text");
+var _Text = require("../Text/Text.styles");
 
 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; }
 
@@ -58,28 +58,25 @@ var content = {
   pl: 'lg',
   maxWidth: '400px',
   boxShadow: 'standard',
-  borderRadius: 3,
-  '.is-dark-mode &': {
-    color: 'white',
-    bg: 'accent.5'
-  }
+  borderRadius: 3
 };
 
-var dark = _objectSpread({}, container);
-
-var title = _objectSpread(_objectSpread({}, _text.text.title), {}, {
+var title = _objectSpread(_objectSpread({}, _Text.text.title), {}, {
   mr: 'sm',
-  fontWeight: 3,
-  '.is-dark-mode &': {
-    color: 'white'
-  }
+  fontWeight: 3
 });
 
+var modalCloseButton = {
+  position: 'absolute',
+  top: 14,
+  right: 10
+};
+exports.modalCloseButton = modalCloseButton;
 var _default = {
   closeIcon: closeIcon,
   container: container,
   content: content,
-  dark: dark,
-  title: title
+  title: title,
+  modalCloseButton: modalCloseButton
 };
 exports["default"] = _default;

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -52,15 +52,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _focus = require("@react-aria/focus");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _i18n = require("@react-aria/i18n");
+var _reactAria = require("react-aria");
 
-var _overlays = require("@react-aria/overlays");
+var _i18n = require("@react-aria/i18n");
 
 var _utils = require("@react-aria/utils");
 
@@ -70,6 +68,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _hooks = require("../../hooks");
 
 var _ListBox = _interopRequireDefault(require("../ListBox"));
@@ -207,7 +207,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var listBoxRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     isOpen: isOpen,
     onClose: close,
     overlayRef: popoverRef,
@@ -398,11 +398,11 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     });
 
     if (item) {
-      return (0, _react2.jsx)(_.Chip, {
+      return (0, _react2.jsx)(_.Badge, {
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "variants.boxes.readOnlyChip",
+        variant: "readOnlyBadge",
         bg: "white",
         textProps: {
           sx: {
@@ -416,10 +416,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }));
 
   var multivaluesFieldChip = function multivaluesFieldChip(item) {
-    return (0, _react2.jsx)(_.Chip, (0, _extends2["default"])({
+    return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
       key: item.key,
       role: "presentation",
-      variant: "variants.boxes.selectedItemChip",
+      variant: "selectedItemBadge",
       bg: "active",
       label: item.name,
       slots: item.slots
@@ -428,7 +428,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       onPress: function onPress() {
         return deleteItem(item.key);
       },
-      variant: "buttons.chipDeleteButton"
+      variant: "badge.deleteButton"
     }, item.buttonProps), (0, _react2.jsx)(_.Icon, {
       icon: _CloseIcon["default"],
       color: "white",
@@ -449,7 +449,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
     return null;
   }));
-  var listbox = (0, _react2.jsx)(_focus.FocusScope, null, (0, _react2.jsx)(_overlays.DismissButton, {
+  var listbox = (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }), (0, _react2.jsx)(_.ScrollBox, scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], {
     ref: listBoxRef,
@@ -458,7 +458,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     hasNoEmptySelection: true,
     state: state,
     "aria-label": "List of options"
-  })), (0, _react2.jsx)(_overlays.DismissButton, {
+  })), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }));
 
@@ -523,10 +523,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     style: style
   }, listbox));
 });
-MultivaluesField.propTypes = _objectSpread({
-  /** Props object that is spread directly into the root (top-level) Box component. */
-  containerProps: _propTypes["default"].shape({}),
-
+MultivaluesField.propTypes = _objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: _isIterable.isIterableProp,
 
@@ -649,7 +646,7 @@ MultivaluesField.propTypes = _objectSpread({
 
   /** Determines the input status indicator and helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,