@kaizen/components 1.67.6 → 1.67.8

package/dist/cjs/ButtonGroup/ButtonGroup.cjs

@@ -33,7 +33,7 @@ var ButtonGroup = function (_a) {
       if (isFilterButton(button)) {
         return React__default.default.cloneElement(child, {
           children: React__default.default.cloneElement(button, {
-            classNameOverride: buttonClassNames
+            classNameOverride: classnames__default.default(button.props.classNameOverride, buttonClassNames)
           })
         });
       }

package/dist/cjs/Filter/Filter/Filter.cjs

@@ -2,14 +2,17 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var classnames = require('classnames');
 var reactFocusOn = require('react-focus-on');
 var FilterPopover = require('./subcomponents/FilterPopover/FilterPopover.cjs');
+var Filter_module = require('./Filter.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var Filter = function (_a) {
   var _b, _c, _d, _e, _f;
   var children = _a.children,
@@ -43,7 +46,7 @@ var Filter = function (_a) {
     }
   }, [(_d = (_c = filterButtonRef.current) === null || _c === void 0 ? void 0 : _c.triggerRef) === null || _d === void 0 ? void 0 : _d.current, onMount]);
   return React__default.default.createElement("div", tslib.__assign({
-    className: classNameOverride
+    className: classnames__default.default(Filter_module.filter, classNameOverride)
   }, restProps), React__default.default.cloneElement(trigger, {
     ref: filterButtonRef
   }), isRefLoaded && isOpen && React__default.default.createElement(reactFocusOn.FocusOn, {

package/dist/cjs/Filter/Filter/Filter.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filter": "Filter-module_filter__u3IkC"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterBar/FilterBar.cjs

@@ -10,7 +10,7 @@ var FilterBarMultiSelect = require('./subcomponents/FilterBarMultiSelect/FilterB
 var FilterBarSelect = require('./subcomponents/FilterBarSelect/FilterBarSelect.cjs');
 var AddFiltersMenu = require('./subcomponents/AddFiltersMenu/AddFiltersMenu.cjs');
 var ClearAllButton = require('./subcomponents/ClearAllButton/ClearAllButton.cjs');
-var FilterBar_module = require('./FilterBar.module.scss.cjs');
+var FilterBar_module = require('./FilterBar.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -26,6 +26,8 @@ var FilterBar = function (_a) {
     filters: filters
   }, providerProps), function (activeFilters) {
     return React__default.default.createElement("div", {
+      className: FilterBar_module.wrapper
+    }, React__default.default.createElement("div", {
       className: classnames__default.default(FilterBar_module.filterBar, classNameOverride)
     }, React__default.default.createElement("div", {
       className: FilterBar_module.filtersContainer
@@ -40,7 +42,7 @@ var FilterBar = function (_a) {
           id: id
         }))
       );
-    }), React__default.default.createElement(AddFiltersMenu.AddFiltersMenu, null)), React__default.default.createElement("div", null, React__default.default.createElement(ClearAllButton.ClearAllButton, null)));
+    }), React__default.default.createElement(AddFiltersMenu.AddFiltersMenu, null)), React__default.default.createElement("div", null, React__default.default.createElement(ClearAllButton.ClearAllButton, null))));
   });
 };
 FilterBar.displayName = "FilterBar";

package/dist/cjs/Filter/FilterBar/FilterBar.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "wrapper": "FilterBar-module_wrapper__D8GXq",
+  "filterBar": "FilterBar-module_filterBar__JEVKL",
+  "filtersContainer": "FilterBar-module_filtersContainer__Xl-DO"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.cjs

@@ -2,21 +2,25 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var classnames = require('classnames');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
 var FilterButton = require('../../../FilterButton/FilterButton/FilterButton.cjs');
 var FilterButtonRemovable = require('../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
 var isRefObject = require('../../../../utils/isRefObject.cjs');
+var FilterBarButton_module = require('./FilterBarButton.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var FilterBarButton = React.forwardRef(function (_a, ref) {
   var filterId = _a.filterId,
     _b = _a.isRemovable,
     isRemovable = _b === void 0 ? false : _b,
-    props = tslib.__rest(_a, ["filterId", "isRemovable"]);
+    classNameOverride = _a.classNameOverride,
+    props = tslib.__rest(_a, ["filterId", "isRemovable", "classNameOverride"]);
   var _c = FilterBarContext.useFilterBarContext(),
     hideFilter = _c.hideFilter,
     focusId = _c.focusId,
@@ -35,9 +39,11 @@ var FilterBarButton = React.forwardRef(function (_a, ref) {
       onClick: function () {
         return hideFilter(filterId);
       }
-    }
+    },
+    classNameOverride: classnames__default.default(classNameOverride, FilterBarButton_module.filterBarButton)
   }) : React__default.default.createElement(FilterButton.FilterButton, tslib.__assign({
-    ref: ref
+    ref: ref,
+    classNameOverride: classnames__default.default(classNameOverride, FilterBarButton_module.filterBarButton)
   }, props));
 });
 FilterBarButton.displayName = "FilterBar.Button";

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterBarButton": "FilterBarButton-module_filterBarButton__3IF--"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.cjs

@@ -8,6 +8,7 @@ require('../../../FilterMultiSelect/context/SelectionProvider/SelectionProvider.
 var getSelectedOptionLabels = require('../../../FilterMultiSelect/utils/getSelectedOptionLabels.cjs');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
 var checkArraysMatch = require('../../utils/checkArraysMatch.cjs');
+var FilterBarMultiSelect_module = require('./FilterBarMultiSelect.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -81,6 +82,7 @@ var FilterBarMultiSelect = function (_a) {
     onOpenChange: function (open) {
       return setFilterOpenState(id, open);
     },
+    className: FilterBarMultiSelect_module.filterMultiSelect,
     trigger: function () {
       var triggerProps = {
         selectedOptionLabels: filterState.value ? getSelectedOptionLabels.getSelectedOptionLabels(convertConsumableFormatIntoSelection(filterState.value), items) : [],
@@ -89,8 +91,11 @@ var FilterBarMultiSelect = function (_a) {
       return filterState.isRemovable ? React__default.default.createElement(FilterMultiSelect.FilterMultiSelect.RemovableTrigger, tslib.__assign({}, triggerProps, {
         onRemove: function () {
           return hideFilter(id);
-        }
-      })) : React__default.default.createElement(FilterMultiSelect.FilterMultiSelect.TriggerButton, tslib.__assign({}, triggerProps));
+        },
+        classNameOverride: FilterBarMultiSelect_module.triggerButton
+      })) : React__default.default.createElement(FilterMultiSelect.FilterMultiSelect.TriggerButton, tslib.__assign({
+        classNameOverride: FilterBarMultiSelect_module.triggerButton
+      }, triggerProps));
     },
     triggerRef: buttonRef
   }, props), children);

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterMultiSelect": "FilterBarMultiSelect-module_filterMultiSelect__a4enz"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterButton/FilterButton/FilterButton.cjs

@@ -6,7 +6,7 @@ var classnames = require('classnames');
 var Icon = require('../../../__future__/Icon/Icon.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButtonBase = require('../subcomponents/FilterButtonBase/FilterButtonBase.cjs');
-var FilterButton_module = require('./FilterButton.module.scss.cjs');
+var FilterButton_module = require('./FilterButton.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Filter/FilterButton/FilterButton/FilterButton.module.css.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = {
+  "filterButton": "FilterButton-module_filterButton__Fn1OD",
+  "labelContainer": "FilterButton-module_labelContainer__sPAcx",
+  "hasSelectedValues": "FilterButton-module_hasSelectedValues__bHR5g",
+  "labelSeparator": "FilterButton-module_labelSeparator__KimZO"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs

@@ -3,18 +3,21 @@
 var tslib = require('tslib');
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
+var classnames = require('classnames');
 var ButtonGroup = require('../../../ButtonGroup/ButtonGroup.cjs');
 var Icon = require('../../../__future__/Icon/Icon.cjs');
 var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButton = require('../FilterButton/FilterButton.cjs');
 var FilterButtonBase = require('../subcomponents/FilterButtonBase/FilterButtonBase.cjs');
+var FilterButtonRemovable_module = require('./FilterButtonRemovable.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var FilterButtonRemovable = React.forwardRef(function (_a, ref) {
   var _b;
   var triggerButtonProps = _a.triggerButtonProps,
@@ -38,7 +41,8 @@ var FilterButtonRemovable = React.forwardRef(function (_a, ref) {
     display: "inline-block",
     position: "below"
   }, React__default.default.createElement(FilterButtonBase.FilterButtonBase, tslib.__assign({
-    ref: removeButtonRef
+    ref: removeButtonRef,
+    classNameOverride: classnames__default.default(FilterButtonRemovable_module.filterButtonBase, restProps.classNameOverride)
   }, removeButtonProps), React__default.default.createElement(Icon.Icon, {
     name: "cancel",
     alt: removeButtonLabel,

package/dist/cjs/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterButtonBase": "FilterButtonRemovable-module_filterButtonBase__V4xk8"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterMultiSelect/FilterMultiSelect.cjs

@@ -40,7 +40,8 @@ var FilterMultiSelect = function (_a) {
     _b = _a.selectionMode,
     selectionMode = _b === void 0 ? "multiple" : _b,
     onSearchInputChange = _a.onSearchInputChange,
-    triggerRef = _a.triggerRef;
+    triggerRef = _a.triggerRef,
+    className = _a.className;
   var menuTriggerProps = {
     isOpen: isOpen,
     defaultOpen: defaultOpen,
@@ -66,7 +67,9 @@ var FilterMultiSelect = function (_a) {
     disabledKeys: disabledKeys,
     onSearchInputChange: onSearchInputChange
   };
-  return React__default.default.createElement(MenuTriggerProvider.MenuTriggerProvider, tslib.__assign({}, menuTriggerProps), React__default.default.createElement("div", null, React__default.default.createElement(MenuTriggerProvider.MenuTriggerConsumer, null, trigger), React__default.default.createElement(MenuPopup.MenuPopup, tslib.__assign({}, menuPopupProps), React__default.default.createElement(SelectionProvider.SelectionProvider, tslib.__assign({}, selectionProps), React__default.default.createElement(SelectionProvider.SelectionConsumer, null, children)))));
+  return React__default.default.createElement(MenuTriggerProvider.MenuTriggerProvider, tslib.__assign({}, menuTriggerProps), React__default.default.createElement("div", {
+    className: className
+  }, React__default.default.createElement(MenuTriggerProvider.MenuTriggerConsumer, null, trigger), React__default.default.createElement(MenuPopup.MenuPopup, tslib.__assign({}, menuPopupProps), React__default.default.createElement(SelectionProvider.SelectionProvider, tslib.__assign({}, selectionProps), React__default.default.createElement(SelectionProvider.SelectionConsumer, null, children)))));
 };
 FilterMultiSelect.displayName = "FilterMultiSelect";
 FilterMultiSelect.TriggerButton = FilterTriggerButton.FilterTriggerButton;

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.cjs

@@ -2,17 +2,20 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var classnames = require('classnames');
 require('../../../../FilterButton/FilterButton/FilterButton.cjs');
 var FilterButtonRemovable = require('../../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
 var MenuTriggerProvider = require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
 require('../../../context/SelectionProvider/SelectionProvider.cjs');
 var getTruncatedLabel = require('../../../utils/getTruncatedLabel.cjs');
+var RemovableFilterTrigger_module = require('./RemovableFilterTrigger.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var RemovableFilterTrigger = function (_a) {
   var label = _a.label,
     selectedOptionLabels = _a.selectedOptionLabels,
@@ -29,7 +32,7 @@ var RemovableFilterTrigger = function (_a) {
   });
   return React__default.default.createElement(FilterButtonRemovable.FilterButtonRemovable, {
     ref: ref,
-    classNameOverride: classNameOverride,
+    classNameOverride: classnames__default.default(RemovableFilterTrigger_module.filterButtonRemovable, classNameOverride),
     triggerButtonProps: tslib.__assign(tslib.__assign({}, buttonProps), {
       label: label,
       selectedValue: getTruncatedLabel.getTruncatedLabels(selectedOptionLabels, labelCharacterLimitBeforeTruncate),

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterButtonRemovable": "RemovableFilterTrigger-module_filterButtonRemovable__-M4wV"
+};
+module.exports = styles;

package/dist/esm/ButtonGroup/ButtonGroup.mjs

@@ -25,7 +25,7 @@ const ButtonGroup = /*#__PURE__*/function () {
         if (isFilterButton(button)) {
           return /*#__PURE__*/React.cloneElement(child, {
             children: /*#__PURE__*/React.cloneElement(button, {
-              classNameOverride: buttonClassNames
+              classNameOverride: classnames(button.props.classNameOverride, buttonClassNames)
             })
           });
         }

package/dist/esm/Filter/Filter/Filter.mjs

@@ -1,7 +1,9 @@
 import { __rest, __assign } from 'tslib';
 import React, { useId, useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
 import { FocusOn } from 'react-focus-on';
 import { FilterPopover } from './subcomponents/FilterPopover/FilterPopover.mjs';
+import styles from './Filter.module.css.mjs';
 const Filter = /*#__PURE__*/function () {
   const Filter = function (_a) {
     var _b, _c, _d, _e, _f;
@@ -36,7 +38,7 @@ const Filter = /*#__PURE__*/function () {
       }
     }, [(_d = (_c = filterButtonRef.current) === null || _c === void 0 ? void 0 : _c.triggerRef) === null || _d === void 0 ? void 0 : _d.current, onMount]);
     return /*#__PURE__*/React.createElement("div", __assign({
-      className: classNameOverride
+      className: classnames(styles.filter, classNameOverride)
     }, restProps), /*#__PURE__*/React.cloneElement(trigger, {
       ref: filterButtonRef
     }), isRefLoaded && isOpen && ( /*#__PURE__*/React.createElement(FocusOn, {

package/dist/esm/Filter/Filter/Filter.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filter": "Filter-module_filter__u3IkC"
+};
+export { styles as default };

package/dist/esm/Filter/FilterBar/FilterBar.mjs

@@ -8,7 +8,7 @@ import { FilterBarMultiSelect } from './subcomponents/FilterBarMultiSelect/Filte
 import { FilterBarSelect } from './subcomponents/FilterBarSelect/FilterBarSelect.mjs';
 import { AddFiltersMenu } from './subcomponents/AddFiltersMenu/AddFiltersMenu.mjs';
 import { ClearAllButton } from './subcomponents/ClearAllButton/ClearAllButton.mjs';
-import styles from './FilterBar.module.scss.mjs';
+import styles from './FilterBar.module.css.mjs';
 const FilterBar = /*#__PURE__*/function () {
   const FilterBar = function (_a) {
     var filters = _a.filters,
@@ -18,6 +18,8 @@ const FilterBar = /*#__PURE__*/function () {
       filters: filters
     }, providerProps), function (activeFilters) {
       return /*#__PURE__*/React.createElement("div", {
+        className: styles.wrapper
+      }, /*#__PURE__*/React.createElement("div", {
         className: classnames(styles.filterBar, classNameOverride)
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.filtersContainer
@@ -33,7 +35,7 @@ const FilterBar = /*#__PURE__*/function () {
             id: id
           }))
         );
-      }), /*#__PURE__*/React.createElement(AddFiltersMenu, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ClearAllButton, null)));
+      }), /*#__PURE__*/React.createElement(AddFiltersMenu, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ClearAllButton, null))));
     });
   };
   FilterBar.displayName = "FilterBar";

package/dist/esm/Filter/FilterBar/FilterBar.module.css.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "wrapper": "FilterBar-module_wrapper__D8GXq",
+  "filterBar": "FilterBar-module_filterBar__JEVKL",
+  "filtersContainer": "FilterBar-module_filtersContainer__Xl-DO"
+};
+export { styles as default };

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.mjs

@@ -1,15 +1,18 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useEffect } from 'react';
+import classnames from 'classnames';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import { FilterButton } from '../../../FilterButton/FilterButton/FilterButton.mjs';
 import { FilterButtonRemovable } from '../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
 import { isRefObject } from '../../../../utils/isRefObject.mjs';
+import styles from './FilterBarButton.module.css.mjs';
 const FilterBarButton = /*#__PURE__*/function () {
   const FilterBarButton = /*#__PURE__*/forwardRef(function (_a, ref) {
     var filterId = _a.filterId,
       _b = _a.isRemovable,
       isRemovable = _b === void 0 ? false : _b,
-      props = __rest(_a, ["filterId", "isRemovable"]);
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["filterId", "isRemovable", "classNameOverride"]);
     var _c = useFilterBarContext(),
       hideFilter = _c.hideFilter,
       focusId = _c.focusId,
@@ -28,9 +31,11 @@ const FilterBarButton = /*#__PURE__*/function () {
         onClick: function () {
           return hideFilter(filterId);
         }
-      }
+      },
+      classNameOverride: classnames(classNameOverride, styles.filterBarButton)
     })) : ( /*#__PURE__*/React.createElement(FilterButton, __assign({
-      ref: ref
+      ref: ref,
+      classNameOverride: classnames(classNameOverride, styles.filterBarButton)
     }, props)));
   });
   FilterBarButton.displayName = "FilterBar.Button";

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterBarButton": "FilterBarButton-module_filterBarButton__3IF--"
+};
+export { styles as default };

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.mjs

@@ -6,6 +6,7 @@ import '../../../FilterMultiSelect/context/SelectionProvider/SelectionProvider.m
 import { getSelectedOptionLabels } from '../../../FilterMultiSelect/utils/getSelectedOptionLabels.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import { checkArraysMatch } from '../../utils/checkArraysMatch.mjs';
+import styles from './FilterBarMultiSelect.module.css.mjs';
 var convertSelectionToAConsumableFormat = function (value) {
   if (value === "all") return "all";
   var arrayOfValues = Array.from(value);
@@ -74,6 +75,7 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
       onOpenChange: function (open) {
         return setFilterOpenState(id, open);
       },
+      className: styles.filterMultiSelect,
       trigger: function () {
         var triggerProps = {
           selectedOptionLabels: filterState.value ? getSelectedOptionLabels(convertConsumableFormatIntoSelection(filterState.value), items) : [],
@@ -82,8 +84,11 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
         return filterState.isRemovable ? ( /*#__PURE__*/React.createElement(FilterMultiSelect.RemovableTrigger, __assign({}, triggerProps, {
           onRemove: function () {
             return hideFilter(id);
-          }
-        }))) : ( /*#__PURE__*/React.createElement(FilterMultiSelect.TriggerButton, __assign({}, triggerProps)));
+          },
+          classNameOverride: styles.triggerButton
+        }))) : ( /*#__PURE__*/React.createElement(FilterMultiSelect.TriggerButton, __assign({
+          classNameOverride: styles.triggerButton
+        }, triggerProps)));
       },
       triggerRef: buttonRef
     }, props), children);

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterMultiSelect": "FilterBarMultiSelect-module_filterMultiSelect__a4enz"
+};
+export { styles as default };

package/dist/esm/Filter/FilterButton/FilterButton/FilterButton.mjs

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButtonBase } from '../subcomponents/FilterButtonBase/FilterButtonBase.mjs';
-import styles from './FilterButton.module.scss.mjs';
+import styles from './FilterButton.module.css.mjs';
 const FilterButton = /*#__PURE__*/function () {
   const FilterButton = /*#__PURE__*/forwardRef(function (_a, ref) {
     var label = _a.label,

package/dist/esm/Filter/FilterButton/FilterButton/FilterButton.module.css.mjs

@@ -0,0 +1,7 @@
+var styles = {
+  "filterButton": "FilterButton-module_filterButton__Fn1OD",
+  "labelContainer": "FilterButton-module_labelContainer__sPAcx",
+  "hasSelectedValues": "FilterButton-module_hasSelectedValues__bHR5g",
+  "labelSeparator": "FilterButton-module_labelSeparator__KimZO"
+};
+export { styles as default };

package/dist/esm/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs

@@ -1,12 +1,14 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
+import classnames from 'classnames';
 import { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.mjs';
 import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButton } from '../FilterButton/FilterButton.mjs';
 import { FilterButtonBase } from '../subcomponents/FilterButtonBase/FilterButtonBase.mjs';
+import styles from './FilterButtonRemovable.module.css.mjs';
 const FilterButtonRemovable = /*#__PURE__*/function () {
   const FilterButtonRemovable = /*#__PURE__*/forwardRef(function (_a, ref) {
     var _b;
@@ -31,7 +33,8 @@ const FilterButtonRemovable = /*#__PURE__*/function () {
       display: "inline-block",
       position: "below"
     }, /*#__PURE__*/React.createElement(FilterButtonBase, __assign({
-      ref: removeButtonRef
+      ref: removeButtonRef,
+      classNameOverride: classnames(styles.filterButtonBase, restProps.classNameOverride)
     }, removeButtonProps), /*#__PURE__*/React.createElement(Icon, {
       name: "cancel",
       alt: removeButtonLabel,

package/dist/esm/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterButtonBase": "FilterButtonRemovable-module_filterButtonBase__V4xk8"
+};
+export { styles as default };

package/dist/esm/Filter/FilterMultiSelect/FilterMultiSelect.mjs

@@ -33,7 +33,8 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       _b = _a.selectionMode,
       selectionMode = _b === void 0 ? "multiple" : _b,
       onSearchInputChange = _a.onSearchInputChange,
-      triggerRef = _a.triggerRef;
+      triggerRef = _a.triggerRef,
+      className = _a.className;
     var menuTriggerProps = {
       isOpen: isOpen,
       defaultOpen: defaultOpen,
@@ -59,7 +60,9 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       disabledKeys: disabledKeys,
       onSearchInputChange: onSearchInputChange
     };
-    return /*#__PURE__*/React.createElement(MenuTriggerProvider, __assign({}, menuTriggerProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuTriggerConsumer, null, trigger), /*#__PURE__*/React.createElement(MenuPopup, __assign({}, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
+    return /*#__PURE__*/React.createElement(MenuTriggerProvider, __assign({}, menuTriggerProps), /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(MenuTriggerConsumer, null, trigger), /*#__PURE__*/React.createElement(MenuPopup, __assign({}, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
   };
   FilterMultiSelect.displayName = "FilterMultiSelect";
   FilterMultiSelect.TriggerButton = FilterTriggerButton;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.mjs

@@ -1,10 +1,12 @@
 import { __assign } from 'tslib';
 import React, { useRef } from 'react';
+import classnames from 'classnames';
 import '../../../../FilterButton/FilterButton/FilterButton.mjs';
 import { FilterButtonRemovable } from '../../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
 import { useMenuTriggerContext } from '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import '../../../context/SelectionProvider/SelectionProvider.mjs';
 import { getTruncatedLabels } from '../../../utils/getTruncatedLabel.mjs';
+import styles from './RemovableFilterTrigger.module.css.mjs';
 const RemovableFilterTrigger = /*#__PURE__*/function () {
   const RemovableFilterTrigger = function (_a) {
     var label = _a.label,
@@ -22,7 +24,7 @@ const RemovableFilterTrigger = /*#__PURE__*/function () {
     });
     return /*#__PURE__*/React.createElement(FilterButtonRemovable, {
       ref: ref,
-      classNameOverride: classNameOverride,
+      classNameOverride: classnames(styles.filterButtonRemovable, classNameOverride),
       triggerButtonProps: __assign(__assign({}, buttonProps), {
         label: label,
         selectedValue: getTruncatedLabels(selectedOptionLabels, labelCharacterLimitBeforeTruncate),

package/dist/esm/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterButtonRemovable": "RemovableFilterTrigger-module_filterButtonRemovable__-M4wV"
+};
+export { styles as default };