@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/dist/esm/Table/TableBase.js

@@ -0,0 +1,162 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { PureComponent } from 'react';
+import { Viewport } from '../vendor/react-measure';
+import AnimateScroll from './AnimateScroll';
+import Body from './Body';
+import Header from './Header';
+import HeaderRow from './HeaderRow';
+import NavigationArrow from './NavigationArrow';
+import ScrollShadow from './ScrollShadow';
+import TableContainer from './TableContainer';
+var BUTTON_WIDTH = 28;
+
+var TableBase = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(TableBase, _PureComponent);
+
+  function TableBase() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "setHeaderRef", function (node) {
+      _this.tableHeader = node;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearTimers", function () {
+      clearTimeout(_this.scrollTimeout);
+      clearInterval(_this.scrollInterval);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getMouseTouchHandlers", function (_ref) {
+      var animateScroll = _ref.animateScroll,
+          getClosestColumnPosition = _ref.getClosestColumnPosition;
+      return function (direction) {
+        var onPressDown = function onPressDown() {
+          _this.clearTimers();
+
+          _this.scrollTimeout = setTimeout(function () {
+            animateScroll.moveScrollX(100 * direction);
+            _this.scrollInterval = setInterval(function () {
+              animateScroll.moveScrollX(100 * direction);
+            }, 60);
+          }, 120);
+        };
+
+        var onPressUp = function onPressUp() {
+          _this.clearTimers();
+
+          animateScroll.setScrollX(getClosestColumnPosition(direction));
+        };
+
+        return {
+          onMouseDown: onPressDown,
+          onMouseUp: onPressUp,
+          onMouseLeave: _this.clearTimers,
+          onTouchStart: onPressDown,
+          onTouchEnd: onPressUp,
+          onTouchCancel: _this.clearTimers
+        };
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleBodyScroll", function (event) {
+      _this.tableHeader.scrollLeft = event.target.scrollLeft;
+    });
+
+    return _this;
+  }
+
+  var _proto = TableBase.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        body = _this$props.body,
+        caption = _this$props.caption,
+        columnWidths = _this$props.columnWidths,
+        header = _this$props.header,
+        headerColor = _this$props.headerColor,
+        headerHeight = _this$props.headerHeight,
+        minHeight = _this$props.minHeight,
+        offsets = _this$props.offsets,
+        rowWidth = _this$props.rowWidth,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["body", "caption", "columnWidths", "header", "headerColor", "headerHeight", "minHeight", "offsets", "rowWidth"]);
+
+    return /*#__PURE__*/React.createElement(AnimateScroll, null, function (animateScroll) {
+      return /*#__PURE__*/React.createElement(Viewport, null, function (viewport) {
+        var canScroll = rowWidth > viewport.width;
+        var progress = canScroll ? viewport.scrollX / (rowWidth - viewport.width) : null;
+
+        var getClosestColumnPosition = function getClosestColumnPosition(direction) {
+          var currentScrollPosition = direction === 1 ? viewport.scrollX + viewport.width : viewport.scrollX;
+          var newScrollPosition = 0;
+          var totalWidth = 0;
+          columnWidths.some(function (columnWidth) {
+            totalWidth += columnWidth;
+
+            if (totalWidth > currentScrollPosition) {
+              newScrollPosition = direction === 1 ? totalWidth : totalWidth - columnWidth;
+              return true;
+            }
+
+            return false;
+          });
+          return direction === 1 ? newScrollPosition - viewport.width + offsets.right + BUTTON_WIDTH : newScrollPosition - offsets.left - BUTTON_WIDTH;
+        };
+
+        var mouseTouchHandlers = _this2.getMouseTouchHandlers({
+          animateScroll: animateScroll,
+          getClosestColumnPosition: getClosestColumnPosition
+        });
+
+        return /*#__PURE__*/React.createElement(TableContainer, _extends({
+          minHeight: minHeight,
+          "aria-label": caption
+        }, restProps), canScroll && /*#__PURE__*/React.createElement(ScrollShadow, {
+          position: "left",
+          offset: offsets.left,
+          progress: progress
+        }), /*#__PURE__*/React.createElement(Header, {
+          innerRef: _this2.setHeaderRef,
+          backgroundColor: headerColor
+        }, /*#__PURE__*/React.createElement(HeaderRow, {
+          style: {
+            minWidth: rowWidth
+          }
+        }, /*#__PURE__*/React.createElement(NavigationArrow, {
+          headerHeight: headerHeight,
+          offsets: offsets,
+          progress: progress,
+          mouseTouchHandlers: mouseTouchHandlers,
+          direction: -1
+        }), header, /*#__PURE__*/React.createElement(NavigationArrow, {
+          headerHeight: headerHeight,
+          offsets: offsets,
+          progress: progress,
+          mouseTouchHandlers: mouseTouchHandlers,
+          direction: 1
+        }))), /*#__PURE__*/React.createElement(Body, {
+          innerRef: viewport.ref(animateScroll.ref),
+          onScroll: _this2.handleBodyScroll
+        }, body), canScroll && /*#__PURE__*/React.createElement(ScrollShadow, {
+          position: "right",
+          offset: offsets.right,
+          progress: progress
+        }));
+      });
+    });
+  };
+
+  return TableBase;
+}(PureComponent);
+
+export default TableBase;

package/dist/esm/Table/TableContainer.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from '../Box';
+
+var TableContainer = function TableContainer(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    role: "table",
+    shrink: 1,
+    grow: 1,
+    backgroundColor: "white",
+    position: "relative"
+  }, props));
+};
+
+export default TableContainer;

package/dist/esm/Table/TableWrapper.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from '../Box';
+
+var TableWrapper = function TableWrapper(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    shrink: 1,
+    grow: 1
+  }, props));
+};
+
+export default TableWrapper;

package/dist/esm/Table/index.js

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

package/dist/esm/Tabs/Tab.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import StackView from '../StackView';
+import { useHover } from '../hooks';
+import { useThemeProps } from '../system';
+
+function Tab(props) {
+  var _useThemeProps = useThemeProps('tabs.tab', props),
+      axis = _useThemeProps.axis,
+      children = _useThemeProps.children,
+      disabled = _useThemeProps.disabled,
+      id = _useThemeProps.id,
+      isActive = _useThemeProps.isActive,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["axis", "children", "disabled", "id", "isActive"]);
+
+  var _useHover = useHover(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  var hovered = !disabled && hover;
+  var borderSize = 2;
+  var borderColor = isActive ? 'primary' : hovered ? 'separator' : 'separatorSecondary';
+
+  if (axis === 'horizontal') {
+    restProps.borderBottomWidth = borderSize;
+    restProps.borderBottomColor = borderColor;
+  } else {
+    restProps.borderRightWidth = borderSize;
+    restProps.borderRightColor = borderColor;
+  }
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    id: id,
+    role: "tab",
+    "aria-selected": isActive,
+    "aria-controls": id + "-panel",
+    "aria-disabled": disabled,
+    alignment: "center",
+    distribution: "center",
+    fontSize: 4,
+    padding: 1,
+    color: isActive || hovered ? 'foreground' : 'foregroundSecondary',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.6 : undefined
+  }, hoverProps, restProps), children);
+}
+
+Tab.displayName = 'Tabs.Tab';
+export default Tab;

package/dist/esm/Tabs/TabList.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children, cloneElement } from 'react';
+import StackView from '../StackView';
+import { useThemeProps } from '../system';
+export var TABLIST_DISPLAY_NAME = 'TabList';
+
+function TabList(props) {
+  var _useThemeProps = useThemeProps('tabs.tabList', props),
+      activeIndex = _useThemeProps.activeIndex,
+      _useThemeProps$axis = _useThemeProps.axis,
+      axis = _useThemeProps$axis === void 0 ? 'horizontal' : _useThemeProps$axis,
+      children = _useThemeProps.children,
+      id = _useThemeProps.id,
+      moveTabFocus = _useThemeProps.moveTabFocus,
+      setActiveIndex = _useThemeProps.setActiveIndex,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeIndex", "axis", "children", "id", "moveTabFocus", "setActiveIndex"]);
+
+  var backwardKey = axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+  var forwardKey = axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    role: "tablist",
+    "aria-orientation": axis,
+    axis: axis,
+    distribution: "fill"
+  }, restProps), Children.map(children, function (child, index) {
+    return /*#__PURE__*/cloneElement(child, {
+      axis: axis,
+      id: id + "-" + index,
+      isActive: index === activeIndex,
+      tabIndex: child.props.disabled ? undefined : index !== activeIndex ? -1 : 0,
+      onFocus: function onFocus() {
+        return setActiveIndex(index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === backwardKey) {
+          event.preventDefault();
+          moveTabFocus(-1);
+        }
+
+        if (event.key === forwardKey) {
+          event.preventDefault();
+          moveTabFocus(1);
+        }
+
+        if (event.key === 'Home') {
+          event.preventDefault();
+          moveTabFocus(0);
+        }
+
+        if (event.key === 'End') {
+          event.preventDefault();
+          moveTabFocus(Children.count(children) - 1);
+        }
+      }
+    });
+  }));
+}
+
+TabList.displayName = TABLIST_DISPLAY_NAME;
+export default TabList;

package/dist/esm/Tabs/TabPanel.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+import { useThemeProps } from '../system';
+
+function TabPanel(props) {
+  var _useThemeProps = useThemeProps('tabs.tabPanel', props),
+      activeId = _useThemeProps.activeId,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeId"]);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    role: "tabpanel",
+    id: activeId + "-panel",
+    "aria-labelledby": activeId,
+    tabIndex: 0
+  }, restProps));
+}
+
+export default TabPanel;

package/dist/esm/Tabs/TabPanels.js

@@ -0,0 +1,21 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { cloneElement } from 'react';
+import Box from '../Box';
+import { useThemeProps } from '../system';
+export var TABPANELS_DISPLAY_NAME = 'TabPanels';
+
+function TabPanels(props) {
+  var _useThemeProps = useThemeProps('tabs.tabPanels', props),
+      activeIndex = _useThemeProps.activeIndex,
+      children = _useThemeProps.children,
+      id = _useThemeProps.id,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeIndex", "children", "id"]);
+
+  var child = children[activeIndex];
+  return /*#__PURE__*/React.createElement(Box, restProps, child ? /*#__PURE__*/cloneElement(child, {
+    activeId: id + "-" + activeIndex
+  }) : null);
+}
+
+TabPanels.displayName = TABPANELS_DISPLAY_NAME;
+export default TabPanels;

package/dist/esm/Tabs/Tabs.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useState, useRef, useCallback, Children } from 'react';
+import StackView from '../StackView';
+import { generateId } from '../utils';
+import { useThemeProps } from '../system';
+import { TABLIST_DISPLAY_NAME } from './TabList';
+import { TABPANELS_DISPLAY_NAME } from './TabPanels';
+
+function Tabs(props) {
+  var _useThemeProps = useThemeProps('tabs', props),
+      _useThemeProps$active = _useThemeProps.activeIndex,
+      activeIndex = _useThemeProps$active === void 0 ? null : _useThemeProps$active,
+      children = _useThemeProps.children,
+      _useThemeProps$defaul = _useThemeProps.defaultActiveIndex,
+      defaultActiveIndex = _useThemeProps$defaul === void 0 ? 0 : _useThemeProps$defaul,
+      onChange = _useThemeProps.onChange,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeIndex", "children", "defaultActiveIndex", "onChange"]);
+
+  var id = generateId('tabs');
+
+  var _useState = useState(defaultActiveIndex),
+      localActiveIndex = _useState[0],
+      setLocalActiveIndex = _useState[1];
+
+  var tabListRef = useRef(null);
+  var setActiveIndex = useCallback(function (index) {
+    if (onChange) {
+      onChange(index);
+    }
+
+    if (activeIndex === null) {
+      setLocalActiveIndex(index);
+    }
+  });
+  var getActiveIndex = useCallback(function () {
+    return activeIndex === null ? localActiveIndex : activeIndex;
+  });
+  var getNextTab = useCallback(function (startIndex, direction) {
+    var tabCount = tabListRef.current.children.length;
+    var nextIndex = startIndex + direction;
+
+    if (nextIndex < 0) {
+      nextIndex = tabCount - 1;
+    } else if (nextIndex >= tabCount) {
+      nextIndex = 0;
+    }
+
+    var nextTab = tabListRef.current.children[nextIndex];
+
+    if (nextTab.getAttribute('aria-disabled') === 'true') {
+      return getNextTab(nextIndex, direction);
+    } else {
+      return nextTab;
+    }
+  });
+  var moveTabFocus = useCallback(function (direction) {
+    var nextTab = getNextTab(getActiveIndex(), direction);
+
+    if (nextTab) {
+      nextTab.focus();
+    }
+  });
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    innerRef: function innerRef(node) {
+      if (node) {
+        tabListRef.current = node.querySelector('[role="tablist"]');
+      }
+    }
+  }, restProps), Children.map(children, function (child, index) {
+    if (child && child.type.displayName === TABLIST_DISPLAY_NAME) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        id: id,
+        activeIndex: getActiveIndex(),
+        moveTabFocus: moveTabFocus,
+        setActiveIndex: setActiveIndex
+      });
+    } else if (child && child.type.displayName === TABPANELS_DISPLAY_NAME) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        id: id,
+        activeIndex: getActiveIndex()
+      });
+    } else {
+      return child;
+    }
+  }));
+}
+
+export default Tabs;

package/dist/esm/Tabs/index.js

@@ -0,0 +1,10 @@
+import Tabs from './Tabs';
+import Tab from './Tab';
+import TabList from './TabList';
+import TabPanel from './TabPanel';
+import TabPanels from './TabPanels';
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;
+Tabs.TabPanels = TabPanels;
+export default Tabs;

package/dist/esm/Text/Text.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import * as React from 'react';
+import { useThemeProps } from '../system';
+import splitStyles from '../system/split-styles';
+import { useVariant } from '../VariantProvider';
+var textPlugin = {
+  styleProps: ['italic', 'truncate', 'size', 'underline', 'weight', 'wrap'],
+  getStyles: function getStyles(_ref) {
+    var align = _ref.align,
+        italic = _ref.italic,
+        truncate = _ref.truncate,
+        size = _ref.size,
+        underline = _ref.underline,
+        weight = _ref.weight,
+        _ref$wrap = _ref.wrap,
+        wrap = _ref$wrap === void 0 ? true : _ref$wrap,
+        styles = _objectWithoutPropertiesLoose(_ref, ["align", "italic", "truncate", "size", "underline", "weight", "wrap"]);
+
+    if (align) {
+      styles.textAlign = align;
+    }
+
+    if (italic) {
+      styles.fontStyle = 'italic';
+    }
+
+    if (truncate) {
+      if (styles.display !== 'block' || styles.display !== 'flex') {
+        styles.display = 'block';
+      }
+
+      styles.overflow = 'hidden';
+      styles.textOverflow = 'ellipsis';
+    }
+
+    if (truncate || wrap === false) {
+      styles.whiteSpace = 'nowrap';
+    }
+
+    if (underline) {
+      styles.textDecoration = underline;
+    }
+
+    if (typeof size !== 'undefined') {
+      styles.fontSize = size;
+    }
+
+    if (weight) {
+      styles.fontWeight = weight;
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'p';
+export var Text = function Text(_ref2) {
+  var as = _ref2.as,
+      innerRef = _ref2.innerRef,
+      props = _objectWithoutPropertiesLoose(_ref2, ["as", "innerRef"]);
+
+  var _useThemeProps = useThemeProps('text', props),
+      inline = _useThemeProps.inline,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["inline"]);
+
+  var Element = as || (inline ? 'p' : defaultElement);
+  var variant = useVariant();
+  return jsx(Element, _extends({
+    ref: innerRef
+  }, splitStyles(_objectSpread({
+    display: inline ? 'inline-block' : 'block',
+    lineHeight: '20px',
+    shrink: 1,
+    plugin: textPlugin,
+    variant: variant
+  }, restProps))));
+};

package/dist/esm/Text/index.js

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

package/dist/esm/TextArea/TextArea.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import InputBox from '../Input/InputBox';
+
+var TextArea = function TextArea(_ref) {
+  var defaultValue = _ref.defaultValue,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["defaultValue"]);
+
+  return /*#__PURE__*/React.createElement(InputBox, _extends({
+    as: "textarea",
+    defaultValue: defaultValue,
+    maxWidth: "100%",
+    minWidth: "100%",
+    tabIndex: 0
+  }, restProps));
+};
+
+export default TextArea;

package/dist/esm/TextArea/index.js

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

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,113 @@
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useLayoutEffect, useMemo, useState } from 'react';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import merge from 'lodash/merge';
+import { Box } from '../Box';
+import defaultTheme from '../system/default-theme';
+import { flattenPalette } from '../system';
+import { objectToCSSProperties, shallowEqual } from '../utils';
+import { getThemeDataAttribute, setRootStyles, styleReset } from './styles';
+var STORAGE_KEY = 'tapestry-react-theme';
+var caches = {
+  "default": createCache({
+    key: 'tapestry-react'
+  })
+};
+
+function mergeIntoNewObject() {
+  for (var _len = arguments.length, merges = new Array(_len), _key = 0; _key < _len; _key++) {
+    merges[_key] = arguments[_key];
+  }
+
+  return merge.apply(void 0, [{}].concat(merges));
+}
+
+export var themeStorage = {
+  get: function get() {
+    return window.localStorage.getItem(STORAGE_KEY);
+  },
+  set: function set(value) {
+    return window.localStorage.setItem(STORAGE_KEY, value);
+  }
+};
+export var themeInitializerScript = "\ntry {\n  var theme = window.localStorage.getItem('" + STORAGE_KEY + "')\n  if (theme) {\n    document.documentElement.dataset.theme = theme\n  }\n} catch (e) {}\n";
+var emptyTheme = {};
+
+function mergeThemes(a, b) {
+  var _a$button, _b$button, _a$spinner, _b$spinner, _a$spinner2, _b$spinner2;
+
+  if (a === void 0) {
+    a = {};
+  }
+
+  if (b === void 0) {
+    b = {};
+  }
+
+  return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
+    button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
+      themes: mergeIntoNewObject(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+    }),
+    colors: mergeIntoNewObject(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
+    spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
+      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) || {})
+    })
+  });
+}
+
+export function ThemeProvider(_ref) {
+  var _ref2;
+
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
+      children = _ref.children,
+      boxProps = _objectWithoutPropertiesLoose(_ref, ["theme", "children"]);
+
+  var _useState = useState(function () {
+    return mergeThemes(defaultTheme, theme);
+  }),
+      mergedTheme = _useState[0],
+      setMergedTheme = _useState[1];
+
+  var cache = useMemo(function () {
+    if (caches[theme.id]) {
+      return caches[theme.id];
+    } else {
+      caches[theme.id] = createCache({
+        key: "tapestry-react-" + theme.id
+      });
+      return caches[theme.id];
+    }
+  }, [theme.id]);
+  useLayoutEffect(function () {
+    var nextTheme = mergeThemes(defaultTheme, theme);
+    setRootStyles(nextTheme.id, objectToCSSProperties('colors', nextTheme.colors));
+
+    if (!shallowEqual(mergedTheme, nextTheme)) {
+      setMergedTheme(nextTheme);
+    }
+  }, [theme]);
+  return /*#__PURE__*/React.createElement(CacheProvider, {
+    value: cache
+  }, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
+    theme: mergedTheme
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    className: "tapestry-react-reset"
+  }, boxProps, (_ref2 = {}, _ref2["" + getThemeDataAttribute(mergedTheme.id)] = true, _ref2)), children)));
+}
+ThemeProvider.cache = caches["default"];
+ThemeProvider.setRootStyles = setRootStyles;
+ThemeProvider.styleReset = styleReset;
+ThemeProvider.themeInitializerScript = themeInitializerScript;
+ThemeProvider.themeStorage = themeStorage;
+export { setRootStyles, styleReset };