@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.2",
+  "version": "2.10.0-rc.2",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
   "types": "dist/types/index.d.ts",
-  "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "dist/index.es.js",
+      "require": "dist/index.umd.js"
+    }
+  },
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/planningcenter/tapestry-react.git"
@@ -25,10 +30,9 @@
     "test:watch": "jest --watch",
     "test:debug": "node --inspect-brk ./node_modules/bin/jest --runInBand --watch",
     "prebuild": "rimraf dist",
-    "build": "yarn build:cjs && yarn build:esm && yarn build:types",
-    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel src -d dist/cjs --extensions '.js,.ts,.tsx' --ignore '**/__tests__/**/*.js','**/*.test.js'",
-    "build:esm": "NODE_ENV=production BABEL_ENV=esm babel src -d dist/esm --extensions '.js,.ts,.tsx' --ignore '**/__tests__/**/*.js','**/*.test.js'",
-    "build:types": "tsc && node scripts/copy-types.js",
+    "build": "yarn build:types && yarn vite:build",
+    "build:types": "tsc",
+    "vite:build": "vite build",
     "prepublishOnly": "yarn build",
     "develop": "yarn prebuild && yarn build:esm --watch",
     "develop:yalc": "yalc publish && chokidar src -c 'yalc publish --push --changed'",
@@ -52,6 +56,7 @@
     "@babel/preset-flow": "7.12.13",
     "@babel/preset-react": "7.12.13",
     "@babel/preset-typescript": "^7.12.17",
+    "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@testing-library/jest-dom": "^5.11.9",
@@ -61,6 +66,8 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "babel-eslint": "10.1.0",
     "chokidar-cli": "^2.1.0",
     "dotenv": "^8.2.0",
@@ -84,7 +91,8 @@
     "svgo": "^2.1.0",
     "svgson": "4.1.0",
     "type-fest": "^0.21.1",
-    "typescript": "^4.1.5"
+    "typescript": "^4.1.5",
+    "vite": "^4.5.0"
   },
   "dependencies": {
     "@planningcenter/icons": "^14.18.1",

package/dist/cjs/ActionsDropdown/ActionsDropdown.js

@@ -1,118 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.ActionsDropdown = ActionsDropdown;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _dateFns = require("date-fns");
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _defaultTheme = _interopRequireDefault(require("../system/default-theme"));
-
-var _Divider = _interopRequireDefault(require("../Divider"));
-
-var _Dropdown = _interopRequireDefault(require("../Dropdown"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _Link = _interopRequireDefault(require("../Link"));
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _utils = require("../utils");
-
-function ActionsDropdown(_ref) {
-  var children = _ref.children,
-      _ref$defaultButtonPro = _ref.defaultButtonProps,
-      defaultButtonProps = _ref$defaultButtonPro === void 0 ? _defaultTheme["default"].button.themes.primary.fill : _ref$defaultButtonPro,
-      duplicates = _ref.duplicates,
-      _ref$duplicatesButton = _ref.duplicatesButtonProps,
-      duplicatesButtonProps = _ref$duplicatesButton === void 0 ? {
-    backgroundColor: 'hsl(42deg 87% 94%)',
-    color: 'hsl(0deg 0% 24%)',
-    hover: {
-      backgroundColor: 'hsl(42deg 87% 90%)'
-    },
-    active: {
-      backgroundColor: 'hsl(42deg 87% 87%)'
-    }
-  } : _ref$duplicatesButton,
-      inactive = _ref.inactive,
-      _ref$inactiveButtonPr = _ref.inactiveButtonProps,
-      inactiveButtonProps = _ref$inactiveButtonPr === void 0 ? {
-    color: 'white',
-    backgroundColor: '#999B96'
-  } : _ref$inactiveButtonPr,
-      isBelowManager = _ref.isBelowManager,
-      isPeopleProduct = _ref.isPeopleProduct,
-      onDeleteProfile = _ref.onDeleteProfile;
-  var hasDuplicates = (duplicates == null ? void 0 : duplicates.amount) > 0;
-  var hasInactiveDate = Boolean(inactive == null ? void 0 : inactive.date);
-  return /*#__PURE__*/React.createElement(_Dropdown["default"], (0, _extends2["default"])({
-    title: "Actions",
-    iconLeft: hasDuplicates || hasInactiveDate ? {
-      color: hasDuplicates ? '#E6A714' : 'white',
-      name: hasDuplicates ? 'general.exclamationTriangle' : 'general.inactive',
-      size: 'md'
-    } : undefined,
-    fontSize: "14px",
-    fontWeight: 400,
-    paddingLeft: hasDuplicates || hasInactiveDate ? 1 : undefined,
-    paddingVertical: 0.25,
-    theme: false,
-    popoverProps: {
-      maxWidth: '280px'
-    },
-    placement: "bottom-start"
-  }, hasDuplicates ? duplicatesButtonProps : hasInactiveDate ? inactiveButtonProps : defaultButtonProps), hasDuplicates ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StackView["default"], {
-    axis: "horizontal",
-    padding: 2,
-    spacing: 1
-  }, /*#__PURE__*/React.createElement(_Icon["default"], {
-    color: "#E6A714",
-    marginTop: "3px",
-    name: "general.exclamationTriangle"
-  }), /*#__PURE__*/React.createElement(_Text["default"], {
-    size: 4
-  }, "There ", duplicates.amount > 1 ? 'are' : 'is', " ", duplicates.amount, ' ', "potential ", duplicates.amount > 1 ? 'duplicates' : 'duplicate', " for this profile.", ' ', isBelowManager ? "An administrator can resolve " + (duplicates.amount > 1 ? "them" : "it") + " in People." : /*#__PURE__*/React.createElement(_Link["default"], duplicates.linkProps, isPeopleProduct ? 'Review' : 'Review in People'))), /*#__PURE__*/React.createElement(_Divider["default"], null)) : null, hasInactiveDate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StackView["default"], {
-    axis: "horizontal",
-    padding: 2,
-    spacing: 1
-  }, /*#__PURE__*/React.createElement(_Icon["default"], {
-    name: "general.inactive",
-    color: "grey-8",
-    marginTop: "3px"
-  }), /*#__PURE__*/React.createElement(_Text["default"], {
-    size: 4
-  }, "Set inactive on ", (0, _dateFns.format)(inactive.date, 'MMM dd, yyyy'), inactive.reason && " (" + inactive.reason + ")", ".", ' ', isBelowManager ? 'An administrator can reactivate them in People.' : /*#__PURE__*/React.createElement(_Link["default"], inactive.linkProps, isPeopleProduct ? 'Reactivate' : 'Reactivate in People'))), /*#__PURE__*/React.createElement(_Divider["default"], null)) : null, (hasDuplicates || hasInactiveDate) && /*#__PURE__*/React.createElement(_Box["default"], {
-    height: 1.5
-  }), (0, _utils.cloneChildren)(children, function () {
-    return {
-      paddingHorizontal: 2
-    };
-  }), onDeleteProfile ? /*#__PURE__*/React.createElement(_Dropdown["default"].Item, {
-    disabled: isBelowManager,
-    paddingHorizontal: 2,
-    onSelect: onDeleteProfile
-  }, isPeopleProduct ? 'Delete profile' : 'Delete profile…') : null, onDeleteProfile && isBelowManager ? /*#__PURE__*/React.createElement(_Box["default"], {
-    marginHorizontal: 2,
-    padding: 1,
-    backgroundColor: "surfaceTertiary",
-    color: "foregroundSecondary"
-  }, /*#__PURE__*/React.createElement(_Text["default"], {
-    size: 5,
-    lineHeight: 2
-  }, "To delete this profile, an administrator must remove them from People.")) : null, (hasDuplicates || hasInactiveDate || onDeleteProfile && isBelowManager) && /*#__PURE__*/React.createElement(_Box["default"], {
-    height: 1
-  }));
-}

package/dist/cjs/ActionsDropdown/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-var _exportNames = {};
-exports["default"] = void 0;
-
-var _ActionsDropdown = require("./ActionsDropdown");
-
-exports["default"] = _ActionsDropdown.ActionsDropdown;
-Object.keys(_ActionsDropdown).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ActionsDropdown[key]) return;
-  exports[key] = _ActionsDropdown[key];
-});

package/dist/cjs/Alert/Alert.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.Alert = Alert;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _StackView = require("../StackView");
-
-function Alert(props) {
-  var children = props.children,
-      type = props.type,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["children", "type"]);
-  return /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({
-    padding: 1,
-    radius: 3 // @ts-ignore
-    ,
-    stroke: type + "-dark",
-    strokeAlign: "inside",
-    strokeWeight: 1,
-    color: "dark-9" // @ts-ignore
-    ,
-    backgroundColor: type + "-lighter"
-  }, restProps), children);
-}
-
-var _default = Alert;
-exports["default"] = _default;

package/dist/cjs/Alert/Alert.test.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _Alert = _interopRequireDefault(require("./Alert"));
-
-it('should render title and content', function () {
-  var content = 'Please fix your errors';
-
-  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {
-    type: "error"
-  }, content)),
-      getByText = _render.getByText;
-
-  getByText(content);
-});

package/dist/cjs/Alert/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-var _exportNames = {};
-exports["default"] = void 0;
-
-var _Alert = require("./Alert");
-
-exports["default"] = _Alert.Alert;
-Object.keys(_Alert).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Alert[key]) return;
-  exports[key] = _Alert[key];
-});

package/dist/cjs/Avatar/Avatar.js

@@ -1,59 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.Avatar = Avatar;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var avatarSizes = {
-  xs: 2.5,
-  sm: 3,
-  md: 4.5,
-  lg: 6,
-  xl: 9,
-  xxl: 14
-};
-var borderSizes = {
-  xs: 2,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 4,
-  xxl: 4
-};
-
-/**
- * Displays a user's avatar in a circle.
- */
-function Avatar(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      source = _ref.source,
-      status = _ref.status,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["size", "source", "status"]);
-  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
-    as: "img",
-    src: source,
-    width: avatarSizes[size],
-    height: avatarSizes[size],
-    flexBasis: avatarSizes[size],
-    flexShrink: 0,
-    flexGrow: 0,
-    objectFit: "cover",
-    radius: "circle",
-    borderColor: status,
-    borderWidth: status ? borderSizes[size] : 0
-  }, restProps));
-}
-
-var _default = Avatar;
-exports["default"] = _default;

package/dist/cjs/Avatar/index.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _Avatar = _interopRequireDefault(require("./Avatar"));
-
-var _default = _Avatar["default"];
-exports["default"] = _default;

package/dist/cjs/Badge/Badge.js

@@ -1,141 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _system = require("../system");
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _utils = require("../utils");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function Badge(_ref) {
-  var children = _ref.children,
-      renderLeft = _ref.renderLeft,
-      renderRight = _ref.renderRight,
-      onClick = _ref.onClick,
-      title = _ref.title,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "renderLeft", "renderRight", "onClick", "title"]);
-
-  var _useThemeProps = (0, _system.useThemeProps)('badge', restProps),
-      _useThemeProps$color = _useThemeProps.color,
-      color = _useThemeProps$color === void 0 ? {
-    foreground: 'foreground',
-    background: 'surfaceTertiary'
-  } : _useThemeProps$color,
-      _useThemeProps$radius = _useThemeProps.radius,
-      radius = _useThemeProps$radius === void 0 ? 3 : _useThemeProps$radius,
-      _useThemeProps$size = _useThemeProps.size,
-      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
-      _useThemeProps$square = _useThemeProps.square,
-      square = _useThemeProps$square === void 0 ? false : _useThemeProps$square,
-      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["color", "radius", "size", "square"]);
-
-  var badgeProps = _objectSpread({
-    color: color,
-    radius: radius,
-    size: size,
-    square: square
-  }, themeProps);
-
-  badgeProps.backgroundColor = color.background || color;
-  badgeProps.color = color.foreground || (0, _system.getForegroundColor)(color);
-
-  var _useBoxSize = (0, _system.useBoxSize)(badgeProps.size),
-      boxSize = _useBoxSize.boxSize,
-      fontSize = _useBoxSize.fontSize,
-      lineHeight = _useBoxSize.lineHeight,
-      paddingHorizontal = _useBoxSize.paddingHorizontal,
-      paddingHorizontalDense = _useBoxSize.paddingHorizontalDense,
-      paddingVertical = _useBoxSize.paddingVertical;
-
-  var textStyle = {
-    as: 'span',
-    fontWeight: 'inherit',
-    lineHeight: 'inherit',
-    color: 'inherit'
-  };
-
-  if (badgeProps.square || badgeProps.radius === 'circle') {
-    badgeProps.width = boxSize;
-    badgeProps.height = boxSize;
-  }
-
-  if (badgeProps.radius === 'circle') {
-    textStyle.position = 'absolute';
-    textStyle.top = '50%';
-    textStyle.left = '50%';
-    textStyle.transform = 'translate(-50%, -50%)';
-  }
-
-  badgeProps.paddingLeft = renderLeft ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
-  badgeProps.paddingRight = renderRight ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense; // The `square` prop is no longer needed and should not get
-  // passed to `<StackView>` since it's not one of its props
-  // or a standard HTML attribute.
-
-  delete badgeProps.square;
-  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-    inline: true,
-    axis: "horizontal",
-    alignment: "center",
-    distribution: "center",
-    fontSize: fontSize,
-    lineHeight: lineHeight,
-    minHeight: boxSize,
-    paddingVertical: paddingVertical,
-    fill: "currentColor",
-    textAlign: "center",
-    position: "relative",
-    cursor: "default",
-    outline: 0,
-    focus: {
-      backgroundColor: 'highlightSecondary'
-    },
-    onClick: (0, _utils.stopPropagationClick)(onClick)
-  }, badgeProps), renderLeft && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: boxSize,
-    height: boxSize,
-    position: "absolute",
-    top: 0,
-    left: 0
-  }, typeof renderLeft === 'string' ? renderLeft : /*#__PURE__*/(0, _react.cloneElement)(renderLeft, {
-    size: renderLeft.props && renderLeft.props.size || badgeProps.size
-  })), typeof title === 'undefined' ? children : /*#__PURE__*/_react["default"].createElement(_Text["default"], textStyle, title), renderRight && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: boxSize,
-    height: boxSize,
-    position: "absolute",
-    top: 0,
-    right: 0
-  }, typeof renderRight === 'string' ? renderRight : /*#__PURE__*/(0, _react.cloneElement)(renderRight, {
-    size: renderRight.props && renderRight.props.size || badgeProps.size
-  })));
-}
-
-var _default = Badge;
-exports["default"] = _default;

package/dist/cjs/Badge/Status.js

@@ -1,114 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _system = require("../system");
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _Badge = _interopRequireDefault(require("./Badge"));
-
-var statuses = {
-  error: {
-    color: 'error',
-    icon: 'general.x'
-  },
-  success: {
-    color: 'success',
-    icon: 'general.check'
-  }
-};
-
-/**
- * Used to show a reaction to saving user data
- */
-var Status = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(Status, _Component);
-
-  function Status() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "timeout", null);
-    return _this;
-  }
-
-  var _proto = Status.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.requestClear();
-  };
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (lastProps.status !== this.props.status) {
-      this.requestClear();
-    }
-  };
-
-  _proto.requestClear = function requestClear() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-
-    this.timeout = setTimeout(this.props.onClearRequest, 1800);
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        status = _this$props.status,
-        light = _this$props.light,
-        onClearRequest = _this$props.onClearRequest,
-        props = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["status", "light", "onClearRequest"]);
-
-    if (!status) {
-      return null;
-    } else {
-      var _statuses$status = statuses[status],
-          color = _statuses$status.color,
-          icon = _statuses$status.icon;
-      return /*#__PURE__*/_react["default"].createElement(_Badge["default"], (0, _extends2["default"])({
-        paddingRight: 1,
-        radius: "pill",
-        renderLeft: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-          name: icon
-        }),
-        color: light ? {
-          background: 'light',
-          foreground: (0, _system.getColor)(color)
-        } : (0, _system.getColor)(color),
-        fontWeight: 600
-      }, props));
-    }
-  };
-
-  return Status;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(Status, "defaultProps", {
-  title: '',
-  size: 'sm'
-});
-Status.displayName = 'Badge.Status';
-var _default = Status;
-exports["default"] = _default;

package/dist/cjs/Badge/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _Badge = _interopRequireDefault(require("./Badge"));
-
-var _Status = _interopRequireDefault(require("./Status"));
-
-_Badge["default"].Status = _Status["default"];
-var _default = _Badge["default"];
-exports["default"] = _default;

package/dist/cjs/Box/Box.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.Box = Box;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = require("@emotion/react");
-
-var React = _interopRequireWildcard(require("react"));
-
-var _splitStyles = _interopRequireDefault(require("../system/split-styles"));
-
-var _VariantProvider = require("../VariantProvider");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
-
-var defaultElement = 'div';
-/**
- * Box is the base component that everything builds from. It is responsible for processing all style props.
- */
-
-function Box(_ref) {
-  var as = _ref.as,
-      innerRef = _ref.innerRef,
-      inline = _ref.inline,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["as", "innerRef", "inline"]);
-  var Element = as || defaultElement;
-  var variant = (0, _VariantProvider.useVariant)();
-  return (0, _react.jsx)(Element, (0, _extends2["default"])({
-    ref: innerRef
-  }, (0, _splitStyles["default"])(_objectSpread({
-    display: inline ? 'inline-block' : 'block',
-    variant: variant
-  }, props))));
-}