@planningcenter/tapestry-react 2.10.0-rc.9 → 3.0.0-rc.1

package/dist/cjs/ActionsDropdown/ActionsDropdown.js

@@ -0,0 +1,118 @@
+"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

@@ -0,0 +1,15 @@
+"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

@@ -0,0 +1,37 @@
+"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

@@ -0,0 +1,20 @@
+"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

@@ -0,0 +1,15 @@
+"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

@@ -0,0 +1,59 @@
+"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

@@ -0,0 +1,11 @@
+"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

@@ -0,0 +1,143 @@
+"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 = 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; }
+
+var Badge = function Badge(_ref) {
+  var _renderLeft$props, _renderRight$props;
+
+  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.StackView, (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
+  }, /*#__PURE__*/_react["default"].isValidElement(renderLeft) ? /*#__PURE__*/(0, _react.cloneElement)(renderLeft, {
+    size: (renderLeft == null ? void 0 : (_renderLeft$props = renderLeft.props) == null ? void 0 : _renderLeft$props.size) || badgeProps.size
+  }) : renderLeft), 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
+  }, /*#__PURE__*/_react["default"].isValidElement(renderRight) ? /*#__PURE__*/(0, _react.cloneElement)(renderRight, {
+    size: (renderRight == null ? void 0 : (_renderRight$props = renderRight.props) == null ? void 0 : _renderRight$props.size) || badgeProps.size
+  }) : renderRight));
+};
+
+var _default = Badge;
+exports["default"] = _default;

package/dist/cjs/Badge/Status.js

@@ -0,0 +1,88 @@
+"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 _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'
+  }
+};
+
+var Status = function Status(_ref) {
+  var light = _ref.light,
+      onClearRequest = _ref.onClearRequest,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'sm' : _ref$size,
+      status = _ref.status,
+      title = _ref.title,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["light", "onClearRequest", "size", "status", "title"]);
+
+  var _useState = (0, _react.useState)(null),
+      timeoutId = _useState[0],
+      setTimeoutId = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    var requestClear = function requestClear() {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+
+      setTimeoutId(setTimeout(onClearRequest, 1800));
+    };
+
+    requestClear();
+    return function () {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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"])({
+      color: light ? {
+        background: 'light',
+        foreground: (0, _system.getColor)(color)
+      } : (0, _system.getColor)(color),
+      fontWeight: 600,
+      paddingRight: 1,
+      radius: "pill",
+      renderLeft: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: icon
+      }),
+      size: size,
+      title: title
+    }, restProps));
+  }
+};
+
+Status.displayName = 'Badge.Status';
+var _default = Status;
+exports["default"] = _default;

package/dist/cjs/Badge/index.js

@@ -0,0 +1,14 @@
+"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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Box = 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 _react2 = require("@emotion/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; } /** @jsx jsx */
+
+var defaultElement = 'div';
+/**
+ * Box is the base component that everything builds from. It is responsible for processing all style props.
+ */
+
+var Box = function Box(_ref) {
+  var as = _ref.as,
+      inline = _ref.inline,
+      innerRef = _ref.innerRef,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["as", "inline", "innerRef"]);
+  var variant = (0, _VariantProvider.useVariant)();
+  var Element = as || defaultElement;
+  return (0, _react2.jsx)(Element, (0, _extends2["default"])({
+    ref: innerRef
+  }, (0, _splitStyles["default"])(_objectSpread({
+    display: inline ? 'inline-block' : 'block',
+    variant: variant
+  }, props))));
+};
+
+exports.Box = Box;

package/dist/cjs/Box/index.js

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