@enact/limestone 1.10.0 → 1.10.2

package/Card/Card.js

@@ -11,6 +11,7 @@ var _Card = require("@enact/ui/Card");
 var _Layout = require("@enact/ui/Layout");
 var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _Icon = _interopRequireDefault(require("../Icon"));
@@ -22,7 +23,7 @@ var _ProgressBar = _interopRequireDefault(require("../ProgressBar"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _CardModule = _interopRequireDefault(require("./Card.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "disabled", "icon", "imageSize", "primaryBadgeSrc", "secondaryBadgeSrc", "style"];
+var _excluded = ["captionImageSize", "css", "disabled", "icon", "imageSize", "primaryBadge", "primaryBadgeSize", "secondaryBadge", "secondaryBadgeSize", "showDuration", "duration", "progress", "showProgressBar", "style"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -46,6 +47,62 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @exports CardBase
  * @exports CardDecorator
  */
+var formatDuration = function formatDuration(duration) {
+  if (!duration || duration < 0) return '00:00';
+  var hours = Math.floor(duration / 3600);
+  var minutes = Math.floor(duration % 3600 / 60);
+  var seconds = duration % 60;
+  var mm = String(minutes).padStart(2, '0');
+  var ss = String(seconds).padStart(2, '0');
+  if (hours > 0) {
+    var hh = String(hours).padStart(2, '0');
+    return "".concat(hh, ":").concat(mm, ":").concat(ss);
+  }
+  return "".concat(mm, ":").concat(ss);
+};
+var getBadge = function getBadge(badge, size, className) {
+  var element = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: badge
+  });
+  var elementSize = {};
+  if (/*#__PURE__*/(0, _react.isValidElement)(badge)) element = badge;
+  if (size) {
+    elementSize = typeof size === 'object' ? {
+      width: _resolution["default"].scaleToRem(size.width),
+      height: _resolution["default"].scaleToRem(size.height)
+    } : {
+      fontSize: _resolution["default"].scaleToRem(size)
+    };
+  }
+  return /*#__PURE__*/(0, _react.cloneElement)(element, {
+    className: className,
+    style: _objectSpread({}, elementSize)
+  });
+};
+var getImageIcons = function getImageIcons(images, key, className) {
+  if (!images) return null;
+  var getCellElement = function getCellElement(src) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+      className: className,
+      component: _Image["default"],
+      shrink: true,
+      src: src
+    });
+  };
+  if (Array.isArray(images)) {
+    return images.map(function (src, idx) {
+      return /*#__PURE__*/(0, _react.cloneElement)(getCellElement(src), {
+        key: "".concat(key).concat(idx)
+      });
+    });
+  }
+  if (/*#__PURE__*/(0, _react.isValidElement)(images)) {
+    return /*#__PURE__*/(0, _react.cloneElement)(images, {
+      className: className
+    });
+  }
+  return getCellElement(images);
+};
 var getDefaultImageSize = function getDefaultImageSize(orientation) {
   var sizes = {
     vertical: {
@@ -59,6 +116,17 @@ var getDefaultImageSize = function getDefaultImageSize(orientation) {
   };
   return sizes[orientation];
 };
+var getLabelIcons = function getLabelIcons(icons, key, className) {
+  if (!icons) return null;
+  return icons.map(function (labelIcon, index) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+      shrink: true,
+      children: /*#__PURE__*/(0, _react.cloneElement)(labelIcon, {
+        className: className
+      })
+    }, "".concat(key).concat(index));
+  }) || null;
+};
 
 /**
  * A Limestone styled base component for {@link limestone/Card.Card|Card}.
@@ -89,6 +157,47 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     'aria-label': _propTypes["default"].string,
+    /**
+     * Sources for the image icon.
+     *
+     * An array of String values or Objects of values used to determine which image will appear on
+     * a specific screenSize. This prop is only used when `orientation` is `'vertical'`.
+     *
+     * @type {String[]|Object[]}
+     * @public
+     */
+    captionImageIconsSrc: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+    /**
+     * The size of the caption images.
+     *
+     * The following properties should be provided:
+     * * `height` - The height of the image
+     * * `width` - The width of the image
+     *
+     * @type {Object}
+     * @default {height: 96, width: 96}
+     * @public
+     */
+    captionImageSize: _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    }),
+    /**
+     * Determines whether the caption will overflow the card container or not.
+     * It only applies when `orientation` is `'vertical'` and `captionOverlay` and `captionOverlayOnFocus` is `false`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    captionOverflow: _propTypes["default"].bool,
+    /**
+     * Determines whether the caption will overflow the card container and show only on card focus.
+     * It only applies when `orientation` is `'vertical'` and `captionOverlay` and `captionOverlayOnFocus` is `false`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    captionOverflowOnFocus: _propTypes["default"].bool,
     /**
      * Determines whether the caption will be placed over the image or not.
      * It only applies when `orientation` is `'vertical'`.
@@ -112,6 +221,14 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     centered: _propTypes["default"].bool,
+    /**
+     * Centers the title and `imageIconSrc` horizontally and vertically.
+     * It only applies when `captionOverlay` or `captionOverlayOnFocus` is `true`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    centeredTitle: _propTypes["default"].bool,
     /**
      * The primary caption displayed with the image.
      *
@@ -141,6 +258,20 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     disabled: _propTypes["default"].bool,
+    /**
+     * Media's entire duration in seconds.
+     *
+     * @type {Number}
+     * @public
+     */
+    duration: _propTypes["default"].number,
+    /**
+     * Determines whether the `Duration` will be placed over the image or not.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    durationOverlay: _propTypes["default"].bool,
     /**
      * Fits the image to its height and width and positions it on the center of the Card.
      *
@@ -167,20 +298,21 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
     /**
      * Source for the image icon.
      *
-     * String value or Object of values used to determine which image will appear on
-     * a specific screenSize. This prop is only used when `orientation` is `'vertical'`.
+     * String value or element or Object of values used to determine which image will appear on
+     * a specific screenSize. This prop is only used when `orientation` is `'vertical'` or `centeredTitle` is `true`.
      *
-     * @type {String|Object}
+     * @type {String|Object|Element}
      * @public
      */
-    imageIconSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    imageIconSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object, _propTypes["default"].element]),
     /**
      * The size of the image.
      *
      * The following properties should be provided:
     	 * * `height` - The height of the image
      * * `width` - The width of the image
-     		 * @type {Object}
+     *
+    		 * @type {Object}
      * @default {height: 432, width: 768}
      * @public
      */
@@ -195,6 +327,15 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     label: _propTypes["default"].string,
+    /**
+     * Icons to be included with the secondary caption.
+     *
+     * Typically, up to 3 icons are used.
+     *
+     * @type {Element|Element[]}
+     * @public
+     */
+    labelIcons: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
     /**
      * The layout orientation of the component.
      *
@@ -219,12 +360,26 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      */
     pressed: _propTypes["default"].bool,
     /**
-     * The primary badge image source.
+     * The primary badge.
      *
-     * @type {String|Object}
+     * @type {Element|String}
      * @public
      */
-    primaryBadgeSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    primaryBadge: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+    /**
+     * The size of the primary badge. Can be a number or an object with specific dimensions.
+     * The following properties should be provided for the object:
+     * * `height` - The height of the badge
+     * * `width` - The width of the badge
+     *
+     * @type {Object|Number}
+     * @default {width: 108, height: 108}
+     * @public
+     */
+    primaryBadgeSize: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    })]),
     /**
      * The progress displayed inside the ProgressBar
      *
@@ -232,6 +387,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     progress: _propTypes["default"].number,
+    /**
+     * Determines whether the `ProgressBar` will be placed over the image or not.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    progressBarOverlay: _propTypes["default"].bool,
     /**
      * Set to `true` to display the image with rounded corners.
      *
@@ -240,12 +402,26 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      */
     roundedImage: _propTypes["default"].bool,
     /**
-     * The secondary badge image source.
+     * The secondary badge.
      *
-     * @type {String|Object}
+     * @type {Element|String}
      * @public
      */
-    secondaryBadgeSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    secondaryBadge: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+    /**
+     * The size of the secondary badge. Can be a number or an object with specific dimensions.
+     * The following properties should be provided for the object:
+     * * `height` - The height of the badge
+     * * `width` - The width of the badge
+     *
+     * @type {Object|Number}
+     * @default {width: 108, height: 108}
+     * @public
+     */
+    secondaryBadgeSize: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    })]),
     /**
      * A ternary caption displayed with the image.
      *
@@ -253,6 +429,15 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     secondaryLabel: _propTypes["default"].string,
+    /**
+     * Icons to be included with the ternary caption.
+     *
+     * Typically, up to 3 icons are used.
+     *
+     * @type {Element|Element[]}
+     * @public
+     */
+    secondaryLabelIcons: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
     /**
      * Applies a selected visual effect to the image.
      *
@@ -260,6 +445,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     selected: _propTypes["default"].bool,
+    /**
+     * Activates the 'Duration'.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    showDuration: _propTypes["default"].bool,
     /**
      * Activates the 'ProgressBar'.
      *
@@ -311,68 +503,75 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       return _captionOverlay || captionOverlayOnFocus;
     },
     children: function children(_ref3) {
-      var captionOverlay = _ref3.captionOverlay,
+      var captionImageIconsSrc = _ref3.captionImageIconsSrc,
+        captionOverlay = _ref3.captionOverlay,
         captionOverlayOnFocus = _ref3.captionOverlayOnFocus,
         centered = _ref3.centered,
+        centeredTitle = _ref3.centeredTitle,
         _children = _ref3.children,
         css = _ref3.css,
+        duration = _ref3.duration,
+        durationOverlay = _ref3.durationOverlay,
         index = _ref3['data-index'],
         imageIconSrc = _ref3.imageIconSrc,
         label = _ref3.label,
+        labelIcons = _ref3.labelIcons,
         orientation = _ref3.orientation,
         progress = _ref3.progress,
+        progressBarOverlay = _ref3.progressBarOverlay,
         secondaryLabel = _ref3.secondaryLabel,
+        secondaryLabelIcons = _ref3.secondaryLabelIcons,
+        showDuration = _ref3.showDuration,
         showProgressBar = _ref3.showProgressBar,
         splitCaption = _ref3.splitCaption,
         withoutMarquee = _ref3.withoutMarquee;
+      var isCenteredTitle = (captionOverlay || captionOverlayOnFocus) && orientation === 'vertical' && centeredTitle;
       var hasImageIcon = imageIconSrc && orientation === 'vertical';
-      var alignment = centered && !imageIconSrc ? {
+      var hasCaptionImageIcons = captionImageIconsSrc && captionImageIconsSrc.filter(Boolean).length && orientation === 'vertical';
+      var alignment = centered && !imageIconSrc || isCenteredTitle ? {
         alignment: 'center'
       } : null;
-      var captions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+      var labelsProps = withoutMarquee ? {
+        style: {
+          textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
+        }
+      } : _objectSpread({}, alignment);
+      var CaptionsComponent = isCenteredTitle ? _Layout.Column : _Layout.Row;
+      var LabelsComponent = withoutMarquee ? 'div' : _Marquee.Marquee;
+      var captions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(CaptionsComponent, {
         className: css.captions,
-        children: [hasImageIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
-          className: css.imageIcon,
-          component: _Image["default"],
-          shrink: true,
-          src: imageIconSrc
-        }) : null, withoutMarquee ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: {
-              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
-            },
+        children: [hasImageIcon ? getImageIcons(imageIconSrc, null, css.imageIcon) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+          className: css.captionCell,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LabelsComponent, _objectSpread(_objectSpread({}, labelsProps), {}, {
             className: css.caption,
             children: _children
-          }), typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: {
-              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
-            },
-            className: css.label,
-            children: label
-          }) : null, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: {
-              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
-            },
-            className: css.label,
-            children: secondaryLabel
-          }) : null, showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
-            progress: progress
-          }) : null]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
-            className: css.caption,
-            marqueeOn: "hover",
-            children: _children
-          })), typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
-            className: css.label,
-            marqueeOn: "hover",
-            children: label
-          })) : null, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
-            className: css.label,
-            marqueeOn: "hover",
-            children: secondaryLabel
-          })) : null, showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
+          })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Column, {
+            className: css.labels,
+            children: [typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+              className: css.labelContainer,
+              children: [getLabelIcons(labelIcons, 'labelIcons', css.labelIcon), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelsComponent, _objectSpread(_objectSpread({}, labelsProps), {}, {
+                  className: css.label,
+                  children: label
+                }))
+              })]
+            }) : null, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+              className: css.labelContainer,
+              children: [getLabelIcons(secondaryLabelIcons, 'secondaryLabelIcons', css.labelIcon), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelsComponent, _objectSpread(_objectSpread({}, labelsProps), {}, {
+                  className: css.label,
+                  children: secondaryLabel
+                }))
+              })]
+            }) : null, hasCaptionImageIcons ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Row, {
+              className: css.captionImageIconsContainer,
+              children: getImageIcons(captionImageIconsSrc, 'captionImageIcons', css.captionImageIcon)
+            }) : null]
+          }), showProgressBar && !progressBarOverlay && !isCenteredTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
             progress: progress
+          }) : null, showDuration && !durationOverlay && !showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.duration,
+            children: formatDuration(duration)
           }) : null]
         })]
       });
@@ -415,50 +614,87 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       }) : selectedCaptions;
     },
     className: function className(_ref4) {
-      var captionOverlay = _ref4.captionOverlay,
+      var captionOverflow = _ref4.captionOverflow,
+        captionOverflowOnFocus = _ref4.captionOverflowOnFocus,
+        captionOverlay = _ref4.captionOverlay,
         captionOverlayOnFocus = _ref4.captionOverlayOnFocus,
+        centeredTitle = _ref4.centeredTitle,
+        durationOverlay = _ref4.durationOverlay,
         icon = _ref4.icon,
+        label = _ref4.label,
         pressed = _ref4.pressed,
+        progressBarOverlay = _ref4.progressBarOverlay,
         roundedImage = _ref4.roundedImage,
         hasContainer = _ref4.hasContainer,
         orientation = _ref4.orientation,
+        secondaryLabel = _ref4.secondaryLabel,
         styler = _ref4.styler;
       return styler.append({
+        captionOverflow: captionOverflow && orientation === 'vertical' && !captionOverlay && !captionOverlayOnFocus,
+        captionOverflowOnFocus: !captionOverflow && captionOverflowOnFocus && orientation === 'vertical' && !captionOverlay && !captionOverlayOnFocus,
         captionOverlay: captionOverlay && orientation === 'vertical',
         captionOverlayOnFocus: !captionOverlay && captionOverlayOnFocus && orientation === 'vertical',
+        centeredTitle: centeredTitle,
+        durationOverlay: durationOverlay,
         pressed: pressed,
         roundedImage: roundedImage,
-        hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay,
-        isCheckIcon: icon === 'check'
+        hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay && !captionOverlayOnFocus,
+        hasLabel: orientation === 'vertical' && label && secondaryLabel,
+        isCheckIcon: icon === 'check',
+        progressBarOverlay: progressBarOverlay
       });
     },
-    splitCaption: function splitCaption(_ref5) {
-      var captionOverlay = _ref5.captionOverlay,
-        captionOverlayOnFocus = _ref5.captionOverlayOnFocus,
-        _splitCaption = _ref5.splitCaption;
+    showDuration: function showDuration(_ref5) {
+      var _showDuration = _ref5.showDuration,
+        showProgressBar = _ref5.showProgressBar,
+        durationOverlay = _ref5.durationOverlay;
+      return _showDuration && durationOverlay && !showProgressBar;
+    },
+    showProgressBar: function showProgressBar(_ref6) {
+      var _showProgressBar = _ref6.showProgressBar,
+        progressBarOverlay = _ref6.progressBarOverlay;
+      return _showProgressBar && progressBarOverlay;
+    },
+    splitCaption: function splitCaption(_ref7) {
+      var captionOverlay = _ref7.captionOverlay,
+        captionOverlayOnFocus = _ref7.captionOverlayOnFocus,
+        _splitCaption = _ref7.splitCaption;
       return (captionOverlay || captionOverlayOnFocus) && _splitCaption;
     }
   },
-  render: function render(_ref6) {
+  render: function render(_ref8) {
     var _imageSize$height, _imageSize$width;
-    var css = _ref6.css,
-      disabled = _ref6.disabled,
-      icon = _ref6.icon,
-      imageSize = _ref6.imageSize,
-      primaryBadgeSrc = _ref6.primaryBadgeSrc,
-      secondaryBadgeSrc = _ref6.secondaryBadgeSrc,
-      style = _ref6.style,
-      rest = _objectWithoutProperties(_ref6, _excluded);
+    var captionImageSize = _ref8.captionImageSize,
+      css = _ref8.css,
+      disabled = _ref8.disabled,
+      icon = _ref8.icon,
+      imageSize = _ref8.imageSize,
+      primaryBadge = _ref8.primaryBadge,
+      primaryBadgeSize = _ref8.primaryBadgeSize,
+      secondaryBadge = _ref8.secondaryBadge,
+      secondaryBadgeSize = _ref8.secondaryBadgeSize,
+      showDuration = _ref8.showDuration,
+      duration = _ref8.duration,
+      progress = _ref8.progress,
+      showProgressBar = _ref8.showProgressBar,
+      style = _ref8.style,
+      rest = _objectWithoutProperties(_ref8, _excluded);
+    delete rest.captionImageIconsSrc;
+    delete rest.captionOverflow;
+    delete rest.captionOverflowOnFocus;
     delete rest.captionOverlayOnFocus;
     delete rest.centered;
-    delete rest.label;
-    delete rest.progress;
-    delete rest.secondaryLabel;
-    delete rest.showProgressBar;
-    delete rest.imageIconSrc;
+    delete rest.centeredTitle;
+    delete rest.durationOverlay;
     delete rest.hasContainer;
+    delete rest.imageIconSrc;
+    delete rest.label;
+    delete rest.labelIcons;
     delete rest.pressed;
+    delete rest.progressBarOverlay;
     delete rest.roundedImage;
+    delete rest.secondaryLabel;
+    delete rest.secondaryLabelIcons;
     delete rest.withoutMarquee;
     var defaultImageSize = getDefaultImageSize(rest.orientation);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, _objectSpread(_objectSpread({}, rest), {}, {
@@ -467,23 +703,27 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       "data-webos-voice-intent": "Select",
       disabled: disabled,
       imageComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Image["default"], {
-        children: [primaryBadgeSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
-          className: css.primaryBadge,
-          src: primaryBadgeSrc
-        }) : null, secondaryBadgeSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
-          className: css.secondaryBadge,
-          src: secondaryBadgeSrc
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [primaryBadge ? getBadge(primaryBadge, primaryBadgeSize, css.primaryBadge) : null, secondaryBadge ? getBadge(secondaryBadge, secondaryBadgeSize, css.secondaryBadge) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: css.selectionContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
             className: css.selectionIcon,
             children: icon
           })
-        })]
+        }), showDuration ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: css.duration,
+          children: formatDuration(duration)
+        }) : null, showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
+          className: css.progress,
+          progress: progress
+        }) : null]
       }),
-      style: _objectSpread(_objectSpread({}, style), {}, {
+      style: _objectSpread(_objectSpread(_objectSpread({}, style), {}, {
         '--card-image-height': _resolution["default"].scaleToRem((_imageSize$height = imageSize === null || imageSize === void 0 ? void 0 : imageSize.height) !== null && _imageSize$height !== void 0 ? _imageSize$height : defaultImageSize.height),
         '--card-image-width': _resolution["default"].scaleToRem((_imageSize$width = imageSize === null || imageSize === void 0 ? void 0 : imageSize.width) !== null && _imageSize$width !== void 0 ? _imageSize$width : defaultImageSize.width)
+      }, (captionImageSize === null || captionImageSize === void 0 ? void 0 : captionImageSize.height) && {
+        '--caption-image-height': _resolution["default"].scaleToRem(captionImageSize.height)
+      }), (captionImageSize === null || captionImageSize === void 0 ? void 0 : captionImageSize.width) && {
+        '--caption-image-width': _resolution["default"].scaleToRem(captionImageSize.width)
       })
     }));
   }