@planningcenter/tapestry-react 1.2.0 → 2.0.0-rc.0

package/dist/cjs/FieldSet/FieldSet.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,30 +21,42 @@ var _TileView = _interopRequireDefault(require("../TileView"));
 
 var _Toolbar = _interopRequireDefault(require("../Toolbar"));
 
+var _system = require("../system");
+
+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) { (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; }
+
 function FieldSet(_ref) {
   var children = _ref.children,
-      _ref$minCellWidth = _ref.minCellWidth,
-      minCellWidth = _ref$minCellWidth === void 0 ? 16 : _ref$minCellWidth,
-      _ref$spacing = _ref.spacing,
-      spacing = _ref$spacing === void 0 ? 1 : _ref$spacing,
       helpContent = _ref.helpContent,
       legend = _ref.legend,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "minCellWidth", "spacing", "helpContent", "legend"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "helpContent", "legend"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('fieldset', _objectSpread({}, restProps)),
+      headingProps = _useThemeProps.headingProps,
+      tileViewProps = _useThemeProps.tileViewProps,
+      _useThemeProps$spacin = _useThemeProps.spacing,
+      spacing = _useThemeProps$spacin === void 0 ? 1 : _useThemeProps$spacin,
+      _useThemeProps$minCel = _useThemeProps.minCellWidth,
+      minCellWidth = _useThemeProps$minCel === void 0 ? 16 : _useThemeProps$minCel,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["headingProps", "tileViewProps", "spacing", "minCellWidth"]);
+
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     as: "fieldset",
     padding: 0,
     margin: 2
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
-    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+  }, themeProps, restProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], (0, _extends2["default"])({
       as: "legend",
       level: 4
-    }, legend),
+    }, headingProps), legend),
     helpContent: helpContent,
     marginBottom: 1
-  }), /*#__PURE__*/_react["default"].createElement(_TileView["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_TileView["default"], (0, _extends2["default"])({
     minCellWidth: minCellWidth,
     spacing: spacing
-  }, children));
+  }, tileViewProps), children));
 }
 
 var _default = FieldSet;

package/dist/cjs/FilterLayout/FilterLayout.js

@@ -70,7 +70,8 @@ function FilterLayout(props) {
     title: "Filter",
     "aria-label": sidebarOpen ? 'close filter' : 'open filter',
     iconRight: {
-      name: sidebarOpen ? 'caret-left' : 'filter'
+      name: sidebarOpen ? 'general.leftChevron' : 'general.threeReducingHorizontalBars',
+      size: sidebarOpen ? 'xs' : 'md'
     },
     onClick: toggleSidebar
   }), /*#__PURE__*/React.createElement(_Box["default"], {

package/dist/cjs/Form/Form.js

@@ -113,7 +113,7 @@ var Form = /*#__PURE__*/function (_React$Component) {
       editButtonProps: {
         disabled: isSubmitting,
         icon: isEditing ? undefined : {
-          name: 'pencil'
+          name: 'general.pencil'
         },
         onClick: function onClick() {
           // bail out if we've already triggered a submit in onBlur

package/dist/cjs/GridView/GridView.js

@@ -19,6 +19,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _splitStyles = _interopRequireDefault(require("../system/split-styles"));
 
+var _system = require("../system");
+
 var _VariantProvider = require("../VariantProvider");
 
 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; }
@@ -75,15 +77,15 @@ var gridViewPlugin = {
     }
 
     if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
-      styles.gridColumnGap = columnSpacing * 8;
+      styles.gridColumnGap = (0, _system.spacingValue)(columnSpacing);
     }
 
     if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
-      styles.gridRowGap = rowSpacing * 8;
+      styles.gridRowGap = (0, _system.spacingValue)(rowSpacing);
     }
 
-    if (spacing !== undefined && styles.gridGap === undefined) {
-      styles.gridGap = spacing * 8;
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = (0, _system.spacingValue)(spacing);
     }
 
     return styles;

package/dist/cjs/Group/Group.js

@@ -35,14 +35,19 @@ function Group(_ref) {
   var isHorizontalLayout = axis === 'horizontal';
   var startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop';
   var endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom';
+  var marginBottom = isHorizontalLayout ? 0 : '-1px';
+  var marginRight = isHorizontalLayout ? '-1px' : 0;
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-    axis: axis,
-    spacing: -0.125
+    axis: axis
   }, restProps), (0, _utils.cloneChildren)(children, function (child, _ref2) {
     var _objectSpread2;
 
     var firstChild = _ref2.firstChild,
         lastChild = _ref2.lastChild;
-    return _objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2));
+    return _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2), !lastChild && {
+      marginBottom: marginBottom
+    }), !lastChild && {
+      marginRight: marginRight
+    });
   }));
 }

package/dist/cjs/HeadingUppercase/HeadingUppercase.js

@@ -18,7 +18,7 @@ var _system = require("../system");
 function HeadingUppercase(_ref) {
   var children = _ref.children,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children"]);
-  var themedProps = (0, _system.useThemeValue)('HeadingUppercase');
+  var themeProps = (0, _system.useThemeProps)('HeadingUppercase', restProps);
   return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
     as: "span",
     uppercase: true,
@@ -28,7 +28,7 @@ function HeadingUppercase(_ref) {
     color: "foregroundSecondary",
     shrink: 0,
     margin: 0
-  }, themedProps, restProps), children);
+  }, themeProps), children);
 }
 
 var _default = HeadingUppercase;

package/dist/cjs/HelperDrawer/HelperDrawer.js

@@ -37,7 +37,7 @@ function Toggle(_ref) {
   }, [drawerId]);
   return (0, _core.jsx)(_Button["default"], (0, _extends2["default"])({
     icon: {
-      name: 'info'
+      name: 'general.outlinedInfoCircle'
     },
     tooltip: {
       title: 'More info'

package/dist/cjs/Highlight/Highlight.js

@@ -13,22 +13,28 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _system = require("../system");
+
 var _utils = require("./utils");
 
 /**
  * Highlight or mark letters in a string using a provided query.
  */
 function Highlight(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$marker = _ref.marker,
+  var _ref$marker = _ref.marker,
       marker = _ref$marker === void 0 ? _utils.markStartsWithMatchSubstring : _ref$marker,
       query = _ref.query,
       text = _ref.text,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["color", "marker", "query", "text"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["marker", "query", "text"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('highlight', restProps),
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["color"]);
+
   return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
     as: "span"
-  }, restProps), marker(text, query).map(function (part, index) {
+  }, themeProps), marker(text, query).map(function (part, index) {
     return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
       key: index,
       inline: true,

package/dist/cjs/Icon/Status.js

@@ -16,9 +16,9 @@ var _Icon = _interopRequireDefault(require("./Icon"));
 var _Path = _interopRequireDefault(require("./Path"));
 
 var STATUS_VARIANTS = {
-  confirmed: ['checkmark-circle', 'success'],
-  unconfirmed: ['question-circle', 'warning'],
-  declined: ['close-circle', 'error']
+  confirmed: ['general.outlinedCircleCheck', 'success'],
+  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
+  declined: ['general.outlinedXCircle', 'error']
 };
 
 function Status(props) {
@@ -42,7 +42,7 @@ function Status(props) {
     name: variantName,
     color: color || variantColor
   }, restProps), /*#__PURE__*/_react["default"].createElement(_Path["default"], {
-    name: "radio-0",
+    name: "tapestry.radio0",
     color: color
   }));
 }

package/dist/cjs/Input/InputBox.js

@@ -324,7 +324,7 @@ var InputBox = /*#__PURE__*/function (_Component) {
       size: size
     }) : onClear ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       icon: {
-        name: 'close'
+        name: 'general.x'
       },
       title: "clear input value",
       size: size,

package/dist/cjs/List/ListItem.js

@@ -36,7 +36,7 @@ function ListItem(_ref) {
     backgroundColor: "surface"
   }, hoverProps, restProps), children, onRemoveRequest && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     icon: {
-      name: 'remove-circle-filled'
+      name: 'general.minusCircle'
     },
     title: removeTitle,
     size: "sm",

package/dist/cjs/Menu/Heading.js

@@ -17,10 +17,12 @@ function Heading(_ref) {
   var children = _ref.children,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children"]);
   return /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], (0, _extends2["default"])({
-    padding: 1,
-    paddingBottom: 0.5
+    paddingBottom: 0.5,
+    paddingHorizontal: 2,
+    paddingTop: 1
   }, restProps), children);
 }
 
+Heading.displayName = 'Menu.Heading';
 var _default = Heading;
 exports["default"] = _default;

package/dist/cjs/Menu/Item.js

@@ -35,7 +35,7 @@ function Item(_ref) {
     minHeight: 4,
     fontSize: '14px',
     paddingVertical: 0.75,
-    paddingHorizontal: 1,
+    paddingHorizontal: 2,
     whiteSpace: 'nowrap',
     position: 'relative',
     userSelect: 'none',
@@ -43,11 +43,11 @@ function Item(_ref) {
   };
 
   if (renderLeft) {
-    css.paddingLeft = 4;
+    css.paddingLeft = 5;
   }
 
   if (renderRight) {
-    css.paddingRight = 4;
+    css.paddingRight = 5;
   }
 
   if (isHighlighted) {
@@ -69,7 +69,7 @@ function Item(_ref) {
     height: "100%",
     position: "absolute",
     top: 0,
-    left: "-1px"
+    left: 0.5
   }, typeof renderLeft === 'function' ? renderRight() : /*#__PURE__*/(0, _react.cloneElement)(renderLeft, {
     size: renderLeft.props && renderLeft.props.size || 'md'
   })), children, renderRight && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
@@ -80,7 +80,7 @@ function Item(_ref) {
     height: "100%",
     position: "absolute",
     top: 0,
-    right: "-1px"
+    right: 0.5
   }, typeof renderRight === 'function' ? renderRight() : /*#__PURE__*/(0, _react.cloneElement)(renderRight, {
     size: renderRight.props && renderRight.props.size || 'md'
   })));

package/dist/cjs/Pagination/Pagination.js

@@ -112,7 +112,8 @@ var Pagination = /*#__PURE__*/function (_Component) {
       onClick: onPageChange.bind(null, currentPage - 1),
       disabled: currentPage === 1,
       icon: {
-        name: 'caret-left'
+        name: 'general.leftChevron',
+        size: 'xs'
       },
       tooltip: {
         title: 'Previous Page'
@@ -123,7 +124,8 @@ var Pagination = /*#__PURE__*/function (_Component) {
       onClick: onPageChange.bind(null, currentPage + 1),
       disabled: currentPage === totalPages,
       icon: {
-        name: 'caret-right'
+        name: 'general.rightChevron',
+        size: 'xs'
       },
       tooltip: {
         title: 'Next Page'

package/dist/cjs/Progress/Progress.js

@@ -13,11 +13,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
-function Progress(props) {
-  var value = props.value,
-      _props$activeColor = props.activeColor,
-      activeColor = _props$activeColor === void 0 ? 'primary' : _props$activeColor,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["value", "activeColor"]);
+var _system = require("../system");
+
+function Progress(_ref) {
+  var value = _ref.value,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('progress', restProps),
+      _useThemeProps$active = _useThemeProps.activeColor,
+      activeColor = _useThemeProps$active === void 0 ? 'primary' : _useThemeProps$active,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeColor"]);
+
   return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
     role: "progressbar",
     "aria-valuenow": value,
@@ -27,7 +33,7 @@ function Progress(props) {
     position: "relative",
     overflow: "hidden",
     backgroundColor: "grey-3"
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+  }, themeProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     position: "absolute",
     top: 0,
     right: 0,

package/dist/cjs/Radio/Radio.js

@@ -28,8 +28,8 @@ var _VariantProvider = _interopRequireDefault(require("../VariantProvider"));
 var _system = require("../system");
 
 var iconPaths = {
-  fill: 'radio-0',
-  checked: 'radio-1'
+  fill: 'tapestry.radio0',
+  checked: 'tapestry.radio1'
 };
 var radioEmitter = (0, _mitt["default"])();
 

package/dist/cjs/RangeSlider/RangeSlider.js

@@ -19,6 +19,8 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _hooks = require("../hooks");
 
+var _system = require("../system");
+
 function RangeSlider(props) {
   var _props$min = props.min,
       min = _props$min === void 0 ? 0 : _props$min,
@@ -29,9 +31,13 @@ function RangeSlider(props) {
       disabled = props.disabled,
       value = props.value,
       onChange = props.onChange,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? {} : _props$variant,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["min", "max", "step", "disabled", "value", "onChange", "variant"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["min", "max", "step", "disabled", "value", "onChange"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('rangeSlider', restProps),
+      _useThemeProps$varian = _useThemeProps.variant,
+      variant = _useThemeProps$varian === void 0 ? {} : _useThemeProps$varian,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["variant"]);
+
   var snapTo = (0, _popcorn.snap)(step);
   var sliderRef = (0, _react.useRef)();
   var trackRef = (0, _react.useRef)();
@@ -178,7 +184,7 @@ function RangeSlider(props) {
     opacity: disabled ? 0.65 : undefined,
     onMouseDown: disabled ? undefined : handleTrackPointerDown,
     onTouchStart: disabled ? undefined : handleTrackPointerDown
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+  }, themeProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
     innerRef: trackRef,
     height: 0.5,
     radius: 6,

package/dist/cjs/Scrim/Scrim.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var Scrim = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var Scrim = /*#__PURE__*/React.forwardRef(function (props) {
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
@@ -21,7 +21,7 @@ var Scrim = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(_StackView["default"], (0, _extends2["default"])({
-    innerRef: ref,
+    innerRef: props.ref,
     position: "fixed",
     top: 0,
     right: 0,

package/dist/cjs/Section/Section.js

@@ -17,23 +17,31 @@ var _Toolbar = _interopRequireDefault(require("../Toolbar"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _system = require("../system");
+
 function Section(_ref) {
   var _ref$actions = _ref.actions,
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       children = _ref.children,
       count = _ref.count,
-      countColor = _ref.countColor,
       helpContent = _ref.helpContent,
       onStatusClearRequest = _ref.onStatusClearRequest,
       status = _ref.status,
       title = _ref.title,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["actions", "children", "count", "countColor", "helpContent", "onStatusClearRequest", "status", "title"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["actions", "children", "count", "helpContent", "onStatusClearRequest", "status", "title"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('section', restProps),
+      countColor = _useThemeProps.countColor,
+      headingProps = _useThemeProps.headingProps,
+      toolbarProps = _useThemeProps.toolbarProps,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["countColor", "headingProps", "toolbarProps"]);
+
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     as: "section"
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
-    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+  }, themeProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], (0, _extends2["default"])({
+    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], (0, _extends2["default"])({
       level: 3
-    }, title),
+    }, headingProps), title),
     helpContent: helpContent,
     actions: actions,
     count: count,
@@ -41,7 +49,7 @@ function Section(_ref) {
     status: status,
     onStatusClearRequest: onStatusClearRequest,
     marginBottom: 2
-  }), children);
+  }, toolbarProps)), children);
 }
 
 var _default = Section;

package/dist/cjs/Select/Option.js

@@ -84,7 +84,7 @@ var Option = /*#__PURE__*/function (_Component) {
             checked: selected,
             onChange: noop
           }) : selected ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            name: "checkmark",
+            name: "general.check",
             size: "sm"
           }) : /*#__PURE__*/_react["default"].createElement(_Box["default"], {
             width: 2.5,

package/dist/cjs/Select/Select.js

@@ -513,7 +513,7 @@ var Select = /*#__PURE__*/function (_Component) {
                 touchAction: "manipulation",
                 focusChildrenOnFocus: false,
                 renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-                  name: isPopoverVisible ? 'arrow-up' : 'arrow-down'
+                  name: isPopoverVisible ? 'general.upCaret' : 'general.downCaret'
                 })
               }, restProps), _this2.getValue(), _this2.getHiddenInputValues()));
             });

package/dist/cjs/Sortable/SortableItem.js

@@ -45,7 +45,7 @@ function SortableItem(_ref) {
     }, restProps, provided.draggableProps), !readOnly && /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({}, provided.dragHandleProps, {
       marginRight: 1
     }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-      name: "drag-handle",
+      name: "general.dragHandle",
       size: "sm",
       color: "foregroundTertiary"
     })), children);

package/dist/cjs/StackView/StackView.js

@@ -19,6 +19,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _splitStyles = _interopRequireDefault(require("../system/split-styles"));
 
+var _system = require("../system");
+
 var _utils = require("../utils");
 
 var _VariantProvider = require("../VariantProvider");
@@ -63,10 +65,8 @@ var stackViewPlugin = {
       styles.justifyContent = distribution;
     }
 
-    if (typeof spacing === 'number') {
-      var _styles$NotLa;
-
-      styles['& > *:not(:last-child)'] = (_styles$NotLa = {}, _styles$NotLa["margin" + (axis === HORIZONTAL ? 'Right' : 'Bottom')] = spacing * 8, _styles$NotLa["margin" + (axis === HORIZONTAL ? 'Bottom' : 'Right')] = 0, _styles$NotLa);
+    if (typeof spacing === 'number' || typeof spacing === 'string') {
+      styles.gap = (0, _system.spacingValue)(spacing);
     }
 
     return styles;
@@ -82,7 +82,7 @@ function StackView(_ref2) {
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["as", "children", "inline", "innerRef"]);
   var Element = as || defaultElement;
   var variant = (0, _VariantProvider.useVariant)();
-  var childrenToRender = Element === 'textarea' ? undefined : typeof props.spacing === 'number' || props.spacing === undefined ? children : (0, _utils.joinChildren)(children, props.spacing);
+  var childrenToRender = Element === 'textarea' ? undefined : typeof props.spacing === 'object' ? (0, _utils.joinChildren)(children, props.spacing) : children;
   return (0, _core.jsx)(Element, (0, _extends2["default"])({
     ref: innerRef
   }, (0, _splitStyles["default"])(_objectSpread({

package/dist/cjs/StepperField/StepperField.js

@@ -25,12 +25,15 @@ function StepperField(_ref) {
       _ref$max = _ref.max,
       max = _ref$max === void 0 ? Infinity : _ref$max,
       onChange = _ref.onChange,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
       _ref$step = _ref.step,
       step = _ref$step === void 0 ? 1 : _ref$step,
       value = _ref.value,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["min", "max", "onChange", "size", "step", "value"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["min", "max", "onChange", "step", "value"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('stepperField', restProps),
+      _useThemeProps$size = _useThemeProps.size,
+      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["size"]);
 
   var _useBoxSize = (0, _system.useBoxSize)(size),
       fontSize = _useBoxSize.fontSize,
@@ -40,11 +43,11 @@ function StepperField(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     axis: "horizontal",
     fontSize: fontSize
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, themeProps), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: size,
     title: "Decrement by " + step,
     icon: {
-      name: 'remove',
+      name: 'general.minus',
       size: navigateSize(size, -1)
     },
     disabled: value <= min,
@@ -64,7 +67,7 @@ function StepperField(_ref) {
     size: size,
     title: "Increment by " + step,
     icon: {
-      name: 'add',
+      name: 'general.plus',
       size: navigateSize(size, -1)
     },
     disabled: value >= max,

package/dist/cjs/StepperProgress/StepperProgress.js

@@ -17,19 +17,23 @@ var _GridView = _interopRequireDefault(require("../GridView"));
 
 var _Context = _interopRequireDefault(require("./Context"));
 
-var ACTIVE_COLOR = 'primary-light';
+var _system = require("../system");
 
 function StepperProgress(_ref) {
   var activeStepIndex = _ref.activeStepIndex,
-      _ref$activeColor = _ref.activeColor,
-      activeColor = _ref$activeColor === void 0 ? ACTIVE_COLOR : _ref$activeColor,
       children = _ref.children,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["activeStepIndex", "activeColor", "children"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["activeStepIndex", "children"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('stepperProgress', restProps),
+      _useThemeProps$active = _useThemeProps.activeColor,
+      activeColor = _useThemeProps$active === void 0 ? 'primary-light' : _useThemeProps$active,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeColor"]);
+
   return /*#__PURE__*/_react["default"].createElement(_GridView["default"], (0, _extends2["default"])({
     autoFlow: "column",
     autoColumns: "1fr",
     alignment: "center"
-  }, restProps), _react.Children.map(children, function (child, stepIndex) {
+  }, themeProps), _react.Children.map(children, function (child, stepIndex) {
     return /*#__PURE__*/_react["default"].createElement(_Context["default"].Provider, {
       key: stepIndex,
       value: {

package/dist/cjs/Table/ColumnPicker.js

@@ -32,7 +32,7 @@ function ColumnPicker(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], (0, _extends2["default"])({
     variant: "outline",
     icon: {
-      name: 'columns'
+      name: 'general.threeVerticalBars'
     },
     tooltip: {
       title: 'Filter Columns'

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)));