@carbon/ibm-products 2.54.0-canary.55 → 2.54.0-canary.59

package/es/components/Card/Card.js

@@ -16,7 +16,7 @@ import { CardFooter } from './CardFooter.js';
 import { pkg } from '../../settings.js';
 
 var _Incomplete, _CheckmarkOutline;
-var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
+var _excluded = ["actionIcons", "actionsPlacement", "decorator", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "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';
@@ -25,7 +25,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
-    aiLabel = _ref.aiLabel,
+    decorator = _ref.decorator,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
     children = _ref.children,
@@ -168,10 +168,11 @@ 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({}, "".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-ai-label"), !!aiLabel), className)
+      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);
     return cardProps;
   };
@@ -187,7 +188,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
-      aiLabel: aiLabel,
+      decorator: decorator,
       noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -271,13 +272,13 @@ Card.propTypes = {
     href: PropTypes.string
   })),
   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]),
   children: PropTypes.node,
   className: PropTypes.string,
   clickZone: PropTypes.oneOf(['one', 'two', 'three']),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**@ts-ignore */
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
@@ -326,7 +327,7 @@ Card.propTypes = {
   /**
    * **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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   status: PropTypes.oneOf(['complete', 'incomplete']),

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

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 interface CardHeaderProps {
     actions?: ReactNode;
     /**
-     * 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;
     description?: ReactNode;
     hasActions?: boolean;
     /**
@@ -29,21 +29,21 @@ interface CardHeaderProps {
     /**
      * **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;
     title?: ReactNode;
     titleSize?: 'default' | 'large';
 }
 export declare const CardHeader: {
-    ({ actions, aiLabel, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
+    ({ actions, decorator, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
     /**@ts-ignore */
     propTypes: {
         actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
         /**
-         * 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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        decorator: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         hasActions: PropTypes.Requireable<boolean>;
         /**
@@ -67,7 +67,7 @@ export declare const CardHeader: {
         /**
          * **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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;

package/es/components/Card/CardHeader.js

@@ -20,7 +20,7 @@ var defaults = {
 };
 var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
-    aiLabel = _ref.aiLabel,
+    decorator = _ref.decorator,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     onSecondaryButtonClick = _ref.onSecondaryButtonClick,
@@ -65,13 +65,13 @@ var CardHeader = function CardHeader(_ref) {
     d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
     fill: "#161616"
   })));
-  var normalizedAiLabel = null;
-  if (aiLabel || slug) {
-    if (inClickableCard || typeof aiLabel === 'boolean' || typeof slug === 'boolean') {
-      normalizedAiLabel = hollowAiIcon;
+  var normalizedDecorator = null;
+  if (decorator || slug) {
+    if (inClickableCard || typeof decorator === 'boolean' || typeof slug === 'boolean') {
+      normalizedDecorator = hollowAiIcon;
     } else {
-      var element = aiLabel || slug;
-      normalizedAiLabel = /*#__PURE__*/React__default.cloneElement(element, {
+      var element = decorator || slug;
+      normalizedDecorator = /*#__PURE__*/React__default.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
     }
@@ -79,7 +79,7 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx(["".concat(headerClass, "-container"), _defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _defineProperty({}, "".concat(headerClass, "-container--has-ai-label"), !!aiLabel), _defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+    className: cx(["".concat(headerClass, "-container"), _defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _defineProperty({}, "".concat(headerClass, "-container--has-decorator"), !!decorator), _defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__title-container")
   }, label && /*#__PURE__*/React__default.createElement("p", {
@@ -105,15 +105,17 @@ var CardHeader = function CardHeader(_ref) {
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)), normalizedAiLabel));
+  }, primaryButtonText)), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__header__inner-wrapper--decorator")
+  }, normalizedDecorator) : ''));
 };
 /**@ts-ignore */
 CardHeader.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
   /**
-   * 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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+  decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   hasActions: PropTypes.bool,
   /**
@@ -137,7 +139,7 @@ CardHeader.propTypes = {
   /**
    * **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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),

package/es/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -13,10 +13,6 @@ export interface ExpressiveCardProps extends PropsWithChildren {
      * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
      */
     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.
-     */
-    aiLabel?: ReactNode | boolean;
     /**
      * Content that shows in the body of the card
      */
@@ -24,6 +20,10 @@ export interface ExpressiveCardProps extends PropsWithChildren {
      * Optional user provided class
      */
     className?: string;
+    /**
+     * Optional prop that allows you to pass any component.
+     */
+    decorator?: ReactNode | boolean;
     /**
      * Optional header description
      */
@@ -91,7 +91,7 @@ export interface ExpressiveCardProps 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;
     /**

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -36,10 +36,6 @@ ExpressiveCard.propTypes = {
     iconDescription: PropTypes.string,
     href: PropTypes.string
   })),
-  /**
-   * 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
    */
@@ -48,6 +44,10 @@ ExpressiveCard.propTypes = {
    * Optional user provided class
    */
   className: PropTypes.string,
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * Optional header description
    */
@@ -118,7 +118,7 @@ ExpressiveCard.propTypes = {
   /**
    * **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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**

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
      */
@@ -108,7 +108,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;
     /**

package/es/components/ProductiveCard/ProductiveCard.js

@@ -48,10 +48,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,6 +60,10 @@ 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
    */

package/lib/components/Card/Card.d.ts

@@ -58,13 +58,13 @@ interface CardProp extends PropsWithChildren {
     iconDescription?: string;
     /**
      * 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;
     /**
-     * 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;
     status?: 'complete' | 'incomplete';
     title?: ReactNode;
     titleSize?: 'default' | 'large';

package/lib/components/Card/Card.js

@@ -18,7 +18,7 @@ var CardFooter = require('./CardFooter.js');
 var settings = require('../../settings.js');
 
 var _Incomplete, _CheckmarkOutline;
-var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
+var _excluded = ["actionIcons", "actionsPlacement", "decorator", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "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';
@@ -27,7 +27,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
-    aiLabel = _ref.aiLabel,
+    decorator = _ref.decorator,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
     children = _ref.children,
@@ -170,10 +170,11 @@ var Card = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx(blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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-ai-label"), !!aiLabel), className)
+      className: cx(blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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);
     return cardProps;
   };
@@ -189,7 +190,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
-      aiLabel: aiLabel,
+      decorator: decorator,
       noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -273,13 +274,13 @@ Card.propTypes = {
     href: index.default.string
   })),
   actionsPlacement: index.default.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: index.default.oneOfType([index.default.node, index.default.bool]),
   children: index.default.node,
   className: index.default.string,
   clickZone: index.default.oneOf(['one', 'two', 'three']),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**@ts-ignore */
   description: index.default.oneOfType([index.default.string, index.default.node]),
   disabled: index.default.bool,
@@ -328,7 +329,7 @@ Card.propTypes = {
   /**
    * **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: index.default.oneOfType([index.default.node, index.default.bool]),
   status: index.default.oneOf(['complete', 'incomplete']),

package/lib/components/Card/CardHeader.d.ts

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 interface CardHeaderProps {
     actions?: ReactNode;
     /**
-     * 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;
     description?: ReactNode;
     hasActions?: boolean;
     /**
@@ -29,21 +29,21 @@ interface CardHeaderProps {
     /**
      * **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;
     title?: ReactNode;
     titleSize?: 'default' | 'large';
 }
 export declare const CardHeader: {
-    ({ actions, aiLabel, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
+    ({ actions, decorator, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
     /**@ts-ignore */
     propTypes: {
         actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
         /**
-         * 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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        decorator: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         hasActions: PropTypes.Requireable<boolean>;
         /**
@@ -67,7 +67,7 @@ export declare const CardHeader: {
         /**
          * **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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;

package/lib/components/Card/CardHeader.js

@@ -22,7 +22,7 @@ var defaults = {
 };
 var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
-    aiLabel = _ref.aiLabel,
+    decorator = _ref.decorator,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     onSecondaryButtonClick = _ref.onSecondaryButtonClick,
@@ -67,13 +67,13 @@ var CardHeader = function CardHeader(_ref) {
     d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
     fill: "#161616"
   })));
-  var normalizedAiLabel = null;
-  if (aiLabel || slug) {
-    if (inClickableCard || typeof aiLabel === 'boolean' || typeof slug === 'boolean') {
-      normalizedAiLabel = hollowAiIcon;
+  var normalizedDecorator = null;
+  if (decorator || slug) {
+    if (inClickableCard || typeof decorator === 'boolean' || typeof slug === 'boolean') {
+      normalizedDecorator = hollowAiIcon;
     } else {
-      var element = aiLabel || slug;
-      normalizedAiLabel = /*#__PURE__*/React.cloneElement(element, {
+      var element = decorator || slug;
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
     }
@@ -81,7 +81,7 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx(["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-ai-label"), !!aiLabel), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+    className: cx(["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-decorator"), !!decorator), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__title-container")
   }, label && /*#__PURE__*/React.createElement("p", {
@@ -107,15 +107,17 @@ var CardHeader = function CardHeader(_ref) {
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)), normalizedAiLabel));
+  }, primaryButtonText)), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__header__inner-wrapper--decorator")
+  }, normalizedDecorator) : ''));
 };
 /**@ts-ignore */
 CardHeader.propTypes = {
   actions: index.default.oneOfType([index.default.array, index.default.node]),
   /**
-   * 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: index.default.oneOfType([index.default.node, index.default.bool]),
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   description: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
   hasActions: index.default.bool,
   /**
@@ -139,7 +141,7 @@ CardHeader.propTypes = {
   /**
    * **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: index.default.oneOfType([index.default.node, index.default.bool]),
   title: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),

package/lib/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -13,10 +13,6 @@ export interface ExpressiveCardProps extends PropsWithChildren {
      * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
      */
     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.
-     */
-    aiLabel?: ReactNode | boolean;
     /**
      * Content that shows in the body of the card
      */
@@ -24,6 +20,10 @@ export interface ExpressiveCardProps extends PropsWithChildren {
      * Optional user provided class
      */
     className?: string;
+    /**
+     * Optional prop that allows you to pass any component.
+     */
+    decorator?: ReactNode | boolean;
     /**
      * Optional header description
      */
@@ -91,7 +91,7 @@ export interface ExpressiveCardProps 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;
     /**

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -38,10 +38,6 @@ exports.ExpressiveCard.propTypes = {
     iconDescription: index.default.string,
     href: index.default.string
   })),
-  /**
-   * 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: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -50,6 +46,10 @@ exports.ExpressiveCard.propTypes = {
    * Optional user provided class
    */
   className: index.default.string,
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Optional header description
    */
@@ -120,7 +120,7 @@ exports.ExpressiveCard.propTypes = {
   /**
    * **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: index.default.oneOfType([index.default.node, index.default.bool]),
   /**

package/lib/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
      */
@@ -108,7 +108,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;
     /**

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -50,10 +50,6 @@ exports.ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: index.default.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: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -66,6 +62,10 @@ exports.ProductiveCard.propTypes = {
    * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
    */
   clickZone: index.default.oneOf(['one', 'two', 'three']),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Optional header description
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.54.0-canary.55+73ee693dd",
+  "version": "2.54.0-canary.59+6e58e9d37",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.51.0",
+    "@carbon/ibm-products-styles": "^2.50.0-canary.59+6e58e9d37",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "73ee693dda68bbbc0ccc6ed802b0efe8f528950e"
+  "gitHead": "6e58e9d37d335dcadb7049db786fdd833f7e36a0"
 }