@carbon/ibm-products 2.43.2-canary.32 → 2.43.2-canary.321

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

@@ -1,51 +1,79 @@
-export function CardHeader({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: {
-    actions: any;
-    noActionIcons: any;
-    onPrimaryButtonClick: any;
-    onSecondaryButtonClick: any;
-    primaryButtonIcon: any;
-    primaryButtonPlacement: any;
-    primaryButtonText: any;
-    primaryButtonDisabled: any;
-    description: any;
-    hasActions?: boolean | undefined;
-    inClickableCard: any;
-    label: any;
-    secondaryButtonDisabled: any;
-    secondaryButtonHref: any;
-    secondaryButtonIcon: any;
-    secondaryButtonPlacement: any;
-    secondaryButtonText: any;
-    slug: any;
-    title: any;
-    titleSize?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace CardHeader {
-    export namespace propTypes {
-        let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
-        let description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
-        let hasActions: PropTypes.Requireable<boolean>;
-        let inClickableCard: PropTypes.Requireable<boolean>;
-        let label: PropTypes.Requireable<string>;
-        let noActionIcons: PropTypes.Requireable<boolean>;
-        let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let primaryButtonDisabled: PropTypes.Requireable<boolean>;
-        let primaryButtonIcon: PropTypes.Requireable<object>;
-        let primaryButtonPlacement: PropTypes.Requireable<string>;
-        let primaryButtonText: PropTypes.Requireable<string>;
-        let secondaryButtonDisabled: PropTypes.Requireable<boolean>;
-        let secondaryButtonHref: PropTypes.Requireable<string>;
-        let secondaryButtonIcon: PropTypes.Requireable<object>;
-        let secondaryButtonKind: PropTypes.Requireable<string>;
-        let secondaryButtonPlacement: PropTypes.Requireable<string>;
-        let secondaryButtonText: PropTypes.Requireable<string>;
-        let slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        let title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
-        let titleSize: PropTypes.Requireable<string>;
-    }
-    export { componentName as displayName };
-}
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
-declare const componentName: "CardHeader";
+interface CardHeaderProps {
+    actions?: ReactNode;
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode | boolean;
+    description?: ReactNode;
+    hasActions?: boolean;
+    /**
+     * is the host card clickable
+     */
+    inClickableCard?: boolean;
+    label?: ReactNode;
+    noActionIcons?: boolean;
+    onPrimaryButtonClick?: () => void;
+    onSecondaryButtonClick?: () => void;
+    primaryButtonDisabled?: boolean;
+    primaryButtonIcon?: React.ElementType;
+    primaryButtonPlacement?: 'top' | 'bottom';
+    primaryButtonText?: string;
+    secondaryButtonDisabled?: boolean;
+    secondaryButtonHref?: string;
+    secondaryButtonIcon?: React.ElementType;
+    secondaryButtonKind?: 'secondary' | 'ghost';
+    secondaryButtonPlacement?: 'top' | 'bottom';
+    secondaryButtonText?: 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.
+     * @deprecated please use the `aiLabel` prop
+     */
+    slug?: ReactNode;
+    title?: ReactNode;
+    titleSize?: 'default' | 'large';
+}
+export declare const CardHeader: {
+    ({ actions, aiLabel, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
+    /**@ts-ignore */
+    propTypes: {
+        actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        /**
+         * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+         */
+        aiLabel: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
+        hasActions: PropTypes.Requireable<boolean>;
+        /**
+         * is the host card clickable
+         */
+        inClickableCard: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<string>;
+        noActionIcons: PropTypes.Requireable<boolean>;
+        onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        primaryButtonDisabled: PropTypes.Requireable<boolean>;
+        primaryButtonIcon: PropTypes.Requireable<object>;
+        primaryButtonPlacement: PropTypes.Requireable<string>;
+        primaryButtonText: PropTypes.Requireable<string>;
+        secondaryButtonDisabled: PropTypes.Requireable<boolean>;
+        secondaryButtonHref: PropTypes.Requireable<string>;
+        secondaryButtonIcon: PropTypes.Requireable<object>;
+        secondaryButtonKind: PropTypes.Requireable<string>;
+        secondaryButtonPlacement: PropTypes.Requireable<string>;
+        secondaryButtonText: PropTypes.Requireable<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.
+         * @deprecated please use the `aiLabel` prop
+         */
+        slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
+        titleSize: PropTypes.Requireable<string>;
+    };
+    /**@ts-ignore */
+    displayName: string;
+};
 export {};

package/lib/components/Card/CardHeader.js

@@ -7,20 +7,13 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _rect, _path;
 var componentName = 'CardHeader';
 var defaults = {
@@ -29,6 +22,7 @@ var defaults = {
 };
 var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     onSecondaryButtonClick = _ref.onSecondaryButtonClick,
@@ -49,54 +43,56 @@ var CardHeader = function CardHeader(_ref) {
     slug = _ref.slug,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
-    titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
+    titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize;
   var carbonPrefix = react.usePrefix();
   var blockClass = "".concat(settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
-  var headerClasses = cx__default["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 headerClasses = cx(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 = cx__default["default"](actionGhostButton, _rollupPluginBabelHelpers.defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
-  var hollowSlugIcon = /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon"),
+  var actionGhostButtonClass = cx(actionGhostButton, _rollupPluginBabelHelpers.defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
+  var hollowAiIcon = /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon") // NOTE: We cannot change this to ai-label until carbon changes their classnames on their end
+    ,
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, _rect || (_rect = /*#__PURE__*/React__default["default"].createElement("rect", {
+  }, _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
     x: "0.5",
     y: "0.5",
     width: "23",
     height: "23"
-  })), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+  })), _path || (_path = /*#__PURE__*/React.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 || typeof slug === 'boolean') {
-      normalizedSlug = hollowSlugIcon;
+  var normalizedAiLabel = null;
+  if (aiLabel || slug) {
+    if (inClickableCard || typeof aiLabel === 'boolean' || typeof slug === 'boolean') {
+      normalizedAiLabel = hollowAiIcon;
     } else {
-      normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      var element = aiLabel || slug;
+      normalizedAiLabel = /*#__PURE__*/React.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
     }
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: headerClasses
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["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", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-ai-label"), !!aiLabel), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__title-container")
-  }, label && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, label && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__label")
-  }, label), title && /*#__PURE__*/React__default["default"].createElement("h6", {
+  }, label), title && /*#__PURE__*/React.createElement("h6", {
     className: "".concat(blockClass, "__title")
-  }, title), description && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, title), description && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__description")
-  }, description)), hasActions && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, description)), hasActions && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     onClick: onSecondaryButtonClick,
     size: "sm",
@@ -104,45 +100,52 @@ var CardHeader = function CardHeader(_ref) {
     href: secondaryButtonHref,
     className: actionGhostButtonClass,
     disabled: secondaryButtonDisabled
-  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: primaryButtonIcon,
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)), normalizedSlug));
+  }, primaryButtonText)), normalizedAiLabel));
 };
+/**@ts-ignore */
 CardHeader.propTypes = {
-  actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
-  description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
-  hasActions: index["default"].bool,
+  actions: index.default.oneOfType([index.default.array, index.default.node]),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
+  description: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
+  hasActions: index.default.bool,
   /**
    * is the host card clickable
    */
-  inClickableCard: index["default"].bool,
-  label: index["default"].string,
-  noActionIcons: index["default"].bool,
-  onPrimaryButtonClick: index["default"].func,
-  onSecondaryButtonClick: index["default"].func,
-  primaryButtonDisabled: index["default"].bool,
-  primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-  primaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
-  primaryButtonText: index["default"].string,
-  secondaryButtonDisabled: index["default"].bool,
-  secondaryButtonHref: index["default"].string,
-  secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-  secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
-  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
-  secondaryButtonText: index["default"].string,
+  inClickableCard: index.default.bool,
+  label: index.default.string,
+  noActionIcons: index.default.bool,
+  onPrimaryButtonClick: index.default.func,
+  onSecondaryButtonClick: index.default.func,
+  primaryButtonDisabled: index.default.bool,
+  primaryButtonIcon: index.default.oneOfType([index.default.func, index.default.object]),
+  primaryButtonPlacement: index.default.oneOf(['top', 'bottom']),
+  primaryButtonText: index.default.string,
+  secondaryButtonDisabled: index.default.bool,
+  secondaryButtonHref: index.default.string,
+  secondaryButtonIcon: index.default.oneOfType([index.default.func, index.default.object]),
+  secondaryButtonKind: index.default.oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: index.default.oneOf(['top', 'bottom']),
+  secondaryButtonText: index.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.
+   * @deprecated please use the `aiLabel` prop
    */
-  slug: index["default"].oneOfType([index["default"].node, index["default"].bool]),
-  title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
-  titleSize: index["default"].oneOf(['default', 'large'])
+  slug: index.default.oneOfType([index.default.node, index.default.bool]),
+  title: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
+  titleSize: index.default.oneOf(['default', 'large'])
 };
+/**@ts-ignore */
 CardHeader.displayName = componentName;
 
 exports.CardHeader = CardHeader;

package/lib/components/Carousel/Carousel.js

@@ -7,20 +7,14 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var CarouselItem = require('./CarouselItem.js');
 var cx = require('classnames');
 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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -50,7 +44,7 @@ var defaults = {
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$disableArrowScro = _ref.disableArrowScroll,
@@ -63,10 +57,12 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carouselRef = React.useRef(null);
   var scrollRef = React.useRef(null);
+  var leftFadedEdgeRef = React.useRef(null);
+  var rightFadedEdgeRef = React.useRef(null);
   // Array of refs used to reference this component's children DOM elements
-  var childElementsRef = React.useRef(Array(React__default["default"].Children.count(children)).fill(React.useRef(null)));
-  var leftFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
-  var rightFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
+  var childElementsRef = React.useRef(Array(React.Children.count(children)).fill(React.useRef(null)));
+  var leftFadedEdgeColor = _rollupPluginBabelHelpers.typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
+  var rightFadedEdgeColor = _rollupPluginBabelHelpers.typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
   var handleOnScroll = React.useCallback(function () {
@@ -273,33 +269,38 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       }
     };
   }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (leftFadedEdgeRef !== null && leftFadedEdgeRef !== void 0 && leftFadedEdgeRef.current && leftFadedEdgeRef.current.style) {
+      leftFadedEdgeRef.current.style.background = "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)");
+    }
+  }, [leftFadedEdgeRef, leftFadedEdgeColor]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (rightFadedEdgeRef !== null && rightFadedEdgeRef !== void 0 && rightFadedEdgeRef.current && rightFadedEdgeRef.current.style) {
+      rightFadedEdgeRef.current.style.background = "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)");
+    }
+  }, [rightFadedEdgeRef, rightFadedEdgeColor]);
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     tabIndex: -1,
-    className: cx__default["default"](blockClass, className),
-    ref: carouselRef,
-    role: "main"
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(blockClass, "__elements-container"))
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cx(blockClass, className),
+    ref: carouselRef
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__elements-container"))
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__elements"),
     ref: scrollRef
-  }, React__default["default"].Children.map(children, function (child, index) {
-    return /*#__PURE__*/React__default["default"].createElement(CarouselItem.CarouselItem, {
+  }, React.Children.map(children, function (child, index) {
+    return /*#__PURE__*/React.createElement(CarouselItem.CarouselItem, {
       key: index,
       ref: function ref(element) {
         return childElementsRef.current[index] = element;
       }
     }, child);
-  })), 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["default"].createElement("div", {
-    className: "".concat(blockClass, "__elements-container--scroll-max"),
-    style: {
-      background: "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)")
-    }
+  })), leftFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
+    ref: leftFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scrolled")
+  }), rightFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
+    ref: rightFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scroll-max")
   })));
 });
 Carousel.displayName = componentName;
@@ -311,16 +312,16 @@ Carousel.propTypes = {
   /**
    * Provide the contents of the Carousel.
    */
-  children: index["default"].node.isRequired,
+  children: index.default.node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Disables the ability of the Carousel to scroll
    * use a keyboard's left and right arrow keys.
    */
-  disableArrowScroll: index["default"].bool,
+  disableArrowScroll: index.default.bool,
   /**
    * Enables the edges of the component to have faded styling.
    *
@@ -329,21 +330,21 @@ Carousel.propTypes = {
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
   /**@ts-ignore*/
-  fadedEdgeColor: index["default"].oneOfType([index["default"].string, index["default"].shape({
-    left: index["default"].string,
-    right: index["default"].string
+  fadedEdgeColor: index.default.oneOfType([index.default.string, index.default.shape({
+    left: index.default.string,
+    right: index.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: index["default"].func,
+  onChangeIsScrollable: index.default.func,
   /**
    * An optional callback function that returns the scroll position as
    * a value between 0 and 1.
    */
-  onScroll: index["default"].func
+  onScroll: index.default.func
 };
 
 exports.Carousel = Carousel;

package/lib/components/Carousel/CarouselItem.js

@@ -7,20 +7,13 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["children", "className"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -32,12 +25,12 @@ var componentName = 'CarouselItem';
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+var CarouselItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, className)
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, className)
   }, devtools.getDevtoolsProps(componentName), {
     ref: ref
   }), children);
@@ -50,11 +43,11 @@ CarouselItem.propTypes = {
   /**
    * Provide the contents of the CarouselItem.
    */
-  children: index["default"].node.isRequired,
+  children: index.default.node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string
+  className: index.default.string
 };
 
 exports.CarouselItem = CarouselItem;

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

@@ -1,2 +1,9 @@
-export { Carousel } from "./Carousel";
-export { CarouselItem } from "./CarouselItem";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 { Carousel } from './Carousel';
+export { CarouselItem } from './CarouselItem';
+export type { CarouselProps } from './Carousel';

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-interface CascadeProps {
+export interface CascadeProps {
     children: ReactNode;
     /**
      * Specify an optional className to be applied to
@@ -25,4 +25,3 @@ page as that will distract the user.
 export declare let Cascade: React.ForwardRefExoticComponent<CascadeProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/Cascade/Cascade.js

@@ -7,20 +7,13 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
-var settings = require('../../settings.js');
 var devtools = require('../../global/js/utils/devtools.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 settings = require('../../settings.js');
 
 var _excluded = ["children", "className", "grid"];
 var blockClass = "".concat(settings.pkg.prefix, "--cascade");
@@ -45,40 +38,40 @@ exports.Cascade = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     grid = _ref$grid === void 0 ? defaults.grid : _ref$grid,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-    className: cx__default["default"](blockClass, className),
+    className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName));
   var modifyChildren = function modifyChildren(child) {
-    var className = cx__default["default"](child.props.className, "".concat(blockClass, "__element"));
-    return /*#__PURE__*/React__default["default"].cloneElement(child, {
+    var className = cx(child.props.className, "".concat(blockClass, "__element"));
+    return /*#__PURE__*/React.cloneElement(child, {
       className: className
     });
   };
   var getModifiedChildren = function getModifiedChildren() {
-    return React__default["default"].Children.map(children, function (child) {
+    return React.Children.map(children, function (child) {
       return modifyChildren(child);
     });
   };
   if (grid) {
     var colIdx = 0;
-    var gridElm = React__default["default"].Children.map(children, function (row) {
-      if ( /*#__PURE__*/React__default["default"].isValidElement(row)) {
-        var cols = React__default["default"].Children.map(row === null || row === void 0 ? void 0 : row.props.children, function (col) {
+    var gridElm = React.Children.map(children, function (row) {
+      if ( /*#__PURE__*/React.isValidElement(row)) {
+        var cols = React.Children.map(row === null || row === void 0 ? void 0 : row.props.children, function (col) {
           colIdx = colIdx + 1;
-          var colClassnames = cx__default["default"](col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
-          return /*#__PURE__*/React__default["default"].cloneElement(col, {
+          var colClassnames = cx(col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
+          return /*#__PURE__*/React.cloneElement(col, {
             className: colClassnames
           });
         });
-        return /*#__PURE__*/React__default["default"].cloneElement(row, {
+        return /*#__PURE__*/React.cloneElement(row, {
           children: cols
         });
       }
       return children;
     });
-    return /*#__PURE__*/React__default["default"].createElement("div", props, /*#__PURE__*/React__default["default"].createElement(react.Grid, null, gridElm));
+    return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(react.Grid, null, gridElm));
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", props, getModifiedChildren());
+  return /*#__PURE__*/React.createElement("div", props, getModifiedChildren());
 });
 exports.Cascade = settings.pkg.checkComponentEnabled(exports.Cascade, componentName);
 exports.Cascade.displayName = componentName;
@@ -86,15 +79,15 @@ exports.Cascade.propTypes = {
   /**
    * Main content that is shown.
    */
-  children: index["default"].node,
+  children: index.default.node,
   /**
    * Optional class name.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Specifies whether or not to wrap the child content in a `<Grid />`.
    * If this is set to true it's important that the children are being wrapped in rows in columns.
    * Check the documentation for additional clarification.
    */
-  grid: index["default"].bool
+  grid: index.default.bool
 };