@carbon/ibm-products 2.55.0 → 2.56.0-rc.0

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/Coachmark/Coachmark.d.ts

@@ -65,6 +65,11 @@ export interface CoachmarkProps {
      * Determines the theme of the component.
      */
     theme?: 'light' | 'dark';
+    /**
+     * Determines if the coachmark is open by default.
+     * Does nothing if `overlayKind=stacked`.
+     */
+    isOpenByDefault?: boolean;
 }
 /**
  * Coachmarks are used to call out specific functionality or concepts

package/lib/components/Coachmark/Coachmark.js

@@ -22,7 +22,7 @@ var lodash = require('lodash');
 var react = require('@carbon/react');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme"];
+var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme", "isOpenByDefault"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark");
@@ -32,7 +32,8 @@ var defaults = {
   align: 'bottom',
   onClose: function onClose() {},
   overlayKind: 'tooltip',
-  theme: 'light'
+  theme: 'light',
+  isOpenByDefault: false
 };
 /**
  * Coachmarks are used to call out specific functionality or concepts
@@ -57,10 +58,12 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     target = _ref.target,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    _ref$isOpenByDefault = _ref.isOpenByDefault,
+    isOpenByDefault = _ref$isOpenByDefault === void 0 ? defaults.isOpenByDefault : _ref$isOpenByDefault,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === enums.COACHMARK_OVERLAY_KIND.STACKED;
-  var _useState = React.useState(isStacked),
+  var _useState = React.useState(isStacked || isOpenByDefault),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
@@ -252,6 +255,11 @@ exports.Coachmark.propTypes = {
    * Optional class name for this component.
    */
   className: index.default.string,
+  /**
+   * Determines if the coachmark is open by default.
+   * Does nothing if `overlayKind=stacked`.
+   */
+  isOpenByDefault: index.default.bool,
   /**
    * Function to call when the Coachmark closes.
    */

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -24,11 +24,16 @@ export interface CoachmarkOverlayElementsProps {
      * The object describing an image in one of two shapes.
      * If a single media element is required, use `{render}`.
      * If a stepped animation is required, use `{filePaths}`.
+     * * @deprecated please use the `renderMedia` prop
      */
     media?: {
         render?: () => ReactNode;
         filePaths?: string[];
     };
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The label for the Next button.
      */

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -22,7 +22,7 @@ var settings = require('../../settings.js');
 require('../Coachmark/Coachmark.js');
 var context = require('../Coachmark/utils/context.js');
 
-var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
+var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-elements");
@@ -55,6 +55,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$nextButtonText = _ref.nextButtonText,
     nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
     _ref$previousButtonLa = _ref.previousButtonLabel,
@@ -73,6 +74,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     currentProgStep = _useState4[0],
     _setCurrentProgStep = _useState4[1];
   var coachmark = context.useCoachmark();
+  var hasMedia = media || renderMedia;
   var setCurrentProgStep = function setCurrentProgStep(value) {
     if (currentProgStep > 0 && value === 0 && buttonFocusRef.current) {
       setTimeout(function () {
@@ -85,6 +87,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
   var numProgSteps = React.Children.count(children);
   var progStepFloor = 0;
   var progStepCeil = numProgSteps - 1;
+  var renderMediaContent = React.useMemo(function () {
+    return renderMedia === null || renderMedia === void 0 ? void 0 : renderMedia({
+      playStep: currentProgStep
+    });
+  }, [currentProgStep, renderMedia]);
   React.useEffect(function () {
     // On mount, one of the two primary buttons ("next" or "close")
     // will be rendered and must have focus. (a11y)
@@ -113,11 +120,13 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, devtools.getDevtoolsProps(componentName)), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: currentProgStep
-  })), numProgSteps === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React.createElement("div", {
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMediaContent), numProgSteps === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__footer"), 'coachmark-carousel-controls')
   }, /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm"
@@ -196,6 +205,7 @@ exports.CoachmarkOverlayElements.propTypes = {
    * The object describing an image in one of two shapes.
    * If a single media element is required, use `{render}`.
    * If a stepped animation is required, use `{filePaths}`.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: index.default.oneOfType([index.default.shape({
@@ -210,5 +220,9 @@ exports.CoachmarkOverlayElements.propTypes = {
   /**
    * The label for the Previous button.
    */
-  previousButtonLabel: index.default.string
+  previousButtonLabel: index.default.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func
 };

package/lib/components/CoachmarkStack/CoachmarkStackHome.d.ts

@@ -39,6 +39,10 @@ interface CoachmarkStackHomeProps {
      * @see {@link MEDIA_PROP_TYPE}.
      */
     media?: Media;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The labels used to link to the stackable Coachmarks.
      */

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -19,9 +19,10 @@ var settings = require('../../settings.js');
 var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+var _excluded = ["className", "description", "isOpen", "media", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -39,6 +40,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     description = _ref.description,
     isOpen = _ref.isOpen,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     navLinkLabels = _ref.navLinkLabels,
     onClickNavItem = _ref.onClickNavItem,
     _onClose = _ref.onClose,
@@ -51,6 +53,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     linkFocusIndex = _useState2[0],
     setLinkFocusIndex = _useState2[1];
+  var hasMedia = media || renderMedia;
   React.useEffect(function () {
     setTimeout(function () {
       if (isOpen && buttonFocusRef.current) {
@@ -92,13 +95,17 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(overlayClass, "__body")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(overlayClass, "-element")
-  }, !media && /*#__PURE__*/React.createElement(icons.Idea, {
+  }, !hasMedia && /*#__PURE__*/React.createElement(icons.Idea, {
     size: 20,
     className: "".concat(blockClass, "__icon-idea")
-  }), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
-    className: "".concat(overlayClass, "__element-stepped-media"),
+  }), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+    className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: 0
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMedia({
+    playStep: 0
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(overlayClass, "-element__content")
   }, title && /*#__PURE__*/React.createElement("h2", {
@@ -158,12 +165,13 @@ exports.CoachmarkStackHome.propTypes = {
    * If a stepped animation is required, use `{filePaths}`.
    *
    * @see {@link MEDIA_PROP_TYPE}.
+   * @deprecated please use the `renderMedia` prop
    */
-  media: index.default.oneOfType([index.default.shape({
+  media: propsHelper.deprecateProp(index.default.oneOfType([index.default.shape({
     render: index.default.func
   }), index.default.shape({
     filePaths: index.default.arrayOf(index.default.string)
-  })]),
+  })]), ''),
   /**
    * The labels used to link to the stackable Coachmarks.
    */
@@ -187,6 +195,10 @@ exports.CoachmarkStackHome.propTypes = {
    * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
    */
   portalTarget: index.default.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func,
   /**
    * The title of the Coachmark.
    */

package/lib/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -8,7 +8,7 @@ import React, { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'r
 import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';
 export interface StepsContextType {
     currentStep: number;
-    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit>>;
+    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit | undefined>>;
     setIsDisabled: Dispatch<SetStateAction<boolean>>;
     setOnPrevious: (fn: any) => void;
     setOnNext: (fn: any) => void;

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -107,7 +107,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
-  var _useState25 = React.useState({}),
+  var _useState25 = React.useState(),
     _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
     experimentalSecondarySubmit = _useState26[0],
     setExperimentalSecondarySubmit = _useState26[1];
@@ -178,7 +178,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isSubmitting: isSubmitting,
     componentBlockClass: blockClass,
     experimentalSecondarySubmit: experimentalSecondarySubmit,
-    experimentalSecondarySubmitText: experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
+    experimentalSecondarySubmitText: experimentalSecondarySubmit !== null && experimentalSecondarySubmit !== void 0 && experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
     setCreateComponentActions: setCreateTearsheetActions
   });
   return /*#__PURE__*/React.createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), rest, {

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -84,7 +84,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   React.useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnMount(onMount);
-      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(_rollupPluginBabelHelpers.objectSpread2({}, experimentalSecondarySubmit));
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
   }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
 
@@ -120,8 +120,11 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
+
+      //Handle props for experimentalSecondarySubmit button, depending on state change
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
-  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue]);
+  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue, experimentalSecondarySubmit]);
   var renderDescription = function renderDescription() {
     if (description) {
       if (typeof description === 'string') {

package/lib/components/EmptyStates/assets/ErrorIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _path, _path2, _path3, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _path4;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,

package/lib/components/EmptyStates/assets/NoDataIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _path, _path2, _path3, _path4, _path5, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _path6, _path7, _path8;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,

package/lib/components/EmptyStates/assets/NoTagsIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _stop27, _stop28, _path, _path2, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _stop36, _stop37, _stop38, _stop39, _stop40, _stop41, _stop42, _stop43, _stop44, _stop45, _stop46, _stop47, _stop48, _stop49, _stop50, _stop51, _stop52, _stop53, _stop54, _stop55, _stop56, _stop57, _stop58, _stop59, _stop60, _stop61, _stop62, _stop63, _stop64, _stop65, _stop66, _path3;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",

package/lib/components/EmptyStates/assets/NotFoundIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _path, _path2, _stop24, _stop25, _stop26, _stop27, _stop28, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _stop36, _stop37, _stop38, _stop39, _stop40, _stop41, _stop42, _stop43, _stop44, _stop45, _stop46, _stop47, _stop48, _path3;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,

package/lib/components/EmptyStates/assets/NotificationsIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _path, _path2, _path3, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _stop27, _stop28, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _stop36, _stop37, _stop38, _stop39, _stop40, _stop41, _path4;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _path, _path2, _path3, _linearGradient, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _stop27, _stop28, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _path4;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",

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;
     /**