@carbon/ibm-products 2.59.0 → 2.60.0

package/es/components/AddSelect/AddSelectRow.js

@@ -114,14 +114,14 @@ var AddSelectRow = function AddSelectRow(_ref) {
     }
   };
   var isInMetaPanel = function isInMetaPanel(id) {
-    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
+    return id === (displayMetalPanel === null || displayMetalPanel === undefined ? undefined : displayMetalPanel.id);
   };
-  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
+  var hasModifiers = (modifiers === null || modifiers === undefined || (_modifiers$options = modifiers.options) === null || _modifiers$options === undefined ? undefined : _modifiers$options.length) > 0;
   var tabIndex = getTabIndex();
   var selected = isSelected();
   var expanded = parentSelected === item.id;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "-row"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "-row--selected"), isSelected()), "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), "".concat(blockClass, "-row--active"), expanded)),
+    className: cx("".concat(blockClass, "-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "-row--selected"), isSelected()), "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), "".concat(blockClass, "-row--active"), expanded), "".concat(blockClass, "-row--focused"), focus === index)),
     onKeyDown: onSelectKeyDown,
     tabIndex: tabIndex,
     ref: ref,

package/es/components/AddSelect/AddSelectSidebar.d.ts

@@ -14,22 +14,21 @@ export function AddSelectSidebar({ appliedModifiers, closeIconDescription, displ
 }): React.JSX.Element;
 export namespace AddSelectSidebar {
     export namespace propTypes {
-        let appliedModifiers: PropTypes.Requireable<any[]>;
-        let closeIconDescription: PropTypes.Requireable<string>;
-        let displayMetalPanel: PropTypes.Requireable<object>;
-        let illustrationTheme: PropTypes.Requireable<string>;
-        let influencerTitle: PropTypes.Requireable<string>;
-        let items: PropTypes.Requireable<object>;
-        let metaPanelTitle: PropTypes.Requireable<string>;
-        let modifiers: PropTypes.Requireable<object>;
-        let multiSelection: PropTypes.Requireable<any[]>;
-        let noSelectionDescription: PropTypes.Requireable<string>;
-        let noSelectionTitle: PropTypes.Requireable<string>;
-        let setDisplayMetaPanel: PropTypes.Requireable<(...args: any[]) => any>;
+        let appliedModifiers: any;
+        let closeIconDescription: any;
+        let displayMetalPanel: any;
+        let illustrationTheme: any;
+        let influencerTitle: any;
+        let items: any;
+        let metaPanelTitle: any;
+        let modifiers: any;
+        let multiSelection: any;
+        let noSelectionDescription: any;
+        let noSelectionTitle: any;
+        let setDisplayMetaPanel: any;
     }
     export { componentName as displayName };
 }
 import React from 'react';
-import PropTypes from 'prop-types';
 declare const componentName: "AddSelectSidebar";
 export {};

package/es/components/AddSelect/AddSelectSidebar.js

@@ -30,7 +30,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     noSelectionDescription = _ref.noSelectionDescription,
     noSelectionTitle = _ref.noSelectionTitle,
     setDisplayMetaPanel = _ref.setDisplayMetaPanel;
-  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
+  var hasModifiers = (modifiers === null || modifiers === undefined || (_modifiers$options = modifiers.options) === null || _modifiers$options === undefined ? undefined : _modifiers$options.length) > 0;
   var hasSelections = multiSelection.length > 0;
   var getNewItem = function getNewItem(item) {
     // certain properties should not be displayed in the sidebar

package/es/components/AddSelect/AddSelectSort.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export interface AddSelectSortProps {
     setSortAttribute?: (attribute: any) => void;
     setSortDirection?: (direction: any) => void;
@@ -9,10 +8,10 @@ export interface AddSelectSortProps {
 export declare const AddSelectSort: {
     ({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: AddSelectSortProps): React.JSX.Element;
     propTypes: {
-        setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
-        setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;
-        sortBy: PropTypes.Requireable<any[]>;
-        sortByLabel: PropTypes.Requireable<string>;
+        setSortAttribute: any;
+        setSortDirection: any;
+        sortBy: any;
+        sortByLabel: any;
     };
     displayName: string;
 };

package/es/components/AddSelect/AddSelectSort.js

@@ -20,7 +20,7 @@ var AddSelectSort = function AddSelectSort(_ref) {
     setSortDirection = _ref.setSortDirection,
     sortBy = _ref.sortBy,
     sortByLabel = _ref.sortByLabel;
-  var sortByOpts = sortBy ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.reduce(function (acc, cur) {
+  var sortByOpts = sortBy ? sortBy === null || sortBy === undefined ? undefined : sortBy.reduce(function (acc, cur) {
     var opts = [{
       id: "".concat(cur, "-asc"),
       itemText: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React__default.createElement(ArrowUp, {
@@ -43,8 +43,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   var sortHandler = function sortHandler(_ref2) {
     var direction = _ref2.direction,
       attribute = _ref2.attribute;
-    setSortAttribute === null || setSortAttribute === void 0 || setSortAttribute(attribute);
-    setSortDirection === null || setSortDirection === void 0 || setSortDirection(direction);
+    setSortAttribute === null || setSortAttribute === undefined || setSortAttribute(attribute);
+    setSortDirection === null || setSortDirection === undefined || setSortDirection(direction);
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
@@ -61,8 +61,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),
-      key: opt === null || opt === void 0 ? void 0 : opt.id,
-      itemText: opt === null || opt === void 0 ? void 0 : opt.itemText,
+      key: opt === null || opt === undefined ? undefined : opt.id,
+      itemText: opt === null || opt === undefined ? undefined : opt.itemText,
       onClick: function onClick() {
         return sortHandler(opt);
       }

package/es/components/AddSelect/add-select-utils.js

@@ -22,30 +22,19 @@ var _excluded = ["children"];
  * @param {object} data
  * @returns an object of normalized data
  */
-var normalize = function normalize(data) {
+var _normalize = function normalize(data) {
   var items = data.entries.reduce(function (prev, cur) {
     var children = cur.children,
       item = _objectWithoutProperties(cur, _excluded);
     prev[item.id] = item;
     if (children) {
-      var childItems = normalize(children);
+      var childItems = _normalize(children);
       return _objectSpread2(_objectSpread2({}, prev), childItems);
     }
     return prev;
   }, {});
   return items;
 };
-
-/**
- * takes in a global filters array and a flat list of items
- * it then searches through the items and finds any with the matching filter properties
- * and adds those values to the array
- * globalFilters looks like [{ id: someProperty }]
- * the returned array would look like [{ id: someProperty, opts: [value, value]}]
- * @param {Array} globalFilters - list of filter properties
- * @param {Array} items - items to search through
- * @returns an array of filter values
- */
 var getGlobalFilterValues = function getGlobalFilterValues(globalFilters, items) {
   var itemIds = Object.keys(items);
   var results = globalFilters.reduce(function (prevFilter, curFilter) {
@@ -68,8 +57,8 @@ var getGlobalFilterValues = function getGlobalFilterValues(globalFilters, items)
 var sortItems = function sortItems(attribute, direction) {
   return function (a, b) {
     var _a$attribute, _b$attribute;
-    var valueA = (_a$attribute = a[attribute]) === null || _a$attribute === void 0 ? void 0 : _a$attribute.split(' ').join('');
-    var valueB = (_b$attribute = b[attribute]) === null || _b$attribute === void 0 ? void 0 : _b$attribute.split(' ').join('');
+    var valueA = (_a$attribute = a[attribute]) === null || _a$attribute === undefined ? undefined : _a$attribute.split(' ').join('');
+    var valueB = (_b$attribute = b[attribute]) === null || _b$attribute === undefined ? undefined : _b$attribute.split(' ').join('');
     if (direction === 'desc') {
       return valueA > valueB ? -1 : 1;
     }
@@ -116,7 +105,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
         }
         var item = (_prev$find = prev.find(function (item) {
           return item.id === cur.id;
-        })) === null || _prev$find === void 0 || (_prev$find = _prev$find.children) === null || _prev$find === void 0 ? void 0 : _prev$find.entries;
+        })) === null || _prev$find === undefined || (_prev$find = _prev$find.children) === null || _prev$find === undefined ? undefined : _prev$find.entries;
         return item;
       }, items.entries);
     }
@@ -131,4 +120,4 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
   }
 };
 
-export { getFilteredItems, getGlobalFilterValues, normalize, sortItems };
+export { getFilteredItems, getGlobalFilterValues, _normalize as normalize, sortItems };

package/es/components/AddSelect/hooks/usePath.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useEffect } from 'react';
 
 var usePath = function usePath() {

package/es/components/BigNumbers/BigNumbers.d.ts

@@ -1,11 +1,34 @@
+/**
+ * Copyright IBM Corp. 2024, 2025
+ *
+ * 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, { ReactNode } from 'react';
+import { BigNumbersSizeValues } from './constants';
+export interface BigNumbersProps {
+    className?: string;
+    forceShowTotal?: boolean;
+    fractionDigits?: number;
+    iconButton?: ReactNode;
+    loading?: boolean;
+    label: string;
+    locale?: string;
+    percentage?: boolean;
+    size?: BigNumbersSizeValues;
+    tooltipDescription?: string;
+    total?: number;
+    trending?: boolean;
+    truncate?: boolean;
+    value?: number;
+}
 /**
  * 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.
+ * 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';
+export declare let BigNumbers: React.ForwardRefExoticComponent<BigNumbersProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/BigNumbers/BigNumbers.js

@@ -6,91 +6,73 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { getSupportedLocale } from '../../global/js/utils/getSupportedLocale.js';
 import { pkg } from '../../settings.js';
 import { Information, ArrowUp } from '@carbon/react/icons';
-import { Tooltip, SkeletonText } from '@carbon/react';
-import { BigNumbersSize, getSupportedLocale, formatValue, Characters, getIconSize, DefaultLocale } from './constants.js';
+import { Tooltip } from '@carbon/react';
+import { BigNumbersSkeleton } from './BigNumbersSkeleton.js';
+import { formatValue, Characters, getIconSize, DefaultLocale } from './constants.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
 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 _excluded = ["className", "forceShowTotal", "fractionDigits", "iconButton", "loading", "label", "locale", "percentage", "size", "tooltipDescription", "total", "trending", "truncate", "value"];
 var blockClass = "".concat(pkg.prefix, "--big-numbers");
-var skeletonBlockClass = "".concat(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: DefaultLocale,
-  percentage: false,
-  size: 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.
+ * 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.
  */
-var BigNumbers = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var BigNumbers = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _formatValue, _formatValue2;
   var className = _ref.className,
     _ref$forceShowTotal = _ref.forceShowTotal,
-    forceShowTotal = _ref$forceShowTotal === void 0 ? defaults.forceShowTotal : _ref$forceShowTotal,
+    forceShowTotal = _ref$forceShowTotal === undefined ? false : _ref$forceShowTotal,
     _ref$fractionDigits = _ref.fractionDigits,
-    fractionDigits = _ref$fractionDigits === void 0 ? defaults.fractionDigits : _ref$fractionDigits,
+    fractionDigits = _ref$fractionDigits === undefined ? 1 : _ref$fractionDigits,
     iconButton = _ref.iconButton,
     _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? defaults.loading : _ref$loading,
+    loading = _ref$loading === undefined ? false : _ref$loading,
     label = _ref.label,
     _ref$locale = _ref.locale,
-    locale = _ref$locale === void 0 ? defaults.locale : _ref$locale,
+    locale = _ref$locale === undefined ? DefaultLocale : _ref$locale,
     _ref$percentage = _ref.percentage,
-    percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
+    percentage = _ref$percentage === undefined ? false : _ref$percentage,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === undefined ? 'default' : _ref$size,
     tooltipDescription = _ref.tooltipDescription,
-    _ref$total = _ref.total,
-    total = _ref$total === void 0 ? defaults.total : _ref$total,
+    total = _ref.total,
     _ref$trending = _ref.trending,
-    trending = _ref$trending === void 0 ? defaults.trending : _ref$trending,
+    trending = _ref$trending === undefined ? false : _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,
+    truncate = _ref$truncate === undefined ? true : _ref$truncate,
+    value = _ref.value,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var BigNumbersClasses = cx(className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--lg"), size === BigNumbersSize.Large), "".concat(blockClass, "--xl"), size === BigNumbersSize.XLarge));
-  var supportedLocale = getSupportedLocale(locale);
-  var truncatedValue = (_formatValue = formatValue(supportedLocale, value, fractionDigits, truncate)) !== null && _formatValue !== void 0 ? _formatValue : Characters.Dash;
-  var truncatedTotal = (_formatValue2 = formatValue(supportedLocale, total, fractionDigits, truncate)) !== null && _formatValue2 !== void 0 ? _formatValue2 : 'Unknown';
-  var shouldDisplayDenominator = !percentage && total > value && truncatedValue !== truncatedTotal || forceShowTotal && total > 0;
+  var bigNumbersClasses = cx(className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--lg"), size === 'lg'), "".concat(blockClass, "--xl"), size === 'xl'));
+  var supportedLocale = getSupportedLocale(locale, DefaultLocale);
+  var truncatedValue = (_formatValue = formatValue(supportedLocale, value, fractionDigits, truncate)) !== null && _formatValue !== undefined ? _formatValue : Characters.Dash;
+  var truncatedTotal = (_formatValue2 = formatValue(supportedLocale, total, fractionDigits, truncate)) !== null && _formatValue2 !== undefined ? _formatValue2 : 'Unknown';
+  var shouldDisplayDenominator = forceShowTotal || !percentage && total && value && total > value && truncatedValue !== truncatedTotal;
   if (loading) {
-    return /*#__PURE__*/React__default.createElement(SkeletonBigNumbers, _extends({}, rest, {
+    return /*#__PURE__*/React__default.createElement(BigNumbersSkeleton, _extends({}, rest, {
       ref: ref,
       className: className,
       size: size
     }, getDevtoolsProps(componentName)));
   }
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, BigNumbersClasses, className),
+    className: cx(blockClass, bigNumbersClasses, className),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__row")
@@ -118,7 +100,9 @@ var BigNumbers = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__percentage-mark")
   }, "%")) : truncatedValue), shouldDisplayDenominator && /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__total")
-  }, /*#__PURE__*/React__default.createElement("span", null, Characters.Slash, truncatedTotal)), iconButton));
+  }, /*#__PURE__*/React__default.createElement("span", null, "".concat(Characters.Slash).concat(truncatedTotal))), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(blockClass, "__icon-button")
+  }, iconButton)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -133,106 +117,67 @@ BigNumbers.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 BigNumbers.propTypes = {
   /**
-   * Optional class name.
-   * @type number
+   * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.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
+   * The default behavior will hide `total` if `undefined` or is the same as `value`.
+   *
+   * Set to `true` to ignore the default behavior and show the `total`.
    */
   forceShowTotal: PropTypes.bool,
   /**
-   * Optional value to control the maximum fraction digits
-   * used when truncating the value and total.
-   * @type number
+   * Specifies the number of fraction digits when truncating `value` and `total`.
    */
   fractionDigits: PropTypes.number,
-  /** Displays an iconButton next to the BigNumbers value
-   * @type node
+  /**
+   * Displays an icon button next to `value`.
    */
   iconButton: PropTypes.node,
   /**
-   * Text label for BigNumbers.
-   * @type string
+   * Text label above the `value`.
    */
   label: PropTypes.string.isRequired,
-  /** Specify if the BigNumbers is in a loading state
-   * @type bool
+  /**
+   * When `true`, will show the loading state.
    */
   loading: PropTypes.bool,
   /**
-   * Locale value to determine approach to formatting numbers.
-   * @type string
+   * Determines how `value` and `total` will be formatted.
    */
   locale: PropTypes.string,
   /**
-   * Format number to percentage when `percentage` prop is true.
-   * @type bool
+   * Appends a percent sign (_%_) after `value` and hides `total`.
    */
   percentage: PropTypes.bool,
-  /** The size of the BigNumbers.
-   * @type string
+  /**
+   *
    */
-  size: PropTypes.oneOf(Object.values(BigNumbersSize)),
-  /** Label applied to a Tooltip - marked with the Information icon.
-   * @type string
+  size: PropTypes.oneOf(['default', 'lg', 'xl']),
+  /**
+   * When applied, an information icon will be rendered next to the
+   * `label` and the description will be applied to its tooltip.
    */
   tooltipDescription: PropTypes.string,
   /**
-   * Total value that the main BigNumbers value is a subset of.
-   * @type number
+   * The number that will appear after the slash (i.e. the "denominator" of a fraction).
+   *
+   * This number will not be rendered if it's the same as `value` or
+   * `percentage` is true. See also the **forceShowTotal** prop.
    */
   total: PropTypes.number,
-  /** Display trending icon.
-   * @type boolean
+  /**
+   * When `true`, will render a "trending up" icon.
    */
   trending: PropTypes.bool,
-  /** Specify whether or not the values should be truncated.
-   * @type boolean
+  /**
+   * Abbreviates the number when `true`. E.g. from _1,000_ to _1K_.
    */
   truncate: PropTypes.bool,
   /**
-   * The main BigNumbers value to display
-   * @type number
+   * The primary value to display (or the "numerator" of a fraction).
    */
   value: PropTypes.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.forwardRef(function (_ref2, ref) {
-  var className = _ref2.className,
-    size = _ref2.size,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  var BigNumbersSkeletonClasses = cx(className, _defineProperty(_defineProperty({}, "".concat(skeletonBlockClass, "--lg"), size === BigNumbersSize.Large), "".concat(skeletonBlockClass, "--xl"), size === BigNumbersSize.XLarge));
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(className, skeletonBlockClass, BigNumbersSkeletonClasses),
-    ref: ref
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(SkeletonText, {
-    className: "".concat(skeletonBlockClass, "__label")
-  }), /*#__PURE__*/React__default.createElement(SkeletonText, {
-    heading: true,
-    className: "".concat(skeletonBlockClass, "__value"),
-    width: "80%"
-  }));
-});
-SkeletonBigNumbers.propTypes = {
-  /**
-   * Optional class name.
-   * @type number
-   */
-  className: PropTypes.string,
-  /** The size of the BigNumbers.
-   * @type string
-   */
-  size: PropTypes.oneOf(Object.values(BigNumbersSize))
-};
-
 export { BigNumbers };

package/es/components/BigNumbers/BigNumbersSkeleton.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { BigNumbersProps } from './BigNumbers';
+/**
+ * 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.
+ */
+type BigNumbersSkeletonProps = Pick<BigNumbersProps, 'className' | 'size'>;
+export declare const BigNumbersSkeleton: React.ForwardRefExoticComponent<BigNumbersSkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/BigNumbers/BigNumbersSkeleton.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import PropTypes from '../../_virtual/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { SkeletonText } from '@carbon/react';
+import { BigNumbersSize } from './constants.js';
+
+var _excluded = ["className", "size"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--big-numbers-skeleton");
+var componentName = 'BigNumbersSkeleton';
+
+/**
+ * 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.
+ */
+
+// Use the same properties and values as parent BigNumbersProps
+
+var BigNumbersSkeleton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var bigNumbersSkeletonClasses = cx(className, blockClass, _defineProperty(_defineProperty({}, "".concat(blockClass, "--lg"), size === BigNumbersSize.Large), "".concat(blockClass, "--xl"), size === BigNumbersSize.XLarge));
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: bigNumbersSkeletonClasses,
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(SkeletonText, {
+    className: "".concat(blockClass, "__label")
+  }), /*#__PURE__*/React__default.createElement(SkeletonText, {
+    heading: true,
+    className: "".concat(blockClass, "__value"),
+    width: "80%"
+  }));
+});
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+BigNumbersSkeleton.displayName = componentName;
+BigNumbersSkeleton.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   *
+   */
+  size: PropTypes.oneOf([BigNumbersSize.Default, BigNumbersSize.Large, BigNumbersSize.XLarge])
+};
+
+export { BigNumbersSkeleton };

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

@@ -1,13 +1,19 @@
-export namespace BigNumbersSize {
-    let Default: string;
-    let Large: string;
-    let XLarge: string;
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 declare enum BigNumbersSize {
+    Default = "default",
+    Large = "lg",
+    XLarge = "xl"
 }
-export namespace Characters {
-    let Dash: string;
-    let Slash: string;
+export type BigNumbersSizeValues = `${BigNumbersSize}`;
+export declare enum Characters {
+    Dash = "\u2013",
+    Slash = "/"
 }
-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;
+export declare const DefaultLocale = "en-US";
+export declare const formatValue: (locale: Intl.LocalesArgument, value: number | null | undefined, fractionDigits: number, truncate: boolean) => string | null | undefined;
+export declare const getIconSize: (size: BigNumbersSizeValues) => number;