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

package/es/components/PageHeader/PageHeaderUtils.js

@@ -7,7 +7,7 @@
 
 import { defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { scrollableAncestor } from '../../global/js/utils/scrollableAncestor.js';
 import { SkeletonText } from '@carbon/react';

package/es/components/RemoveModal/RemoveModal.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
-import cx from '../../node_modules/classnames/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';

package/es/components/Saving/Saving.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
-import cx from '../../node_modules/classnames/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';

package/es/components/SearchBar/SearchBar.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/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';

package/es/components/SidePanel/SidePanel.js

@@ -7,9 +7,9 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import { moderate02 } from '@carbon/motion';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -19,10 +19,10 @@ import { pkg } from '../../settings.js';
 import { SIDE_PANEL_SIZES } from './constants.js';
 import { Button } from '@carbon/react';
 import { ArrowLeft, Close } from '@carbon/react/icons';
-import { overlayVariants, panelVariants } from './motion/variants.js';
+import { actionSetVariants, overlayVariants, panelVariants } from './motion/variants.js';
 import pconsole from '../../global/js/utils/pconsole.js';
-import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
+import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.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"],
   _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
@@ -40,6 +40,7 @@ var defaults = {
   placement: 'right',
   size: 'md'
 };
+var MotionActionSet = motion(ActionSet);
 
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
@@ -107,6 +108,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     doAnimateTitle = _useState6[0],
     setDoAnimateTitle = _useState6[1];
+  var shouldReduceMotion = useReducedMotion();
   useEffect(function () {
     setDoAnimateTitle(animateTitle);
   }, [animateTitle]);
@@ -429,7 +431,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     initial: "hidden",
     animate: "visible",
     exit: "exit",
-    custom: placement
+    custom: {
+      placement: placement,
+      shouldReduceMotion: shouldReduceMotion
+    }
   }), /*#__PURE__*/React__default.createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
@@ -438,10 +443,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__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, {
+  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
-    size: size === 'xs' ? 'sm' : size
+    size: size === 'xs' ? 'sm' : size,
+    custom: shouldReduceMotion,
+    variants: actionSetVariants
   }), /*#__PURE__*/React__default.createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",

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

@@ -16,27 +16,54 @@ export namespace overlayVariants {
     }
 }
 export namespace panelVariants {
-    export namespace visible_1 {
-        export let x: number;
-        export namespace transition_1 {
-            let duration_1: number;
-            export { duration_1 as duration };
-            let ease_1: number[];
-            export { ease_1 as ease };
-        }
-        export { transition_1 as transition };
-    }
+    export function visible_1({ shouldReduceMotion }: {
+        shouldReduceMotion: any;
+    }): {
+        x: number;
+        transition: {
+            duration: number;
+            ease: number[];
+        };
+        opacity: any;
+    };
     export { visible_1 as visible };
-    export function hidden_1(placement: any): {
+    export function hidden_1({ placement, shouldReduceMotion }: {
+        placement: any;
+        shouldReduceMotion: any;
+    }): {
         x: string | number;
+        opacity: any;
     };
     export { hidden_1 as hidden };
-    export function exit_1(placement: any): {
+    export function exit_1({ placement, shouldReduceMotion }: {
+        placement: any;
+        shouldReduceMotion: any;
+    }): {
         x: string | number;
         transition: {
             duration: number;
             ease: number[];
         };
+        opacity: any;
     };
     export { exit_1 as exit };
 }
+export namespace actionSetVariants {
+    export function hidden_2(shouldReduceMotion: any): {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: number | number[];
+        };
+    };
+    export { hidden_2 as hidden };
+    export function visible_2(shouldReduceMotion: any): {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: number | number[];
+            delay: number;
+        };
+    };
+    export { visible_2 as visible };
+}

package/es/components/SidePanel/motion/variants.js

@@ -23,27 +23,58 @@ var overlayVariants = {
   }
 };
 var panelVariants = {
-  visible: {
-    x: 0,
-    transition: {
-      duration: DURATIONS.moderate02,
-      ease: EASINGS.productive.standard
-    }
+  visible: function visible(_ref) {
+    var shouldReduceMotion = _ref.shouldReduceMotion;
+    return {
+      x: 0,
+      transition: {
+        duration: DURATIONS.moderate02,
+        ease: EASINGS.productive.standard
+      },
+      opacity: shouldReduceMotion && 1
+    };
   },
-  hidden: function hidden(placement) {
+  hidden: function hidden(_ref2) {
+    var placement = _ref2.placement,
+      shouldReduceMotion = _ref2.shouldReduceMotion;
     return {
-      x: placement === 'right' ? '100%' : -320
+      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
+      opacity: shouldReduceMotion && 0
     };
   },
-  exit: function exit(placement) {
+  exit: function exit(_ref3) {
+    var placement = _ref3.placement,
+      shouldReduceMotion = _ref3.shouldReduceMotion;
     return {
-      x: placement === 'right' ? '100%' : -320,
+      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
       transition: {
         duration: DURATIONS.moderate01,
         ease: EASINGS.productive.exit
+      },
+      opacity: shouldReduceMotion && 0
+    };
+  }
+};
+var actionSetVariants = {
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      opacity: shouldReduceMotion ? 0 : 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit
+      }
+    };
+  },
+  visible: function visible(shouldReduceMotion) {
+    return {
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        delay: shouldReduceMotion ? 0.075 : 0
       }
     };
   }
 };
 
-export { overlayVariants, panelVariants };
+export { actionSetVariants, overlayVariants, panelVariants };

package/es/components/SimpleHeader/SimpleHeader.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import React__default, { useCallback, useEffect } from 'react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';

package/es/components/StatusIcon/StatusIcon.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, InProgress, CheckmarkOutline, Pending } from '@carbon/react/icons';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -10,7 +10,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import lottie from 'lottie-web';
 import clamp from 'lodash/clamp';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 

package/es/components/StringFormatter/StringFormatter.d.ts

@@ -0,0 +1,6 @@
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+export let StringFormatter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/StringFormatter/StringFormatter.js

@@ -0,0 +1,79 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { DefinitionTooltip } from '@carbon/react';
+import { StringFormatterAlignment } from './utils/enums.js';
+
+var _excluded = ["className", "lines", "tooltipDirection", "truncate", "width", "value"];
+var blockClass = "".concat(pkg.prefix, "--string-formatter");
+var componentName = 'StringFormatter';
+var defaults = {
+  lines: 1,
+  tooltipDirection: StringFormatterAlignment.BOTTOM_LEFT,
+  truncate: false,
+  width: null
+};
+
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+var StringFormatter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$lines = _ref.lines,
+    lines = _ref$lines === void 0 ? defaults.lines : _ref$lines,
+    _ref$tooltipDirection = _ref.tooltipDirection,
+    tooltipDirection = _ref$tooltipDirection === void 0 ? defaults.tooltipDirection : _ref$tooltipDirection,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? defaults.width : _ref$width,
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var stringFormatterContent = /*#__PURE__*/React__default.createElement("span", {
+    className: cx("".concat(blockClass, "--content"), _defineProperty({}, "".concat(blockClass, "--truncate"), truncate)),
+    style: {
+      maxWidth: width,
+      WebkitLineClamp: lines
+    }
+  }, value);
+  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName)), truncate ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    className: "".concat(blockClass, "__tooltip"),
+    align: tooltipDirection,
+    definition: value,
+    openOnHover: true
+  }, stringFormatterContent) : stringFormatterContent);
+});
+StringFormatter = pkg.checkComponentEnabled(StringFormatter, componentName);
+StringFormatter.displayName = componentName;
+StringFormatter.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /** Number of lines to clamp value. */
+  lines: PropTypes.number,
+  /** Specify the direction of the tooltip. Can be either top or bottom. */
+  tooltipDirection: PropTypes.oneOf(Object.values(StringFormatterAlignment)),
+  /** Whether or not the value should be truncated. */
+  truncate: PropTypes.bool,
+  /** Value to format. */
+  value: PropTypes.string.isRequired,
+  /** Maximum width of value which should include */
+  width: PropTypes.string
+};
+
+export { StringFormatter };

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

@@ -0,0 +1 @@
+export { StringFormatter } from "./StringFormatter";

package/es/components/StringFormatter/utils/enums.d.ts

@@ -0,0 +1,14 @@
+export namespace StringFormatterAlignment {
+    let TOP: string;
+    let TOP_LEFT: string;
+    let TOP_RIGHT: string;
+    let BOTTOM: string;
+    let BOTTOM_LEFT: string;
+    let BOTTOM_RIGHT: string;
+    let LEFT: string;
+    let LEFT_BOTTOM: string;
+    let LEFT_TOP: string;
+    let RIGHT: string;
+    let RIGHT_BOTTOM: string;
+    let RIGHT_TOP: string;
+}

package/es/components/StringFormatter/utils/enums.js

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+var StringFormatterAlignment = {
+  TOP: 'top',
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM: 'bottom',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  LEFT: 'left',
+  LEFT_BOTTOM: 'left-bottom',
+  LEFT_TOP: 'left-top',
+  RIGHT: 'right',
+  RIGHT_BOTTOM: 'right-bottom',
+  RIGHT_TOP: 'right-top'
+};
+
+export { StringFormatterAlignment };

package/es/components/TagSet/TagSet.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { TagSetOverflow } from './TagSetOverflow.js';
 import { TagSetModal } from './TagSetModal.js';
 import { Tag } from '@carbon/react';

package/es/components/TagSet/TagSetModal.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { ComposedModal, ModalHeader, Search, ModalBody, Tag } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';

package/es/components/TagSet/TagSetOverflow.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';

package/es/components/Tearsheet/TearsheetShell.js

@@ -9,17 +9,17 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useRef, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
-import { usePrefix, ComposedModal, ModalHeader, Layer, ModalBody, Button } from '@carbon/react';
+import { usePrefix, ComposedModal, ModalHeader, Layer, Button } from '@carbon/react';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -71,9 +71,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     navigation = _ref.navigation,
     onClose = _ref.onClose,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     size = _ref.size,
-    portalTargetIn = _ref.portalTarget,
+    slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -190,9 +191,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
-      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide)),
+      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      slug: slug,
       style: _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
@@ -228,8 +230,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       className: "".concat(bc, "__header-navigation")
     }, navigation)), /*#__PURE__*/React__default.createElement(Wrap, {
       ref: modalBodyRef,
-      element: ModalBody,
-      className: "".concat(bc, "__body")
+      className: "".concat(carbonPrefix, "--modal-content ").concat(bc, "__body")
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition === 'right'
@@ -394,6 +395,10 @@ TearsheetShell.propTypes = _objectSpread2({
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+   */
+  slug: PropTypes.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Toolbar/Toolbar.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
 import React__default, { forwardRef, useRef, useCallback, useState, useEffect, createContext } from 'react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';

package/es/components/Toolbar/ToolbarButton.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { IconButton } from '@carbon/react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { pkg } from '../../settings.js';

package/es/components/Toolbar/ToolbarGroup.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
 import React__default, { forwardRef } from 'react';
 import { pkg } from '../../settings.js';

package/es/components/TooltipTrigger/TooltipTrigger.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className"];

package/es/components/TruncatedList/TruncatedList.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { Children, useState, useRef, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg, carbon } from '../../settings.js';
 import { Button } from '@carbon/react';