@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Toolbar/ToolbarButton.js

@@ -15,43 +15,43 @@ var react = require('@carbon/react');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
-var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription", "label"];
-var blockClass = "".concat(Toolbar.blockClass, "__button");
+const blockClass = `${Toolbar.blockClass}__button`;
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
-exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _useContext;
-  var _ref$caret = _ref.caret,
-    caret = _ref$caret === void 0 ? false : _ref$caret,
-    children = _ref.children,
-    className = _ref.className,
-    renderIcon = _ref.renderIcon,
-    _ref$iconDescription = _ref.iconDescription,
-    deprecated_iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
-    label = _ref.label,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var Icon = renderIcon;
+exports.ToolbarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    caret = false,
+    children,
+    className,
+    renderIcon,
+    iconDescription: deprecated_iconDescription = '',
+    label,
+    ...rest
+  } = _ref;
+  const Icon = renderIcon;
   return /*#__PURE__*/React.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({
-    align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
+    align: React.useContext(Toolbar.ToolbarContext)?.vertical ? 'right' : 'top'
   }, rest, {
-    label: label !== null && label !== void 0 ? label : deprecated_iconDescription,
+    label: label ?? deprecated_iconDescription,
     ref: ref,
-    className: cx(className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
+    className: cx(className, {
+      [`${blockClass}--caret`]: caret
+    }),
     kind: "ghost",
     size: "md"
   }), /*#__PURE__*/React.createElement(React.Fragment, null, Icon ? /*#__PURE__*/React.createElement(Icon, null) : null, children, caret && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__caret")
+    className: `${blockClass}__caret`
   })));
 });
-var componentName = 'ToolbarButton';
+const componentName = 'ToolbarButton';
 exports.ToolbarButton.displayName = componentName;
-var deprecatedProps = {
+const deprecatedProps = {
   /**
    * **Deprecated**
    * Specifies the label for the icon button
    *  */
   iconDescription: index.propTypesExports.string
 };
-exports.ToolbarButton.propTypes = _rollupPluginBabelHelpers.objectSpread2({
+exports.ToolbarButton.propTypes = {
   /** Determines whether the caret is rendered */
   caret: index.propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
@@ -61,8 +61,9 @@ exports.ToolbarButton.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /** Specifies the label for the icon button */
   label: index.propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
-  renderIcon: index.propTypesExports.func.isRequired
-}, deprecatedProps);
+  renderIcon: index.propTypesExports.func.isRequired,
+  ...deprecatedProps
+};
 exports.ToolbarButton = settings.pkg.checkComponentEnabled(exports.ToolbarButton, componentName);
 
 exports.blockClass = blockClass;

package/lib/components/Toolbar/ToolbarGroup.js

@@ -14,18 +14,19 @@ var Toolbar = require('./Toolbar.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
-var _excluded = ["className", "children"];
 /** Toolbar groups organize the commands within a toolbar into related groups. */
-exports.ToolbarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.ToolbarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref,
-    className: cx("".concat(Toolbar.blockClass, "__group"), className)
+    className: cx(`${Toolbar.blockClass}__group`, className)
   }), children);
 });
-var componentName = 'ToolbarGroup';
+const componentName = 'ToolbarGroup';
 exports.ToolbarGroup.displayName = componentName;
 exports.ToolbarGroup.propTypes = {
   /** Provide the content of the `ToolbarGroup` */

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -13,11 +13,9 @@ var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
-var _excluded = ["children", "className"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--tooltip-trigger");
-var componentName = 'TooltipTrigger';
+const blockClass = `${settings.pkg.prefix}--tooltip-trigger`;
+const componentName = 'TooltipTrigger';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -25,10 +23,13 @@ var componentName = 'TooltipTrigger';
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-exports.TooltipTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.TooltipTrigger = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button",
     ref: ref

package/lib/components/TruncatedList/TruncatedList.js

@@ -16,67 +16,52 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["children", "className", "as", "buttonClassName", "collapsedItemsLimit", "expandedItemsLimit", "onClick", "viewLessLabel", "viewMoreLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--truncated-list");
-var componentName = 'TruncatedList';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--truncated-list`;
+const componentName = 'TruncatedList';
+const defaults = {
   as: 'ul',
   collapsedItemsLimit: 5,
   expandedItemsLimit: 10,
-  onClick: function onClick() {},
+  onClick: () => {},
   viewLessLabel: 'View less',
-  viewMoreLabel: function viewMoreLabel(value) {
-    return "View more (".concat(value, ")");
-  }
+  viewMoreLabel: value => `View more (${value})`
 };
 /**
  * The `TruncatedList` allows consumers to control how many items are
  * revealed to the user while giving the user the ability to expand
  * and see the entire list.
  */
-exports.TruncatedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$as = _ref.as,
-    List = _ref$as === void 0 ? defaults.as : _ref$as,
-    buttonClassName = _ref.buttonClassName,
-    _ref$collapsedItemsLi = _ref.collapsedItemsLimit,
-    collapsedItemsLimit = _ref$collapsedItemsLi === void 0 ? defaults.collapsedItemsLimit : _ref$collapsedItemsLi,
-    _ref$expandedItemsLim = _ref.expandedItemsLimit,
-    expandedItemsLimit = _ref$expandedItemsLim === void 0 ? defaults.expandedItemsLimit : _ref$expandedItemsLim,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
-    _ref$viewLessLabel = _ref.viewLessLabel,
-    viewLessLabel = _ref$viewLessLabel === void 0 ? defaults.viewLessLabel : _ref$viewLessLabel,
-    _ref$viewMoreLabel = _ref.viewMoreLabel,
-    viewMoreLabel = _ref$viewMoreLabel === void 0 ? defaults.viewMoreLabel : _ref$viewMoreLabel,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var childrenArray = React.Children.toArray(children);
+exports.TruncatedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    as: List = defaults.as,
+    buttonClassName,
+    collapsedItemsLimit = defaults.collapsedItemsLimit,
+    expandedItemsLimit = defaults.expandedItemsLimit,
+    onClick = defaults.onClick,
+    viewLessLabel = defaults.viewLessLabel,
+    viewMoreLabel = defaults.viewMoreLabel,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const childrenArray = React.Children.toArray(children);
   // Exception handling: minimum number of items is 1.
-  var minItems = Math.max(collapsedItemsLimit, 1);
+  const minItems = Math.max(collapsedItemsLimit, 1);
   // Exception handling: maximum number of items is the number of items passed as children.
-  var maxItems = Math.min(expandedItemsLimit, childrenArray.length);
-  var _useState = React.useState(true),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isCollapsed = _useState2[0],
-    setIsCollapsed = _useState2[1];
+  const maxItems = Math.min(expandedItemsLimit, childrenArray.length);
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
   // To minimize *initial* animation,
   //   (difference of zero height to component's rendered height)
   // guesstimate the initial height to reduce animation distance.
   //   (difference of the guessed height to rendered height - a few pixels)
-  var _useState3 = React.useState(minItems * 16),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    listHeight = _useState4[0],
-    setListHeight = _useState4[1];
-  var listRef = React.useRef(undefined);
-  var handleToggle = function handleToggle() {
-    setIsCollapsed(function (prev) {
-      return !prev;
-    });
+  const [listHeight, setListHeight] = React.useState(minItems * 16);
+  const listRef = React.useRef(undefined);
+  const handleToggle = () => {
+    setIsCollapsed(prev => !prev);
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     onClick(isCollapsed);
   }, [isCollapsed, onClick]);
 
@@ -84,39 +69,37 @@ exports.TruncatedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // (E.g. the height of plain text is not the same height as a link.)
   // CSS animation requires an explicitly declared height for when the
   // list is both collapsed and expanded.
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (listRef && childrenArray.length > 0) {
-      var _listRef$current;
-      var numItemsToShow = isCollapsed ? minItems : maxItems;
-      var items = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.childNodes;
-      var _listHeight = 0;
-      for (var index = 0; index < numItemsToShow; index++) {
+      const numItemsToShow = isCollapsed ? minItems : maxItems;
+      const items = listRef.current?.childNodes;
+      let listHeight = 0;
+      for (let index = 0; index < numItemsToShow; index++) {
         if (items && items[index]) {
-          var _window;
-          var itemElement = items[index];
-          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(itemElement)) === null || _window === void 0 ? void 0 : _window.height) || '16';
-          _listHeight += parseInt(height);
+          const itemElement = items[index];
+          const height = window?.getComputedStyle(itemElement)?.height || '16';
+          listHeight += parseInt(height);
         }
       }
-      setListHeight(_listHeight);
+      setListHeight(listHeight);
     }
   }, [childrenArray, minItems, maxItems, isCollapsed, listRef]);
-  useIsomorphicEffect.useIsomorphicEffect(function () {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     if (listRef.current) {
-      listRef.current.style.height = "".concat(listHeight, "px");
+      listRef.current.style.height = `${listHeight}px`;
     }
   }, [listHeight]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, isCollapsed ? "".concat(blockClass, "--collapsed") : "".concat(blockClass, "--expanded"),
+    className: cx(blockClass, className, isCollapsed ? `${blockClass}--collapsed` : `${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")),
+    !isCollapsed && childrenArray.length <= maxItems && `${blockClass}--expanded-all`),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(List, {
-    className: "".concat(blockClass, "__list"),
+    className: `${blockClass}__list`,
     ref: listRef
   }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React.createElement(react.Button, {
-    className: cx("".concat(blockClass, "__button"), "".concat(settings.carbon.prefix, "--link"), buttonClassName),
+    className: cx(`${blockClass}__button`, `${settings.carbon.prefix}--link`, buttonClassName),
     kind: "ghost",
     size: "sm",
     onClick: handleToggle

package/lib/components/UserAvatar/UserAvatar.js

@@ -18,13 +18,12 @@ var icons = require('@carbon/react/icons');
 require('../../global/js/utils/props-helper.js');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
-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. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--user-avatar");
-var componentName = 'UserAvatar';
+const blockClass = `${settings.pkg.prefix}--user-avatar`;
+const componentName = 'UserAvatar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -32,51 +31,52 @@ var componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-exports.UserAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
-    className = _ref.className,
-    image = _ref.image,
-    imageDescription = _ref.imageDescription,
-    name = _ref.name,
-    RenderIcon = _ref.renderIcon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    tooltipText = _ref.tooltipText,
-    _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var carbonPrefix = react.usePrefix();
-  var iconSize = {
+exports.UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    backgroundColor = 'order-1-cyan',
+    className,
+    image,
+    imageDescription,
+    name,
+    /* TODO: add other props for UserAvatar, with default values if needed */
+    renderIcon: RenderIcon,
+    size = 'md',
+    tooltipText,
+    tooltipAlignment = 'bottom',
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const carbonPrefix = react.usePrefix();
+  const iconSize = {
     sm: 16,
     md: 20,
     lg: 24,
     xl: 32
   };
-  var formatInitials = function formatInitials() {
-    var _ref2;
-    var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
-    var firstChar = parts[0].charAt(0).toUpperCase();
-    var secondChar = parts[0].charAt(1).toUpperCase();
+  const formatInitials = () => {
+    const parts = name?.split(' ') || [];
+    const firstChar = parts[0].charAt(0).toUpperCase();
+    const secondChar = parts[0].charAt(1).toUpperCase();
     if (parts.length === 1) {
       return firstChar + secondChar;
     }
-    var lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
-    var initials = [firstChar];
+    const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
+    const initials = [firstChar];
     if (lastChar) {
       initials.push(lastChar);
     }
-    return (_ref2 = '').concat.apply(_ref2, initials);
+    return ''.concat(...initials);
   };
-  var getItem = function getItem() {
-    var iconProps = {
+  const getItem = () => {
+    const iconProps = {
       size: iconSize[size]
     };
     if (image) {
       return /*#__PURE__*/React.createElement("img", {
         alt: imageDescription,
         src: image,
-        className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+        className: `${blockClass}__photo ${blockClass}__photo--${size}`
       });
     }
     if (RenderIcon) {
@@ -87,25 +87,24 @@ exports.UserAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     return /*#__PURE__*/React.createElement(icons.User, iconProps);
   };
-  var Avatar = function Avatar() {
-    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-      className: cx(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),
-      // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-      {
-        // switched classes dependant on props or state
-        // example: [`${blockClass}__here-if-small`]: size === 'sm',
-      }),
-      ref: ref
-    }, devtools.getDevtoolsProps(componentName)), getItem());
-  };
+  const Avatar = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    `${blockClass}--${backgroundColor}`, `${blockClass}--${size}`,
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), getItem());
   if (tooltipText) {
     return /*#__PURE__*/React.createElement(react.Tooltip, {
       align: tooltipAlignment,
       label: tooltipText,
-      className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+      className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
     }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React.createElement(Avatar, null)));
   }
   return /*#__PURE__*/React.createElement(Avatar, null);
@@ -140,8 +139,10 @@ exports.UserAvatar.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: index.default.string.isRequired.if(function (_ref3) {
-    var image = _ref3.image;
+  imageDescription: index.default.string.isRequired.if(_ref2 => {
+    let {
+      image
+    } = _ref2;
     return !!image;
   }),
   /**

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -18,87 +18,72 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
-var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--user-profile-image");
-var componentName = 'UserProfileImage';
+const blockClass = `${settings.pkg.prefix}--user-profile-image`;
+const componentName = 'UserProfileImage';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  */
-exports.UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+exports.UserProfileImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _FillItem;
-  var backgroundColor = _ref.backgroundColor,
-    className = _ref.className,
-    kind = _ref.kind,
-    icon = _ref.icon,
-    initials = _ref.initials,
-    image = _ref.image,
-    imageDescription = _ref.imageDescription,
-    size = _ref.size,
-    theme = _ref.theme,
-    tooltipText = _ref.tooltipText,
-    _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var carbonPrefix = react.usePrefix();
-  var icons$1 = {
+  let {
+    backgroundColor,
+    className,
+    kind,
+    icon,
+    initials,
+    image,
+    imageDescription,
+    size,
+    theme,
+    tooltipText,
+    tooltipAlignment = 'bottom',
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const carbonPrefix = react.usePrefix();
+  const icons$1 = {
     user: {
-      md: function md(props) {
-        return /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
-          size: 20
-        }, props));
-      },
-      lg: function lg(props) {
-        return /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
-          size: 24
-        }, props));
-      },
-      xl: function xl(props) {
-        return /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
-          size: 32
-        }, props));
-      }
+      md: props => /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
+        size: 20
+      }, props)),
+      lg: props => /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
+        size: 24
+      }, props)),
+      xl: props => /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
+        size: 32
+      }, props))
     },
     group: {
-      md: function md(props) {
-        return /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
-          size: 20
-        }, props));
-      },
-      lg: function lg(props) {
-        return /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
-          size: 24
-        }, props));
-      },
-      xl: function xl(props) {
-        return /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
-          size: 32
-        }, props));
-      }
+      md: props => /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
+        size: 20
+      }, props)),
+      lg: props => /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
+        size: 24
+      }, props)),
+      xl: props => /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
+        size: 32
+      }, props))
     }
   };
-  var formatInitials = function formatInitials() {
-    var _match;
+  const formatInitials = () => {
     if (initials && initials.length === 2) {
       return initials;
     }
     // RegEx takes in the display name and returns the first and last initials. Thomas Watson and Thomas J. Watson
     // both return JW.
-    return ((_match = (initials || '').match(/(^\S\S?|\b\S)?/g)) === null || _match === void 0 || (_match = _match.join('').match(/(^\S|\S$)?/g)) === null || _match === void 0 ? void 0 : _match.join('').toUpperCase()) || '';
+    return (initials || '').match(/(^\S\S?|\b\S)?/g)?.join('').match(/(^\S|\S$)?/g)?.join('').toUpperCase() || '';
   };
-  var getFillItem = function getFillItem() {
+  const getFillItem = () => {
     if (image) {
-      return function () {
-        return /*#__PURE__*/React.createElement("img", {
-          alt: imageDescription,
-          src: image,
-          className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
-        });
-      };
+      return () => /*#__PURE__*/React.createElement("img", {
+        alt: imageDescription,
+        src: image,
+        className: `${blockClass}__photo ${blockClass}__photo--${size}`
+      });
     }
     if (initials) {
       return formatInitials;
@@ -110,21 +95,19 @@ exports.UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   // if user doesn't provide a color just generate a random one
-  var getRandomColor = function getRandomColor() {
-    var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
+  const getRandomColor = () => {
+    const colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
     return colors[Math.floor(Math.random() * colors.length)];
   };
-  var FillItem = getFillItem();
-  var renderUserProfileImage = function renderUserProfileImage() {
-    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-      ref: ref,
-      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
-    }, devtools.getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React.createElement(FillItem, null)));
-  };
+  const FillItem = getFillItem();
+  const renderUserProfileImage = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    ref: ref,
+    className: cx([blockClass, className, `${blockClass}--${size}`, `${blockClass}--${theme}`, `${blockClass}--${backgroundColor || getRandomColor()}`])
+  }, devtools.getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React.createElement(FillItem, null)));
   return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(react.Tooltip, {
     align: tooltipAlignment,
     label: tooltipText,
-    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+    className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
   }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
@@ -154,8 +137,10 @@ exports.UserProfileImage.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: index.default.string.isRequired.if(function (_ref2) {
-    var image = _ref2.image;
+  imageDescription: index.default.string.isRequired.if(_ref2 => {
+    let {
+      image
+    } = _ref2;
     return !!image;
   }),
   /**