@carbon/ibm-products 2.57.0 → 2.57.1

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -18,7 +18,7 @@ var EmptyStateContent = require('../EmptyStateContent.js');
 var ErrorIllustration = require('../assets/ErrorIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationDescription", "illustrationTheme", "link", "size", "headingAs", "subtitle", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'ErrorEmptyState';
@@ -35,6 +35,8 @@ exports.ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? EmptyState.defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? EmptyState.defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -49,6 +51,7 @@ exports.ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -79,6 +82,10 @@ exports.ErrorEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NoDataEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NoDataEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -18,7 +18,7 @@ var EmptyStateContent = require('../EmptyStateContent.js');
 var NoDataIllustration = require('../assets/NoDataIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
@@ -36,6 +36,8 @@ exports.NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? EmptyState.defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? EmptyState.defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -50,6 +52,7 @@ exports.NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -80,6 +83,10 @@ exports.NoDataEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NoTagsEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NoTagsEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -18,7 +18,7 @@ var EmptyStateContent = require('../EmptyStateContent.js');
 var NoTagsIllustration = require('../assets/NoTagsIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NoTagsEmptyState';
@@ -35,6 +35,8 @@ exports.NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? EmptyState.defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? EmptyState.defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -49,6 +51,7 @@ exports.NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title = ''
   }));
@@ -79,6 +82,10 @@ exports.NoTagsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NotFoundEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NotFoundEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -18,7 +18,7 @@ var EmptyStateContent = require('../EmptyStateContent.js');
 var NotFoundIllustration = require('../assets/NotFoundIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NotFoundEmptyState';
@@ -35,6 +35,8 @@ exports.NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? EmptyState.defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? EmptyState.defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -49,6 +51,7 @@ exports.NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -79,6 +82,10 @@ exports.NotFoundEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NotificationsEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NotificationsEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -18,7 +18,7 @@ var EmptyStateContent = require('../EmptyStateContent.js');
 var NotificationsIllustration = require('../assets/NotificationsIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NotificationsEmptyState';
@@ -35,6 +35,8 @@ exports.NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? EmptyState.defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? EmptyState.defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -49,6 +51,7 @@ exports.NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref,
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -79,6 +82,10 @@ exports.NotificationsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface UnauthorizedEmptyStateProps {
@@ -44,6 +44,10 @@ export interface UnauthorizedEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -18,7 +18,7 @@ var EmptyStateContent = require('../EmptyStateContent.js');
 var UnauthorizedIllustration = require('../assets/UnauthorizedIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
@@ -36,6 +36,8 @@ exports.UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, r
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? EmptyState.defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? EmptyState.defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -50,6 +52,7 @@ exports.UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, r
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -80,6 +83,10 @@ exports.UnauthorizedEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

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

@@ -33,7 +33,8 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,

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

@@ -33,7 +33,8 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,

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

@@ -34,7 +34,8 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,

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

@@ -33,7 +33,8 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,

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

@@ -32,7 +32,8 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     width: 80,
     height: 80,
     viewBox: "0 0 80 80",
-    className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)])
+    className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,

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

@@ -34,7 +34,8 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,

package/lib/components/FilterSummary/FilterSummary.js

@@ -130,7 +130,7 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: localRef,
     className: cx([blockClass, className], _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expanded"), multiline))
   }), /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
-    mode: "wait"
+    exitBeforeEnter: true
   }, !multiline && renderTagSet('single'), multiline && renderTagSet('multiline')), /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",

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

@@ -9,11 +9,6 @@ import PropTypes from 'prop-types';
 import { TearsheetAction } from './Tearsheet';
 interface TearsheetShellProps extends PropsWithChildren {
     actions?: TearsheetAction[];
-    /**
-     * 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;
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.
@@ -23,6 +18,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
      */
     currentStep?: number;
+    /**
+     * Optional prop that allows you to pass any component.
+     */
+    decorator?: ReactNode;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */
@@ -36,6 +35,11 @@ interface TearsheetShellProps extends PropsWithChildren {
      * this prop to either true or false.
      */
     hasCloseIcon?: boolean;
+    /**
+     * To indicate an error occurred in the Tearsheet step
+     * Mainly used by CreateTearsheet component to pass error state
+     */
+    hasError?: boolean;
     /**
      * The content for the header actions area, displayed alongside the title in
      * the header area of the tearsheet. This is typically a drop-down, or a set
@@ -110,7 +114,7 @@ interface TearsheetShellProps extends PropsWithChildren {
     title?: ReactNode;
     verticalPosition?: 'normal' | 'lower';
     /**
-     * @deprecated Property replaced by `aiLabel`
+     * @deprecated Property replaced by `decorator`
      */
     slug?: ReactNode;
 }
@@ -135,7 +139,7 @@ export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetS
 export declare const portalType: PropTypes.Requireable<object>;
 export declare const deprecatedProps: {
     /**
-     *  @deprecated Property replaced by `aiLabel`
+     *  @deprecated Property replaced by `decorator`
      */
     slug: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
     /**

package/lib/components/Tearsheet/TearsheetShell.js

@@ -23,7 +23,7 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "decorator", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "hasError", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
@@ -65,7 +65,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  * */
 var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
-    aiLabel = _ref.aiLabel,
+    decorator = _ref.decorator,
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
@@ -73,6 +73,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     currentStep = _ref.currentStep,
     description = _ref.description,
     hasCloseIcon = _ref.hasCloseIcon,
+    hasError = _ref.hasError,
     headerActions = _ref.headerActions,
     influencer = _ref.influencer,
     influencerPosition = _ref.influencerPosition,
@@ -144,7 +145,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       // Focusing the first element or selectorPrimaryFocus element
       useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
-  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus]);
+  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus, hasError]);
   React.useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -191,7 +192,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [open, size]);
   if (position <= depth) {
-    var _prevDepth$current;
+    var _prevDepth$current, _decorator$type, _decorator$type2;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -212,10 +213,10 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
-      className: cx(bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), aiLabel), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
-      slug: aiLabel || deprecated_slug,
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), !!decorator && ((_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel'), "".concat(bc, "--has-decorator"), !!decorator && ((_decorator$type2 = decorator['type']) === null || _decorator$type2 === void 0 ? void 0 : _decorator$type2.displayName) !== 'AILabel'), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      decorator: decorator || deprecated_slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
@@ -293,9 +294,9 @@ var portalType = typeof Element === 'undefined' ? index.default.object :
 index.default.instanceOf(Element);
 var deprecatedProps = {
   /**
-   *  @deprecated Property replaced by `aiLabel`
+   *  @deprecated Property replaced by `decorator`
    */
-  slug: propsHelper.deprecateProp(index.default.node, 'Property replaced by `aiLabel`'),
+  slug: propsHelper.deprecateProp(index.default.node, 'Property replaced by `decorator`'),
   /**
    * **Deprecated**
    *
@@ -340,11 +341,6 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick
   }))),
-  /**
-   * 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]),
   /**
    * The main content of the tearsheet.
    */
@@ -365,6 +361,10 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
       hasCloseIcon = _ref4.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
   }),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */

package/lib/global/js/hooks/useFocus.js

@@ -18,6 +18,7 @@ var getSpecificElement = function getSpecificElement(parentEl, elementId) {
   return elementId && !(element !== null && element !== void 0 && element.disabled) ? element : null;
 };
 var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
+  var _getFocusable2, _getFocusable3, _getFocusable4, _getFocusable5;
   var carbonPrefix = react.usePrefix();
   var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
   var sidePanelBaseClass = "".concat(settings.pkg.prefix, "--side-panel");
@@ -31,15 +32,15 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var querySelect = "select".concat(notQuery);
   var queryTextarea = "textarea".concat(notQuery);
   var queryLink = "[href]".concat(notQuery);
+  var queryAnchor = "a".concat(notQuery);
   var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
   var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
   // Final query
-  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
-  var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryAnchor, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
   var getFocusable = React.useCallback(function () {
-    var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
+    var _modalRef$current, _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
     // Selecting all focusable elements based on the above conditions
-    var focusableElements = modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelectorAll("".concat(query));
+    var focusableElements = modalRef === null || modalRef === void 0 || (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 ? void 0 : _modalRef$current.querySelectorAll("".concat(query));
     if ((_focusableElements = focusableElements) !== null && _focusableElements !== void 0 && _focusableElements.length) {
       focusableElements = Array.prototype.filter.call(focusableElements, function (el) {
         var _window;
@@ -49,17 +50,17 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
-    var specified = getSpecificElement(modalEl, selectorPrimaryFocus);
+    var specified = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
     return {
       first: first,
       last: last,
       all: all,
       specified: specified
     };
-  }, [modalEl, query, selectorPrimaryFocus]);
+  }, [modalRef, query, selectorPrimaryFocus]);
   React.useEffect(function () {
     getFocusable();
-  }, [getFocusable]);
+  }, [getFocusable, modalRef]);
   var handleKeyDown = /*#__PURE__*/function () {
     var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
       var _document, _document2, _getFocusable, first, last, all;
@@ -97,10 +98,10 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     };
   }();
   return {
-    firstElement: getFocusable().first,
-    lastElement: getFocusable().last,
-    allElements: getFocusable().all,
-    specifiedElement: getFocusable().specified,
+    firstElement: (_getFocusable2 = getFocusable()) === null || _getFocusable2 === void 0 ? void 0 : _getFocusable2.first,
+    lastElement: (_getFocusable3 = getFocusable()) === null || _getFocusable3 === void 0 ? void 0 : _getFocusable3.last,
+    allElements: (_getFocusable4 = getFocusable()) === null || _getFocusable4 === void 0 ? void 0 : _getFocusable4.all,
+    specifiedElement: (_getFocusable5 = getFocusable()) === null || _getFocusable5 === void 0 ? void 0 : _getFocusable5.specified,
     keyDownListener: handleKeyDown,
     getFocusable: getFocusable
   };
@@ -113,15 +114,16 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
  * @param {string | undefined} selectorPrimaryFocus
  */
 var claimFocus = function claimFocus(firstElement, modalRef) {
+  var _window2, _specifiedEl;
   var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-  if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-    var _window2;
-    var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-    if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-      setTimeout(function () {
-        return specifiedEl.focus();
-      }, 0);
-    }
+  var specifiedEl;
+  if (selectorPrimaryFocus) {
+    specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+  }
+  if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none' && ((_specifiedEl = specifiedEl) === null || _specifiedEl === void 0 ? void 0 : _specifiedEl.tabIndex) !== -1) {
+    setTimeout(function () {
+      return specifiedEl.focus();
+    }, 0);
   } else {
     setTimeout(function () {
       return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();