@carbon/ibm-products 2.27.0 → 2.28.0

package/lib/components/Tearsheet/TearsheetShell.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
-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 settings = require('../../settings.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var getNodeTextContent = require('../../global/js/utils/getNodeTextContent.js');
@@ -26,6 +26,7 @@ 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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition"];
 
@@ -199,12 +200,12 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
-      className: index["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx__default["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
       depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       slug: slug,
       style: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
-      containerClassName: index["default"]("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
+      containerClassName: cx__default["default"]("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
@@ -215,8 +216,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
       size: "sm"
     }), includeHeader && /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
-      className: index["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
-      closeClassName: index["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
+      className: cx__default["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
+      closeClassName: cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
       closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
@@ -229,7 +230,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       className: "".concat(bcModalHeader, "__label")
     }, label), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       element: "h3",
-      className: index["default"]("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
+      className: cx__default["default"]("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
     }, title), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       className: "".concat(bc, "__header-description")
     }, description)), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
@@ -238,10 +239,9 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       className: "".concat(bc, "__header-navigation")
     }, navigation)), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       ref: modalBodyRef,
-      element: react.ModalBody,
-      className: "".concat(bc, "__body")
+      className: "".concat(carbonPrefix, "--modal-content ").concat(bc, "__body")
     }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
-      className: index["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
+      className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition === 'right'
     }, influencer), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       className: "".concat(bc, "__right")
@@ -252,7 +252,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       className: "".concat(bc, "__content"),
       alwaysRender: influencer && influencerPosition === 'right'
     }, children), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
-      className: index["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
+      className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
     }, influencer)), includeActions && /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       className: "".concat(bc, "__button-container")
@@ -275,7 +275,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
-var portalType = typeof Element === 'undefined' ? index$1["default"].object : index$1["default"].instanceOf(Element);
+var portalType = typeof Element === 'undefined' ? index["default"].object : index["default"].instanceOf(Element);
 var deprecatedProps = {
   /**
    * **Deprecated**
@@ -286,7 +286,7 @@ var deprecatedProps = {
    * from below. The 'lower' position (the default) provides a little extra room at the top
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
-  verticalPosition: index$1["default"].oneOf(['normal', 'lower'])
+  verticalPosition: index["default"].oneOf(['normal', 'lower'])
 };
 
 // The types and DocGen commentary for the component props,
@@ -309,31 +309,31 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: index$1["default"].arrayOf(
+  actions: index["default"].arrayOf(
   // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
-  index$1["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
-    kind: index$1["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
-    label: index$1["default"].string,
-    loading: index$1["default"].bool,
+  index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+    kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+    label: index["default"].string,
+    loading: index["default"].bool,
     // we duplicate this Button prop to improve the DocGen here
     onClick: react.Button.propTypes.onClick
   }))),
   /**
    * The main content of the tearsheet.
    */
-  children: index$1["default"].node,
+  children: index["default"].node,
   /**
    * An optional class or classes to be added to the outermost element.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * The accessibility title for the close icon (if shown).
    *
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
-  closeIconDescription: index$1["default"].string.isRequired.if(function (_ref3) {
+  closeIconDescription: index["default"].string.isRequired.if(function (_ref3) {
     var actions = _ref3.actions,
       hasCloseIcon = _ref3.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
@@ -341,7 +341,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
-  description: index$1["default"].node,
+  description: index["default"].node,
   /**
    * Enable a close icon ('x') in the header area of the tearsheet. By default,
    * (when this prop is omitted, or undefined or null) a tearsheet does not
@@ -350,52 +350,52 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
-  hasCloseIcon: index$1["default"].bool,
+  hasCloseIcon: index["default"].bool,
   /**
    * The content for the header actions area, displayed alongside the title in
    * the header area of the tearsheet. This is typically a drop-down, or a set
    * of small buttons, or similar. NB the headerActions is only applicable for
    * wide tearsheets.
    */
-  headerActions: index$1["default"].element,
+  headerActions: index["default"].element,
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or
    * progress indicator, or similar. NB the influencer is only applicable for
    * wide tearsheets.
    */
-  influencer: index$1["default"].element,
+  influencer: index["default"].element,
   /**
    * The position of the influencer section, 'left' or 'right'.
    */
-  influencerPosition: index$1["default"].oneOf(['left', 'right']),
+  influencerPosition: index["default"].oneOf(['left', 'right']),
   /**
    * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
    * is 320px.
    */
-  influencerWidth: index$1["default"].oneOf(['narrow', 'wide']),
+  influencerWidth: index["default"].oneOf(['narrow', 'wide']),
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
    * to maintain context for the tearsheet (e.g. as the title changes from page
    * to page of a multi-page task).
    */
-  label: index$1["default"].node,
+  label: index["default"].node,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet. NB the navigation is only applicable
    * for wide tearsheets.
    */
-  navigation: index$1["default"].element,
+  navigation: index["default"].element,
   /**
    * An optional handler that is called when the user closes the tearsheet (by
    * clicking the close button, if enabled, or clicking outside, if enabled).
    * Returning `false` here prevents the modal from closing.
    */
-  onClose: index$1["default"].func,
+  onClose: index["default"].func,
   /**
    * Specifies whether the tearsheet is currently open.
    */
-  open: index$1["default"].bool,
+  open: index["default"].bool,
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
@@ -403,15 +403,15 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
-  size: index$1["default"].oneOf(['narrow', 'wide']).isRequired,
+  size: index["default"].oneOf(['narrow', 'wide']).isRequired,
   /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
    */
-  slug: index$1["default"].node,
+  slug: index["default"].node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
-  title: index$1["default"].node
+  title: index["default"].node
 }, deprecatedProps);
 
 exports.TearsheetShell = TearsheetShell;

package/lib/components/Toolbar/Toolbar.js

@@ -10,8 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../node_modules/classnames/index.js');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
 var devtools = require('../../global/js/utils/devtools.js');
 var getFocusableElements = require('../../global/js/utils/getFocusableElements.js');
@@ -19,6 +19,7 @@ var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["children", "className", "vertical"];
@@ -81,7 +82,7 @@ exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref2, r) {
   }
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
-    className: index["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
+    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
     onFocus: onFocus,
     onKeyDown: onKeyDown
   }, vertical && {
@@ -98,11 +99,11 @@ var componentName = 'Toolbar';
 exports.Toolbar.displayName = componentName;
 exports.Toolbar.propTypes = {
   /** Provide the content of the `Toolbar` */
-  children: index$1.propTypesExports.node.isRequired,
+  children: index.propTypesExports.node.isRequired,
   /** Provide an optional class to be applied to the containing node */
-  className: index$1.propTypesExports.string,
+  className: index.propTypesExports.string,
   /** Determines whether the `Toolbar` is rendered vertically */
-  vertical: index$1.propTypesExports.bool
+  vertical: index.propTypesExports.bool
 };
 exports.Toolbar = checkComponentEnabled(exports.Toolbar, componentName);
 

package/lib/components/Toolbar/ToolbarButton.js

@@ -11,14 +11,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
-var index = require('../../node_modules/classnames/index.js');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
 var settings = require('../../settings.js');
 var Toolbar = require('./Toolbar.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
@@ -40,7 +41,7 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest, {
     label: iconDescription,
     ref: ref,
-    className: index["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
+    className: cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
     size: "md"
   }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, null) : null, children, caret && /*#__PURE__*/React__default["default"].createElement("span", {
@@ -51,15 +52,15 @@ var componentName = 'ToolbarButton';
 exports.ToolbarButton.displayName = componentName;
 exports.ToolbarButton.propTypes = {
   /** Determines whether the caret is rendered */
-  caret: index$1.propTypesExports.bool,
+  caret: index.propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
-  children: index$1.propTypesExports.node,
+  children: index.propTypesExports.node,
   /** Provide an optional class to be applied to the containing node */
-  className: index$1.propTypesExports.string,
+  className: index.propTypesExports.string,
   /** Specifies the label for the icon button */
-  iconDescription: index$1.propTypesExports.string.isRequired,
+  iconDescription: index.propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
-  renderIcon: index$1.propTypesExports.func.isRequired
+  renderIcon: index.propTypesExports.func.isRequired
 };
 exports.ToolbarButton = settings.pkg.checkComponentEnabled(exports.ToolbarButton, componentName);
 

package/lib/components/Toolbar/ToolbarGroup.js

@@ -10,14 +10,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../node_modules/classnames/index.js');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
 var settings = require('../../settings.js');
 var Toolbar = require('./Toolbar.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["className", "children"];
@@ -29,15 +30,15 @@ exports.ToolbarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
-    className: index["default"]("".concat(Toolbar.blockClass, "__group"), className)
+    className: cx__default["default"]("".concat(Toolbar.blockClass, "__group"), className)
   }), children);
 });
 var componentName = 'ToolbarGroup';
 exports.ToolbarGroup.displayName = componentName;
 exports.ToolbarGroup.propTypes = {
   /** Provide the content of the `ToolbarGroup` */
-  children: index$1.propTypesExports.node.isRequired,
+  children: index.propTypesExports.node.isRequired,
   /** Provide an optional class to be applied to the containing node */
-  className: index$1.propTypesExports.string
+  className: index.propTypesExports.string
 };
 exports.ToolbarGroup = settings.pkg.checkComponentEnabled(exports.ToolbarGroup, componentName);

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -11,13 +11,14 @@ 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 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 _excluded = ["children", "className"];
 
@@ -38,7 +39,7 @@ exports.TooltipTrigger = function TooltipTrigger(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button"
   }, rest, {
-    className: index["default"](blockClass,
+    className: cx__default["default"](blockClass,
     // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
     )
@@ -59,9 +60,9 @@ exports.TooltipTrigger.propTypes = {
   /**
    * Child content of tooltip trigger
    */
-  children: index$1["default"].node,
+  children: index["default"].node,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string
+  className: index["default"].string
 };

package/lib/components/TruncatedList/TruncatedList.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 = ["children", "className", "as", "buttonClassName", "collapsedItemsLimit", "expandedItemsLimit", "onClick", "viewLessLabel", "viewMoreLabel"];
 
@@ -104,7 +105,7 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
     }
   }, [childrenArray, minItems, maxItems, isCollapsed, listRef]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: index["default"](blockClass, className, isCollapsed ? "".concat(blockClass, "--collapsed") : "".concat(blockClass, "--expanded"),
+    className: cx__default["default"](blockClass, className, isCollapsed ? "".concat(blockClass, "--collapsed") : "".concat(blockClass, "--expanded"),
     // If the list is expanded && showing all the items,
     // then disable scrolling using CSS, instead of adding an arbitrary #px to the height of the list.
     !isCollapsed && childrenArray.length <= maxItems && "".concat(blockClass, "--expanded-all")),
@@ -116,7 +117,7 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
       height: listHeight
     }
   }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-    className: index["default"]("".concat(blockClass, "__button"), "".concat(settings.carbon.prefix, "--link"), buttonClassName),
+    className: cx__default["default"]("".concat(blockClass, "__button"), "".concat(settings.carbon.prefix, "--link"), buttonClassName),
     kind: "ghost",
     size: "sm",
     onClick: handleToggle
@@ -138,40 +139,40 @@ exports.TruncatedList.propTypes = {
    * The type of list element to render.
    * This could be a `ul`, `ol`, or a custom React component.
    */
-  as: index$1["default"].oneOfType([index$1["default"].elementType, index$1["default"].string]),
+  as: index["default"].oneOfType([index["default"].elementType, index["default"].string]),
   /**
    * Optional class name for expand/collapse button.
    */
-  buttonClassName: index$1["default"].string,
+  buttonClassName: index["default"].string,
   /**
    * The contents of the TruncatedList.
    */
-  children: index$1["default"].node.isRequired,
+  children: index["default"].node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Number of items to render and display when the list is truncated and collapsed.
    * Scrolling is not enabled when collapsed. The smallest number is 1.
    */
-  collapsedItemsLimit: index$1["default"].number,
+  collapsedItemsLimit: index["default"].number,
   /**
    * Maximum number of items to show when the list is expanded. All
    * items are rendered when the list is expanded. Scrolling is enabled
    * if there are more items to display than this number.
    */
-  expandedItemsLimit: index$1["default"].number,
+  expandedItemsLimit: index["default"].number,
   /**
    * Optional callback reports the collapsed state of the list.
    */
-  onClick: index$1["default"].func,
+  onClick: index["default"].func,
   /**
    * Text label for when the list is expanded.
    */
-  viewLessLabel: index$1["default"].string,
+  viewLessLabel: index["default"].string,
   /**
    * Callback function for building the label when the list is collapsed.
    */
-  viewMoreLabel: index$1["default"].func
+  viewMoreLabel: index["default"].func
 };

package/lib/components/UserAvatar/UserAvatar.js

@@ -12,18 +12,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
+require('../../global/js/utils/props-helper.js');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.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 = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
+var _excluded = ["backgroundColor", "className", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -58,6 +60,8 @@ var defaults = {
 exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
+    image = _ref.image,
+    imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
@@ -92,6 +96,13 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
     var iconProps = {
       size: iconSize[size]
     };
+    if (image) {
+      return /*#__PURE__*/React__default["default"].createElement("img", {
+        alt: imageDescription,
+        src: image,
+        className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+      });
+    }
     if (RenderIcon) {
       return /*#__PURE__*/React__default["default"].createElement(RenderIcon, iconProps);
     }
@@ -102,7 +113,7 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   var Avatar = function Avatar() {
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-      className: index$1["default"](blockClass,
+      className: cx__default["default"](blockClass,
       // Apply the block class to the main HTML element
       className, // Apply any supplied class names to the main HTML element.
       "".concat(blockClass, "--").concat(backgroundColor), "".concat(blockClass, "--").concat(size),
@@ -144,6 +155,17 @@ exports.UserAvatar.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
+  /**
+   * When passing the image prop, supply a full path to the image to be displayed.
+   */
+  image: index["default"].string,
+  /**
+   * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+   */
+  imageDescription: index["default"].string.isRequired.if(function (_ref3) {
+    var image = _ref3.image;
+    return !!image;
+  }),
   /**
    * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
    */

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
@@ -23,6 +23,7 @@ var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.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 = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
 
@@ -127,7 +128,7 @@ exports.UserProfileImage = /*#__PURE__*/React__default["default"].forwardRef(fun
   var renderUserProfileImage = function renderUserProfileImage() {
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
       ref: ref,
-      className: index$1["default"]([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
+      className: cx__default["default"]([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
     }, devtools.getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React__default["default"].createElement(FillItem, null)));
   };
   return FillItem && (tooltipText ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {