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

package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js

@@ -50,7 +50,7 @@ exports.HTTPErrorOther = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 /**@ts-ignore*/
 exports.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/lib/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/lib/components/InlineTip/InlineTip.js

@@ -20,7 +20,7 @@ var settings = require('../../settings.js');
 var uuidv4 = require('../../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(settings.pkg.prefix, "--inline-tip");
@@ -58,6 +58,7 @@ exports.InlineTip = /*#__PURE__*/React.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,
@@ -68,6 +69,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$withLeftGutter = _ref.withLeftGutter,
     withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var hasMedia = renderMedia || media;
   var _useState = React.useState(collapsible),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
@@ -77,7 +79,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return utils.getComponentText(React.Children.toArray(children));
   }, [children]);
   var childrenToRender = children;
-  if (!media && collapsible && isCollapsed) {
+  if (!hasMedia && collapsible && isCollapsed) {
     childrenToRender = /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__preview-text")
     }, previewText);
@@ -89,7 +91,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.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"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
@@ -102,7 +104,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: "lg"
   }, _Close || (_Close = /*#__PURE__*/React.createElement(icons.Close, {
     size: 16
-  })))), (!media && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
+  })))), (!hasMedia && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__icon-idea"),
     tabIndex: -1
   }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
@@ -118,7 +120,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__secondary-btn")
   }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React.createElement("footer", {
     className: "".concat(blockClass, "__footer")
-  }, collapsible && !media && /*#__PURE__*/React.createElement(react.Button, {
+  }, collapsible && !hasMedia && /*#__PURE__*/React.createElement(react.Button, {
     className: "".concat(blockClass, "__toggle-btn"),
     kind: "ghost",
     size: "md",
@@ -137,12 +139,14 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         size: 16
       }));
     }
-  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React.createElement("div", {
+  }, tertiaryButtonLabel))), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__media")
-  }, media.render()) : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, media.render()), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__media"),
     filePaths: media.filePaths
-  })));
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, renderMedia()));
 });
 exports.InlineTip = settings.pkg.checkComponentEnabled(exports.InlineTip, componentName);
 exports.InlineTip.displayName = componentName;
@@ -188,6 +192,7 @@ exports.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: index.default.oneOfType([index.default.shape({
@@ -208,6 +213,10 @@ exports.InlineTip.propTypes = {
    * Function to call when the InlineTip is closed via the "X" button.
    */
   onClose: index.default.func,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.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/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -186,14 +186,13 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, 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
     }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.ModalHeader, {
       className: cx(headerBlockClass, headerTitle && "".concat(headerBlockClass, "--has-title"), headerClassName),
-      iconDescription: closeIconDescription,
-      buttonOnClick: handleClose
+      iconDescription: closeIconDescription
     }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h2", null, headerTitle))), !hideProgressIndicator && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "--progress")
     }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {

package/lib/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/lib/components/Nav/Nav.js

@@ -19,6 +19,10 @@ var settings = require('../../settings.js');
 var _excluded = ["activeHref", "className", "children", "heading", "label"];
 var componentName = 'Nav';
 var blockClass = "".concat(settings.pkg.prefix, "--nav");
+
+/**
+ * @deprecated This component is deprecated
+ */
 exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var activeHref = _ref.activeHref,
     className = _ref.className,
@@ -123,6 +127,10 @@ exports.Nav = /*#__PURE__*/React.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.default.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
   })));
 });
+exports.Nav.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 exports.Nav.propTypes = {
   /**
    * Hypertext reference for active page.

package/lib/components/Nav/NavItemLink.js

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

package/lib/components/PageHeader/PageHeader.js

@@ -21,6 +21,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
 var useWindowScroll = require('../../global/js/hooks/useWindowScroll.js');
 var useWindowResize = require('../../global/js/hooks/useWindowResize.js');
 var BreadcrumbWithOverflow = require('../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js');
@@ -363,6 +364,12 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var displayedBreadcrumbs = getBreadcrumbs();
+  var subtitleRef = React.useRef(null);
+  var isOverflowing = checkForOverflow.checkHeightOverflow(subtitleRef.current);
+  var subtitleContent = /*#__PURE__*/React.createElement("span", {
+    ref: subtitleRef,
+    className: "".concat(PageHeaderUtils.blockClass, "__subtitle-text")
+  }, subtitle);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
@@ -414,11 +421,14 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     blockClass: PageHeaderUtils.blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
-  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/React.createElement(react.Row, {
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle && /*#__PURE__*/React.createElement(react.Row, {
     className: "".concat(PageHeaderUtils.blockClass, "__subtitle-row")
   }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__subtitle")
-  }, subtitle)) : null, children ? /*#__PURE__*/React.createElement(react.Row, {
+  }, isOverflowing ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+    definition: subtitle,
+    className: "".concat(PageHeaderUtils.blockClass, "__subtitle-tooltip")
+  }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React.createElement(react.Row, {
     className: "".concat(PageHeaderUtils.blockClass, "__available-row")
   }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__available-column")

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -13,6 +13,7 @@ var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var react = require('@carbon/react');
 var EditInPlace = require('../EditInPlace/EditInPlace.js');
+var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
 
 var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
@@ -45,31 +46,18 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
-  var _useState = React.useState(),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isEllipsisApplied = _useState2[0],
-    setIsEllipsisApplied = _useState2[1];
-  var longTitleRef = React.useRef(undefined);
-  var titleRef = React.useRef(undefined);
-  React.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 = React.useRef();
+  var isEllipsisApplied = checkForOverflow.checkWidthOverflow(titleRef.current);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
+    var titleContent = /*#__PURE__*/React.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text);
     titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(blockClass, "__title-icon-wrapper")
     }, /*#__PURE__*/React.createElement(TitleIcon, {
@@ -92,14 +80,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       align: tooltipAlignment,
       definition: text,
       className: "".concat(blockClass, "__tooltip")
-    }, /*#__PURE__*/React.createElement("span", {
-      ref: longTitleRef,
-      className: "".concat(blockClass, "__titleText")
-    }, text)) : /*#__PURE__*/React.createElement("span", {
-      ref: titleRef,
-      className: "".concat(blockClass, "__titleText"),
-      title: !loading ? asText : null
-    }, text));
+    }, titleContent) : titleContent);
   } else {
     titleInnards = content;
     titleText = asText;

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
      */
@@ -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/lib/components/ProductiveCard/ProductiveCard.js

@@ -15,16 +15,14 @@ var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var Card = require('../Card/Card.js');
 
-var _excluded = ["actionsPlacement", "iconDescription"];
+var _excluded = ["actionsPlacement"];
 var componentName = 'ProductiveCard';
 exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
-    iconDescription = _ref.iconDescription,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
-    iconDescription: iconDescription,
     actionsPlacement: actionsPlacement,
     ref: ref,
     productive: true
@@ -50,10 +48,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,12 +60,19 @@ 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
    */
   description: index.default.oneOfType([index.default.string, index.default.object, index.default.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: index.default.string,
   /**
@@ -101,7 +102,8 @@ exports.ProductiveCard.propTypes = {
     onKeyDown: index.default.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: index.default.string,
   /**

package/lib/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
      */

package/lib/components/SidePanel/SidePanel.js

@@ -26,7 +26,7 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
+var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "decorator", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
   _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
@@ -59,6 +59,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     condensedActions = _ref.condensedActions,
     _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
+    decorator = _ref.decorator,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? blockClass : _ref$id,
     includeOverlay = _ref.includeOverlay,
@@ -337,7 +338,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-ai-label"), !!aiLabel || !!slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-decorator"), decorator), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--has-ai-label"), aiLabel), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -353,23 +354,29 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title));
   };
   var renderHeader = function renderHeader() {
-    var _slug$type, _aiLabel$type;
-    var aiLabelCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedAILabel;
+    var _slug$type, _aiLabel$type, _decorator$type;
+    var closeSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    var normalizedDecorator;
     /**
      * slug is deprecated
      * can remove this condition in future release
      */
-    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
-      normalizedAILabel = /*#__PURE__*/React.cloneElement(slug, {
+    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'AILabel') {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: aiLabelCloseSize
+        size: closeSize
       });
     }
     if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
-      normalizedAILabel = /*#__PURE__*/React.cloneElement(aiLabel, {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(aiLabel, {
         // aiLabel size is sm unless actions and size > md
-        size: aiLabelCloseSize
+        size: closeSize
+      });
+    }
+    if ((decorator === null || decorator === void 0 || (_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel') {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(decorator, {
+        // decorator size is sm unless actions and size > md
+        size: closeSize
       });
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -377,7 +384,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
-      size: aiLabelCloseSize,
+      size: closeSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React.createElement(icons.ArrowLeft, _rollupPluginBabelHelpers.extends({
@@ -391,8 +398,8 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__ai-label-and-close")
-    }, normalizedAILabel, /*#__PURE__*/React.createElement(react.IconButton, {
+      className: "".concat(blockClass, "__decorator-and-close")
+    }, normalizedDecorator, /*#__PURE__*/React.createElement(react.IconButton, {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
@@ -495,7 +502,13 @@ var deprecatedProps = {
    * **deprecated**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
-  slug: index.default.node
+  slug: index.default.node,
+  /**
+   * **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: index.default.node
 };
 exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**

package/lib/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,5 +1,6 @@
 /**
  * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
  */
 export let StatusIndicator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -29,6 +29,7 @@ var defaults = {
 
 /**
  * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
  */
 exports.StatusIndicator = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -59,6 +60,10 @@ exports.StatusIndicator = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, retryLabel));
 });
+exports.StatusIndicator.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.StatusIndicator = settings.pkg.checkComponentEnabled(exports.StatusIndicator, componentName);

package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts

@@ -1,5 +1,6 @@
 /**
  * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
  */
 export let StatusIndicatorStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/StatusIndicator/StatusIndicatorStep.js

@@ -28,6 +28,7 @@ var defaults = {
 
 /**
  * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
  */
 exports.StatusIndicatorStep = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -56,6 +57,10 @@ exports.StatusIndicatorStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__error-message")
   }, errorMessage));
 });
+exports.StatusIndicatorStep.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.StatusIndicatorStep = settings.pkg.checkComponentEnabled(exports.StatusIndicatorStep, componentName);

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -45,6 +45,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var backupRef = React.useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;
+  var filePathStr = filePaths === null || filePaths === void 0 ? void 0 : filePaths.join(); //converting the array to string will avoid unwanted useEffect trigger.
   // load animation source
   React.useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -87,7 +88,8 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return _loadArtifact.apply(this, arguments);
     }
     loadArtifact();
-  }, [filePaths]);
+    // eslint-disable-next-line
+  }, [filePathStr]);
   React.useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;

package/lib/components/TagOverflow/TagOverflow.js

@@ -191,9 +191,6 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
           return itemRefHandler(id, node);
         },
         key: id
-      }, /*#__PURE__*/React.createElement(react.Tooltip, {
-        align: overflowAlign,
-        label: label
       }, typeof _onClose === 'function' || filter ? /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType,
@@ -204,7 +201,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       })) : /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType
-      }), label)));
+      }), label));
     }
   }), /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__indicator"),

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -19,6 +19,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
+     */
+    currentStep?: number;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */