@planningcenter/tapestry-react 0.0.1-alpha.0 → 1.0.0

package/dist/cjs/Button/Button.js

@@ -233,13 +233,13 @@ function Button(_ref) {
     if (icon && !(title || tooltip && tooltip.title)) {
       var _useAccessibilityViol = (0, _useAccessibilityViolation.useAccessibilityViolation)( /*#__PURE__*/React.createElement(React.Fragment, null, "Icon only buttons must define either a", ' ', /*#__PURE__*/React.createElement(_Link["default"], {
         external: true,
-        to: "https://ministrycentered.github.io/ui-kit/button#tooltip",
+        to: "https://ministrycentered.github.io/tapestry-react/button#tooltip",
         weight: 700
       }, "tooltip"), ' ', "or", ' ', /*#__PURE__*/React.createElement(_Link["default"], {
         external: true,
-        to: "https://ministrycentered.github.io/ui-kit/button#title",
+        to: "https://ministrycentered.github.io/tapestry-react/button#title",
         weight: 700
-      }, "title"), ' ', "prop."), "UIKit: <Button/> icon only buttons must define either a \"tooltip\" or \"title\" prop for proper accessibility."),
+      }, "title"), ' ', "prop."), "Tapestry-React: <Button/> icon only buttons must define either a \"tooltip\" or \"title\" prop for proper accessibility."),
           tooltipProps = _useAccessibilityViol.tooltipProps,
           wrapperProps = _useAccessibilityViol.wrapperProps;
 
@@ -248,7 +248,7 @@ function Button(_ref) {
     }
 
     if (restProps['type'] === 'submit') {
-      throw Error("UIKit: <Button/> does not support type=\"submit\" please add an explicit onClick handler.");
+      throw Error("Tapestry-React: <Button/> does not support type=\"submit\" please add an explicit onClick handler.");
     }
   }
 

package/dist/cjs/Checkbox/Checkbox.js

@@ -78,9 +78,9 @@ function Checkbox(_ref) {
 
     var _useAccessibilityViol = (0, _useAccessibilityViolation.useAccessibilityViolation)( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Checkbox must define a", ' ', /*#__PURE__*/_react["default"].createElement(_Link["default"], {
       external: true,
-      to: "https://ministrycentered.github.io/ui-kit/checkbox#label",
+      to: "https://ministrycentered.github.io/tapestry-react/checkbox#label",
       weight: 700
-    }, "label"), ' ', "through props or a parent element that is a label."), "UIKit: <Checkbox/> must define a \"label\" prop or have a parent that renders a label for proper accessibility."),
+    }, "label"), ' ', "through props or a parent element that is a label."), "Tapestry-React: <Checkbox/> must define a \"label\" prop or have a parent that renders a label for proper accessibility."),
         tooltipProps = _useAccessibilityViol.tooltipProps,
         wrapperProps = _useAccessibilityViol.wrapperProps;
 

package/dist/cjs/DataTable/DataTable.js

@@ -205,7 +205,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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

@@ -27,12 +27,12 @@ var initialStyles = {
   flexShrink: 0,
   outline: 0,
   cursor: 'pointer',
-  ' .ui-kit-Checkbox-Fill ': {
+  ' .tapestry-react-Checkbox-Fill ': {
     transform: 'scale(1)',
     transformOrigin: 'center center',
     transition: 'all 180ms ease-out'
   },
-  ' .ui-kit-Checkbox-Minus, .ui-kit-Checkbox-Checked ': {
+  ' .tapestry-react-Checkbox-Minus, .tapestry-react-Checkbox-Checked ': {
     fill: '#fff',
     visibility: 'hidden',
     transform: 'scale(0)',
@@ -40,21 +40,21 @@ var initialStyles = {
     transition: 'all 180ms ease-out'
   },
   ' &:hover, &:focus ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1.125)'
     }
   },
   ' &:active ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1)'
     }
   }
 };
 var checkedStyles = {
-  ' .ui-kit-Checkbox-Checked ': scaleStyles
+  ' .tapestry-react-Checkbox-Checked ': scaleStyles
 };
 var indeterminateStyles = {
-  ' .ui-kit-Checkbox-Minus ': scaleStyles
+  ' .tapestry-react-Checkbox-Minus ': scaleStyles
 };
 
 function CheckboxCell(_ref) {
@@ -96,19 +96,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "uikit-reset ui-kit-Checkbox",
+    className: "tapestry-react-reset tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.fill,
-    className: "uikit-reset ui-kit-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: "uikit-reset ui-kit-Checkbox-Minus"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Minus"
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.checked,
-    className: "uikit-reset ui-kit-Checkbox-Checked"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
   }));
 }
 

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

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

package/dist/cjs/Radio/Radio.js

@@ -109,7 +109,7 @@ function Radio(_ref) {
     zIndex: 0,
     opacity: 0
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    className: "ui-kit-Radio-Icon",
+    className: "tapestry-react-Radio-Icon",
     size: size
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.fill,

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -35,9 +35,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var STORAGE_KEY = 'ui-kit-theme';
+var STORAGE_KEY = 'tapestry-react-theme';
 var cache = (0, _cache["default"])({
-  key: 'uikit',
+  key: 'tapestry-react',
   prefix: function prefix(key) {
     switch (key) {
       case 'appearance':

package/dist/cjs/ThemeProvider/styles.js

@@ -15,7 +15,7 @@ var getRootStyles = function getRootStyles(styles) {
 };
 
 var setRootStyles = function setRootStyles(styles) {
-  var styleElement = document.getElementById('uikit-style');
+  var styleElement = document.getElementById('tapestry-react-style');
   var sheet = styleElement.sheet;
   var styleString = getRootStyles(styles);
   sheet.deleteRule(0);
@@ -25,16 +25,16 @@ var setRootStyles = function setRootStyles(styles) {
 exports.setRootStyles = setRootStyles;
 var defaultColorProperties = (0, _utils.objectToCSSProperties)('colors', (0, _system.flattenPalette)(_system.defaultTheme.colors));
 exports.defaultColorProperties = defaultColorProperties;
-var styleReset = ("\n" + getRootStyles(defaultColorProperties) + "\n\n.uikit-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.uikit-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.uikit-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+var styleReset = ("\n" + getRootStyles(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
 ).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
 
 exports.styleReset = styleReset;
 
-if (typeof window !== 'undefined' && !document.getElementById('uikit-style')) {
+if (typeof window !== 'undefined' && !document.getElementById('tapestry-react-style')) {
   var styleElement = document.createElement('style');
-  styleElement.id = 'uikit-style';
+  styleElement.id = 'tapestry-react-style';
   styleElement.innerHTML = styleReset;
   document.head.insertAdjacentElement('afterbegin', styleElement);
 }

package/dist/cjs/server.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
 var styleElement = /*#__PURE__*/_react["default"].createElement("style", {
-  id: "uikit-style",
+  id: "tapestry-react-style",
   dangerouslySetInnerHTML: {
     __html: _ThemeProvider["default"].styleReset
   }

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

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

package/dist/esm/Button/Button.js

@@ -19,13 +19,13 @@ import Input from './Input';
 
 var _ref2 = /*#__PURE__*/React.createElement(Link, {
   external: true,
-  to: "https://ministrycentered.github.io/ui-kit/button#tooltip",
+  to: "https://ministrycentered.github.io/tapestry-react/button#tooltip",
   weight: 700
 }, "tooltip");
 
 var _ref3 = /*#__PURE__*/React.createElement(Link, {
   external: true,
-  to: "https://ministrycentered.github.io/ui-kit/button#title",
+  to: "https://ministrycentered.github.io/tapestry-react/button#title",
   weight: 700
 }, "title");
 
@@ -224,7 +224,7 @@ export function Button(_ref) {
 
   if (process.env.NODE_ENV !== 'production') {
     if (icon && !(title || tooltip && tooltip.title)) {
-      var _useAccessibilityViol = useAccessibilityViolation( /*#__PURE__*/React.createElement(React.Fragment, null, "Icon only buttons must define either a", ' ', _ref2, ' ', "or", ' ', _ref3, ' ', "prop."), "UIKit: <Button/> icon only buttons must define either a \"tooltip\" or \"title\" prop for proper accessibility."),
+      var _useAccessibilityViol = useAccessibilityViolation( /*#__PURE__*/React.createElement(React.Fragment, null, "Icon only buttons must define either a", ' ', _ref2, ' ', "or", ' ', _ref3, ' ', "prop."), "Tapestry-React: <Button/> icon only buttons must define either a \"tooltip\" or \"title\" prop for proper accessibility."),
           tooltipProps = _useAccessibilityViol.tooltipProps,
           wrapperProps = _useAccessibilityViol.wrapperProps;
 
@@ -233,7 +233,7 @@ export function Button(_ref) {
     }
 
     if (restProps['type'] === 'submit') {
-      throw Error("UIKit: <Button/> does not support type=\"submit\" please add an explicit onClick handler.");
+      throw Error("Tapestry-React: <Button/> does not support type=\"submit\" please add an explicit onClick handler.");
     }
   }
 

package/dist/esm/Checkbox/Checkbox.js

@@ -20,7 +20,7 @@ var iconPaths = {
 
 var _ref2 = /*#__PURE__*/React.createElement(Link, {
   external: true,
-  to: "https://ministrycentered.github.io/ui-kit/checkbox#label",
+  to: "https://ministrycentered.github.io/tapestry-react/checkbox#label",
   weight: 700
 }, "label");
 
@@ -60,7 +60,7 @@ function Checkbox(_ref) {
         needsParentLabel = _useState3[0],
         setNeedsParentLabel = _useState3[1];
 
-    var _useAccessibilityViol = useAccessibilityViolation( /*#__PURE__*/React.createElement(React.Fragment, null, "Checkbox must define a", ' ', _ref2, ' ', "through props or a parent element that is a label."), "UIKit: <Checkbox/> must define a \"label\" prop or have a parent that renders a label for proper accessibility."),
+    var _useAccessibilityViol = useAccessibilityViolation( /*#__PURE__*/React.createElement(React.Fragment, null, "Checkbox must define a", ' ', _ref2, ' ', "through props or a parent element that is a label."), "Tapestry-React: <Checkbox/> must define a \"label\" prop or have a parent that renders a label for proper accessibility."),
         tooltipProps = _useAccessibilityViol.tooltipProps,
         wrapperProps = _useAccessibilityViol.wrapperProps;
 

package/dist/esm/DataTable/DataTable.js

@@ -182,7 +182,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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: "uikit-reset " + 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

@@ -15,12 +15,12 @@ var initialStyles = {
   flexShrink: 0,
   outline: 0,
   cursor: 'pointer',
-  ' .ui-kit-Checkbox-Fill ': {
+  ' .tapestry-react-Checkbox-Fill ': {
     transform: 'scale(1)',
     transformOrigin: 'center center',
     transition: 'all 180ms ease-out'
   },
-  ' .ui-kit-Checkbox-Minus, .ui-kit-Checkbox-Checked ': {
+  ' .tapestry-react-Checkbox-Minus, .tapestry-react-Checkbox-Checked ': {
     fill: '#fff',
     visibility: 'hidden',
     transform: 'scale(0)',
@@ -28,21 +28,21 @@ var initialStyles = {
     transition: 'all 180ms ease-out'
   },
   ' &:hover, &:focus ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1.125)'
     }
   },
   ' &:active ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1)'
     }
   }
 };
 var checkedStyles = {
-  ' .ui-kit-Checkbox-Checked ': scaleStyles
+  ' .tapestry-react-Checkbox-Checked ': scaleStyles
 };
 var indeterminateStyles = {
-  ' .ui-kit-Checkbox-Minus ': scaleStyles
+  ' .tapestry-react-Checkbox-Minus ': scaleStyles
 };
 
 function CheckboxCell(_ref) {
@@ -85,19 +85,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "uikit-reset ui-kit-Checkbox",
+    className: "tapestry-react-reset tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.fill,
-    className: "uikit-reset ui-kit-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: "uikit-reset ui-kit-Checkbox-Minus"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Minus"
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.checked,
-    className: "uikit-reset ui-kit-Checkbox-Checked"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
   }));
 }
 

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

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

package/dist/esm/Radio/Radio.js

@@ -91,7 +91,7 @@ function Radio(_ref) {
     zIndex: 0,
     opacity: 0
   }), /*#__PURE__*/React.createElement(Icon, {
-    className: "ui-kit-Radio-Icon",
+    className: "tapestry-react-Radio-Icon",
     size: size
   }, /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.fill,

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -13,9 +13,9 @@ import defaultTheme from '../system/default-theme';
 import { flattenPalette } from '../system';
 import { objectToCSSProperties, shallowEqual } from '../utils';
 import { setRootStyles, styleReset } from './styles';
-var STORAGE_KEY = 'ui-kit-theme';
+var STORAGE_KEY = 'tapestry-react-theme';
 export var cache = createCache({
-  key: 'uikit',
+  key: 'tapestry-react',
   prefix: function prefix(key) {
     switch (key) {
       case 'appearance':

package/dist/esm/ThemeProvider/styles.js

@@ -9,21 +9,21 @@ var getRootStyles = function getRootStyles(styles) {
 };
 
 export var setRootStyles = function setRootStyles(styles) {
-  var styleElement = document.getElementById('uikit-style');
+  var styleElement = document.getElementById('tapestry-react-style');
   var sheet = styleElement.sheet;
   var styleString = getRootStyles(styles);
   sheet.deleteRule(0);
   sheet.insertRule(styleString, 0);
 };
 export var defaultColorProperties = objectToCSSProperties('colors', flattenPalette(defaultTheme.colors));
-export var styleReset = ("\n" + getRootStyles(defaultColorProperties) + "\n\n.uikit-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.uikit-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.uikit-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+export var styleReset = ("\n" + getRootStyles(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
 ).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
 
-if (typeof window !== 'undefined' && !document.getElementById('uikit-style')) {
+if (typeof window !== 'undefined' && !document.getElementById('tapestry-react-style')) {
   var styleElement = document.createElement('style');
-  styleElement.id = 'uikit-style';
+  styleElement.id = 'tapestry-react-style';
   styleElement.innerHTML = styleReset;
   document.head.insertAdjacentElement('afterbegin', styleElement);
 }

package/dist/esm/server.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ThemeProvider from './ThemeProvider';
 export var styleElement = /*#__PURE__*/React.createElement("style", {
-  id: "uikit-style",
+  id: "tapestry-react-style",
   dangerouslySetInnerHTML: {
     __html: ThemeProvider.styleReset
   }

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

@@ -37,7 +37,7 @@ export default function (_ref) {
   }
 
   return _objectSpread(_objectSpread({}, restProps), {}, {
-    className: className ? "uikit-reset " + className : "uikit-reset",
+    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": "0.0.1-alpha.0",
+  "version": "1.0.0",
   "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/Button/Button.tsx

@@ -278,7 +278,7 @@ export function Button({
           Icon only buttons must define either a{' '}
           <Link
             external
-            to="https://ministrycentered.github.io/ui-kit/button#tooltip"
+            to="https://ministrycentered.github.io/tapestry-react/button#tooltip"
             weight={700}
           >
             tooltip
@@ -286,21 +286,21 @@ export function Button({
           or{' '}
           <Link
             external
-            to="https://ministrycentered.github.io/ui-kit/button#title"
+            to="https://ministrycentered.github.io/tapestry-react/button#title"
             weight={700}
           >
             title
           </Link>{' '}
           prop.
         </>,
-        `UIKit: <Button/> icon only buttons must define either a "tooltip" or "title" prop for proper accessibility.`
+        `Tapestry-React: <Button/> icon only buttons must define either a "tooltip" or "title" prop for proper accessibility.`
       )
       tooltip = tooltipProps
       restProps = mergeProps(restProps, wrapperProps)
     }
     if (restProps['type'] === 'submit') {
       throw Error(
-        `UIKit: <Button/> does not support type="submit" please add an explicit onClick handler.`
+        `Tapestry-React: <Button/> does not support type="submit" please add an explicit onClick handler.`
       )
     }
   }

package/src/Checkbox/Checkbox.js

@@ -105,14 +105,14 @@ function Checkbox({
         Checkbox must define a{' '}
         <Link
           external
-          to="https://ministrycentered.github.io/ui-kit/checkbox#label"
+          to="https://ministrycentered.github.io/tapestry-react/checkbox#label"
           weight={700}
         >
           label
         </Link>{' '}
         through props or a parent element that is a label.
       </>,
-      `UIKit: <Checkbox/> must define a "label" prop or have a parent that renders a label for proper accessibility.`
+      `Tapestry-React: <Checkbox/> must define a "label" prop or have a parent that renders a label for proper accessibility.`
     )
     useLayoutEffect(() => {
       function findParent(node, findMatch) {

package/src/Combobox/Combobox.mdx

@@ -1,7 +1,7 @@
 ---
 title: Combobox
 category: Forms
-summary: Used for easily selecting a list of items that are paired with a text input. Composes [Combobox.Input](https://github.com/ministrycentered/ui-kit/blob/master/packages/ui-kit/src/Combobox/ComboboxInput.js) and [Popover](/popover).
+summary: Used for easily selecting a list of items that are paired with a text input. Composes [Combobox.Input](https://github.com/ministrycentered/tapestry-react/blob/master/packages/tapestry-react/src/Combobox/ComboboxInput.js) and [Popover](/popover).
 ---
 
 ### Combobox

package/src/DataTable/DataTable.js

@@ -432,7 +432,7 @@ const DataTable = (props: Props) => {
         <div
           role={getRowLink ? undefined : 'grid'}
           style={isLoadingOrEmpty ? { display: 'none' } : undefined}
-          className={`uikit-reset ${css({ position: 'relative' })}`}
+          className={`tapestry-react-reset ${css({ position: 'relative' })}`}
         >
           <div
             ref={headerRef}
@@ -452,7 +452,7 @@ const DataTable = (props: Props) => {
                     column={column}
                     columnIndex={columnIndex}
                     columnSort={columnSort}
-                    className={`uikit-reset ${css([
+                    className={`tapestry-react-reset ${css([
                       ...cellVariantClassName,
                       column.css,
                     ])}`}
@@ -479,7 +479,7 @@ const DataTable = (props: Props) => {
                       key={columnIndex}
                       role="cell"
                       ref={getColumnRef(`${columnIndex}.${data.length + 1}`)}
-                      className={`uikit-reset ${css([
+                      className={`tapestry-react-reset ${css([
                         ...cellVariantClassName,
                         column.css,
                       ])}`}

package/src/DataTable/components/BodyRows.js

@@ -38,7 +38,7 @@ function BodyRows({
             key={columnIndex}
             ref={getColumnRef(`${columnIndex}.${rowIndex + 1}`)} // offset by 1 to account for header row
             role="cell"
-            className={`uikit-reset ${css([...cellVariantStyles, column.css])}`}
+            className={`tapestry-react-reset ${css([...cellVariantStyles, column.css])}`}
           >
             {getCell(column.cell, {
               columnIndex,
@@ -64,7 +64,7 @@ function BodyRows({
       rowIndex,
       keyboardShortcuts,
       onRowClick,
-      className: `uikit-reset ${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={`uikit-reset ${css(rowVariantClassName)}`}
+            className={`tapestry-react-reset ${css(rowVariantClassName)}`}
             {...getRowLinkProps({ getRowLink, data: rowData, isSubRow: true })}
           >
             {columns.map((column, columnIndex) => {
@@ -77,7 +77,7 @@ const BodySubRows = ({
                   ref={getColumnRef(
                     `${columnIndex}.${parentRowIndex + 1}.${rowIndex}`
                   )}
-                  className={`uikit-reset ${css([
+                  className={`tapestry-react-reset ${css([
                     ...cellVariantClassName,
                     column.css,
                   ])}`}

package/src/DataTable/components/CheckboxCell.js

@@ -18,12 +18,12 @@ const initialStyles = {
   flexShrink: 0,
   outline: 0,
   cursor: 'pointer',
-  ' .ui-kit-Checkbox-Fill ': {
+  ' .tapestry-react-Checkbox-Fill ': {
     transform: 'scale(1)',
     transformOrigin: 'center center',
     transition: 'all 180ms ease-out',
   },
-  ' .ui-kit-Checkbox-Minus, .ui-kit-Checkbox-Checked ': {
+  ' .tapestry-react-Checkbox-Minus, .tapestry-react-Checkbox-Checked ': {
     fill: '#fff',
     visibility: 'hidden',
     transform: 'scale(0)',
@@ -31,23 +31,23 @@ const initialStyles = {
     transition: 'all 180ms ease-out',
   },
   ' &:hover, &:focus ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1.125)',
     },
   },
   ' &:active ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1)',
     },
   },
 }
 
 const checkedStyles = {
-  ' .ui-kit-Checkbox-Checked ': scaleStyles,
+  ' .tapestry-react-Checkbox-Checked ': scaleStyles,
 }
 
 const indeterminateStyles = {
-  ' .ui-kit-Checkbox-Minus ': scaleStyles,
+  ' .tapestry-react-Checkbox-Minus ': scaleStyles,
 }
 
 function CheckboxCell({
@@ -87,22 +87,22 @@ function CheckboxCell({
       onFocus={onFocus}
       onClick={handleChange}
       onKeyDown={(event) => event.key === ' ' && handleChange(event)}
-      className="uikit-reset ui-kit-Checkbox"
+      className="tapestry-react-reset tapestry-react-Checkbox"
       css={cssStyles}
     >
       <Icon.Path
         name={iconPaths.fill}
-        className="uikit-reset ui-kit-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="uikit-reset ui-kit-Checkbox-Minus"
+        className="tapestry-react-reset tapestry-react-Checkbox-Minus"
       />
       <Icon.Path
         name={iconPaths.checked}
-        className="uikit-reset ui-kit-Checkbox-Checked"
+        className="tapestry-react-reset tapestry-react-Checkbox-Checked"
       />
     </Icon>
   )

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="uikit-reset"
+      className="tapestry-react-reset"
       children={childrenToRender}
       {...props}
     />

package/src/Input/InputLabel.js

@@ -8,7 +8,7 @@ import { inputs, inputLabels } from './utils'
 
 export type InputLabelProps = {
   /**
-   * The `id` of the input to control. Compatible with all UI kit form components.
+   * The `id` of the input to control. Compatible with all Tapestry-React form components.
    */
   controls: string,
 

package/src/Radio/Radio.js

@@ -136,7 +136,7 @@ function Radio({
           opacity={0}
         />
 
-        <Icon className="ui-kit-Radio-Icon" size={size}>
+        <Icon className="tapestry-react-Radio-Icon" size={size}>
           <Icon.Path
             name={iconPaths.fill}
             fill={radioTheme.fill}

package/src/ThemeProvider/ThemeProvider.tsx

@@ -10,10 +10,10 @@ import { Theme } from '../index'
 import { objectToCSSProperties, shallowEqual } from '../utils'
 import { setRootStyles, styleReset } from './styles'
 
-const STORAGE_KEY = 'ui-kit-theme'
+const STORAGE_KEY = 'tapestry-react-theme'
 
 export const cache = createCache({
-  key: 'uikit',
+  key: 'tapestry-react',
   prefix: (key) => {
     switch (key) {
       case 'appearance':

package/src/ThemeProvider/styles.ts

@@ -9,7 +9,7 @@ const getRootStyles = (styles) => {
 }
 
 export const setRootStyles = (styles) => {
-  const styleElement = <HTMLStyleElement>document.getElementById('uikit-style')
+  const styleElement = <HTMLStyleElement>document.getElementById('tapestry-react-style')
   const sheet = <CSSStyleSheet>styleElement.sheet
   const styleString = getRootStyles(styles)
   sheet.deleteRule(0)
@@ -24,7 +24,7 @@ export const defaultColorProperties = objectToCSSProperties(
 export const styleReset = `
 ${getRootStyles(defaultColorProperties)}
 
-.uikit-reset {
+.tapestry-react-reset {
   appearance: none;
   box-sizing: border-box;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -40,12 +40,12 @@ ${getRootStyles(defaultColorProperties)}
   color: inherit;
 }
 
-.uikit-reset::-moz-focus-inner {
+.tapestry-react-reset::-moz-focus-inner {
   padding: 0px;
   border: 0px;
 }
 
-.uikit-reset:focus:not(.focus-visible) {
+.tapestry-react-reset:focus:not(.focus-visible) {
   outline: 0px;
 }
 `
@@ -56,9 +56,9 @@ ${getRootStyles(defaultColorProperties)}
 // 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('uikit-style')) {
+if (typeof window !== 'undefined' && !document.getElementById('tapestry-react-style')) {
   const styleElement = document.createElement('style')
-  styleElement.id = 'uikit-style'
+  styleElement.id = 'tapestry-react-style'
   styleElement.innerHTML = styleReset
   document.head.insertAdjacentElement('afterbegin', styleElement)
 }

package/src/server.js

@@ -4,7 +4,7 @@ import ThemeProvider from './ThemeProvider'
 
 export const styleElement = (
   <style
-    id="uikit-style"
+    id="tapestry-react-style"
     dangerouslySetInnerHTML={{ __html: ThemeProvider.styleReset }}
   />
 )

package/src/system/README.md

@@ -41,7 +41,7 @@ function Box(props) {
 
 <small>See the [Box](../Box/Box.tsx) component for an actual implementation.</small>
 
-The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://ministrycentered.github.io/ui-kit/responsive) and [Variants](https://ministrycentered.github.io/ui-kit/variants) for more information and examples.
+The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://ministrycentered.github.io/tapestry-react/responsive) and [Variants](https://ministrycentered.github.io/tapestry-react/variants) for more information and examples.
 
 ### Plugins
 
@@ -90,7 +90,7 @@ function StackView(props) {
 A fork of the [CXS](https://github.com/cxs-css/cxs) library is available as an escape hatch if Emotion is performing poorly. This is specifically used to combat performance issues in intensive components like `DataTable`. This is done through a `useCss` hook exported from system:
 
 ```jsx
-import { designSystem } from '@planning-center/ui-kit'
+import { designSystem } from '@planningcenter/tapestry-react'
 function Box({ color, ...props }) {
   const css = designSystem.useCss()
   return <div className={css({ color })} {...props} />

package/src/system/split-styles.js

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