@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/dist/cjs/Table/DragHandle.js

@@ -11,7 +11,7 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var DragHandle = function DragHandle() {
   return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    name: "drag-handle",
+    name: "general.dragHandle",
     size: "sm",
     color: "foregroundTertiary",
     cursor: "grab"

package/dist/cjs/Table/NavigationArrow.js

@@ -51,7 +51,7 @@ function NavigationArrow(_ref) {
 
   var buttonProps = _objectSpread((_objectSpread2 = {
     icon: {
-      name: "caret-" + side
+      name: "general." + side + "Chevron"
     },
     title: "navigate " + side,
     theme: false,

package/dist/cjs/Table/SubRowToggleCell.js

@@ -37,7 +37,7 @@ var SubRowToggleCell = function SubRowToggleCell(_ref) {
     theme: false,
     title: "Toggle row",
     icon: {
-      name: 'arrow-down'
+      name: 'general.downCaret'
     },
     transform: !toggled && 'rotate(-90deg)'
   }, restProps)));

package/dist/cjs/Table/Table.js

@@ -21,9 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
-var _lodash = _interopRequireDefault(require("lodash.camelcase"));
-
-var _lodash2 = _interopRequireDefault(require("lodash.snakecase"));
+var _lodash = require("lodash");
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -106,7 +104,7 @@ var Table = /*#__PURE__*/function (_PureComponent) {
   };
 
   Table.getIconDirection = function getIconDirection(direction) {
-    return direction === Table.ASC ? 'arrow-up' : 'arrow-down';
+    return direction === Table.ASC ? 'general.upCaret' : 'general.downCaret';
   };
 
   function Table(props) {
@@ -311,13 +309,13 @@ var Table = /*#__PURE__*/function (_PureComponent) {
   _proto.getSortOrder = function getSortOrder(_ref3) {
     var columnId = _ref3.columnId,
         direction = _ref3.direction;
-    return "" + (direction === Table.ASC ? '' : '-') + (0, _lodash2["default"])(columnId);
+    return "" + (direction === Table.ASC ? '' : '-') + (0, _lodash.snakeCase)(columnId);
   };
 
   _proto.parseSortOrder = function parseSortOrder(query) {
     var isDescending = query[0] === '-';
     return {
-      columnId: (0, _lodash["default"])(isDescending ? query.substring(1) : query),
+      columnId: (0, _lodash.camelCase)(isDescending ? query.substring(1) : query),
       direction: isDescending ? Table.DESC : Table.ASC
     };
   };

package/dist/cjs/Tabs/Tab.js

@@ -55,5 +55,6 @@ function Tab(props) {
   }, hoverProps, restProps), children);
 }
 
+Tab.displayName = 'Tabs.Tab';
 var _default = Tab;
 exports["default"] = _default;

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -18,7 +18,7 @@ var _core = require("@emotion/core");
 
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
+var _lodash = require("lodash");
 
 var _defaultTheme = _interopRequireDefault(require("../system/default-theme"));
 
@@ -78,12 +78,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: (0, _deepmerge["default"])(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+      themes: (0, _lodash.merge)(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
     }),
-    colors: (0, _deepmerge["default"])((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
+    colors: (0, _lodash.merge)((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: (0, _deepmerge["default"])(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: (0, _deepmerge["default"])(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+      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) || {})
     })
   });
 }

package/dist/cjs/TileView/TileView.js

@@ -40,7 +40,7 @@ var tileViewPlugin = {
     }
 
     if (spacing !== undefined) {
-      styles.gridGap = (0, _system.spacingValue)(spacing);
+      styles.gap = (0, _system.spacingValue)(spacing);
     }
 
     return styles;

package/dist/cjs/TokenInput/DefaultToken.js

@@ -28,7 +28,7 @@ function DefaultToken(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_Badge["default"], (0, _extends2["default"])({
     size: "sm",
     renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-      name: "close",
+      name: "general.x",
       size: "xs",
       cursor: "pointer",
       onClick: function onClick() {

package/dist/cjs/Wizard/Wizard.js

@@ -192,7 +192,8 @@ var Wizard = /*#__PURE__*/function (_Component) {
     }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
       disabled: sendingPayload,
       iconLeft: {
-        name: 'caret-left'
+        name: 'general.leftChevron',
+        size: 'sm'
       },
       onClick: function onClick() {
         return _this2.setState({

package/dist/cjs/WrapView/WrapView.js

@@ -13,43 +13,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var supportsFlexGap = null;
-
-function getSupportsFlexGap() {
-  if (typeof document !== 'undefined' && supportsFlexGap === null) {
-    var div = document.createElement('div');
-    div.style.display = 'flex';
-    div.style.flexDirection = 'column';
-    div.style.gap = '1px';
-    div.appendChild(document.createElement('div'));
-    div.appendChild(document.createElement('div'));
-    document.body.appendChild(div);
-    supportsFlexGap = div.scrollHeight === 1;
-    document.body.removeChild(div);
-  }
-
-  return supportsFlexGap;
-}
+var _system = require("../system");
 
 function WrapView(_ref) {
   var children = _ref.children,
       spacing = _ref.spacing,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "spacing"]);
-  var supportsFlexGap = getSupportsFlexGap();
   var styles = {
     basis: '100%'
   };
 
   if (spacing) {
-    if (supportsFlexGap) {
-      styles.gap = spacing;
-    } else {
-      styles.marginBottom = -spacing;
-      styles['& > *'] = {
-        marginRight: spacing,
-        marginBottom: spacing
-      };
-    }
+    styles.gap = (0, _system.spacingValue)(spacing);
   }
 
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({

package/dist/cjs/hooks/use-accessibility-violation.js

@@ -37,7 +37,7 @@ consoleContent) {
         alignment: "center",
         spacing: 1
       }, /*#__PURE__*/React.createElement(_Icon["default"], {
-        name: "exclamation-circle-filled",
+        name: "general.exclamationCircle",
         size: "md",
         color: "error"
       }), /*#__PURE__*/React.createElement(_Text["default"], {

package/dist/cjs/hooks/useConstant.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = useConstant;
+
+var React = _interopRequireWildcard(require("react"));
+
+// A copy/paste of the source of the `use-constant` package.
+// https://github.com/Andarist/use-constant/blob/main/src/index.ts
+// This is done to reduce dependencies.
+function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}

package/dist/cjs/system/default-theme.js

@@ -1,11 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _icons = _interopRequireDefault(require("../icons"));
+var general = _interopRequireWildcard(require("@planningcenter/icons/paths/general"));
+
+var tapestry = _interopRequireWildcard(require("@planningcenter/icons/paths/tapestry"));
 
 var _boxSizes = require("./box-sizes");
 
@@ -23,7 +25,10 @@ var controlStyles = {
 var defaultTheme = {
   boxSizes: _boxSizes.boxSizes,
   colors: _colors.colors,
-  icons: _icons["default"],
+  icons: {
+    general: general,
+    tapestry: tapestry
+  },
   breakpoints: {
     xs: 480,
     sm: 600,

package/dist/cjs/system/utils.js

@@ -24,7 +24,7 @@ var _core = require("@emotion/core");
 
 var _polished = require("polished");
 
-var _lodash = _interopRequireDefault(require("lodash.get"));
+var _lodash = require("lodash");
 
 var _colors = require("./colors");
 
@@ -161,7 +161,7 @@ function getForegroundColor(color) {
 
 function useThemeValue(path, defaultValue) {
   var userTheme = (0, _react.useContext)(_core.ThemeContext);
-  return path ? (0, _lodash["default"])(userTheme, path, defaultValue || (0, _lodash["default"])(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
+  return path ? (0, _lodash.get)(userTheme, path, defaultValue || (0, _lodash.get)(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
 }
 
 function useThemeProps(path, props) {

package/dist/cjs/utils.js

@@ -46,7 +46,7 @@ var _react = require("react");
 
 var _tabbable = require("tabbable");
 
-var _camelToKebab = _interopRequireDefault(require("camel-to-kebab"));
+var _lodash = require("lodash");
 
 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; }
 
@@ -785,11 +785,11 @@ function createCSSProperty(key, value) {
     createdCSSProperties.add(key);
   }
 
-  return "--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value);
+  return "--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value);
 }
 
 function getCSSProperty(key, value) {
-  return key && value ? "var(--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value) + ")" : undefined;
+  return key && value ? "var(--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value) + ")" : undefined;
 }
 
 function objectToCSSProperties(themeKey, props) {

package/dist/esm/ActionsDropdown/ActionsDropdown.js

@@ -14,13 +14,13 @@ import { cloneChildren } from '../utils';
 var _ref2 = /*#__PURE__*/React.createElement(Icon, {
   color: "#E6A714",
   marginTop: "3px",
-  name: "exclamation-triangle-filled"
+  name: "general.exclamationTriangle"
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
 
 var _ref4 = /*#__PURE__*/React.createElement(Icon, {
-  name: "inactive",
+  name: "general.inactive",
   color: "grey-8",
   marginTop: "3px"
 });
@@ -76,7 +76,7 @@ export function ActionsDropdown(_ref) {
     title: "Actions",
     iconLeft: hasDuplicates || hasInactiveDate ? {
       color: hasDuplicates ? '#E6A714' : 'white',
-      name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
+      name: hasDuplicates ? 'general.exclamationTriangle' : 'general.inactive',
       size: 'md'
     } : undefined,
     fontSize: "14px",

package/dist/esm/Badge/Badge.js

@@ -1,31 +1,51 @@
 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; }
+
 import React, { cloneElement } from 'react';
 import Box from '../Box';
-import { getForegroundColor, useBoxSize } from '../system';
+import { getForegroundColor, useBoxSize, useThemeProps } from '../system';
 import StackView from '../StackView';
 import Text from '../Text';
 import { stopPropagationClick } from '../utils';
 
 function Badge(_ref) {
   var children = _ref.children,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? {
-    foreground: 'foreground',
-    background: 'surfaceTertiary'
-  } : _ref$color,
       renderLeft = _ref.renderLeft,
       renderRight = _ref.renderRight,
       onClick = _ref.onClick,
-      _ref$radius = _ref.radius,
-      radius = _ref$radius === void 0 ? 3 : _ref$radius,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      square = _ref.square,
       title = _ref.title,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "color", "renderLeft", "renderRight", "onClick", "radius", "size", "square", "title"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "renderLeft", "renderRight", "onClick", "title"]);
+
+  var _useThemeProps = useThemeProps('badge', restProps),
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? {
+    foreground: 'foreground',
+    background: 'surfaceTertiary'
+  } : _useThemeProps$color,
+      _useThemeProps$radius = _useThemeProps.radius,
+      radius = _useThemeProps$radius === void 0 ? 3 : _useThemeProps$radius,
+      _useThemeProps$size = _useThemeProps.size,
+      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
+      _useThemeProps$square = _useThemeProps.square,
+      square = _useThemeProps$square === void 0 ? false : _useThemeProps$square,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["color", "radius", "size", "square"]);
+
+  var badgeProps = _objectSpread({
+    color: color,
+    radius: radius,
+    size: size,
+    square: square
+  }, themeProps);
+
+  badgeProps.backgroundColor = color.background || color;
+  badgeProps.color = color.foreground || getForegroundColor(color);
 
-  var _useBoxSize = useBoxSize(size),
+  var _useBoxSize = useBoxSize(badgeProps.size),
       boxSize = _useBoxSize.boxSize,
       fontSize = _useBoxSize.fontSize,
       lineHeight = _useBoxSize.lineHeight,
@@ -40,34 +60,29 @@ function Badge(_ref) {
     color: 'inherit'
   };
 
-  if (square || radius === 'circle') {
-    restProps.width = boxSize;
-    restProps.height = boxSize;
+  if (badgeProps.square || badgeProps.radius === 'circle') {
+    badgeProps.width = boxSize;
+    badgeProps.height = boxSize;
   }
 
-  if (radius === 'circle') {
+  if (badgeProps.radius === 'circle') {
     textStyle.position = 'absolute';
     textStyle.top = '50%';
     textStyle.left = '50%';
     textStyle.transform = 'translate(-50%, -50%)';
   }
 
-  var spacingLeft = renderLeft ? boxSize + 0.5 : radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
-  var spacingRight = renderRight ? boxSize + 0.5 : radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
+  badgeProps.paddingLeft = renderLeft ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
+  badgeProps.paddingRight = renderRight ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
   return /*#__PURE__*/React.createElement(StackView, _extends({
     inline: true,
     axis: "horizontal",
     alignment: "center",
     distribution: "center",
-    radius: radius,
     fontSize: fontSize,
     lineHeight: lineHeight,
     minHeight: boxSize,
-    paddingLeft: spacingLeft,
-    paddingRight: spacingRight,
     paddingVertical: paddingVertical,
-    backgroundColor: color.background || color,
-    color: color.foreground || getForegroundColor(color),
     fill: "currentColor",
     textAlign: "center",
     position: "relative",
@@ -77,7 +92,7 @@ function Badge(_ref) {
       backgroundColor: 'highlightSecondary'
     },
     onClick: stopPropagationClick(onClick)
-  }, restProps), renderLeft && /*#__PURE__*/React.createElement(Box, {
+  }, badgeProps), renderLeft && /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -87,7 +102,7 @@ function Badge(_ref) {
     top: 0,
     left: 0
   }, typeof renderLeft === 'string' ? renderLeft : /*#__PURE__*/cloneElement(renderLeft, {
-    size: renderLeft.props && renderLeft.props.size || size
+    size: renderLeft.props && renderLeft.props.size || badgeProps.size
   })), typeof title === 'undefined' ? children : /*#__PURE__*/React.createElement(Text, textStyle, title), renderRight && /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
@@ -98,7 +113,7 @@ function Badge(_ref) {
     top: 0,
     right: 0
   }, typeof renderRight === 'string' ? renderRight : /*#__PURE__*/cloneElement(renderRight, {
-    size: renderRight.props && renderRight.props.size || size
+    size: renderRight.props && renderRight.props.size || badgeProps.size
   })));
 }
 

package/dist/esm/Badge/Status.js

@@ -10,11 +10,11 @@ import Badge from './Badge';
 var statuses = {
   error: {
     color: 'error',
-    icon: 'close'
+    icon: 'general.x'
   },
   success: {
     color: 'success',
-    icon: 'checkmark'
+    icon: 'general.check'
   }
 };
 

package/dist/esm/Calendar/Calendar.js

@@ -179,7 +179,8 @@ var Calendar = /*#__PURE__*/forwardRef(function (_ref, calendarRef) {
   }, /*#__PURE__*/React.createElement(Button, {
     title: "Previous month",
     icon: {
-      name: 'caret-left'
+      name: 'general.leftChevron',
+      size: "xxs"
     },
     disabled: isYearsView ? currentYear <= minYear : isSameMonth(currentDate, minDate),
     onClick: function onClick() {
@@ -190,7 +191,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (_ref, calendarRef) {
       title: 'Today'
     },
     icon: {
-      name: 'radio-1'
+      name: 'tapestry.radio1'
     },
     onClick: function onClick() {
       return setDate(TODAY, true);
@@ -198,7 +199,8 @@ var Calendar = /*#__PURE__*/forwardRef(function (_ref, calendarRef) {
   }), /*#__PURE__*/React.createElement(Button, {
     title: "Next month",
     icon: {
-      name: 'caret-right'
+      name: 'general.rightChevron',
+      size: "xxs"
     },
     disabled: isYearsView ? currentYear >= maxYear : isSameMonth(currentDate, maxDate),
     onClick: function onClick() {

package/dist/esm/Card/Card.js

@@ -4,8 +4,7 @@ import * as React from 'react';
 import { useThemeValue } from '../system';
 import { StackView } from '../StackView';
 import { cloneChildren } from '../utils';
-
-function Section(_ref) {
+export function Section(_ref) {
   var subdued = _ref.subdued,
       restProps = _objectWithoutPropertiesLoose(_ref, ["subdued"]);
 
@@ -15,7 +14,6 @@ function Section(_ref) {
     backgroundColor: subdued ? 'surfaceSecondary' : undefined
   }, restProps));
 }
-
 export function Card(_ref2) {
   var children = _ref2.children,
       subdued = _ref2.subdued,
@@ -41,4 +39,5 @@ export function Card(_ref2) {
     return child.props.radius === undefined ? firstChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref4) : lastChild ? (_ref5 = {}, _ref5["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref5) : {} : {};
   }) : children);
 }
+Section.displayName = 'Card.Section';
 Card.Section = Section;

package/dist/esm/Checkbox/Checkbox.js

@@ -13,9 +13,9 @@ import { useThemeValue } from '../system';
 import { useAccessibilityViolation } from '../hooks/use-accessibility-violation';
 import { mergeProps } from '../utils';
 var iconPaths = {
-  fill: 'checkbox-0',
-  minus: 'checkbox-1',
-  checked: 'checkbox-2'
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2'
 };
 
 var _ref2 = /*#__PURE__*/React.createElement(Link, {

package/dist/esm/ChurchCenterStatus/ChurchCenterStatus.js

@@ -68,10 +68,10 @@ export function ChurchCenterStatus(_ref) {
   var hasLinks = showSettingsLink || ccEnabled && ccPublishingEnabled || !!renderPopoverFooter();
 
   var icon = _objectSpread({
-    check: 'checkmark',
-    exclamationTriangle: 'exclamation-triangle-filled',
-    external: 'external',
-    x: 'close'
+    check: 'general.check',
+    exclamationTriangle: 'general.exclamationTriangle',
+    external: 'general.newWindow',
+    x: 'general.x'
   }, icons);
 
   return /*#__PURE__*/React.createElement(StackView, _extends({

package/dist/esm/ColumnView/ColumnView.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { Children } from 'react';
 import StackView from '../StackView';
+import { spacingValue } from '../system';
 
 function Column() {
   return null;
@@ -14,6 +15,7 @@ function ColumnView(props) {
       spacing = props.spacing,
       restProps = _objectWithoutPropertiesLoose(props, ["children", "sizes", "spacing"]);
 
+  var parsedSpacing = spacingValue(spacing);
   var sortedColumns = Children.toArray(children).sort(function (a, b) {
     return (a.props.order || 0) - (b.props.order || 0);
   }).reduce(function (columns, cell, index) {
@@ -37,8 +39,8 @@ function ColumnView(props) {
       basis: size === 'auto' ? '100%' : size.basis || size,
       shrink: size === 'auto' ? 1 : size.shrink || 0,
       grow: size === 'auto' ? 1 : size.grow || 0,
-      marginLeft: index === 0 ? null : spacing,
-      spacing: spacing
+      marginLeft: index === 0 ? null : parsedSpacing,
+      spacing: parsedSpacing
     }, column.map(function (cell) {
       return cell.props.children;
     }));

package/dist/esm/Combobox/ComboboxPopover.js

@@ -201,14 +201,14 @@ var ComboboxPopover = /*#__PURE__*/function (_Component) {
               renderRight: closeButton ? /*#__PURE__*/React.createElement(Button, _extends({
                 disabled: disabled,
                 icon: {
-                  name: 'close'
+                  name: 'general.x'
                 },
                 title: "close options",
                 theme: false
               }, closeButton)) : dropdownButton ? /*#__PURE__*/React.createElement(Button, {
                 disabled: disabled,
                 icon: {
-                  name: isPopoverOpen ? 'close' : 'arrow-down'
+                  name: isPopoverOpen ? 'general.x' : 'general.downCaret'
                 },
                 title: isPopoverOpen ? 'close options' : 'open options',
                 theme: false,

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

@@ -1,10 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback } from 'react';
-import Icon from './Icon';
+import Icon from '../../Icon';
 var iconPaths = {
-  fill: 'checkbox-0',
-  minus: 'checkbox-1',
-  checked: 'checkbox-2'
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2'
 };
 var scaleStyles = {
   visibility: 'visible',

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

@@ -1,10 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react'; // import Checkbox from '../../Checkbox'
-
+import React from 'react';
 import Dropdown from '../../Dropdown';
 import Text from '../../Text';
-import Checkbox from './CheckboxCell';
+import Checkbox from '../../Checkbox';
 
 var noop = function noop() {
   return null;
@@ -22,7 +21,7 @@ function ColumnPicker(_ref) {
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     variant: "outline",
     icon: {
-      name: 'columns'
+      name: 'general.threeVerticalBars'
     },
     tooltip: {
       title: 'Filter Columns'
@@ -52,7 +51,9 @@ function ColumnPicker(_ref) {
       value: column.id
     }, /*#__PURE__*/React.createElement(Checkbox, {
       checked: hiddenColumnIds.indexOf(column.id) === -1,
-      onChange: noop
+      onChange: noop,
+      label: null,
+      size: "md"
     }), /*#__PURE__*/React.createElement(Text, {
       marginLeft: 1
     }, column.label || column.header));

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

@@ -5,7 +5,7 @@ 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) { _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 { createContext, useCallback, useContext, useEffect } from 'react';
-import useConstant from 'use-constant';
+import useConstant from '../../hooks/useConstant';
 import create from 'zustand';
 import { range } from '../../utils';
 export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);