@carbon/ibm-products 2.26.0 → 2.28.0-alpha.4

package/lib/components/RemoveModal/RemoveModal.js

@@ -11,9 +11,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/prop-types/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var settings = require('../../settings.js');
@@ -23,6 +23,7 @@ var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 var componentName = 'RemoveModal';
@@ -85,7 +86,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
   return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     size: "sm",
     "aria-label": title
   }, _rollupPluginBabelHelpers.objectSpread2({
@@ -127,74 +128,74 @@ exports.RemoveModal.propTypes = {
   /**
    * The content to be displayed in the body of the modal
    */
-  body: index$1["default"].string.isRequired,
+  body: index["default"].string.isRequired,
   /**
    * Optional classname
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Provide a description for "close" icon that can be read by screen readers
    */
-  iconDescription: index$1["default"].string.isRequired,
+  iconDescription: index["default"].string.isRequired,
   /**
    * Message showed when user input fails validation
    */
-  inputInvalidText: index$1["default"].string,
+  inputInvalidText: index["default"].string,
   /**
    * Label for text box
    */
-  inputLabelText: index$1["default"].node,
+  inputLabelText: index["default"].node,
   /**
    * Placeholder for text box
    */
-  inputPlaceholderText: index$1["default"].string,
+  inputPlaceholderText: index["default"].string,
   /**
    * Specify the modal label texts
    */
-  label: index$1["default"].string,
+  label: index["default"].string,
   /**
    * Callback function that runs when user closes the modal
    */
-  onClose: index$1["default"].func,
+  onClose: index["default"].func,
   /**
    * Callback function that runs when user submits the modal
    */
-  onRequestSubmit: index$1["default"].func,
+  onRequestSubmit: index["default"].func,
   /**
    * Specify whether the Modal is currently open
    */
-  open: index$1["default"].bool.isRequired,
+  open: index["default"].bool.isRequired,
   /**
    * The DOM node the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: index$1["default"].node,
+  portalTarget: index["default"].node,
   /**
    * Prevent closing on click outside of modal
    */
-  preventCloseOnClickOutside: index$1["default"].bool,
+  preventCloseOnClickOutside: index["default"].bool,
   /**
    * Specify whether the primary button should be disabled. This value will override textConfirmation
    */
-  primaryButtonDisabled: index$1["default"].bool,
+  primaryButtonDisabled: index["default"].bool,
   /**
    * Specify the text for the primary button
    */
-  primaryButtonText: index$1["default"].string,
+  primaryButtonText: index["default"].string,
   /**
    * The name of the resource being acted upon
    */
-  resourceName: index$1["default"].string.isRequired,
+  resourceName: index["default"].string.isRequired,
   /**
    * Specify the text for the secondary button
    */
-  secondaryButtonText: index$1["default"].string,
+  secondaryButtonText: index["default"].string,
   /**
    * Specify whether or not to show the text confirmation input
    */
-  textConfirmation: index$1["default"].bool,
+  textConfirmation: index["default"].bool,
   /**
    * The text displayed at the top of the modal
    */
-  title: index$1["default"].string.isRequired
+  title: index["default"].string.isRequired
 };
 exports.RemoveModal.displayName = componentName;

package/lib/components/Saving/Saving.js

@@ -11,16 +11,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/prop-types/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _ErrorFilled;
 var _excluded = ["secondaryButtonText", "className", "defaultIconDescription", "defaultText", "failIconDescription", "failText", "inProgressIconDescription", "inProgressText", "onRequestCancel", "onRequestSave", "status", "successIconDescription", "successText", "type"];
@@ -80,7 +81,7 @@ exports.Saving = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var blockClass = "".concat(settings.pkg.prefix, "--saving");
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
-    className: index["default"](blockClass, className)
+    className: cx__default["default"](blockClass, className)
   }, devtools.getDevtoolsProps(componentName)), type === 'auto' ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__message")
   }, status === 'fail' && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -110,58 +111,58 @@ exports.Saving.propTypes = {
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Description for default state icon (manual).
    */
-  defaultIconDescription: index$1["default"].string,
+  defaultIconDescription: index["default"].string,
   /**
    * Default text for the save button (manual). Per design guidelines you probably don't want to display this in the auto mode.
    */
-  defaultText: index$1["default"].string,
+  defaultText: index["default"].string,
   /**
    * Description for fail state icon (manual).
    */
-  failIconDescription: index$1["default"].string,
+  failIconDescription: index["default"].string,
   /**
    * Text for failure state.
    */
-  failText: index$1["default"].string,
+  failText: index["default"].string,
   /**
    * Description for in progress state icon (manual).
    */
-  inProgressIconDescription: index$1["default"].string,
+  inProgressIconDescription: index["default"].string,
   /**
    * Text for in progress state.
    */
-  inProgressText: index$1["default"].string,
+  inProgressText: index["default"].string,
   /**
    * Function handler for cancel button (manual).
    */
-  onRequestCancel: index$1["default"].func,
+  onRequestCancel: index["default"].func,
   /**
    * Function handler for save button (manual).
    */
-  onRequestSave: index$1["default"].func,
+  onRequestSave: index["default"].func,
   /**
    * Text for the secondary or cancel button (manual).
    */
-  secondaryButtonText: index$1["default"].string,
+  secondaryButtonText: index["default"].string,
   /**
    * The status of the save. default being the untouched default state -> in-progress being a save has been initiated -> fail or success being the outcome.
    */
-  status: index$1["default"].oneOf(['default', 'in-progress', 'success', 'fail']).isRequired,
+  status: index["default"].oneOf(['default', 'in-progress', 'success', 'fail']).isRequired,
   /**
    * Description for success state icon (manual).
    */
-  successIconDescription: index$1["default"].string,
+  successIconDescription: index["default"].string,
   /**
    * Text for success state
    */
-  successText: index$1["default"].string,
+  successText: index["default"].string,
   /**
    * Designates the style of the save component. Manual uses a set of buttons and auto just displays a string. See usage guidelines for additional information.
    */
-  type: index$1["default"].oneOf(['manual', 'auto']).isRequired
+  type: index["default"].oneOf(['manual', 'auto']).isRequired
 };
 exports.Saving.displayName = componentName;

package/lib/components/SearchBar/SearchBar.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
@@ -20,6 +20,7 @@ var react = require('@carbon/react');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "clearButtonLabelText", "hideScopesLabel", "labelText", "onChange", "onSubmit", "placeHolderText", "scopes", "scopesTypeLabel", "scopeToString", "selectedScopes", "sortItems", "submitLabel", "translateWithId", "value"];
 
@@ -128,7 +129,7 @@ exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (
   return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref
   }, devtools.getDevtoolsProps(componentName), {
-    className: index["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hide-scopes-label"), hideScopesLabel)),
+    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hide-scopes-label"), hideScopesLabel)),
     onSubmit: handleSubmit
   }), scopes !== null && scopes !== void 0 && scopes.length ? /*#__PURE__*/React__default["default"].createElement(react.MultiSelect, {
     id: "".concat(blockClass, "__multi-select"),
@@ -173,7 +174,7 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
   for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
     rest[_key - 3] = arguments[_key];
   }
-  return index$1["default"].string.apply(index$1["default"], [props, propName, componentName].concat(rest));
+  return index["default"].string.apply(index["default"], [props, propName, componentName].concat(rest));
 };
 
 // The types and DocGen commentary for the component props,
@@ -181,48 +182,48 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
 // See https://www.npmjs.com/package/prop-types#usage.
 exports.SearchBar.propTypes = {
   /** @type {string} Optional additional class name. */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /** @type {string} The label text for the search text input. */
-  clearButtonLabelText: index$1["default"].string.isRequired,
+  clearButtonLabelText: index["default"].string.isRequired,
   /**
    * Whether or not the scopes MultiSelect label is visually hidden.
    */
-  hideScopesLabel: index$1["default"].bool,
+  hideScopesLabel: index["default"].bool,
   /** @type {string} The label text for the search text input. */
-  labelText: index$1["default"].string,
+  labelText: index["default"].string,
   /** @type {Function} Function handler for when the user changes their query search. */
-  onChange: index$1["default"].func,
+  onChange: index["default"].func,
   /** @type {Function} Function handler for when the user submits a search. */
-  onSubmit: index$1["default"].func,
+  onSubmit: index["default"].func,
   /** @type {string} Placeholder text to be displayed in the search input. */
-  placeHolderText: index$1["default"].string.isRequired,
+  placeHolderText: index["default"].string.isRequired,
   /** @type {Function} Function to get the text for each scope to display in dropdown. */
-  scopeToString: index$1["default"].func,
+  scopeToString: index["default"].func,
   /** @type {Array<any>} Array of allowed search scopes. */
-  scopes: index$1["default"].arrayOf(index$1["default"].oneOfType([index$1["default"].string, index$1["default"].object])),
+  scopes: index["default"].arrayOf(index["default"].oneOfType([index["default"].string, index["default"].object])),
   /** @type {string} The name text for the search scope type. */
   // eslint-disable-next-line react/require-default-props
   scopesTypeLabel: conditionalScopePropValidator,
   /** @type {Array<any> Array of initially selected search scopes. */
-  selectedScopes: index$1["default"].arrayOf(index$1["default"].oneOfType([index$1["default"].string, index$1["default"].object])),
+  selectedScopes: index["default"].arrayOf(index["default"].oneOfType([index["default"].string, index["default"].object])),
   /**
    * Optional custom sorting algorithm for an array of scope items.
    * By default, scope items are sorted in ascending alphabetical order,
    * with "selected" items moved to the start of the scope items array.
    */
-  sortItems: index$1["default"].func,
+  sortItems: index["default"].func,
   // eslint-disable-line react/require-default-props
 
   /** @type {string} The label text for the search submit button. */
-  submitLabel: index$1["default"].string.isRequired,
+  submitLabel: index["default"].string.isRequired,
   /**
    * Provide accessible label text for the scopes MultiSelect.
    */
-  titleText: index$1["default"].string,
+  titleText: index["default"].string,
   /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
-  translateWithId: index$1["default"].func,
+  translateWithId: index["default"].func,
   // eslint-disable-line react/require-default-props
 
   /** @type {string} Search query value. */
-  value: index$1["default"].string
+  value: index["default"].string
 };

package/lib/components/SidePanel/SidePanel.js

@@ -12,8 +12,8 @@ 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 index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var carbonMotion = require('@carbon/motion');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -25,12 +25,13 @@ 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');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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"];
@@ -48,6 +49,7 @@ var defaults = {
   placement: 'right',
   size: 'md'
 };
+var MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
 
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
@@ -115,6 +117,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     doAnimateTitle = _useState6[0],
     setDoAnimateTitle = _useState6[1];
+  var shouldReduceMotion = framerMotion.useReducedMotion();
   React.useEffect(function () {
     setDoAnimateTitle(animateTitle);
   }, [animateTitle]);
@@ -324,11 +327,11 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       });
     }
   };
-  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 primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
+  var mainPanelClassNames = cx__default["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["default"].createElement("div", {
-      className: index["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
+      className: cx__default["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
       ref: titleRef
     }, /*#__PURE__*/React__default["default"].createElement("h2", {
       className: "".concat(blockClass, "__title-text"),
@@ -351,7 +354,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       });
     }
     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)),
+      className: cx__default["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["default"].createElement(react.Button, {
       "aria-label": navigationBackIconDescription,
@@ -385,7 +388,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       onClick: onRequestClose,
       ref: closeRef
     })), 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))),
+      className: cx__default["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["default"].createElement("div", {
       className: "".concat(blockClass, "__action-toolbar")
@@ -410,7 +413,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
         tooltipAlignment: tooltipAlignment || 'start',
         hasIconOnly: !leading,
         disabled: disabled,
-        className: index["default"](["".concat(blockClass, "__action-toolbar-button"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
+        className: cx__default["default"](["".concat(blockClass, "__action-toolbar-button"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
         onClick: onClick
       }), leading && label);
     })));
@@ -418,7 +421,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var renderMain = function renderMain() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       ref: innerContentRef,
-      className: index["default"]("".concat(blockClass, "__inner-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
+      className: cx__default["default"]("".concat(blockClass, "__inner-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
     }, children);
   };
   useResizeObserver.useResizeObserver(sidePanelRef, handleResize, [open]);
@@ -437,7 +440,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     initial: "hidden",
     animate: "visible",
     exit: "exit",
-    custom: placement
+    custom: {
+      placement: placement,
+      shouldReduceMotion: shouldReduceMotion
+    }
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
@@ -446,10 +452,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, "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["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(ActionSet.ActionSet, {
+  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
-    size: size === 'xs' ? 'sm' : size
+    size: size === 'xs' ? 'sm' : size,
+    custom: shouldReduceMotion,
+    variants: variants.actionSetVariants
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",
@@ -471,14 +479,14 @@ exports.SidePanel.propTypes = {
   /**
    * Sets the action toolbar buttons
    */
-  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'])
+  actionToolbarButtons: index["default"].arrayOf(index["default"].shape({
+    label: index["default"].string,
+    leading: index["default"].bool,
+    icon: index["default"].oneOfType([index["default"].object, index["default"].func]),
+    onClick: index["default"].func,
+    kind: index["default"].oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
+    tooltipAlignment: index["default"].oneOf(['top', 'right', 'bottom', 'left']),
+    tooltipPosition: index["default"].oneOf(['start', 'center', 'end'])
   })),
   /**
    * The primary actions to be shown in the side panel. Each action is
@@ -496,86 +504,86 @@ exports.SidePanel.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  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,
+  actions: propsHelper.allPropTypes([ActionSet.ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+    kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+    tooltipPosition: index["default"].oneOf(['top', 'right', 'bottom', 'left']),
+    tooltipAlignment: index["default"].oneOf(['start', 'center', 'end']),
+    label: index["default"].string,
+    loading: index["default"].bool,
     // we duplicate this Button prop to improve the DocGen here
     onClick: react.Button.propTypes.onClick
   })))]),
   /**
    * Determines if the title will animate on scroll
    */
-  animateTitle: index$1["default"].bool,
+  animateTitle: index["default"].bool,
   /**
    * Sets the body content of the side panel
    */
-  children: index$1["default"].oneOfType([index$1["default"].arrayOf(index$1["default"].node), index$1["default"].node]).isRequired,
+  children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
   /**
    * Sets an optional className to be added to the side panel outermost element
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Sets the close button icon description
    */
-  closeIconDescription: index$1["default"].string,
+  closeIconDescription: index["default"].string,
   /**
    * Determines whether the side panel should render the condensed version (affects action buttons primarily)
    */
-  condensedActions: index$1["default"].bool,
+  condensedActions: index["default"].bool,
   /**
    * Sets the current step of the side panel
    */
-  currentStep: index$1["default"].number,
+  currentStep: index["default"].number,
   /**
    * Unique identifier
    */
-  id: index$1["default"].string,
+  id: index["default"].string,
   /**
    * Determines whether the side panel should render with an overlay
    */
-  includeOverlay: index$1["default"].bool,
+  includeOverlay: index["default"].bool,
   /**
    * Sets the label text which will display above the title text
    */
-  labelText: index$1["default"].string,
+  labelText: index["default"].string,
   /**
    * Sets the icon description for the navigation back icon button
    */
-  navigationBackIconDescription: index$1["default"].string,
+  navigationBackIconDescription: index["default"].string,
   /**
    * Changes the current side panel page to the previous page
    */
-  onNavigationBack: index$1["default"].func,
+  onNavigationBack: index["default"].func,
   /**
    * Specify a handler for closing the side panel.
    * This handler closes the modal, e.g. changing `open` prop.
    */
-  onRequestClose: index$1["default"].func,
+  onRequestClose: index["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: index$1["default"].func,
+  onUnmount: index["default"].func,
   /**
    * Determines whether the side panel should render or not
    */
-  open: index$1["default"].bool.isRequired,
+  open: index["default"].bool.isRequired,
   /**
    * Determines if the side panel is on the right or left
    */
-  placement: index$1["default"].oneOf(['left', 'right']),
+  placement: index["default"].oneOf(['left', 'right']),
   /**
    * Prevent closing on click outside of the panel
    */
-  preventCloseOnClickOutside: index$1["default"].bool,
+  preventCloseOnClickOutside: index["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: index$1["default"].string.isRequired.if(function (_ref7) {
+  selectorPageContent: index["default"].string.isRequired.if(function (_ref7) {
     var slideIn = _ref7.slideIn;
     return slideIn;
   }),
@@ -583,27 +591,27 @@ exports.SidePanel.propTypes = {
    * Specify a CSS selector that matches the DOM element that should
    * be focused when the side panel opens
    */
-  selectorPrimaryFocus: index$1["default"].string,
+  selectorPrimaryFocus: index["default"].string,
   /**
    * Sets the size of the side panel
    */
-  size: index$1["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
+  size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
   /**
    * Determines if this panel slides in
    */
-  slideIn: index$1["default"].bool,
+  slideIn: index["default"].bool,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
-  slug: index$1["default"].node,
+  slug: index["default"].node,
   /**
    * Sets the subtitle text
    */
-  subtitle: index$1["default"].node,
+  subtitle: index["default"].node,
   /**
    * Sets the title text
    */
-  title: index$1["default"].string.isRequired.if(function (_ref8) {
+  title: index["default"].string.isRequired.if(function (_ref8) {
     var labelText = _ref8.labelText;
     return labelText;
   })