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

package/dist/cjs/DataTable/DataTable.js

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

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

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

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

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

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

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

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -44,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);
@@ -70,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) || {})
     })
   });
 }

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  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
+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

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

@@ -46,7 +46,7 @@ function SplitStyles(_ref) {
   }
 
   return _objectSpread(_objectSpread({}, restProps), {}, {
-    className: className,
+    className: className ? "tapestry-react-reset " + className : "tapestry-react-reset",
     css: function css(theme) {
       var propStyles = {};
 

package/dist/esm/DataTable/DataTable.js

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

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

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

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

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

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

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

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -20,6 +20,15 @@ var STORAGE_KEY = 'tapestry-react-theme';
 export var cache = 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);
@@ -44,12 +53,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: 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: merge(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
+    colors: mergeIntoNewObject(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: merge(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: 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) || {})
     })
   });
 }

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.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
+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  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

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

@@ -37,7 +37,7 @@ export default function SplitStyles(_ref) {
   }
 
   return _objectSpread(_objectSpread({}, restProps), {}, {
-    className: className,
+    className: className ? "tapestry-react-reset " + className : "tapestry-react-reset",
     css: function css(theme) {
       var propStyles = {};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.0-rc.4",
+  "version": "2.6.0-rc.9",
   "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/DataTable.js

@@ -480,7 +480,7 @@ const DataTable = (props: Props) => {
         <div
           role={getRowLink ? undefined : 'grid'}
           style={isLoadingOrEmpty ? { display: 'none' } : undefined}
-          className={css({ position: 'relative' })}
+          className={`tapestry-react-reset ${css({ position: 'relative' })}`}
         >
           <div
             ref={headerRef}
@@ -500,7 +500,10 @@ const DataTable = (props: Props) => {
                     column={column}
                     columnIndex={columnIndex}
                     columnSort={columnSort}
-                    className={css([...cellVariantClassName, column.css])}
+                    className={`tapestry-react-reset ${css([
+                      ...cellVariantClassName,
+                      column.css,
+                    ])}`}
                   />
                 )
               })}
@@ -524,7 +527,10 @@ const DataTable = (props: Props) => {
                       key={columnIndex}
                       role="cell"
                       ref={getColumnRef(`${columnIndex}.${data.length + 1}`)}
-                      className={css([...cellVariantClassName, column.css])}
+                      className={`tapestry-react-reset ${css([
+                        ...cellVariantClassName,
+                        column.css,
+                      ])}`}
                     >
                       {typeof column.footer === 'string' ||
                       React.isValidElement(column.footer)

package/src/DataTable/components/BodyRows.js

@@ -38,7 +38,10 @@ function BodyRows({
             key={columnIndex}
             ref={getColumnRef(`${columnIndex}.${rowIndex + 1}`)} // offset by 1 to account for header row
             role="cell"
-            className={css([...cellVariantStyles, column.css])}
+            className={`tapestry-react-reset ${css([
+              ...cellVariantStyles,
+              column.css,
+            ])}`}
           >
             {getCell(column.cell, {
               columnIndex,
@@ -64,7 +67,7 @@ function BodyRows({
       rowIndex,
       keyboardShortcuts,
       onRowClick,
-      className: css(rowVariantClassName),
+      className: `tapestry-react-reset ${css(rowVariantClassName)}`,
       ...getRowLinkProps({ getRowLink, data: rowData, isSubRow: false }),
     }
     const subRowData = getSubData ? getSubData(rowData) : null

package/src/DataTable/components/BodySubRows.js

@@ -57,7 +57,7 @@ const BodySubRows = ({
             rowIndex={rowIndex}
             keyboardShortcuts={keyboardShortcuts}
             onRowClick={onRowClick}
-            className={css(rowVariantClassName)}
+            className={`tapestry-react-reset ${css(rowVariantClassName)}`}
             {...getRowLinkProps({ getRowLink, data: rowData, isSubRow: true })}
           >
             {columns.map((column, columnIndex) => {
@@ -77,7 +77,10 @@ const BodySubRows = ({
                   ref={getColumnRef(
                     `${columnIndex}.${parentRowIndex + 1}.${rowIndex}`
                   )}
-                  className={css([...cellVariantClassName, column.css])}
+                  className={`tapestry-react-reset ${css([
+                    ...cellVariantClassName,
+                    column.css,
+                  ])}`}
                 >
                   {getCell(
                     column.subCell !== undefined ? column.subCell : column.cell,

package/src/DataTable/components/CheckboxCell.js

@@ -87,22 +87,22 @@ function CheckboxCell({
       onFocus={onFocus}
       onClick={handleChange}
       onKeyDown={(event) => event.key === ' ' && handleChange(event)}
-      className="tapestry-react-Checkbox"
+      className="tapestry-react-reset tapestry-react-Checkbox"
       css={cssStyles}
     >
       <Icon.Path
         name={iconPaths.fill}
-        className="tapestry-react-Checkbox-Fill"
+        className="tapestry-react-reset tapestry-react-Checkbox-Fill"
         fill={checked || indeterminate ? 'primary' : 'surfaceTertiary'}
         stroke={checked || indeterminate ? 'primary' : 'separatorSecondary'}
       />
       <Icon.Path
         name={iconPaths.minus}
-        className="tapestry-react-Checkbox-Minus"
+        className="tapestry-react-reset tapestry-react-Checkbox-Fill"
       />
       <Icon.Path
         name={iconPaths.checked}
-        className="tapestry-react-Checkbox-Checked"
+        className="tapestry-react-reset tapestry-react-Checkbox-Checked"
       />
     </Icon>
   )

package/src/ThemeProvider/ThemeProvider.tsx

@@ -17,6 +17,10 @@ export const cache = createCache({
   key: 'tapestry-react',
 })
 
+function mergeIntoNewObject(...merges: object[]) {
+  return merge({}, ...merges)
+}
+
 export const themeStorage = {
   get: () => window.localStorage.getItem(STORAGE_KEY),
   set: (value) => window.localStorage.setItem(STORAGE_KEY, value),
@@ -39,17 +43,17 @@ function mergeThemes(a: Theme = {}, b: Theme = {}) {
     button: {
       ...a.button,
       ...b.button,
-      themes: merge(a.button?.themes || {}, b.button?.themes || {}),
+      themes: mergeIntoNewObject(a.button?.themes || {}, b.button?.themes || {}),
     },
-    colors: merge(
+    colors: mergeIntoNewObject(
       flattenPalette(a.colors || {}),
       flattenPalette(b.colors || {})
     ),
     spinner: {
       ...a.spinner,
       ...b.spinner,
-      sizes: merge(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
-      thickness: merge(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
+      sizes: mergeIntoNewObject(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
+      thickness: mergeIntoNewObject(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
     },
   }
 }

package/src/ThemeProvider/styles.ts

@@ -37,7 +37,7 @@ export const defaultColorProperties = objectToCSSProperties(
 export const styleReset = `
 ${getRootStyles(null, defaultColorProperties)}
 
-.tapestry-react-reset * {
+.tapestry-react-reset {
   appearance: none;
   background-color: transparent;
   border-width: 0px;
@@ -45,24 +45,34 @@ ${getRootStyles(null, defaultColorProperties)}
   border-color: transparent;
   box-sizing: border-box;
   color: inherit;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  box-sizing: border-box;
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   font-weight: 400;
-  margin: 0px;
-  min-height: 0px;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
   min-width: 0px;
-  padding: 0px;
+  min-height: 0px;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
   text-decoration: none;
 }
 
-.tapestry-react-reset *::-moz-focus-inner {
+.tapestry-react-reset::-moz-focus-inner {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
   border: none;
-  padding: 0px;
 }
 
-.tapestry-react-reset *:focus:not(.focus-visible) {
+.tapestry-react-reset:focus:not(.focus-visible) {
   outline: 0px;
 }
 `

package/src/system/split-styles.js

@@ -26,7 +26,9 @@ export default function SplitStyles({
   }
   return {
     ...restProps,
-    className,
+    className: className
+      ? `tapestry-react-reset ${className}`
+      : `tapestry-react-reset`,
     css: (theme) => {
       const propStyles = {}
       for (const prop in styleProps) {