@carbon/ibm-products 2.43.2-canary.31 → 2.43.2-canary.317

package/lib/components/Toolbar/ToolbarButton.js

@@ -7,22 +7,15 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var Toolbar = require('./Toolbar.js');
+var index = require('../../_virtual/index.js');
 var react = require('@carbon/react');
 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"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription", "label"];
 var blockClass = "".concat(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) {
@@ -33,24 +26,32 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     renderIcon = _ref.renderIcon,
     _ref$iconDescription = _ref.iconDescription,
-    iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    deprecated_iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    label = _ref.label,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
-  return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers["extends"]({
-    align: ((_useContext = React.useContext(Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+  return /*#__PURE__*/React.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({
+    align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
-    label: iconDescription,
+    label: label !== null && label !== void 0 ? label : deprecated_iconDescription,
     ref: ref,
-    className: cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
+    className: cx(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", {
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, Icon ? /*#__PURE__*/React.createElement(Icon, null) : null, children, caret && /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__caret")
   })));
 });
 var componentName = 'ToolbarButton';
 exports.ToolbarButton.displayName = componentName;
-exports.ToolbarButton.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Specifies the label for the icon button
+   *  */
+  iconDescription: index.propTypesExports.string
+};
+exports.ToolbarButton.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /** Determines whether the caret is rendered */
   caret: index.propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
@@ -58,10 +59,11 @@ exports.ToolbarButton.propTypes = {
   /** Provide an optional class to be applied to the containing node */
   className: index.propTypesExports.string,
   /** Specifies the label for the icon button */
-  iconDescription: index.propTypesExports.string.isRequired,
+  label: index.propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: index.propTypesExports.func.isRequired
-};
+}, deprecatedProps);
 exports.ToolbarButton = settings.pkg.checkComponentEnabled(exports.ToolbarButton, componentName);
 
 exports.blockClass = blockClass;
+exports.deprecatedProps = deprecatedProps;

package/lib/components/Toolbar/ToolbarGroup.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface ToolbarGroupProps {
+export interface ToolbarGroupProps {
     /** Provide the content of the `ToolbarGroup` */
     children?: ReactNode;
     /** Provide an optional class to be applied to the containing node */
@@ -15,4 +15,3 @@ interface ToolbarGroupProps {
 export declare let ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/Toolbar/ToolbarGroup.js

@@ -7,19 +7,12 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
-var settings = require('../../settings.js');
+var index = require('../../_virtual/index.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 cx = require('classnames');
+var settings = require('../../settings.js');
 
 var _excluded = ["className", "children"];
 /** Toolbar groups organize the commands within a toolbar into related groups. */
@@ -27,9 +20,9 @@ exports.ToolbarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref,
-    className: cx__default["default"]("".concat(Toolbar.blockClass, "__group"), className)
+    className: cx("".concat(Toolbar.blockClass, "__group"), className)
   }), children);
 });
 var componentName = 'ToolbarGroup';

package/lib/components/Toolbar/index.d.ts

@@ -1,3 +1,12 @@
-export { Toolbar } from "./Toolbar";
-export { ToolbarButton } from "./ToolbarButton";
-export { ToolbarGroup } from "./ToolbarGroup";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { Toolbar } from './Toolbar';
+export { ToolbarButton } from './ToolbarButton';
+export { ToolbarGroup } from './ToolbarGroup';
+export type { ToolbarProps } from './Toolbar';
+export type { ToolbarButtonProps } from './ToolbarButton';
+export type { ToolbarGroupProps } from './ToolbarGroup';

package/lib/components/TooltipTrigger/TooltipTrigger.d.ts

@@ -2,7 +2,7 @@ export function TooltipTrigger({ children, className, ...rest }: {
     [x: string]: any;
     children: any;
     className: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace TooltipTrigger {
     export { componentName as displayName };
     export namespace propTypes {
@@ -10,6 +10,7 @@ export namespace TooltipTrigger {
         let className: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 declare const componentName: "TooltipTrigger";
 import PropTypes from 'prop-types';
 export {};

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -7,19 +7,12 @@
 
 'use strict';
 
-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 = require('../../_virtual/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"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -36,10 +29,10 @@ exports.TooltipTrigger = function TooltipTrigger(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
   }, rest, {
-    className: cx__default["default"](blockClass,
+    className: cx(blockClass,
     // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
     )
@@ -60,9 +53,9 @@ exports.TooltipTrigger.propTypes = {
   /**
    * Child content of tooltip trigger
    */
-  children: index["default"].node,
+  children: index.default.node,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string
+  className: index.default.string
 };

package/lib/components/TruncatedList/TruncatedList.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren, ReactNode } from 'react';
-interface TruncatedListProps extends PropsWithChildren {
+export interface TruncatedListProps extends PropsWithChildren {
     as?: React.ElementType | string;
     /**
      * Optional class name for expand/collapse button.
@@ -49,4 +49,3 @@ interface TruncatedListProps extends PropsWithChildren {
  * and see the entire list.
  */
 export declare let TruncatedList: React.ForwardRefExoticComponent<TruncatedListProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/TruncatedList/TruncatedList.js

@@ -7,20 +7,13 @@
 
 'use strict';
 
-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 cx = require('classnames');
-var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 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 index = require('../../_virtual/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
 
 var _excluded = ["children", "className", "as", "buttonClassName", "collapsedItemsLimit", "expandedItemsLimit", "onClick", "viewLessLabel", "viewMoreLabel"];
 
@@ -42,7 +35,7 @@ var defaults = {
  * revealed to the user while giving the user the ability to expand
  * and see the entire list.
  */
-exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.TruncatedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$as = _ref.as,
@@ -76,7 +69,7 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     listHeight = _useState4[0],
     setListHeight = _useState4[1];
-  var listRef = React.useRef();
+  var listRef = React.useRef(undefined);
   var handleToggle = function handleToggle() {
     setIsCollapsed(function (prev) {
       return !prev;
@@ -107,20 +100,20 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
       setListHeight(_listHeight);
     }
   }, [childrenArray, minItems, maxItems, isCollapsed, listRef]);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, className, isCollapsed ? "".concat(blockClass, "--collapsed") : "".concat(blockClass, "--expanded"),
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(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")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(List, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(List, {
     className: "".concat(blockClass, "__list"),
     ref: listRef,
     style: {
       height: listHeight
     }
-  }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-    className: cx__default["default"]("".concat(blockClass, "__button"), "".concat(settings.carbon.prefix, "--link"), buttonClassName),
+  }, 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),
     kind: "ghost",
     size: "sm",
     onClick: handleToggle
@@ -142,40 +135,40 @@ exports.TruncatedList.propTypes = {
    * The type of list element to render.
    * This could be a `ul`, `ol`, or a custom React component.
    */
-  as: index["default"].oneOfType([index["default"].elementType, index["default"].string]),
+  as: index.default.oneOfType([index.default.elementType, index.default.string]),
   /**
    * Optional class name for expand/collapse button.
    */
-  buttonClassName: index["default"].string,
+  buttonClassName: index.default.string,
   /**
    * The contents of the TruncatedList.
    */
-  children: index["default"].node.isRequired,
+  children: index.default.node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["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["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["default"].number,
+  expandedItemsLimit: index.default.number,
   /**
    * Optional callback reports the collapsed state of the list.
    */
-  onClick: index["default"].func,
+  onClick: index.default.func,
   /**
    * Text label for when the list is expanded.
    */
-  viewLessLabel: index["default"].string,
+  viewLessLabel: index.default.string,
   /**
    * Callback function for building the label when the list is collapsed.
    */
-  viewMoreLabel: index["default"].func
+  viewMoreLabel: index.default.func
 };

package/lib/components/TruncatedList/index.d.ts

@@ -1 +1,8 @@
-export { TruncatedList } from "./TruncatedList";
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+export { TruncatedList } from './TruncatedList';
+export type { TruncatedListProps } from './TruncatedList';

package/lib/components/UserAvatar/UserAvatar.d.ts

@@ -1,2 +1,60 @@
-export let UserAvatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2024, 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 React from 'react';
+import '../../global/js/utils/props-helper';
+/**
+ * TODO: A description of the component.
+ */
+type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
+type Size = 'xl' | 'lg' | 'md' | 'sm';
+type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+type ImageProps = {
+    /**
+     * When passing the image prop, supply a full path to the image to be displayed.
+     */
+    image: string;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+     */
+    imageDescription: string;
+} | {
+    image?: never;
+    imageDescription?: never;
+};
+type UserAvatarBaseProps = {
+    /**
+     * Provide the background color need to be set for UserAvatar.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * 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.
+     */
+    name?: string;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the default one
+     */
+    renderIcon?: React.ElementType | string;
+    /**
+     * Set the size of the avatar circle
+     */
+    size?: Size;
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Pass in the display name to have it shown on hover
+     */
+    tooltipText?: string;
+};
+type UserAvatarProps = UserAvatarBaseProps & ImageProps;
+export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/UserAvatar/UserAvatar.js

@@ -7,11 +7,9 @@
 
 'use strict';
 
-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 = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
@@ -20,11 +18,6 @@ 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", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -35,42 +28,23 @@ var componentName = 'UserAvatar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
-
 /**
  * TODO: A description of the component.
  */
 
-var defaults = {
-  size: 'md',
-  tooltipAlignment: 'bottom',
-  backgroundColor: 'order-1-cyan'
-};
-exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.UserAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? defaults.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 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var iconSize = {
@@ -81,7 +55,7 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   var formatInitials = function formatInitials() {
     var _ref2;
-    var parts = name.split(' ');
+    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();
     if (parts.length === 1) {
@@ -99,23 +73,23 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
       size: iconSize[size]
     };
     if (image) {
-      return /*#__PURE__*/React__default["default"].createElement("img", {
+      return /*#__PURE__*/React.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);
+      return /*#__PURE__*/React.createElement(RenderIcon, iconProps);
     }
     if (name) {
       return formatInitials();
     }
-    return /*#__PURE__*/React__default["default"].createElement(icons.User, iconProps);
+    return /*#__PURE__*/React.createElement(icons.User, iconProps);
   };
   var Avatar = function Avatar() {
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-      className: cx__default["default"](blockClass,
+    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),
@@ -130,13 +104,13 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
     }, devtools.getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {
-    return /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
+    return /*#__PURE__*/React.createElement(react.Tooltip, {
       align: tooltipAlignment,
       label: tooltipText,
       className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
-    }, /*#__PURE__*/React__default["default"].createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React__default["default"].createElement(Avatar, null)));
+    }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React.createElement(Avatar, null)));
   }
-  return /*#__PURE__*/React__default["default"].createElement(Avatar, null);
+  return /*#__PURE__*/React.createElement(Avatar, null);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -151,43 +125,47 @@ exports.UserAvatar.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 exports.UserAvatar.propTypes = {
   /**
-   * Provide the background color need to be set for UserAvatar.
+   * Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
+   * For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
    */
-  backgroundColor: index["default"].oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
+  backgroundColor: index.default.oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
-  image: index["default"].string,
+  /**@ts-ignore */
+  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) {
+  /**@ts-ignore */
+  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.
    */
-  name: index["default"].string,
+  name: index.default.string,
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
-  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**@ts-ignore */
+  renderIcon: index.default.oneOfType([index.default.func, index.default.object, index.default.string]),
   /**
    * Set the size of the avatar circle
    */
-  size: index["default"].oneOf(['xl', 'lg', 'md', 'sm']),
+  size: index.default.oneOf(['xl', 'lg', 'md', 'sm']),
   /**
    * Specify how the trigger should align with the tooltip
    */
-  tooltipAlignment: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Pass in the display name to have it shown on hover
    */
-  tooltipText: index["default"].string
+  tooltipText: index.default.string
   /* TODO: add types and DocGen for all props. */
 };

package/lib/components/UserProfileImage/UserProfileImage.d.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React from 'react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 import '../../global/js/utils/props-helper';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 import { IconButton } from '@carbon/react';
+import React from 'react';
 type imageProps = {
     /**
      * When passing the image prop, supply a full path to the image to be displayed.
@@ -25,7 +25,7 @@ type imageProps = {
 type UserProfileImageBaseProps = {
     /**
      * The background color passed should match one of the background colors in the library documentation:
-     * https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
+     * https://pages.github.ibm.com/carbon/ibm-products/patterns/user-profile-images/
      */
     backgroundColor?: string;
     /**
@@ -61,7 +61,7 @@ type UserProfileImageBaseProps = {
      */
     tooltipText?: string;
 };
-type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
+export type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
 /**
  * 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.
  */