@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -1,79 +1,59 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ButtonSetWithOverflow = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactResizeDetector = require("react-resize-detector");
-
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _react2 = require("@carbon/react");
-
 var _ButtonMenu = require("../ButtonMenu");
-
 var _settings = require("../../settings");
-
 var _propsHelper = require("../../global/js/utils/props-helper");
-
 var _excluded = ["buttons"],
-    _excluded2 = ["label", "key", "kind"],
-    _excluded3 = ["buttons"],
-    _excluded4 = ["label", "key", "kind"];
-
+  _excluded2 = ["label", "key", "kind"],
+  _excluded3 = ["buttons"],
+  _excluded4 = ["label", "key", "kind"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } //
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 var blockClass = "".concat(_settings.pkg.prefix, "--button-set-with-overflow");
 var componentName = 'ButtonSetWithOverflow';
 var buttonSize = 'md';
-
 var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var buttons = _ref.buttons,
-      className = _ref.className,
-      onWidthChange = _ref.onWidthChange,
-      buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
-      menuOptionsClass = _ref.menuOptionsClass,
-      rightAlign = _ref.rightAlign;
+    className = _ref.className,
+    onWidthChange = _ref.onWidthChange,
+    buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
+    menuOptionsClass = _ref.menuOptionsClass,
+    rightAlign = _ref.rightAlign;
   var carbonPrefix = (0, _react2.usePrefix)();
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      showAsOverflow = _useState2[0],
-      setShowAsOverflow = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showAsOverflow = _useState2[0],
+    setShowAsOverflow = _useState2[1];
   var spaceAvailableRef = (0, _react.useRef)(null);
   var sizingContainerRefSet = (0, _react.useRef)(null);
   var sizingContainerRefCombo = (0, _react.useRef)(null);
   var sizes = (0, _react.useRef)({});
+
   /**
    * checkFullyVisibleItems determines display count based on space available and width of pageActions
    *
@@ -82,64 +62,59 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
    * ButtonSet is used, once this is no longer the case it switches to a ButtonMenu.
    *
    */
-
   var checkFullyVisibleItems = function checkFullyVisibleItems() {
     var _spaceAvailableRef$cu, _sizingContainerRefSe, _sizingContainerRefCo;
-
     var spaceAvailable = (_spaceAvailableRef$cu = spaceAvailableRef.current) === null || _spaceAvailableRef$cu === void 0 ? void 0 : _spaceAvailableRef$cu.offsetWidth;
-    var newShowAsOverflow = true; // get all of the hidden sizing buttons
+    var newShowAsOverflow = true;
 
-    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(carbonPrefix, "--btn")); // calculate total width of button set
+    // get all of the hidden sizing buttons
+    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(carbonPrefix, "--btn"));
 
+    // calculate total width of button set
     var sizingSetTotalSize = 0;
-
     var _iterator = _createForOfIteratorHelper(sizingSet),
-        _step;
-
+      _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var item = _step.value;
         sizingSetTotalSize += item.offsetWidth;
-      } // check ButtonMenu size
+      }
 
+      // check ButtonMenu size
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
-
     var sizingComboSize = (_sizingContainerRefCo = sizingContainerRefCombo.current) === null || _sizingContainerRefCo === void 0 ? void 0 : _sizingContainerRefCo.offsetWidth;
-
     if (onWidthChange && (sizes.current.minWidth !== sizingComboSize || sizes.current.maxWidth !== sizingSetTotalSize)) {
       sizes.current.minWidth = sizingComboSize;
-      sizes.current.maxWidth = sizingSetTotalSize; // report min and max width required to host
+      sizes.current.maxWidth = sizingSetTotalSize;
 
+      // report min and max width required to host
       onWidthChange(_objectSpread({}, sizes.current));
-    } // only if space available use ButtonSet.
-
+    }
 
+    // only if space available use ButtonSet.
     if (sizingSetTotalSize <= spaceAvailable) {
       newShowAsOverflow = false;
     }
-
     setShowAsOverflow(newShowAsOverflow);
   };
-
   (0, _react.useEffect)(function () {
-    checkFullyVisibleItems(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    checkFullyVisibleItems();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttons]);
-
   var AButtonSet = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
     var buttons = _ref2.buttons,
-        rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
       ref: ref
     }), buttons.map(function (_ref3) {
       var label = _ref3.label,
-          key = _ref3.key,
-          kind = _ref3.kind,
-          other = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-
+        key = _ref3.key,
+        kind = _ref3.kind,
+        other = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
       /* istanbul ignore next */
       var usedKind = kind || 'primary';
       return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
@@ -151,19 +126,18 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       }), label);
     }));
   });
-
   var AButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
     var buttons = _ref4.buttons,
-        rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+      rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, (0, _extends2.default)({}, rest, {
       ref: ref,
       label: buttonSetOverflowLabel,
       menuAriaLabel: buttonSetOverflowLabel
     }), buttons.map(function (_ref5) {
       var label = _ref5.label,
-          key = _ref5.key,
-          kind = _ref5.kind,
-          other = (0, _objectWithoutProperties2.default)(_ref5, _excluded4);
+        key = _ref5.key,
+        kind = _ref5.kind,
+        other = (0, _objectWithoutProperties2.default)(_ref5, _excluded4);
       return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, (0, _extends2.default)({
         key: key && "button-menu-".concat(key),
         isDelete: kind === null || kind === void 0 ? void 0 : kind.startsWith('danger'),
@@ -171,19 +145,14 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       }, (0, _propsHelper.prepareProps)(other, ['iconDescription', 'renderIcon'])));
     }).reverse());
   });
-
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefSet
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefSet, {
+    callback: checkFullyVisibleItems
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefCombo
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefCombo, {
+    callback: checkFullyVisibleItems
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: checkFullyVisibleItems,
-    targetRef: spaceAvailableRef,
-    handleWidth: true
+  (0, _useResizeObserver.useResizeObserver)(spaceAvailableRef, {
+    callback: checkFullyVisibleItems
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)([blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--right"), rightAlign)]),
@@ -213,14 +182,12 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     buttons: buttons
   }));
 };
-
 exports.ButtonSetWithOverflow = ButtonSetWithOverflow;
 ButtonSetWithOverflow.propTypes = {
   /**
    *  buttonSetOverflowLabel - used when button set is shown as combo button
    */
   buttonSetOverflowLabel: _propTypes.default.node.isRequired,
-
   /**
    * Specifies the buttons for the ButtonSetWithOverflow. Each item is specified as an object
    * with the properties of a Carbon Button plus a label.
@@ -233,22 +200,18 @@ ButtonSetWithOverflow.propTypes = {
     label: _propTypes.default.node,
     onClick: _propTypes.default.func
   }))).isRequired,
-
   /**
    * className
    */
   className: _propTypes.default.string,
-
   /**
    * class name applied to the overflow options
    */
   menuOptionsClass: _propTypes.default.string,
-
   /**
    * onResize reports maxSize on resize
    */
   onWidthChange: _propTypes.default.func,
-
   /**
    * align buttons to right of available space
    */

package/lib/components/ButtonSetWithOverflow/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "ButtonSetWithOverflow", {
     return _ButtonSetWithOverflow.ButtonSetWithOverflow;
   }
 });
-
 var _ButtonSetWithOverflow = require("./ButtonSetWithOverflow");

package/lib/components/Card/Card.js

@@ -1,48 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Card = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react2 = require("@carbon/react");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _CardHeader = require("./CardHeader");
-
 var _CardFooter = require("./CardFooter");
-
 var _settings = require("../../settings");
-
 var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
-    _excluded2 = ["id"],
-    _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
-
+  _excluded2 = ["id"],
+  _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"]; //
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var componentName = 'Card';
 
-var componentName = 'Card'; // Default values for props
-
+// Default values for props
 var defaults = {
   actionIcons: Object.freeze([]),
   actionsPlacement: 'bottom',
@@ -57,46 +45,46 @@ var defaults = {
 };
 var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$actionIcons = _ref.actionIcons,
-      actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
-      _ref$actionsPlacement = _ref.actionsPlacement,
-      actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
-      children = _ref.children,
-      className = _ref.className,
-      _ref$clickZone = _ref.clickZone,
-      clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
-      description = _ref.description,
-      label = _ref.label,
-      media = _ref.media,
-      _ref$mediaPosition = _ref.mediaPosition,
-      mediaPosition = _ref$mediaPosition === void 0 ? defaults.mediaPosition : _ref$mediaPosition,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-      _ref$overflowActions = _ref.overflowActions,
-      overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
-      overflowAriaLabel = _ref.overflowAriaLabel,
-      onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-      Pictogram = _ref.pictogram,
-      primaryButtonHref = _ref.primaryButtonHref,
-      primaryButtonIcon = _ref.primaryButtonIcon,
-      _ref$primaryButtonKin = _ref.primaryButtonKind,
-      primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
-      _ref$primaryButtonPla = _ref.primaryButtonPlacement,
-      primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
-      primaryButtonText = _ref.primaryButtonText,
-      _ref$productive = _ref.productive,
-      productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
-      secondaryButtonHref = _ref.secondaryButtonHref,
-      secondaryButtonIcon = _ref.secondaryButtonIcon,
-      _ref$secondaryButtonK = _ref.secondaryButtonKind,
-      secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
-      secondaryButtonText = _ref.secondaryButtonText,
-      title = _ref.title,
-      _ref$titleSize = _ref.titleSize,
-      titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
+    _ref$actionsPlacement = _ref.actionsPlacement,
+    actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$clickZone = _ref.clickZone,
+    clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
+    description = _ref.description,
+    label = _ref.label,
+    media = _ref.media,
+    _ref$mediaPosition = _ref.mediaPosition,
+    mediaPosition = _ref$mediaPosition === void 0 ? defaults.mediaPosition : _ref$mediaPosition,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    _ref$overflowActions = _ref.overflowActions,
+    overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
+    overflowAriaLabel = _ref.overflowAriaLabel,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
+    Pictogram = _ref.pictogram,
+    primaryButtonHref = _ref.primaryButtonHref,
+    primaryButtonIcon = _ref.primaryButtonIcon,
+    _ref$primaryButtonKin = _ref.primaryButtonKind,
+    primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+    _ref$primaryButtonPla = _ref.primaryButtonPlacement,
+    primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
+    primaryButtonText = _ref.primaryButtonText,
+    _ref$productive = _ref.productive,
+    productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
+    secondaryButtonHref = _ref.secondaryButtonHref,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    _ref$secondaryButtonK = _ref.secondaryButtonKind,
+    secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
+    secondaryButtonText = _ref.secondaryButtonText,
+    title = _ref.title,
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || primaryButtonText && primaryButtonPlacement === 'top';
+  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
   var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
@@ -106,34 +94,35 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onKeyDown: onKeyDown,
     role: 'button',
     tabIndex: '0'
-  }; // actions can either be an overflow menu or series of icons
+  };
 
+  // actions can either be an overflow menu or series of icons
   var getActions = function getActions() {
     if (overflowActions.length > 0) {
       var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
-      return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+      return /*#__PURE__*/_react.default.createElement(_react2.Layer, {
+        level: 2
+      }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
         size: size,
         direction: pos,
         flipped: true,
-        ariaLabel: overflowAriaLabel
+        "aria-label": overflowAriaLabel
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
-            rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+          rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
         return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
           key: id
         }, rest));
-      }));
+      })));
     }
-
     var icons = actionIcons.map(function (_ref3) {
       var id = _ref3.id,
-          Icon = _ref3.icon,
-          onClick = _ref3.onClick,
-          iconDescription = _ref3.iconDescription,
-          href = _ref3.href,
-          rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-
+        Icon = _ref3.icon,
+        onClick = _ref3.onClick,
+        iconDescription = _ref3.iconDescription,
+        href = _ref3.href,
+        rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
       if (productive) {
         return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
           key: id,
@@ -146,7 +135,6 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           href: href
         }));
       }
-
       if (href) {
         return /*#__PURE__*/_react.default.createElement("a", {
           key: id,
@@ -157,7 +145,6 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           "aria-label": iconDescription
         }));
       }
-
       return /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
         key: id,
         label: iconDescription,
@@ -171,31 +158,24 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     });
     return icons;
   };
-
   var getCardProps = function getCardProps() {
     var _cx;
-
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
-
     var cardProps = _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
       className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__productive"), productive), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__clickable"), clickable), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__media-left"), mediaPosition === 'left'), _cx), className)
     }, clickable && clickableProps);
-
     return cardProps;
-  }; // the only reason this is necessary is for click zone 2
-
+  };
 
+  // the only reason this is necessary is for click zone 2
   var getHeaderBodyProps = function getHeaderBodyProps() {
     var clickable = hasClickEvent && clickZone === 'two';
-
     var headerBodyProps = _objectSpread({
       className: (0, _classnames.default)("".concat(blockClass, "__header-body-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__clickable"), clickable))
     }, clickable && clickableProps);
-
     return headerBodyProps;
   };
-
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
@@ -212,17 +192,13 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       titleSize: titleSize
     };
   };
-
   var getBodyProps = function getBodyProps() {
     var clickable = hasClickEvent && clickZone === 'three';
-
     var bodyProps = _objectSpread({
       className: (0, _classnames.default)("".concat(blockClass, "__body"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__clickable"), clickable))
     }, clickable && clickableProps);
-
     return bodyProps;
   };
-
   var getFooterProps = function getFooterProps() {
     return {
       actions: actionsPlacement === 'bottom' ? getActions() : '',
@@ -243,7 +219,6 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       secondaryButtonText: secondaryButtonText
     };
   };
-
   return /*#__PURE__*/_react.default.createElement("div", getCardProps(), media && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media), Pictogram && /*#__PURE__*/_react.default.createElement("div", {
@@ -266,8 +241,8 @@ Card.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   clickZone: _propTypes.default.oneOf(['one', 'two', 'three']),
-  description: _propTypes.default.string,
-  label: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   media: _propTypes.default.node,
   mediaPosition: _propTypes.default.oneOf(['top', 'left']),
   onClick: _propTypes.default.func,
@@ -292,7 +267,7 @@ Card.propTypes = {
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
   secondaryButtonText: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };
 Card.displayName = componentName;