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

package/dist/cjs/button/index.js

@@ -4,43 +4,60 @@ 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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["href", "loading", "onClick"];
 /**
  * Button
  */
-
 /**
  * WordPress dependencies.
  */
-
 /**
  * Internal dependencies
  */
-
-const {
-  useHistory
-} = _router.default;
-const Button = ({
-  href,
-  onClick,
-  ...otherProps
-}) => {
-  const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false);
+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 _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); }
+var useHistory = _router["default"].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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var history = useHistory();
+  var _useState = (0, _element.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_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__*/(0, _asyncToGenerator2["default"])(/*#__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;
@@ -49,8 +66,8 @@ const Button = ({
     otherProps.disabled = true;
   }
   // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-    ...otherProps
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, _objectSpread({
+    loading: loading ? true : undefined
+  }, otherProps));
 };
-var _default = exports.default = Button;
+var _default = exports["default"] = Button;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = buttonProps;
+exports["default"] = buttonProps;
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _isObject = _interopRequireDefault(require("lodash/isObject"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
@@ -16,14 +16,14 @@ var _isString = _interopRequireDefault(require("lodash/isString"));
  * Creates button props based on an action
  */
 function buttonProps(action) {
-  const props = {};
-  if ((0, _isFunction.default)(action)) {
+  var props = {};
+  if ((0, _isFunction["default"])(action)) {
     props.onClick = action;
   }
-  if ((0, _isString.default)(action)) {
+  if ((0, _isString["default"])(action)) {
     props.href = action;
   }
-  if ((0, _isObject.default)(action)) {
+  if ((0, _isObject["default"])(action)) {
     if (action.handoff) {
       props.plugin = action.handoff;
       if (action.editLink) {

package/dist/cjs/button-props/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "buttonProps", {
   enumerable: true,
-  get: function () {
-    return _buttonProps.default;
+  get: function get() {
+    return _buttonProps["default"];
   }
 });
 var _buttonProps = _interopRequireDefault(require("./button-props"));

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

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _icons = require("@wordpress/icons");
+require("./style-core.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+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"];
+/**
+ * Card using WP Core's Card component.
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+ */
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+/**
+ * External dependencies
+ */
+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 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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = (0, _classnames["default"])('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__*/(0, _jsxRuntime.jsxs)(_components.Card, _objectSpread(_objectSpread({
+    as: as,
+    className: classes
+  }, otherProps), {}, {
+    children: [(header || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
+      as: onHeaderClick ? 'button' : undefined,
+      className: (0, _classnames["default"])('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__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-card--core__header__draggable-controls",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-card--core__header__draggable-controls__drag-handle",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+            icon: _icons.dragHandle
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-card--core__header__draggable-controls__move-buttons",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.chevronUp,
+            onClick: function onClick() {
+              return onDragCallback(dragIndex, dragIndex - 1);
+            },
+            disabled: isFirstTarget,
+            label: (0, _i18n.__)('Move one position up', 'newspack-plugin'),
+            size: "small"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.chevronDown,
+            onClick: function onClick() {
+              return onDragCallback(dragIndex, dragIndex + 1);
+            },
+            disabled: isLastTarget,
+            label: (0, _i18n.__)('Move one position down', 'newspack-plugin'),
+            size: "small"
+          })]
+        })]
+      }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-card--core__icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: icon,
+          height: isSmall ? 24 : 48,
+          width: isSmall ? 24 : 48
+        })
+      }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+        className: "newspack-card--core__action",
+        label: otherProps.title,
+        hideLabelFromVision: true,
+        checked: isActive,
+        onChange: onToggle
+      }), header && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-card--core__header-content",
+        children: header
+      }), !(actions !== null && actions !== void 0 && actions.length) > 0 && actionType === 'chevron' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+        className: "newspack-card--core__action",
+        icon: _icons.chevronRight,
+        height: 24,
+        width: 24
+      }), !(actions !== null && actions !== void 0 && actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+        icon: _icons.moreVertical,
+        label: (0, _i18n.__)('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__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
+                children: action.map(function (subAction, i) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+              icon: action.icon,
+              onClick: action.action,
+              href: action.href,
+              disabled: action.disabled || false,
+              isDestructive: action.destructive || false,
+              children: action.label
+            }, index);
+          });
+        }
+      }), headerAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('newspack-card--core__body', !hasHeaderBorder && 'newspack-card--core__body--no-header-border'),
+      style: childrenStyle,
+      children: children
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardFooter, {
+      size: sizeProps,
+      style: footerStyle,
+      children: footer
+    })]
+  }));
+};
+var _default = exports["default"] = CoreCard;

package/dist/cjs/card/index.js

@@ -4,48 +4,88 @@ 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 _element = require("@wordpress/element");
+var _coreCard = _interopRequireDefault(require("./core-card"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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) { (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; })(); } /**
  * Card
- */
-
-/**
+ */ /**
  * WordPress dependencies
- */
-
-/**
+ */ /**
  * Internal dependencies
- */
-
-/**
+ */ /**
  * External dependencies
  */
-
-class Card extends _element.Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      buttonsCard,
-      className,
-      headerActions,
-      isNarrow,
-      isMedium,
-      isSmall,
-      isWhite,
-      noBorder,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('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__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes,
-      ...otherProps
-    });
+var Card = /*#__PURE__*/function (_Component) {
+  function Card() {
+    (0, _classCallCheck2["default"])(this, Card);
+    return _callSuper(this, Card, arguments);
   }
-}
-var _default = exports.default = Card;
+  (0, _inherits2["default"])(Card, _Component);
+  return (0, _createClass2["default"])(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 = (0, _objectWithoutProperties2["default"])(_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__*/(0, _jsxRuntime.jsx)(_coreCard["default"], _objectSpread({}, props));
+      }
+      var classes = (0, _classnames["default"])('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__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = Card;