newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/dist/cjs/section-header/style.scss

@@ -3,21 +3,66 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
+	flex: 1;
 	margin: 64px 0 32px;
 
-	&__container:not(:first-child) {
-		margin-top: 48px;
+	&__container {
+		position: relative;
+		&:not(:first-child) {
+			margin-top: 48px;
+		}
+		&:has(> .newspack-section-header--no-margin) {
+			margin-top: 0;
+		}
+		&.newspack-section-header--has-primary-action {
+			display: flex;
+			flex-direction: column;
+			gap: 32px;
+			@media (min-width: 782px) {
+				align-items: flex-start;
+				flex-direction: row;
+			}
+		}
+		&.newspack-section-header--has-back-nav {
+			@media (min-width: 782px) {
+				.newspack-section-header__title-container,
+				p {
+					max-width: calc(50% - 16px);
+				}
+			}
+		}
+	}
+
+	&__back-nav {
+		@media (min-width: 1280px) {
+			left: 0;
+			position: absolute;
+			top: 50%;
+			transform: translate(calc(-100% - 8px), -50%);
+		}
+		a,
+		button {
+			color: inherit !important;
+		}
 	}
 
-	&--no-margin,
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
+		align-items: center;
+		display: flex;
+		gap: 8px;
+		margin: 0 !important;
+	}
+
+	&--no-margin {
 		margin: 0 !important;
 	}
 
@@ -25,7 +70,7 @@
 		text-align: center;
 	}
 
-	&:not( #{&}--no-margin ) + *:not( #{&} ) {
+	&:not( #{&}--no-margin ) + *:not( #{&} ):not(.newspack-wizard__section-header):not(.newspack-section-header__primary-action) {
 		margin-top: -16px !important;
 	}
 
@@ -39,7 +84,87 @@
 		color: wp-colors.$gray-700;
 	}
 
+	&__title-container {
+		align-items: center;
+		display: flex;
+		gap: 8px;
+
+		h2 {
+			font-size: wp-vars.$font-size-x-large;
+			font-weight: wp-vars.$font-weight-medium;
+			line-height: wp-vars.$font-line-height-x-large;
+		}
+
+		.newspack-section-header__menu,
+		.newspack-section-header__secondary-action,
+		.newspack-badge {
+			margin-top: 8px;
+		}
+	}
+
+	&__menu {
+		align-self: center;
+	}
+
+	&__primary-action {
+		@media (min-width: 782px) {
+			display: flex;
+			flex: 1;
+			justify-content: flex-end;
+		}
+	}
+
+	&__secondary-action {
+		display: flex;
+		margin-left: 8px;
+	}
+
+	&__children {
+		margin-top: 32px;
+		width: 100%;
+		.newspack-button-card:not(.grouped) {
+			margin-bottom: 0;
+			& + .newspack-button-card:not(.grouped) {
+				margin-top: 16px;
+			}
+		}
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}
+	&.newspack-section-header--page-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		margin-right: auto;
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5,
+		> h6,
+		> p {
+			text-align: center;
+		}
+		.newspack-section-header__icon {
+			background-color: var(--wp-admin-theme-color-lighter-10);
+			border-radius: 100%;
+			display: grid;
+			height: 80px;
+			margin-bottom: 8px !important;
+			width: 80px;
+			place-items: center;
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+		h1 {
+			font-size: wp-vars.$font-size-x-large;
+			font-weight: wp-vars.$font-weight-medium;
+			line-height: wp-vars.$font-line-height-x-large;
+		}
+	}
 }

package/dist/cjs/select-control/ButtonGroupControl.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
@@ -22,37 +22,42 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-const ButtonGroupControl = ({
-  buttonOptions,
-  buttonSmall,
-  className,
-  help,
-  hideLabelFromVision,
-  label,
-  onChange,
-  value
-}) => {
-  const id = _.hooks.useUniqueId('button-group');
+var ButtonGroupControl = function ButtonGroupControl(_ref) {
+  var buttonOptions = _ref.buttonOptions,
+    buttonSmall = _ref.buttonSmall,
+    className = _ref.className,
+    help = _ref.help,
+    hideLabelFromVision = _ref.hideLabelFromVision,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  var id = _.hooks.useUniqueId('button-group');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
     help: help,
     hideLabelFromVision: hideLabelFromVision,
     id: id.current,
-    className: (0, _classnames.default)(className, 'components-select-control'),
+    className: (0, _classnames["default"])(className, 'components-select-control'),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ButtonGroup, {
-      children: buttonOptions.map(option => {
-        const isSelected = value === option.value;
-        let Label = () => option.label;
+      children: buttonOptions.map(function (option) {
+        var isSelected = value === option.value;
+        var Label = function Label() {
+          return option.label;
+        };
         if (option.icon) {
           // eslint-disable-next-line react/display-name
-          Label = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-            icon: option.icon
-          });
+          Label = function Label() {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+              icon: option.icon
+            });
+          };
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           variant: isSelected ? 'primary' : null,
           isPressed: isSelected,
-          onClick: () => onChange(option.value),
+          onClick: function onClick() {
+            return onChange(option.value);
+          },
           isSmall: buttonSmall,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {})
         }, option.value);
@@ -60,4 +65,4 @@ const ButtonGroupControl = ({
     })
   });
 };
-var _default = exports.default = ButtonGroupControl;
+var _default = exports["default"] = ButtonGroupControl;

package/dist/cjs/select-control/GroupedSelectControl.js

@@ -4,7 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = GroupedSelectControl;
+exports["default"] = GroupedSelectControl;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
@@ -13,66 +15,70 @@ var _find = _interopRequireDefault(require("lodash/find"));
 var _some = _interopRequireDefault(require("lodash/some"));
 var _ = require("..");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["help", "label", "onChange", "optgroups", "className", "hideLabelFromVision"];
 /**
  * WordPress dependencies
  */
-
 /**
  * External dependencies
  */
-
 /**
  * Internal dependencies
  */
-
 /**
  * SelectControl with optgroup support
- */function GroupedSelectControl({
-  help,
-  label,
-  onChange,
-  optgroups = [],
-  className,
-  hideLabelFromVision,
-  ...props
-}) {
-  const onChangeValue = event => {
-    const {
-      value
-    } = event.target;
-    const optgroup = (0, _find.default)(optgroups, group => (0, _some.default)(group.options, ['value', value]));
+ */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function GroupedSelectControl(_ref) {
+  var help = _ref.help,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    _ref$optgroups = _ref.optgroups,
+    optgroups = _ref$optgroups === void 0 ? [] : _ref$optgroups,
+    className = _ref.className,
+    hideLabelFromVision = _ref.hideLabelFromVision,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var onChangeValue = function onChangeValue(event) {
+    var value = event.target.value;
+    var optgroup = (0, _find["default"])(optgroups, function (group) {
+      return (0, _some["default"])(group.options, ['value', value]);
+    });
     onChange(value, optgroup);
   };
-  const id = _.hooks.useUniqueId('group-select');
+  var id = _.hooks.useUniqueId('group-select');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
-    className: (0, _classnames.default)(className, 'components-select-control'),
+    className: (0, _classnames["default"])(className, 'components-select-control'),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "relative",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", _objectSpread(_objectSpread({
         id: id,
         className: "components-select-control__input",
         onChange: onChangeValue,
-        "aria-describedby": !!help ? `${id}__help` : undefined,
-        ...props,
+        "aria-describedby": !!help ? "".concat(id, "__help") : undefined
+      }, props), {}, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
           value: "",
           children: (0, _i18n.__)('-- Select --', 'newspack-plugin')
-        }), optgroups.map(({
-          label: optgroupLabel,
-          options
-        }, optgroupIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
-          label: optgroupLabel,
-          children: options.map((option, optionIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-            value: option.value,
-            disabled: option.disabled,
-            children: option.label
-          }, `${option.label}-${option.value}-${optionIndex}`))
-        }, optgroupIndex))]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), optgroups.map(function (_ref2, optgroupIndex) {
+          var optgroupLabel = _ref2.label,
+            options = _ref2.options;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
+            label: optgroupLabel,
+            children: options.map(function (option, optionIndex) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                value: option.value,
+                disabled: option.disabled,
+                children: option.label
+              }, "".concat(option.label, "-").concat(option.value, "-").concat(optionIndex));
+            })
+          }, optgroupIndex);
+        })]
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "components-select-control__arrow-wrapper",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
           icon: _icons.chevronDown,

package/dist/cjs/select-control/index.js

@@ -4,7 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -12,48 +19,53 @@ require("./style.scss");
 var _GroupedSelectControl = _interopRequireDefault(require("./GroupedSelectControl"));
 var _ButtonGroupControl = _interopRequireDefault(require("./ButtonGroupControl"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+var _excluded = ["className", "optgroups", "buttonOptions", "buttonSmall"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * Select Control
- */
-
-/**
+ *
+ * @deprecated For new features, use the core `SelectControl` (and `__experimentalToggleGroupControl` for
+ * grouped/button-style selections) from `@wordpress/components` instead of this wrapper. This component
+ * is kept only for existing usages and should not be used in new code.
+ */ /**
  * WordPress dependencies
- */
-
-/**
+ */ /**
  * External dependencies
- */
-
-/**
+ */ /**
  * Internal dependencies
  */
-
-class SelectControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      optgroups,
-      buttonOptions,
-      buttonSmall,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes,
-      children: optgroups ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSelectControl.default, {
-        optgroups: optgroups,
-        ...otherProps
-      }) : buttonOptions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupControl.default, {
-        buttonOptions: buttonOptions,
-        buttonSmall: buttonSmall,
-        ...otherProps
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
-        ...otherProps
-      })
-    });
+var SelectControl = /*#__PURE__*/function (_Component) {
+  function SelectControl() {
+    (0, _classCallCheck2["default"])(this, SelectControl);
+    return _callSuper(this, SelectControl, arguments);
   }
-}
-var _default = exports.default = SelectControl;
+  (0, _inherits2["default"])(SelectControl, _Component);
+  return (0, _createClass2["default"])(SelectControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        optgroups = _this$props.optgroups,
+        buttonOptions = _this$props.buttonOptions,
+        buttonSmall = _this$props.buttonSmall,
+        otherProps = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var classes = (0, _classnames["default"])('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes,
+        children: optgroups ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSelectControl["default"], _objectSpread({
+          optgroups: optgroups
+        }, otherProps)) : buttonOptions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupControl["default"], _objectSpread({
+          buttonOptions: buttonOptions,
+          buttonSmall: buttonSmall
+        }, otherProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, _objectSpread({}, otherProps))
+      });
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = SelectControl;

package/dist/cjs/settings/MinMaxSetting.js

@@ -1,60 +1,70 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _ = require("../");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["min", "max", "onChangeMin", "onChangeMax", "minPlaceholder", "maxPlaceholder"];
 /**
  * WordPress dependencies.
  */
-
 /**
  * Internal dependencies.
  */
-
-const MinMaxSetting = ({
-  min,
-  max,
-  onChangeMin,
-  onChangeMax,
-  minPlaceholder,
-  maxPlaceholder,
-  ...props
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    ...props,
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MinMaxSetting = function MinMaxSetting(_ref) {
+  var min = _ref.min,
+    max = _ref.max,
+    onChangeMin = _ref.onChangeMin,
+    onChangeMax = _ref.onChangeMax,
+    minPlaceholder = _ref.minPlaceholder,
+    maxPlaceholder = _ref.maxPlaceholder,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-settings__min-max",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: min > 0,
-        onChange: value => onChangeMin(value ? 1 : 0),
+        onChange: function onChange(value) {
+          return onChangeMin(value ? 1 : 0);
+        },
         label: (0, _i18n.__)('Min', 'newspack-plugin')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextControl, {
         "data-testid": "min",
         type: "number",
         value: min,
         placeholder: minPlaceholder,
-        onChange: value => onChangeMin(value > 0 ? value : 0)
+        onChange: function onChange(value) {
+          return onChangeMin(value > 0 ? value : 0);
+        }
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-settings__min-max",
       "data-testid": "max",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: max > 0,
-        onChange: value => onChangeMax(value ? min || 1 : 0),
+        onChange: function onChange(value) {
+          return onChangeMax(value ? min || 1 : 0);
+        },
         label: (0, _i18n.__)('Max', 'newspack-plugin')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextControl, {
         "data-testid": "max",
         type: "number",
         value: max,
         placeholder: maxPlaceholder,
-        onChange: value => onChangeMax(value > 0 ? value : 0)
+        onChange: function onChange(value) {
+          return onChangeMax(value > 0 ? value : 0);
+        }
       })]
     })]
-  });
+  }));
 };
-var _default = exports.default = MinMaxSetting;
+var _default = exports["default"] = MinMaxSetting;

package/dist/cjs/settings/SettingsCard.js

@@ -4,30 +4,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ = require("../");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "className", "columns", "gutter", "noBorder", "rowGap"];
 /**
  * External dependencies.
  */
-
 /**
  * Internal dependencies.
  */
-
-const SettingsCard = ({
-  children,
-  className,
-  columns = 3,
-  gutter = 32,
-  noBorder,
-  rowGap,
-  ...props
-}) => {
-  const classes = (0, _classnames.default)('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
-    ...props,
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SettingsCard = function SettingsCard(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 3 : _ref$columns,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 32 : _ref$gutter,
+    noBorder = _ref.noBorder,
+    rowGap = _ref.rowGap,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = (0, _classnames["default"])('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, _objectSpread(_objectSpread({}, props), {}, {
     className: classes,
     notificationLevel: "info",
     noBorder: noBorder,
@@ -37,6 +40,6 @@ const SettingsCard = ({
       rowGap: rowGap,
       children: children
     })
-  });
+  }));
 };
-var _default = exports.default = SettingsCard;
+var _default = exports["default"] = SettingsCard;