@carbon/ibm-products 2.43.2-canary.32 → 2.43.2-canary.321

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

@@ -16,11 +16,15 @@ type overflowAction = {
 };
 type PlacementType = 'top' | 'bottom';
 type ClickZoneType = 'one' | 'two' | 'three';
-interface ProductiveCardProps extends PropsWithChildren {
+export interface ProductiveCardProps 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;
     /**
      * Determines if the action icons are on the top or bottom of the card
      */
@@ -65,6 +69,10 @@ interface ProductiveCardProps extends PropsWithChildren {
      * Aria label prop required for OverflowMenu
      */
     overflowAriaLabel?: string;
+    /**
+     * Determines if the primary button is enabled or not
+     */
+    primaryButtonDisabled?: boolean;
     /**
      * Optionally specify an href for your Button to become an <a> element
      */
@@ -100,6 +108,7 @@ 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
      */
     slug?: ReactNode | boolean;
     /**
@@ -110,6 +119,10 @@ interface ProductiveCardProps extends PropsWithChildren {
      * Determines title size
      */
     titleSize?: 'default' | 'large';
+    /**
+     * Tooltip icon description
+     */
+    iconDescription?: string;
 }
 export declare let ProductiveCard: React.ForwardRefExoticComponent<ProductiveCardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/ProductiveCard/ProductiveCard.js

@@ -7,20 +7,22 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { Card } from '../Card/Card.js';
 
-var _excluded = ["actionsPlacement"];
+var _excluded = ["actionsPlacement", "iconDescription"];
 var componentName = 'ProductiveCard';
 var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
+    iconDescription = _ref.iconDescription,
     rest = _objectWithoutProperties(_ref, _excluded);
   var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React__default.createElement(Card, _extends({}, _objectSpread2(_objectSpread2({}, validProps), {}, {
+    iconDescription: iconDescription,
     actionsPlacement: actionsPlacement,
     ref: ref,
     productive: true
@@ -46,6 +48,10 @@ ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -62,6 +68,10 @@ ProductiveCard.propTypes = {
    * Optional header description
    */
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
+  /**
+   * Tooltip icon description
+   */
+  iconDescription: PropTypes.string,
   /**
    * Optional label for the top of the card
    */
@@ -92,6 +102,10 @@ ProductiveCard.propTypes = {
    * Aria label prop required for OverflowMenu
    */
   overflowAriaLabel: PropTypes.string,
+  /**
+   * Determines if the primary button is enabled or not
+   */
+  primaryButtonDisabled: PropTypes.bool,
   /**
    * Optionally specify an href for your Button to become an <a> element
    */

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

@@ -1 +1,2 @@
-export { ProductiveCard } from "./ProductiveCard";
+export { ProductiveCard } from './ProductiveCard';
+export type { ProductiveCardProps } from './ProductiveCard';

package/es/components/RemoveModal/RemoveModal.d.ts

@@ -1,11 +1,11 @@
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
 import { ComposedModal } from '@carbon/react';
-interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
+import React, { ReactNode } from 'react';
+export interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
     /**
      * The content to be displayed in the body of the modal
      */
-    body: string;
+    body: ReactNode;
     /**
      * Optional classname
      */
@@ -82,4 +82,3 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
 export declare let RemoveModal: React.ForwardRefExoticComponent<RemoveModalProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export {};

package/es/components/RemoveModal/RemoveModal.js

@@ -6,14 +6,14 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ComposedModal, ModalHeader, ModalBody, TextInput, ModalFooter, Button } from '@carbon/react';
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { ComposedModal, ModalHeader, ModalBody, TextInput, ModalFooter, Button } from '@carbon/react';
-import PropTypes from '../../node_modules/prop-types/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
 var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
@@ -91,9 +91,9 @@ var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: title,
     label: label,
     iconDescription: iconDescription
-  }), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement("p", {
+  }), /*#__PURE__*/React__default.createElement(ModalBody, null, typeof body === 'string' ? /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(blockClass, "__body")
-  }, body), textConfirmation && /*#__PURE__*/React__default.createElement(TextInput, {
+  }, body) : body, textConfirmation && /*#__PURE__*/React__default.createElement(TextInput, {
     id: "".concat(idRef.current, "-confirmation-input"),
     className: "".concat(blockClass, "__input"),
     invalidText: inputInvalidText,
@@ -122,7 +122,7 @@ RemoveModal.propTypes = {
   /**
    * The content to be displayed in the body of the modal
    */
-  body: PropTypes.string.isRequired,
+  body: PropTypes.node.isRequired,
   /**
    * Optional classname
    */

package/es/components/RemoveModal/index.d.ts

@@ -1 +1,2 @@
-export { RemoveModal } from "./RemoveModal";
+export { RemoveModal } from './RemoveModal';
+export type { RemoveModalProps } from './RemoveModal';

package/es/components/Saving/Saving.d.ts

@@ -7,7 +7,7 @@
 import React from 'react';
 type Type = 'manual' | 'auto';
 type Status = 'default' | 'in-progress' | 'success' | 'fail';
-interface SavingProps {
+export interface SavingProps {
     /**
      * Provide an optional class to be applied to the containing node.
      */

package/es/components/Saving/Saving.js

@@ -6,11 +6,11 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { InlineLoading, Button } from '@carbon/react';
+import { ErrorOutline, Save, CheckmarkOutline, ErrorFilled } from '@carbon/react/icons';
 import React__default, { forwardRef } from 'react';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { InlineLoading, Button } from '@carbon/react';
-import { Save, CheckmarkOutline, ErrorFilled, ErrorOutline } from '@carbon/react/icons';
-import PropTypes from '../../node_modules/prop-types/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 

package/es/components/Saving/index.d.ts

@@ -1 +1,2 @@
-export { Saving } from "./Saving";
+export { Saving } from './Saving';
+export type { SavingProps } from './Saving';

package/es/components/ScrollGradient/ScrollGradient.js

@@ -7,12 +7,12 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg, carbon } from '../../settings.js';
 import { throttle } from 'lodash';
-import { ScrollStates, getScrollState, ScrollDirection, useIsOverflow } from './constants.js';
+import { ScrollStates, getScrollState, useIsOverflow, ScrollDirection } from './constants.js';
 
 var _excluded = ["children", "className", "color", "onScroll", "scrollElementClassName", "getScrollElementRef", "hideStartGradient"];
 var blockClass = "".concat(pkg.prefix, "--scroll-gradient");
@@ -50,8 +50,8 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState4 = _slicedToArray(_useState3, 2),
     horizontalPosition = _useState4[0],
     setHorizontalPosition = _useState4[1];
-  var scrollContainer = useRef();
-  var contentChildrenContainer = useRef();
+  var scrollContainer = useRef(undefined);
+  var contentChildrenContainer = useRef(undefined);
   var updateScrollState = throttle(function () {
     var updatedVerticalVal = getScrollState(scrollContainer.current, ScrollDirection.Y);
     var updatedHorizontalVal = getScrollState(scrollContainer.current, ScrollDirection.X);

package/es/components/SearchBar/SearchBar.d.ts

@@ -7,7 +7,7 @@
 import React, { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 type Scopes = string[] | object[];
-interface SearchBarProps extends PropsWithChildren {
+export interface SearchBarProps extends PropsWithChildren {
     /** @type {string} Optional additional class name. */
     className?: string;
     /** @type {string} The label text for the search text input. */
@@ -17,7 +17,7 @@ interface SearchBarProps extends PropsWithChildren {
      */
     hideScopesLabel?: boolean;
     /** @type {string} The label text for the search text input. */
-    labelText?: string;
+    labelText: string;
     /** @type {Function} Function handler for when the user changes their query search. */
     onChange?: (event: any) => void;
     /** @type {Function} Function handler for when the user submits a search. */

package/es/components/SearchBar/SearchBar.js

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { MultiSelect, Search, Button } from '@carbon/react';
 import React__default, { useState, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import { MultiSelect, Search, Button } from '@carbon/react';
 
 var _excluded = ["className", "clearButtonLabelText", "hideScopesLabel", "labelText", "onChange", "onSubmit", "placeholderText", "scopes", "scopesTypeLabel", "scopeToString", "selectedScopes", "sortItems", "submitLabel", "translateWithId", "value"];
 
@@ -135,7 +135,7 @@ var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   })) : null, /*#__PURE__*/React__default.createElement(Search, {
     className: "".concat(blockClass, "__input"),
     closeButtonLabelText: clearButtonLabelText,
-    labelText: labelText || '',
+    labelText: labelText,
     name: "search-input",
     onChange: handleInputChange,
     placeholder: placeholderText,
@@ -188,7 +188,7 @@ SearchBar.propTypes = _objectSpread2({
    */
   hideScopesLabel: PropTypes.bool,
   /** @type {string} The label text for the search text input. */
-  labelText: PropTypes.string,
+  labelText: PropTypes.string.isRequired,
   /** @type {Function} Function handler for when the user changes their query search. */
   onChange: PropTypes.func,
   /** @type {Function} Function handler for when the user submits a search. */

package/es/components/SearchBar/index.d.ts

@@ -1 +1,8 @@
-export { SearchBar } from "./SearchBar";
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { SearchBar } from './SearchBar';
+export type { SearchBarProps } from './SearchBar';

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

@@ -110,9 +110,14 @@ type SidePanelBaseProps = {
      */
     slideIn?: boolean;
     /**
+     * @deprecated please use the `aiLabel` prop
      *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
      */
     slug?: 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.
+     */
+    aiLabel?: ReactNode;
     /**
      * Sets the subtitle text
      */
@@ -143,7 +148,7 @@ type SidePanelSlideInProps = {
      */
     selectorPageContent: string;
 };
-type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
+export type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */

package/es/components/SidePanel/SidePanel.js

@@ -5,25 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowLeft, Close } from '@carbon/react/icons';
+import { Button, IconButton } from '@carbon/react';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import { actionSetVariants, overlayVariants, panelVariants } from './motion/variants.js';
+import { ActionSet } from '../ActionSet/ActionSet.js';
+import PropTypes from '../../_virtual/index.js';
+import { SIDE_PANEL_SIZES } from './constants.js';
+import { allPropTypes } from '../../global/js/utils/props-helper.js';
 import cx from 'classnames';
-import { moderate02 } from '@carbon/motion';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { allPropTypes } from '../../global/js/utils/props-helper.js';
-import { pkg } from '../../settings.js';
-import { SIDE_PANEL_SIZES } from './constants.js';
-import { Button, IconButton } from '@carbon/react';
-import { ArrowLeft, Close } from '@carbon/react/icons';
-import { actionSetVariants, overlayVariants, panelVariants } from './motion/variants.js';
+import { moderate02 } from '@carbon/motion';
 import pconsole from '../../global/js/utils/pconsole.js';
-import { ActionSet } from '../ActionSet/ActionSet.js';
+import { pkg } from '../../settings.js';
+import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
+import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
-import { useFocus } from '../../global/js/hooks/useFocus.js';
 
-var _excluded = ["actionToolbarButtons", "actions", "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", "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(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
@@ -44,9 +45,9 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     _ref$animateTitle = _ref.animateTitle,
     animateTitle = _ref$animateTitle === void 0 ? defaults.animateTitle : _ref$animateTitle,
     children = _ref.children,
@@ -111,13 +112,18 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var previousOpen = usePreviousValue(open);
-  var shouldReduceMotion = useReducedMotion();
+  var shouldReduceMotion = usePrefersReducedMotion();
 
   // Title animation on scroll related state
   var _useState7 = useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
     labelTextHeight = _useState8[0],
     setLabelTextHeight = _useState8[1];
+  var handleEscapeKey = function handleEscapeKey(event) {
+    if (event.key === 'Escape' && open) {
+      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+    }
+  };
   useEffect(function () {
     if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
       setDoAnimateTitle(false);
@@ -154,9 +160,6 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       titleItemsStyles(animationProgress);
     }
   }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
-  var reducedMotion = typeof document !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
 
   // scroll panel to top going between steps
   useEffect(function () {
@@ -193,7 +196,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [launcherButtonRef, open, previousOpen]);
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
     var canDoAnimateTitle = false;
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
       var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
       var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
@@ -209,8 +212,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
       var scrollEl = innerContentRef.current;
       if (scrollEl) {
-        var _window2;
-        var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
+        var _window;
+        var innerComputed = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(innerContentRef.current);
         var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom) : 0;
         canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
       }
@@ -228,12 +231,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Calculate scroll distances
   useEffect(function () {
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
       checkSetDoAnimateTitle();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
+  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, shouldReduceMotion, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   useEffect(function () {
@@ -269,10 +272,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
   useEffect(function () {
-    if (reducedMotion.matches) {
+    if (shouldReduceMotion) {
       setAnimationComplete(true);
     }
-  }, [reducedMotion.matches]);
+  }, [shouldReduceMotion]);
 
   // initializes the side panel to open
   var onAnimationStart = function onAnimationStart() {
@@ -291,10 +294,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, [open, placement, selectorPageContent, slideIn]);
   useEffect(function () {
-    if (!open && previousState && previousState['open'] && reducedMotion.matches) {
+    if (!open && previousState && previousState['open'] && shouldReduceMotion) {
       onUnmount === null || onUnmount === void 0 || onUnmount();
     }
-  }, [open, onUnmount, reducedMotion.matches, previousState]);
+  }, [open, onUnmount, shouldReduceMotion, previousState]);
 
   // used to set margins of content for slide in panel version
   useEffect(function () {
@@ -307,22 +310,22 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-end ".concat(moderate02) : '';
         pageContentElement.style.marginInlineEnd = SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginInlineStart = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-start ".concat(moderate02) : '';
         pageContentElement.style.marginInlineStart = SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
+  }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
   useEffect(function () {
     if (open) {
       setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          var _document;
-          var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
-          if (primeFocusEl) {
+        if (selectorPrimaryFocus && getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
+          var _window2;
+          var primeFocusEl = getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
+          if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
             primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
           }
         } else if (!slideIn) {
@@ -330,9 +333,9 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         }
       }, 0);
     }
-  }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
+  }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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 renderTitle = function renderTitle() {
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -341,29 +344,38 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React__default.createElement("h2", {
+    }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React__default.createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
     }, title));
   };
   var renderHeader = function renderHeader() {
-    var _slug$type;
-    var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedSlug;
+    var _slug$type, _aiLabel$type;
+    var aiLabelCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    var normalizedAILabel;
+    /**
+     * 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') {
-      normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      normalizedAILabel = /*#__PURE__*/React__default.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: slugCloseSize
+        size: aiLabelCloseSize
+      });
+    }
+    if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
+      normalizedAILabel = /*#__PURE__*/React__default.cloneElement(aiLabel, {
+        // aiLabel size is sm unless actions and size > md
+        size: aiLabelCloseSize
       });
     }
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
+      className: cx("".concat(blockClass, "__header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), shouldReduceMotion), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React__default.createElement(Button, {
-      "aria-label": navigationBackIconDescription,
       kind: "ghost",
-      size: slugCloseSize,
+      size: aiLabelCloseSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React__default.createElement(ArrowLeft, _extends({
@@ -377,11 +389,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__slug-and-close")
-    }, normalizedSlug, /*#__PURE__*/React__default.createElement(IconButton, {
+      className: "".concat(blockClass, "__ai-label-and-close")
+    }, normalizedAILabel, /*#__PURE__*/React__default.createElement(IconButton, {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
+      onKeyDown: slideIn ? undefined : handleEscapeKey,
       title: closeIconDescription,
       "aria-label": closeIconDescription,
       ref: closeRef,
@@ -434,6 +447,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!slideIn) {
+      handleEscapeKey(event);
+      keyDownListener(event);
+    }
+  };
   return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
@@ -450,7 +469,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: slideIn ? undefined : keyDownListener
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
@@ -469,7 +488,14 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
 // Return a placeholder if not released and not enabled by feature flag
 SidePanel = pkg.checkComponentEnabled(SidePanel, componentName);
-SidePanel.propTypes = {
+var deprecatedProps = {
+  /**
+   * **deprecated**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: PropTypes.node
+};
+SidePanel.propTypes = _objectSpread2({
   /**
    * Sets the action toolbar buttons
    */
@@ -606,10 +632,6 @@ SidePanel.propTypes = {
    */
   /**@ts-ignore*/
   slideIn: PropTypes.bool,
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
-   */
-  slug: PropTypes.node,
   /**
    * Sets the subtitle text
    */
@@ -622,7 +644,7 @@ SidePanel.propTypes = {
     var labelText = _ref7.labelText;
     return labelText;
   })
-};
+}, deprecatedProps);
 SidePanel.displayName = componentName;
 
 export { SidePanel };