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

package/dist/cjs/ActionsDropdown/ActionsDropdown.js

@@ -62,7 +62,7 @@ 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",
@@ -81,7 +81,7 @@ function ActionsDropdown(_ref) {
   }, /*#__PURE__*/React.createElement(_Icon["default"], {
     color: "#E6A714",
     marginTop: "3px",
-    name: "exclamation-triangle-filled"
+    name: "general.exclamationTriangle"
   }), /*#__PURE__*/React.createElement(_Text["default"], {
     size: 4
   }, "There ", duplicates.amount > 1 ? 'are' : 'is', " ", duplicates.amount, ' ', "potential ", duplicates.amount > 1 ? 'duplicates' : 'duplicate', " for this profile.", ' ', isBelowManager ? "An administrator can resolve " + (duplicates.amount > 1 ? "them" : "it") + " in People." : /*#__PURE__*/React.createElement(_Link["default"], duplicates.linkProps, isPeopleProduct ? 'Review' : 'Review in People'))), /*#__PURE__*/React.createElement(_Divider["default"], null)) : null, hasInactiveDate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StackView["default"], {
@@ -89,7 +89,7 @@ function ActionsDropdown(_ref) {
     padding: 2,
     spacing: 1
   }, /*#__PURE__*/React.createElement(_Icon["default"], {
-    name: "inactive",
+    name: "general.inactive",
     color: "grey-8",
     marginTop: "3px"
   }), /*#__PURE__*/React.createElement(_Text["default"], {

package/dist/cjs/Badge/Badge.js

@@ -9,6 +9,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 = _interopRequireWildcard(require("react"));
@@ -23,25 +25,43 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _utils = require("../utils");
 
+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 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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "color", "renderLeft", "renderRight", "onClick", "radius", "size", "square", "title"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "renderLeft", "renderRight", "onClick", "title"]);
 
-  var _useBoxSize = (0, _system.useBoxSize)(size),
+  var _useThemeProps = (0, _system.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 = (0, _objectWithoutPropertiesLoose2["default"])(_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 || (0, _system.getForegroundColor)(color);
+
+  var _useBoxSize = (0, _system.useBoxSize)(badgeProps.size),
       boxSize = _useBoxSize.boxSize,
       fontSize = _useBoxSize.fontSize,
       lineHeight = _useBoxSize.lineHeight,
@@ -56,34 +76,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["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     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 || (0, _system.getForegroundColor)(color),
     fill: "currentColor",
     textAlign: "center",
     position: "relative",
@@ -93,7 +108,7 @@ function Badge(_ref) {
       backgroundColor: 'highlightSecondary'
     },
     onClick: (0, _utils.stopPropagationClick)(onClick)
-  }, restProps), renderLeft && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+  }, badgeProps), renderLeft && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -103,7 +118,7 @@ function Badge(_ref) {
     top: 0,
     left: 0
   }, typeof renderLeft === 'string' ? renderLeft : /*#__PURE__*/(0, _react.cloneElement)(renderLeft, {
-    size: renderLeft.props && renderLeft.props.size || size
+    size: renderLeft.props && renderLeft.props.size || badgeProps.size
   })), typeof title === 'undefined' ? children : /*#__PURE__*/_react["default"].createElement(_Text["default"], textStyle, title), renderRight && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     display: "flex",
     alignItems: "center",
@@ -114,7 +129,7 @@ function Badge(_ref) {
     top: 0,
     right: 0
   }, typeof renderRight === 'string' ? renderRight : /*#__PURE__*/(0, _react.cloneElement)(renderRight, {
-    size: renderRight.props && renderRight.props.size || size
+    size: renderRight.props && renderRight.props.size || badgeProps.size
   })));
 }
 

package/dist/cjs/Badge/Status.js

@@ -28,11 +28,11 @@ var _Badge = _interopRequireDefault(require("./Badge"));
 var statuses = {
   error: {
     color: 'error',
-    icon: 'close'
+    icon: 'general.x'
   },
   success: {
     color: 'success',
-    icon: 'checkmark'
+    icon: 'general.check'
   }
 };
 

package/dist/cjs/Calendar/Calendar.js

@@ -205,7 +205,8 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef)
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     title: "Previous month",
     icon: {
-      name: 'caret-left'
+      name: 'general.leftChevron',
+      size: "xxs"
     },
     disabled: isYearsView ? currentYear <= minYear : (0, _dateFns.isSameMonth)(currentDate, minDate),
     onClick: function onClick() {
@@ -216,7 +217,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef)
       title: 'Today'
     },
     icon: {
-      name: 'radio-1'
+      name: 'tapestry.radio1'
     },
     onClick: function onClick() {
       return setDate(_utils.TODAY, true);
@@ -224,7 +225,8 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef)
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     title: "Next month",
     icon: {
-      name: 'caret-right'
+      name: 'general.rightChevron',
+      size: "xxs"
     },
     disabled: isYearsView ? currentYear >= maxYear : (0, _dateFns.isSameMonth)(currentDate, maxDate),
     onClick: function onClick() {

package/dist/cjs/Card/Card.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.Section = Section;
 exports.Card = Card;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -54,4 +55,5 @@ function Card(_ref2) {
   }) : children);
 }
 
+Section.displayName = 'Card.Section';
 Card.Section = Section;

package/dist/cjs/Checkbox/Checkbox.js

@@ -36,9 +36,9 @@ var _useAccessibilityViolation = require("../hooks/use-accessibility-violation")
 var _utils = require("../utils");
 
 var iconPaths = {
-  fill: 'checkbox-0',
-  minus: 'checkbox-1',
-  checked: 'checkbox-2'
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2'
 };
 
 function Checkbox(_ref) {

package/dist/cjs/ChurchCenterStatus/ChurchCenterStatus.js

@@ -65,10 +65,10 @@ 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["default"].createElement(_StackView["default"], (0, _extends2["default"])({

package/dist/cjs/ColumnView/ColumnView.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _system = require("../system");
+
 function Column() {
   return null;
 }
@@ -25,6 +27,7 @@ function ColumnView(props) {
       sizes = _props$sizes === void 0 ? [] : _props$sizes,
       spacing = props.spacing,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["children", "sizes", "spacing"]);
+  var parsedSpacing = (0, _system.spacingValue)(spacing);
 
   var sortedColumns = _react.Children.toArray(children).sort(function (a, b) {
     return (a.props.order || 0) - (b.props.order || 0);
@@ -50,8 +53,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/cjs/Combobox/ComboboxPopover.js

@@ -209,14 +209,14 @@ var ComboboxPopover = /*#__PURE__*/function (_Component) {
               renderRight: closeButton ? /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
                 disabled: disabled,
                 icon: {
-                  name: 'close'
+                  name: 'general.x'
                 },
                 title: "close options",
                 theme: false
               }, closeButton)) : dropdownButton ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
                 disabled: disabled,
                 icon: {
-                  name: isPopoverOpen ? 'close' : 'arrow-down'
+                  name: isPopoverOpen ? 'general.x' : 'general.downCaret'
                 },
                 title: isPopoverOpen ? 'close options' : 'open options',
                 theme: false,

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

@@ -11,12 +11,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Icon = _interopRequireDefault(require("./Icon"));
+var _Icon = _interopRequireDefault(require("../../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/cjs/DataTable/components/ColumnPicker.js

@@ -15,9 +15,8 @@ var _Dropdown = _interopRequireDefault(require("../../Dropdown"));
 
 var _Text = _interopRequireDefault(require("../../Text"));
 
-var _CheckboxCell = _interopRequireDefault(require("./CheckboxCell"));
+var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
 
-// import Checkbox from '../../Checkbox'
 var noop = function noop() {
   return null;
 };
@@ -33,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'
@@ -61,9 +60,11 @@ function ColumnPicker(_ref) {
     return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, {
       key: column.id,
       value: column.id
-    }, /*#__PURE__*/_react["default"].createElement(_CheckboxCell["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
       checked: hiddenColumnIds.indexOf(column.id) === -1,
-      onChange: noop
+      onChange: noop,
+      label: null,
+      size: "md"
     }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
       marginLeft: 1
     }, column.label || column.header));

package/dist/cjs/DataTable/hooks/useColumnSort.js

@@ -22,7 +22,7 @@ var SORT_DESC = 'DESC';
 exports.SORT_DESC = SORT_DESC;
 
 function getIconDirection(direction) {
-  return direction === SORT_ASC ? 'arrow-up' : 'arrow-down';
+  return direction === SORT_ASC ? 'general.upCaret' : 'general.downCaret';
 }
 
 function getOppositeSortDirection(direction) {

package/dist/cjs/DataTable/utils/getParsedColumns.js

@@ -15,7 +15,7 @@ var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
 
 var _useCollapsibleRows = require("../hooks/useCollapsibleRows");
 
-var _Icon = _interopRequireDefault(require("../components/Icon"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
 
 var buttonStyles = {
   appearance: 'none',
@@ -58,7 +58,7 @@ function CollapseHeader(_ref) {
       callbacks.toggleAllSubRows();
     }
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    name: "arrow-down",
+    name: "general.downCaret",
     size: "sm",
     style: {
       transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
@@ -81,7 +81,7 @@ function CollapseCell(_ref2) {
       callbacks.toggleSubRowAtIndex(rowIndex);
     }
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    name: "arrow-down",
+    name: "general.downCaret",
     size: "sm",
     style: {
       transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
@@ -132,7 +132,7 @@ function getParsedColumns(_ref3) {
             return event.preventDefault();
           }
         }, _dragHandleProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-          name: "drag-handle",
+          name: "general.dragHandle",
           size: "sm",
           color: "foregroundTertiary",
           style: {

package/dist/cjs/DateField/DateField.js

@@ -133,7 +133,7 @@ var DateField = /*#__PURE__*/function (_Component) {
           readOnly: true,
           value: value ? (0, _dateFns.format)(value, formatValue) : '',
           renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            name: "calendar",
+            name: "general.calendar",
             color: "foregroundTertiary"
           }),
           onClick: _this2.togglePopover,

package/dist/cjs/Drawer/Drawer.js

@@ -15,10 +15,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _system = require("../system");
+
 function DrawerContents(_ref) {
   var shouldClose = _ref.shouldClose,
       onClose = _ref.onClose,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["shouldClose", "onClose"]);
+  var themeProps = (0, _system.useThemeValue)('drawer');
   var ref = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
@@ -62,7 +65,7 @@ function DrawerContents(_ref) {
     boxShadow: "-6px 0px 6px -4px rgba(150,150,150,0.25)",
     backgroundColor: "surfaceTertiary",
     transition: "transform 240ms ease-out"
-  }, restProps));
+  }, themeProps, restProps));
 }
 
 function Drawer(props) {

package/dist/cjs/Dropdown/Dropdown.js

@@ -192,7 +192,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
                 'aria-haspopup': true,
                 'aria-expanded': isPopoverOpen
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
-                name: isPopoverOpen ? 'arrow-up' : 'arrow-down',
+                name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
               }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
                 _this2.togglePopover();

package/dist/cjs/Dropdown/Link.js

@@ -35,6 +35,8 @@ var Link = /*#__PURE__*/function (_Component) {
 
   var _proto = Link.prototype;
 
+  // Graphql wasn't picking up the correct displayName when this was
+  // assigned to LINK_DISPLAY_NAME, but using a string works
   _proto.render = function render() {
     var _this$props = this.props,
         disabled = _this$props.disabled,
@@ -80,6 +82,6 @@ var Link = /*#__PURE__*/function (_Component) {
   return Link;
 }(_react.Component);
 
-(0, _defineProperty2["default"])(Link, "displayName", LINK_DISPLAY_NAME);
+(0, _defineProperty2["default"])(Link, "displayName", 'Dropdown.Link');
 var _default = Link;
 exports["default"] = _default;

package/dist/cjs/EditActions/EditActions.js

@@ -19,6 +19,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _hooks = require("../hooks");
 
+var _system = require("../system");
+
 function EditActions(_ref) {
   var display = _ref.display,
       edit = _ref.edit,
@@ -47,6 +49,10 @@ function EditActions(_ref) {
     });
   };
 
+  var _useThemeProps = (0, _system.useThemeProps)('editActions', restProps),
+      buttonProps = _useThemeProps.buttonProps,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["buttonProps"]);
+
   (0, _react.useEffect)(function () {
     if (loading === false) {
       setShowCheck(true);
@@ -68,11 +74,11 @@ function EditActions(_ref) {
     onClick: on ? undefined : function () {
       return setOn(true);
     }
-  }, focusProps, hoverProps, restProps), _react.Children.toArray(on ? edit : display), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, focusProps, hoverProps, themeProps), _react.Children.toArray(on ? edit : display), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     grow: 0,
     title: on ? 'Close' : 'Edit',
     icon: {
-      name: showCheck ? 'checkmark' : on ? 'close' : 'pencil',
+      name: showCheck ? 'general.check' : on ? 'general.x' : 'general.pencil',
       color: showCheck ? 'green' : undefined
     },
     tooltip: {
@@ -87,7 +93,7 @@ function EditActions(_ref) {
     spinner: on && loading ? {
       color: 'primary'
     } : undefined
-  }));
+  }, buttonProps)));
 }
 
 var _default = EditActions;

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