@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/dist/cjs/Modal/Modal.test.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+
+var _Select = _interopRequireDefault(require("../Select"));
+
+var _ = require("../");
+
+var _lodash = require("lodash");
+
+describe('Modal', function () {
+  var TestModal = function TestModal() {
+    var _useState = (0, _react.useState)(false),
+        open = _useState[0],
+        setOpen = _useState[1];
+
+    return /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+      "data-testid": "modal-toggle",
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      title: "Toggle modal"
+    }), /*#__PURE__*/_react["default"].createElement(_.Modal, {
+      open: open,
+      onRequestClose: function onRequestClose() {
+        return setOpen(false);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_.Heading, {
+      "data-testid": "modal-header"
+    }, "Hello"), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], null, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, {
+        "data-testid": "dropdown-item-" + n,
+        key: n
+      }, n);
+    })), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      onChange: _lodash.noop
+    }, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, {
+        "data-testid": "select-option-" + n,
+        key: n,
+        value: n
+      }, n);
+    })))));
+  };
+
+  describe('Keyboard navigation', function () {
+    it('should close modal on escape keypress (dropdown button has focus)', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      expect(_react2.screen.getByTestId('modal-header')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should not close modal when escape key closes a dropdown within modal', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      var _screen$getAllByRole = _react2.screen.getAllByRole('button'),
+          dropdown = _screen$getAllByRole[1];
+
+      expect(dropdown).toHaveFocus();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.getByTestId('modal-header')).toBeInTheDocument();
+    });
+    it('should close dropdown on escape & close modal on subsequent escape', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.getByTestId('modal-header')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should hide select popover on escape, but select remains in dom', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeInTheDocument();
+    });
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, persist modal', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeNull();
+      expect(_react2.screen.queryByTestId('modal-header')).toBeInTheDocument();
+    });
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, close modal on subsequent escape', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeNull();
+      expect(_react2.screen.queryByTestId('modal-header')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+    });
+  });
+});

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

@@ -119,6 +119,10 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var requestClose = function requestClose(event) {
     if (event.key === 'Escape' && onRequestClose) {
+      if (open) {
+        event.nativeEvent.stopImmediatePropagation();
+      }
+
       onRequestClose();
     }
 

package/dist/cjs/Popover/Popover.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require("..");
+
+var PopBasic = function PopBasic(_ref) {
+  var children = _ref.children;
+
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_.Box, {
+    id: "container"
+  }, /*#__PURE__*/_react["default"].createElement(_.Popover, {
+    open: open,
+    offset: 1,
+    renderTo: "#container",
+    anchorElement: /*#__PURE__*/_react["default"].createElement(_.Button, {
+      title: "Toggle",
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      id: "anchor-element"
+    })
+  }, children));
+};
+
+describe('Popover', function () {
+  it('should not render string in closed Popover', function () {
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(PopBasic, null, /*#__PURE__*/_react["default"].createElement(_.Text, null, string)));
+    expect(_react2.screen.queryByText(string)).toBeNull();
+  });
+  it('should render string in open Popover', function () {
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(PopBasic, null, /*#__PURE__*/_react["default"].createElement(_.Text, null, string)));
+
+    var openPopover = _react2.screen.getByRole('button');
+
+    _userEvent["default"].click(openPopover);
+
+    expect(_react2.screen.getByText(string)).toBeInTheDocument();
+  });
+  it('should focus open button on click', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(PopBasic, null, /*#__PURE__*/_react["default"].createElement(_.Box, null)));
+
+    var openPopover = _react2.screen.getByRole('button');
+
+    _userEvent["default"].click(openPopover);
+
+    expect(openPopover).toHaveFocus();
+  });
+});

package/dist/cjs/Popover/rewireTabOrder.js

@@ -36,38 +36,29 @@ var RewireTabOrder = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "lastFocusableElement", null);
     (0, _defineProperty2["default"])(this, "originalActiveElement", null);
     (0, _defineProperty2["default"])(this, "nextActiveElement", null);
-    (0, _defineProperty2["default"])(this, "focusOriginalActiveElement", function () {
-      _this.originalActiveElement.focus();
-    });
-    (0, _defineProperty2["default"])(this, "focusNextActiveElement", function () {
-      _this.nextActiveElement.focus();
-    });
     (0, _defineProperty2["default"])(this, "moveFocusToTargetFromTriggerElement", function (event) {
       if (!event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.firstFocusableElement.focus();
+        if (_this.tabbables.includes(_this.nextActiveElement)) {
+          _this.nextActiveElement.focus();
+        } else {
+          _this.firstFocusableElement.focus();
+        }
       }
     });
-    (0, _defineProperty2["default"])(this, "moveFocusFromTargetToTriggerElement", function (event) {
+    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromFirstElement", function (event) {
       if (event.target === _this.firstFocusableElement && event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.originalActiveElement.focus();
-      }
-    });
-    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromNextElement", function (event) {
-      if (event.shiftKey && event.keyCode === TAB_KEY) {
-        event.preventDefault();
-
         _this.lastFocusableElement.focus();
       }
     });
-    (0, _defineProperty2["default"])(this, "moveFocusFromTargetToNextElement", function (event) {
-      if (!event.shiftKey && event.keyCode === TAB_KEY) {
+    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromLastElement", function (event) {
+      if (event.target === _this.lastFocusableElement && !event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.nextActiveElement.focus();
+        _this.firstFocusableElement.focus();
       }
     });
 
@@ -88,12 +79,8 @@ var RewireTabOrder = /*#__PURE__*/function () {
     this.originalActiveElement = document.activeElement;
     this.nextActiveElement = getNextActiveElement(this.originalActiveElement);
     this.originalActiveElement.addEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
-    this.firstFocusableElement.addEventListener('keydown', this.moveFocusFromTargetToTriggerElement);
-
-    if (this.nextActiveElement) {
-      this.nextActiveElement.addEventListener('keydown', this.moveFocusToTargetFromNextElement);
-      this.lastFocusableElement.addEventListener('keydown', this.moveFocusFromTargetToNextElement);
-    }
+    this.firstFocusableElement.addEventListener('keydown', this.moveFocusToTargetFromFirstElement);
+    this.lastFocusableElement.addEventListener('keydown', this.moveFocusToTargetFromLastElement);
   };
 
   _proto.destroy = function destroy() {
@@ -102,12 +89,8 @@ var RewireTabOrder = /*#__PURE__*/function () {
     }
 
     this.originalActiveElement.removeEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
-    this.firstFocusableElement.removeEventListener('keydown', this.moveFocusFromTargetToTriggerElement);
-
-    if (this.nextActiveElement) {
-      this.nextActiveElement.removeEventListener('keydown', this.moveFocusToTargetFromNextElement);
-      this.lastFocusableElement.removeEventListener('keydown', this.moveFocusFromTargetToNextElement);
-    }
+    this.firstFocusableElement.removeEventListener('keydown', this.moveFocusToTargetFromFirstElement);
+    this.lastFocusableElement.removeEventListener('keydown', this.moveFocusToTargetFromLastElement);
   };
 
   return RewireTabOrder;

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

@@ -366,6 +366,15 @@ var Select = /*#__PURE__*/function (_Component) {
 
               break;
 
+            case 'Escape':
+              if (isPopoverOpen && !isPopoverVisible) {
+                event.preventDefault();
+
+                _this2.closePopover();
+              }
+
+              break;
+
             case ' ':
               event.preventDefault();
 
@@ -513,7 +522,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/Sidebar/Sidebar.js

@@ -15,8 +15,6 @@ var _react = require("react");
 
 var _reactStickyBox = _interopRequireDefault(require("react-sticky-box"));
 
-var _warning = _interopRequireDefault(require("warning"));
-
 var _system = require("../system");
 
 var _StackView = _interopRequireDefault(require("../StackView"));
@@ -44,7 +42,10 @@ function Sidebar(_ref) {
   }, restProps), (0, _core.jsx)(_reactStickyBox["default"], {
     css: flexColumnCss
   }, _react.Children.map(children, function (child) {
-    (0, _warning["default"])(child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item, "Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
+    if (child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item) {
+      console.warn("Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
+    }
+
     return child;
   })));
 }

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'