@carbon/ibm-products 2.54.0-canary.8 → 2.54.0-canary.81

package/es/components/FullPageError/assets/Error403SVG.d.ts

@@ -1,11 +1,9 @@
-export function Error403SVG({ className, title }: {
+export function Error403SVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace Error403SVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/es/components/FullPageError/assets/Error403SVG.js

@@ -10,14 +10,13 @@ import { p as propTypesExports } from '../../../_virtual/index.js';
 
 var _g, _defs;
 var Error403SVG = function Error403SVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 750 570",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_0_2401)"
   }, /*#__PURE__*/React__default.createElement("path", {
@@ -710,8 +709,7 @@ var Error403SVG = function Error403SVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 Error403SVG.propTypes = {
-  className: propTypesExports.string,
-  title: propTypesExports.string
+  className: propTypesExports.string
 };
 
 export { Error403SVG };

package/es/components/FullPageError/assets/Error404SVG.d.ts

@@ -1,11 +1,9 @@
-export function Error404SVG({ className, title }: {
+export function Error404SVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace Error404SVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/es/components/FullPageError/assets/Error404SVG.js

@@ -10,14 +10,13 @@ import { p as propTypesExports } from '../../../_virtual/index.js';
 
 var _g, _defs;
 var Error404SVG = function Error404SVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 751 549",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_0_2285)"
   }, /*#__PURE__*/React__default.createElement("path", {
@@ -619,8 +618,7 @@ var Error404SVG = function Error404SVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 Error404SVG.propTypes = {
-  className: propTypesExports.string,
-  title: propTypesExports.string
+  className: propTypesExports.string
 };
 
 export { Error404SVG };

package/es/components/FullPageError/assets/ErrorGenericSVG.d.ts

@@ -1,11 +1,9 @@
-export function ErrorGenericSVG({ className, title }: {
+export function ErrorGenericSVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace ErrorGenericSVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/es/components/FullPageError/assets/ErrorGenericSVG.js

@@ -10,14 +10,13 @@ import { p as propTypesExports } from '../../../_virtual/index.js';
 
 var _g, _defs;
 var ErrorGenericSVG = function ErrorGenericSVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 750 506",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_203_144)"
   }, /*#__PURE__*/React__default.createElement("path", {
@@ -710,8 +709,7 @@ var ErrorGenericSVG = function ErrorGenericSVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 ErrorGenericSVG.propTypes = {
-  className: propTypesExports.string,
-  title: propTypesExports.string
+  className: propTypesExports.string
 };
 
 export { ErrorGenericSVG };

package/es/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -48,7 +48,7 @@ var HTTPError403 = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 /**@ts-ignore*/
 HTTPError403.deprecated = {
   level: 'warn',
-  details: "Please replace ".concat(componentName, " with FullPageError")
+  details: "".concat(componentName, " is deprecated. Please migrate to FullPageError by running npx @carbon/upgrade migrate ibm-products-update-http-errors --write")
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -48,7 +48,7 @@ var HTTPError404 = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 /**@ts-ignore*/
 HTTPError404.deprecated = {
   level: 'warn',
-  details: "Please replace ".concat(componentName, " with FullPageError")
+  details: "".concat(componentName, " is deprecated. Please migrate to FullPageError by running npx @carbon/upgrade migrate ibm-products-update-http-errors --write")
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js

@@ -48,7 +48,7 @@ var HTTPErrorOther = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 /**@ts-ignore*/
 HTTPErrorOther.deprecated = {
   level: 'warn',
-  details: "Please replace ".concat(componentName, " with FullPageError")
+  details: "".concat(componentName, " is deprecated. Please migrate to FullPageError by running npx @carbon/upgrade migrate ibm-products-update-http-errors --write")
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/InlineTip/InlineTip.d.ts

@@ -51,8 +51,13 @@ export interface InlineTipProps {
      * - If a stepped animation is required, use `{filePaths}`.
      *
      * Enabling `media` disables the `collapsible` feature.
+     * @deprecated please use the `renderMedia` prop
      */
     media?: MediaType;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: () => ReactNode;
     /**
      * Set to `true` to arrange the information in a format
      * that is easier to read in a limited space.

package/es/components/InlineTip/InlineTip.js

@@ -18,7 +18,7 @@ import { pkg } from '../../settings.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _Close, _Idea, _Crossroads;
-var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
+var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "renderMedia", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--inline-tip");
@@ -56,6 +56,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$expandButtonLabe = _ref.expandButtonLabel,
     expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$narrow = _ref.narrow,
     narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
     onClick = _ref.onClick,
@@ -66,6 +67,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$withLeftGutter = _ref.withLeftGutter,
     withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasMedia = renderMedia || media;
   var _useState = useState(collapsible),
     _useState2 = _slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
@@ -75,7 +77,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     return getComponentText(React__default.Children.toArray(children));
   }, [children]);
   var childrenToRender = children;
-  if (!media && collapsible && isCollapsed) {
+  if (!hasMedia && collapsible && isCollapsed) {
     childrenToRender = /*#__PURE__*/React__default.createElement("p", {
       className: "".concat(blockClass, "__preview-text")
     }, previewText);
@@ -87,7 +89,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     "aria-labelledby": labelId,
-    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), hasMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
     role: "complementary"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
@@ -100,7 +102,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "lg"
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
     size: 16
-  })))), (!media && narrow || !narrow) && /*#__PURE__*/React__default.createElement("div", {
+  })))), (!hasMedia && narrow || !narrow) && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__icon-idea"),
     tabIndex: -1
   }, _Idea || (_Idea = /*#__PURE__*/React__default.createElement(Idea, {
@@ -116,7 +118,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__secondary-btn")
   }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React__default.createElement("footer", {
     className: "".concat(blockClass, "__footer")
-  }, collapsible && !media && /*#__PURE__*/React__default.createElement(Button, {
+  }, collapsible && !hasMedia && /*#__PURE__*/React__default.createElement(Button, {
     className: "".concat(blockClass, "__toggle-btn"),
     kind: "ghost",
     size: "md",
@@ -135,12 +137,14 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         size: 16
       }));
     }
-  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React__default.createElement("div", {
+  }, tertiaryButtonLabel))), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__media")
-  }, media.render()) : /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
+  }, media.render()), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__media"),
     filePaths: media.filePaths
-  })));
+  }), hasMedia && renderMedia && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, renderMedia()));
 });
 InlineTip = pkg.checkComponentEnabled(InlineTip, componentName);
 InlineTip.displayName = componentName;
@@ -186,6 +190,7 @@ InlineTip.propTypes = {
    * - If a stepped animation is required, use `{filePaths}`.
    *
    * Enabling `media` disables the `collapsible` feature.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: PropTypes.oneOfType([PropTypes.shape({
@@ -206,6 +211,10 @@ InlineTip.propTypes = {
    * Function to call when the InlineTip is closed via the "X" button.
    */
   onClose: PropTypes.func,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: PropTypes.func,
   /**
    * Defining the label will show a the tertiary button with the crossroads icon.
    * You will still need to define the `onClose` method to trigger a callback.

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -184,14 +184,13 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       className // Apply any supplied class names to the main HTML element.
       ),
       size: "lg",
-      onClose: onClose,
+      onClose: handleClose,
       open: isOpen,
       ref: _forwardedRef,
       "aria-label": interstitialAriaLabel
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(ModalHeader, {
       className: cx(headerBlockClass, headerTitle && "".concat(headerBlockClass, "--has-title"), headerClassName),
-      iconDescription: closeIconDescription,
-      buttonOnClick: handleClose
+      iconDescription: closeIconDescription
     }, headerTitle && (_h || (_h = /*#__PURE__*/React__default.createElement("h2", null, headerTitle))), !hideProgressIndicator && /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(blockClass, "--progress")
     }, /*#__PURE__*/React__default.createElement(ProgressIndicator, {

package/es/components/Nav/Nav.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated This component is deprecated
+ */
 export let Nav: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 export default Nav;
 import React from 'react';

package/es/components/Nav/Nav.js

@@ -17,6 +17,10 @@ import { pkg } from '../../settings.js';
 var _excluded = ["activeHref", "className", "children", "heading", "label"];
 var componentName = 'Nav';
 var blockClass = "".concat(pkg.prefix, "--nav");
+
+/**
+ * @deprecated This component is deprecated
+ */
 var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var activeHref = _ref.activeHref,
     className = _ref.className,
@@ -121,6 +125,10 @@ var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     return (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
   })));
 });
+Nav.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 Nav.propTypes = {
   /**
    * Hypertext reference for active page.

package/es/components/Nav/NavItemLink.js

@@ -25,6 +25,5 @@ NavItemLink.propTypes = {
 NavItemLink.defaultProps = {
   element: 'a'
 };
-var NavItemLink$1 = NavItemLink;
 
-export { NavItemLink$1 as default };
+export { NavItemLink as default };

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column } from '@carbon/react';
+import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column, DefinitionTooltip } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { string_required_if_more_than_10_tags, TagSet } from '../TagSet/TagSet.js';
 import { spacing, baseFontSize, breakpoints } from '@carbon/layout';
@@ -19,6 +19,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow.js';
 import { useNearestScroll } from '../../global/js/hooks/useWindowScroll.js';
 import { useWindowResize } from '../../global/js/hooks/useWindowResize.js';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js';
@@ -361,6 +362,12 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   };
   var displayedBreadcrumbs = getBreadcrumbs();
+  var subtitleRef = useRef(null);
+  var isOverflowing = checkHeightOverflow(subtitleRef.current);
+  var subtitleContent = /*#__PURE__*/React__default.createElement("span", {
+    ref: subtitleRef,
+    className: "".concat(blockClass, "__subtitle-text")
+  }, subtitle);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
@@ -412,11 +419,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     blockClass: blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
-  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/React__default.createElement(Row, {
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle && /*#__PURE__*/React__default.createElement(Row, {
     className: "".concat(blockClass, "__subtitle-row")
   }, /*#__PURE__*/React__default.createElement(Column, {
     className: "".concat(blockClass, "__subtitle")
-  }, subtitle)) : null, children ? /*#__PURE__*/React__default.createElement(Row, {
+  }, isOverflowing ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    definition: subtitle,
+    className: "".concat(blockClass, "__subtitle-tooltip")
+  }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React__default.createElement(Row, {
     className: "".concat(blockClass, "__available-row")
   }, /*#__PURE__*/React__default.createElement(Column, {
     className: "".concat(blockClass, "__available-column")

package/es/components/PageHeader/PageHeaderTitle.js

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useLayoutEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { SkeletonText, DefinitionTooltip } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace/EditInPlace.js';
+import { checkWidthOverflow } from '../../global/js/utils/checkForOverflow.js';
 
 var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
@@ -43,31 +44,18 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     rest = _objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    isEllipsisApplied = _useState2[0],
-    setIsEllipsisApplied = _useState2[1];
-  var longTitleRef = useRef(undefined);
-  var titleRef = useRef(undefined);
-  useLayoutEffect(function () {
-    setIsEllipsisApplied(isEllipsisActive());
-  }, [longTitleRef, titleRef, title]);
-  var isEllipsisActive = function isEllipsisActive() {
-    if (longTitleRef.current) {
-      var _longTitleRef$current, _longTitleRef$current2;
-      return ((_longTitleRef$current = longTitleRef.current) === null || _longTitleRef$current === void 0 ? void 0 : _longTitleRef$current.offsetWidth) < ((_longTitleRef$current2 = longTitleRef.current) === null || _longTitleRef$current2 === void 0 ? void 0 : _longTitleRef$current2.scrollWidth);
-    } else if (titleRef.current) {
-      var _titleRef$current, _titleRef$current2;
-      return ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.offsetWidth) < ((_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth);
-    }
-    return false;
-  };
+  var titleRef = useRef();
+  var isEllipsisApplied = checkWidthOverflow(titleRef.current);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
+    var titleContent = /*#__PURE__*/React__default.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text);
     titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(blockClass, "__title-icon-wrapper")
     }, /*#__PURE__*/React__default.createElement(TitleIcon, {
@@ -90,14 +78,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       align: tooltipAlignment,
       definition: text,
       className: "".concat(blockClass, "__tooltip")
-    }, /*#__PURE__*/React__default.createElement("span", {
-      ref: longTitleRef,
-      className: "".concat(blockClass, "__titleText")
-    }, text)) : /*#__PURE__*/React__default.createElement("span", {
-      ref: titleRef,
-      className: "".concat(blockClass, "__titleText"),
-      title: !loading ? asText : null
-    }, text));
+    }, titleContent) : titleContent);
   } else {
     titleInnards = content;
     titleText = asText;

package/es/components/ProductiveCard/ProductiveCard.d.ts

@@ -22,9 +22,9 @@ export interface ProductiveCardProps extends PropsWithChildren {
      */
     actionIcons?: ActionIcon[];
     /**
-     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     * Optional prop that allows you to pass any component.
      */
-    aiLabel?: ReactNode | boolean;
+    decorator?: ReactNode | boolean;
     /**
      * Determines if the action icons are on the top or bottom of the card
      */
@@ -66,7 +66,8 @@ export interface ProductiveCardProps extends PropsWithChildren {
      */
     overflowActions?: overflowAction[];
     /**
-     * Aria label prop required for OverflowMenu
+     * Sets the text for the OverflowMenu aria label and the OverflowMenu trigger button tooltip.
+     * Overrides `iconDescription` prop.
      */
     overflowAriaLabel?: string;
     /**
@@ -108,7 +109,7 @@ export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` prop
      */
     slug?: ReactNode | boolean;
     /**
@@ -120,7 +121,10 @@ export interface ProductiveCardProps extends PropsWithChildren {
      */
     titleSize?: 'default' | 'large';
     /**
-     * Tooltip icon description
+     * Sets the text for the OverflowMenu trigger button tooltip and OverflowMenu aria label,
+     * gets overridden by the `overflowAriaLabel` prop.
+     *
+     * @deprecated Please use the `overflowAriaLabel` prop instead.
      */
     iconDescription?: string;
 }

package/es/components/ProductiveCard/ProductiveCard.js

@@ -13,16 +13,14 @@ import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { Card } from '../Card/Card.js';
 
-var _excluded = ["actionsPlacement", "iconDescription"];
+var _excluded = ["actionsPlacement"];
 var componentName = 'ProductiveCard';
 var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
-    iconDescription = _ref.iconDescription,
     rest = _objectWithoutProperties(_ref, _excluded);
   var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React__default.createElement(Card, _extends({}, _objectSpread2(_objectSpread2({}, validProps), {}, {
-    iconDescription: iconDescription,
     actionsPlacement: actionsPlacement,
     ref: ref,
     productive: true
@@ -48,10 +46,6 @@ ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
-  /**
-   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
-   */
-  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -64,12 +58,19 @@ ProductiveCard.propTypes = {
    * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
    */
   clickZone: PropTypes.oneOf(['one', 'two', 'three']),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * Optional header description
    */
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   /**
-   * Tooltip icon description
+   * Sets the text for the OverflowMenu trigger button tooltip and OverflowMenu aria label,
+   * gets overridden by the `overflowAriaLabel` prop.
+   *
+   * @deprecated Please use the `overflowAriaLabel` prop instead.
    */
   iconDescription: PropTypes.string,
   /**
@@ -99,7 +100,8 @@ ProductiveCard.propTypes = {
     onKeyDown: PropTypes.func
   })),
   /**
-   * Aria label prop required for OverflowMenu
+   * Sets the text for the OverflowMenu aria label and the OverflowMenu trigger button tooltip.
+   * Overrides `iconDescription` prop.
    */
   overflowAriaLabel: PropTypes.string,
   /**

package/es/components/SidePanel/SidePanel.d.ts

@@ -110,14 +110,19 @@ type SidePanelBaseProps = {
      */
     slideIn?: boolean;
     /**
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` instead
      *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
      */
     slug?: ReactNode;
     /**
+     * @deprecated please use the `decorator` instead
      * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
      */
     aiLabel?: ReactNode;
+    /**
+     * Provide a `decorator` component to be rendered inside the `SidePanel` component
+     */
+    decorator?: ReactNode;
     /**
      * Sets the subtitle text
      */