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

package/dist/esm/button/index.js

@@ -1,3 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "loading", "onClick"];
+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) { _defineProperty(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 _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 /**
  * Button
  */
@@ -14,25 +23,36 @@ import { useState } from '@wordpress/element';
 import Router from '../proxied-imports/router';
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  useHistory
-} = Router;
-const Button = ({
-  href,
-  onClick,
-  ...otherProps
-}) => {
-  const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false);
+var useHistory = Router.useHistory;
+var Button = function Button(_ref) {
+  var href = _ref.href,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? undefined : _ref$loading,
+    onClick = _ref.onClick,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var history = useHistory();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAwaitingOnClick = _useState2[0],
+    setIsAwaitingOnClick = _useState2[1];
 
   // If both onClick and href are present, await the onClick action an then redirect.
   if (href && onClick) {
-    otherProps.onClick = async () => {
-      setIsAwaitingOnClick(true);
-      await onClick();
-      setIsAwaitingOnClick(false);
-      history.push((href || '').replace('#', ''));
-    };
+    otherProps.onClick = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            setIsAwaitingOnClick(true);
+            _context.n = 1;
+            return onClick();
+          case 1:
+            setIsAwaitingOnClick(false);
+            history.push((href || '').replace('#', ''));
+          case 2:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
   } else {
     otherProps.href = href;
     otherProps.onClick = onClick;
@@ -41,8 +61,8 @@ const Button = ({
     otherProps.disabled = true;
   }
   // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
-  return /*#__PURE__*/_jsx(BaseComponent, {
-    ...otherProps
-  });
+  return /*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+    loading: loading ? true : undefined
+  }, otherProps));
 };
 export default Button;

package/dist/esm/button-props/button-props.js

@@ -9,7 +9,7 @@ import isString from 'lodash/isString';
  * Creates button props based on an action
  */
 export default function buttonProps(action) {
-  const props = {};
+  var props = {};
   if (isFunction(action)) {
     props.onClick = action;
   }

package/dist/esm/card/core-card.js

@@ -0,0 +1,195 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actions", "actionType", "as", "buttonsCard", "className", "footer", "header", "headerAction", "headerStyle", "childrenStyle", "footerStyle", "disabled", "icon", "iconBackgroundColor", "isActive", "isDraggable", "isFirstTarget", "isLastTarget", "isNarrow", "isSmall", "dragIndex", "onDragCallback", "onToggle", "onHeaderClick", "noBorder", "noMargin", "children", "hasGreyHeader", "hasHeaderBorder"];
+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) { _defineProperty(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; }
+/**
+ * Card using WP Core's Card component.
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuGroup, MenuItem, ToggleControl } from '@wordpress/components';
+import { Icon, chevronDown, chevronRight, chevronUp, dragHandle, moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style-core.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CoreCard = function CoreCard(_ref) {
+  var actions = _ref.actions,
+    actionType = _ref.actionType,
+    as = _ref.as,
+    buttonsCard = _ref.buttonsCard,
+    className = _ref.className,
+    footer = _ref.footer,
+    header = _ref.header,
+    headerAction = _ref.headerAction,
+    headerStyle = _ref.headerStyle,
+    childrenStyle = _ref.childrenStyle,
+    footerStyle = _ref.footerStyle,
+    disabled = _ref.disabled,
+    icon = _ref.icon,
+    iconBackgroundColor = _ref.iconBackgroundColor,
+    isActive = _ref.isActive,
+    isDraggable = _ref.isDraggable,
+    isFirstTarget = _ref.isFirstTarget,
+    isLastTarget = _ref.isLastTarget,
+    isNarrow = _ref.isNarrow,
+    isSmall = _ref.isSmall,
+    dragIndex = _ref.dragIndex,
+    _ref$onDragCallback = _ref.onDragCallback,
+    onDragCallback = _ref$onDragCallback === void 0 ? function () {} : _ref$onDragCallback,
+    _ref$onToggle = _ref.onToggle,
+    onToggle = _ref$onToggle === void 0 ? function () {} : _ref$onToggle,
+    onHeaderClick = _ref.onHeaderClick,
+    noBorder = _ref.noBorder,
+    noMargin = _ref.noMargin,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    hasGreyHeader = _ref.hasGreyHeader,
+    _ref$hasHeaderBorder = _ref.hasHeaderBorder,
+    hasHeaderBorder = _ref$hasHeaderBorder === void 0 ? true : _ref$hasHeaderBorder,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && 'newspack-card--core__header--has-actions', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', icon && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', disabled && 'newspack-card--core__is-disabled', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin', hasGreyHeader && 'newspack-card--core__has-grey-header');
+  var sizeProps = isSmall ? 'small' : otherProps.size;
+  if (buttonsCard || as === 'a') {
+    if (!isSmall) {
+      sizeProps = 'large';
+    }
+    if (as !== 'a') {
+      otherProps.as = 'a'; // Render as an anchor tag.
+    }
+  }
+  if (noBorder) {
+    otherProps.isBorderless = true;
+  }
+  return /*#__PURE__*/_jsxs(CardWrapper, _objectSpread(_objectSpread({
+    as: as,
+    className: classes
+  }, otherProps), {}, {
+    children: [(header || icon) && /*#__PURE__*/_jsxs(CardHeader, {
+      as: onHeaderClick ? 'button' : undefined,
+      className: classNames('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable', !hasHeaderBorder && 'newspack-card--core__header--no-border'),
+      style: headerStyle,
+      size: sizeProps,
+      gap: 4,
+      onClick: disabled ? undefined : onHeaderClick,
+      disabled: onHeaderClick && disabled ? true : undefined,
+      "aria-disabled": onHeaderClick && disabled ? true : undefined,
+      children: [isDraggable && /*#__PURE__*/_jsxs("div", {
+        className: "newspack-card--core__header__draggable-controls",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "newspack-card--core__header__draggable-controls__drag-handle",
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: dragHandle
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "newspack-card--core__header__draggable-controls__move-buttons",
+          children: [/*#__PURE__*/_jsx(Button, {
+            icon: chevronUp,
+            onClick: function onClick() {
+              return onDragCallback(dragIndex, dragIndex - 1);
+            },
+            disabled: isFirstTarget,
+            label: __('Move one position up', 'newspack-plugin'),
+            size: "small"
+          }), /*#__PURE__*/_jsx(Button, {
+            icon: chevronDown,
+            onClick: function onClick() {
+              return onDragCallback(dragIndex, dragIndex + 1);
+            },
+            disabled: isLastTarget,
+            label: __('Move one position down', 'newspack-plugin'),
+            size: "small"
+          })]
+        })]
+      }), icon && /*#__PURE__*/_jsx("div", {
+        className: "newspack-card--core__icon",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: icon,
+          height: isSmall ? 24 : 48,
+          width: isSmall ? 24 : 48
+        })
+      }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/_jsx(ToggleControl, {
+        className: "newspack-card--core__action",
+        label: otherProps.title,
+        hideLabelFromVision: true,
+        checked: isActive,
+        onChange: onToggle
+      }), header && /*#__PURE__*/_jsx("div", {
+        className: "newspack-card--core__header-content",
+        children: header
+      }), !(actions !== null && actions !== void 0 && actions.length) > 0 && actionType === 'chevron' && /*#__PURE__*/_jsx(Icon, {
+        className: "newspack-card--core__action",
+        icon: chevronRight,
+        height: 24,
+        width: 24
+      }), !(actions !== null && actions !== void 0 && actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/_jsx(ToggleControl, {
+        className: "newspack-card--core__action",
+        label: otherProps.title,
+        hideLabelFromVision: true,
+        checked: isActive,
+        onChange: onToggle
+      }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
+        icon: moreVertical,
+        label: __('More', 'newspack-plugin'),
+        children: function children() {
+          return actions.map(function (action, index) {
+            // Actions can be an array of sub-actions, which are rendered within a MenuGroup.
+            if (Array.isArray(action)) {
+              return /*#__PURE__*/_jsx(MenuGroup, {
+                children: action.map(function (subAction, i) {
+                  return /*#__PURE__*/_jsx(MenuItem, {
+                    icon: subAction.icon,
+                    onClick: subAction.action,
+                    href: subAction.href,
+                    disabled: subAction.disabled || false,
+                    isDestructive: subAction.destructive || false,
+                    children: subAction.label
+                  }, i);
+                })
+              }, index);
+            }
+            return /*#__PURE__*/_jsx(MenuItem, {
+              icon: action.icon,
+              onClick: action.action,
+              href: action.href,
+              disabled: action.disabled || false,
+              isDestructive: action.destructive || false,
+              children: action.label
+            }, index);
+          });
+        }
+      }), headerAction && /*#__PURE__*/_jsx(Button, {
+        className: "newspack-card--core__header__action",
+        icon: headerAction.icon,
+        href: headerAction.href,
+        disabled: headerAction.disabled || false,
+        isDestructive: headerAction.destructive || false,
+        onClick: headerAction.onClick,
+        tone: headerAction.tone || 'primary',
+        variant: headerAction.variant || 'secondary',
+        children: headerAction.label
+      })]
+    }), children && /*#__PURE__*/_jsx("div", {
+      className: classNames('newspack-card--core__body', !hasHeaderBorder && 'newspack-card--core__body--no-header-border'),
+      style: childrenStyle,
+      children: children
+    }), footer && /*#__PURE__*/_jsx(CardFooter, {
+      size: sizeProps,
+      style: footerStyle,
+      children: footer
+    })]
+  }));
+};
+export default CoreCard;

package/dist/esm/card/index.js

@@ -1,3 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["buttonsCard", "className", "headerActions", "isNarrow", "isMedium", "isSmall", "isWhite", "noBorder", "__experimentalCoreCard", "__experimentalCoreProps"];
+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) { _defineProperty(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 = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 /**
  * Card
  */
@@ -10,6 +22,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import CoreCard from './core-card';
 import './style.scss';
 
 /**
@@ -17,27 +30,62 @@ import './style.scss';
  */
 import classNames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-class Card extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      buttonsCard,
-      className,
-      headerActions,
-      isNarrow,
-      isMedium,
-      isSmall,
-      isWhite,
-      noBorder,
-      ...otherProps
-    } = this.props;
-    const classes = classNames('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
-    return /*#__PURE__*/_jsx("div", {
-      className: classes,
-      ...otherProps
-    });
+var Card = /*#__PURE__*/function (_Component) {
+  function Card() {
+    _classCallCheck(this, Card);
+    return _callSuper(this, Card, arguments);
   }
-}
+  _inherits(Card, _Component);
+  return _createClass(Card, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        buttonsCard = _this$props.buttonsCard,
+        className = _this$props.className,
+        headerActions = _this$props.headerActions,
+        isNarrow = _this$props.isNarrow,
+        isMedium = _this$props.isMedium,
+        isSmall = _this$props.isSmall,
+        isWhite = _this$props.isWhite,
+        noBorder = _this$props.noBorder,
+        __experimentalCoreCard = _this$props.__experimentalCoreCard,
+        _this$props$__experim = _this$props.__experimentalCoreProps,
+        __experimentalCoreProps = _this$props$__experim === void 0 ? {
+          actionType: null,
+          // chevron | toggle | button | link | none
+          header: null,
+          // Pass a React component to render in a CardHeader component.
+          icon: null,
+          footer: null,
+          // Pass a React component to render in a CardFooter component.
+          noMargin: false,
+          isDraggable: false,
+          dragIndex: null,
+          hasGreyHeader: false,
+          onDragCallback: function onDragCallback() {}
+        } : _this$props$__experim,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      if (__experimentalCoreCard) {
+        var props = _objectSpread(_objectSpread({
+          buttonsCard: buttonsCard,
+          className: className,
+          isMedium: isMedium,
+          isNarrow: isNarrow,
+          isSmall: isSmall,
+          isWhite: isWhite,
+          noBorder: noBorder
+        }, otherProps), __experimentalCoreProps);
+        return /*#__PURE__*/_jsx(CoreCard, _objectSpread({}, props));
+      }
+      var classes = classNames('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
+      return /*#__PURE__*/_jsx("div", _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(Component);
 export default Card;

package/dist/esm/card/style-core.scss

@@ -0,0 +1,295 @@
+/**
+ * Card using WP Core component
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as colors;
+
+.newspack-card--core,
+.newspack-wizard .newspack-card--core {
+	background: wp-colors.$white;
+	position: relative;
+	transition: background-color 125ms ease-in-out, box-shadow 125ms ease-in-out, color 125ms ease-in-out;
+	svg {
+		transition: fill 125ms ease-in-out;
+	}
+	&__icon {
+		border-radius: wp-vars.$radius-round;
+		display: grid;
+		height: wp-vars.$grid-unit-60;
+		place-items: center;
+		width: wp-vars.$grid-unit-60;
+		svg {
+			fill: var(--wp-admin-theme-color);
+			height: wp-vars.$grid-unit-50;
+			width: wp-vars.$grid-unit-50;
+		}
+		.newspack-card--core__has-icon-background-color & {
+			background: var(--wp-admin-theme-color-lighter-10);
+		}
+	}
+	&__is-small {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-size: wp-vars.$font-size-large;
+		}
+		.newspack-card--core {
+			&__header-content {
+				* {
+					line-height: wp-vars.$font-line-height-small;
+				}
+			}
+			&__icon {
+				height: wp-vars.$grid-unit-50;
+				width: wp-vars.$grid-unit-50;
+				svg {
+					height: wp-vars.$grid-unit-30;
+					width: wp-vars.$grid-unit-30;
+				}
+			}
+		}
+	}
+	&__no-margin .components-card__body {
+		padding: 0 !important;
+	}
+	&__is-disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		.newspack-card--core__header {
+			pointer-events: none;
+		}
+	}
+	&__header {
+		color: wp-colors.$gray-700;
+		flex-wrap: wrap;
+		position: relative;
+		.newspack-card--core__action {
+			margin: 0;
+			label {
+				border: 0;
+				clip-path: inset(50%);
+				height: 1px;
+				margin: -1px;
+				overflow: hidden;
+				padding: 0;
+				position: absolute !important;
+				width: 1px;
+				word-wrap: normal !important;
+			}
+		}
+		> .components-dropdown-menu {
+			aspect-ratio: 1;
+			border-left: 1px solid wp-colors.$gray-200;
+			display: grid;
+			height: 100%;
+			max-width: 50px;
+			padding: 4px;
+			place-items: center;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+		&__action {
+			background-color: wp-colors.$white;
+			flex: 1 100%;
+			justify-content: center !important;
+		}
+	}
+	&__header--is-draggable {
+		padding-left: 80px !important;
+		.newspack-card--core__header__draggable-controls {
+			align-items: center;
+			border-right: 1px solid wp-colors.$gray-200;
+			display: flex;
+			height: 100%;
+			justify-content: space-between;
+			left: 0;
+			padding: 0 8px;
+			position: absolute;
+			top: 0;
+		}
+		.newspack-card--core__header__draggable-controls__drag-handle {
+			cursor: grab;
+			display: grid;
+			place-items: center;
+		}
+		.newspack-card--core__header__draggable-controls__move-buttons {
+			display: flex;
+			flex-direction: column;
+			.components-button.has-icon {
+				height: 16px;
+				padding: 0;
+				width: 100%;
+			}
+		}
+	}
+	// Two classes beat the single-class .components-card__header border-bottom
+	// rule from WP Core without needing !important.
+	&__header.newspack-card--core__header--no-border {
+		border-bottom: none;
+	}
+	&__body.newspack-card--core__body--no-header-border {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding-top: 0;
+		}
+	}
+	&__header--has-actions {
+		.newspack-card--core__header {
+			padding-right: 70px;
+		}
+	}
+	button.newspack-card--core__header {
+		appearance: none;
+		background-color: white;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+	}
+	&__header-content {
+		display: grid;
+		flex: 1;
+		grid-gap: 8px;
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			margin-bottom: 0;
+			margin-top: 0;
+			transition: color 125ms ease-in-out;
+		}
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			align-items: center;
+			color: wp-colors.$gray-900;
+			font-weight: 600;
+			display: flex;
+			gap: 8px;
+			a {
+				color: inherit;
+				text-decoration: none;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+			.newspack-badge {
+				font-weight: 400;
+			}
+		}
+	}
+	&__is-active:not(.newspack-card--core__is-draggable) {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+		.newspack-card--core__header {
+			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
+			color: var(--wp-admin-theme-color);
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: var(--wp-admin-theme-color);
+			}
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+
+		&.newspack-card--core__has-children {
+			.newspack-card--core__header {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+			.newspack-card--core__body {
+				border-top: 1px solid var(--wp-admin-theme-color);
+			}
+			.components-card__divider {
+				background: wp-colors.$gray-100;
+			}
+		}
+	}
+	&__buttons-card {
+		display: block;
+		text-decoration: none;
+		&:active,
+		&:hover {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+			.newspack-card--core__header {
+				color: var(--wp-admin-theme-color);
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6 {
+					color: var(--wp-admin-theme-color);
+				}
+				svg {
+					fill: var(--wp-admin-theme-color);
+				}
+			}
+		}
+	}
+	&.is-destructive {
+		.newspack-card--core__header {
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: wp-colors.$alert-red;
+			}
+			&:hover,
+			&:focus {
+				background-color: wp-colors.$gray-100;
+			}
+		}
+		.newspack-card--core__action,
+		.newspack-card--core__action svg {
+			fill: wp-colors.$alert-red;
+		}
+	}
+	hr.components-card__divider {
+		margin: 0;
+	}
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+		@media screen and ( min-width: 615px ) {
+			max-width: 583px;
+		}
+	}
+	&__has-grey-header {
+		.newspack-card--core__header {
+			background-color: rgba(black, 0.025);
+		}
+	}
+	&__body {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding: 16px 24px;
+			.newspack-card--core__is-small & {
+				padding: 16px;
+			}
+			.newspack-card--core__no-margin & {
+				padding: 0;
+			}
+		}
+		> .components-card__media {
+			border-radius: 0 !important;
+		}
+	}
+}