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

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

@@ -1,3 +1,8 @@
+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
@@ -7,7 +12,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuItem, ToggleControl } from '@wordpress/components';
+import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuGroup, MenuItem, ToggleControl } from '@wordpress/components';
 import { Icon, chevronDown, chevronRight, chevronUp, dragHandle, moreVertical } from '@wordpress/icons';
 
 /**
@@ -20,32 +25,43 @@ import './style-core.scss';
  */
 import classNames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CoreCard = ({
-  actions,
-  actionType,
-  as,
-  buttonsCard,
-  className,
-  footer,
-  header,
-  icon,
-  iconBackgroundColor,
-  isActive,
-  isDraggable,
-  isFirstTarget,
-  isLastTarget,
-  isNarrow,
-  isSmall,
-  dragIndex,
-  onDragCallback = () => {},
-  onHeaderClick,
-  noBorder,
-  noMargin,
-  children = null,
-  ...otherProps
-}) => {
-  const classes = classNames('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', 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', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin');
-  let sizeProps = isSmall ? 'small' : otherProps.size;
+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';
@@ -57,15 +73,19 @@ const CoreCard = ({
   if (noBorder) {
     otherProps.isBorderless = true;
   }
-  return /*#__PURE__*/_jsxs(CardWrapper, {
+  return /*#__PURE__*/_jsxs(CardWrapper, _objectSpread(_objectSpread({
     as: as,
-    className: classes,
-    ...otherProps,
+    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'),
+      className: classNames('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable', !hasHeaderBorder && 'newspack-card--core__header--no-border'),
+      style: headerStyle,
       size: sizeProps,
-      onClick: onHeaderClick,
+      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", {
@@ -77,13 +97,17 @@ const CoreCard = ({
           className: "newspack-card--core__header__draggable-controls__move-buttons",
           children: [/*#__PURE__*/_jsx(Button, {
             icon: chevronUp,
-            onClick: () => onDragCallback(dragIndex, dragIndex - 1),
+            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: () => onDragCallback(dragIndex, dragIndex + 1),
+            onClick: function onClick() {
+              return onDragCallback(dragIndex, dragIndex + 1);
+            },
             disabled: isLastTarget,
             label: __('Move one position down', 'newspack-plugin'),
             size: "small"
@@ -96,38 +120,76 @@ const CoreCard = ({
           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?.length > 0 && actionType === 'chevron' && /*#__PURE__*/_jsx(Icon, {
+      }), !(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?.length > 0 && actionType === 'toggle' && /*#__PURE__*/_jsx(ToggleControl, {
+      }), !(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: () => {}
-      }), actions?.length > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
+        onChange: onToggle
+      }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
         icon: moreVertical,
         label: __('More', 'newspack-plugin'),
-        children: () => actions.map((action, index) => /*#__PURE__*/_jsx(MenuItem, {
-          icon: action.icon,
-          onClick: action.action,
-          disabled: action.disabled || false,
-          isDestructive: action.destructive || false,
-          children: action.label
-        }, index))
+        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: "newspack-card--core__body",
+      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
  */
@@ -18,59 +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,
-      // Pass as `true` to render using WP Core's Card component: https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
-      __experimentalCoreCard,
-      // Pass props supported by WP Core's Card component in this single prop.
-      __experimentalCoreProps = {
-        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,
-        onDragCallback: () => {}
-      },
-      ...otherProps
-    } = this.props;
-    if (__experimentalCoreCard) {
-      const props = {
-        buttonsCard,
-        className,
-        isMedium,
-        isNarrow,
-        isSmall,
-        isWhite,
-        noBorder,
-        ...otherProps,
-        ...__experimentalCoreProps
-      };
-      return /*#__PURE__*/_jsx(CoreCard, {
-        ...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

@@ -3,26 +3,27 @@
  */
 
 @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: white;
+	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: 50%;
+		border-radius: wp-vars.$radius-round;
 		display: grid;
-		height: 48px;
+		height: wp-vars.$grid-unit-60;
 		place-items: center;
-		width: 48px;
+		width: wp-vars.$grid-unit-60;
 		svg {
 			fill: var(--wp-admin-theme-color);
-			height: 40px;
-			width: 40px;
+			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);
@@ -35,24 +36,37 @@
 		h4,
 		h5,
 		h6 {
-			font-size: 14px;
-			font-weight: 500;
+			font-size: wp-vars.$font-size-large;
 		}
-		.newspack-card--core__icon {
-			height: 40px;
-			width: 40px;
-			svg {
-				height: 24px;
-				width: 24px;
+		.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;
-		column-gap: 16px;
+		flex-wrap: wrap;
 		position: relative;
 		.newspack-card--core__action {
 			margin: 0;
@@ -68,22 +82,26 @@
 				word-wrap: normal !important;
 			}
 		}
-		.components-dropdown-menu {
+		> .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 {
-		.newspack-card--core__header-content {
-			padding-left: 65px;
-		}
+		padding-left: 80px !important;
 		.newspack-card--core__header__draggable-controls {
 			align-items: center;
 			border-right: 1px solid wp-colors.$gray-200;
@@ -110,6 +128,21 @@
 			}
 		}
 	}
+	// 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;
@@ -140,18 +173,25 @@
 		h6 {
 			align-items: center;
 			color: wp-colors.$gray-900;
-			font-weight: 500;
+			font-weight: 600;
 			display: flex;
 			gap: 8px;
+			a {
+				color: inherit;
+				text-decoration: none;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
 			.newspack-badge {
 				font-weight: 400;
 			}
 		}
 	}
-	&__is-active {
+	&__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;
-		button.newspack-card--core__header {
+		.newspack-card--core__header {
 			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
 			color: var(--wp-admin-theme-color);
 			h1,
@@ -168,7 +208,7 @@
 		}
 
 		&.newspack-card--core__has-children {
-			button.newspack-card--core__header {
+			.newspack-card--core__header {
 				border-bottom-left-radius: 0;
 				border-bottom-right-radius: 0;
 			}
@@ -203,14 +243,39 @@
 			}
 		}
 	}
+	&.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: 608px ) {
-			max-width: 576px;
+		@media screen and ( min-width: 615px ) {
+			max-width: 583px;
+		}
+	}
+	&__has-grey-header {
+		.newspack-card--core__header {
+			background-color: rgba(black, 0.025);
 		}
 	}
 	&__body {
@@ -223,5 +288,8 @@
 				padding: 0;
 			}
 		}
+		> .components-card__media {
+			border-radius: 0 !important;
+		}
 	}
 }

package/dist/esm/card/style.scss

@@ -52,8 +52,8 @@
 		margin-left: auto;
 		margin-right: auto;
 
-		@media screen and ( min-width: 608px ) {
-			max-width: 576px;
+		@media screen and ( min-width: 615px ) {
+			max-width: 583px;
 		}
 	}