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

package/lib/components/AddSelect/AddSelectList.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 settings = require('../../settings.js');
 var AddSelectRow = require('./AddSelectRow.js');
 var useFocus = require('./hooks/useFocus.js');
@@ -20,6 +20,7 @@ var useFocus = require('./hooks/useFocus.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 = ["filteredItems", "multi"];
 var blockClass = "".concat(settings.pkg.prefix, "--add-select__selections");
@@ -34,7 +35,7 @@ var AddSelectList = function AddSelectList(_ref) {
     setFocus = _useFocus2[1];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     id: "add-select-focus",
-    className: index["default"]("".concat(blockClass, "-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
+    className: cx__default["default"]("".concat(blockClass, "-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -54,9 +55,9 @@ var AddSelectList = function AddSelectList(_ref) {
   }))));
 };
 AddSelectList.propTypes = {
-  filteredItems: index$1["default"].array,
-  focus: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
-  multi: index$1["default"].bool
+  filteredItems: index["default"].array,
+  focus: index["default"].oneOfType([index["default"].number, index["default"].string]),
+  multi: index["default"].bool
 };
 AddSelectList.displayName = componentName;
 

package/lib/components/AddSelect/AddSelectRow.js

@@ -13,14 +13,15 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var settings = require('../../settings.js');
 var AddSelectFormControl = require('./AddSelectFormControl.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 blockClass = "".concat(settings.pkg.prefix, "--add-select__selections");
 var componentName = 'AddSelectList';
@@ -28,7 +29,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
   var _modifiers$options;
   var appliedModifiers = _ref.appliedModifiers,
     displayMetalPanel = _ref.displayMetalPanel,
-    index$1 = _ref.index,
+    index = _ref.index,
     focus = _ref.focus,
     item = _ref.item,
     metaIconDescription = _ref.metaIconDescription,
@@ -48,10 +49,10 @@ var AddSelectRow = function AddSelectRow(_ref) {
     singleSelection = _ref.singleSelection;
   var ref = React.useRef(null);
   React.useEffect(function () {
-    if (focus === index$1) {
+    if (focus === index) {
       ref.current.focus();
     }
-  }, [focus, index$1]);
+  }, [focus, index]);
   var isSelected = function isSelected() {
     if (multi) {
       return multiSelection.includes(item.id);
@@ -60,12 +61,12 @@ var AddSelectRow = function AddSelectRow(_ref) {
   };
   var getTabIndex = function getTabIndex() {
     // on initial load make the first item tabbable
-    if (index$1 === 0 && focus === '') {
+    if (index === 0 && focus === '') {
       return 0;
     }
 
     // make it so only the last focused item is tabbable
-    if (focus === index$1 && focus !== '') {
+    if (focus === index && focus !== '') {
       return 0;
     }
 
@@ -73,8 +74,8 @@ var AddSelectRow = function AddSelectRow(_ref) {
     return -1;
   };
   var focusHandler = React.useCallback(function (reset) {
-    setFocus(reset ? '' : index$1);
-  }, [setFocus, index$1]);
+    setFocus(reset ? '' : index);
+  }, [setFocus, index]);
   var handleSingleSelection = function handleSingleSelection() {
     setSingleSelection(item.id);
   };
@@ -129,13 +130,13 @@ var AddSelectRow = function AddSelectRow(_ref) {
   var selected = isSelected();
   var expanded = parentSelected === item.id;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-row--selected"), isSelected()), "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), "".concat(blockClass, "-row--active"), expanded)),
+    className: cx__default["default"]("".concat(blockClass, "-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-row--selected"), isSelected()), "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), "".concat(blockClass, "-row--active"), expanded)),
     onKeyDown: onSelectKeyDown,
     tabIndex: tabIndex,
     ref: ref,
     role: "row",
     "aria-selected": selected,
-    "aria-posinset": index$1 + 1 // a11y aria-posinset must be >= 1, index is zero based
+    "aria-posinset": index + 1 // a11y aria-posinset must be >= 1, index is zero based
     ,
     "aria-setsize": setSize,
     "aria-expanded": expanded
@@ -200,27 +201,27 @@ var AddSelectRow = function AddSelectRow(_ref) {
   }))));
 };
 AddSelectRow.propTypes = {
-  appliedModifiers: index$1["default"].array,
-  displayMetalPanel: index$1["default"].object,
-  filteredItems: index$1["default"].array,
-  focus: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
-  index: index$1["default"].number,
-  item: index$1["default"].object,
-  metaIconDescription: index$1["default"].string,
-  modifiers: index$1["default"].object,
-  multi: index$1["default"].bool,
-  multiSelection: index$1["default"].array,
-  navIconDescription: index$1["default"].string,
-  parentId: index$1["default"].string,
-  parentSelected: index$1["default"].string,
-  setAppliedModifiers: index$1["default"].func,
-  setDisplayMetaPanel: index$1["default"].func,
-  setFocus: index$1["default"].func,
-  setMultiSelection: index$1["default"].func,
-  setParentSelected: index$1["default"].func,
-  setSingleSelection: index$1["default"].func,
-  setSize: index$1["default"].number,
-  singleSelection: index$1["default"].string
+  appliedModifiers: index["default"].array,
+  displayMetalPanel: index["default"].object,
+  filteredItems: index["default"].array,
+  focus: index["default"].oneOfType([index["default"].number, index["default"].string]),
+  index: index["default"].number,
+  item: index["default"].object,
+  metaIconDescription: index["default"].string,
+  modifiers: index["default"].object,
+  multi: index["default"].bool,
+  multiSelection: index["default"].array,
+  navIconDescription: index["default"].string,
+  parentId: index["default"].string,
+  parentSelected: index["default"].string,
+  setAppliedModifiers: index["default"].func,
+  setDisplayMetaPanel: index["default"].func,
+  setFocus: index["default"].func,
+  setMultiSelection: index["default"].func,
+  setParentSelected: index["default"].func,
+  setSingleSelection: index["default"].func,
+  setSize: index["default"].number,
+  singleSelection: index["default"].string
 };
 AddSelectRow.displayName = componentName;
 

package/lib/components/BigNumbers/BigNumbers.d.ts

@@ -0,0 +1,11 @@
+/**
+ * BigNumbers is used to display large values in a small area. The display of
+ * values can be the value itself, or grouped in a numerator / denominator fashion.
+ * Control over the total fraction decimals displayed as well as how the
+ * values/totals are displayed are done via a locale prop. Other optional props
+ * allow control over size, truncation, if the value is a percentage, the addition
+ * of a button as well as tool tip functionality.
+ * The default locale is English (`en-US`) if one is not provided or if the provided one is not supported.
+ */
+export let BigNumbers: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/BigNumbers/BigNumbers.js

@@ -0,0 +1,245 @@
+/**
+ * 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.
+ */
+
+'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 icons = require('@carbon/react/icons');
+var react = require('@carbon/react');
+var constants = require('./constants.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 _Information;
+var _excluded = ["className", "forceShowTotal", "fractionDigits", "iconButton", "loading", "label", "locale", "percentage", "size", "tooltipDescription", "total", "trending", "truncate", "value"],
+  _excluded2 = ["className", "size"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--big-numbers");
+var skeletonBlockClass = "".concat(settings.pkg.prefix, "--big-numbers-skeleton");
+var componentName = 'BigNumbers';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values for props
+var defaults = {
+  forceShowTotal: false,
+  fractionDigits: 1,
+  loading: false,
+  locale: constants.DefaultLocale,
+  percentage: false,
+  size: constants.BigNumbersSize.Default,
+  total: 0,
+  trending: false,
+  truncate: true,
+  value: null
+};
+
+/**
+ * BigNumbers is used to display large values in a small area. The display of
+ * values can be the value itself, or grouped in a numerator / denominator fashion.
+ * Control over the total fraction decimals displayed as well as how the
+ * values/totals are displayed are done via a locale prop. Other optional props
+ * allow control over size, truncation, if the value is a percentage, the addition
+ * of a button as well as tool tip functionality.
+ * The default locale is English (`en-US`) if one is not provided or if the provided one is not supported.
+ */
+exports.BigNumbers = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var _formatValue, _formatValue2;
+  var className = _ref.className,
+    _ref$forceShowTotal = _ref.forceShowTotal,
+    forceShowTotal = _ref$forceShowTotal === void 0 ? defaults.forceShowTotal : _ref$forceShowTotal,
+    _ref$fractionDigits = _ref.fractionDigits,
+    fractionDigits = _ref$fractionDigits === void 0 ? defaults.fractionDigits : _ref$fractionDigits,
+    iconButton = _ref.iconButton,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? defaults.loading : _ref$loading,
+    label = _ref.label,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? defaults.locale : _ref$locale,
+    _ref$percentage = _ref.percentage,
+    percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    tooltipDescription = _ref.tooltipDescription,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? defaults.total : _ref$total,
+    _ref$trending = _ref.trending,
+    trending = _ref$trending === void 0 ? defaults.trending : _ref$trending,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? defaults.value : _ref$value,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var BigNumbersClasses = cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--lg"), size === constants.BigNumbersSize.Large), "".concat(blockClass, "--xl"), size === constants.BigNumbersSize.XLarge));
+  var supportedLocale = constants.getSupportedLocale(locale);
+  var truncatedValue = (_formatValue = constants.formatValue(supportedLocale, value, fractionDigits, truncate)) !== null && _formatValue !== void 0 ? _formatValue : constants.Characters.Dash;
+  var truncatedTotal = (_formatValue2 = constants.formatValue(supportedLocale, total, fractionDigits, truncate)) !== null && _formatValue2 !== void 0 ? _formatValue2 : 'Unknown';
+  var shouldDisplayDenominator = !percentage && total > value && truncatedValue !== truncatedTotal || forceShowTotal && total > 0;
+  if (loading) {
+    return /*#__PURE__*/React__default["default"].createElement(SkeletonBigNumbers, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      ref: ref,
+      className: className,
+      size: size
+    }, devtools.getDevtoolsProps(componentName)));
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass, BigNumbersClasses, className),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__row")
+  }, /*#__PURE__*/React__default["default"].createElement("h4", {
+    className: "".concat(blockClass, "__label")
+  }, label), tooltipDescription && /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
+    description: tooltipDescription,
+    align: "right",
+    className: "".concat(blockClass, "__info")
+  }, /*#__PURE__*/React__default["default"].createElement(TooltipTrigger.TooltipTrigger, {
+    className: "".concat(blockClass, "__tooltip-trigger")
+  }, _Information || (_Information = /*#__PURE__*/React__default["default"].createElement(icons.Information, {
+    size: 16
+  }))))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__row"),
+    role: "math"
+  }, trending && /*#__PURE__*/React__default["default"].createElement(icons.ArrowUp, {
+    className: "".concat(blockClass, "__trend"),
+    size: constants.getIconSize(size)
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__value")
+  }, percentage ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__percentage")
+  }, truncatedValue, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__percentage-mark")
+  }, "%")) : truncatedValue), shouldDisplayDenominator && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__total")
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, constants.Characters.Slash, truncatedTotal)), iconButton));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.BigNumbers = settings.pkg.checkComponentEnabled(exports.BigNumbers, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.BigNumbers.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.BigNumbers.propTypes = {
+  /**
+   * Optional class name.
+   * @type number
+   */
+  className: index["default"].string,
+  /**
+   * Display the `total` even when the `value` is equal to
+   * the `total` when `forceShowTotal` prop is true on the
+   * condition that the `total` is greater than 0.
+   * @type bool
+   */
+  forceShowTotal: index["default"].bool,
+  /**
+   * Optional value to control the maximum fraction digits
+   * used when truncating the value and total.
+   * @type number
+   */
+  fractionDigits: index["default"].number,
+  /** Displays an iconButton next to the BigNumbers value
+   * @type node
+   */
+  iconButton: index["default"].node,
+  /**
+   * Text label for BigNumbers.
+   * @type string
+   */
+  label: index["default"].string.isRequired,
+  /** Specify if the BigNumbers is in a loading state
+   * @type bool
+   */
+  loading: index["default"].bool,
+  /**
+   * Locale value to determine approach to formatting numbers.
+   * @type string
+   */
+  locale: index["default"].string,
+  /**
+   * Format number to percentage when `percentage` prop is true.
+   * @type bool
+   */
+  percentage: index["default"].bool,
+  /** The size of the BigNumbers.
+   * @type string
+   */
+  size: index["default"].oneOf(Object.values(constants.BigNumbersSize)),
+  /** Label applied to a Tooltip - marked with the Information icon.
+   * @type string
+   */
+  tooltipDescription: index["default"].string,
+  /**
+   * Total value that the main BigNumbers value is a subset of.
+   * @type number
+   */
+  total: index["default"].number,
+  /** Display trending icon.
+   * @type boolean
+   */
+  trending: index["default"].bool,
+  /** Specify whether or not the values should be truncated.
+   * @type boolean
+   */
+  truncate: index["default"].bool,
+  /**
+   * The main BigNumbers value to display
+   * @type number
+   */
+  value: index["default"].number
+};
+
+/**
+ * SkeletonBigNumbers is used to display a skeleton version while
+ * content is loading (handled by the BigNumbers prop `loading').
+ *
+ * Note: This component is only used within BigNumbers.
+ */
+var SkeletonBigNumbers = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    size = _ref2.size,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+  var BigNumbersSkeletonClasses = cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(skeletonBlockClass, "--lg"), size === constants.BigNumbersSize.Large), "".concat(skeletonBlockClass, "--xl"), size === constants.BigNumbersSize.XLarge));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](className, skeletonBlockClass, BigNumbersSkeletonClasses),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, {
+    className: "".concat(skeletonBlockClass, "__label")
+  }), /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, {
+    heading: true,
+    className: "".concat(skeletonBlockClass, "__value"),
+    width: "80%"
+  }));
+});
+SkeletonBigNumbers.propTypes = {
+  /**
+   * Optional class name.
+   * @type number
+   */
+  className: index["default"].string,
+  /** The size of the BigNumbers.
+   * @type string
+   */
+  size: index["default"].oneOf(Object.values(constants.BigNumbersSize))
+};

package/lib/components/BigNumbers/constants.d.ts

@@ -0,0 +1,13 @@
+export namespace BigNumbersSize {
+    let Default: string;
+    let Large: string;
+    let XLarge: string;
+}
+export namespace Characters {
+    let Dash: string;
+    let Slash: string;
+}
+export const DefaultLocale: "en-US";
+export function formatValue(locale: string, value: number, fractionDigits: number, truncate: boolean): string | null;
+export function getIconSize(size: string): 16 | 20 | 24;
+export function getSupportedLocale(locale: string): string;

package/lib/components/BigNumbers/constants.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/* **************************** | CONSTANTS | ***************************** */
+
+var BigNumbersSize = {
+  Default: 'default',
+  Large: 'lg',
+  XLarge: 'xl'
+};
+var Characters = {
+  Dash: '–',
+  Slash: '/'
+};
+var DefaultLocale = 'en-US';
+
+/* ************************ | UTILITY FUNCTIONS | ************************* */
+
+/**
+ * Ensure that the value is formatted correctly based on whether it should be truncated or not.
+ * @param {string} locale Locale value to be used in formatting numbers.
+ * @param {number} value The value to format.
+ * @param {number} fractionDigits How many significant figures should be displayed.
+ * @param {boolean} truncate Whether or not the value should be truncated.
+ * @returns {string | null} The formatted value.
+ */
+var formatValue = function formatValue(locale, value, fractionDigits, truncate) {
+  if (value === null || value === undefined || typeof value !== 'number') {
+    return null;
+  }
+  return truncate ? Intl.NumberFormat(locale, {
+    notation: 'compact',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Math.round(fractionDigits)
+  }).format(value) : Intl.NumberFormat(locale).format(value);
+};
+
+/**
+ * Function which takes a size and returns a numeric value for sizing icons
+ * @param {string} size Size of desired icon. Expected values are 'default', 'lg', or 'xl'.
+ */
+var getIconSize = function getIconSize(size) {
+  switch (size) {
+    case BigNumbersSize.Large:
+      return 20;
+    case BigNumbersSize.XLarge:
+      return 24;
+    default:
+      return 16;
+  }
+};
+
+/**
+ * Function which takes a locale and returns a supported locale or the default
+ * @param {string} locale Desired locale for number formatting.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales
+ */
+var getSupportedLocale = function getSupportedLocale(locale) {
+  return Intl.NumberFormat.supportedLocalesOf(locale).length > 0 ? locale : DefaultLocale;
+};
+
+exports.BigNumbersSize = BigNumbersSize;
+exports.Characters = Characters;
+exports.DefaultLocale = DefaultLocale;
+exports.formatValue = formatValue;
+exports.getIconSize = getIconSize;
+exports.getSupportedLocale = getSupportedLocale;

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

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

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.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 useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var react = require('@carbon/react');
 var settings = require('../../settings.js');
@@ -24,6 +24,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 _TooltipTrigger;
 var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel"],
@@ -130,7 +131,7 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       setDisplayedBreadcrumbItems([]);
       return;
     }
-    var newDisplayedBreadcrumbItems = breadcrumbs.map(function (_ref4, index$1) {
+    var newDisplayedBreadcrumbItems = breadcrumbs.map(function (_ref4, index) {
       var className = _ref4.className,
         key = _ref4.key,
         label = _ref4.label,
@@ -138,8 +139,8 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
       return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers["extends"]({
         key: key,
-        className: index$1 > 0 || displayCount > 1 ? index["default"]([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
-        title: index$1 + 1 === breadcrumbs.length ? title : null
+        className: index > 0 || displayCount > 1 ? cx__default["default"]([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
+        title: index + 1 === breadcrumbs.length ? title : null
       }, rest), label);
     });
 
@@ -258,15 +259,15 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   // item resize
   useResizeObserver.useResizeObserver(breadcrumbItemWithOverflow, handleResize);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
+    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
     ref: breadcrumbItemWithOverflow
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"](["".concat(blockClass, "__space")])
+    className: cx__default["default"](["".concat(blockClass, "__space")])
   }, hiddenSizingItems, /*#__PURE__*/React__default["default"].createElement(react.Breadcrumb, _rollupPluginBabelHelpers["extends"]({
-    className: index["default"]("".concat(blockClass, "__breadcrumb-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-container-with-items"), displayedBreadcrumbItems.length > 1)),
+    className: cx__default["default"]("".concat(blockClass, "__breadcrumb-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-container-with-items"), displayedBreadcrumbItems.length > 1)),
     noTrailingSlash: noTrailingSlash
   }, other), ((_backItem = backItem) === null || _backItem === void 0 ? void 0 : _backItem.href) && (((_backItem2 = backItem) === null || _backItem2 === void 0 ? void 0 : _backItem2.label) || ((_backItem3 = backItem) === null || _backItem3 === void 0 ? void 0 : _backItem3.title)) && /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, {
-    className: index["default"]("".concat(blockClass, "__breadcrumb-back"))
+    className: cx__default["default"]("".concat(blockClass, "__breadcrumb-back"))
   }, /*#__PURE__*/React__default["default"].createElement(react.Link, {
     href: backItem.href,
     renderIcon: function renderIcon() {
@@ -284,27 +285,27 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
 // Return a placeholder if not released and not enabled by feature flag
 exports.BreadcrumbWithOverflow = settings.pkg.checkComponentEnabled(exports.BreadcrumbWithOverflow, componentName);
 exports.BreadcrumbWithOverflow.propTypes = {
-  breadcrumbs: index$1["default"].arrayOf(index$1["default"].shape({
+  breadcrumbs: index["default"].arrayOf(index["default"].shape({
     /**
      * Optional string representing the link location for the BreadcrumbItem
      */
-    href: index$1["default"].string,
+    href: index["default"].string,
     /**
      * Provide if this breadcrumb item represents the current page
      */
-    isCurrentPage: index$1["default"].bool,
+    isCurrentPage: index["default"].bool,
     /**
      * Key required to render array efficiently
      */
-    key: index$1["default"].string.isRequired,
+    key: index["default"].string.isRequired,
     /**
      * Pass in content that will be inside of the BreadcrumbItem
      */
-    label: index$1["default"].node,
+    label: index["default"].node,
     /**
      * A string based alternative to the children, required only if children is not of type string.
      */
-    title: index$1["default"].string.isRequired.if(function (_ref5) {
+    title: index["default"].string.isRequired.if(function (_ref5) {
       var label = _ref5.label;
       return typeof label !== 'string';
     })
@@ -312,19 +313,19 @@ exports.BreadcrumbWithOverflow.propTypes = {
   /**
    * className
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * maxVisible: maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1)
    */
-  maxVisible: index$1["default"].number,
+  maxVisible: index["default"].number,
   /**
    * noTrailing slash - same as for Carbon
    */
-  noTrailingSlash: index$1["default"].bool,
+  noTrailingSlash: index["default"].bool,
   /**
    * overflowAriaLabel label for open close button overflow used for breadcrumb items that do not fit.
    */
-  overflowAriaLabel: index$1["default"].string.isRequired.if(function (_ref6) {
+  overflowAriaLabel: index["default"].string.isRequired.if(function (_ref6) {
     var breadcrumbs = _ref6.breadcrumbs;
     return breadcrumbs.length > 1;
   })