@carbon/ibm-products 2.26.0 → 2.27.0

package/lib/components/StringFormatter/StringFormatter.js

@@ -0,0 +1,85 @@
+/**
+ * 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$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/classnames/index.js');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
+var enums = require('./utils/enums.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "lines", "tooltipDirection", "truncate", "width", "value"];
+var blockClass = "".concat(settings.pkg.prefix, "--string-formatter");
+var componentName = 'StringFormatter';
+var defaults = {
+  lines: 1,
+  tooltipDirection: enums.StringFormatterAlignment.BOTTOM_LEFT,
+  truncate: false,
+  width: null
+};
+
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+exports.StringFormatter = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$lines = _ref.lines,
+    lines = _ref$lines === void 0 ? defaults.lines : _ref$lines,
+    _ref$tooltipDirection = _ref.tooltipDirection,
+    tooltipDirection = _ref$tooltipDirection === void 0 ? defaults.tooltipDirection : _ref$tooltipDirection,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? defaults.width : _ref$width,
+    value = _ref.value,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var stringFormatterContent = /*#__PURE__*/React__default["default"].createElement("span", {
+    className: index["default"]("".concat(blockClass, "--content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--truncate"), truncate)),
+    style: {
+      maxWidth: width,
+      WebkitLineClamp: lines
+    }
+  }, value);
+  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: index["default"](blockClass, className),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), truncate ? /*#__PURE__*/React__default["default"].createElement(react.DefinitionTooltip, {
+    className: "".concat(blockClass, "__tooltip"),
+    align: tooltipDirection,
+    definition: value,
+    openOnHover: true
+  }, stringFormatterContent) : stringFormatterContent);
+});
+exports.StringFormatter = settings.pkg.checkComponentEnabled(exports.StringFormatter, componentName);
+exports.StringFormatter.displayName = componentName;
+exports.StringFormatter.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index$1["default"].string,
+  /** Number of lines to clamp value. */
+  lines: index$1["default"].number,
+  /** Specify the direction of the tooltip. Can be either top or bottom. */
+  tooltipDirection: index$1["default"].oneOf(Object.values(enums.StringFormatterAlignment)),
+  /** Whether or not the value should be truncated. */
+  truncate: index$1["default"].bool,
+  /** Value to format. */
+  value: index$1["default"].string.isRequired,
+  /** Maximum width of value which should include */
+  width: index$1["default"].string
+};

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

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

package/lib/components/StringFormatter/utils/enums.d.ts

@@ -0,0 +1,14 @@
+export namespace StringFormatterAlignment {
+    let TOP: string;
+    let TOP_LEFT: string;
+    let TOP_RIGHT: string;
+    let BOTTOM: string;
+    let BOTTOM_LEFT: string;
+    let BOTTOM_RIGHT: string;
+    let LEFT: string;
+    let LEFT_BOTTOM: string;
+    let LEFT_TOP: string;
+    let RIGHT: string;
+    let RIGHT_BOTTOM: string;
+    let RIGHT_TOP: string;
+}

package/lib/components/StringFormatter/utils/enums.js

@@ -0,0 +1,27 @@
+/**
+ * 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 StringFormatterAlignment = {
+  TOP: 'top',
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM: 'bottom',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  LEFT: 'left',
+  LEFT_BOTTOM: 'left-bottom',
+  LEFT_TOP: 'left-top',
+  RIGHT: 'right',
+  RIGHT_BOTTOM: 'right-bottom',
+  RIGHT_TOP: 'right-top'
+};
+
+exports.StringFormatterAlignment = StringFormatterAlignment;

package/lib/components/Tearsheet/TearsheetShell.js

@@ -27,7 +27,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -79,9 +79,10 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     navigation = _ref.navigation,
     onClose = _ref.onClose,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     size = _ref.size,
-    portalTargetIn = _ref.portalTarget,
+    slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -198,9 +199,10 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
-      className: index["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: index["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide)),
+      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      slug: slug,
       style: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
       containerClassName: index["default"]("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
@@ -402,6 +404,10 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
   size: index$1["default"].oneOf(['narrow', 'wide']).isRequired,
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: index$1["default"].node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/UserAvatar/UserAvatar.js

@@ -15,16 +15,15 @@ var index = require('../../node_modules/prop-types/index.js');
 var index$1 = require('../../node_modules/classnames/index.js');
 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 icons = require('@carbon/react/icons');
 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 _excluded = ["backgroundColor", "className", "renderIcon", "tooltipText", "tooltipAlignment"];
-var _User, _User2, _Group;
+var _excluded = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -53,54 +52,60 @@ var componentName = 'UserAvatar';
  */
 
 var defaults = {
-  renderIcon: function renderIcon() {
-    return _User || (_User = /*#__PURE__*/React__default["default"].createElement(icons.User, {
-      size: 32
-    }));
-  },
-  tooltipAlignment: 'bottom',
-  tooltipText: 'Thomas J. Watson'
+  size: 'md',
+  tooltipAlignment: 'bottom'
 };
 exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _SetItem;
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
-    _ref$renderIcon = _ref.renderIcon,
-    renderIcon = _ref$renderIcon === void 0 ? defaults.renderIcon : _ref$renderIcon,
-    _ref$tooltipText = _ref.tooltipText,
-    tooltipText = _ref$tooltipText === void 0 ? defaults.tooltipText : _ref$tooltipText,
+    name = _ref.name,
+    RenderIcon = _ref.renderIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
     tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
-  var icons$1 = {
-    user: {
-      md: _User2 || (_User2 = /*#__PURE__*/React__default["default"].createElement(icons.User, {
-        size: 32
-      }))
-    },
-    group: {
-      md: _Group || (_Group = /*#__PURE__*/React__default["default"].createElement(icons.Group, {
-        size: 32
-      }))
+  var iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32
+  };
+  var formatInitials = function formatInitials() {
+    var _ref2;
+    var parts = name.split(' ');
+    var firstChar = parts[0].charAt(0).toUpperCase();
+    var 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];
+    if (lastChar) {
+      initials.push(lastChar);
+    }
+    return (_ref2 = '').concat.apply(_ref2, initials);
   };
-  var getItem = function getItem(renderIcon) {
-    if (renderIcon === icons.User) {
-      return icons$1.user['md'];
-    } else if (renderIcon === icons.Group) {
-      return icons$1.group['md'];
-    } else {
-      return renderIcon;
+  var getItem = function getItem() {
+    var iconProps = {
+      size: iconSize[size]
+    };
+    if (RenderIcon) {
+      return /*#__PURE__*/React__default["default"].createElement(RenderIcon, iconProps);
+    }
+    if (name) {
+      return formatInitials();
     }
+    return /*#__PURE__*/React__default["default"].createElement(icons.User, iconProps);
   };
-  var SetItem = getItem(renderIcon);
-  var renderUserAvatar = function renderUserAvatar() {
+  var Avatar = function Avatar() {
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
       className: index$1["default"](blockClass,
       // Apply the block class to the main HTML element
       className, // Apply any supplied class names to the main HTML element.
-      "".concat(blockClass, "--").concat(backgroundColor),
+      "".concat(blockClass, "--").concat(backgroundColor), "".concat(blockClass, "--").concat(size),
       // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
       {
         // switched classes dependant on props or state
@@ -108,13 +113,16 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
       }),
       ref: ref,
       role: "img"
-    }, devtools.getDevtoolsProps(componentName)), _SetItem || (_SetItem = /*#__PURE__*/React__default["default"].createElement(SetItem, null)));
+    }, devtools.getDevtoolsProps(componentName)), getItem());
   };
-  return SetItem && (tooltipText ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
-    align: tooltipAlignment,
-    label: tooltipText,
-    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
-  }, /*#__PURE__*/React__default["default"].createElement(TooltipTrigger.TooltipTrigger, null, renderUserAvatar())) : renderUserAvatar());
+  if (tooltipText) {
+    return /*#__PURE__*/React__default["default"].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)));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Avatar, null);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -136,10 +144,18 @@ exports.UserAvatar.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].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: index["default"].string,
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
-  renderIcon: index["default"].func,
+  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   * Set the size of the avatar circle
+   */
+  size: index["default"].oneOf(['xl', 'lg', 'md', 'sm']),
   /**
    * Specify how the trigger should align with the tooltip
    */

package/lib/components/index.d.ts

@@ -34,6 +34,7 @@ export { CoachmarkOverlayElement } from "./CoachmarkOverlayElement";
 export { CoachmarkOverlayElements } from "./CoachmarkOverlayElements";
 export { CoachmarkStack } from "./CoachmarkStack";
 export { NonLinearReading } from "./NonLinearReading";
+export { BigNumbers } from "./BigNumbers";
 export { TruncatedList } from "./TruncatedList";
 export { InterstitialScreen } from "./InterstitialScreen";
 export { InterstitialScreenView } from "./InterstitialScreenView";
@@ -41,6 +42,7 @@ export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
 export { DelimitedList } from "./DelimitedList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";
+export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";

package/lib/global/js/hooks/index.d.ts

@@ -10,4 +10,5 @@ export { useValidCreateStepCount } from "./useValidCreateStepCount";
 export { useControllableState } from "./useControllableState";
 export { usePrefix } from "./usePrefix";
 export { useFocus } from "./useFocus";
+export { useIsomorphicEffect } from "./useIsomorphicEffect";
 export { useNearestScroll, useWindowScroll } from "./useWindowScroll";

package/lib/global/js/hooks/useIsomorphicEffect.d.ts

@@ -0,0 +1,2 @@
+export const useIsomorphicEffect: typeof useEffect;
+import { useEffect } from 'react';

package/lib/global/js/hooks/useIsomorphicEffect.js

@@ -0,0 +1,18 @@
+/**
+ * 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 React = require('react');
+
+// Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
+// useLayoutEffect on the client, useEffect on the server
+var useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+exports.useIsomorphicEffect = useIsomorphicEffect;

package/lib/global/js/package-settings.d.ts

@@ -75,9 +75,11 @@ declare namespace defaults {
         let EditTearsheetNarrow: boolean;
         let EditFullPage: boolean;
         let EditUpdateCards: boolean;
+        let BigNumbers: boolean;
         let TruncatedList: boolean;
         let DelimitedList: boolean;
         let FullPageError: boolean;
+        let StringFormatter: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;

package/lib/global/js/package-settings.js

@@ -78,9 +78,11 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
+    BigNumbers: false,
     TruncatedList: false,
     DelimitedList: false,
     FullPageError: false,
+    StringFormatter: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

package/lib/index.js

@@ -103,6 +103,7 @@ var InlineTip = require('./components/InlineTip/InlineTip.js');
 var InlineTipButton = require('./components/InlineTip/InlineTipButton.js');
 var InlineTipLink = require('./components/InlineTip/InlineTipLink.js');
 var NonLinearReading = require('./components/NonLinearReading/NonLinearReading.js');
+var BigNumbers = require('./components/BigNumbers/BigNumbers.js');
 var TruncatedList = require('./components/TruncatedList/TruncatedList.js');
 var InterstitialScreen = require('./components/InterstitialScreen/InterstitialScreen.js');
 var InterstitialScreenView = require('./components/InterstitialScreenView/InterstitialScreenView.js');
@@ -110,6 +111,7 @@ var InterstitialScreenViewModule = require('./components/InterstitialScreenViewM
 var DelimitedList = require('./components/DelimitedList/DelimitedList.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
+var StringFormatter = require('./components/StringFormatter/StringFormatter.js');
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 
 
@@ -422,6 +424,10 @@ Object.defineProperty(exports, 'NonLinearReading', {
 	enumerable: true,
 	get: function () { return NonLinearReading.NonLinearReading; }
 });
+Object.defineProperty(exports, 'BigNumbers', {
+	enumerable: true,
+	get: function () { return BigNumbers.BigNumbers; }
+});
 Object.defineProperty(exports, 'TruncatedList', {
 	enumerable: true,
 	get: function () { return TruncatedList.TruncatedList; }
@@ -450,6 +456,10 @@ Object.defineProperty(exports, 'SearchBar', {
 	enumerable: true,
 	get: function () { return SearchBar.SearchBar; }
 });
+Object.defineProperty(exports, 'StringFormatter', {
+	enumerable: true,
+	get: function () { return StringFormatter.StringFormatter; }
+});
 Object.defineProperty(exports, 'UserAvatar', {
 	enumerable: true,
 	get: function () { return UserAvatar.UserAvatar; }

package/lib/settings.d.ts

@@ -61,9 +61,11 @@ export const pkg: {
         EditTearsheetNarrow: boolean;
         EditFullPage: boolean;
         EditUpdateCards: boolean;
+        BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;
         FullPageError: boolean;
+        StringFormatter: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.26.0",
+  "version": "2.27.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -75,7 +75,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.1.3",
+    "jest-config-ibm-cloud-cognitive": "^1.1.4",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -84,12 +84,12 @@
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.70.0",
-    "typescript-config-carbon": "^0.2.0",
+    "typescript-config-carbon": "^0.2.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.25.0",
+    "@carbon/ibm-products-styles": "^2.26.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
@@ -106,11 +106,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.49.0",
-    "@carbon/themes": "^11.30.0",
+    "@carbon/react": "^1.50.0",
+    "@carbon/themes": "^11.31.0",
     "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "ee89db345a5a5004e6d18e0a36df85ea8e7c9f8f"
+  "gitHead": "c42c0c622d6ad2a1dfc2e2122d0dd53337780243"
 }

package/scss/components/BigNumbers/_big-numbers.scss

@@ -0,0 +1,151 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/mixins';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+// BigNumbers uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by BigNumbers
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--big-numbers;
+$skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
+
+.#{$block-class}__label {
+  @include type-style('label-01');
+
+  display: block;
+  margin: 0;
+  color: $text-secondary;
+}
+
+.#{$block-class}__value {
+  @include type-style('heading-04');
+
+  margin-bottom: 0;
+}
+
+.#{$block-class}__total {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}__total,
+.#{$block-class}__percentage-mark {
+  margin-top: auto;
+  margin-bottom: $spacing-02;
+}
+
+.#{$block-class}__info {
+  vertical-align: top;
+}
+
+.#{$block-class}__trend {
+  margin-top: $spacing-03;
+  vertical-align: top;
+}
+
+.#{$block-class}__row {
+  display: flex;
+}
+
+.#{$block-class}__info {
+  padding-left: $spacing-03;
+}
+
+.#{$block-class}__percentage {
+  @include type-style('heading-04');
+}
+
+.#{$block-class}__percentage-mark {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}--lg .#{$block-class}__value,
+.#{$block-class}--lg .#{$block-class}__percentage {
+  @include type-style('heading-06');
+}
+
+.#{$block-class}--lg .#{$block-class}__total,
+.#{$block-class}--lg .#{$block-class}__percentage-mark {
+  @include type-style('heading-03');
+}
+
+.#{$block-class}--xl .#{$block-class}__label {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}--xl .#{$block-class}__value,
+.#{$block-class}--xl .#{$block-class}__percentage {
+  @include type-style('heading-07');
+}
+
+.#{$block-class}--xl .#{$block-class}__total,
+.#{$block-class}--xl .#{$block-class}__percentage-mark {
+  @include type-style('heading-04');
+}
+
+.#{$block-class}--xl .#{$block-class}__trend {
+  margin-top: $spacing-04;
+}
+
+.#{$skeleton-block-class} {
+  width: 4rem;
+}
+
+.#{$skeleton-block-class}__label {
+  height: $spacing-04;
+  margin-top: 0;
+  margin-bottom: $spacing-03;
+}
+
+.#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-08 !important;
+  margin: 0;
+}
+
+.#{$skeleton-block-class}--lg {
+  width: 5rem;
+}
+
+.#{$skeleton-block-class}--xl {
+  width: 6rem;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+  .#{$skeleton-block-class}__label {
+  height: $spacing-04;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+  .#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-09 !important;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+  .#{$skeleton-block-class}__label {
+  height: $spacing-04;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+  .#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-10 !important;
+}
+
+.#{$block-class} .#{$block-class}__tooltip-trigger:focus {
+  outline: 1px solid $focus;
+}