@carbon/ibm-products 2.23.0 → 2.25.0

package/lib/components/SidePanel/SidePanel.js

@@ -1,48 +1,40 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SidePanel = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _framerMotion = require("framer-motion");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
-var _motion = require("@carbon/motion");
-var _devtools = require("../../global/js/utils/devtools");
-var _propsHelper = require("../../global/js/utils/props-helper");
-var _wrapFocus = _interopRequireDefault(require("../../global/js/utils/wrapFocus"));
-var _settings = require("../../settings");
-var _constants = require("./constants");
-var _hooks = require("../../global/js/hooks");
-var _react2 = require("@carbon/react");
-var _icons = require("@carbon/react/icons");
-var _ActionSet = require("../ActionSet");
-var _variants = require("./motion/variants");
-var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
-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"],
-  _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 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.
  */
-// Import portions of React that are needed.
-// Other standard imports.
-// Carbon and package components we use.
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var blockClass = "".concat(_settings.pkg.prefix, "--side-panel");
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var framerMotion = require('framer-motion');
+var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/classnames/index.js');
+var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var carbonMotion = require('@carbon/motion');
+var devtools = require('../../global/js/utils/devtools.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var wrapFocus = require('../../global/js/utils/wrapFocus.js');
+var settings = require('../../settings.js');
+var constants = require('./constants.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+var variants = require('./motion/variants.js');
+var pconsole = require('../../global/js/utils/pconsole.js');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
+var ActionSet = require('../ActionSet/ActionSet.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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"],
+  _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
+var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -60,7 +52,7 @@ 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 = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
@@ -94,40 +86,39 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     slug = _ref.slug,
     subtitle = _ref.subtitle,
     title = _ref.title,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     animationComplete = _useState2[0],
     setAnimationComplete = _useState2[1];
-  var localRef = (0, _react.useRef)();
+  var localRef = React.useRef();
   var sidePanelRef = ref || localRef;
-  var overlayRef = (0, _react.useRef)();
-  var startTrapRef = (0, _react.useRef)();
-  var endTrapRef = (0, _react.useRef)();
-  var innerContentRef = (0, _react.useRef)();
-  var closeRef = (0, _react.useRef)();
-  var animatedScrollRef = (0, _react.useRef)();
-  var headerRef = (0, _react.useRef)();
-  var titleRef = (0, _react.useRef)();
-  var collapsedTitleRef = (0, _react.useRef)();
-  var labelTextRef = (0, _react.useRef)();
-  var subtitleRef = (0, _react.useRef)();
-  var previousState = (0, _hooks.usePreviousValue)({
+  var overlayRef = React.useRef();
+  var startTrapRef = React.useRef();
+  var endTrapRef = React.useRef();
+  var innerContentRef = React.useRef();
+  var closeRef = React.useRef();
+  var animatedScrollRef = React.useRef();
+  var headerRef = React.useRef();
+  var titleRef = React.useRef();
+  var labelTextRef = React.useRef();
+  var subtitleRef = React.useRef();
+  var previousState = usePreviousValue.usePreviousValue({
     size: size,
     open: open
   });
-  var _useState3 = (0, _react.useState)(-1),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+  var _useState3 = React.useState(-1),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     scrollAnimationDistance = _useState4[0],
     setScrollAnimationDistance = _useState4[1];
-  var _useState5 = (0, _react.useState)(true),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+  var _useState5 = React.useState(true),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     doAnimateTitle = _useState6[0],
     setDoAnimateTitle = _useState6[1];
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     setDoAnimateTitle(animateTitle);
   }, [animateTitle]);
-  var handleScroll = (0, _react.useCallback)(function () {
+  var handleScroll = React.useCallback(function () {
     var scrollTop = animatedScrollRef.current.scrollTop;
     sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance);
   }, [scrollAnimationDistance, sidePanelRef]);
@@ -136,7 +127,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   };
 
   // scroll panel to top going between steps
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (sidePanelRef && sidePanelRef.current) {
       var _animatedScrollRef$cu;
       var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
@@ -151,7 +142,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   }, [currentStep, sidePanelRef, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
 
   // set initial focus when side panel opens
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     var initialFocus = function initialFocus(focusContainerElement) {
       var containerElement = focusContainerElement;
       var primaryFocusElement = containerElement && containerElement.querySelector(selectorPrimaryFocus);
@@ -172,12 +163,13 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
 
   // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (!title && labelText) {
       console.warn("".concat(componentName, ": The prop `labelText` was provided without a `title`. It is required to have a `title` when using the `labelText` prop."));
     }
   }, [labelText, title]);
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
+    var canDoAnimateTitle = false;
     if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
       var _labelTextRef$current, _labelTextRef$current2, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
@@ -200,16 +192,16 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       if (scrollEl) {
         var _window2;
         var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
-        var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop, 10) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom, 10) : 0;
-        var canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
-        if (doAnimateTitle !== canDoAnimateTitle) {
-          // will need updating on resize
-          setDoAnimateTitle(canDoAnimateTitle);
-        }
+        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;
       }
     }
+    if (doAnimateTitle !== canDoAnimateTitle) {
+      // will need updating on resize
+      setDoAnimateTitle(canDoAnimateTitle);
+    }
   };
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (doAnimateTitle && animatedScrollRef.current) {
       // only add scroll if the doAnimateTitle is already true
       // should come back through if false and canDoAnimateTitle is true
@@ -226,7 +218,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   };
 
   // Calculate scroll distances
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
       checkSetDoAnimateTitle();
     }
@@ -235,7 +227,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id, animatedScrollRef.current]);
 
   // click outside functionality if `includeOverlay` prop is set
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
       if (sidePanelRef.current && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
         onRequestClose();
@@ -267,7 +259,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
 
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (reducedMotion.matches) {
       setAnimationComplete(true);
     }
@@ -279,7 +271,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   };
 
   // used to reset margins of the slide in panel when closed/closing
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (!open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
       if (placement && placement === 'right' && pageContentElement) {
@@ -289,29 +281,29 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       }
     }
   }, [open, placement, selectorPageContent, slideIn]);
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
       onUnmount === null || onUnmount === void 0 || onUnmount();
     }
   }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
 
   // used to set margins of content for slide in panel version
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
       if (pageContentElement) {
         pageContentElement.style.inlineSize = 'auto';
       } else {
-        _pconsole.default.warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
+        pconsole["default"].warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
       }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(_motion.moderate02) : null;
-        pageContentElement.style.marginInlineEnd = _constants.SIDE_PANEL_SIZES[size];
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) : null;
+        pageContentElement.style.marginInlineEnd = constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginInlineStart = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(_motion.moderate02) : null;
-        pageContentElement.style.marginInlineStart = _constants.SIDE_PANEL_SIZES[size];
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) : null;
+        pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
       }
     }
   }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
@@ -323,7 +315,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       currentActiveNode = _ref2.relatedTarget;
     // focus trap should only be set if the side panel is a `slideOver` type
     if (open && innerContentRef && !slideIn) {
-      (0, _wrapFocus.default)({
+      wrapFocus["default"]({
         bodyNode: innerContentRef.current,
         startTrapRef: startTrapRef,
         endTrapRef: endTrapRef,
@@ -332,21 +324,20 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       });
     }
   };
-  var primaryActionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__container-right-placement"), placement === 'right'), "".concat(blockClass, "__container-left-placement"), placement === 'left'), "".concat(blockClass, "__container--slide-in"), slideIn), "".concat(blockClass, "__container--has-slug"), slug), "".concat(blockClass, "__container--condensed-actions"), condensedActions)]);
+  var primaryActionContainerClassNames = index["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
+  var mainPanelClassNames = index["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _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-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--animated-title"), doAnimateTitle), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__title"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: index["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
       ref: titleRef
-    }, /*#__PURE__*/_react.default.createElement("h2", {
+    }, /*#__PURE__*/React__default["default"].createElement("h2", {
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/_react.default.createElement("h2", {
+    }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React__default["default"].createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
-      "aria-hidden": true,
-      ref: collapsedTitleRef
+      "aria-hidden": true
     }, title));
   };
   var renderHeader = function renderHeader() {
@@ -354,38 +345,38 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
     var normalizedSlug;
     if (slug && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
-      normalizedSlug = /*#__PURE__*/_react.default.cloneElement(slug, {
+      normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
         // slug size is sm unless actions and size > md
         size: slugCloseSize
       });
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__header"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !doAnimateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches)),
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: index["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !doAnimateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
-    }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    }, currentStep > 0 && /*#__PURE__*/React__default["default"].createElement(react.Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
       size: slugCloseSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, (0, _extends2.default)({
+        return /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeft, _rollupPluginBabelHelpers["extends"]({
           size: 20
         }, props));
       },
       iconDescription: navigationBackIconDescription,
       className: "".concat(blockClass, "__navigation-back-button"),
       onClick: onNavigationBack
-    }), title && title.length && labelText && labelText.length && /*#__PURE__*/_react.default.createElement("p", {
+    }), title && title.length && labelText && labelText.length && /*#__PURE__*/React__default["default"].createElement("p", {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
-    }, labelText), title && title.length && renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
+    }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(blockClass, "__slug-and-close")
-    }, normalizedSlug, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    }, normalizedSlug, /*#__PURE__*/React__default["default"].createElement(react.Button, {
       "aria-label": closeIconDescription,
       kind: "ghost",
       size: slugCloseSize,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
+        return /*#__PURE__*/React__default["default"].createElement(icons.Close, _rollupPluginBabelHelpers["extends"]({
           size: 20
         }, props));
       },
@@ -393,10 +384,10 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       className: "".concat(blockClass, "__close-button"),
       onClick: onRequestClose,
       ref: closeRef
-    })), subtitle && /*#__PURE__*/_react.default.createElement("p", {
-      className: (0, _classnames.default)("".concat(blockClass, "__subtitle-text"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length))),
+    })), subtitle && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: index["default"]("".concat(blockClass, "__subtitle-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length))),
       ref: subtitleRef
-    }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/_react.default.createElement("div", {
+    }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(blockClass, "__action-toolbar")
     }, actionToolbarButtons.map(function (_ref5) {
       var label = _ref5.label,
@@ -408,8 +399,8 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
         disabled = _ref5.disabled,
         className = _ref5.className,
         onClick = _ref5.onClick,
-        rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
-      return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
+        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
+      return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
         key: label,
         kind: kind || 'ghost',
         size: "sm",
@@ -419,19 +410,19 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
         tooltipAlignment: tooltipAlignment || 'start',
         hasIconOnly: !leading,
         disabled: disabled,
-        className: (0, _classnames.default)(["".concat(blockClass, "__action-toolbar-button"), className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
+        className: index["default"](["".concat(blockClass, "__action-toolbar-button"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
         onClick: onClick
       }), leading && label);
     })));
   };
   var renderMain = function renderMain() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       ref: innerContentRef,
-      className: (0, _classnames.default)("".concat(blockClass, "__inner-content"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__inner-content--static"), !doAnimateTitle), "".concat(blockClass, "--scrolls"), !doAnimateTitle))
+      className: index["default"]("".concat(blockClass, "__inner-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
     }, children);
   };
-  (0, _useResizeObserver.useResizeObserver)(sidePanelRef, handleResize, [open]);
-  return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
+  useResizeObserver.useResizeObserver(sidePanelRef, handleResize, [open]);
+  return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
     onBlur: handleBlur,
@@ -440,32 +431,32 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     "aria-label": title,
     onAnimationComplete: onAnimationEnd,
     onAnimationStart: function onAnimationStart(event) {
-      return _onAnimationStart(event);
+      return _onAnimationStart();
     },
-    variants: _variants.panelVariants,
+    variants: variants.panelVariants,
     initial: "hidden",
     animate: "visible",
     exit: "exit",
     custom: placement
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
     role: "link",
     className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/_react.default.createElement("div", {
+  }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: animatedScrollRef,
     className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
+  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(ActionSet.ActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",
     role: "link",
     className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel")), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
-    variants: _variants.overlayVariants,
+  }, "Focus sentinel")), /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
+    variants: variants.overlayVariants,
     initial: "hidden",
     animate: "visible",
     exit: "exit",
@@ -475,19 +466,19 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-exports.SidePanel = SidePanel = _settings.pkg.checkComponentEnabled(SidePanel, componentName);
-SidePanel.propTypes = {
+exports.SidePanel = settings.pkg.checkComponentEnabled(exports.SidePanel, componentName);
+exports.SidePanel.propTypes = {
   /**
    * Sets the action toolbar buttons
    */
-  actionToolbarButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    leading: _propTypes.default.bool,
-    icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
-    onClick: _propTypes.default.func,
-    kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
-    tooltipAlignment: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-    tooltipPosition: _propTypes.default.oneOf(['start', 'center', 'end'])
+  actionToolbarButtons: index$1["default"].arrayOf(index$1["default"].shape({
+    label: index$1["default"].string,
+    leading: index$1["default"].bool,
+    icon: index$1["default"].oneOfType([index$1["default"].object, index$1["default"].func]),
+    onClick: index$1["default"].func,
+    kind: index$1["default"].oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
+    tooltipAlignment: index$1["default"].oneOf(['top', 'right', 'bottom', 'left']),
+    tooltipPosition: index$1["default"].oneOf(['start', 'center', 'end'])
   })),
   /**
    * The primary actions to be shown in the side panel. Each action is
@@ -505,86 +496,86 @@ SidePanel.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
-    kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
-    tooltipPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-    tooltipAlignment: _propTypes.default.oneOf(['start', 'center', 'end']),
-    label: _propTypes.default.string,
-    loading: _propTypes.default.bool,
+  actions: propsHelper.allPropTypes([ActionSet.ActionSet.validateActions(), index$1["default"].arrayOf(index$1["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+    kind: index$1["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+    tooltipPosition: index$1["default"].oneOf(['top', 'right', 'bottom', 'left']),
+    tooltipAlignment: index$1["default"].oneOf(['start', 'center', 'end']),
+    label: index$1["default"].string,
+    loading: index$1["default"].bool,
     // we duplicate this Button prop to improve the DocGen here
-    onClick: _react2.Button.propTypes.onClick
+    onClick: react.Button.propTypes.onClick
   })))]),
   /**
    * Determines if the title will animate on scroll
    */
-  animateTitle: _propTypes.default.bool,
+  animateTitle: index$1["default"].bool,
   /**
    * Sets the body content of the side panel
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+  children: index$1["default"].oneOfType([index$1["default"].arrayOf(index$1["default"].node), index$1["default"].node]).isRequired,
   /**
    * Sets an optional className to be added to the side panel outermost element
    */
-  className: _propTypes.default.string,
+  className: index$1["default"].string,
   /**
    * Sets the close button icon description
    */
-  closeIconDescription: _propTypes.default.string,
+  closeIconDescription: index$1["default"].string,
   /**
    * Determines whether the side panel should render the condensed version (affects action buttons primarily)
    */
-  condensedActions: _propTypes.default.bool,
+  condensedActions: index$1["default"].bool,
   /**
    * Sets the current step of the side panel
    */
-  currentStep: _propTypes.default.number,
+  currentStep: index$1["default"].number,
   /**
    * Unique identifier
    */
-  id: _propTypes.default.string,
+  id: index$1["default"].string,
   /**
    * Determines whether the side panel should render with an overlay
    */
-  includeOverlay: _propTypes.default.bool,
+  includeOverlay: index$1["default"].bool,
   /**
    * Sets the label text which will display above the title text
    */
-  labelText: _propTypes.default.string,
+  labelText: index$1["default"].string,
   /**
    * Sets the icon description for the navigation back icon button
    */
-  navigationBackIconDescription: _propTypes.default.string,
+  navigationBackIconDescription: index$1["default"].string,
   /**
    * Changes the current side panel page to the previous page
    */
-  onNavigationBack: _propTypes.default.func,
+  onNavigationBack: index$1["default"].func,
   /**
    * Specify a handler for closing the side panel.
    * This handler closes the modal, e.g. changing `open` prop.
    */
-  onRequestClose: _propTypes.default.func,
+  onRequestClose: index$1["default"].func,
   /**
    * Optional function called when the side panel exit animation is complete.
    * This handler can be used for any state cleanup needed before the panel is removed from the DOM.
    */
-  onUnmount: _propTypes.default.func,
+  onUnmount: index$1["default"].func,
   /**
    * Determines whether the side panel should render or not
    */
-  open: _propTypes.default.bool.isRequired,
+  open: index$1["default"].bool.isRequired,
   /**
    * Determines if the side panel is on the right or left
    */
-  placement: _propTypes.default.oneOf(['left', 'right']),
+  placement: index$1["default"].oneOf(['left', 'right']),
   /**
    * Prevent closing on click outside of the panel
    */
-  preventCloseOnClickOutside: _propTypes.default.bool,
+  preventCloseOnClickOutside: index$1["default"].bool,
   /**
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
-  selectorPageContent: _propTypes.default.string.isRequired.if(function (_ref7) {
+  selectorPageContent: index$1["default"].string.isRequired.if(function (_ref7) {
     var slideIn = _ref7.slideIn;
     return slideIn;
   }),
@@ -592,29 +583,29 @@ SidePanel.propTypes = {
    * Specify a CSS selector that matches the DOM element that should
    * be focused when the side panel opens
    */
-  selectorPrimaryFocus: _propTypes.default.string,
+  selectorPrimaryFocus: index$1["default"].string,
   /**
    * Sets the size of the side panel
    */
-  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
+  size: index$1["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
   /**
    * Determines if this panel slides in
    */
-  slideIn: _propTypes.default.bool,
+  slideIn: index$1["default"].bool,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
-  slug: _propTypes.default.node,
+  slug: index$1["default"].node,
   /**
    * Sets the subtitle text
    */
-  subtitle: _propTypes.default.node,
+  subtitle: index$1["default"].node,
   /**
    * Sets the title text
    */
-  title: _propTypes.default.string.isRequired.if(function (_ref8) {
+  title: index$1["default"].string.isRequired.if(function (_ref8) {
     var labelText = _ref8.labelText;
     return labelText;
   })
 };
-SidePanel.displayName = componentName;
+exports.SidePanel.displayName = componentName;