@planningcenter/tapestry-react 2.0.0 → 2.1.0

package/dist/esm/Card/Section.js

@@ -0,0 +1,15 @@
+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 Section(_ref) {
+  var subdued = _ref.subdued,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["subdued"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    width: "100%",
+    padding: 1,
+    backgroundColor: subdued ? 'surfaceSecondary' : undefined
+  }, restProps));
+}
+Section.displayName = 'Card.Section';

package/dist/esm/Checkbox/Checkbox.js

@@ -20,7 +20,7 @@ var iconPaths = {
 
 var _ref2 = /*#__PURE__*/React.createElement(Link, {
   external: true,
-  to: "https://ministrycentered.github.io/tapestry-react/checkbox#label",
+  to: "https://planningcenter.github.io/tapestry-react/checkbox#label",
   weight: 700
 }, "label");
 

package/dist/esm/Collapse/Collapse.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useLayoutEffect, useRef, useState } from 'react';
 var transition = 'height 200ms ease-out';
 
@@ -104,7 +104,8 @@ function Collapse(props) {
   return jsx("div", _extends({
     ref: ref,
     css: {
-      transition: instantRender ? undefined : transition
+      transition: instantRender ? undefined : transition,
+      visibility: open ? 'visible' : 'hidden'
     }
   }, restProps), renderChildren ? children : null);
 }

package/dist/esm/Collapse/Collapse.test.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import { isInaccessible } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Box, Button, Collapse } from '..';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  "data-testid": "child"
+});
+
+describe('Collapse', function () {
+  describe('Render children', function () {
+    var Component = function Component() {
+      var _useState = useState(false),
+          open = _useState[0],
+          setOpen = _useState[1];
+
+      return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+        "data-testid": "toggle",
+        onClick: function onClick() {
+          return setOpen(!open);
+        }
+      }, "Toggle"), /*#__PURE__*/React.createElement(Collapse, {
+        open: open
+      }, _ref));
+    };
+
+    var _ref2 = /*#__PURE__*/React.createElement(Component, null);
+
+    it('should render collapsed children', function () {
+      render(_ref2);
+      expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+
+    var _ref3 = /*#__PURE__*/React.createElement(Component, null);
+
+    it('should hide children from accessibility tree when collapsed', function () {
+      render(_ref3);
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false);
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(true);
+    });
+
+    var _ref4 = /*#__PURE__*/React.createElement(Component, null);
+
+    it('should include children in accessibility tree when open', function () {
+      render(_ref4);
+      userEvent.click(screen.getByTestId('toggle'));
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false);
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(false);
+    });
+  });
+});

package/dist/esm/DataTable/components/Icon.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useThemeValue } from '../../system';
 var sizes = {
   xxs: '8px',

package/dist/esm/DragDrop/DragDrop.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { Children, Fragment, createElement, createContext, useContext, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import * as RBDND from 'react-beautiful-dnd';
+import * as RBDND from '@planningcenter/react-beautiful-dnd';
 import mitt from 'mitt';
 import StackView from '../StackView';
 var DragDropContext = /*#__PURE__*/createContext(false);

package/dist/esm/GridView/GridView.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import * as React from 'react';
 import splitStyles from '../system/split-styles';
 import { spacingValue } from '../system';

package/dist/esm/HelperDrawer/HelperDrawer.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useCallback, useEffect, useState } from 'react';
 import Button from '../Button';
 import Card from '../Card';

package/dist/esm/Icon/Path.js

@@ -19,4 +19,5 @@ function Path(_ref) {
   }, restProps));
 }
 
+Path.displayName = 'Icon.Path';
 export default Path;

package/dist/esm/Icon/Status.js

@@ -4,9 +4,21 @@ import React from 'react';
 import Icon from './Icon';
 import Path from './Path';
 var STATUS_VARIANTS = {
-  confirmed: ['general.outlinedCircleCheck', 'success'],
-  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
-  declined: ['general.outlinedXCircle', 'error']
+  confirmed: {
+    iconColor: 'success',
+    iconFilled: 'general.checkCircle',
+    iconOutlined: 'general.outlinedCircleCheck'
+  },
+  unconfirmed: {
+    iconColor: 'warning',
+    iconFilled: 'general.questionCircle',
+    iconOutlined: 'general.outlinedQuestionCircle'
+  },
+  declined: {
+    iconColor: 'error',
+    iconFilled: 'general.xCircle',
+    iconOutlined: 'general.outlinedXCircle'
+  }
 };
 
 function Status(props) {
@@ -15,25 +27,20 @@ function Status(props) {
       variantFilled = props.variantFilled,
       restProps = _objectWithoutPropertiesLoose(props, ["color", "variant", "variantFilled"]);
 
-  var variantName;
-  var variantColor;
-  Object.keys(STATUS_VARIANTS).some(function (key) {
-    var _STATUS_VARIANTS$key;
-
-    return variant === key ? (_STATUS_VARIANTS$key = STATUS_VARIANTS[key], variantName = _STATUS_VARIANTS$key[0], variantColor = _STATUS_VARIANTS$key[1], _STATUS_VARIANTS$key) : false;
-  });
-
-  if (variantName && variantFilled) {
-    variantName += '-filled';
-  }
-
+  var _STATUS_VARIANTS$vari = STATUS_VARIANTS[variant],
+      iconOutlined = _STATUS_VARIANTS$vari.iconOutlined,
+      iconFilled = _STATUS_VARIANTS$vari.iconFilled,
+      iconColor = _STATUS_VARIANTS$vari.iconColor;
+  var variantColor = color || iconColor;
+  var variantIcon = variantFilled ? iconFilled : iconOutlined;
   return /*#__PURE__*/React.createElement(Icon, _extends({
-    name: variantName,
-    color: color || variantColor
+    name: variantIcon,
+    color: variantColor
   }, restProps), /*#__PURE__*/React.createElement(Path, {
     name: "tapestry.radio0",
     color: color
   }));
 }
 
+Status.displayName = 'Icon.Status';
 export default Status;

package/dist/esm/Pagination/Pagination.js

@@ -1,15 +1,22 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+
+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) { _defineProperty(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; }
+
+import React from 'react';
 import Box from '../Box';
 import Button from '../Button';
+import Group from '../Group';
 import StackView from '../StackView';
 import { range } from '../utils';
+import { useWindowWidth } from '@react-hook/window-size';
+import { useThemeValue } from '../system';
 
 function getVisiblePages(currentPage, totalPages, visiblePages) {
-  var start = Math.max(1, Math.min(totalPages - visiblePages + 1, currentPage - visiblePages / 2 + 1));
+  var start = Math.max(1, Math.min(totalPages - visiblePages + 1, Math.floor(currentPage - visiblePages / 2 + 1)));
   var stop = Math.min(totalPages, start + visiblePages - 1);
   var primaryWindow = range(start, stop + 1);
   var showFirstPage = start > 1;
@@ -30,104 +37,115 @@ function getVisiblePages(currentPage, totalPages, visiblePages) {
   return first.concat(primaryWindow).concat(last);
 }
 
-var Pagination = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Pagination, _Component);
+var NavButton = function NavButton(_ref) {
+  var disabled = _ref.disabled,
+      iconName = _ref.iconName,
+      props = _objectWithoutPropertiesLoose(_ref, ["disabled", "iconName"]);
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    backgroundColor: disabled ? '#f7f7f7' : '#f2f2f2',
+    disabled: disabled,
+    icon: {
+      color: disabled ? '#cfcfcf' : undefined,
+      name: iconName,
+      size: 'xs'
+    },
+    opacity: 1,
+    shrink: 0,
+    square: true,
+    variant: "fill"
+  }, props));
+};
+
+export default function Pagination(_ref2) {
+  var _ref2$activeColor = _ref2.activeColor,
+      activeColor = _ref2$activeColor === void 0 ? '#5b8bf7' : _ref2$activeColor,
+      currentPage = _ref2.currentPage,
+      _ref2$onPageChange = _ref2.onPageChange,
+      onPageChange = _ref2$onPageChange === void 0 ? function () {
+    return null;
+  } : _ref2$onPageChange,
+      visiblePages = _ref2.visiblePages,
+      _ref2$totalPages = _ref2.totalPages,
+      totalPages = _ref2$totalPages === void 0 ? 0 : _ref2$totalPages,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["activeColor", "currentPage", "onPageChange", "visiblePages", "totalPages"]);
 
-  function Pagination() {
-    return _Component.apply(this, arguments) || this;
-  }
+  var _useThemeValue = useThemeValue('breakpoints'),
+      xsBreakpoint = _useThemeValue.xs;
 
-  var _proto = Pagination.prototype;
+  var currentWidth = useWindowWidth();
 
-  _proto.renderGap = function renderGap(key) {
+  function renderGap(key) {
     return /*#__PURE__*/React.createElement(Box, {
       key: key,
       userSelect: "none",
       cursor: "default",
       children: "\u2026"
     });
-  };
+  }
 
-  _proto.renderPageLink = function renderPageLink(number) {
-    var isActive = this.props.currentPage === number;
-    return /*#__PURE__*/React.createElement(Button, {
+  function renderPageLink(number) {
+    var isActive = currentPage === number;
+    var outlineStyle = {
+      border: '1px solid #5b8bf7',
+      color: '#5b8bf7'
+    };
+    return /*#__PURE__*/React.createElement(Button, _extends({
       key: number,
-      onClick: this.props.onPageChange.bind(null, number),
-      theme: isActive ? this.props.activeColor : undefined,
-      variant: isActive ? 'fill' : 'naked',
-      title: number,
+      focus: _objectSpread({
+        backgroundColor: '#f4f8fd'
+      }, outlineStyle),
+      fontWeight: 500,
+      hover: _objectSpread({
+        backgroundColor: '#ffffff'
+      }, outlineStyle),
+      onClick: onPageChange.bind(null, number),
       shrink: 0,
-      square: true
-    });
-  };
-
-  _proto.renderPageLinks = function renderPageLinks() {
-    var _this = this;
+      square: true,
+      title: number,
+      variant: isActive ? 'fill' : 'naked'
+    }, isActive && {
+      backgroundColor: '#5b8bf7',
+      color: 'white'
+    }));
+  }
 
-    var pages = getVisiblePages(this.props.currentPage, this.props.totalPages, this.props.visiblePages);
+  function renderPageLinks() {
+    var visiblePagesToShow = currentWidth <= xsBreakpoint ? visiblePages || 5 : visiblePages || 7;
+    var pages = getVisiblePages(currentPage, totalPages, visiblePagesToShow);
     return pages.map(function (page, index) {
-      return page === '...' ? _this.renderGap(page + index) : _this.renderPageLink(page);
+      return page === '...' ? renderGap(page + index) : renderPageLink(page);
     });
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        activeColor = _this$props.activeColor,
-        currentPage = _this$props.currentPage,
-        totalPages = _this$props.totalPages,
-        visiblePages = _this$props.visiblePages,
-        onPageChange = _this$props.onPageChange,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeColor", "currentPage", "totalPages", "visiblePages", "onPageChange"]);
-
-    if (totalPages <= 1) {
-      return null;
-    }
+  }
 
+  if (totalPages <= 1) {
+    return null;
+  } else {
     return /*#__PURE__*/React.createElement(StackView, _extends({
-      axis: "horizontal",
       alignment: "center",
+      axis: "horizontal",
       distribution: "center",
-      width: "100%",
+      overflow: "auto",
       paddingVertical: 1,
       shrink: 0,
-      overflow: "auto"
-    }, restProps), /*#__PURE__*/React.createElement(Button, {
-      onClick: onPageChange.bind(null, currentPage - 1),
+      spacing: 0.5,
+      width: "100%"
+    }, restProps), /*#__PURE__*/React.createElement(Group, {
+      spacing: 0.5
+    }, /*#__PURE__*/React.createElement(NavButton, {
       disabled: currentPage === 1,
-      icon: {
-        name: 'general.leftChevron',
-        size: 'xs'
-      },
+      iconName: "general.leftChevron",
+      onClick: onPageChange.bind(null, currentPage - 1),
       tooltip: {
         title: 'Previous Page'
-      },
-      variant: "naked",
-      shrink: 0
-    }), this.renderPageLinks(), /*#__PURE__*/React.createElement(Button, {
-      onClick: onPageChange.bind(null, currentPage + 1),
+      }
+    }), /*#__PURE__*/React.createElement(NavButton, {
       disabled: currentPage === totalPages,
-      icon: {
-        name: 'general.rightChevron',
-        size: 'xs'
-      },
+      iconName: "general.rightChevron",
+      onClick: onPageChange.bind(null, currentPage + 1),
       tooltip: {
         title: 'Next Page'
-      },
-      variant: "naked",
-      shrink: 0
-    }));
-  };
-
-  return Pagination;
-}(Component);
-
-_defineProperty(Pagination, "defaultProps", {
-  activeColor: 'primary',
-  onPageChange: function onPageChange() {
-    return null;
-  },
-  visiblePages: 8,
-  totalPages: 0
-});
-
-export default Pagination;
+      }
+    })), renderPageLinks());
+  }
+}

package/dist/esm/Scrim/Scrim.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import StackView from '../StackView';
-var Scrim = /*#__PURE__*/React.forwardRef(function (props) {
+var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {

package/dist/esm/Select/Inline.js

@@ -38,4 +38,5 @@ function Inline(_ref) {
   }, restProps));
 }
 
+Inline.displayName = 'Select.Inline';
 export default Inline;

package/dist/esm/Select/Option.js

@@ -83,6 +83,6 @@ var Option = /*#__PURE__*/function (_Component) {
   return Option;
 }(Component);
 
-_defineProperty(Option, "displayName", OPTION_DISPLAY_NAME);
+_defineProperty(Option, "displayName", 'Select.Option');
 
 export default Option;

package/dist/esm/Select/OptionGroup.js

@@ -1,7 +1,6 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Component } from 'react';
-import { OPTIONGROUP_DISPLAY_NAME } from './constants';
 
 var OptionGroup = /*#__PURE__*/function (_Component) {
   _inheritsLoose(OptionGroup, _Component);
@@ -19,6 +18,6 @@ var OptionGroup = /*#__PURE__*/function (_Component) {
   return OptionGroup;
 }(Component);
 
-_defineProperty(OptionGroup, "displayName", OPTIONGROUP_DISPLAY_NAME);
+_defineProperty(OptionGroup, "displayName", 'Select.OptionGroup');
 
 export default OptionGroup;

package/dist/esm/Select/Value.js

@@ -14,4 +14,5 @@ function Value(props) {
   }, props));
 }
 
+Value.displayName = 'Select.Value';
 export default Value;

package/dist/esm/Select/constants.js

@@ -1,3 +1,3 @@
 export var SELECT_DISPLAY_NAME = 'Select';
-export var OPTIONGROUP_DISPLAY_NAME = 'OptionGroup';
-export var OPTION_DISPLAY_NAME = 'Option';
+export var OPTIONGROUP_DISPLAY_NAME = 'Select.OptionGroup';
+export var OPTION_DISPLAY_NAME = 'Select.Option';

package/dist/esm/Sidebar/Sidebar.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Children } from 'react';
 import StickyBox from 'react-sticky-box';
 import { css } from '../system';

package/dist/esm/Spinner/Spinner.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import { Box } from '../Box';
 import { useThemeProps } from '../system';
 var rotate = keyframes({

package/dist/esm/StackView/StackView.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import * as React from 'react';
 import splitStyles from '../system/split-styles';
 import { spacingValue } from '../system';

package/dist/esm/Table/Table.js

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 import React, { PureComponent, Children, Fragment } from 'react';
-import { Global } from '@emotion/core';
+import { Global } from '@emotion/react';
 import { camelCase, snakeCase } from 'lodash';
 import Button from '../Button';
 import DragDrop from '../DragDrop';

package/dist/esm/Text/Text.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import * as React from 'react';
 import { useThemeProps } from '../system';
 import splitStyles from '../system/split-styles';

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -5,8 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 import React, { useLayoutEffect, useState } from 'react';
-import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
-import { CacheProvider } from '@emotion/core';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { merge } from 'lodash';
 import defaultTheme from '../system/default-theme';
@@ -15,19 +15,7 @@ import { objectToCSSProperties, shallowEqual } from '../utils';
 import { setRootStyles, styleReset } from './styles';
 var STORAGE_KEY = 'tapestry-react-theme';
 export var cache = createCache({
-  key: 'tapestry-react',
-  prefix: function prefix(key) {
-    switch (key) {
-      case 'appearance':
-      case 'user-select':
-      case 'position':
-      case ':placeholder':
-        return true;
-
-      default:
-        return false;
-    }
-  }
+  key: 'tapestry-react'
 });
 export var themeStorage = {
   get: function get() {

package/dist/esm/TileView/TileView.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import * as React from 'react';
 import splitStyles from '../system/split-styles';
 import { spacingValue } from '../system';

package/dist/esm/system/box-sizes.js

@@ -18,7 +18,7 @@ export var boxSizes = {
     radius: 3
   },
   md: {
-    boxSize: 4,
+    boxSize: 4.5,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export var boxSizes = {
     radius: 4
   },
   lg: {
-    boxSize: 5,
+    boxSize: 6,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,13 +36,16 @@ export var boxSizes = {
     radius: 5
   },
   xl: {
-    boxSize: 8,
+    boxSize: 9,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,
     paddingHorizontal: 2.25,
     paddingVertical: 1.5,
     radius: 6
+  },
+  xxl: {
+    boxSize: 14
   }
 };
 export function getBoxSize(size) {

package/dist/esm/system/use-css.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import css from './cxs';
 import { parseCssStyles } from './parse-styles';
 export default function useCss() {

package/dist/esm/system/utils.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 import { useContext, useCallback } from 'react';
-import { ThemeContext } from '@emotion/core';
+import { ThemeContext } from '@emotion/react';
 import { darken, getLuminance, lighten, parseToRgb } from 'polished';
 import { get } from 'lodash';
 import { getColor } from './colors';

package/dist/types/Avatar/Avatar.d.ts

@@ -0,0 +1,19 @@
+declare type AvatarProps = {
+    /**
+     * Controls the size of the avatar.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * The source of the image to display.
+     */
+    source?: string;
+    /**
+     * Adds a colored ring with padding around the avatar. Accepts a valid color string.
+     */
+    status?: string;
+};
+/**
+ * Displays a user's avatar in a circle.
+ */
+export declare function Avatar({ size, source, status, ...restProps }: AvatarProps): JSX.Element;
+export default Avatar;