@carbon/ibm-products 2.33.0 → 2.34.0

package/lib/components/StatusIcon/StatusIcon.js

@@ -35,298 +35,300 @@ _Status icons_ are an important method of communicating severity level
 information to users. The shapes and colors, communicate severity that enable
 users to quickly assess and identify status and respond accordingly.
  */
-exports.StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+
+exports.StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _icons$kind;
-  var kind = _ref.kind,
-    theme = _ref.theme,
-    size = _ref.size,
-    className = _ref.className,
-    iconDescription = _ref.iconDescription,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var kind = _ref2.kind,
+    theme = _ref2.theme,
+    size = _ref2.size,
+    className = _ref2.className,
+    iconDescription = _ref2.iconDescription,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  var forwardedRef = ref;
   var icons$1 = {
     fatal: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     critical: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     'major-warning': {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     'minor-warning': {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     undefined: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     unknown: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     normal: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     info: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     'in-progress': {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     running: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     pending: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     }

package/lib/components/TruncatedList/TruncatedList.js

@@ -97,9 +97,11 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
       var items = listRef.current.childNodes;
       var _listHeight = 0;
       for (var index = 0; index < numItemsToShow; index++) {
-        var _window;
-        var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
-        _listHeight += parseInt(height);
+        if (items[index]) {
+          var _window;
+          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
+          _listHeight += parseInt(height);
+        }
       }
       setListHeight(_listHeight);
     }

package/lib/components/UserAvatar/UserAvatar.js

@@ -123,7 +123,8 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
       ref: ref,
-      role: "img"
+      role: "img",
+      "aria-hidden": "true"
     }, devtools.getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {
@@ -150,7 +151,7 @@ exports.UserAvatar.propTypes = {
   /**
    * Provide the background color need to be set for UserAvatar.
    */
-  backgroundColor: index["default"].oneOf(['light-cyan', 'dark-cyan']),
+  backgroundColor: index["default"].oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
   /**
    * Provide an optional class to be applied to the containing node.
    */

package/lib/components/index.d.ts

@@ -49,6 +49,7 @@ export { SearchBar } from "./SearchBar";
 export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
+export { ScrollGradient } from "./ScrollGradient";
 export { StatusIndicator } from "./StatusIndicator";
 export { ActionBar } from "./ActionBar";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
@@ -64,4 +65,4 @@ export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
-export { FilterPanel, FilterPanelCheckbox, FilterPanelLabel } from "./FilterPanel";
+export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel } from "./FilterPanel";

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

@@ -80,12 +80,17 @@ declare namespace defaults {
         let TruncatedList: boolean;
         let DelimitedList: boolean;
         let FullPageError: boolean;
+        let ScrollGradient: boolean;
         let StringFormatter: boolean;
         let StatusIndicator: boolean;
         let StatusIndicatorStep: boolean;
         let ActionBar: boolean;
         let FilterPanel: boolean;
+        let FilterPanelAccordion: boolean;
+        let FilterPanelAccordionItem: boolean;
         let FilterPanelCheckbox: boolean;
+        let FilterPanelCheckboxWithOverflow: boolean;
+        let FilterPanelGroup: boolean;
         let FilterPanelLabel: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;

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

@@ -83,12 +83,17 @@ var defaults = {
     TruncatedList: false,
     DelimitedList: false,
     FullPageError: false,
+    ScrollGradient: false,
     StringFormatter: false,
     StatusIndicator: false,
     StatusIndicatorStep: false,
     ActionBar: false,
     FilterPanel: false,
+    FilterPanelAccordion: false,
+    FilterPanelAccordionItem: false,
     FilterPanelCheckbox: false,
+    FilterPanelCheckboxWithOverflow: false,
+    FilterPanelGroup: false,
     FilterPanelLabel: false,
     /* new component flags here - comment used by generate CLI */
 

package/lib/index.js

@@ -122,10 +122,15 @@ var SearchBar = require('./components/SearchBar/SearchBar.js');
 var Nav = require('./components/Nav/Nav.js');
 var StringFormatter = require('./components/StringFormatter/StringFormatter.js');
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
+var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
 var ActionBar = require('./components/ActionBar/ActionBar.js');
 var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
+var FilterPanelAccordion = require('./components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js');
+var FilterPanelAccordionItem = require('./components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js');
 var FilterPanelCheckbox = require('./components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js');
+var FilterPanelCheckboxWithOverflow = require('./components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js');
+var FilterPanelGroup = require('./components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js');
 var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
 
 
@@ -514,6 +519,10 @@ Object.defineProperty(exports, 'UserAvatar', {
 	enumerable: true,
 	get: function () { return UserAvatar.UserAvatar; }
 });
+Object.defineProperty(exports, 'ScrollGradient', {
+	enumerable: true,
+	get: function () { return ScrollGradient.ScrollGradient; }
+});
 Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
@@ -526,10 +535,26 @@ Object.defineProperty(exports, 'FilterPanel', {
 	enumerable: true,
 	get: function () { return FilterPanel.FilterPanel; }
 });
+Object.defineProperty(exports, 'FilterPanelAccordion', {
+	enumerable: true,
+	get: function () { return FilterPanelAccordion.FilterPanelAccordion; }
+});
+Object.defineProperty(exports, 'FilterPanelAccordionItem', {
+	enumerable: true,
+	get: function () { return FilterPanelAccordionItem.FilterPanelAccordionItem; }
+});
 Object.defineProperty(exports, 'FilterPanelCheckbox', {
 	enumerable: true,
 	get: function () { return FilterPanelCheckbox.FilterPanelCheckbox; }
 });
+Object.defineProperty(exports, 'FilterPanelCheckboxWithOverflow', {
+	enumerable: true,
+	get: function () { return FilterPanelCheckboxWithOverflow.FilterPanelCheckboxWithOverflow; }
+});
+Object.defineProperty(exports, 'FilterPanelGroup', {
+	enumerable: true,
+	get: function () { return FilterPanelGroup.FilterPanelGroup; }
+});
 Object.defineProperty(exports, 'FilterPanelLabel', {
 	enumerable: true,
 	get: function () { return FilterPanelLabel.FilterPanelLabel; }

package/lib/settings.d.ts

@@ -66,12 +66,17 @@ export const pkg: {
         TruncatedList: boolean;
         DelimitedList: boolean;
         FullPageError: boolean;
+        ScrollGradient: boolean;
         StringFormatter: boolean;
         StatusIndicator: boolean;
         StatusIndicatorStep: boolean;
         ActionBar: boolean;
         FilterPanel: boolean;
+        FilterPanelAccordion: boolean;
+        FilterPanelAccordionItem: boolean;
         FilterPanelCheckbox: boolean;
+        FilterPanelCheckboxWithOverflow: boolean;
+        FilterPanelGroup: boolean;
         FilterPanelLabel: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.33.0",
+  "version": "2.34.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.31.0",
+    "@carbon/ibm-products-styles": "^2.32.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "389407c790f9238df195d0c53a384d7a06075f06"
+  "gitHead": "8c3c324be171a801b4d966e94c54ca01a99eb82f"
 }

package/scss/components/FilterPanel/_filter-panel-accordion-item.scss

@@ -0,0 +1,56 @@
+//
+// 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.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-accordion-item;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+// Remove top and bottom borders.
+html .#{$block-class} {
+  border-block-start: 0;
+}
+html .#{$block-class}:last-child {
+  border-block-end: 0;
+}
+
+// Override Carbon Accordion Item styling
+html .#{$block-class} .#{$carbon}--accordion__wrapper {
+  padding-block: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__heading {
+  min-block-size: 2rem;
+  padding-inline-end: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__title {
+  width: 100%;
+  // 100% - the space taken up by the expand/collapse icon.
+  max-width: calc(100% - $spacing-07);
+  margin-inline-end: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__content {
+  padding-inline-end: 0;
+}
+
+// Override Filter Panel Label
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__text {
+  @include type.type-style('body-01');
+}
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__count {
+  @include type.type-style('label-01');
+}

package/scss/components/FilterPanel/_filter-panel-accordion.scss

@@ -0,0 +1,6 @@
+//
+// 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.
+//