@planningcenter/tapestry-react 2.6.0-rc.1 → 2.6.0-rc.3

package/dist/cjs/DataTable/DataTable.js

@@ -205,7 +205,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: "tapestry-react-reset " + css({
+    className: css({
       position: 'relative'
     })
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -226,7 +226,7 @@ var DataTable = function DataTable(props) {
       column: column,
       columnIndex: columnIndex,
       columnSort: columnSort,
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     });
   }))), bodyToRender, hasFooterColumns && /*#__PURE__*/_react["default"].createElement("div", {
     ref: footerRef,
@@ -244,7 +244,7 @@ var DataTable = function DataTable(props) {
       key: columnIndex,
       role: "cell",
       ref: getColumnRef(columnIndex + "." + (data.length + 1)),
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     }, typeof column.footer === 'string' || /*#__PURE__*/_react["default"].isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/_react["default"].createElement(column.footer, {
       columnIndex: columnIndex
     }) : null);

package/dist/cjs/DataTable/components/BodyRows.js

@@ -57,7 +57,7 @@ function BodyRows(_ref) {
           ref: getColumnRef(columnIndex + "." + (rowIndex + 1)) // offset by 1 to account for header row
           ,
           role: "cell",
-          className: "tapestry-react-reset " + css([].concat(cellVariantStyles, [column.css]))
+          className: css([].concat(cellVariantStyles, [column.css]))
         }, (0, _utils.getCell)(column.cell, {
           columnIndex: columnIndex,
           rowData: rowData,
@@ -83,7 +83,7 @@ function BodyRows(_ref) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, (0, _utils.getRowLinkProps)({
       getRowLink: getRowLink,
       data: rowData,

package/dist/cjs/DataTable/components/BodySubRows.js

@@ -71,7 +71,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, (0, _utils.getRowLinkProps)({
       getRowLink: getRowLink,
       data: rowData,
@@ -90,7 +90,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: columnIndex,
         ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
-        className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+        className: css([].concat(cellVariantClassName, [column.css]))
       }, (0, _utils.getCell)(column.subCell !== undefined ? column.subCell : column.cell, {
         columnIndex: columnIndex,
         rowData: rowData,

package/dist/cjs/DataTable/components/CheckboxCell.js

@@ -96,19 +96,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "tapestry-react-reset tapestry-react-Checkbox",
+    className: "tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.fill,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Fill",
+    className: "tapestry-react-Checkbox-Fill",
     fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
     stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.minus,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Minus"
+    className: "tapestry-react-Checkbox-Minus"
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.checked,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
+    className: "tapestry-react-Checkbox-Checked"
   }));
 }
 

package/dist/cjs/DragDrop/DragDrop.js

@@ -21,6 +21,10 @@ var RBDND = _interopRequireWildcard(require("@planningcenter/react-beautiful-dnd
 
 var _mitt = _interopRequireDefault(require("mitt"));
 
+var _styles = require("../ThemeProvider/styles");
+
+var _system = require("../system");
+
 var _StackView = _interopRequireDefault(require("../StackView"));
 
 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; }
@@ -51,10 +55,13 @@ function Provider(_ref) {
       _onDragEnd = _ref.onDragEnd,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["onDragStart", "onDragEnd"]);
   var hasParentDragDrop = useDragDrop();
+  var themeId = (0, _system.useThemeValue)('id');
 
   if (typeof document !== 'undefined' && portalNode === null) {
     portalNode = document.createElement('div');
     portalNode.id = 'rbd-portal';
+    portalNode.className = 'tapestry-react-reset';
+    portalNode.setAttribute((0, _styles.getThemeDataAttribute)(themeId), 'true');
     document.body.appendChild(portalNode);
   }
 

package/dist/cjs/Portal/Portal.js

@@ -130,6 +130,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
       _this2._portalNode.setAttribute(key, restProps[key]);
     });
 
+    this._portalNode.classList.add('tapestry-react-reset');
+
     this._portalNode.setAttribute((0, _styles.getThemeDataAttribute)(this.context.id), 'true');
 
     if (style) {

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -8,6 +8,10 @@ exports.__esModule = true;
 exports.ThemeProvider = ThemeProvider;
 exports.themeInitializerScript = exports.themeStorage = exports.cache = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -18,6 +22,8 @@ var _cache = _interopRequireDefault(require("@emotion/cache"));
 
 var _lodash = require("lodash");
 
+var _Box = require("../Box");
+
 var _defaultTheme = _interopRequireDefault(require("../system/default-theme"));
 
 var _system = require("../system");
@@ -79,7 +85,8 @@ function ThemeProvider(_ref) {
 
   var _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
-      children = _ref.children;
+      children = _ref.children,
+      boxProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["theme", "children"]);
 
   var _useState = (0, _react.useState)(function () {
     return mergeThemes(_defaultTheme["default"], theme);
@@ -99,7 +106,9 @@ function ThemeProvider(_ref) {
     value: cache
   }, /*#__PURE__*/_react["default"].createElement(_react2.ThemeProvider, {
     theme: mergedTheme
-  }, /*#__PURE__*/_react["default"].createElement("div", (_ref2 = {}, _ref2["" + (0, _styles.getThemeDataAttribute)(mergedTheme.id)] = true, _ref2), children)));
+  }, /*#__PURE__*/_react["default"].createElement(_Box.Box, (0, _extends2["default"])({
+    className: "tapestry-react-reset"
+  }, boxProps, (_ref2 = {}, _ref2["" + (0, _styles.getThemeDataAttribute)(mergedTheme.id)] = true, _ref2)), children)));
 }
 
 ThemeProvider.cache = cache;

package/dist/cjs/ThemeProvider/styles.js

@@ -35,7 +35,7 @@ var setRootStyles = function setRootStyles(themeId, styles) {
 exports.setRootStyles = setRootStyles;
 var defaultColorProperties = (0, _utils.objectToCSSProperties)('colors', (0, _system.flattenPalette)(_system.defaultTheme.colors));
 exports.defaultColorProperties = defaultColorProperties;
-var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset * {\n  appearance: none;\n  background-color: transparent;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-weight: 400;\n  margin: 0px;\n  min-height: 0px;\n  min-width: 0px;\n  padding: 0px;\n  text-decoration: none;\n}\n\n.tapestry-react-reset *::-moz-focus-inner {\n  border: none;\n  padding: 0px;\n}\n\n.tapestry-react-reset *:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
@@ -43,9 +43,6 @@ var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tap
 exports.styleReset = styleReset;
 
 function ensureStyleElement(themeId) {
-  // we use our own global style implementation in place of Emotion Global
-  // so we can have more control over when styles are injected since multiple
-  // Providers can be used on a page
   if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
     var styleElement = document.createElement('style');
     styleElement.id = "tapestry-react-style-" + themeId;

package/dist/cjs/Tooltip/Tooltip.js

@@ -60,8 +60,8 @@ function Tooltip(props, ref) {
   var isPageInView = true;
   var isFocused = false;
   var isMouseDown = false;
-  var openTimeoutId = null;
-  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+  var openTimeoutId = (0, _react.useRef)(null);
+  var closeTimeoutId = (0, _react.useRef)(null); // prevents tooltips showing when focused and navigating back to a page after leaving
 
   var cleanupPageViewChange = (0, _react.useCallback)((0, _utils.pageViewChange)(function (inView) {
     return setTimeout(function () {
@@ -77,21 +77,21 @@ function Tooltip(props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
-      clearTimeout(openTimeoutId);
-      clearTimeout(closeTimeoutId);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
       cleanupPageViewChange();
     };
   }, []);
 
   var open = function open() {
-    clearTimeout(closeTimeoutId);
-    closeTimeoutId = null;
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
     setIsPopoverOpen(true);
   };
 
   var close = function close() {
-    clearTimeout(openTimeoutId);
-    openTimeoutId = null;
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
     setIsPopoverOpen(false);
   };
 
@@ -119,13 +119,13 @@ function Tooltip(props, ref) {
   var createOpenTimeout = (0, _react.useCallback)(function () {
     clearGlobalTimeout();
 
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId);
-      closeTimeoutId = null;
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
 
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS');
-        openTimeoutId = setTimeout(function () {
+        openTimeoutId.current = setTimeout(function () {
           return open();
         }, instantDelay ? 0 : openDelay);
       }
@@ -134,11 +134,11 @@ function Tooltip(props, ref) {
   var createCloseTimeout = (0, _react.useCallback)(function () {
     startGlobalTimeout();
 
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId);
-      openTimeoutId = null;
-      closeTimeoutId = setTimeout(function () {
-        close();
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
       }, closeDelay);
     }
   });

package/dist/cjs/index.d.js

@@ -9,7 +9,6 @@ var _exportNames = {
   Avatar: true,
   Badge: true,
   Calendar: true,
-  Checkbox: true,
   CheckboxCard: true,
   CheckboxGroup: true,
   ChurchCenterStatus: true,
@@ -31,11 +30,19 @@ var _exportNames = {
   Icon: true,
   Link: true,
   LinkList: true,
-  List: true,
   Logo: true,
   Menu: true,
   Modal: true,
   NumberField: true,
+  PageActions: true,
+  PageBody: true,
+  PageButton: true,
+  PageDropdown: true,
+  PageHeader: true,
+  PageTab: true,
+  PageTabList: true,
+  PageTitle: true,
+  PageToolbar: true,
   PagerView: true,
   Pagination: true,
   Progress: true,
@@ -46,9 +53,7 @@ var _exportNames = {
   HeadingUppercase: true,
   SegmentedControl: true,
   SegmentedTabs: true,
-  Select: true,
   Sidebar: true,
-  Sortable: true,
   StepperField: true,
   StepperProgress: true,
   Summary: true,
@@ -60,9 +65,14 @@ var _exportNames = {
   TokenInput: true,
   Tooltip: true,
   VariantProvider: true,
-  Wizard: true
+  Wizard: true,
+  Checkbox: true,
+  Input: true,
+  List: true,
+  Select: true,
+  Sortable: true
 };
-exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.TimeField = exports.TextArea = exports.Tabs = exports.Table = exports.Summary = exports.StepperProgress = exports.StepperField = exports.Sortable = exports.Sidebar = exports.Select = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Pagination = exports.PagerView = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.List = exports.LinkList = exports.Link = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Checkbox = exports.Calendar = exports.Badge = exports.Avatar = exports.utils = exports.server = exports.hooks = exports.designSystem = void 0;
+exports.Sortable = exports.Select = exports.List = exports.Input = exports.Checkbox = exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.TimeField = exports.TextArea = exports.Tabs = exports.Table = exports.Summary = exports.StepperProgress = exports.StepperField = exports.Sidebar = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Pagination = exports.PagerView = exports.PageToolbar = exports.PageTitle = exports.PageTabList = exports.PageTab = exports.PageHeader = exports.PageDropdown = exports.PageButton = exports.PageBody = exports.PageActions = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.LinkList = exports.Link = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Calendar = exports.Badge = exports.Avatar = exports.utils = exports.server = exports.hooks = exports.designSystem = void 0;
 
 var _Alert = require("./Alert");
 
@@ -136,15 +146,6 @@ Object.keys(_Group).forEach(function (key) {
   exports[key] = _Group[key];
 });
 
-var _Input = require("./Input");
-
-Object.keys(_Input).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Input[key]) return;
-  exports[key] = _Input[key];
-});
-
 var _Popover = require("./Popover");
 
 Object.keys(_Popover).forEach(function (key) {
@@ -248,8 +249,6 @@ var Badge;
 exports.Badge = Badge;
 var Calendar;
 exports.Calendar = Calendar;
-var Checkbox;
-exports.Checkbox = Checkbox;
 var CheckboxCard;
 exports.CheckboxCard = CheckboxCard;
 var CheckboxGroup;
@@ -292,8 +291,6 @@ var Link;
 exports.Link = Link;
 var LinkList;
 exports.LinkList = LinkList;
-var List;
-exports.List = List;
 var Logo;
 exports.Logo = Logo;
 var Menu;
@@ -302,6 +299,24 @@ var Modal;
 exports.Modal = Modal;
 var NumberField;
 exports.NumberField = NumberField;
+var PageActions;
+exports.PageActions = PageActions;
+var PageBody;
+exports.PageBody = PageBody;
+var PageButton;
+exports.PageButton = PageButton;
+var PageDropdown;
+exports.PageDropdown = PageDropdown;
+var PageHeader;
+exports.PageHeader = PageHeader;
+var PageTab;
+exports.PageTab = PageTab;
+var PageTabList;
+exports.PageTabList = PageTabList;
+var PageTitle;
+exports.PageTitle = PageTitle;
+var PageToolbar;
+exports.PageToolbar = PageToolbar;
 var PagerView;
 exports.PagerView = PagerView;
 var Pagination;
@@ -322,12 +337,8 @@ var SegmentedControl;
 exports.SegmentedControl = SegmentedControl;
 var SegmentedTabs;
 exports.SegmentedTabs = SegmentedTabs;
-var Select;
-exports.Select = Select;
 var Sidebar;
 exports.Sidebar = Sidebar;
-var Sortable;
-exports.Sortable = Sortable;
 var StepperField;
 exports.StepperField = StepperField;
 var StepperProgress;
@@ -350,5 +361,39 @@ var Tooltip;
 exports.Tooltip = Tooltip;
 var VariantProvider;
 exports.VariantProvider = VariantProvider;
-var Wizard;
-exports.Wizard = Wizard;
+var Wizard; // ============
+// Manual Types
+// ===========
+// These are components written in JS, where we can provide very small (one prop at a time) useful
+// typings for consumers.
+// ============
+
+exports.Wizard = Wizard;
+// ========
+// Checkbox
+// ========
+var Checkbox; // =====
+// Input
+// =====
+
+exports.Checkbox = Checkbox;
+var Input; // ====
+// List
+// ====
+
+exports.Input = Input;
+var List; // ======
+// Select
+// ======
+
+exports.List = List;
+var Select; // ========
+// Sortable
+// ========
+
+exports.Select = Select;
+var Sortable; // =====================
+// Typescript Components
+// =====================
+
+exports.Sortable = Sortable;

package/dist/cjs/system/split-styles.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = _default;
+exports["default"] = SplitStyles;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -17,7 +17,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) { (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 _default(_ref) {
+function SplitStyles(_ref) {
   var className = _ref.className,
       _ref$mediaQueries = _ref.mediaQueries,
       mediaQueries = _ref$mediaQueries === void 0 ? {} : _ref$mediaQueries,
@@ -46,7 +46,7 @@ function _default(_ref) {
   }
 
   return _objectSpread(_objectSpread({}, restProps), {}, {
-    className: className ? "tapestry-react-reset " + className : "tapestry-react-reset",
+    className: className,
     css: function css(theme) {
       var propStyles = {};
 

package/dist/esm/DataTable/DataTable.js

@@ -182,7 +182,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: "tapestry-react-reset " + css({
+    className: css({
       position: 'relative'
     })
   }, /*#__PURE__*/React.createElement("div", {
@@ -203,7 +203,7 @@ var DataTable = function DataTable(props) {
       column: column,
       columnIndex: columnIndex,
       columnSort: columnSort,
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     });
   }))), bodyToRender, hasFooterColumns && /*#__PURE__*/React.createElement("div", {
     ref: footerRef,
@@ -221,7 +221,7 @@ var DataTable = function DataTable(props) {
       key: columnIndex,
       role: "cell",
       ref: getColumnRef(columnIndex + "." + (data.length + 1)),
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     }, typeof column.footer === 'string' || /*#__PURE__*/React.isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/React.createElement(column.footer, {
       columnIndex: columnIndex
     }) : null);

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

@@ -42,7 +42,7 @@ function BodyRows(_ref) {
           ref: getColumnRef(columnIndex + "." + (rowIndex + 1)) // offset by 1 to account for header row
           ,
           role: "cell",
-          className: "tapestry-react-reset " + css([].concat(cellVariantStyles, [column.css]))
+          className: css([].concat(cellVariantStyles, [column.css]))
         }, getCell(column.cell, {
           columnIndex: columnIndex,
           rowData: rowData,
@@ -68,7 +68,7 @@ function BodyRows(_ref) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, getRowLinkProps({
       getRowLink: getRowLink,
       data: rowData,

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

@@ -58,7 +58,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, getRowLinkProps({
       getRowLink: getRowLink,
       data: rowData,
@@ -77,7 +77,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       return /*#__PURE__*/React.createElement("div", {
         key: columnIndex,
         ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
-        className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+        className: css([].concat(cellVariantClassName, [column.css]))
       }, getCell(column.subCell !== undefined ? column.subCell : column.cell, {
         columnIndex: columnIndex,
         rowData: rowData,

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

@@ -85,19 +85,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "tapestry-react-reset tapestry-react-Checkbox",
+    className: "tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.fill,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Fill",
+    className: "tapestry-react-Checkbox-Fill",
     fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
     stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.minus,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Minus"
+    className: "tapestry-react-Checkbox-Minus"
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.checked,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
+    className: "tapestry-react-Checkbox-Checked"
   }));
 }
 

package/dist/esm/DragDrop/DragDrop.js

@@ -10,6 +10,8 @@ import React, { Children, Fragment, createElement, createContext, useContext, us
 import { createPortal } from 'react-dom';
 import * as RBDND from '@planningcenter/react-beautiful-dnd';
 import mitt from 'mitt';
+import { getThemeDataAttribute } from '../ThemeProvider/styles';
+import { useThemeValue } from '../system';
 import StackView from '../StackView';
 var DragDropContext = /*#__PURE__*/createContext(false);
 var DroppableContext = /*#__PURE__*/createContext(false);
@@ -36,10 +38,13 @@ function Provider(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, ["onDragStart", "onDragEnd"]);
 
   var hasParentDragDrop = useDragDrop();
+  var themeId = useThemeValue('id');
 
   if (typeof document !== 'undefined' && portalNode === null) {
     portalNode = document.createElement('div');
     portalNode.id = 'rbd-portal';
+    portalNode.className = 'tapestry-react-reset';
+    portalNode.setAttribute(getThemeDataAttribute(themeId), 'true');
     document.body.appendChild(portalNode);
   }
 

package/dist/esm/Portal/Portal.js

@@ -120,6 +120,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
       _this2._portalNode.setAttribute(key, restProps[key]);
     });
 
+    this._portalNode.classList.add('tapestry-react-reset');
+
     this._portalNode.setAttribute(getThemeDataAttribute(this.context.id), 'true');
 
     if (style) {

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -1,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 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; }
@@ -9,6 +11,7 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { merge } from 'lodash';
+import { Box } from '../Box';
 import defaultTheme from '../system/default-theme';
 import { flattenPalette } from '../system';
 import { objectToCSSProperties, shallowEqual } from '../utils';
@@ -56,7 +59,8 @@ export function ThemeProvider(_ref) {
 
   var _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
-      children = _ref.children;
+      children = _ref.children,
+      boxProps = _objectWithoutPropertiesLoose(_ref, ["theme", "children"]);
 
   var _useState = useState(function () {
     return mergeThemes(defaultTheme, theme);
@@ -76,7 +80,9 @@ export function ThemeProvider(_ref) {
     value: cache
   }, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
     theme: mergedTheme
-  }, /*#__PURE__*/React.createElement("div", (_ref2 = {}, _ref2["" + getThemeDataAttribute(mergedTheme.id)] = true, _ref2), children)));
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    className: "tapestry-react-reset"
+  }, boxProps, (_ref2 = {}, _ref2["" + getThemeDataAttribute(mergedTheme.id)] = true, _ref2)), children)));
 }
 ThemeProvider.cache = cache;
 ThemeProvider.setRootStyles = setRootStyles;

package/dist/esm/ThemeProvider/styles.js

@@ -24,15 +24,12 @@ export var setRootStyles = function setRootStyles(themeId, styles) {
   sheet.insertRule(styleString, 0);
 };
 export var defaultColorProperties = objectToCSSProperties('colors', flattenPalette(defaultTheme.colors));
-export var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+export var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset * {\n  appearance: none;\n  background-color: transparent;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-weight: 400;\n  margin: 0px;\n  min-height: 0px;\n  min-width: 0px;\n  padding: 0px;\n  text-decoration: none;\n}\n\n.tapestry-react-reset *::-moz-focus-inner {\n  border: none;\n  padding: 0px;\n}\n\n.tapestry-react-reset *:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
 
 function ensureStyleElement(themeId) {
-  // we use our own global style implementation in place of Emotion Global
-  // so we can have more control over when styles are injected since multiple
-  // Providers can be used on a page
   if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
     var styleElement = document.createElement('style');
     styleElement.id = "tapestry-react-style-" + themeId;