@planningcenter/tapestry-react 1.4.0 → 2.0.0

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

@@ -8,7 +8,7 @@ import { useCallback, useState } from 'react';
 export var SORT_ASC = 'ASC';
 export var SORT_DESC = 'DESC';
 export function getIconDirection(direction) {
-  return direction === SORT_ASC ? 'arrow-up' : 'arrow-down';
+  return direction === SORT_ASC ? 'general.upCaret' : 'general.downCaret';
 }
 export function getOppositeSortDirection(direction) {
   return direction === SORT_ASC ? SORT_DESC : SORT_ASC;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import Box from '../../Box';
 import Tooltip from '../../Tooltip';
 import { useCollapsibleRowsStore, useSubRowOpen, useAnySubRowsOpen } from '../hooks/useCollapsibleRows';
-import Icon from '../components/Icon';
+import Icon from '../../Icon';
 var buttonStyles = {
   appearance: 'none',
   display: 'flex',
@@ -45,7 +45,7 @@ function CollapseHeader(_ref) {
       callbacks.toggleAllSubRows();
     }
   }, /*#__PURE__*/React.createElement(Icon, {
-    name: "arrow-down",
+    name: "general.downCaret",
     size: "sm",
     style: {
       transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
@@ -68,7 +68,7 @@ function CollapseCell(_ref2) {
       callbacks.toggleSubRowAtIndex(rowIndex);
     }
   }, /*#__PURE__*/React.createElement(Icon, {
-    name: "arrow-down",
+    name: "general.downCaret",
     size: "sm",
     style: {
       transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
@@ -119,7 +119,7 @@ function getParsedColumns(_ref3) {
             return event.preventDefault();
           }
         }, _dragHandleProps), /*#__PURE__*/React.createElement(Icon, {
-          name: "drag-handle",
+          name: "general.dragHandle",
           size: "sm",
           color: "foregroundTertiary",
           style: {

package/dist/esm/DateField/DateField.js

@@ -14,7 +14,7 @@ import Popover from '../Popover';
 import { generateId } from '../utils';
 
 var _ref2 = /*#__PURE__*/React.createElement(Icon, {
-  name: "calendar",
+  name: "general.calendar",
   color: "foregroundTertiary"
 });
 

package/dist/esm/Drawer/Drawer.js

@@ -2,12 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import StackView from '../StackView';
+import { useThemeValue } from '../system';
 
 function DrawerContents(_ref) {
   var shouldClose = _ref.shouldClose,
       onClose = _ref.onClose,
       restProps = _objectWithoutPropertiesLoose(_ref, ["shouldClose", "onClose"]);
 
+  var themeProps = useThemeValue('drawer');
   var ref = useRef(null);
 
   var _useState = useState(false),
@@ -51,7 +53,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/esm/Dropdown/Dropdown.js

@@ -177,7 +177,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/esm/Dropdown/Dropdown.test.js

@@ -1,26 +1,167 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { noop } from 'lodash';
+import { Box, Button, Text, ThemeProvider } from '..';
 import Dropdown from './Dropdown';
-import ThemeProvider from '../ThemeProvider';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   title: "A menu"
 });
 
-it("should render title", function () {
-  render(_ref);
-  screen.getByText('A menu');
-});
-it("calls passed onSearch function when receiving keyboard input", function () {
-  var customTextSearch = jest.fn();
-  render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, {
-    title: "A menu",
-    onSearch: customTextSearch
-  })));
-  var dropdown = screen.getByText('A menu');
-  fireEvent.keyDown(dropdown, {
-    key: 'A',
-    code: 'KeyA'
+describe('Dropdown', function () {
+  describe('Text search', function () {
+    it("should render title", function () {
+      render(_ref);
+      screen.getByText('A menu');
+    });
+    it("calls passed onSearch function when receiving keyboard input", function () {
+      var customTextSearch = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, {
+        title: "A menu",
+        onSearch: customTextSearch
+      })));
+      var dropdown = screen.getByText('A menu');
+      fireEvent.keyDown(dropdown, {
+        key: 'A',
+        code: 'KeyA'
+      });
+      expect(customTextSearch).toHaveBeenCalled();
+    });
+  });
+  describe('Keyboard navigation', function () {
+    var StatefulDropdown = function StatefulDropdown() {
+      var _useState = useState(0),
+          count = _useState[0],
+          setCount = _useState[1];
+
+      return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "One",
+        onClick: function onClick() {
+          return noop();
+        }
+      })), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "Two",
+        onClick: function onClick() {
+          return setCount(function (c) {
+            return c + 1;
+          });
+        }
+      }), /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "count-text"
+      }, count)), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "Three",
+        onClick: function onClick() {
+          return noop();
+        }
+      })))));
+    };
+
+    var _ref2 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should trap focus, tab forward through all elements', function () {
+      render(_ref2);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole[0],
+          buttonOne = _screen$getAllByRole[1],
+          buttonTwo = _screen$getAllByRole[2],
+          buttonThree = _screen$getAllByRole[3];
+
+      expect(openPopover).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab();
+      expect(buttonTwo).toHaveFocus();
+      userEvent.tab();
+      expect(buttonThree).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+    });
+
+    var _ref3 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should trap focus, tab backwards from first element to last', function () {
+      render(_ref3);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole2 = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole2[0],
+          buttonOne = _screen$getAllByRole2[1],
+          _buttonTwo = _screen$getAllByRole2[2],
+          buttonThree = _screen$getAllByRole2[3];
+
+      expect(openPopover).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonThree).toHaveFocus();
+    });
+
+    var _ref4 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should retain tab order after rerender', function () {
+      render(_ref4);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole3 = screen.getAllByRole('button'),
+          buttonOne = _screen$getAllByRole3[1],
+          buttonTwo = _screen$getAllByRole3[2],
+          buttonThree = _screen$getAllByRole3[3];
+
+      userEvent.tab();
+      userEvent.tab();
+      expect(screen.getByTestId('count-text')).toHaveTextContent('0');
+      userEvent.keyboard('{enter}');
+      expect(screen.getByTestId('count-text')).toHaveTextContent('1');
+      expect(buttonTwo).toHaveFocus();
+      userEvent.tab();
+      expect(buttonThree).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab();
+      userEvent.tab();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonOne).toHaveFocus();
+    });
+
+    var _ref5 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should focus dropdown toggle when a user presses escape key', function () {
+      render(_ref5);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole4 = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole4[0],
+          buttonOne = _screen$getAllByRole4[1];
+
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.keyboard("{esc}");
+      expect(openPopover).toHaveFocus();
+    });
   });
-  expect(customTextSearch).toHaveBeenCalled();
 });

package/dist/esm/Dropdown/Link.js

@@ -17,6 +17,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,
@@ -62,6 +64,6 @@ var Link = /*#__PURE__*/function (_Component) {
   return Link;
 }(Component);
 
-_defineProperty(Link, "displayName", LINK_DISPLAY_NAME);
+_defineProperty(Link, "displayName", 'Dropdown.Link');
 
 export default Link;

package/dist/esm/EditActions/EditActions.js

@@ -4,6 +4,7 @@ import React, { Children, useEffect, useState } from 'react';
 import Button from '../Button';
 import StackView from '../StackView';
 import { useDocumentEvent, useFocus, useHover } from '../hooks';
+import { useThemeProps } from '../system';
 
 function EditActions(_ref) {
   var display = _ref.display,
@@ -33,6 +34,10 @@ function EditActions(_ref) {
     });
   };
 
+  var _useThemeProps = useThemeProps('editActions', restProps),
+      buttonProps = _useThemeProps.buttonProps,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["buttonProps"]);
+
   useEffect(function () {
     if (loading === false) {
       setShowCheck(true);
@@ -54,11 +59,11 @@ function EditActions(_ref) {
     onClick: on ? undefined : function () {
       return setOn(true);
     }
-  }, focusProps, hoverProps, restProps), Children.toArray(on ? edit : display), /*#__PURE__*/React.createElement(Button, {
+  }, focusProps, hoverProps, themeProps), Children.toArray(on ? edit : display), /*#__PURE__*/React.createElement(Button, _extends({
     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: {
@@ -73,7 +78,7 @@ function EditActions(_ref) {
     spinner: on && loading ? {
       color: 'primary'
     } : undefined
-  }));
+  }, buttonProps)));
 }
 
 export default EditActions;

package/dist/esm/FieldSet/FieldSet.js

@@ -1,36 +1,48 @@
 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 from 'react';
 import Heading from '../Heading';
 import StackView from '../StackView';
 import TileView from '../TileView';
 import Toolbar from '../Toolbar';
+import { useThemeProps } from '../system';
 
 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 = _objectWithoutPropertiesLoose(_ref, ["children", "minCellWidth", "spacing", "helpContent", "legend"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "helpContent", "legend"]);
+
+  var _useThemeProps = 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 = _objectWithoutPropertiesLoose(_useThemeProps, ["headingProps", "tileViewProps", "spacing", "minCellWidth"]);
 
   return /*#__PURE__*/React.createElement(StackView, _extends({
     as: "fieldset",
     padding: 0,
     margin: 2
-  }, restProps), /*#__PURE__*/React.createElement(Toolbar, {
-    title: /*#__PURE__*/React.createElement(Heading, {
+  }, themeProps, restProps), /*#__PURE__*/React.createElement(Toolbar, {
+    title: /*#__PURE__*/React.createElement(Heading, _extends({
       as: "legend",
       level: 4
-    }, legend),
+    }, headingProps), legend),
     helpContent: helpContent,
     marginBottom: 1
-  }), /*#__PURE__*/React.createElement(TileView, {
+  }), /*#__PURE__*/React.createElement(TileView, _extends({
     minCellWidth: minCellWidth,
     spacing: spacing
-  }, children));
+  }, tileViewProps), children));
 }
 
 export default FieldSet;

package/dist/esm/FilterLayout/FilterLayout.js

@@ -57,7 +57,8 @@ export 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, {

package/dist/esm/Form/Form.js

@@ -110,7 +110,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/esm/GridView/GridView.js

@@ -12,6 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { jsx } from '@emotion/core';
 import * as React from 'react';
 import splitStyles from '../system/split-styles';
+import { spacingValue } from '../system';
 import { useVariant } from '../VariantProvider';
 
 function getTemplateValue(value) {
@@ -64,15 +65,15 @@ var gridViewPlugin = {
     }
 
     if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
-      styles.gridColumnGap = columnSpacing * 8;
+      styles.gridColumnGap = spacingValue(columnSpacing);
     }
 
     if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
-      styles.gridRowGap = rowSpacing * 8;
+      styles.gridRowGap = spacingValue(rowSpacing);
     }
 
-    if (spacing !== undefined && styles.gridGap === undefined) {
-      styles.gridGap = spacing * 8;
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = spacingValue(spacing);
     }
 
     return styles;

package/dist/esm/Group/Group.js

@@ -16,21 +16,28 @@ export function Group(_ref) {
       childProps = _ref.childProps,
       children = _ref.children,
       radius = _ref.radius,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["axis", "childProps", "children", "radius"]);
+      spacing = _ref.spacing,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["axis", "childProps", "children", "radius", "spacing"]);
 
   var themeRadius = useThemeValue('group.radius');
   var radiusValue = radius != null ? radius : themeRadius;
   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.createElement(StackView, _extends({
     axis: axis,
-    spacing: -0.125
+    spacing: spacing
   }, restProps), 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), !spacing && !lastChild && {
+      marginBottom: marginBottom
+    }), !spacing && !lastChild && {
+      marginRight: marginRight
+    });
   }));
 }

package/dist/esm/HeadingUppercase/HeadingUppercase.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Text from '../Text';
-import { useThemeValue } from '../system';
+import { useThemeProps } from '../system';
 
 function HeadingUppercase(_ref) {
   var children = _ref.children,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
-  var themedProps = useThemeValue('HeadingUppercase');
+  var themeProps = useThemeProps('HeadingUppercase', restProps);
   return /*#__PURE__*/React.createElement(Text, _extends({
     as: "span",
     uppercase: true,
@@ -18,7 +18,7 @@ function HeadingUppercase(_ref) {
     color: "foregroundSecondary",
     shrink: 0,
     margin: 0
-  }, themedProps, restProps), children);
+  }, themeProps), children);
 }
 
 export default HeadingUppercase;

package/dist/esm/HelperDrawer/HelperDrawer.js

@@ -25,7 +25,7 @@ function Toggle(_ref) {
   }, [drawerId]);
   return jsx(Button, _extends({
     icon: {
-      name: 'info'
+      name: 'general.outlinedInfoCircle'
     },
     tooltip: {
       title: 'More info'

package/dist/esm/Highlight/Highlight.js

@@ -2,23 +2,27 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Text from '../Text';
+import { useThemeProps } from '../system';
 import { markFuzzyMatchSubstring, markStartsWithMatchSubstring } from './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 ? markStartsWithMatchSubstring : _ref$marker,
       query = _ref.query,
       text = _ref.text,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["color", "marker", "query", "text"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["marker", "query", "text"]);
+
+  var _useThemeProps = useThemeProps('highlight', restProps),
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["color"]);
 
   return /*#__PURE__*/React.createElement(Text, _extends({
     as: "span"
-  }, restProps), marker(text, query).map(function (part, index) {
+  }, themeProps), marker(text, query).map(function (part, index) {
     return /*#__PURE__*/React.createElement(Text, {
       key: index,
       inline: true,

package/dist/esm/Icon/Status.js

@@ -4,9 +4,9 @@ import React from 'react';
 import Icon from './Icon';
 import Path from './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) {
@@ -31,7 +31,7 @@ function Status(props) {
     name: variantName,
     color: color || variantColor
   }, restProps), /*#__PURE__*/React.createElement(Path, {
-    name: "radio-0",
+    name: "tapestry.radio0",
     color: color
   }));
 }

package/dist/esm/Input/InputBox.js

@@ -313,7 +313,7 @@ var InputBox = /*#__PURE__*/function (_Component) {
       size: size
     }) : onClear ? /*#__PURE__*/React.createElement(Button, {
       icon: {
-        name: 'close'
+        name: 'general.x'
       },
       title: "clear input value",
       size: size,

package/dist/esm/List/ListItem.js

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

package/dist/esm/Menu/Heading.js

@@ -14,4 +14,5 @@ function Heading(_ref) {
   }, restProps), children);
 }
 
+Heading.displayName = 'Menu.Heading';
 export default Heading;