@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/components/Badge/Badge.styles.js

@@ -0,0 +1,163 @@
+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; }
+
+import { focusWithCroppedOutline, defaultFocus } from '../Button/Buttons.styles';
+export var baseBadge = {
+  cursor: 'default',
+  p: '3px 5px 4px 5px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '50px',
+  alignSelf: 'flex-start',
+  display: 'inline-flex !important',
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
+};
+
+var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  alignSelf: 'center',
+  cursor: 'default',
+  height: '100%',
+  m: 5,
+  mr: 10,
+  ml: 0,
+  '& span': {
+    mr: '2px'
+  }
+});
+
+var selectedItemBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
+  py: 3,
+  pr: 0,
+  my: 3
+});
+
+var readOnlyBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
+  p: 2.54,
+  border: '1px solid',
+  borderColor: 'neutral.80'
+});
+
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
+  p: 3,
+  my: 0,
+  backgroundColor: 'white',
+  '& span': {
+    color: 'text.primary',
+    mr: '2px',
+    lineHeight: '16px'
+  },
+  maxHeight: '22px'
+});
+
+var environmentBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  alignSelf: 'center',
+  height: '17px',
+  minWidth: 'fit-content',
+  ml: 8,
+  '& span': {
+    fontSize: 'xs',
+    lineHeight: 1
+  }
+});
+
+export var deleteButton = {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14,
+  mx: '3px !important'
+};
+export var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  '&.is-focused': _objectSpread({
+    bg: 'accent.40'
+  }, focusWithCroppedOutline),
+  '&.is-hovered': {
+    bg: 'accent.40'
+  },
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+});
+export var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  path: {
+    fill: 'neutral.40'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    backgroundColor: '#e5e9f8 !important',
+    path: {
+      fill: 'neutral.40'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: '#4462ED !important'
+  }
+});
+
+var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  minHeight: '17px',
+  p: '2px 5px 2px 5px',
+  '& span': {
+    fontSize: '11px',
+    textTransform: 'uppercase'
+  }
+});
+
+var countBadge = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+
+var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20',
+    fontSize: '11px',
+    textTransform: 'uppercase'
+  }
+});
+
+export default {
+  baseBadge: baseBadge,
+  environmentBadge: environmentBadge,
+  itemBadgeWithSlot: itemBadgeWithSlot,
+  multivaluesBadge: multivaluesBadge,
+  readOnlyBadge: readOnlyBadge,
+  selectedItemBadge: selectedItemBadge,
+  deleteButton: deleteButton,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
+  badgeDeleteButton: badgeDeleteButton
+};

package/lib/components/{Chip → Badge}/Badge.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Earth from 'mdi-react/EarthIcon';
-import Chip from '../Chip/Chip';
+import Badge from './Badge';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import axeTest from '../../utils/testUtils/testAxe';
@@ -15,17 +15,17 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Chip, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(Badge, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
 axeTest(getComponent);
-test('renders Chip component', function () {
+test('renders Badge component', function () {
   getComponent();
   var chip = screen.getByTestId(testId);
   expect(chip).toBeInTheDocument();
 });
-test('renders children within Chip component', function () {
+test('renders children within Badge component', function () {
   var children = ___EmotionJSX(Button, null);
 
   getComponent({
@@ -34,7 +34,7 @@ test('renders children within Chip component', function () {
   var mockedChildren = screen.getByRole('button');
   expect(mockedChildren).toBeInTheDocument();
 });
-test('renders Chip component with uppercase', function () {
+test('renders Badge component with uppercase', function () {
   var label = 'uppercase';
   var isUppercase = true;
   getComponent({
@@ -43,7 +43,7 @@ test('renders Chip component with uppercase', function () {
   });
   expect(screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
 });
-test('renders Chip component with custom alignment', function () {
+test('renders Badge component with custom alignment', function () {
   var align = 'right';
   getComponent({
     align: align

package/lib/components/Badge/index.js

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

package/lib/components/Box/Box.js

@@ -31,7 +31,7 @@ var ExtendedBox = /*#__PURE__*/_styled(ThemeUIBox, process.env.NODE_ENV === "pro
 } : {
   target: "e146bxl90",
   label: "ExtendedBox"
-})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3hlcy5iYXNlXCJcbiAgICAgIGZvbnRTaXplPXtjdXN0b21Gb250U2l6ZX1cbiAgICAgIHsuLi5vdGhlcnN9XG4gICAgICBzeD17Y3VzdG9tfVxuICAgIC8+XG4gICk7XG59KTtcblxuQm94LnByb3BUeXBlcyA9IHtcbiAgLyoqIFRoZSBiYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBib3guICovXG4gIGJnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAvKiogV2hldGhlciB0aGUgYm94IGlzIGRpc2FibGVkLiAqL1xuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuYm9vbCwgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKiogVGhlIGJhc2UgSFRNTCB0YWcgbmFtZSBvciBSZWFjdCBjb21wb25lbnQgdHlwZSB0byByZW5kZXIgKi9cbiAgYXM6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5lbGVtZW50VHlwZV0pLFxuICAvKiogV2hlbiB0cnVlLCBkaXNwbGF5IGFzIGEgcm93IHJhdGhlciB0aGFuIGEgY29sdW1uLiAqL1xuICBpc1JvdzogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBHYXAgYmV0d2VlbiBpdGVtcywgd2hldGhlciBpbiBhIHJvdyBvciBjb2x1bW4uICovXG4gIGdhcDogc3R5bGVQcm9wVHlwZSxcbiAgZm9udFNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkJveC5kZWZhdWx0UHJvcHMgPSB7XG4gIGFzOiAnZGl2JyxcbiAgaXNSb3c6IGZhbHNlLFxuICBpc0Rpc2FibGVkOiBmYWxzZSxcbn07XG5cbkJveC5kaXNwbGF5TmFtZSA9ICdCb3gnO1xuXG5leHBvcnQgZGVmYXVsdCBCb3g7XG4iXX0= */");
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3guYmFzZVwiXG4gICAgICBmb250U2l6ZT17Y3VzdG9tRm9udFNpemV9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgICAgc3g9e2N1c3RvbX1cbiAgICAvPlxuICApO1xufSk7XG5cbkJveC5wcm9wVHlwZXMgPSB7XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgYm94LiAqL1xuICBiZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFdoZXRoZXIgdGhlIGJveCBpcyBkaXNhYmxlZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmJvb2wsIFByb3BUeXBlcy5vYmplY3RdKSxcbiAgLyoqIFRoZSBiYXNlIEhUTUwgdGFnIG5hbWUgb3IgUmVhY3QgY29tcG9uZW50IHR5cGUgdG8gcmVuZGVyICovXG4gIGFzOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMuZWxlbWVudFR5cGVdKSxcbiAgLyoqIFdoZW4gdHJ1ZSwgZGlzcGxheSBhcyBhIHJvdyByYXRoZXIgdGhhbiBhIGNvbHVtbi4gKi9cbiAgaXNSb3c6IFByb3BUeXBlcy5ib29sLFxuICAvKiogR2FwIGJldHdlZW4gaXRlbXMsIHdoZXRoZXIgaW4gYSByb3cgb3IgY29sdW1uLiAqL1xuICBnYXA6IHN0eWxlUHJvcFR5cGUsXG4gIGZvbnRTaXplOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubnVtYmVyXSksXG59O1xuXG5Cb3guZGVmYXVsdFByb3BzID0ge1xuICBhczogJ2RpdicsXG4gIGlzUm93OiBmYWxzZSxcbiAgaXNEaXNhYmxlZDogZmFsc2UsXG59O1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
 
 var Box = /*#__PURE__*/forwardRef(function (props, ref) {
   var flexDirection = props.flexDirection,
@@ -72,7 +72,7 @@ var Box = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     display: "flex",
     flexDirection: fd,
-    variant: "boxes.base",
+    variant: "box.base",
     fontSize: customFontSize
   }, others, {
     sx: custom

package/lib/components/Box/Box.styles.js

@@ -0,0 +1,6 @@
+var base = {
+  display: 'flex'
+};
+export default {
+  base: base
+};

package/lib/components/Bracket/Bracket.js

@@ -18,7 +18,7 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
     return bracketRef.current;
   });
   return ___EmotionJSX(Box, _extends({
-    variant: "boxes.bracketBase"
+    variant: "bracket.base"
   }, others), !isLast && ___EmotionJSX(Box, {
     width: 15,
     sx: {

package/lib/components/Bracket/Bracket.stories.js

@@ -1,6 +1,6 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import { Box, Bracket, Chip, Text } from '../../index';
+import { Box, Bracket, Badge, Text } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import BracketReadme from './Bracket.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -28,7 +28,7 @@ export var Default = function Default() {
     field3: 'UX Team',
     key: 'Group2Field'
   }];
-  var customChipStyles = {
+  var customBadgeStyles = {
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
@@ -42,11 +42,11 @@ export var Default = function Default() {
     bg: "background"
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Chip, {
+  }, ___EmotionJSX(Badge, {
     label: "Any",
     bg: "neutral.20",
     mr: "sm",
-    sx: customChipStyles,
+    sx: customBadgeStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
     return ___EmotionJSX(Box, {
@@ -56,7 +56,8 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      variant: "forms.input.container",
+      ml: "xs",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       alignItems: "center",
@@ -70,11 +71,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Chip, {
+    }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
+      sx: customBadgeStyles,
       mr: "sm",
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));

package/lib/components/Bracket/Bracket.styles.js

@@ -0,0 +1,9 @@
+var base = {
+  width: '15px',
+  pl: '5px',
+  ml: '5px',
+  position: 'relative'
+};
+export default {
+  base: base
+};

package/lib/{styles/variants/bidirectionalIconButton.js → components/Breadcrumbs/Breadcrumb.styles.js}

@@ -12,23 +12,34 @@ 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 { defaultFocus } from './buttons';
-var bidirectionalIconButton = {
-  border: '1px solid',
-  outline: 'none',
-  height: '24px',
-  width: '24px',
+import { base } from '../Button/Buttons.styles';
+var link = {
   color: 'active',
-  borderRadius: '12px',
-  borderColor: 'active',
+  fontFamily: 'standard',
+  fontSize: '15px',
+  textDecoration: 'none',
+  outline: 'none',
   '&.is-hovered': {
-    color: 'accent.40',
-    borderColor: 'accent.40'
+    textDecoration: 'underline'
   },
-  '&.is-pressed': {
-    color: 'accent.20',
-    borderColor: 'accent.20'
+  '&.is-focused': {
+    textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  },
+  '&.is-current': _objectSpread(_objectSpread({
+    pointerEvents: 'none'
+  }, base), {}, {
+    fontWeight: 1
+  })
+};
+var containerLi = {
+  'a.is-hovered.is-current ': {
+    textDecoration: 'none'
+  }
 };
-export default bidirectionalIconButton;
+export default {
+  link: link,
+  containerLi: containerLi
+};

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -15,10 +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, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
-import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
 import { omit } from 'lodash/object';
+import PropTypes from 'prop-types';
+import { mergeProps, useBreadcrumbItem } from 'react-aria';
 import { usePropWarning } from '../../hooks/';
 import { Button, IconButton, Text, Link } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -5,9 +5,8 @@ import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
-import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
+import { mergeProps, useBreadcrumbs } from 'react-aria';
 import { Box, Icon } from '../../index';
 import { usePropWarning } from '../../hooks/';
 import BreadcrumbItem from './BreadcrumbItem';
@@ -44,13 +43,13 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       as: "li",
       key: "li-".concat(child.key),
-      variant: "text.breadcrumbLi"
+      variant: "variants.breadcrumb.containerLi"
     }, ___EmotionJSX(BreadcrumbItem, _extends({
       "data-id": child['data-id'],
       isCurrent: isCurrentItem,
       onAction: onAction,
       actionKey: child.key,
-      variant: "text.breadcrumbLink"
+      variant: "variants.breadcrumb.link"
     }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       "aria-hidden": "true",
       icon: icon,

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Item } from '@react-stately/collections';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import { Item } from 'react-stately';
+import { action } from '@storybook/addon-actions';
 import Breadcrumbs from './Breadcrumbs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import { mergeProps } from '@react-aria/utils';
-import CreateIcon from 'mdi-react/CreateIcon';
-import { Item } from '@react-stately/collections';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import CreateIcon from 'mdi-react/CreateIcon';
+import { mergeProps } from 'react-aria';
+import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import Breadcrumbs from './Breadcrumbs';
 import axeTest from '../../utils/testUtils/testAxe';

package/lib/components/Button/Button.js

@@ -17,12 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Button as ThemeUIButton } from 'theme-ui';
-import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import { useStatusClasses, usePropWarning, useAriaLabelWarning, useDeprecationWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning, useAriaLabelWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -72,15 +70,6 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
-  useDeprecationWarning('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
-    isActive: props.variant === 'icon'
-  });
-  useDeprecationWarning('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
-    isActive: props.variant === 'danger'
-  });
-  useDeprecationWarning('The "text" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `link` variant instead.', {
-    isActive: props.variant === 'text'
-  });
   var ariaLabel = props['aria-label'];
   useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
   return ___EmotionJSX(ThemeUIButton, _extends({

package/lib/components/Button/Button.stories.js

@@ -16,7 +16,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
 export default {
   title: 'Components/Button',
   component: Button,