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

package/lib/components/ListItem/ListItem.js

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

package/lib/components/ListItem/ListItem.styles.js

@@ -0,0 +1,21 @@
+var container = {
+  display: 'flex',
+  flex: '1 1 0px',
+  cursor: 'pointer',
+  height: '64px',
+  pl: 'md',
+  pr: 'sm',
+  pt: 16,
+  pb: 16,
+  justifyContent: 'center',
+  bg: 'accent.99',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white'
+  }
+};
+export default {
+  container: container
+};

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

@@ -7,13 +7,12 @@ 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 { Item } from '@react-stately/collections';
+import isChromatic from 'chromatic/isChromatic';
 import CreateIcon from 'mdi-react/CreateIcon';
-import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import FormSelectIcon from 'mdi-react/FormSelectIcon';
-import { useAsyncList } from '@react-stately/data';
+import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import { Item, useAsyncList } from 'react-stately';
 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,8 +1,7 @@
 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';
@@ -71,9 +70,9 @@ var ListViewItem = function ListViewItem(props) {
       outline: 'none'
     }
   }), ___EmotionJSX(Box, _extends({
-    as: "div"
+    as: "div",
+    variant: "listViewItem.container"
   }, gridCellProps, {
-    variant: "boxes.listViewItem",
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,
     isSelected: isSelected,

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

@@ -0,0 +1,69 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _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; }
+
+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'
+      }
+    }
+  }
+});
+
+export default {
+  container: container,
+  linkedViewContainer: linkedViewContainer
+};

package/lib/components/Menu/Menu.js

@@ -19,10 +19,9 @@ 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 { 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 { mergeProps, useFocusRing, useMenu } from 'react-aria';
+import { useTreeState } from 'react-stately';
+import { useSyncRef } 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/collections';
+import { Item } from 'react-stately';
 import Menu from '../Menu';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/MenuItem/MenuItem.js

@@ -4,8 +4,7 @@ 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 } from '@react-aria/utils';
-import { useMenuItem } from '@react-aria/menu';
+import { mergeProps, useMenuItem } from 'react-aria';
 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: "messages.transition",
+    variant: "message.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: "messages.item",
+    variant: "message.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: "close",
+    variant: "messageCloseButton",
     className: statusClasses,
     color: color
   }))));

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

@@ -0,0 +1,99 @@
+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'
+  }
+};
+export 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'
+      }
+    }
+  }
+};
+export default {
+  wrapper: wrapper,
+  transition: transition,
+  item: item,
+  messageCloseButton: messageCloseButton
+};

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: "messages.wrapper"
+    variant: "message.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/collections';
+import { Item } from 'react-stately';
 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,16 +16,13 @@ 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 PropTypes from 'prop-types';
-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 PropTypes from 'prop-types';
+import { FocusScope, OverlayContainer, useDialog, useModal, useOverlay, usePreventScroll } from 'react-aria';
 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,
@@ -88,16 +85,7 @@ 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,

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

@@ -12,7 +12,7 @@ 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 { text } from '../variants/text';
+import { text } from '../Text/Text.styles';
 var closeIcon = {
   color: 'neutral.40'
 };
@@ -39,27 +39,23 @@ 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.title), {}, {
   mr: 'sm',
-  fontWeight: 3,
-  '.is-dark-mode &': {
-    color: 'white'
-  }
+  fontWeight: 3
 });
 
+export var modalCloseButton = {
+  position: 'absolute',
+  top: 14,
+  right: 10
+};
 export default {
   closeIcon: closeIcon,
   container: container,
   content: content,
-  dark: dark,
-  title: title
+  title: title,
+  modalCloseButton: modalCloseButton
 };

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -23,15 +23,15 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import Clear from 'mdi-react/CloseIcon';
-import { FocusScope } from '@react-aria/focus';
+import PropTypes from 'prop-types';
+import { DismissButton, FocusScope, useOverlayPosition } from 'react-aria';
 import { useFilter } from '@react-aria/i18n';
-import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { useListState } from '@react-stately/list';
-import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
+import { Box, Badge, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { usePropWarning } from '../../hooks';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -347,11 +347,11 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     });
 
     if (item) {
-      return ___EmotionJSX(Chip, {
+      return ___EmotionJSX(Badge, {
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "variants.boxes.readOnlyChip",
+        variant: "readOnlyBadge",
         bg: "white",
         textProps: {
           sx: {
@@ -365,10 +365,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 
   var multivaluesFieldChip = function multivaluesFieldChip(item) {
-    return ___EmotionJSX(Chip, _extends({
+    return ___EmotionJSX(Badge, _extends({
       key: item.key,
       role: "presentation",
-      variant: "variants.boxes.selectedItemChip",
+      variant: "selectedItemBadge",
       bg: "active",
       label: item.name,
       slots: item.slots
@@ -377,7 +377,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       onPress: function onPress() {
         return deleteItem(item.key);
       },
-      variant: "buttons.chipDeleteButton"
+      variant: "badge.deleteButton"
     }, item.buttonProps), ___EmotionJSX(Icon, {
       icon: Clear,
       color: "white",
@@ -473,10 +473,7 @@ var MultivaluesField = /*#__PURE__*/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.shape({}),
-
+MultivaluesField.propTypes = _objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: isIterableProp,
 
@@ -599,7 +596,7 @@ MultivaluesField.propTypes = _objectSpread({
 
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,

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

@@ -17,12 +17,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import { Box, Item, MultivaluesField, OverlayProvider, Icon } 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 {
   title: 'Form/MultivaluesField',
   component: MultivaluesField,
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -69,7 +70,7 @@ export default {
         type: 'text'
       }
     }
-  }, ariaAttributeBaseArgTypes),
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {
@@ -214,11 +215,11 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
@@ -231,11 +232,11 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
@@ -248,11 +249,11 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {

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

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

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

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