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

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

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

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

@@ -42,9 +42,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _menu = require("@react-aria/menu");
 
-var _reactStately = require("react-stately");
+var _tree = require("@react-stately/tree");
+
+var _focus = require("@react-aria/focus");
 
 var _utils = require("@react-aria/utils");
 
@@ -86,9 +88,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, _reactAria.mergeProps)(contextProps, props));
+  var completeProps = _objectSpread({}, (0, _utils.mergeProps)(contextProps, props));
 
-  var state = (0, _reactStately.useTreeState)(completeProps);
+  var state = (0, _tree.useTreeState)(completeProps);
   var menuRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -97,10 +99,10 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return menuRef.current;
   });
 
-  var _useMenu = (0, _reactAria.useMenu)(completeProps, state, menuRef),
+  var _useMenu = (0, _menu.useMenu)(completeProps, state, menuRef),
       menuProps = _useMenu.menuProps;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)({
+  var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
       isFocusVisible = _useFocusRing.isFocusVisible,
@@ -113,7 +115,7 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": _orientation["default"].VERTICAL
-  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, others, (0, _utils.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 _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 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)(_reactStately.Item, {
+  }, args), (0, _react2.jsx)(_collections.Item, {
     key: "edit",
     textValue: "Edit",
     "data-id": "edit"
-  }, (0, _react2.jsx)(_Text["default"], null, "Edit")), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Edit")), (0, _react2.jsx)(_collections.Item, {
     key: "duplicate",
     textValue: "Duplicate",
     "data-id": "duplicate"
-  }, (0, _react2.jsx)(_Text["default"], null, "Duplicate")), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Duplicate")), (0, _react2.jsx)(_collections.Item, {
     key: "delete",
     textValue: "Delete",
     "data-id": "delete"

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

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

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: "message.wrapper"
+    variant: "messages.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,9 +46,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+var _collections = require("@react-stately/collections");
 
-var _reactStately = require("react-stately");
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
@@ -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)(_reactStately.Item, {
+  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_collections.Item, {
     key: "message1",
     "data-id": "message1"
-  }, "Here is a very neutral thing"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Here is a very neutral thing"), (0, _react2.jsx)(_collections.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)(_reactStately.Item, item, item.text);
+      return (0, _react2.jsx)(_collections.Item, item, item.text);
     })
   );
 };
@@ -161,7 +161,7 @@ var Controlled = function Controlled(args) {
     items: items,
     onClose: removeMessage
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
   });
 };
 
@@ -202,22 +202,22 @@ var ControlledWithButton = function ControlledWithButton(args) {
     items: items,
     onClose: removeMessage
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
   }));
 };
 
 exports.ControlledWithButton = ControlledWithButton;
 
 var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
-  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_collections.Item, {
     bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]
-  }, "We have to take a look with this camera."), (0, _react2.jsx)(_reactStately.Item, {
+  }, "We have to take a look with this camera."), (0, _react2.jsx)(_collections.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)(_reactStately.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)(_collections.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)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
   }));
 };
 
@@ -316,7 +316,7 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       width: '45%'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_collections.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)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_collections.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)(_reactStately.Item, item, item.node || item.text);
+    return (0, _react2.jsx)(_collections.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 _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 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)(_reactStately.Item, {
+  return renderFn((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "message1",
     "data-id": "message1"
-  }, "Here is a very neutral thing"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Here is a very neutral thing"), (0, _react2.jsx)(_collections.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)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_collections.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,11 +36,15 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _overlays = require("@react-aria/overlays");
+
+var _dialog = require("@react-aria/dialog");
+
+var _focus = require("@react-aria/focus");
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -50,6 +54,8 @@ 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"];
@@ -107,24 +113,33 @@ 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, _reactAria.useOverlay)(contentProps, modalRef),
+  var _useOverlay = (0, _overlays.useOverlay)(contentProps, modalRef),
       overlayProps = _useOverlay.overlayProps; // Prevent scrolling while the modal is open, and hide content
   // outside the modal from screen readers.
 
 
-  (0, _reactAria.usePreventScroll)();
+  (0, _overlays.usePreventScroll)();
 
-  var _useModal = (0, _reactAria.useModal)(),
+  var _useModal = (0, _overlays.useModal)(),
       modalProps = _useModal.modalProps; // Get props for the dialog and its title
 
 
-  var _useDialog = (0, _reactAria.useDialog)(contentProps, modalRef),
+  var _useDialog = (0, _dialog.useDialog)(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
       titleProps = _useDialog.titleProps;
 
-  return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  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,
     variant: "modal.container"
-  }, others, containerProps), (0, _react2.jsx)(_reactAria.FocusScope, {
+  }, others, containerProps), (0, _react2.jsx)(_focus.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: hasAutoFocus

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

@@ -52,14 +52,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _focus = require("@react-aria/focus");
 
 var _i18n = require("@react-aria/i18n");
 
+var _overlays = require("@react-aria/overlays");
+
 var _utils = require("@react-aria/utils");
 
 var _list = require("@react-stately/list");
@@ -68,8 +70,6 @@ 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, _reactAria.useOverlayPosition)({
+  var _useOverlayPosition = (0, _overlays.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)(_.Badge, {
+      return (0, _react2.jsx)(_.Chip, {
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "readOnlyBadge",
+        variant: "variants.boxes.readOnlyChip",
         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)(_.Badge, (0, _extends2["default"])({
+    return (0, _react2.jsx)(_.Chip, (0, _extends2["default"])({
       key: item.key,
       role: "presentation",
-      variant: "selectedItemBadge",
+      variant: "variants.boxes.selectedItemChip",
       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: "badge.deleteButton"
+      variant: "buttons.chipDeleteButton"
     }, 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)(_reactAria.FocusScope, null, (0, _react2.jsx)(_reactAria.DismissButton, {
+  var listbox = (0, _react2.jsx)(_focus.FocusScope, null, (0, _react2.jsx)(_overlays.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)(_reactAria.DismissButton, {
+  })), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: close
   }));
 
@@ -523,7 +523,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     style: style
   }, listbox));
 });
-MultivaluesField.propTypes = _objectSpread(_objectSpread({
+MultivaluesField.propTypes = _objectSpread({
+  /** Props object that is spread directly into the root (top-level) Box component. */
+  containerProps: _propTypes["default"].shape({}),
+
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: _isIterable.isIterableProp,
 
@@ -646,7 +649,7 @@ MultivaluesField.propTypes = _objectSpread(_objectSpread({
 
   /** Determines the input status indicator and helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,

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

@@ -40,8 +40,6 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -57,7 +55,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -104,7 +102,7 @@ var _default = {
         type: 'text'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
+  }, _ariaAttributes.ariaAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {
@@ -250,11 +248,11 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   chipProps: {
-    variant: 'itemBadgeWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'buttons.chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -267,11 +265,11 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   chipProps: {
-    variant: 'itemBadgeWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'buttons.chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -284,11 +282,11 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   chipProps: {
-    variant: 'itemBadgeWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'buttons.chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {

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

@@ -616,13 +616,13 @@ test('default selected keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstBadge = _testWrapper.screen.getByText(items[1].name);
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
 
-  expect(firstBadge).toBeInTheDocument();
+  expect(firstChip).toBeInTheDocument();
 
-  var secondBadge = _testWrapper.screen.getByText(items[2].name);
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondBadge).toBeInTheDocument();
+  expect(secondChip).toBeInTheDocument();
 });
 test('selected keys', function () {
   getComponent({
@@ -633,13 +633,13 @@ test('selected keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstBadge = _testWrapper.screen.getByText(items[1].name);
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
 
-  expect(firstBadge).toBeInTheDocument();
+  expect(firstChip).toBeInTheDocument();
 
-  var secondBadge = _testWrapper.screen.getByText(items[2].name);
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondBadge).toBeInTheDocument();
+  expect(secondChip).toBeInTheDocument();
 });
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
   var _getComponent, container, results;
@@ -673,16 +673,16 @@ test('read only keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstBadge = _testWrapper.screen.getByText(items[1].name);
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
 
-  var deleteButton1 = firstBadge.nextSibling;
-  expect(firstBadge).toBeInTheDocument();
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
   expect(deleteButton1).toBeNull();
 
-  var secondBadge = _testWrapper.screen.getByText(items[2].name);
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondBadge).toBeInTheDocument();
-  var deleteButton2 = firstBadge.nextSibling;
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
   expect(deleteButton2).toBeNull();
 });
 test('passing helper text should display it and correct aria attributes on input', function () {

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

@@ -147,7 +147,7 @@ var data = [{
   children: [(0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Dashboard Link Group",
     id: "Dashboard Link Group",
-    variant: "variants.navBar.itemButton",
+    variant: "buttons.navItemButton",
     href: "https://pingidentity.com/"
   }, "Group"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Dashboard Link Populations",