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

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

@@ -134,12 +134,25 @@ var NumberField = /*#__PURE__*/function (_Component) {
           maxValue = _this$getParsedValues5.maxValue;
 
       if (_this.props.pad) {
-        var targetValue = event.target.value === '' ? event.target.value : parseFloat(event.target.value);
+        var deleteKeyPressed = event.target.value === '';
+        var targetValue = deleteKeyPressed ? event.target.value : parseFloat(event.target.value);
 
-        if (targetValue !== '') {
-          var nextValue = _this.clampValue(targetValue);
+        if (deleteKeyPressed) {
+          var nextValue = ("" + _this.props.value).slice(0, -1);
 
-          if (_this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
+          _this.props.onChange(padNumber(nextValue, _this.props.pad));
+        } else {
+          var _nextValue = _this.clampValue(targetValue);
+
+          var paddedValue = parseFloat("" + _this.props.value + targetValue);
+
+          if (!_this.firstTouch && !isNaN(targetValue) && _this.isValueValid(paddedValue)) {
+            _nextValue = paddedValue;
+          }
+
+          _this.firstTouch = false;
+
+          if (_this.props.moveFocusOnMax && _nextValue / maxValue > 0.1) {
             var _getTabbableSiblings = getTabbableSiblings(event.target),
                 next = _getTabbableSiblings.next;
 
@@ -150,11 +163,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
             }
           }
 
-          _this.firstTouch = false;
-
-          _this.changeIfValid(nextValue);
-        } else {
-          _this.props.onChange('');
+          _this.changeIfValid(_nextValue);
         }
       } else {
         _this.props.onChange(event.target.value);
@@ -219,7 +228,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown

package/dist/esm/Page/PageActions.js

@@ -4,7 +4,12 @@ import StackView from '../StackView';
 
 function PageActions(props) {
   return /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
+    alignSelf: "end",
     axis: "horizontal",
+    distribution: "end",
+    flex: "1",
+    paddingBottom: 2,
     spacing: 1
   }, props));
 }

package/dist/esm/Page/PageHeader.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Children } from 'react';
+import React from 'react';
 import { useThemeValue } from '../system';
 import StackView from '../StackView';
-import { PAGE_TABLIST_DISPLAY_NAME } from './PageTabList';
 
 function PageHeader(_ref) {
   var children = _ref.children,
@@ -11,24 +10,24 @@ function PageHeader(_ref) {
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "toolbar"]);
 
   var themeProps = useThemeValue('pageHeader');
-  var tabsPresent = toolbar ? Children.toArray(toolbar.props.children).some(function (child) {
-    return child && child.type.displayName === PAGE_TABLIST_DISPLAY_NAME;
-  }) : false;
-  var childrenToRender = toolbar ? children ? Children.toArray([/*#__PURE__*/React.createElement(StackView, {
-    axis: "horizontal",
-    alignment: "center",
-    width: "100%"
-  }, children), toolbar]) : toolbar : children;
   return /*#__PURE__*/React.createElement(StackView, _extends({
     as: "header",
-    axis: children && toolbar ? 'vertical' : 'horizontal',
-    alignment: children && toolbar ? 'start' : 'center',
-    paddingHorizontal: 3,
-    paddingTop: 1.5,
-    paddingBottom: tabsPresent ? null : 1.5,
-    spacing: 1.5,
-    backgroundColor: "primary-light"
-  }, themeProps, restProps), childrenToRender);
+    axis: "vertical",
+    backgroundColor: "primary-light",
+    paddingHorizontal: 2,
+    minHeight: 8,
+    mediaQueries: {
+      sm: {
+        paddingHorizontal: 3
+      }
+    },
+    spacing: 0
+  }, themeProps, restProps), children && /*#__PURE__*/React.createElement(StackView, {
+    alignment: "center",
+    axis: "horizontal",
+    paddingTop: 2,
+    width: "100%"
+  }, children), toolbar);
 }
 
 export default PageHeader;

package/dist/esm/Page/PageTab.js

@@ -1,11 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Tab from '../Tab';
+import { useThemeValue } from '../system';
 
 function PageTab(props) {
-  return /*#__PURE__*/React.createElement(Tab, _extends({}, props, {
+  var themeProps = useThemeValue('pageTab');
+  return /*#__PURE__*/React.createElement(Tab, _extends({
+    mediaQueries: {
+      sm: {
+        paddingHorizontal: 3
+      }
+    },
+    paddingHorizontal: 1.5,
     size: "lg"
-  }));
+  }, themeProps, props));
 }
 
 export default PageTab;

package/dist/esm/Page/PageTabList.js

@@ -1,14 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StackView from '../StackView';
-export var PAGE_TABLIST_DISPLAY_NAME = 'PageTabList';
-
-function PageTabList(props) {
+export default function PageTabList(props) {
   return /*#__PURE__*/React.createElement(StackView, _extends({
     axis: "horizontal",
-    spacing: 0.5
+    paddingTop: 2,
+    spacing: 0.5,
+    alignSelf: "end"
   }, props));
-}
-
-PageTabList.displayName = PAGE_TABLIST_DISPLAY_NAME;
-export default PageTabList;
+}

package/dist/esm/Page/PageTitle.js

@@ -6,8 +6,9 @@ import Heading from '../Heading';
 function PageTitle(props) {
   var themeProps = useThemeValue('pageTitle');
   return /*#__PURE__*/React.createElement(Heading, _extends({
-    level: 2,
-    color: "white"
+    color: "white",
+    fontSize: "25px",
+    level: 2
   }, themeProps, props));
 }
 

package/dist/esm/Page/PageToolbar.js

@@ -1,14 +1,36 @@
+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 { useThemeValue } from '../system';
 
 function PageToolbar(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(StackView, {
-    grow: 1,
+  var _mediaQueries;
+
+  var stackBelow = _ref.stackBelow,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["stackBelow"]);
+
+  var themeBreakpoints = useThemeValue('breakpoints');
+  var breakpoint = Object.keys(themeBreakpoints).includes(stackBelow) ? stackBelow : 'sm';
+  var stackProps = stackBelow ? {
+    axis: 'vertical',
+    alignment: 'stretch',
+    spacing: 2,
+    mediaQueries: (_mediaQueries = {}, _mediaQueries[breakpoint] = {
+      axis: 'horizontal',
+      alignment: 'center',
+      paddingBottom: 0,
+      spacing: 0
+    }, _mediaQueries)
+  } : null;
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
     axis: "horizontal",
-    alignment: "start",
-    distribution: "space-between"
-  }, children);
+    distribution: "space-between",
+    flex: 1,
+    spacing: 2,
+    width: "100%"
+  }, stackProps, restProps));
 }
 
 export default PageToolbar;

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.2.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/ActionsDropdown/ActionsDropdown.tsx

@@ -60,10 +60,10 @@ export function ActionsDropdown({
   defaultButtonProps = defaultTheme.button.themes.primary.fill,
   duplicates,
   duplicatesButtonProps = {
-    color: 'white',
-    backgroundColor: 'hsl(25deg 79% 57%)',
-    hover: { backgroundColor: 'hsl(25deg 80% 54%)' },
-    active: { backgroundColor: 'hsl(25deg 82% 51%)' },
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
+    hover: { backgroundColor: 'hsl(42deg 87% 90%)' },
+    active: { backgroundColor: 'hsl(42deg 87% 87%)' },
   },
   inactive,
   inactiveButtonProps = {
@@ -82,8 +82,9 @@ export function ActionsDropdown({
       iconLeft={
         hasDuplicates || hasInactiveDate
           ? {
+              color: hasDuplicates ? '#E6A714' : 'white',
               name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
-              size: 'lg',
+              size: 'md',
             }
           : undefined
       }
@@ -104,9 +105,9 @@ export function ActionsDropdown({
         <>
           <StackView axis="horizontal" padding={2} spacing={1}>
             <Icon
-              name="exclamation-triangle-filled"
-              color="#e8833a"
+              color="#E6A714"
               marginTop="3px"
+              name="exclamation-triangle-filled"
             />
             <Text size={4}>
               There {duplicates.amount > 1 ? 'are' : 'is'} {duplicates.amount}{' '}

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,
                   ])}`}