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

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

@@ -48,7 +48,7 @@ var Default = function Default() {
     field3: 'UX Team',
     key: 'Group2Field'
   }];
-  var customChipStyles = {
+  var customBadgeStyles = {
     '& > 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.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "Any",
     bg: "neutral.20",
     mr: "sm",
-    sx: customChipStyles,
+    sx: customBadgeStyles,
     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,7 +76,8 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      variant: "forms.input.container",
+      ml: "xs",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       alignItems: "center",
@@ -90,11 +91,11 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
+      sx: customBadgeStyles,
       mr: "sm",
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var base = {
+  width: '15px',
+  pl: '5px',
+  ml: '5px',
+  position: 'relative'
+};
+var _default = {
+  base: base
+};
+exports["default"] = _default;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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) { (0, _defineProperty2["default"])(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 link = {
+  color: 'active',
+  fontFamily: 'standard',
+  fontSize: '15px',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  },
+  '&.is-current': _objectSpread(_objectSpread({
+    pointerEvents: 'none'
+  }, _Buttons.base), {}, {
+    fontWeight: 1
+  })
+};
+var containerLi = {
+  'a.is-hovered.is-current ': {
+    textDecoration: 'none'
+  }
+};
+var _default = {
+  link: link,
+  containerLi: containerLi
+};
+exports["default"] = _default;

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

@@ -34,13 +34,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _breadcrumbs = require("@react-aria/breadcrumbs");
+var _object = require("lodash/object");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _utils = require("@react-aria/utils");
-
-var _object = require("lodash/object");
+var _reactAria = require("react-aria");
 
 var _hooks = require("../../hooks/");
 
@@ -73,7 +71,7 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return itemRef.current;
   });
 
-  var _useBreadcrumbItem = (0, _breadcrumbs.useBreadcrumbItem)(_objectSpread({}, props), itemRef),
+  var _useBreadcrumbItem = (0, _reactAria.useBreadcrumbItem)(_objectSpread({}, props), itemRef),
       itemProps = _useBreadcrumbItem.itemProps;
 
   var ElementType = (0, _react.useMemo)(function () {
@@ -105,7 +103,7 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var elementProps = (0, _react.useMemo)(function () {
     var _ElementType$propType;
 
-    var elementTypeProps = _objectSpread({}, (0, _utils.mergeProps)(itemProps, others));
+    var elementTypeProps = _objectSpread({}, (0, _reactAria.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,11 +28,9 @@ 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 _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
 var _index = require("../../index");
 
@@ -59,7 +57,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return child;
   }) : children;
 
-  var _useBreadcrumbs = (0, _breadcrumbs.useBreadcrumbs)(props),
+  var _useBreadcrumbs = (0, _reactAria.useBreadcrumbs)(props),
       wrapperProps = _useBreadcrumbs.navProps;
 
   var breadcrumbsRef = (0, _react.useRef)();
@@ -79,13 +77,13 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       as: "li",
       key: "li-".concat(child.key),
-      variant: "text.breadcrumbLi"
+      variant: "variants.breadcrumb.containerLi"
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({
       "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 && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
       "aria-hidden": "true",
       icon: icon,
@@ -102,7 +100,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       paddingInlineStart: 'unset'
     },
     as: "ol"
-  }, (0, _utils.mergeProps)(wrapperProps, others)), (0, _isArray["default"])(filteredChildren) ? (0, _map["default"])(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
+  }, (0, _reactAria.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 _addonActions = require("@storybook/addon-actions");
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 
-var _collections = require("@react-stately/collections");
+var _reactStately = require("react-stately");
 
-var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+var _addonActions = require("@storybook/addon-actions");
 
 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)(_collections.Item, {
+  }, args), (0, _react2.jsx)(_reactStately.Item, {
     key: "home",
     "aria-label": "home",
     variant: "buttons.link",
     "data-id": "home",
     href: "https://www.pingidentity.com"
-  }, "Home"), (0, _react2.jsx)(_collections.Item, {
+  }, "Home"), (0, _react2.jsx)(_reactStately.Item, {
     key: "trendy",
     "aria-label": "trendy",
     variant: "buttons.link",
     "data-id": "trendy",
     href: "https://www.pingidentity.com"
-  }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
+  }, "Trendy"), (0, _react2.jsx)(_reactStately.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 _utils = require("@react-aria/utils");
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _collections = require("@react-stately/collections");
+var _reactAria = require("react-aria");
 
-var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+var _reactStately = require("react-stately");
 
 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, _utils.mergeProps)(defaultProps, props), (0, _map["default"])(testItemsArr).call(testItemsArr, function (testItem, idx) {
-    return (0, _react2.jsx)(_collections.Item, (0, _extends2["default"])({
+  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"])({
       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, _utils.mergeProps)(defaultProps), (0, _react2.jsx)(_collections.Item, {
+  (0, _testWrapper.render)((0, _react2.jsx)(_Breadcrumbs["default"], (0, _reactAria.mergeProps)(defaultProps), (0, _react2.jsx)(_reactStately.Item, {
     key: testItemsArr[0],
     "data-id": testItemsArr[0],
     isCurrent: true

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

@@ -38,16 +38,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themeUi = require("theme-ui");
+var _reactAria = require("react-aria");
 
-var _button = require("@react-aria/button");
+var _themeUi = require("theme-ui");
 
 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"));
@@ -88,11 +84,11 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useButton = (0, _button.useButton)(_objectSpread({
+  var _useButton = (0, _reactAria.useButton)(_objectSpread({
     elementType: 'button'
   }, props), buttonRef),
       buttonProps = _useButton.buttonProps,
@@ -110,15 +106,6 @@ 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"])({
@@ -133,7 +120,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       alignItems: 'center'
     },
     variant: variant
-  }, others, (0, _utils.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, others, (0, _reactAria.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', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
 var _default = {
   title: 'Components/Button',
   component: _index.Button,

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

@@ -0,0 +1,276 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+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.text = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultFocus = exports["default"] = exports.base = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Text = require("../Text/Text.styles");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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) { (0, _defineProperty2["default"])(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 base = _objectSpread({
+  cursor: 'pointer',
+  height: 36,
+  lineHeight: '30px',
+  minWidth: 'min-content',
+  px: 'md',
+  outline: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '2px',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap'
+}, _Text.text.buttonLabel);
+
+exports.base = base;
+var defaultActive = {
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  'path': {
+    fill: 'white'
+  }
+};
+var defaultHover = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.40',
+  color: 'accent.40',
+  boxShadow: 'standard'
+};
+var defaultFocus = {
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '2px'
+};
+exports.defaultFocus = defaultFocus;
+var focusWithCroppedOutline = {
+  boxShadow: 'none',
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '1px'
+};
+exports.focusWithCroppedOutline = focusWithCroppedOutline;
+
+var primary = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  '&.is-hovered': {
+    bg: 'accent.40',
+    border: '1px solid',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-pressed': {
+    bg: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20',
+    color: 'white'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var success = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'success.bright',
+  border: '1px solid',
+  borderColor: 'success.bright',
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var critical = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'critical.bright',
+  border: '1px solid',
+  borderColor: 'critical.bright',
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var inline = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'white',
+  height: '22px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  borderColor: 'active',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+
+var text = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'transparent',
+  border: '1px solid',
+  borderColor: 'transparent',
+  color: 'active',
+  height: 'auto',
+  padding: '0',
+  lineHeight: 'unset',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
+});
+
+exports.text = text;
+var quiet = {
+  all: 'unset',
+  display: 'flex'
+};
+exports.quiet = quiet;
+
+var link = _objectSpread(_objectSpread({}, text), {}, {
+  lineHeight: 'unset',
+  textDecoration: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: 'max-content',
+  '&.is-current': {
+    cursor: 'default',
+    color: 'text.primary'
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
+});
+
+exports.link = link;
+
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
+var _default = {
+  critical: critical,
+  "default": _objectSpread(_objectSpread({}, base), {}, {
+    bg: 'white',
+    border: '1px solid',
+    borderColor: 'active',
+    '&.is-hovered': _objectSpread({}, defaultHover),
+    '&.is-pressed': _objectSpread({}, defaultActive),
+    '&.is-focused': _objectSpread({}, defaultFocus)
+  }),
+  filter: filter,
+  inline: inline,
+  inlinePrimary: inlinePrimary,
+  link: link,
+  primary: primary,
+  quiet: quiet,
+  success: success,
+  colorBlock: colorBlock
+};
+exports["default"] = _default;

package/lib/cjs/components/Card/Card.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var container = {
+  display: 'flex',
+  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
+  borderRadius: '3px',
+  color: 'text.primary',
+  fontSize: 'md',
+  fontWeight: 0,
+  flex: '1 1 0',
+  p: 'lg'
+};
+var _default = {
+  container: container
+};
+exports["default"] = _default;