@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Card/Card.d.ts

@@ -1,25 +1,29 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-type ActionIcon = {
+interface Metadata {
     id?: string;
     icon?: () => ReactNode;
-    onKeydown?: () => void;
-    onClick?: () => void;
     iconDescription?: string;
-    href?: string;
+}
+type LinkType = {
+    href: string;
+} & {
+    [key: string]: unknown;
 };
+export interface ActionIcon extends Metadata {
+    onKeydown?: (event: KeyboardEvent) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /**
+     * @deprecated please use the `link.href` instead
+     */
+    href?: string;
+    link?: LinkType;
+}
 type OverflowActions = {
     id?: string;
     itemText?: string;
     onClick?: () => void;
     onKeydown?: () => void;
 };
-type Metadata = {
-    id?: string;
-    icon?: () => ReactNode;
-    iconDescription?: string;
-    onClick?: () => void;
-    href?: string;
-};
 interface CardProp extends PropsWithChildren {
     actionIcons?: readonly ActionIcon[];
     actionsPlacement?: 'top' | 'bottom';

package/es/components/Card/Card.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
-import { Layer, unstable_FeatureFlags, OverflowMenu, MenuItem, Button, IconButton } from '@carbon/react';
+import { Section, Layer, unstable_FeatureFlags, OverflowMenu, MenuItem, Button, IconButton } from '@carbon/react';
 import { Incomplete, CheckmarkOutline } from '@carbon/react/icons';
 import PropTypes from '../../_virtual/index.js';
 import { CardHeader } from './CardHeader.js';
@@ -16,87 +16,73 @@ import { CardFooter } from './CardFooter.js';
 import { pkg } from '../../settings.js';
 
 var _Incomplete, _CheckmarkOutline;
-var _excluded = ["actionIcons", "actionsPlacement", "decorator", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "onSecondaryButtonClick", "overflowActions", "overflowAriaLabel", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
-  _excluded2 = ["id", "itemText"],
-  _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
-var componentName = 'Card';
-var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$actionIcons = _ref.actionIcons,
-    actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
-    _ref$actionsPlacement = _ref.actionsPlacement,
-    actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
-    decorator = _ref.decorator,
-    _ref$metadata = _ref.metadata,
-    metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$clickZone = _ref.clickZone,
-    clickZone = _ref$clickZone === void 0 ? 'one' : _ref$clickZone,
-    description = _ref.description,
-    disabled = _ref.disabled,
-    footerActionIcon = _ref.footerActionIcon,
-    getStarted = _ref.getStarted,
-    label = _ref.label,
-    media = _ref.media,
-    _ref$mediaPosition = _ref.mediaPosition,
-    mediaPosition = _ref$mediaPosition === void 0 ? 'top' : _ref$mediaPosition,
-    onClick = _ref.onClick,
-    onKeyDown = _ref.onKeyDown,
-    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-    _ref$overflowActions = _ref.overflowActions,
-    overflowActions = _ref$overflowActions === void 0 ? Object.freeze([]) : _ref$overflowActions,
-    overflowAriaLabel = _ref.overflowAriaLabel,
-    Pictogram = _ref.pictogram,
-    primaryButtonDisabled = _ref.primaryButtonDisabled,
-    primaryButtonHref = _ref.primaryButtonHref,
-    primaryButtonIcon = _ref.primaryButtonIcon,
-    _ref$primaryButtonKin = _ref.primaryButtonKind,
-    primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
-    _ref$primaryButtonPla = _ref.primaryButtonPlacement,
-    primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? 'bottom' : _ref$primaryButtonPla,
-    primaryButtonText = _ref.primaryButtonText,
-    _ref$productive = _ref.productive,
-    productive = _ref$productive === void 0 ? false : _ref$productive,
-    secondaryButtonDisabled = _ref.secondaryButtonDisabled,
-    secondaryButtonHref = _ref.secondaryButtonHref,
-    secondaryButtonIcon = _ref.secondaryButtonIcon,
-    _ref$secondaryButtonK = _ref.secondaryButtonKind,
-    secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
-    _ref$secondaryButtonP = _ref.secondaryButtonPlacement,
-    secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? 'bottom' : _ref$secondaryButtonP,
-    secondaryButtonText = _ref.secondaryButtonText,
-    slug = _ref.slug,
-    status = _ref.status,
-    sequence = _ref.sequence,
-    title = _ref.title,
-    _ref$titleSize = _ref.titleSize,
-    titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize,
-    _ref$iconDescription = _ref.iconDescription,
-    iconDescription = _ref$iconDescription === void 0 ? 'Options' : _ref$iconDescription,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var getIcons = function getIcons() {
-    return getStarted ? metadata : actionIcons;
-  };
-  var blockClass = "".concat(pkg.prefix, "--card");
-  var hasActions = getIcons().length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
-  var hasHeaderActions = hasActions && actionsPlacement === 'top';
-  var hasFooterActions = hasActions && actionsPlacement === 'bottom';
-  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
-  var hasBottomBar = hasFooterActions || hasFooterButton;
-  var hasClickEvent = !!onClick || !!onKeyDown;
-  var clickableProps = {
-    onClick: onClick,
-    onKeyDown: onKeyDown,
+const componentName = 'Card';
+const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    actionIcons = Object.freeze([]),
+    actionsPlacement = 'bottom',
+    decorator,
+    metadata = Object.freeze([]),
+    children,
+    className,
+    clickZone = 'one',
+    description,
+    disabled,
+    footerActionIcon,
+    getStarted,
+    label,
+    media,
+    mediaPosition = 'top',
+    onClick,
+    onKeyDown,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    overflowActions = Object.freeze([]),
+    overflowAriaLabel,
+    pictogram: Pictogram,
+    primaryButtonDisabled,
+    primaryButtonHref,
+    primaryButtonIcon,
+    primaryButtonKind = 'primary',
+    primaryButtonPlacement = 'bottom',
+    primaryButtonText,
+    productive = false,
+    secondaryButtonDisabled,
+    secondaryButtonHref,
+    secondaryButtonIcon,
+    secondaryButtonKind = 'secondary',
+    secondaryButtonPlacement = 'bottom',
+    secondaryButtonText,
+    slug,
+    status,
+    sequence,
+    title,
+    titleSize = 'default',
+    iconDescription = 'Options',
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const getIcons = () => getStarted ? metadata : actionIcons;
+  const blockClass = `${pkg.prefix}--card`;
+  const hasActions = getIcons().length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
+  const hasHeaderActions = hasActions && actionsPlacement === 'top';
+  const hasFooterActions = hasActions && actionsPlacement === 'bottom';
+  const hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
+  const hasBottomBar = hasFooterActions || hasFooterButton;
+  const hasClickEvent = !!onClick || !!onKeyDown;
+  const clickableProps = {
+    onClick,
+    onKeyDown,
     role: 'button',
     tabIndex: 0
   };
 
   // actions can either be an overflow menu or series of icons
-  var getActions = function getActions() {
+  const getActions = () => {
     if (overflowActions.length > 0) {
-      var pos = actionsPlacement === 'top' ? 'bottom-end' : 'top-end';
-      var size = actionsPlacement === 'top' ? 'sm' : 'md';
+      const pos = actionsPlacement === 'top' ? 'bottom-end' : 'top-end';
+      const size = actionsPlacement === 'top' ? 'sm' : 'md';
       return /*#__PURE__*/React__default.createElement(Layer, {
         level: 2
       }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
@@ -106,27 +92,38 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
         menuAlignment: pos,
         size: size,
         label: overflowAriaLabel || iconDescription
-      }, overflowActions.map(function (_ref2) {
-        var id = _ref2.id,
-          itemText = _ref2.itemText,
-          rest = _objectWithoutProperties(_ref2, _excluded2);
+      }, overflowActions.map(_ref2 => {
+        let {
+          id,
+          itemText,
+          ...rest
+        } = _ref2;
         return /*#__PURE__*/React__default.createElement(MenuItem, _extends({
           key: id,
-          label: itemText
+          label: itemText ?? ''
         }, rest));
       }))));
     }
-    var icons = getIcons().map(function (_ref3) {
-      var id = _ref3.id,
-        Icon = _ref3.icon,
-        onClick = _ref3.onClick,
-        iconDescription = _ref3.iconDescription,
-        href = _ref3.href,
-        rest = _objectWithoutProperties(_ref3, _excluded3);
+    const icons = getIcons().map(_ref3 => {
+      let {
+        id,
+        icon: Icon,
+        onClick,
+        iconDescription,
+        href: deprecatedHref,
+        link,
+        ...rest
+      } = _ref3;
+      const {
+        href,
+        ...linkProps
+      } = link ?? {
+        href: deprecatedHref
+      };
       if (getStarted) {
         return /*#__PURE__*/React__default.createElement("span", {
           key: id,
-          className: "".concat(blockClass, "__icon")
+          className: `${blockClass}__icon`
         }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
           "aria-label": iconDescription
         }), iconDescription);
@@ -141,22 +138,22 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           iconDescription: iconDescription,
           kind: "ghost",
           href: href
-        }));
+        }, linkProps));
       }
       if (href) {
-        return /*#__PURE__*/React__default.createElement("a", {
+        return /*#__PURE__*/React__default.createElement("a", _extends({
           key: id,
-          className: "".concat(blockClass, "__icon"),
+          className: `${blockClass}__icon`,
           href: href,
           onClick: onClick
-        }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+        }, linkProps), Icon && /*#__PURE__*/React__default.createElement(Icon, {
           "aria-label": iconDescription
         }));
       }
       return /*#__PURE__*/React__default.createElement(IconButton, {
         key: id,
         label: iconDescription,
-        className: "".concat(blockClass, "__icon"),
+        className: `${blockClass}__icon`,
         onClick: onClick,
         kind: "ghost",
         size: "sm"
@@ -166,98 +163,111 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
     return icons;
   };
-  var getCardProps = function getCardProps() {
-    var _decorator$type, _decorator$type2;
-    var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
-    var cardProps = _objectSpread2(_objectSpread2({}, rest), {}, {
-      ref: ref,
-      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), "".concat(blockClass, "--has-decorator"), !!decorator && ((_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) !== 'AILabel'), "".concat(blockClass, "--has-ai-label"), !!decorator && ((_decorator$type2 = decorator['type']) === null || _decorator$type2 === void 0 ? void 0 : _decorator$type2.displayName) === 'AILabel'), className)
-    }, clickable && clickableProps);
+  const getCardProps = () => {
+    const clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
+    const cardProps = {
+      ...rest,
+      ref,
+      className: cx(blockClass, {
+        [`${blockClass}__disabled`]: disabled,
+        [`${blockClass}__get-started`]: getStarted,
+        [`${blockClass}__productive`]: productive,
+        [`${blockClass}__clickable`]: clickable,
+        [`${blockClass}__media-left`]: mediaPosition === 'left',
+        [`${blockClass}--has-slug`]: !!slug,
+        [`${blockClass}--has-decorator`]: !!decorator && decorator['type']?.displayName !== 'AILabel',
+        [`${blockClass}--has-ai-label`]: !!decorator && decorator['type']?.displayName === 'AILabel'
+      }, className),
+      ...(clickable && clickableProps)
+    };
     return cardProps;
   };
 
   // the only reason this is necessary is for click zone 2
-  var getHeaderBodyProps = function getHeaderBodyProps() {
-    var clickable = hasClickEvent && clickZone === 'two';
-    var headerBodyProps = _objectSpread2({
-      className: cx("".concat(blockClass, "__header-body-container"), _defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
-    }, clickable && clickableProps);
+  const getHeaderBodyProps = () => {
+    const clickable = hasClickEvent && clickZone === 'two';
+    const headerBodyProps = {
+      className: cx(`${blockClass}__header-body-container`, {
+        [`${blockClass}__clickable`]: clickable
+      }),
+      ...(clickable && clickableProps)
+    };
     return headerBodyProps;
   };
-  var getHeaderProps = function getHeaderProps() {
-    return {
-      actions: actionsPlacement === 'top' ? getActions() : '',
-      decorator: decorator,
-      noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
-      actionsPlacement: actionsPlacement,
-      onPrimaryButtonClick: onPrimaryButtonClick,
-      onSecondaryButtonClick: onSecondaryButtonClick,
-      primaryButtonIcon: primaryButtonIcon,
-      primaryButtonPlacement: primaryButtonPlacement,
-      primaryButtonText: primaryButtonText,
-      primaryButtonDisabled: primaryButtonDisabled,
-      description: description,
-      hasActions: hasHeaderActions,
-      inClickableCard: hasClickEvent,
-      label: label,
-      secondaryButtonDisabled: secondaryButtonDisabled,
-      secondaryButtonHref: secondaryButtonHref,
-      secondaryButtonIcon: secondaryButtonIcon,
-      secondaryButtonPlacement: secondaryButtonPlacement,
-      secondaryButtonText: secondaryButtonText,
-      slug: slug,
-      title: title,
-      titleSize: titleSize
+  const getHeaderProps = () => ({
+    actions: actionsPlacement === 'top' ? getActions() : '',
+    decorator,
+    noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
+    actionsPlacement,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonIcon,
+    primaryButtonPlacement,
+    primaryButtonText,
+    primaryButtonDisabled,
+    description,
+    hasActions: hasHeaderActions,
+    inClickableCard: hasClickEvent,
+    label,
+    secondaryButtonDisabled,
+    secondaryButtonHref,
+    secondaryButtonIcon,
+    secondaryButtonPlacement,
+    secondaryButtonText,
+    slug,
+    title,
+    titleSize
+  });
+  const getBodyProps = () => {
+    const clickable = hasClickEvent && clickZone === 'three';
+    const bodyProps = {
+      className: cx(`${blockClass}__body`, {
+        [`${blockClass}__clickable`]: clickable
+      }),
+      ...(clickable && clickableProps)
     };
-  };
-  var getBodyProps = function getBodyProps() {
-    var clickable = hasClickEvent && clickZone === 'three';
-    var bodyProps = _objectSpread2({
-      className: cx("".concat(blockClass, "__body"), _defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
-    }, clickable && clickableProps);
     return bodyProps;
   };
-  var getFooterProps = function getFooterProps() {
-    return {
-      actions: actionsPlacement === 'bottom' ? getActions() : '',
-      actionsPlacement: actionsPlacement,
-      disabled: disabled,
-      footerActionIcon: footerActionIcon,
-      hasActions: hasFooterActions,
-      hasButton: hasFooterButton,
-      onPrimaryButtonClick: onPrimaryButtonClick,
-      onSecondaryButtonClick: onSecondaryButtonClick,
-      primaryButtonDisabled: primaryButtonDisabled,
-      primaryButtonHref: primaryButtonHref,
-      primaryButtonIcon: primaryButtonIcon,
-      primaryButtonKind: primaryButtonKind,
-      primaryButtonPlacement: primaryButtonPlacement,
-      primaryButtonText: primaryButtonText,
-      productive: productive,
-      secondaryButtonDisabled: secondaryButtonDisabled,
-      secondaryButtonHref: secondaryButtonHref,
-      secondaryButtonIcon: secondaryButtonIcon,
-      secondaryButtonKind: secondaryButtonKind,
-      secondaryButtonPlacement: secondaryButtonPlacement,
-      secondaryButtonText: secondaryButtonText
-    };
-  };
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  const getFooterProps = () => ({
+    actions: actionsPlacement === 'bottom' ? getActions() : '',
+    actionsPlacement,
+    disabled,
+    footerActionIcon,
+    hasActions: hasFooterActions,
+    hasButton: hasFooterButton,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonDisabled,
+    primaryButtonHref,
+    primaryButtonIcon,
+    primaryButtonKind,
+    primaryButtonPlacement,
+    primaryButtonText,
+    productive,
+    secondaryButtonDisabled,
+    secondaryButtonHref,
+    secondaryButtonIcon,
+    secondaryButtonKind,
+    secondaryButtonPlacement,
+    secondaryButtonText
+  });
+  return /*#__PURE__*/React__default.createElement(Section, _extends({
+    as: "div",
     "aria-disabled": disabled
   }, getCardProps()), !getStarted && media && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__media")
+    className: `${blockClass}__media`
   }, media), Pictogram && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__pictogram")
+    className: `${blockClass}__pictogram`
   }, /*#__PURE__*/React__default.createElement(Pictogram, null)), getStarted && sequence && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__sequence")
+    className: `${blockClass}__sequence`
   }, sequence), getStarted && status && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__status")
+    className: `${blockClass}__status`
   }, status === 'incomplete' && (_Incomplete || (_Incomplete = /*#__PURE__*/React__default.createElement(Incomplete, null))), status === 'complete' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default.createElement(CheckmarkOutline, null)))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content-container")
+    className: `${blockClass}__content-container`
   }, /*#__PURE__*/React__default.createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__header-wrapper")
+    className: `${blockClass}__header-wrapper`
   }, /*#__PURE__*/React__default.createElement(CardHeader, getHeaderProps()), /*#__PURE__*/React__default.createElement("div", getBodyProps(), children)), getStarted && media && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__media")
+    className: `${blockClass}__media`
   }, media)), hasBottomBar && /*#__PURE__*/React__default.createElement(CardFooter, getFooterProps())));
 });
 Card.propTypes = {
@@ -268,7 +278,13 @@ Card.propTypes = {
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
     iconDescription: PropTypes.string,
-    href: PropTypes.string
+    /**
+     * @deprecated please use the `link.href` instead
+     */
+    href: PropTypes.string,
+    link: PropTypes.shape({
+      href: PropTypes.string.isRequired
+    })
   })),
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
   children: PropTypes.node,

package/es/components/Card/CardFooter.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import { Button } from '@carbon/react';
@@ -14,38 +13,38 @@ import { pkg } from '../../settings.js';
 import { Error } from '@carbon/react/icons';
 
 var _Error;
-var componentName = 'CardFooter';
-var defaults = {
+const componentName = 'CardFooter';
+const defaults = {
   actions: Object.freeze([]),
   productive: false};
-var CardFooter = function CardFooter(_ref) {
-  var _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
-    disabled = _ref.disabled,
-    FooterActionIcon = _ref.footerActionIcon,
-    hasActions = _ref.hasActions,
-    hasButton = _ref.hasButton,
-    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-    primaryButtonDisabled = _ref.primaryButtonDisabled,
-    primaryButtonHref = _ref.primaryButtonHref,
-    primaryButtonIcon = _ref.primaryButtonIcon,
-    _ref$primaryButtonKin = _ref.primaryButtonKind,
-    primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
-    primaryButtonPlacement = _ref.primaryButtonPlacement,
-    primaryButtonText = _ref.primaryButtonText,
-    _ref$productive = _ref.productive,
-    productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
-    secondaryButtonDisabled = _ref.secondaryButtonDisabled,
-    secondaryButtonHref = _ref.secondaryButtonHref,
-    secondaryButtonIcon = _ref.secondaryButtonIcon,
-    _ref$secondaryButtonK = _ref.secondaryButtonKind,
-    secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
-    secondaryButtonPlacement = _ref.secondaryButtonPlacement,
-    secondaryButtonText = _ref.secondaryButtonText;
-  var blockClass = "".concat(pkg.prefix, "--card");
-  var footerClass = "".concat(pkg.prefix, "--card__footer");
-  var footerClasses = cx(footerClass, _defineProperty({}, "".concat(footerClass, "-no-button"), !hasButton));
+const CardFooter = _ref => {
+  let {
+    actions = defaults.actions,
+    disabled,
+    footerActionIcon: FooterActionIcon,
+    hasActions,
+    hasButton,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonDisabled,
+    primaryButtonHref,
+    primaryButtonIcon,
+    primaryButtonKind = 'primary',
+    primaryButtonPlacement,
+    primaryButtonText,
+    productive = defaults.productive,
+    secondaryButtonDisabled,
+    secondaryButtonHref,
+    secondaryButtonIcon,
+    secondaryButtonKind = 'secondary',
+    secondaryButtonPlacement,
+    secondaryButtonText
+  } = _ref;
+  const blockClass = `${pkg.prefix}--card`;
+  const footerClass = `${pkg.prefix}--card__footer`;
+  const footerClasses = cx(footerClass, {
+    [`${footerClass}-no-button`]: !hasButton
+  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: footerClasses
   }, secondaryButtonText && secondaryButtonPlacement === 'bottom' && /*#__PURE__*/React__default.createElement(Button, {
@@ -63,9 +62,9 @@ var CardFooter = function CardFooter(_ref) {
     href: primaryButtonHref,
     disabled: primaryButtonDisabled
   }, primaryButtonText), hasActions && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__actions")
+    className: `${blockClass}__actions`
   }, actions), FooterActionIcon && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__action-icon")
+    className: `${blockClass}__action-icon`
   }, disabled ? _Error || (_Error = /*#__PURE__*/React__default.createElement(Error, {
     size: 16
   })) : /*#__PURE__*/React__default.createElement(FooterActionIcon, null)));