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

package/dist/cjs/settings/SettingsSection.js

@@ -3,31 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _ = require("../");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies.
  */
 
-const SettingSection = ({
-  title,
-  description,
-  children
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
-  columns: 1,
-  gutter: 8,
-  className: "newspack-settings__section",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "newspack-settings__section__title",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: title
-    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InfoButton, {
-      text: description
+var SettingSection = function SettingSection(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
+    columns: 1,
+    gutter: 8,
+    className: "newspack-settings__section",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-settings__section__title",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: title
+      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InfoButton, {
+        text: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-settings__section__content",
+      children: children
     })]
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "newspack-settings__section__content",
-    children: children
-  })]
-});
-var _default = exports.default = SettingSection;
+  });
+};
+var _default = exports["default"] = SettingSection;

package/dist/cjs/settings/index.js

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _SettingsCard = _interopRequireDefault(require("./SettingsCard"));
 var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
 var _MinMaxSetting = _interopRequireDefault(require("./MinMaxSetting"));
 require("./style.scss");
-var _default = exports.default = {
-  SettingsCard: _SettingsCard.default,
-  SettingsSection: _SettingsSection.default,
-  MinMaxSetting: _MinMaxSetting.default
+var _default = exports["default"] = {
+  SettingsCard: _SettingsCard["default"],
+  SettingsSection: _SettingsSection["default"],
+  MinMaxSetting: _MinMaxSetting["default"]
 };

package/dist/cjs/sortable-newsletter-list-control/index.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = SortableNewsletterListControl;
+exports["default"] = SortableNewsletterListControl;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
@@ -20,11 +21,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-function SortableNewsletterListControl({
-  lists,
-  selected = [],
-  onChange = () => {}
-}) {
+function SortableNewsletterListControl(_ref) {
+  var lists = _ref.lists,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? [] : _ref$selected,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
   if (!Array.isArray(lists) && lists.errors) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
       status: "error",
@@ -32,44 +34,57 @@ function SortableNewsletterListControl({
       children: Object.values(lists.errors).join(', ')
     });
   }
-  const getList = id => lists.find(list => list.id === id);
-  const getAvailableLists = () => {
-    return lists.filter(list => list.active && !selected.find(({
-      id
-    }) => id === list.id));
+  var getList = function getList(id) {
+    return lists.find(function (list) {
+      return list.id === id;
+    });
+  };
+  var getAvailableLists = function getAvailableLists() {
+    return lists.filter(function (list) {
+      return list.active && !selected.find(function (_ref2) {
+        var id = _ref2.id;
+        return id === list.id;
+      });
+    });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "newspack__newsletter-list-control",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack__newsletter-list-control__selected",
-      children: selected.map(selectedList => {
-        const list = getList(selectedList.id);
+      children: selected.map(function (selectedList) {
+        var list = getList(selectedList.id);
         if (!list) {
           return null;
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionCard.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionCard["default"], {
           title: list.name,
-          description: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-              label: (0, _i18n.__)('Checked by default', 'newspack-plugin'),
-              checked: selectedList.checked,
-              onChange: () => {
-                const index = selected.findIndex(({
-                  id
-                }) => id === selectedList.id);
-                const newSelected = [...selected];
-                newSelected[index].checked = !newSelected[index].checked;
-                onChange(newSelected);
-              }
-            })
-          }),
+          description: function description() {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+                label: (0, _i18n.__)('Checked by default', 'newspack-plugin'),
+                checked: selectedList.checked,
+                onChange: function onChange() {
+                  var index = selected.findIndex(function (_ref3) {
+                    var id = _ref3.id;
+                    return id === selectedList.id;
+                  });
+                  var newSelected = (0, _toConsumableArray2["default"])(selected);
+                  newSelected[index].checked = !newSelected[index].checked;
+                  _onChange(newSelected);
+                }
+              })
+            });
+          },
           isSmall: true,
           hasWhiteHeader: true,
           actionText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-              onClick: () => onChange(selected.filter(({
-                id
-              }) => id !== selectedList.id)),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+              onClick: function onClick() {
+                return _onChange(selected.filter(function (_ref4) {
+                  var id = _ref4.id;
+                  return id !== selectedList.id;
+                }));
+              },
               label: (0, _i18n.__)('Remove', 'newspack-plugin'),
               icon: _icons.trash,
               isDestructive: true
@@ -78,43 +93,47 @@ function SortableNewsletterListControl({
           children: selected.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "newspack__newsletter-list-control__sort-handle",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              onClick: () => {
-                const index = selected.findIndex(({
-                  id
-                }) => id === selectedList.id);
+              onClick: function onClick() {
+                var index = selected.findIndex(function (_ref5) {
+                  var id = _ref5.id;
+                  return id === selectedList.id;
+                });
                 if (index === 0) {
                   return;
                 }
-                const newSelected = [...selected];
+                var newSelected = (0, _toConsumableArray2["default"])(selected);
                 newSelected.splice(index, 1);
                 newSelected.splice(index - 1, 0, selectedList);
-                onChange(newSelected);
+                _onChange(newSelected);
               },
-              className: selected.findIndex(({
-                id
-              }) => id === selectedList.id) === 0 ? 'disabled' : '',
+              className: selected.findIndex(function (_ref6) {
+                var id = _ref6.id;
+                return id === selectedList.id;
+              }) === 0 ? 'disabled' : '',
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
                 icon: _icons.chevronUp
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              onClick: () => {
-                const index = selected.findIndex(({
-                  id
-                }) => id === selectedList.id);
-                const newSelected = [...selected];
+              onClick: function onClick() {
+                var index = selected.findIndex(function (_ref7) {
+                  var id = _ref7.id;
+                  return id === selectedList.id;
+                });
+                var newSelected = (0, _toConsumableArray2["default"])(selected);
                 newSelected.splice(index, 1);
                 newSelected.splice(index + 1, 0, selectedList);
-                onChange(newSelected);
+                _onChange(newSelected);
               },
-              className: selected.findIndex(({
-                id
-              }) => id === selectedList.id) === selected.length - 1 ? 'disabled' : '',
+              className: selected.findIndex(function (_ref8) {
+                var id = _ref8.id;
+                return id === selectedList.id;
+              }) === selected.length - 1 ? 'disabled' : '',
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
                 icon: _icons.chevronDown
               })
             })]
           })
-        }, `selected-${selectedList.id}`);
+        }, "selected-".concat(selectedList.id));
       })
     }), getAvailableLists().length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
       className: "newspack__newsletter-list-control__lists",
@@ -122,13 +141,15 @@ function SortableNewsletterListControl({
         children: (0, _i18n.__)('Add more lists:', 'newspack-plugin')
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
         children: (0, _i18n.__)('Select lists:', 'newspack-plugin')
-      }), ' ', getAvailableLists().map(list => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      }), ' ', getAvailableLists().map(function (list) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
           variant: "secondary",
-          onClick: () => onChange([...selected, {
-            id: list.id,
-            checked: true
-          }]),
+          onClick: function onClick() {
+            return _onChange([].concat((0, _toConsumableArray2["default"])(selected), [{
+              id: list.id,
+              checked: true
+            }]));
+          },
           children: list.name
         }, list.id);
       })]

package/dist/cjs/steps-list/index.js

@@ -4,48 +4,58 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+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 _element = require("@wordpress/element");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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; })(); } /**
  * Steps List
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
  */
-
-class StepsList extends _element.Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      stepsListItems,
-      narrowList,
-      style = {}
-    } = this.props;
-    const classes = (0, _classnames.default)('steps-list', className, narrowList && 'steps-list__narrow-list');
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes,
-      style: style,
-      children: stepsListItems.map((listItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.StepsListItem, {
-        listItemCount: index + 1,
-        listItemText: listItem
-      }, index))
-    });
+var StepsList = /*#__PURE__*/function (_Component) {
+  function StepsList() {
+    (0, _classCallCheck2["default"])(this, StepsList);
+    return _callSuper(this, StepsList, arguments);
   }
-}
-var _default = exports.default = StepsList;
+  (0, _inherits2["default"])(StepsList, _Component);
+  return (0, _createClass2["default"])(StepsList, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        stepsListItems = _this$props.stepsListItems,
+        narrowList = _this$props.narrowList,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style;
+      var classes = (0, _classnames["default"])('steps-list', className, narrowList && 'steps-list__narrow-list');
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes,
+        style: style,
+        children: stepsListItems.map(function (listItem, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.StepsListItem, {
+            listItemCount: index + 1,
+            listItemText: listItem
+          }, index);
+        })
+      });
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = StepsList;

package/dist/cjs/steps-list-item/index.js

@@ -4,52 +4,60 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+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 _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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; })(); } /**
  * Steps List Item
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
  */
-
-class StepsListItem extends _element.Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      listItemCount,
-      listItemText,
-      style = {}
-    } = this.props;
-    const classes = (0, _classnames.default)('steps-list-item', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: classes,
-      style: style,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "steps-list-item__number",
-        children: listItemCount
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "steps-list-item__content",
-        dangerouslySetInnerHTML: {
-          __html: listItemText
-        }
-      })]
-    });
+var StepsListItem = /*#__PURE__*/function (_Component) {
+  function StepsListItem() {
+    (0, _classCallCheck2["default"])(this, StepsListItem);
+    return _callSuper(this, StepsListItem, arguments);
   }
-}
-var _default = exports.default = StepsListItem;
+  (0, _inherits2["default"])(StepsListItem, _Component);
+  return (0, _createClass2["default"])(StepsListItem, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        listItemCount = _this$props.listItemCount,
+        listItemText = _this$props.listItemText,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style;
+      var classes = (0, _classnames["default"])('steps-list-item', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes,
+        style: style,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "steps-list-item__number",
+          children: listItemCount
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "steps-list-item__content",
+          dangerouslySetInnerHTML: {
+            __html: listItemText
+          }
+        })]
+      });
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = StepsListItem;

package/dist/cjs/style-card/index.js

@@ -4,7 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+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 _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
@@ -12,72 +17,74 @@ var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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; })(); } /**
  * Style Card
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies
- */
-
-/**
+ */ /**
  * External dependencies
  */
-
-class StyleCard extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      ariaLabel,
-      className,
-      cardTitle,
-      url,
-      image,
-      imageType,
-      isActive,
-      onClick,
-      id
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-style-card', isActive && 'newspack-style-card__is-active', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: classes,
-      id: id,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "newspack-style-card__image",
-        children: [imageType === 'html' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "newspack-style-card__image-html",
-          dangerouslySetInnerHTML: image
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: image,
-          alt: cardTitle + ' ' + (0, _i18n.__)('Thumbnail', 'newspack-plugin')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "newspack-style-card__actions",
-          children: [isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "newspack-style-card__actions__badge",
-            children: (0, _i18n.__)('Selected', 'newspack-plugin')
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            variant: "link",
-            onClick: onClick,
-            "aria-label": ariaLabel ? ariaLabel : (0, _i18n.__)('Select', 'newspack-plugin') + ' ' + cardTitle,
-            tabIndex: "0",
-            children: (0, _i18n.__)('Select', 'newspack-plugin')
-          }), url && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.WebPreview, {
-            url: url,
-            label: (0, _i18n.__)('View Demo', 'newspack-plugin'),
-            variant: "link"
+var StyleCard = /*#__PURE__*/function (_Component) {
+  function StyleCard() {
+    (0, _classCallCheck2["default"])(this, StyleCard);
+    return _callSuper(this, StyleCard, arguments);
+  }
+  (0, _inherits2["default"])(StyleCard, _Component);
+  return (0, _createClass2["default"])(StyleCard, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        ariaLabel = _this$props.ariaLabel,
+        className = _this$props.className,
+        cardTitle = _this$props.cardTitle,
+        url = _this$props.url,
+        image = _this$props.image,
+        imageType = _this$props.imageType,
+        isActive = _this$props.isActive,
+        onClick = _this$props.onClick,
+        id = _this$props.id;
+      var classes = (0, _classnames["default"])('newspack-style-card', isActive && 'newspack-style-card__is-active', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes,
+        id: id,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-style-card__image",
+          children: [imageType === 'html' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-style-card__image-html",
+            dangerouslySetInnerHTML: image
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: image,
+            alt: cardTitle + ' ' + (0, _i18n.__)('Thumbnail', 'newspack-plugin')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-style-card__actions",
+            children: [isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "newspack-style-card__actions__badge",
+              children: (0, _i18n.__)('Selected', 'newspack-plugin')
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              variant: "link",
+              onClick: onClick,
+              "aria-label": ariaLabel ? ariaLabel : (0, _i18n.__)('Select', 'newspack-plugin') + ' ' + cardTitle,
+              tabIndex: "0",
+              children: (0, _i18n.__)('Select', 'newspack-plugin')
+            }), url && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.WebPreview, {
+              url: url,
+              label: (0, _i18n.__)('View Demo', 'newspack-plugin'),
+              variant: "link"
+            })]
           })]
+        }), cardTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-style-card__title",
+          children: cardTitle
         })]
-      }), cardTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "newspack-style-card__title",
-        children: cardTitle
-      })]
-    });
-  }
-}
-var _default = exports.default = StyleCard;
+      });
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = StyleCard;

package/dist/cjs/style.scss

@@ -9,6 +9,8 @@
 	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
 	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 }
 
 // Buttons Card