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

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

@@ -36,7 +36,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactAria = require("react-aria");
+var _overlays = require("@react-aria/overlays");
 
 var _uuid = require("uuid");
 
@@ -147,7 +147,7 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'red',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);
@@ -173,7 +173,7 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'black',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(key) {
           return onFieldValueChange(key, id);
@@ -200,7 +200,7 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'blue',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);

package/lib/cjs/components/ArrayField/ArrayFieldItem.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["id", "onComponentRender", "fieldValue", "isDisabled", "onFieldDelete", "onFieldValueChange", "renderField"];
+
+var ArrayFieldItem = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var id = _ref.id,
+      onComponentRender = _ref.onComponentRender,
+      fieldValue = _ref.fieldValue,
+      isDisabled = _ref.isDisabled,
+      onFieldDelete = _ref.onFieldDelete,
+      onFieldValueChange = _ref.onFieldValueChange,
+      renderField = _ref.renderField,
+      otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react2.jsx)(_Box["default"], {
+    as: "li",
+    mb: "xs"
+  }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+});
+
+ArrayFieldItem.propTypes = {
+  id: _propTypes["default"].string,
+  onComponentRender: _propTypes["default"].func,
+  fieldValue: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  onFieldDelete: _propTypes["default"].func,
+  onFieldValueChange: _propTypes["default"].func,
+  renderField: _propTypes["default"].func
+};
+var _default = ArrayFieldItem;
+exports["default"] = _default;

package/lib/cjs/components/Box/Box.js

@@ -69,7 +69,7 @@ var ExtendedBox = ( /*#__PURE__*/0, _base["default"])(_themeUi.Box, process.env.
 } : {
   target: "e146bxl90",
   label: "ExtendedBox"
-})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3guYmFzZVwiXG4gICAgICBmb250U2l6ZT17Y3VzdG9tRm9udFNpemV9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgICAgc3g9e2N1c3RvbX1cbiAgICAvPlxuICApO1xufSk7XG5cbkJveC5wcm9wVHlwZXMgPSB7XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgYm94LiAqL1xuICBiZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFdoZXRoZXIgdGhlIGJveCBpcyBkaXNhYmxlZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmJvb2wsIFByb3BUeXBlcy5vYmplY3RdKSxcbiAgLyoqIFRoZSBiYXNlIEhUTUwgdGFnIG5hbWUgb3IgUmVhY3QgY29tcG9uZW50IHR5cGUgdG8gcmVuZGVyICovXG4gIGFzOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMuZWxlbWVudFR5cGVdKSxcbiAgLyoqIFdoZW4gdHJ1ZSwgZGlzcGxheSBhcyBhIHJvdyByYXRoZXIgdGhhbiBhIGNvbHVtbi4gKi9cbiAgaXNSb3c6IFByb3BUeXBlcy5ib29sLFxuICAvKiogR2FwIGJldHdlZW4gaXRlbXMsIHdoZXRoZXIgaW4gYSByb3cgb3IgY29sdW1uLiAqL1xuICBnYXA6IHN0eWxlUHJvcFR5cGUsXG4gIGZvbnRTaXplOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubnVtYmVyXSksXG59O1xuXG5Cb3guZGVmYXVsdFByb3BzID0ge1xuICBhczogJ2RpdicsXG4gIGlzUm93OiBmYWxzZSxcbiAgaXNEaXNhYmxlZDogZmFsc2UsXG59O1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3hlcy5iYXNlXCJcbiAgICAgIGZvbnRTaXplPXtjdXN0b21Gb250U2l6ZX1cbiAgICAgIHsuLi5vdGhlcnN9XG4gICAgICBzeD17Y3VzdG9tfVxuICAgIC8+XG4gICk7XG59KTtcblxuQm94LnByb3BUeXBlcyA9IHtcbiAgLyoqIFRoZSBiYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBib3guICovXG4gIGJnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAvKiogV2hldGhlciB0aGUgYm94IGlzIGRpc2FibGVkLiAqL1xuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuYm9vbCwgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKiogVGhlIGJhc2UgSFRNTCB0YWcgbmFtZSBvciBSZWFjdCBjb21wb25lbnQgdHlwZSB0byByZW5kZXIgKi9cbiAgYXM6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5lbGVtZW50VHlwZV0pLFxuICAvKiogV2hlbiB0cnVlLCBkaXNwbGF5IGFzIGEgcm93IHJhdGhlciB0aGFuIGEgY29sdW1uLiAqL1xuICBpc1JvdzogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBHYXAgYmV0d2VlbiBpdGVtcywgd2hldGhlciBpbiBhIHJvdyBvciBjb2x1bW4uICovXG4gIGdhcDogc3R5bGVQcm9wVHlwZSxcbiAgZm9udFNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkJveC5kZWZhdWx0UHJvcHMgPSB7XG4gIGFzOiAnZGl2JyxcbiAgaXNSb3c6IGZhbHNlLFxuICBpc0Rpc2FibGVkOiBmYWxzZSxcbn07XG5cbkJveC5kaXNwbGF5TmFtZSA9ICdCb3gnO1xuXG5leHBvcnQgZGVmYXVsdCBCb3g7XG4iXX0= */");
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var flexDirection = props.flexDirection,
       gap = props.gap,
@@ -108,7 +108,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     display: "flex",
     flexDirection: fd,
-    variant: "box.base",
+    variant: "boxes.base",
     fontSize: customFontSize
   }, others, {
     sx: custom

package/lib/cjs/components/Bracket/Bracket.js

@@ -47,7 +47,7 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return bracketRef.current;
   });
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "bracket.base"
+    variant: "boxes.bracketBase"
   }, others), !isLast && (0, _react2.jsx)(_index.Box, {
     width: 15,
     sx: {

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

@@ -48,7 +48,7 @@ var Default = function Default() {
     field3: 'UX Team',
     key: 'Group2Field'
   }];
-  var customBadgeStyles = {
+  var customChipStyles = {
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
@@ -62,11 +62,11 @@ var Default = function Default() {
     bg: "background"
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Badge, {
+  }, (0, _react2.jsx)(_index.Chip, {
     label: "Any",
     bg: "neutral.20",
     mr: "sm",
-    sx: customBadgeStyles,
+    sx: customChipStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
@@ -76,8 +76,7 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      ml: "xs",
-      variant: "forms.input.fieldControlWrapper",
+      variant: "forms.input.container",
       bg: "white",
       isRow: true,
       alignItems: "center",
@@ -91,11 +90,11 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Badge, {
+    }, item.field1), (0, _react2.jsx)(_index.Chip, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customBadgeStyles,
+      sx: customChipStyles,
       mr: "sm",
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -34,11 +34,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _object = require("lodash/object");
+var _breadcrumbs = require("@react-aria/breadcrumbs");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _utils = require("@react-aria/utils");
+
+var _object = require("lodash/object");
 
 var _hooks = require("../../hooks/");
 
@@ -71,7 +73,7 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return itemRef.current;
   });
 
-  var _useBreadcrumbItem = (0, _reactAria.useBreadcrumbItem)(_objectSpread({}, props), itemRef),
+  var _useBreadcrumbItem = (0, _breadcrumbs.useBreadcrumbItem)(_objectSpread({}, props), itemRef),
       itemProps = _useBreadcrumbItem.itemProps;
 
   var ElementType = (0, _react.useMemo)(function () {
@@ -103,7 +105,7 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var elementProps = (0, _react.useMemo)(function () {
     var _ElementType$propType;
 
-    var elementTypeProps = _objectSpread({}, (0, _reactAria.mergeProps)(itemProps, others));
+    var elementTypeProps = _objectSpread({}, (0, _utils.mergeProps)(itemProps, others));
 
     if ((_ElementType$propType = ElementType.propTypes) !== null && _ElementType$propType !== void 0 && _ElementType$propType.onPress) {
       elementTypeProps.onPress = onPressHandler;

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -28,9 +28,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _breadcrumbs = require("@react-aria/breadcrumbs");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _utils = require("@react-aria/utils");
 
 var _index = require("../../index");
 
@@ -57,7 +59,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return child;
   }) : children;
 
-  var _useBreadcrumbs = (0, _reactAria.useBreadcrumbs)(props),
+  var _useBreadcrumbs = (0, _breadcrumbs.useBreadcrumbs)(props),
       wrapperProps = _useBreadcrumbs.navProps;
 
   var breadcrumbsRef = (0, _react.useRef)();
@@ -77,13 +79,13 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       as: "li",
       key: "li-".concat(child.key),
-      variant: "variants.breadcrumb.containerLi"
+      variant: "text.breadcrumbLi"
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({
       "data-id": child['data-id'],
       isCurrent: isCurrentItem,
       onAction: onAction,
       actionKey: child.key,
-      variant: "variants.breadcrumb.link"
+      variant: "text.breadcrumbLink"
     }, child.props), child.props.children), icon && !isCurrentItem && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
       "aria-hidden": "true",
       icon: icon,
@@ -100,7 +102,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       paddingInlineStart: 'unset'
     },
     as: "ol"
-  }, (0, _reactAria.mergeProps)(wrapperProps, others)), (0, _isArray["default"])(filteredChildren) ? (0, _map["default"])(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
+  }, (0, _utils.mergeProps)(wrapperProps, others)), (0, _isArray["default"])(filteredChildren) ? (0, _map["default"])(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
 });
 Breadcrumbs.propTypes = {
   /** The icon to render in between each node. */

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

@@ -14,11 +14,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+var _addonActions = require("@storybook/addon-actions");
 
-var _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
-var _addonActions = require("@storybook/addon-actions");
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 
 var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
 
@@ -65,19 +65,19 @@ var Default = function Default(args) {
 
   return (0, _react2.jsx)(_Breadcrumbs["default"], (0, _extends2["default"])({
     onAction: onAction
-  }, args), (0, _react2.jsx)(_reactStately.Item, {
+  }, args), (0, _react2.jsx)(_collections.Item, {
     key: "home",
     "aria-label": "home",
     variant: "buttons.link",
     "data-id": "home",
     href: "https://www.pingidentity.com"
-  }, "Home"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Home"), (0, _react2.jsx)(_collections.Item, {
     key: "trendy",
     "aria-label": "trendy",
     variant: "buttons.link",
     "data-id": "trendy",
     href: "https://www.pingidentity.com"
-  }, "Trendy"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
     key: "march 2020 assets",
     "aria-label": "march-2020-assets",
     variant: "buttons.link",

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

@@ -8,13 +8,13 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+var _utils = require("@react-aria/utils");
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _reactAria = require("react-aria");
+var _collections = require("@react-stately/collections");
 
-var _reactStately = require("react-stately");
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
@@ -38,8 +38,8 @@ var testItemsArr = ['item1', 'item2', 'item3'];
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var itemProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_Breadcrumbs["default"], (0, _reactAria.mergeProps)(defaultProps, props), (0, _map["default"])(testItemsArr).call(testItemsArr, function (testItem, idx) {
-    return (0, _react2.jsx)(_reactStately.Item, (0, _extends2["default"])({
+  return (0, _testWrapper.render)((0, _react2.jsx)(_Breadcrumbs["default"], (0, _utils.mergeProps)(defaultProps, props), (0, _map["default"])(testItemsArr).call(testItemsArr, function (testItem, idx) {
+    return (0, _react2.jsx)(_collections.Item, (0, _extends2["default"])({
       key: testItem,
       "data-id": testItem
     }, itemProps, {
@@ -111,7 +111,7 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   expect(item).toHaveAttribute('data-id', testItemsArr[0]);
 });
 test('will render correctly with single child item', function () {
-  (0, _testWrapper.render)((0, _react2.jsx)(_Breadcrumbs["default"], (0, _reactAria.mergeProps)(defaultProps), (0, _react2.jsx)(_reactStately.Item, {
+  (0, _testWrapper.render)((0, _react2.jsx)(_Breadcrumbs["default"], (0, _utils.mergeProps)(defaultProps), (0, _react2.jsx)(_collections.Item, {
     key: testItemsArr[0],
     "data-id": testItemsArr[0],
     isCurrent: true

package/lib/cjs/components/Button/Button.js

@@ -38,12 +38,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
-
 var _themeUi = require("theme-ui");
 
+var _button = require("@react-aria/button");
+
 var _interactions = require("@react-aria/interactions");
 
+var _focus = require("@react-aria/focus");
+
+var _utils = require("@react-aria/utils");
+
 var _hooks = require("../../hooks");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
@@ -84,11 +88,11 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useButton = (0, _reactAria.useButton)(_objectSpread({
+  var _useButton = (0, _button.useButton)(_objectSpread({
     elementType: 'button'
   }, props), buttonRef),
       buttonProps = _useButton.buttonProps,
@@ -106,6 +110,15 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  (0, _hooks.useDeprecationWarning)('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
+    isActive: props.variant === 'icon'
+  });
+  (0, _hooks.useDeprecationWarning)('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
+    isActive: props.variant === 'danger'
+  });
+  (0, _hooks.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'];
   (0, _hooks.useAriaLabelWarning)('Button', ariaLabel, variant === 'filter');
   return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
@@ -120,7 +133,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       alignItems: 'center'
     },
     variant: variant
-  }, others, (0, _reactAria.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, others, (0, _utils.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
   }), hoverProps, focusProps)), isLoading ? (0, _react2.jsx)("span", {
     style: {

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

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

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -36,9 +36,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactAria = require("react-aria");
+var _checkbox = require("@react-aria/checkbox");
 
-var _reactStately = require("react-stately");
+var _toggle = require("@react-stately/toggle");
 
 var _interactions = require("@react-aria/interactions");
 
@@ -50,8 +50,6 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -91,7 +89,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _usePress = (0, _interactions.usePress)(props),
       containerPressProps = _usePress.pressProps;
 
-  var state = (0, _reactStately.useToggleState)(checkboxProps);
+  var state = (0, _toggle.useToggleState)(checkboxProps);
   var checkboxRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -107,7 +105,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [isIndeterminate]);
 
-  var _useCheckbox = (0, _reactAria.useCheckbox)(checkboxProps, state, checkboxRef),
+  var _useCheckbox = (0, _checkbox.useCheckbox)(checkboxProps, state, checkboxRef),
       inputProps = _useCheckbox.inputProps;
 
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
@@ -117,18 +115,16 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var helperTextId = (0, _react.useMemo)(function () {
-    return (0, _uuid.v4)();
-  }, []);
+  var helperTextId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, fieldControlProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     sx: {
       pt: 7
@@ -136,7 +132,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-CheckboxField.propTypes = _objectSpread(_objectSpread({
+CheckboxField.propTypes = _objectSpread({
   /** Whether the element should receive focus on render. */
   hasAutoFocus: _propTypes["default"].bool,
 
@@ -198,8 +194,17 @@ CheckboxField.propTypes = _objectSpread(_objectSpread({
   onKeyDown: _propTypes["default"].func,
 
   /** Handler that is called when a key is released. */
-  onKeyUp: _propTypes["default"].func
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+  onKeyUp: _propTypes["default"].func,
+
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread directly into the input element. */
+  controlProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread directly into the label element. */
+  labelProps: _propTypes["default"].shape({})
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 CheckboxField.displayName = 'CheckboxField';
 var _default = CheckboxField;
 exports["default"] = _default;

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

@@ -42,8 +42,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _CheckboxField = _interopRequireDefault(require("./CheckboxField"));
 
 var _Link = _interopRequireDefault(require("../Link"));
@@ -74,7 +72,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -111,8 +109,23 @@ var _default = {
     hasAutoFocus: {},
     isIndeterminate: {},
     isDefaultSelected: {},
-    isSelected: {}
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+    isSelected: {},
+    containerProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    controlProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    labelProps: {
+      control: {
+        type: 'none'
+      }
+    }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

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

@@ -99,7 +99,7 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, (0, _react2.jsx)(_themeUi.Badge, (0, _extends2["default"])({
     isRow: true
   }, badgeProps, {
-    variant: props.variant ? fixedVariant : 'baseBadge'
+    variant: props.variant ? fixedVariant : 'variants.boxes.chip'
   }), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && (0, _react2.jsx)(_.Box, {
     mr: "xs"
   }, slots.leftIcon), (0, _react2.jsx)(_.Text, (0, _extends2["default"])({