newspack-components 4.3.0 → 4.4.0-alpha.1

package/colors/colors.module.scss

@@ -4,11 +4,17 @@
  */
 
 @use "sass:color";
+@use "sass:math";
 
 @function to-rgb($color) {
 	@return color.channel($color, "red", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "blue", $space: rgb);
 }
 
+@function to-rgba($color) {
+	$alpha: math.div(math.round(color.channel($color, "alpha") * 100), 100);
+	@return rgba(color.channel($color, "red", $space: rgb), color.channel($color, "green", $space: rgb), color.channel($color, "blue", $space: rgb), $alpha);
+}
+
 // Primary: Hex
 $primary-000: #dfe7f4;
 $primary-050: #bfcfe9;
@@ -130,8 +136,8 @@ $neutral-300: #ddd;
 $neutral-400: #ccc;
 $neutral-500: #949494;
 $neutral-600: #6c6c6c;
-$neutral-700: #000000b3;
-$neutral-800: #3e3e3e;
+$neutral-700: #5d5d5d;
+$neutral-800: #393939;
 $neutral-900: #1e1e1e;
 $neutral-1000: #000;
 
@@ -149,6 +155,36 @@ $neutral-800--rgb: to-rgb($neutral-800);
 $neutral-900--rgb: to-rgb($neutral-900);
 $neutral-1000--rgb: to-rgb($neutral-1000);
 
+// Overlay: Hex
+// Stepped black scrim ramp, deliberately spanning 5%–95% alpha — never fully
+// transparent or fully opaque. For solid black, use $neutral-1000 instead.
+$overlay-000: #0000000d;
+$overlay-050: #0000001a;
+$overlay-100: #00000026;
+$overlay-200: #00000033;
+$overlay-300: #0000004d;
+$overlay-400: #00000066;
+$overlay-500: #00000080;
+$overlay-600: #00000099;
+$overlay-700: #000000b3;
+$overlay-800: #000000cc;
+$overlay-900: #000000e6;
+$overlay-1000: #000000f2;
+
+// Overlay: RGBA
+$overlay-000--rgba: to-rgba($overlay-000);
+$overlay-050--rgba: to-rgba($overlay-050);
+$overlay-100--rgba: to-rgba($overlay-100);
+$overlay-200--rgba: to-rgba($overlay-200);
+$overlay-300--rgba: to-rgba($overlay-300);
+$overlay-400--rgba: to-rgba($overlay-400);
+$overlay-500--rgba: to-rgba($overlay-500);
+$overlay-600--rgba: to-rgba($overlay-600);
+$overlay-700--rgba: to-rgba($overlay-700);
+$overlay-800--rgba: to-rgba($overlay-800);
+$overlay-900--rgba: to-rgba($overlay-900);
+$overlay-1000--rgba: to-rgba($overlay-1000);
+
 // Success: Hex
 $success-000: #edfaef;
 $success-050: #b8e6bf;
@@ -257,6 +293,20 @@ $warning-400--rgb: to-rgb($warning-400);
 	neutral-900: $neutral-900;
 	neutral-1000: $neutral-1000;
 
+	// Overlay
+	overlay-000: $overlay-000;
+	overlay-050: $overlay-050;
+	overlay-100: $overlay-100;
+	overlay-200: $overlay-200;
+	overlay-300: $overlay-300;
+	overlay-400: $overlay-400;
+	overlay-500: $overlay-500;
+	overlay-600: $overlay-600;
+	overlay-700: $overlay-700;
+	overlay-800: $overlay-800;
+	overlay-900: $overlay-900;
+	overlay-1000: $overlay-1000;
+
 	// Success
 	success-000: $success-000;
 	success-050: $success-050;

package/copy-styles.js

@@ -35,12 +35,13 @@ rcopy( inputDir, outputDirCommon, copyOptions )
 	.catch( err => {
 		console.error( err );
 	} );
-rcopy( path.join( dir, '../../src', 'shared' ), path.join( dir, 'shared' ) )
+rcopy( path.join( dir, '../../plugins/newspack-plugin/src', 'shared' ), path.join( dir, 'shared' ) )
 	.then( () => {
 		console.log( 'Copied shared lib' );
 	} )
 	.catch( err => {
-		console.error( err );
+		console.error( 'Failed to copy shared lib:', err );
+		process.exit( 1 );
 	} );
 rcopy( path.join( dir, '../colors' ), path.join( dir, 'colors' ), copyOptions )
 	.then( () => {

package/dist/cjs/accordion/index.js

@@ -4,15 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
 /**
  * WordPress dependencies
  */
@@ -25,17 +23,24 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-const Accordion = ({
-  children,
-  title
-}) => {
-  const [isOpen, setIsOpen] = (0, _element.useState)(false);
+var Accordion = function Accordion(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
+  var _useState = (0, _element.useState)(defaultOpen),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
-    className: (0, _classnames.default)('newspack-accordion', {
+    className: (0, _classnames["default"])('newspack-accordion', {
       'newspack-accordion--is-open': isOpen
     }),
+    open: isOpen,
+    onToggle: function onToggle(e) {
+      return setIsOpen(e.currentTarget.open);
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("summary", {
-      onClick: () => setIsOpen(!isOpen),
       children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
         className: "newspack-accordion__icon",
         icon: _icons.chevronRight,
@@ -47,4 +52,4 @@ const Accordion = ({
     })]
   });
 };
-var _default = exports.default = Accordion;
+var _default = exports["default"] = Accordion;

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

@@ -4,7 +4,9 @@ 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -14,110 +16,125 @@ var _actionCardD = require("./action-card.d.ts");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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; } /**
  * Action Card
- */
-
-/**
+ */ /**
  * WordPress dependencies
- */
-
-/**
+ */ /**
  * Internal dependencies
- */
-
-/**
+ */ /**
  * External dependencies
- */
-
-/**
+ */ /**
  * ActionCard component
  * @param {ActionCardProps} props Component props.
  * @return {JSX.Element} ActionCard component.
- */const ActionCard = ({
-  badge,
-  badgeLevel,
-  className,
-  checkbox,
-  children,
-  collapse,
-  disabled,
-  title,
-  heading = 2,
-  description,
-  handoff,
-  editLink,
-  href,
-  notification,
-  notificationLevel,
-  notificationHTML,
-  actionContent,
-  actionText,
-  secondaryActionText,
-  secondaryDestructive,
-  id,
-  image,
-  imageLink,
-  indent,
-  isSmall,
-  isMedium,
-  simple,
-  onClick,
-  onSecondaryActionClick,
-  isWaiting,
-  titleLink,
-  toggleChecked = false,
-  toggleOnChange,
-  togglePosition = 'leading',
-  hasGreyHeader,
-  hasWhiteHeader,
-  noBorder,
-  isPending,
-  expandable = false,
-  isExpanded,
-  isButtonEnabled = false,
-  // Draggable props. All are required to enable drag sorting.
-  draggable = false,
-  dragIndex,
-  dragWrapperRef,
-  onDragCallback
-}) => {
-  const [expanded, setExpanded] = (0, _element.useState)(Boolean(isExpanded));
-  const [dragging, setDragging] = (0, _element.useState)(false);
-  const [targetIndex, setTargetIndex] = (0, _element.useState)(null);
-  const [dragRef, setDragRef] = (0, _element.useState)(null);
-  (0, _element.useEffect)(() => {
+ */
+var ActionCard = function ActionCard(_ref) {
+  var badge = _ref.badge,
+    badgeLevel = _ref.badgeLevel,
+    className = _ref.className,
+    checkbox = _ref.checkbox,
+    children = _ref.children,
+    collapse = _ref.collapse,
+    disabled = _ref.disabled,
+    title = _ref.title,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 2 : _ref$heading,
+    description = _ref.description,
+    handoff = _ref.handoff,
+    handoffUrl = _ref.handoffUrl,
+    bannerText = _ref.bannerText,
+    bannerButtonText = _ref.bannerButtonText,
+    editLink = _ref.editLink,
+    href = _ref.href,
+    notification = _ref.notification,
+    notificationLevel = _ref.notificationLevel,
+    notificationHTML = _ref.notificationHTML,
+    actionContent = _ref.actionContent,
+    actionText = _ref.actionText,
+    secondaryActionText = _ref.secondaryActionText,
+    secondaryDestructive = _ref.secondaryDestructive,
+    id = _ref.id,
+    image = _ref.image,
+    imageLink = _ref.imageLink,
+    indent = _ref.indent,
+    isSmall = _ref.isSmall,
+    isMedium = _ref.isMedium,
+    simple = _ref.simple,
+    onClick = _ref.onClick,
+    onSecondaryActionClick = _ref.onSecondaryActionClick,
+    isWaiting = _ref.isWaiting,
+    titleLink = _ref.titleLink,
+    _ref$toggleChecked = _ref.toggleChecked,
+    toggleChecked = _ref$toggleChecked === void 0 ? false : _ref$toggleChecked,
+    toggleOnChange = _ref.toggleOnChange,
+    _ref$togglePosition = _ref.togglePosition,
+    togglePosition = _ref$togglePosition === void 0 ? 'leading' : _ref$togglePosition,
+    hasGreyHeader = _ref.hasGreyHeader,
+    hasWhiteHeader = _ref.hasWhiteHeader,
+    noBorder = _ref.noBorder,
+    isPending = _ref.isPending,
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? false : _ref$expandable,
+    isExpanded = _ref.isExpanded,
+    _ref$isButtonEnabled = _ref.isButtonEnabled,
+    isButtonEnabled = _ref$isButtonEnabled === void 0 ? false : _ref$isButtonEnabled,
+    _ref$draggable = _ref.draggable,
+    draggable = _ref$draggable === void 0 ? false : _ref$draggable,
+    dragIndex = _ref.dragIndex,
+    dragWrapperRef = _ref.dragWrapperRef,
+    onDragCallback = _ref.onDragCallback;
+  var _useState = (0, _element.useState)(Boolean(isExpanded)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = (0, _element.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    dragging = _useState4[0],
+    setDragging = _useState4[1];
+  var _useState5 = (0, _element.useState)(null),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    targetIndex = _useState6[0],
+    setTargetIndex = _useState6[1];
+  var _useState7 = (0, _element.useState)(null),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    dragRef = _useState8[0],
+    setDragRef = _useState8[1];
+  (0, _element.useEffect)(function () {
     if (typeof isExpanded === 'boolean') {
       setExpanded(isExpanded);
     }
   }, [isExpanded]);
-  (0, _element.useEffect)(() => {
+  (0, _element.useEffect)(function () {
     if (dragWrapperRef && !dragRef) {
       setDragRef(dragWrapperRef);
     }
-  }, [dragWrapperRef?.current]);
-  (0, _element.useEffect)(() => {
+  }, [dragWrapperRef === null || dragWrapperRef === void 0 ? void 0 : dragWrapperRef.current]);
+  (0, _element.useEffect)(function () {
     if (collapse && expanded) {
       setExpanded(false);
     }
   }, [collapse]);
-  const hasChildren = notification || children;
-  const classes = (0, _classnames.default)('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', draggable && 'is-draggable', actionContent && 'has-action-content', className);
-  const backgroundImageStyles = url => {
+  var hasChildren = notification || children;
+  var classes = (0, _classnames["default"])('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', draggable && 'is-draggable', actionContent && 'has-action-content', className);
+  var backgroundImageStyles = function backgroundImageStyles(url) {
     return url ? {
-      backgroundImage: `url(${url})`
+      backgroundImage: "url(".concat(url, ")")
     } : {};
   };
-  const titleProps = toggleOnChange && !titleLink && !disabled ? {
-    onClick: () => toggleOnChange(!toggleChecked),
+  var titleProps = toggleOnChange && !titleLink && !disabled ? {
+    onClick: function onClick() {
+      return toggleOnChange(!toggleChecked);
+    },
     tabIndex: '0'
   } : {};
-  const togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
-  const hasInternalLink = href && href.indexOf('http') !== 0;
-  const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-  const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-  const HeadingTag = `h${heading}`;
-  const cardContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  var togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
+  var hasInternalLink = href && href.indexOf('http') !== 0;
+  var isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
+  var badges = !Array.isArray(badge) && badge ? [badge] : badge;
+  var HeadingTag = "h".concat(heading);
+  var cardContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-action-card__region newspack-action-card__region-top",
       children: [toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
@@ -137,7 +154,7 @@ var _jsxRuntime = require("react/jsx-runtime");
       }), checkbox && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-action-card__region newspack-action-card__region-left",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: (0, _classnames.default)('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
+          className: (0, _classnames["default"])('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
           children: 'checked' === checkbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
             icon: _icons.check
           })
@@ -149,21 +166,25 @@ var _jsxRuntime = require("react/jsx-runtime");
           gutter: 8,
           noMargin: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingTag, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-              className: "newspack-action-card__title",
-              ...titleProps,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({
+              className: "newspack-action-card__title"
+            }, titleProps), {}, {
               children: [titleLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
                 href: titleLink,
                 children: title
               }), !titleLink && expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
                 isLink: true,
-                onClick: () => setExpanded(!expanded),
+                onClick: function onClick() {
+                  return setExpanded(!expanded);
+                },
                 children: title
               }), !titleLink && !expandable && title]
-            }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: `newspack-action-card__badge newspack-action-card__badge-level-${badgeLevel}`,
-              children: badgeText
-            }, `badge-${i}`))]
+            })), (badges === null || badges === void 0 ? void 0 : badges.length) && badges.map(function (badgeText, i) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "newspack-action-card__badge newspack-action-card__badge-level-".concat(badgeLevel),
+                children: badgeText
+              }, "badge-".concat(i));
+            })]
           }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
             children: [typeof description === 'string' && description, typeof description === 'function' && description()]
           })]
@@ -173,6 +194,15 @@ var _jsxRuntime = require("react/jsx-runtime");
         children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
           plugin: handoff,
           editLink: editLink,
+          bannerText: bannerText,
+          bannerButtonText: bannerButtonText,
+          compact: true,
+          isLink: true,
+          children: actionText
+        }) : handoffUrl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
+          url: handoffUrl,
+          bannerText: bannerText,
+          bannerButtonText: bannerButtonText,
           compact: true,
           isLink: true,
           children: actionText
@@ -200,7 +230,9 @@ var _jsxRuntime = require("react/jsx-runtime");
           children: secondaryActionText
         })]
       }), expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-        onClick: () => setExpanded(!expanded),
+        onClick: function onClick() {
+          return setExpanded(!expanded);
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
           icon: expanded ? _icons.chevronUp : _icons.chevronDown,
           height: 24,
@@ -230,12 +262,12 @@ var _jsxRuntime = require("react/jsx-runtime");
       children: children
     }) : null]
   });
-  if (draggable && dragRef?.current && typeof dragIndex === 'number' && onDragCallback && id) {
-    let wrapperRect = dragRef.current.getBoundingClientRect();
-    let draggableCards = Array.prototype.slice.call(dragRef.current.querySelectorAll('.newspack-action-card__draggable-wrapper'));
-    const isFirstTarget = dragIndex === 0;
-    const isLastTarget = dragIndex === draggableCards.length - 1;
-    const handleDragStart = () => {
+  if (draggable && dragRef !== null && dragRef !== void 0 && dragRef.current && typeof dragIndex === 'number' && onDragCallback && id) {
+    var wrapperRect = dragRef.current.getBoundingClientRect();
+    var draggableCards = Array.prototype.slice.call(dragRef.current.querySelectorAll('.newspack-action-card__draggable-wrapper'));
+    var isFirstTarget = dragIndex === 0;
+    var isLastTarget = dragIndex === draggableCards.length - 1;
+    var handleDragStart = function handleDragStart() {
       draggableCards = Array.prototype.slice.call(dragRef.current.querySelectorAll('.newspack-action-card__draggable-wrapper'));
       wrapperRect = dragRef.current.getBoundingClientRect();
       if (dragging) {
@@ -244,17 +276,17 @@ var _jsxRuntime = require("react/jsx-runtime");
       setTargetIndex(dragIndex);
       setDragging(true);
     };
-    const handleDragEnd = () => {
+    var handleDragEnd = function handleDragEnd() {
       if (targetIndex !== null && targetIndex !== dragIndex) {
         onDragCallback(targetIndex);
       }
       setTargetIndex(null);
       setDragging(false);
     };
-    const handleDragOver = e => {
-      const isDraggingToTop = e.pageY <= wrapperRect.top + window.scrollY;
-      const isDraggingToBottom = e.pageY >= wrapperRect.bottom + window.scrollY;
-      const target = e.target.closest('.newspack-action-card__draggable-wrapper');
+    var handleDragOver = function handleDragOver(e) {
+      var isDraggingToTop = e.pageY <= wrapperRect.top + window.scrollY;
+      var isDraggingToBottom = e.pageY >= wrapperRect.bottom + window.scrollY;
+      var target = e.target.closest('.newspack-action-card__draggable-wrapper');
       if (isDraggingToTop || isDraggingToBottom || target) {
         setTargetIndex(draggableCards.indexOf(target));
 
@@ -276,47 +308,52 @@ var _jsxRuntime = require("react/jsx-runtime");
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: 'newspack-action-card__draggable-wrapper' + (dragging ? ' is-dragging' : ''),
-      id: `draggable-card-${id}`,
+      id: "draggable-card-".concat(id),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Draggable, {
-        elementId: `draggable-card-${id}`,
+        elementId: "draggable-card-".concat(id),
         transferData: {},
         onDragStart: handleDragStart,
         onDragEnd: handleDragEnd,
         onDragOver: handleDragOver,
-        children: ({
-          onDraggableStart,
-          onDraggableEnd
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
-          className: classes,
-          onClick: simple && onClick,
-          id: id !== null && id !== void 0 ? id : null,
-          noBorder: noBorder,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-action-card__draggable-controls",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "drag-handle",
-              draggable: true,
-              onDragStart: onDraggableStart,
-              onDragEnd: onDraggableEnd,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-                icon: _icons.dragHandle
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "movers",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-                icon: _icons.chevronUp,
-                onClick: () => onDragCallback(dragIndex - 1),
-                disabled: isFirstTarget,
-                label: (0, _i18n.__)('Move one position up', 'newspack-plugin')
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-                icon: _icons.chevronDown,
-                onClick: () => onDragCallback(dragIndex + 1),
-                disabled: isLastTarget,
-                label: (0, _i18n.__)('Move one position down', 'newspack-plugin')
+        children: function children(_ref2) {
+          var onDraggableStart = _ref2.onDraggableStart,
+            onDraggableEnd = _ref2.onDraggableEnd;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
+            className: classes,
+            onClick: simple && onClick,
+            id: id !== null && id !== void 0 ? id : null,
+            noBorder: noBorder,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "newspack-action-card__draggable-controls",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "drag-handle",
+                draggable: true,
+                onDragStart: onDraggableStart,
+                onDragEnd: onDraggableEnd,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+                  icon: _icons.dragHandle
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "movers",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                  icon: _icons.chevronUp,
+                  onClick: function onClick() {
+                    return onDragCallback(dragIndex - 1);
+                  },
+                  disabled: isFirstTarget,
+                  label: (0, _i18n.__)('Move one position up', 'newspack-plugin')
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                  icon: _icons.chevronDown,
+                  onClick: function onClick() {
+                    return onDragCallback(dragIndex + 1);
+                  },
+                  disabled: isLastTarget,
+                  label: (0, _i18n.__)('Move one position down', 'newspack-plugin')
+                })]
               })]
-            })]
-          }), cardContent]
-        })
+            }), cardContent]
+          });
+        }
       })
     });
   }
@@ -328,4 +365,4 @@ var _jsxRuntime = require("react/jsx-runtime");
     children: cardContent
   });
 };
-var _default = exports.default = ActionCard;
+var _default = exports["default"] = ActionCard;