@carbon/ibm-products 2.23.0 → 2.25.0

package/lib/components/Card/CardHeader.js

@@ -1,29 +1,32 @@
-"use strict";
+/**
+ * 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.
+ */
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardHeader = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _settings = require("../../settings");
-var _react2 = require("@carbon/react");
-//
-// Copyright IBM Corp. 2020, 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.
-//
+'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../node_modules/classnames/index.js');
+var index$1 = require('../../node_modules/prop-types/index.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 _rect, _path;
 var componentName = 'CardHeader';
 var defaults = {
   hasActions: false,
   titleSize: 'default'
 };
-var CardHeader = exports.CardHeader = function CardHeader(_ref) {
+var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
@@ -46,53 +49,53 @@ var CardHeader = exports.CardHeader = function CardHeader(_ref) {
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
-  var carbonPrefix = (0, _react2.usePrefix)();
-  var blockClass = "".concat(_settings.pkg.prefix, "--card");
+  var carbonPrefix = react.usePrefix();
+  var blockClass = "".concat(settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
-  var headerClasses = (0, _classnames.default)(headerClass, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
+  var headerClasses = index["default"](headerClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
   var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
-  var actionGhostButtonClass = (0, _classnames.default)(actionGhostButton, (0, _defineProperty2.default)({}, "".concat(actionGhostButton, "--only"), noActionIcons));
-  var hollowSlugIcon = /*#__PURE__*/_react.default.createElement("svg", {
+  var actionGhostButtonClass = index["default"](actionGhostButton, _rollupPluginBabelHelpers.defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
+  var hollowSlugIcon = /*#__PURE__*/React__default["default"].createElement("svg", {
     className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon"),
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("rect", {
+  }, _rect || (_rect = /*#__PURE__*/React__default["default"].createElement("rect", {
     x: "0.5",
     y: "0.5",
     width: "23",
     height: "23"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  })), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
     fill: "#161616"
-  }));
+  })));
   var normalizedSlug;
   if (slug) {
-    if (inClickableCard) {
+    if (inClickableCard || typeof slug === 'boolean') {
       normalizedSlug = hollowSlugIcon;
-    } else if (typeof slug !== 'boolean') {
-      normalizedSlug = /*#__PURE__*/_react.default.cloneElement(slug, {
+    } else {
+      normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
     }
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: headerClasses
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(["".concat(headerClass, "-container"), (0, _defineProperty2.default)({}, "".concat(headerClass, "-container--has-slug"), !!slug), (0, _defineProperty2.default)({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), (0, _defineProperty2.default)({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index["default"](["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__title-container")
-  }, label && /*#__PURE__*/_react.default.createElement("p", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "".concat(blockClass, "__label")
-  }, label), title && /*#__PURE__*/_react.default.createElement("h6", {
+  }, label), title && /*#__PURE__*/React__default["default"].createElement("h6", {
     className: "".concat(blockClass, "__title")
-  }, title), description && /*#__PURE__*/_react.default.createElement("p", {
+  }, title), description && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "".concat(blockClass, "__description")
-  }, description)), hasActions && /*#__PURE__*/_react.default.createElement("div", {
+  }, description)), hasActions && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/React__default["default"].createElement(react.Button, {
     kind: "ghost",
     onClick: onSecondaryButtonClick,
     size: "sm",
@@ -100,7 +103,7 @@ var CardHeader = exports.CardHeader = function CardHeader(_ref) {
     href: secondaryButtonHref,
     className: actionGhostButtonClass,
     disabled: secondaryButtonDisabled
-  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/React__default["default"].createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: primaryButtonIcon,
@@ -110,33 +113,35 @@ var CardHeader = exports.CardHeader = function CardHeader(_ref) {
   }, primaryButtonText)), normalizedSlug));
 };
 CardHeader.propTypes = {
-  actions: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.node]),
-  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
-  hasActions: _propTypes.default.bool,
+  actions: index$1["default"].oneOfType([index$1["default"].array, index$1["default"].node]),
+  description: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].object, index$1["default"].node]),
+  hasActions: index$1["default"].bool,
   /**
    * is the host card clickable
    */
-  inClickableCard: _propTypes.default.bool,
-  label: _propTypes.default.string,
-  noActionIcons: _propTypes.default.bool,
-  onPrimaryButtonClick: _propTypes.default.func,
-  onSecondaryButtonClick: _propTypes.default.func,
-  primaryButtonDisabled: _propTypes.default.bool,
-  primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
-  primaryButtonText: _propTypes.default.string,
-  secondaryButtonDisabled: _propTypes.default.bool,
-  secondaryButtonHref: _propTypes.default.string,
-  secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-  secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
-  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
-  secondaryButtonText: _propTypes.default.string,
+  inClickableCard: index$1["default"].bool,
+  label: index$1["default"].string,
+  noActionIcons: index$1["default"].bool,
+  onPrimaryButtonClick: index$1["default"].func,
+  onSecondaryButtonClick: index$1["default"].func,
+  primaryButtonDisabled: index$1["default"].bool,
+  primaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
+  primaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
+  primaryButtonText: index$1["default"].string,
+  secondaryButtonDisabled: index$1["default"].bool,
+  secondaryButtonHref: index$1["default"].string,
+  secondaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
+  secondaryButtonKind: index$1["default"].oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
+  secondaryButtonText: index$1["default"].string,
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
    */
-  slug: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.bool]),
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
-  titleSize: _propTypes.default.oneOf(['default', 'large'])
+  slug: index$1["default"].oneOfType([index$1["default"].node, index$1["default"].bool]),
+  title: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].object, index$1["default"].node]),
+  titleSize: index$1["default"].oneOf(['default', 'large'])
 };
-CardHeader.displayName = componentName;
+CardHeader.displayName = componentName;
+
+exports.CardHeader = CardHeader;

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

@@ -0,0 +1,3 @@
+export { Card } from "./Card";
+export { CardHeader } from "./CardHeader";
+export { CardFooter } from "./CardFooter";

package/lib/components/Carousel/Carousel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The Carousel acts as a scaffold for other Novice to Pro content.
+ *
+ * This component is not intended for general use.
+ *
+ * Expected scrolling behavior.
+ * 1. Scroll the maximum number of visible items at a time.
+ * 2. The left-most item should always be left-aligned in the viewport.
+ *
+ * Exception.
+ * 1. After scrolling to the last (right-most) item,
+ *      if some of its content remains hidden,
+ *      then nudge it to the right until it is right-aligned.
+ * 2. From the right-aligned position, when scrolling left,
+ *      the left-most item should again be left-aligned.
+ */
+export const Carousel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/Carousel/Carousel.js

@@ -1,30 +1,30 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Carousel = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CarouselItem = require("./CarouselItem");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _devtools = require("../../global/js/utils/devtools");
-var _settings = require("../../settings");
-var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 /**
- * Copyright IBM Corp. 2023, 2023
+ * 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.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+
+'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 CarouselItem = require('./CarouselItem.js');
+var index = require('../../node_modules/classnames/index.js');
+var devtools = require('../../global/js/utils/devtools.js');
+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 _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(_settings.pkg.prefix, "--carousel");
+var blockClass = "".concat(settings.pkg.prefix, "--carousel");
 var componentName = 'Carousel';
 
 // Default values for props
@@ -50,7 +50,7 @@ var defaults = {
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$disableArrowScro = _ref.disableArrowScroll,
@@ -60,16 +60,16 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
     onChangeIsScrollable = _ref$onChangeIsScroll === void 0 ? defaults.onChangeIsScrollable : _ref$onChangeIsScroll,
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var carouselRef = (0, _react.useRef)();
-  var scrollRef = (0, _react.useRef)();
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var carouselRef = React.useRef();
+  var scrollRef = React.useRef();
   // Array of refs used to reference this component's children DOM elements
-  var childElementsRef = (0, _react.useRef)(Array(_react.default.Children.count(children)).fill((0, _react.useRef)(null)));
+  var childElementsRef = React.useRef(Array(React__default["default"].Children.count(children)).fill(React.useRef(null)));
   var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
   var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
-  var handleOnScroll = (0, _react.useCallback)(function () {
+  var handleOnScroll = React.useCallback(function () {
     // viewport's width
     var clientWidth = scrollRef.current.clientWidth;
     // scroll position
@@ -93,7 +93,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, [onChangeIsScrollable, onScroll]);
 
   // Check if an individual child element is visible in the container
-  var getElementInView = (0, _react.useCallback)(function (containerRect, elementRect) {
+  var getElementInView = React.useCallback(function (containerRect, elementRect) {
     // Is the element's left greater than or equal to the containers left
     var elementLeftIsRightOfContainerLeft = elementRect.left >= containerRect.left;
     // Is the element's right less than or equal to the containers right
@@ -102,7 +102,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, []);
 
   // Get all elements that are visible in the container.
-  var getElementsInView = (0, _react.useCallback)(function () {
+  var getElementsInView = React.useCallback(function () {
     var containerRect = scrollRef.current.getBoundingClientRect();
     var inViewElements = childElementsRef.current.filter(function (el) {
       return getElementInView(containerRect, el.getBoundingClientRect());
@@ -111,7 +111,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, [getElementInView]);
 
   // Return container's and children's rect data
-  var getContainerAndChildRectData = (0, _react.useCallback)(function () {
+  var getContainerAndChildRectData = React.useCallback(function () {
     // Get the rect of the container
     var containerRect = scrollRef.current.getBoundingClientRect();
     // Get all child elements that are in view of the container, and return their bounding rects.
@@ -130,7 +130,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
       visibleWidth: visibleWidth
     };
   }, [getElementsInView]);
-  var handleScrollNext = (0, _react.useCallback)(function () {
+  var handleScrollNext = React.useCallback(function () {
     var _getContainerAndChild = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild.containerRect,
       visibleWidth = _getContainerAndChild.visibleWidth;
@@ -139,7 +139,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
     // Increment the scrollLeft of the container
     scrollRef.current.scrollLeft += scrollValue;
   }, [getContainerAndChildRectData]);
-  var handleScrollPrev = (0, _react.useCallback)(function () {
+  var handleScrollPrev = React.useCallback(function () {
     var _getContainerAndChild2 = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild2.containerRect,
       elementRectsInView = _getContainerAndChild2.elementRectsInView,
@@ -151,18 +151,18 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
     // Decrement the scrollLeft of the container
     scrollRef.current.scrollLeft -= scrollValue;
   }, [getContainerAndChildRectData]);
-  var handleScrollReset = (0, _react.useCallback)(function () {
+  var handleScrollReset = React.useCallback(function () {
     // This doesn't trigger "scrollend"...
     scrollRef.current.scrollLeft = 0;
     // ...so trigger a callback manually.
     handleOnScroll();
   }, [handleOnScroll]);
-  var handleScrollToView = (0, _react.useCallback)(function (itemNumber) {
+  var handleScrollToView = React.useCallback(function (itemNumber) {
     childElementsRef.current[itemNumber].scrollIntoView();
   }, []);
 
   // Trigger a callback after first render (and applied CSS).
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     // Normally, we can trigger a callback "immediately after first
     // render", because we will be doing more "logical" work (update
     // a state, show / hide a feature, etc.), and the final, applied
@@ -176,7 +176,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, []);
 
   // On window.resize, reset carousel to zero.
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     var handleWindowResize = function handleWindowResize() {
       scrollRef.current.scrollLeft = 0;
       handleOnScroll();
@@ -188,7 +188,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, [handleOnScroll]);
 
   // On scrollRef.scrollend, trigger a callback.
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     var handleScrollend = function handleScrollend() {
       handleOnScroll();
     };
@@ -200,12 +200,14 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, [handleOnScroll]);
 
   // Disable wheel scrolling
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     function handleWheel(event) {
       // update the scroll position
-      event.stopPropagation();
-      event.preventDefault();
-      event.cancelBubble = false;
+      if (event.shiftKey) {
+        event.stopPropagation();
+        event.preventDefault();
+        event.cancelBubble = false;
+      }
     }
     var scrollDiv = scrollRef.current;
     if (scrollDiv) {
@@ -221,7 +223,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, []);
 
   // Enable arrow scrolling from within the carousel
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     function handleKeydown(event) {
       var key = event.key;
       if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
@@ -240,7 +242,7 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
   }, [disableArrowScroll]);
 
   // Enable external function calls
-  (0, _react.useImperativeHandle)(ref, function () {
+  React.useImperativeHandle(ref, function () {
     return {
       scrollNext: function scrollNext() {
         handleScrollNext();
@@ -256,29 +258,29 @@ var Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef(functio
       }
     };
   }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     tabIndex: -1,
-    className: (0, _classnames.default)(blockClass, className),
+    className: index["default"](blockClass, className),
     ref: carouselRef,
     role: "main"
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "__elements-container"))
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index["default"]("".concat(blockClass, "__elements-container"))
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__elements"),
     ref: scrollRef
-  }, _react.default.Children.map(children, function (child, index) {
-    return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, {
+  }, React__default["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/React__default["default"].createElement(CarouselItem.CarouselItem, {
       key: index,
       ref: function ref(element) {
         return childElementsRef.current[index] = element;
       }
     }, child);
-  })), leftFadedEdgeColor && /*#__PURE__*/_react.default.createElement("div", {
+  })), leftFadedEdgeColor && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__elements-container--scrolled"),
     style: {
       background: "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)")
     }
-  }), rightFadedEdgeColor && /*#__PURE__*/_react.default.createElement("div", {
+  }), rightFadedEdgeColor && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__elements-container--scroll-max"),
     style: {
       background: "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)")
@@ -294,16 +296,16 @@ Carousel.propTypes = {
   /**
    * Provide the contents of the Carousel.
    */
-  children: _propTypes.default.node.isRequired,
+  children: index$1["default"].node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: _propTypes.default.string,
+  className: index$1["default"].string,
   /**
    * Disables the ability of the Carousel to scroll
    * use a keyboard's left and right arrow keys.
    */
-  disableArrowScroll: _propTypes.default.bool,
+  disableArrowScroll: index$1["default"].bool,
   /**
    * Enables the edges of the component to have faded styling.
    *
@@ -311,19 +313,21 @@ Carousel.propTypes = {
    *
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
-  fadedEdgeColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
-    left: _propTypes.default.string,
-    right: _propTypes.default.string
+  fadedEdgeColor: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].shape({
+    left: index$1["default"].string,
+    right: index$1["default"].string
   })]),
   /**
    * An optional callback function that returns `true`
    * when the carousel has enough content to be scrollable,
    * and `false` when there is not enough content.
    */
-  onChangeIsScrollable: _propTypes.default.func,
+  onChangeIsScrollable: index$1["default"].func,
   /**
    * An optional callback function that returns the scroll position as
    * a value between 0 and 1.
    */
-  onScroll: _propTypes.default.func
-};
+  onScroll: index$1["default"].func
+};
+
+exports.Carousel = Carousel;

package/lib/components/Carousel/CarouselItem.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TODO: A description of the component.
+ */
+export const CarouselItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/Carousel/CarouselItem.js

@@ -1,40 +1,44 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CarouselItem = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _devtools = require("../../global/js/utils/devtools");
-var _settings = require("../../settings");
-var _excluded = ["children", "className"];
 /**
- * Copyright IBM Corp. 2023, 2023
+ * 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.
  */
-// Other standard imports.
+
+'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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "className"];
+
 // Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */ // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(_settings.pkg.prefix, "--carousel__item");
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--carousel__item");
 var componentName = 'CarouselItem';
 
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = exports.CarouselItem = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var CarouselItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className)
-  }, (0, _devtools.getDevtoolsProps)(componentName), {
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: index["default"](blockClass, className)
+  }, devtools.getDevtoolsProps(componentName), {
     ref: ref
   }), children);
 });
@@ -46,9 +50,11 @@ CarouselItem.propTypes = {
   /**
    * Provide the contents of the CarouselItem.
    */
-  children: _propTypes.default.node.isRequired,
+  children: index$1["default"].node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: _propTypes.default.string
-};
+  className: index$1["default"].string
+};
+
+exports.CarouselItem = CarouselItem;

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

@@ -0,0 +1,2 @@
+export { Carousel } from "./Carousel";
+export { CarouselItem } from "./CarouselItem";

package/lib/components/Cascade/Cascade.d.ts

@@ -0,0 +1,11 @@
+/**
+
+This pattern is intended for use with cards, tiles, or similarly styled
+components. Use this patterns in areas that are the primary focus on the page to
+help the user along their journey or locate the most important information on
+the page. It should not be used on a page if it is the secondary focus of the
+page as that will distract the user.
+
+*/
+export let Cascade: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';