@planningcenter/tapestry-react 2.6.0-rc.2 → 2.6.0-rc.4

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

@@ -45,7 +45,7 @@ function Icon(_ref) {
     width: iconSize,
     height: iconSize,
     fill: themeColor,
-    className: "tapestry-react-Icon-Svg",
+    className: "tapestry-react-reset",
     children: childrenToRender
   }, props));
 }

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[class^=\"tapestry-react\"] {\n  appearance: none;\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[class^=\"tapestry-react\"]::-moz-focus-inner {\n  border: none;\n  padding: 0px;\n}\n\n[class^=\"tapestry-react\"]: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

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/esm/DataTable/components/Icon.js

@@ -36,7 +36,7 @@ function Icon(_ref) {
     width: iconSize,
     height: iconSize,
     fill: themeColor,
-    className: "tapestry-react-Icon-Svg",
+    className: "tapestry-react-reset",
     children: childrenToRender
   }, props));
 }

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,7 +24,7 @@ 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[class^=\"tapestry-react\"] {\n  appearance: none;\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[class^=\"tapestry-react\"]::-moz-focus-inner {\n  border: none;\n  padding: 0px;\n}\n\n[class^=\"tapestry-react\"]: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

package/dist/esm/index.d.js

@@ -5,7 +5,6 @@ export var utils;
 export var Avatar;
 export var Badge;
 export var Calendar;
-export var Checkbox;
 export var CheckboxCard;
 export var CheckboxGroup;
 export var ChurchCenterStatus;
@@ -27,11 +26,19 @@ export var Highlight;
 export var Icon;
 export var Link;
 export var LinkList;
-export var List;
 export var Logo;
 export var Menu;
 export var Modal;
 export var NumberField;
+export var PageActions;
+export var PageBody;
+export var PageButton;
+export var PageDropdown;
+export var PageHeader;
+export var PageTab;
+export var PageTabList;
+export var PageTitle;
+export var PageToolbar;
 export var PagerView;
 export var Pagination;
 export var Progress;
@@ -42,9 +49,7 @@ export var Section;
 export var HeadingUppercase;
 export var SegmentedControl;
 export var SegmentedTabs;
-export var Select;
 export var Sidebar;
-export var Sortable;
 export var StepperField;
 export var StepperProgress;
 export var Summary;
@@ -56,7 +61,36 @@ export var Toolbar;
 export var TokenInput;
 export var Tooltip;
 export var VariantProvider;
-export var Wizard;
+export 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.
+// ============
+
+// ========
+// Checkbox
+// ========
+export var Checkbox; // =====
+// Input
+// =====
+
+export var Input; // ====
+// List
+// ====
+
+export var List; // ======
+// Select
+// ======
+
+export var Select; // ========
+// Sortable
+// ========
+
+export var Sortable; // =====================
+// Typescript Components
+// =====================
+
 export * from './Alert';
 export * from './Box';
 export * from './Button';
@@ -65,7 +99,6 @@ export * from './Divider';
 export * from './FilterLayout';
 export * from './GridView';
 export * from './Group';
-export * from './Input';
 export * from './Popover';
 export * from './Portal';
 export * from './Scrim';

package/dist/types/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { ColorProp } from '../index';
+import { ColorProp, StyleProps } from '../index';
 export declare type DividerProps = {
     /**
      * The direction the dividing line should span.
@@ -16,7 +16,7 @@ export declare type DividerProps = {
      * The size of the line in pixels
      */
     size?: number;
-};
+} & StyleProps;
 /**
  * Used to break up content
  */

package/dist/types/Spinner/Spinner.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import { StyleProps } from '../index';
 export declare type SpinnerProps = {
     /**
      * Uses position absolute and transforms to position in the center of a relative parent.
@@ -19,5 +21,5 @@ export declare type SpinnerProps = {
      * Secondary color of spinner.
      */
     trackColor?: string;
-};
+} & StyleProps & React.HTMLAttributes<HTMLElement>;
 export declare function Spinner({ center, size, thickness, ...props }: SpinnerProps): JSX.Element;

package/dist/types/ThemeProvider/ThemeProvider.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BoxProps } from '../Box';
 import { Theme } from '../index';
 import { setRootStyles, styleReset } from './styles';
 export declare const cache: import("@emotion/utils").EmotionCache;
@@ -7,9 +8,10 @@ export declare const themeStorage: {
     set: (value: any) => void;
 };
 export declare const themeInitializerScript: string;
-export declare function ThemeProvider({ theme, children, }: {
+export declare function ThemeProvider({ theme, children, ...boxProps }: {
     theme?: Theme;
     children: React.ReactNode;
+    boxProps?: BoxProps;
 }): JSX.Element;
 export declare namespace ThemeProvider {
     var cache: import("@emotion/utils").EmotionCache;

package/dist/types/index.d.ts

@@ -259,6 +259,10 @@ export type CommonProps = React.RefAttributes<any> &
   React.HTMLAttributes<any> &
   any
 
+export type CommonComponent = React.FC<CommonProps>
+export type CommonPropsWith<T extends object> = Omit<CommonProps, keyof T> & T
+export type CommonComponentWith<T extends object> = React.FC<CommonPropsWith<T>>
+
 export const designSystem: any
 export const hooks: any
 export const server: any
@@ -267,7 +271,6 @@ export const utils: any
 export const Avatar: React.FC<CommonProps>
 export const Badge: React.FC<CommonProps>
 export const Calendar: React.FC<CommonProps>
-export const Checkbox: React.FC<CommonProps>
 export const CheckboxCard: React.FC<CommonProps>
 export const CheckboxGroup: React.FC<CommonProps>
 export const ChurchCenterStatus: React.FC<CommonProps>
@@ -289,11 +292,19 @@ export const Highlight: React.FC<CommonProps>
 export const Icon: React.FC<CommonProps>
 export const Link: React.FC<CommonProps>
 export const LinkList: React.FC<CommonProps>
-export const List: React.FC<CommonProps>
 export const Logo: React.FC<CommonProps>
 export const Menu: React.FC<CommonProps>
 export const Modal: React.FC<CommonProps>
 export const NumberField: React.FC<CommonProps>
+export const PageActions: CommonComponent
+export const PageBody: CommonComponent
+export const PageButton: CommonComponent
+export const PageDropdown: CommonComponent
+export const PageHeader: CommonComponent
+export const PageTab: CommonComponent
+export const PageTabList: CommonComponent
+export const PageTitle: CommonComponent
+export const PageToolbar: CommonComponent
 export const PagerView: React.FC<CommonProps>
 export const Pagination: React.FC<CommonProps>
 export const Progress: React.FC<CommonProps>
@@ -304,9 +315,7 @@ export const Section: React.FC<CommonProps>
 export const HeadingUppercase: React.FC<CommonProps>
 export const SegmentedControl: React.FC<CommonProps>
 export const SegmentedTabs: React.FC<CommonProps>
-export const Select: React.FC<CommonProps>
 export const Sidebar: React.FC<CommonProps>
-export const Sortable: React.FC<CommonProps>
 export const StepperField: React.FC<CommonProps>
 export const StepperProgress: React.FC<CommonProps>
 export const Summary: React.FC<CommonProps>
@@ -320,6 +329,67 @@ export const Tooltip: React.FC<CommonProps>
 export const VariantProvider: React.FC<CommonProps>
 export const Wizard: React.FC<CommonProps>
 
+// ============
+// Manual Types
+// ===========
+// These are components written in JS, where we can provide very small (one prop at a time) useful
+// typings for consumers.
+// ============
+
+type HTMLInputWrapperComponent = CommonComponentWith<{
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}>
+
+// ========
+// Checkbox
+// ========
+
+export const Checkbox: HTMLInputWrapperComponent
+
+// =====
+// Input
+// =====
+
+export const Input: CommonComponent & {
+  Inline: HTMLInputWrapperComponent
+  Input: HTMLInputWrapperComponent
+  InputBox: CommonComponent
+  InputField: HTMLInputWrapperComponent
+  InputLabel: CommonComponent
+}
+
+// ====
+// List
+// ====
+
+export const List: CommonComponent & { Item: CommonComponent }
+
+// ======
+// Select
+// ======
+
+export const Select: CommonComponent & {
+  Inline: CommonComponent
+  Option: CommonComponent
+  OptionGroup: CommonComponent
+  Value: CommonComponent
+  toggleValue: (...args: unknown) => unknown
+}
+
+// ========
+// Sortable
+// ========
+
+export const Sortable: CommonComponent & {
+  SortableManager: CommonComponent
+  SortableList: CommonComponent
+  SortableItem: CommonComponent
+}
+
+// =====================
+// Typescript Components
+// =====================
+
 export * from './Alert'
 export * from './Box'
 export * from './Button'
@@ -328,7 +398,6 @@ export * from './Divider'
 export * from './FilterLayout'
 export * from './GridView'
 export * from './Group'
-export * from './Input'
 export * from './Popover'
 export * from './Portal'
 export * from './Scrim'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.0-rc.2",
+  "version": "2.6.0-rc.4",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/DataTable/components/Icon.js

@@ -25,7 +25,7 @@ function Icon({ as, name, size = 'md', color, children, ...props }) {
       width={iconSize}
       height={iconSize}
       fill={themeColor}
-      className="tapestry-react-Icon-Svg"
+      className="tapestry-react-reset"
       children={childrenToRender}
       {...props}
     />

package/src/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box from '../Box'
-import { BoxProps, ColorProp } from '../index'
+import { BoxProps, ColorProp, StyleProps } from '../index'
 
 export type DividerProps = {
   /**
@@ -23,7 +23,7 @@ export type DividerProps = {
    * The size of the line in pixels
    */
   size?: number
-}
+} & StyleProps
 
 /**
  * Used to break up content

package/src/DragDrop/DragDrop.js

@@ -9,6 +9,8 @@ import React, {
 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'
 
@@ -33,9 +35,12 @@ function useDragDrop() {
 
 function Provider({ onDragStart, onDragEnd, ...props }) {
   const hasParentDragDrop = useDragDrop()
+  const 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)
   }
   useEffect(() => {

package/src/Icon/Icon.mdx

@@ -29,35 +29,35 @@ An "icon set" groups product-specific icon paths together. By default, `tapestry
 Additional icon sets can be imported from [libraries like `@planningcenter/icons`](https://github.com/planningcenter/icons) and exported through your app's [ThemeProvider](/theming#themeprovider). (You can import all exports [by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents).)
 
 ```jsx
+{/* import icon sets in local theme definition */}
 import * as calendar from '@planningcenter/icons/paths/calendar'
 import * as giving from '@planningcenter/icons/paths/giving'
 import * as people from '@planningcenter/icons/paths/people'
 
 const theme = {
+  ...themeOptions,
   icons: {
     calendar,
     giving,
-    people
+    people,
+    ...designSystem.defaultTheme.icons
   },
 }
 
-<ThemeProvider theme={theme}>
-  <Icon name="calendar.reservationBlock" />
-  <Icon name="giving.clockCircleO" />
-  <Icon name="people.photoOutline" />
-</ThemeProvider>
+{/* prefix Icon instance in component */}
+<Icon name="calendar.reservationBlock" />
+<Icon name="giving.clockCircleO" />
+<Icon name="people.photoOutline" />
 ```
 
 ```jsx live
 render(() => {
   return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView axis="horizontal" spacing={2}>
-        <Icon name="calendar.reservationBlock" size="xl" />
-        <Icon name="giving.clockCircleO" size="xl" />
-        <Icon name="people.photoOutline" size="xl" />
-      </StackView>
-    </ThemeProvider>
+    <StackView axis="horizontal" spacing={2}>
+      <Icon name="calendar.reservationBlock" size="xl" />
+      <Icon name="giving.clockCircleO" size="xl" />
+      <Icon name="people.photoOutline" size="xl" />
+    </StackView>
   )
 })
 ```
@@ -72,42 +72,40 @@ render(() => {
   const [appName, setAppName] = React.useState('general')
 
   return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView grow={1}>
-        <StackView axis="horizontal" spacing={2}>
-          <Select
-            basis={26}
-            emptyValue="Choose icon set"
-            onChange={(event) => setAppName(event.value)}
-            defaultValue={appName}
-          >
-            {appNames.map((appName) => (
-              <Select.Option key={appName} value={appName}>
-                {appName}
-              </Select.Option>
-            ))}
-          </Select>
-          <Input
-            grow={1}
-            autoFocus
-            renderLeft={<Icon name="general.search" />}
-            placeholder="Search by icon name"
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-          />
-        </StackView>
-        <TileView minCellWidth={16} spacing={4} margin={4}>
-          {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
-            <StackView key={iconName} alignment="center" spacing={1}>
-              <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
-              <Text fontSize={5} color="foregroundSecondary">
-                {iconName}
-              </Text>
-            </StackView>
+    <StackView grow={1}>
+      <StackView axis="horizontal" spacing={2}>
+        <Select
+          basis={26}
+          emptyValue="Choose icon set"
+          onChange={(event) => setAppName(event.value)}
+          defaultValue={appName}
+        >
+          {appNames.map((appName) => (
+            <Select.Option key={appName} value={appName}>
+              {appName}
+            </Select.Option>
           ))}
-        </TileView>
+        </Select>
+        <Input
+          grow={1}
+          autoFocus
+          renderLeft={<Icon name="general.search" />}
+          placeholder="Search by icon name"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
       </StackView>
-    </ThemeProvider>
+      <TileView minCellWidth={16} spacing={4} margin={4}>
+        {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
+          <StackView key={iconName} alignment="center" spacing={1}>
+            <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
+            <Text fontSize={5} color="foregroundSecondary">
+              {iconName}
+            </Text>
+          </StackView>
+        ))}
+      </TileView>
+    </StackView> 
   )
 })
 ```

package/src/Portal/Portal.tsx

@@ -111,6 +111,9 @@ class Portal extends React.Component<PortalProps> {
     Object.keys(restProps).forEach((key) => {
       this._portalNode.setAttribute(key, restProps[key])
     })
+
+    this._portalNode.classList.add('tapestry-react-reset')
+
     this._portalNode.setAttribute(
       getThemeDataAttribute(this.context.id),
       'true'

package/src/RangeSlider/RangeSlider.mdx

@@ -11,18 +11,16 @@ render(() => {
   const [volume, setVolume] = React.useState(50)
   const muted = volume === 0
   return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
-        <Icon>
-          <Icon.Path name="services.volume0" />
-          <Icon.Path name="services.volume1" visible={muted} />
-          <Icon.Path name="services.volume2" visible={!muted} />
-          <Icon.Path name="services.volume3" visible={!muted && volume > 50} />
-        </Icon>
-        <RangeSlider value={volume} onChange={setVolume} />
-        <Text>{volume}</Text>
-      </StackView>
-    </ThemeProvider>
+    <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
+      <Icon>
+        <Icon.Path name="services.volume0" />
+        <Icon.Path name="services.volume1" visible={muted} />
+        <Icon.Path name="services.volume2" visible={!muted} />
+        <Icon.Path name="services.volume3" visible={!muted && volume > 50} />
+      </Icon>
+      <RangeSlider value={volume} onChange={setVolume} />
+      <Text>{volume}</Text>
+    </StackView>
   )
 })
 ```

package/src/Spinner/Spinner.tsx

@@ -3,6 +3,7 @@ import { keyframes } from '@emotion/react'
 
 import { Box } from '../Box'
 import { useThemeProps } from '../system'
+import { StyleProps } from '../index'
 
 const rotate = keyframes({
   '100%': { transform: 'rotate(360deg)' },
@@ -37,7 +38,7 @@ export type SpinnerProps = {
    * Secondary color of spinner.
    */
   trackColor?: string
-}
+} & StyleProps & React.HTMLAttributes<HTMLElement>
 
 export function Spinner({
   center,

package/src/ThemeProvider/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
 import { CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { merge } from 'lodash'
+import { Box, BoxProps } from '../Box'
 
 import defaultTheme from '../system/default-theme'
 import { flattenPalette } from '../system'
@@ -56,9 +57,11 @@ function mergeThemes(a: Theme = {}, b: Theme = {}) {
 export function ThemeProvider({
   theme = emptyTheme,
   children,
+  ...boxProps
 }: {
   theme?: Theme
   children: React.ReactNode
+  boxProps?: BoxProps
 }) {
   const [mergedTheme, setMergedTheme] = useState(() =>
     mergeThemes(defaultTheme, theme)
@@ -76,9 +79,13 @@ export function ThemeProvider({
   return (
     <CacheProvider value={cache}>
       <EmotionThemeProvider theme={mergedTheme}>
-        <div {...{ [`${getThemeDataAttribute(mergedTheme.id)}`]: true }}>
+        <Box
+          className="tapestry-react-reset"
+          {...boxProps}
+          {...{ [`${getThemeDataAttribute(mergedTheme.id)}`]: true }}
+        >
           {children}
-        </div>
+        </Box>
       </EmotionThemeProvider>
     </CacheProvider>
   )

package/src/ThemeProvider/styles.ts

@@ -37,8 +37,9 @@ export const defaultColorProperties = objectToCSSProperties(
 export const styleReset = `
 ${getRootStyles(null, defaultColorProperties)}
 
-[class^="tapestry-react"] {
+.tapestry-react-reset * {
   appearance: none;
+  background-color: transparent;
   border-width: 0px;
   border-style: solid;
   border-color: transparent;
@@ -56,12 +57,12 @@ ${getRootStyles(null, defaultColorProperties)}
   text-decoration: none;
 }
 
-[class^="tapestry-react"]::-moz-focus-inner {
+.tapestry-react-reset *::-moz-focus-inner {
   border: none;
   padding: 0px;
 }
 
-[class^="tapestry-react"]:focus:not(.focus-visible) {
+.tapestry-react-reset *:focus:not(.focus-visible) {
   outline: 0px;
 }
 `

package/src/index.d.ts

@@ -259,6 +259,10 @@ export type CommonProps = React.RefAttributes<any> &
   React.HTMLAttributes<any> &
   any
 
+export type CommonComponent = React.FC<CommonProps>
+export type CommonPropsWith<T extends object> = Omit<CommonProps, keyof T> & T
+export type CommonComponentWith<T extends object> = React.FC<CommonPropsWith<T>>
+
 export const designSystem: any
 export const hooks: any
 export const server: any
@@ -267,7 +271,6 @@ export const utils: any
 export const Avatar: React.FC<CommonProps>
 export const Badge: React.FC<CommonProps>
 export const Calendar: React.FC<CommonProps>
-export const Checkbox: React.FC<CommonProps>
 export const CheckboxCard: React.FC<CommonProps>
 export const CheckboxGroup: React.FC<CommonProps>
 export const ChurchCenterStatus: React.FC<CommonProps>
@@ -289,11 +292,19 @@ export const Highlight: React.FC<CommonProps>
 export const Icon: React.FC<CommonProps>
 export const Link: React.FC<CommonProps>
 export const LinkList: React.FC<CommonProps>
-export const List: React.FC<CommonProps>
 export const Logo: React.FC<CommonProps>
 export const Menu: React.FC<CommonProps>
 export const Modal: React.FC<CommonProps>
 export const NumberField: React.FC<CommonProps>
+export const PageActions: CommonComponent
+export const PageBody: CommonComponent
+export const PageButton: CommonComponent
+export const PageDropdown: CommonComponent
+export const PageHeader: CommonComponent
+export const PageTab: CommonComponent
+export const PageTabList: CommonComponent
+export const PageTitle: CommonComponent
+export const PageToolbar: CommonComponent
 export const PagerView: React.FC<CommonProps>
 export const Pagination: React.FC<CommonProps>
 export const Progress: React.FC<CommonProps>
@@ -304,9 +315,7 @@ export const Section: React.FC<CommonProps>
 export const HeadingUppercase: React.FC<CommonProps>
 export const SegmentedControl: React.FC<CommonProps>
 export const SegmentedTabs: React.FC<CommonProps>
-export const Select: React.FC<CommonProps>
 export const Sidebar: React.FC<CommonProps>
-export const Sortable: React.FC<CommonProps>
 export const StepperField: React.FC<CommonProps>
 export const StepperProgress: React.FC<CommonProps>
 export const Summary: React.FC<CommonProps>
@@ -320,6 +329,67 @@ export const Tooltip: React.FC<CommonProps>
 export const VariantProvider: React.FC<CommonProps>
 export const Wizard: React.FC<CommonProps>
 
+// ============
+// Manual Types
+// ===========
+// These are components written in JS, where we can provide very small (one prop at a time) useful
+// typings for consumers.
+// ============
+
+type HTMLInputWrapperComponent = CommonComponentWith<{
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}>
+
+// ========
+// Checkbox
+// ========
+
+export const Checkbox: HTMLInputWrapperComponent
+
+// =====
+// Input
+// =====
+
+export const Input: CommonComponent & {
+  Inline: HTMLInputWrapperComponent
+  Input: HTMLInputWrapperComponent
+  InputBox: CommonComponent
+  InputField: HTMLInputWrapperComponent
+  InputLabel: CommonComponent
+}
+
+// ====
+// List
+// ====
+
+export const List: CommonComponent & { Item: CommonComponent }
+
+// ======
+// Select
+// ======
+
+export const Select: CommonComponent & {
+  Inline: CommonComponent
+  Option: CommonComponent
+  OptionGroup: CommonComponent
+  Value: CommonComponent
+  toggleValue: (...args: unknown) => unknown
+}
+
+// ========
+// Sortable
+// ========
+
+export const Sortable: CommonComponent & {
+  SortableManager: CommonComponent
+  SortableList: CommonComponent
+  SortableItem: CommonComponent
+}
+
+// =====================
+// Typescript Components
+// =====================
+
 export * from './Alert'
 export * from './Box'
 export * from './Button'
@@ -328,7 +398,6 @@ export * from './Divider'
 export * from './FilterLayout'
 export * from './GridView'
 export * from './Group'
-export * from './Input'
 export * from './Popover'
 export * from './Portal'
 export * from './Scrim'