@planningcenter/tapestry-react 1.0.0 → 1.3.0

package/dist/cjs/ActionsDropdown/ActionsDropdown.js

@@ -38,13 +38,13 @@ function ActionsDropdown(_ref) {
       duplicates = _ref.duplicates,
       _ref$duplicatesButton = _ref.duplicatesButtonProps,
       duplicatesButtonProps = _ref$duplicatesButton === void 0 ? {
-    color: 'white',
-    backgroundColor: 'hsl(25deg 79% 57%)',
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
     hover: {
-      backgroundColor: 'hsl(25deg 80% 54%)'
+      backgroundColor: 'hsl(42deg 87% 90%)'
     },
     active: {
-      backgroundColor: 'hsl(25deg 82% 51%)'
+      backgroundColor: 'hsl(42deg 87% 87%)'
     }
   } : _ref$duplicatesButton,
       inactive = _ref.inactive,
@@ -61,8 +61,9 @@ function ActionsDropdown(_ref) {
   return /*#__PURE__*/React.createElement(_Dropdown["default"], (0, _extends2["default"])({
     title: "Actions",
     iconLeft: hasDuplicates || hasInactiveDate ? {
+      color: hasDuplicates ? '#E6A714' : 'white',
       name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
-      size: 'lg'
+      size: 'md'
     } : undefined,
     fontSize: "14px",
     fontWeight: 400,
@@ -78,9 +79,9 @@ function ActionsDropdown(_ref) {
     padding: 2,
     spacing: 1
   }, /*#__PURE__*/React.createElement(_Icon["default"], {
-    name: "exclamation-triangle-filled",
-    color: "#e8833a",
-    marginTop: "3px"
+    color: "#E6A714",
+    marginTop: "3px",
+    name: "exclamation-triangle-filled"
   }), /*#__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"], {

package/dist/cjs/Button/Button.js

@@ -68,6 +68,7 @@ function Button(_ref) {
 
   var buttonProps = {
     alignment: 'center',
+    as: restProps.href || to ? 'a' : 'div',
     axis: 'horizontal',
     distribution: 'center',
     fontSize: fontSize,
@@ -79,7 +80,6 @@ function Button(_ref) {
     role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
-    as: restProps.href || to ? 'a' : 'div',
     userSelect: 'none',
     zIndex: 1
   };
@@ -227,6 +227,11 @@ function Button(_ref) {
         zIndex: 2
       }, buttonProps.hover)
     });
+  } // pass to if as is defined
+
+
+  if (restProps.as) {
+    buttonProps.to = to;
   }
 
   if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/ChurchCenterStatus/ChurchCenterStatus.js

@@ -30,7 +30,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (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 ChurchCenterStatus(_ref) {
-  var _ref$ccAppEnabled = _ref.ccAppEnabled,
+  var _ref$buttonProps = _ref.buttonProps,
+      passedButtonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+      _ref$ccAppEnabled = _ref.ccAppEnabled,
       ccAppEnabled = _ref$ccAppEnabled === void 0 ? false : _ref$ccAppEnabled,
       _ref$ccPublishingEnab = _ref.ccPublishingEnabled,
       ccPublishingEnabled = _ref$ccPublishingEnab === void 0 ? false : _ref$ccPublishingEnab,
@@ -44,16 +46,23 @@ function ChurchCenterStatus(_ref) {
       dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
       icons = _ref.icons,
       productUrl = _ref.productUrl,
+      _ref$renderPopoverFoo = _ref.renderPopoverFooter,
+      renderPopoverFooter = _ref$renderPopoverFoo === void 0 ? function () {} : _ref$renderPopoverFoo,
       settingsUrl = _ref.settingsUrl,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "settingsUrl"]);
-  var buttonProps = {
+      _ref$showSettingsLink = _ref.showSettingsLink,
+      showSettingsLink = _ref$showSettingsLink === void 0 ? true : _ref$showSettingsLink,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["buttonProps", "ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "renderPopoverFooter", "settingsUrl", "showSettingsLink"]);
+
+  var buttonProps = _objectSpread({
     distribution: 'start',
     fontWeight: 400,
     paddingHorizontal: 2,
     radius: 0,
     variant: 'naked'
-  };
+  }, passedButtonProps);
+
   var ccEnabled = ccAppEnabled || ccWebEnabled;
+  var hasLinks = showSettingsLink || ccEnabled && ccPublishingEnabled || !!renderPopoverFooter();
 
   var icon = _objectSpread({
     check: 'checkmark',
@@ -113,19 +122,23 @@ function ChurchCenterStatus(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     size: "14px",
     weight: 700
-  }, "Mobile app")))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  }, "Mobile app")))), hasLinks && /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
     margin: 0.5
-  }), /*#__PURE__*/_react["default"].createElement(_StackView["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+  }), /*#__PURE__*/_react["default"].createElement(_StackView["default"], null, showSettingsLink && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     external: true,
     title: "Update settings",
     to: settingsUrl
   }, buttonProps)), ccEnabled && ccPublishingEnabled && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     external: true,
+    iconRight: {
+      color: 'primary',
+      name: icon.external,
+      marginLeft: 1,
+      size: 'xs'
+    },
+    title: "Visit " + destinationLabel,
     to: productUrl
-  }, buttonProps), "Visit ", destinationLabel, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    color: "primary",
-    name: icon.external,
-    marginLeft: 1,
-    size: "sm"
-  })))));
+  }, buttonProps, {
+    as: "a"
+  })), renderPopoverFooter(buttonProps))));
 }

package/dist/cjs/Menu/Heading.js

@@ -17,8 +17,9 @@ 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);
 }
 

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

@@ -139,12 +139,25 @@ var NumberField = /*#__PURE__*/function (_Component) {
           maxValue = _this$getParsedValues5.maxValue;
 
       if (_this.props.pad) {
-        var targetValue = event.target.value === '' ? event.target.value : parseFloat(event.target.value);
+        var deleteKeyPressed = event.target.value === '';
+        var targetValue = deleteKeyPressed ? event.target.value : parseFloat(event.target.value);
 
-        if (targetValue !== '') {
-          var nextValue = _this.clampValue(targetValue);
+        if (deleteKeyPressed) {
+          var nextValue = ("" + _this.props.value).slice(0, -1);
 
-          if (_this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
+          _this.props.onChange((0, _utils.padNumber)(nextValue, _this.props.pad));
+        } else {
+          var _nextValue = _this.clampValue(targetValue);
+
+          var paddedValue = parseFloat("" + _this.props.value + targetValue);
+
+          if (!_this.firstTouch && !isNaN(targetValue) && _this.isValueValid(paddedValue)) {
+            _nextValue = paddedValue;
+          }
+
+          _this.firstTouch = false;
+
+          if (_this.props.moveFocusOnMax && _nextValue / maxValue > 0.1) {
             var _getTabbableSiblings = (0, _utils.getTabbableSiblings)(event.target),
                 next = _getTabbableSiblings.next;
 
@@ -155,11 +168,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
             }
           }
 
-          _this.firstTouch = false;
-
-          _this.changeIfValid(nextValue);
-        } else {
-          _this.props.onChange('');
+          _this.changeIfValid(_nextValue);
         }
       } else {
         _this.props.onChange(event.target.value);
@@ -222,7 +231,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown

package/dist/cjs/Page/PageActions.js

@@ -13,7 +13,12 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 function PageActions(props) {
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
+    alignSelf: "end",
     axis: "horizontal",
+    distribution: "end",
+    flex: "1",
+    paddingBottom: 2,
     spacing: 1
   }, props));
 }

package/dist/cjs/Page/PageHeader.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -11,37 +9,35 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _system = require("../system");
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var _PageTabList = require("./PageTabList");
-
 function PageHeader(_ref) {
   var children = _ref.children,
       toolbar = _ref.toolbar,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "toolbar"]);
   var themeProps = (0, _system.useThemeValue)('pageHeader');
-  var tabsPresent = toolbar ? _react.Children.toArray(toolbar.props.children).some(function (child) {
-    return child && child.type.displayName === _PageTabList.PAGE_TABLIST_DISPLAY_NAME;
-  }) : false;
-  var childrenToRender = toolbar ? children ? _react.Children.toArray([/*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-    axis: "horizontal",
-    alignment: "center",
-    width: "100%"
-  }, children), toolbar]) : toolbar : children;
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     as: "header",
-    axis: children && toolbar ? 'vertical' : 'horizontal',
-    alignment: children && toolbar ? 'start' : 'center',
-    paddingHorizontal: 3,
-    paddingTop: 1.5,
-    paddingBottom: tabsPresent ? null : 1.5,
-    spacing: 1.5,
-    backgroundColor: "primary-light"
-  }, themeProps, restProps), childrenToRender);
+    axis: "vertical",
+    backgroundColor: "primary-light",
+    paddingHorizontal: 2,
+    minHeight: 8,
+    mediaQueries: {
+      sm: {
+        paddingHorizontal: 3
+      }
+    },
+    spacing: 0
+  }, themeProps, restProps), children && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    alignment: "center",
+    axis: "horizontal",
+    paddingTop: 2,
+    width: "100%"
+  }, children), toolbar);
 }
 
 var _default = PageHeader;

package/dist/cjs/Page/PageTab.js

@@ -11,10 +11,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Tab = _interopRequireDefault(require("../Tab"));
 
+var _system = require("../system");
+
 function PageTab(props) {
-  return /*#__PURE__*/_react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, props, {
+  var themeProps = (0, _system.useThemeValue)('pageTab');
+  return /*#__PURE__*/_react["default"].createElement(_Tab["default"], (0, _extends2["default"])({
+    mediaQueries: {
+      sm: {
+        paddingHorizontal: 3
+      }
+    },
+    paddingHorizontal: 1.5,
     size: "lg"
-  }));
+  }, themeProps, props));
 }
 
 var _default = PageTab;

package/dist/cjs/Page/PageTabList.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.PAGE_TABLIST_DISPLAY_NAME = void 0;
+exports["default"] = PageTabList;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -11,16 +11,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var PAGE_TABLIST_DISPLAY_NAME = 'PageTabList';
-exports.PAGE_TABLIST_DISPLAY_NAME = PAGE_TABLIST_DISPLAY_NAME;
-
 function PageTabList(props) {
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     axis: "horizontal",
-    spacing: 0.5
+    paddingTop: 2,
+    spacing: 0.5,
+    alignSelf: "end"
   }, props));
-}
-
-PageTabList.displayName = PAGE_TABLIST_DISPLAY_NAME;
-var _default = PageTabList;
-exports["default"] = _default;
+}

package/dist/cjs/Page/PageTitle.js

@@ -16,8 +16,9 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 function PageTitle(props) {
   var themeProps = (0, _system.useThemeValue)('pageTitle');
   return /*#__PURE__*/_react["default"].createElement(_Heading["default"], (0, _extends2["default"])({
-    level: 2,
-    color: "white"
+    color: "white",
+    fontSize: "25px",
+    level: 2
   }, themeProps, props));
 }
 

package/dist/cjs/Page/PageToolbar.js

@@ -5,18 +5,42 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _system = require("../system");
+
 function PageToolbar(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-    grow: 1,
+  var _mediaQueries;
+
+  var stackBelow = _ref.stackBelow,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["stackBelow"]);
+  var themeBreakpoints = (0, _system.useThemeValue)('breakpoints');
+  var breakpoint = Object.keys(themeBreakpoints).includes(stackBelow) ? stackBelow : 'sm';
+  var stackProps = stackBelow ? {
+    axis: 'vertical',
+    alignment: 'stretch',
+    spacing: 2,
+    mediaQueries: (_mediaQueries = {}, _mediaQueries[breakpoint] = {
+      axis: 'horizontal',
+      alignment: 'center',
+      paddingBottom: 0,
+      spacing: 0
+    }, _mediaQueries)
+  } : null;
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
     axis: "horizontal",
-    alignment: "start",
-    distribution: "space-between"
-  }, children);
+    distribution: "space-between",
+    flex: 1,
+    spacing: 2,
+    width: "100%"
+  }, stackProps, restProps));
 }
 
 var _default = PageToolbar;

package/dist/esm/ActionsDropdown/ActionsDropdown.js

@@ -12,9 +12,9 @@ import Text from '../Text';
 import { cloneChildren } from '../utils';
 
 var _ref2 = /*#__PURE__*/React.createElement(Icon, {
-  name: "exclamation-triangle-filled",
-  color: "#e8833a",
-  marginTop: "3px"
+  color: "#E6A714",
+  marginTop: "3px",
+  name: "exclamation-triangle-filled"
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
@@ -52,13 +52,13 @@ export function ActionsDropdown(_ref) {
       duplicates = _ref.duplicates,
       _ref$duplicatesButton = _ref.duplicatesButtonProps,
       duplicatesButtonProps = _ref$duplicatesButton === void 0 ? {
-    color: 'white',
-    backgroundColor: 'hsl(25deg 79% 57%)',
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
     hover: {
-      backgroundColor: 'hsl(25deg 80% 54%)'
+      backgroundColor: 'hsl(42deg 87% 90%)'
     },
     active: {
-      backgroundColor: 'hsl(25deg 82% 51%)'
+      backgroundColor: 'hsl(42deg 87% 87%)'
     }
   } : _ref$duplicatesButton,
       inactive = _ref.inactive,
@@ -75,8 +75,9 @@ export function ActionsDropdown(_ref) {
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     title: "Actions",
     iconLeft: hasDuplicates || hasInactiveDate ? {
+      color: hasDuplicates ? '#E6A714' : 'white',
       name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
-      size: 'lg'
+      size: 'md'
     } : undefined,
     fontSize: "14px",
     fontWeight: 400,

package/dist/esm/Button/Button.js

@@ -61,6 +61,7 @@ export function Button(_ref) {
 
   var buttonProps = {
     alignment: 'center',
+    as: restProps.href || to ? 'a' : 'div',
     axis: 'horizontal',
     distribution: 'center',
     fontSize: fontSize,
@@ -72,7 +73,6 @@ export function Button(_ref) {
     role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
-    as: restProps.href || to ? 'a' : 'div',
     userSelect: 'none',
     zIndex: 1
   };
@@ -220,6 +220,11 @@ export function Button(_ref) {
         zIndex: 2
       }, buttonProps.hover)
     });
+  } // pass to if as is defined
+
+
+  if (restProps.as) {
+    buttonProps.to = to;
   }
 
   if (process.env.NODE_ENV !== 'production') {

package/dist/esm/ChurchCenterStatus/ChurchCenterStatus.js

@@ -33,7 +33,9 @@ var _ref6 = /*#__PURE__*/React.createElement(Divider, {
 });
 
 export function ChurchCenterStatus(_ref) {
-  var _ref$ccAppEnabled = _ref.ccAppEnabled,
+  var _ref$buttonProps = _ref.buttonProps,
+      passedButtonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+      _ref$ccAppEnabled = _ref.ccAppEnabled,
       ccAppEnabled = _ref$ccAppEnabled === void 0 ? false : _ref$ccAppEnabled,
       _ref$ccPublishingEnab = _ref.ccPublishingEnabled,
       ccPublishingEnabled = _ref$ccPublishingEnab === void 0 ? false : _ref$ccPublishingEnab,
@@ -47,17 +49,23 @@ export function ChurchCenterStatus(_ref) {
       dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
       icons = _ref.icons,
       productUrl = _ref.productUrl,
+      _ref$renderPopoverFoo = _ref.renderPopoverFooter,
+      renderPopoverFooter = _ref$renderPopoverFoo === void 0 ? function () {} : _ref$renderPopoverFoo,
       settingsUrl = _ref.settingsUrl,
-      props = _objectWithoutPropertiesLoose(_ref, ["ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "settingsUrl"]);
+      _ref$showSettingsLink = _ref.showSettingsLink,
+      showSettingsLink = _ref$showSettingsLink === void 0 ? true : _ref$showSettingsLink,
+      props = _objectWithoutPropertiesLoose(_ref, ["buttonProps", "ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "renderPopoverFooter", "settingsUrl", "showSettingsLink"]);
 
-  var buttonProps = {
+  var buttonProps = _objectSpread({
     distribution: 'start',
     fontWeight: 400,
     paddingHorizontal: 2,
     radius: 0,
     variant: 'naked'
-  };
+  }, passedButtonProps);
+
   var ccEnabled = ccAppEnabled || ccWebEnabled;
+  var hasLinks = showSettingsLink || ccEnabled && ccPublishingEnabled || !!renderPopoverFooter();
 
   var icon = _objectSpread({
     check: 'checkmark',
@@ -111,17 +119,21 @@ export function ChurchCenterStatus(_ref) {
     color: ccAppEnabled ? 'success' : 'error',
     name: ccAppEnabled ? icon.check : icon.x,
     size: "sm"
-  }), _ref5))), _ref6, /*#__PURE__*/React.createElement(StackView, null, /*#__PURE__*/React.createElement(Button, _extends({
+  }), _ref5))), hasLinks && _ref6, /*#__PURE__*/React.createElement(StackView, null, showSettingsLink && /*#__PURE__*/React.createElement(Button, _extends({
     external: true,
     title: "Update settings",
     to: settingsUrl
   }, buttonProps)), ccEnabled && ccPublishingEnabled && /*#__PURE__*/React.createElement(Button, _extends({
     external: true,
+    iconRight: {
+      color: 'primary',
+      name: icon.external,
+      marginLeft: 1,
+      size: 'xs'
+    },
+    title: "Visit " + destinationLabel,
     to: productUrl
-  }, buttonProps), "Visit ", destinationLabel, /*#__PURE__*/React.createElement(Icon, {
-    color: "primary",
-    name: icon.external,
-    marginLeft: 1,
-    size: "sm"
-  })))));
+  }, buttonProps, {
+    as: "a"
+  })), renderPopoverFooter(buttonProps))));
 }

package/dist/esm/Menu/Heading.js

@@ -8,8 +8,9 @@ function Heading(_ref) {
       restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
   return /*#__PURE__*/React.createElement(HeadingUppercase, _extends({
-    padding: 1,
-    paddingBottom: 0.5
+    paddingBottom: 0.5,
+    paddingHorizontal: 2,
+    paddingTop: 1
   }, restProps), children);
 }
 

package/dist/esm/Menu/Item.js

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