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

package/dist/cjs/Button/Button.js

@@ -217,6 +217,13 @@ function Button(_ref) {
 
   if (to) {
     restProps['href'] = to;
+  } // remove `type` if either `to` or `href` is specified
+
+
+  if (to || restProps.href) {
+    buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
+      type: null
+    });
   } // apply stroke defaults and higher z-index when hovering to show outline in group properly
 
 
@@ -259,7 +266,7 @@ function Button(_ref) {
       restProps = (0, _utils.mergeProps)(restProps, wrapperProps);
     }
 
-    if (type && restProps.as && restProps.as !== "button") {
+    if (buttonProps.type && restProps.as && restProps.as !== "button") {
       console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }

package/dist/cjs/Button/Button.test.js

@@ -8,25 +8,68 @@ var _react2 = require("@testing-library/react");
 
 var _Button = require("./Button");
 
+it("should render as <button> with type=\"button\" by default", function () {
+  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
+      container = _render.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('button');
+});
+it("should render as <button> with type=\"submit\"", function () {
+  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    type: "submit"
+  })),
+      container = _render2.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('submit');
+});
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     title: title
   })),
-      getByText = _render.getByText;
+      getByText = _render3.getByText;
 
   getByText(title);
 });
+it("should render <a> without a type if \"to\" is provided", function () {
+  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    to: "#"
+  })),
+      container = _render4.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+it("should render <a> without a type if \"href\" is provided", function () {
+  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    href: "#"
+  })),
+      container = _render5.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+it("should render <a> with \"href\" if \"to\" is specifed", function () {
+  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    to: "#"
+  })),
+      container = _render6.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('href')).toEqual('#');
+});
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render2.getByText;
+      getByText = _render7.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -36,18 +79,18 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: onClick
   })),
-      container = _render3.container;
+      container = _render8.container;
 
   _react2.fireEvent.click(container.firstChild);
 
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
-      container = _render4.container;
+  var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
+      container = _render9.container;
 
   _react2.fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

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

@@ -37,8 +37,8 @@ function BodyRow(_ref) {
 
   var props = _objectSpread({
     ref: innerRef,
-    onClick: onRowClick && function () {
-      return onRowClick(rowData, rowIndex);
+    onClick: function onClick(event) {
+      return onRowClick && onRowClick(rowData, rowIndex, event);
     },
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,

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

@@ -105,7 +105,7 @@ function CheckboxCell(_ref) {
     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-reset tapestry-react-Checkbox-Fill"
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.checked,
     className: "tapestry-react-reset tapestry-react-Checkbox-Checked"

package/dist/cjs/DataTable/hooks/useCollapsibleRows.js

@@ -15,7 +15,7 @@ var _react = require("react");
 
 var _useConstant = _interopRequireDefault(require("../../hooks/useConstant"));
 
-var _zustand = _interopRequireDefault(require("zustand"));
+var _zustand = require("zustand");
 
 var _utils = require("../../utils");
 
@@ -51,7 +51,7 @@ function useCollapsibleRows(data, defaultAllSubRowsOpen) {
   }
 
   var useStore = (0, _useConstant["default"])(function () {
-    return (0, _zustand["default"])(function (set) {
+    return (0, _zustand.create)(function (set) {
       return {
         instant: false,
         allSubRowsOpen: defaultAllSubRowsOpen,

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/Dropdown/Dropdown.js

@@ -84,7 +84,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         _this.popover.focusAnchor();
       }
 
-      if (data === _Link.LINK_DATA) {
+      if (node.tagName === 'A' && event.type !== 'click') {
         node.click();
       } else if (_this.props.onSelect) {
         _this.props.onSelect(data);
@@ -112,7 +112,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         keepInView = _this$props.keepInView,
         lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
         matchWidths = _this$props.matchWidths,
-        onClick = _this$props.onClick,
+        _onClick = _this$props.onClick,
         onClose = _this$props.onClose,
         onKeyDown = _this$props.onKeyDown,
         onOpen = _this$props.onOpen,
@@ -194,12 +194,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
                 name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick(event) {
                 _this2.togglePopover();
 
                 if (!isPopoverOpen) {
                   _this2.popover.focusAnchor();
                 }
+
+                _onClick && _onClick(event);
               }, _objectSpread2.onKeyDown = function onKeyDown(event) {
                 anchorProps.onKeyDown(event);
 

package/dist/cjs/Dropdown/Link.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.LINK_DATA = exports.LINK_DISPLAY_NAME = void 0;
+exports["default"] = exports.LINK_DISPLAY_NAME = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -23,8 +23,6 @@ var _Menu = _interopRequireDefault(require("../Menu"));
 
 var LINK_DISPLAY_NAME = 'Dropdown.Link';
 exports.LINK_DISPLAY_NAME = LINK_DISPLAY_NAME;
-var LINK_DATA = 'link';
-exports.LINK_DATA = LINK_DATA;
 
 var Link = /*#__PURE__*/function (_Component) {
   (0, _inheritsLoose2["default"])(Link, _Component);
@@ -51,7 +49,7 @@ var Link = /*#__PURE__*/function (_Component) {
     }
 
     return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListItem, {
-      data: LINK_DATA,
+      data: "link",
       text: text,
       disabled: disabled,
       index: index

package/dist/cjs/Input/InputLabel.js

@@ -11,12 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _system = require("../system");
@@ -25,68 +19,51 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _utils = require("./utils");
 
-var InputLabel = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(InputLabel, _Component);
+function InputLabel(_ref) {
+  var controls = _ref.controls,
+      state = _ref.state,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["controls", "state"]);
 
-  function InputLabel() {
-    var _this;
+  var _useThemeProps = (0, _system.useThemeProps)('inputLabel', restProps),
+      themeProps = (0, _extends2["default"])({}, _useThemeProps);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var input = (0, _react.useRef)(null);
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusInput", function () {
-      _this.input && _this.input.focus();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOver", function () {
-      _this.input && _this.input.setState({
-        isHovered: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOut", function () {
-      _this.input && _this.input.setState({
-        isHovered: false
-      });
-    });
-    return _this;
+  if (controls) {
+    themeProps.id = controls + "-label";
+  }
+
+  if (state) {
+    themeProps.color = (0, _system.getColor)(state);
   }
 
-  var _proto = InputLabel.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.input = _utils.inputs[this.props.controls];
-    _utils.inputLabels[this.props.controls] = true;
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    delete _utils.inputLabels[this.props.controls];
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        controls = _this$props.controls,
-        state = _this$props.state,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["controls", "state"]);
-
-    if (controls) {
-      restProps.id = controls + "-label";
-    }
-
-    if (state) {
-      restProps.color = (0, _system.getColor)(state);
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
-      as: "label",
-      onMouseOver: this.handleMouseOver,
-      onMouseOut: this.handleMouseOut,
-      onClick: this.focusInput
-    }, restProps));
-  };
-
-  return InputLabel;
-}(_react.Component);
+  (0, _react.useEffect)(function () {
+    input.current = _utils.inputs[controls];
+    _utils.inputLabels[controls] = true;
+    return function () {
+      delete _utils.inputLabels[controls];
+    };
+  }, []);
+  var focusInput = (0, _react.useCallback)(function () {
+    input.current && input.current.focus();
+  }, [input]);
+  var handleMouseOver = (0, _react.useCallback)(function () {
+    input.current && input.current.setState({
+      isHovered: true
+    });
+  }, [input]);
+  var handleMouseOut = (0, _react.useCallback)(function () {
+    input.current && input.current.setState({
+      isHovered: false
+    });
+  }, [input]);
+  return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
+    as: "label",
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onClick: focusInput
+  }, themeProps));
+}
 
 InputLabel.displayName = 'Input.InputLabel';
 var _default = InputLabel;

package/dist/cjs/Modal/Modal.js

@@ -21,12 +21,20 @@ var _hooks = require("../hooks");
 
 var _utils = require("../utils");
 
+var _system = require("../system");
+
 function Modal(_ref) {
   var children = _ref.children,
       closeOnOutsideClick = _ref.closeOnOutsideClick,
       onRequestClose = _ref.onRequestClose,
       open = _ref.open,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "closeOnOutsideClick", "onRequestClose", "open"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('modal', restProps),
+      _useThemeProps$scrimP = _useThemeProps.scrimProps,
+      scrimProps = _useThemeProps$scrimP === void 0 ? {} : _useThemeProps$scrimP,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["scrimProps"]);
+
   var modalRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
     if (open) {
@@ -43,22 +51,22 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_Scrim["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_Scrim["default"], (0, _extends2["default"])({
     alignment: "center",
     onMouseDown: function onMouseDown(event) {
       if (closeOnOutsideClick && event.currentTarget === event.target) {
         onRequestClose();
       }
     }
-  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+  }, scrimProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    backgroundColor: "surface",
     innerRef: modalRef,
-    width: "100%",
+    margin: 4,
     maxWidth: 60,
     padding: 2,
-    margin: 4,
-    backgroundColor: "surface",
-    radius: 3
-  }, restProps), children));
+    radius: 3,
+    width: "100%"
+  }, themeProps), children));
 }
 
 var _default = Modal;

package/dist/cjs/Popover/Popover.js

@@ -25,6 +25,8 @@ var _rewireTabOrder = _interopRequireDefault(require("./rewireTabOrder"));
 
 var _utils2 = require("./utils");
 
+var _system = require("../system");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -50,6 +52,12 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$shouldFlip = _ref.shouldFlip,
       shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('popover', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["zIndex"]);
+
   var anchorRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var unlockScroll = React.useRef(null);
@@ -210,9 +218,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     // ideally this should be pulled out to something like ThemeProvider for predictable z indices
     style: {
-      zIndex: 10000
+      zIndex: zIndex
     }
-  }, restProps)) : null);
+  }, themeProps)) : null);
 });
 exports.Popover = Popover;
 Popover.displayName = 'Popover';

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/Scrim/Scrim.js

@@ -9,28 +9,40 @@ exports.Scrim = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
+var _system = require("../system");
+
+var Scrim = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+  var ref = _ref2.ref,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["ref"]);
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
       document.body.style.overflow = '';
     };
   }, []);
+
+  var _useThemeProps = (0, _system.useThemeProps)('scrim', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["zIndex"]);
+
   return /*#__PURE__*/React.createElement(_StackView["default"], (0, _extends2["default"])({
-    innerRef: props.ref,
+    innerRef: ref,
     position: "fixed",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 10000,
+    zIndex: zIndex,
     overflow: "auto" // @ts-ignore
     ,
     backgroundColor: "hsla(0,0%,0%,0.4)"
-  }, props));
+  }, themeProps));
 });
 exports.Scrim = Scrim;

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");
@@ -38,6 +44,15 @@ var cache = (0, _cache["default"])({
   key: 'tapestry-react'
 });
 exports.cache = cache;
+
+function mergeIntoNewObject() {
+  for (var _len = arguments.length, merges = new Array(_len), _key = 0; _key < _len; _key++) {
+    merges[_key] = arguments[_key];
+  }
+
+  return _lodash.merge.apply(void 0, [{}].concat(merges));
+}
+
 var themeStorage = {
   get: function get() {
     return window.localStorage.getItem(STORAGE_KEY);
@@ -64,12 +79,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: (0, _lodash.merge)(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+      themes: mergeIntoNewObject(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
     }),
-    colors: (0, _lodash.merge)((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
+    colors: mergeIntoNewObject((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: (0, _lodash.merge)(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: (0, _lodash.merge)(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+      sizes: mergeIntoNewObject(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
+      thickness: mergeIntoNewObject(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
     })
   });
 }
@@ -79,7 +94,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 +115,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  box-sizing: border-box;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\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  margin-top: 0;\n  margin-right: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  min-width: 0px;\n  min-height: 0px;\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  text-decoration: none;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  border: none;\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/TimeField/TimeField.js

@@ -214,7 +214,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
       highlightOnInteraction: true,
       value: this.state.meridiem,
       grow: 0,
-      width: 3,
+      width: "2em",
       textAlign: "center",
       "aria-label": "AM/PM",
       onChange: _utils.noop // prevent React warnings