@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/vendor/react-measure/Measure.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+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 = require("react");
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+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; }
+
+// TODO: look into measureText function that uses canvas measurer to collect widths faster, should be able to accept an array
+// possibly have const { measureRef, measureText } = measure(id), measureText(txt) | measureText([txt,txt,txt])
+var Measure = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Measure, _Component);
+
+  function Measure() {
+    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), "firstResizeEvent", true);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "storingMeasurements", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "nodes", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "formulas", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refsById", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "measurements", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "measureRef", function (id, _temp) {
+      var _ref = _temp === void 0 ? {} : _temp,
+          _ref$formula = _ref.formula,
+          formula = _ref$formula === void 0 ? _utils.defaultFormula : _ref$formula,
+          innerRef = _ref.innerRef;
+
+      if (!_this.refsById[id]) {
+        _this.refsById[id] = function (node) {
+          var previousStoredNode = _this.nodes[id];
+
+          if (node) {
+            // store id on node so we can retrieve formula and store new
+            // measurements in ResizeObserver callback
+            node.__measureId = id;
+            _this.nodes[id] = node;
+            _this.formulas[id] = formula;
+
+            _this.resizeObserver.observe(node);
+          } else if (previousStoredNode) {
+            _this.resizeObserver.unobserve(previousStoredNode);
+
+            delete _this.formulas[id];
+            delete _this.nodes[id];
+            delete _this.measurements[id];
+          } // allow other libraries to interop with node
+
+
+          if (innerRef) {
+            innerRef(node);
+          }
+        };
+      }
+
+      return _this.refsById[id];
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMeasurements", function () {
+      return Object.keys(_this.nodes).reduce(function (measurements, key) {
+        var _objectSpread2;
+
+        var node = _this.nodes[key];
+        var formula = _this.formulas[key];
+        return _objectSpread(_objectSpread({}, measurements), {}, (_objectSpread2 = {}, _objectSpread2[key] = formula(node), _objectSpread2));
+      }, {});
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizeObserver", new _resizeObserverPolyfill["default"](function (entries) {
+      if (_this.firstResizeEvent) {
+        _this.firstResizeEvent = false;
+      } else {
+        var measurements = _objectSpread({}, _this.measurements);
+
+        entries.forEach(function (entry) {
+          var id = entry.target.__measureId;
+          var node = _this.nodes[id];
+          var formula = _this.formulas[id];
+
+          if (formula) {
+            measurements[id] = formula(node);
+          }
+        });
+        _this.measurements = measurements;
+
+        if (_this.props.updateOnMeasure) {
+          _this.forceUpdate();
+        }
+
+        if (_this.props.onMeasure) {
+          _this.props.onMeasure(measurements, _this.nodes);
+        }
+      }
+    }));
+    return _this;
+  }
+
+  var _proto = Measure.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.updateOnMeasure || this.props.onMeasure) {
+      this.updateMeasurements();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  };
+
+  _proto.updateMeasurements = function updateMeasurements() {
+    var measurements = this.getMeasurements();
+    this.measurements = measurements;
+
+    if (this.props.updateOnMeasure) {
+      this.forceUpdate();
+    }
+
+    if (this.props.onMeasure) {
+      this.props.onMeasure(measurements, this.nodes);
+    }
+  };
+
+  _proto.render = function render() {
+    return this.props.children({
+      measureRef: this.measureRef,
+      measurements: this.measurements,
+      getMeasurements: this.getMeasurements
+    });
+  };
+
+  return Measure;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Measure, "defaultProps", {
+  updateOnMeasure: true
+});
+var _default = Measure;
+exports["default"] = _default;

package/dist/cjs/vendor/react-measure/Viewport.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+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 = require("react");
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+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; }
+
+// TODO: delegate Viewport measuring to a store when multiple components measure window
+var Viewport = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Viewport, _Component);
+
+  function Viewport() {
+    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), "firstResizeEvent", true);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      width: 0,
+      height: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
+      scrollX: 0,
+      scrollY: 0,
+      scrollXDirection: null,
+      scrollYDirection: null
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getScroll", function () {
+      var scrollX = _this.isWindow ? window.pageXOffset : _this.scrollElement.scrollLeft;
+      var scrollY = _this.isWindow ? window.pageYOffset : _this.scrollElement.scrollTop;
+      var scrollState = {
+        scrollX: scrollX,
+        scrollY: scrollY,
+        scrollXDirection: (0, _utils.getScrollDirection)('x', _this.lastScrollX, scrollX),
+        scrollYDirection: (0, _utils.getScrollDirection)('y', _this.lastScrollY, scrollY)
+      };
+      return scrollState;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateScroll", function () {
+      var scrollState = _this.getScroll();
+
+      if (_this.lastScrollX !== scrollState.scrollX || _this.lastScrollY !== scrollState.scrollY) {
+        if (_this.props.updateOnScroll) {
+          _this.setState(scrollState);
+        }
+
+        if (_this.props.onScroll) {
+          _this.props.onScroll(scrollState);
+        }
+      }
+
+      _this.lastScrollX = scrollState.scrollX;
+      _this.lastScrollY = scrollState.scrollY;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getSize", function () {
+      return _this.isWindow ? (0, _utils.getWindowSize)() : (0, _utils.getElementSize)(_this.scrollElement);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateSize", function () {
+      var sizeState = _this.getSize();
+
+      if (_this.props.updateOnResize) {
+        _this.setState(sizeState);
+      }
+
+      if (_this.props.onResize) {
+        _this.props.onResize(sizeState);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setRef", function (innerRef) {
+      if (typeof innerRef === 'function') {
+        return function (node) {
+          if (!_this.node) {
+            _this.node = node;
+          }
+
+          innerRef(node);
+        };
+      } else {
+        if (!_this.node) {
+          _this.node = innerRef;
+        }
+      }
+    });
+    return _this;
+  }
+
+  var _proto = Viewport.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+
+    this.scrollElement = (0, _utils.getClosestScrollElement)(this.node);
+    this.isWindow = this.scrollElement === window;
+
+    if (this.props.updateOnScroll || this.props.onScroll) {
+      this.scrollElement.addEventListener('scroll', this.updateScroll, {
+        passive: true
+      });
+    }
+
+    this.updateScroll();
+
+    if (this.props.updateOnResize || this.props.onResize) {
+      if (this.isWindow) {
+        window.addEventListener('resize', this.updateSize);
+      } else {
+        this.resizeObserver = new _resizeObserverPolyfill["default"](function () {
+          if (_this2.firstResizeEvent) {
+            _this2.firstResizeEvent = false;
+          } else {
+            _this2.updateSize();
+          }
+        });
+        this.resizeObserver.observe(this.scrollElement);
+      }
+    }
+
+    this.updateSize();
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.props.updateOnScroll || this.props.onScroll) {
+      this.scrollElement.removeEventListener('scroll', this.updateScroll, {
+        passive: true
+      });
+    }
+
+    if (this.props.updateOnResize || this.props.onResize) {
+      if (this.isWindow) {
+        window.removeEventListener('resize', this.updateSize);
+      } else {
+        this.resizeObserver.disconnect();
+      }
+    }
+  };
+
+  _proto.render = function render() {
+    return this.props.children(_objectSpread({
+      ref: this.setRef,
+      getScroll: this.getScroll,
+      getSize: this.getSize
+    }, this.state));
+  };
+
+  return Viewport;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Viewport, "defaultProps", {
+  updateOnScroll: true,
+  updateOnResize: true
+});
+var _default = Viewport;
+exports["default"] = _default;

package/dist/cjs/vendor/react-measure/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Viewport = exports.Measure = void 0;
+
+var _Measure = _interopRequireDefault(require("./Measure"));
+
+exports.Measure = _Measure["default"];
+
+var _Viewport = _interopRequireDefault(require("./Viewport"));
+
+exports.Viewport = _Viewport["default"];

package/dist/cjs/vendor/react-measure/utils.js

@@ -0,0 +1,89 @@
+"use strict";
+
+exports.__esModule = true;
+exports.isScrollElement = isScrollElement;
+exports.getParentNode = getParentNode;
+exports.getClosestScrollElement = getClosestScrollElement;
+exports.getScrollDirection = getScrollDirection;
+exports.getDocumentWidth = getDocumentWidth;
+exports.getDocumentHeight = getDocumentHeight;
+exports.getWindowSize = getWindowSize;
+exports.getElementSize = getElementSize;
+exports.defaultFormula = defaultFormula;
+
+function isScrollElement(element) {
+  try {
+    var _window$getComputedSt = window.getComputedStyle(element),
+        overflow = _window$getComputedSt.overflow,
+        overflowX = _window$getComputedSt.overflowX,
+        overflowY = _window$getComputedSt.overflowY;
+
+    return /(auto|scroll)/.test(overflow + overflowX + overflowY);
+  } catch (e) {
+    return false;
+  }
+}
+
+function getParentNode(element) {
+  if (element.nodeName === 'HTML') {
+    return element;
+  }
+
+  return element.parentNode || element.host;
+}
+
+function getClosestScrollElement(element) {
+  if (!element || element === document.body) {
+    return window;
+  } else if (isScrollElement(element)) {
+    return element;
+  } else {
+    return getClosestScrollElement(getParentNode(element));
+  }
+}
+
+function getScrollDirection(axis, last, next) {
+  if (next === last) {
+    return null;
+  } else {
+    return next - last > 0 ? axis === 'x' ? 'right' : 'down' : axis === 'x' ? 'left' : 'up';
+  }
+}
+
+function getDocumentWidth() {
+  return Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
+}
+
+function getDocumentHeight() {
+  return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+}
+
+function getWindowSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scrollWidth: getDocumentWidth(),
+    scrollHeight: getDocumentHeight()
+  };
+}
+
+function getElementSize(node) {
+  return {
+    width: node.offsetWidth,
+    height: node.offsetHeight,
+    scrollWidth: node.scrollWidth,
+    scrollHeight: node.scrollHeight
+  };
+}
+
+function defaultFormula(node) {
+  var rect = node.getBoundingClientRect();
+  return {
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left
+  };
+}

package/dist/esm/ActionsDropdown/ActionsDropdown.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { format } from 'date-fns';
+import Box from '../Box';
+import defaultTheme from '../system/default-theme';
+import Divider from '../Divider';
+import Dropdown from '../Dropdown';
+import Icon from '../Icon';
+import Link from '../Link';
+import StackView from '../StackView';
+import Text from '../Text';
+import { cloneChildren } from '../utils';
+
+var _ref2 = /*#__PURE__*/React.createElement(Icon, {
+  name: "exclamation-triangle-filled",
+  color: "#e8833a",
+  marginTop: "3px"
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
+
+var _ref4 = /*#__PURE__*/React.createElement(Icon, {
+  name: "inactive",
+  color: "grey-8",
+  marginTop: "3px"
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Divider, null);
+
+var _ref6 = /*#__PURE__*/React.createElement(Box, {
+  height: 1.5
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(Box, {
+  marginHorizontal: 2,
+  padding: 1,
+  backgroundColor: "surfaceTertiary",
+  color: "foregroundSecondary"
+}, /*#__PURE__*/React.createElement(Text, {
+  size: 5,
+  lineHeight: 2
+}, "To delete this profile, an administrator must remove them from People."));
+
+var _ref8 = /*#__PURE__*/React.createElement(Box, {
+  height: 1
+});
+
+export function ActionsDropdown(_ref) {
+  var children = _ref.children,
+      _ref$defaultButtonPro = _ref.defaultButtonProps,
+      defaultButtonProps = _ref$defaultButtonPro === void 0 ? defaultTheme.button.themes.primary.fill : _ref$defaultButtonPro,
+      duplicates = _ref.duplicates,
+      _ref$duplicatesButton = _ref.duplicatesButtonProps,
+      duplicatesButtonProps = _ref$duplicatesButton === void 0 ? {
+    color: 'white',
+    backgroundColor: 'hsl(25deg 79% 57%)',
+    hover: {
+      backgroundColor: 'hsl(25deg 80% 54%)'
+    },
+    active: {
+      backgroundColor: 'hsl(25deg 82% 51%)'
+    }
+  } : _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, _extends({
+    title: "Actions",
+    iconLeft: hasDuplicates || hasInactiveDate ? {
+      name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
+      size: 'lg'
+    } : 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, {
+    axis: "horizontal",
+    padding: 2,
+    spacing: 1
+  }, _ref2, /*#__PURE__*/React.createElement(Text, {
+    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, duplicates.linkProps, isPeopleProduct ? 'Review' : 'Review in People'))), _ref3) : null, hasInactiveDate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    padding: 2,
+    spacing: 1
+  }, _ref4, /*#__PURE__*/React.createElement(Text, {
+    size: 4
+  }, "Set inactive on ", format(inactive.date, 'MMM dd, yyyy'), inactive.reason && " (" + inactive.reason + ")", ".", ' ', isBelowManager ? 'An administrator can reactivate them in People.' : /*#__PURE__*/React.createElement(Link, inactive.linkProps, isPeopleProduct ? 'Reactivate' : 'Reactivate in People'))), _ref5) : null, (hasDuplicates || hasInactiveDate) && _ref6, cloneChildren(children, function () {
+    return {
+      paddingHorizontal: 2
+    };
+  }), onDeleteProfile ? /*#__PURE__*/React.createElement(Dropdown.Item, {
+    disabled: isBelowManager,
+    paddingHorizontal: 2,
+    onSelect: onDeleteProfile
+  }, isPeopleProduct ? 'Delete profile' : 'Delete profile…') : null, onDeleteProfile && isBelowManager ? _ref7 : null, (hasDuplicates || hasInactiveDate || onDeleteProfile && isBelowManager) && _ref8);
+}

package/dist/esm/ActionsDropdown/index.js

@@ -0,0 +1,2 @@
+export * from './ActionsDropdown';
+export { ActionsDropdown as default } from './ActionsDropdown';

package/dist/esm/Alert/Alert.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import * as React from 'react';
+import { StackView } from '../StackView';
+export function Alert(props) {
+  var children = props.children,
+      type = props.type,
+      restProps = _objectWithoutPropertiesLoose(props, ["children", "type"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    padding: 1,
+    radius: 3 // @ts-ignore
+    ,
+    stroke: type + "-dark",
+    strokeAlign: "inside",
+    strokeWeight: 1,
+    color: "dark-9" // @ts-ignore
+    ,
+    backgroundColor: type + "-lighter"
+  }, restProps), children);
+}
+export default Alert;

package/dist/esm/Alert/Alert.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Alert from './Alert';
+it('should render title and content', function () {
+  var content = 'Please fix your errors';
+
+  var _render = render( /*#__PURE__*/React.createElement(Alert, {
+    type: "error"
+  }, content)),
+      getByText = _render.getByText;
+
+  getByText(content);
+});

package/dist/esm/Alert/index.js

@@ -0,0 +1,2 @@
+export * from './Alert';
+export { Alert as default } from './Alert';

package/dist/esm/Avatar/Avatar.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+import { useBoxSize } from '../system';
+var borderSizes = {
+  xs: 2,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5
+};
+
+/**
+ * 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 = _objectWithoutPropertiesLoose(_ref, ["size", "source", "status"]);
+
+  var _useBoxSize = useBoxSize(size),
+      boxSize = _useBoxSize.boxSize;
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "img",
+    src: source,
+    width: boxSize,
+    height: boxSize,
+    flexBasis: boxSize,
+    flexShrink: 0,
+    flexGrow: 0,
+    objectFit: "cover",
+    radius: "circle",
+    borderColor: status,
+    borderWidth: status ? borderSizes[size] : 0
+  }, restProps));
+}
+
+export default Avatar;

package/dist/esm/Avatar/index.js

@@ -0,0 +1,2 @@
+import Avatar from './Avatar';
+export default Avatar;