@kaizen/components 1.67.7 → 1.67.8

package/dist/styles.css

@@ -29,40 +29,6 @@
   display: block;
   margin-block: var(--spacing-6);
 }
-.MenuItem-module_item__DPerF {
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--typography-paragraph-body-font-size);
-  letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  line-height: var(--typography-paragraph-body-line-height);
-  color: rgba(var(--color-purple-800-rgb), 0.7);
-  padding: var(--spacing-6) var(--spacing-8);
-  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
-  border-radius: 4px;
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
-  margin-inline: var(--spacing-6);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.MenuItem-module_iconWrapper__bRdQN {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.MenuItem-module_item__DPerF[data-focused] {
-  background-color: var(--color-blue-100);
-  color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
-}
-
-.MenuItem-module_item__DPerF[data-disabled] {
-  opacity: 0.3;
-}
 .Button-module_button__QOSYH {
   --button-min-height-width: var(--spacing-48);
   --button-padding-x: calc(
@@ -151,6 +117,40 @@
   --button-icon-size: var(--spacing-16);
   gap: var(--spacing-8);
 }
+.MenuItem-module_item__DPerF {
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  padding: var(--spacing-6) var(--spacing-8);
+  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
+  border-radius: 4px;
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+  margin-inline: var(--spacing-6);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.MenuItem-module_iconWrapper__bRdQN {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.MenuItem-module_item__DPerF[data-focused] {
+  background-color: var(--color-blue-100);
+  color: var(--color-blue-500);
+  outline: none;
+  border-color: var(--color-blue-500);
+}
+
+.MenuItem-module_item__DPerF[data-disabled] {
+  opacity: 0.3;
+}
 .Focusable-module_focusableWrapper__NfuIi {
   display: inline-flex;
 }
@@ -1765,7 +1765,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  height: 3rem;
+  min-height: 3rem;
   padding: var(--spacing-sm, 0.75rem);
   border-width: 0;
   border-radius: var(--border-solid-border-radius, 7px);
@@ -1776,7 +1776,7 @@
   line-height: var(--typography-button-secondary-line-height, 1.5rem);
   letter-spacing: var(--typography-button-secondary-letter-spacing, normal);
   color: var(--color-blue-500, #0168b3);
-  white-space: nowrap;
+  text-align: start;
 }
 .FilterButtonBase-module_filterButtonBase__ImByM:hover, .FilterButtonBase-module_filterButtonBase__ImByM:active {
   z-index: 2;
@@ -4052,6 +4052,13 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   border-radius: var(--border-borderless-border-radius, 7px);
   display: inline-flex;
 }
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .Filter-module_filter__u3IkC {
+    flex-basis: 100%;
+  }
+}
+
 /** THIS IS AN AUTOGENERATED FILE **/
 .FilterContents-module_filterContents__tQWu8 {
   padding: var(--spacing-md, 1.5rem);
@@ -4065,26 +4072,39 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   display: grid;
   gap: var(--spacing-16, 1rem);
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-.FilterButton-module_filterButton__PEcAs {
-  gap: var(--spacing-xs, 0.375rem);
+.FilterButton-module_filterButton__Fn1OD {
+  gap: var(--spacing-6);
+  justify-content: space-between;
+}
+
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .FilterButton-module_filterButton__Fn1OD {
+    flex-grow: 1;
+  }
 }
 
-.FilterButton-module_labelContainer__kJlE8 {
+.FilterButton-module_labelContainer__sPAcx {
   display: inline-flex;
+  flex-wrap: wrap;
 }
 
-.FilterButton-module_hasSelectedValues__tc-XE {
+.FilterButton-module_hasSelectedValues__bHR5g {
   font-weight: bold;
 }
 
-.FilterButton-module_labelSeparator__CmSqS {
-  margin-inline-end: var(--spacing-xs, 0.375rem);
+.FilterButton-module_labelSeparator__KimZO {
+  margin-inline-end: var(--spacing-6);
 }
-[dir=ltr] [dir=rtl] .FilterButton-module_labelSeparator__CmSqS {
-  margin-right: 0;
+
+.FilterButtonRemovable-module_filterButtonBase__V4xk8 {
+  height: 100%;
+}
+
+.FilterBarButton-module_filterBarButton__3IF-- {
+  width: 100%;
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 .DateRangeDisplayLabel-module_dateRangeDisplayLabel__g7nVd {
   display: inline-flex;
@@ -4374,6 +4394,17 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .SelectionControlButton-module_button__u-ysH.SelectionControlButton-module_isDisabled__0axMR:focus-visible::after {
   border-color: var(--color-gray-400, #cdcdd0);
 }
+.RemovableFilterTrigger-module_filterButtonRemovable__-M4wV {
+  width: 100%;
+}
+
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .FilterBarMultiSelect-module_filterMultiSelect__a4enz {
+    flex-basis: 100%;
+  }
+}
+
 .ListBox-module_listBox__Uf6Mc {
   list-style: none;
   margin-top: 0;
@@ -4623,24 +4654,31 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .ClearAllButton-module_clearAllButton__XNkm2 {
   white-space: nowrap;
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-.FilterBar-module_filterBar__ZhQLn {
+.FilterBar-module_wrapper__D8GXq {
+  container: filter-bar-wrapper / inline-size;
+}
+
+.FilterBar-module_filterBar__JEVKL {
   display: flex;
-  padding: var(--spacing-8, 0.5rem);
-  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
-  border-radius: var(--border-solid-border-radius, 7px);
-  background-color: var(--color-white, #ffffff);
+  padding: var(--spacing-8);
+  border-radius: var(--border-solid-border-radius);
+  background-color: var(--color-white);
 }
 
-.FilterBar-module_filtersContainer__v6OJn {
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .FilterBar-module_filterBar__JEVKL {
+    flex-direction: column;
+  }
+}
+
+.FilterBar-module_filtersContainer__Xl-DO {
   display: flex;
   flex-grow: 1;
   flex-wrap: wrap;
-  gap: var(--spacing-8, 0.5rem);
+  gap: var(--spacing-8);
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/

package/dist/types/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -16,9 +16,10 @@ export type FilterMultiSelectProps = {
     trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode;
     children: (value?: SelectionProviderContextType) => React.ReactNode;
     triggerRef?: React.RefObject<HTMLButtonElement>;
+    className?: string;
 } & Omit<MenuPopupProps, "children"> & Omit<MenuTriggerProviderProps, "children"> & SelectionProps;
 export declare const FilterMultiSelect: {
-    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, className, }: FilterMultiSelectProps): JSX.Element;
     displayName: string;
     TriggerButton: {
         ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: import("./subcomponents/Trigger").FilterTriggerButtonProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.7",
+  "version": "1.67.8",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -113,15 +113,16 @@
     "react-highlight": "^0.15.0",
     "react-intl": "^6.8.4",
     "rollup": "^4.24.2",
-    "sass": "^1.77.8",
+    "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
     "tslib": "^2.8.0",
     "tsx": "^4.19.2",
-    "@kaizen/package-bundler": "1.1.9",
-    "@kaizen/design-tokens": "10.8.1"
+    "@kaizen/design-tokens": "10.8.1",
+    "@kaizen/package-bundler": "1.1.9"
   },
   "devDependenciesComments": {
+    "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
     "typescript": "Installed in root"
   },
   "peerDependencies": {

package/src/ButtonGroup/ButtonGroup.tsx

@@ -50,7 +50,10 @@ export const ButtonGroup = ({
           if (isFilterButton(button)) {
             return React.cloneElement(child, {
               children: React.cloneElement(button, {
-                classNameOverride: buttonClassNames,
+                classNameOverride: classnames(
+                  button.props.classNameOverride,
+                  buttonClassNames
+                ),
               }),
             })
           }

package/src/Filter/Filter/Filter.module.css

@@ -0,0 +1,6 @@
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .filter {
+    flex-basis: 100%;
+  }
+}

package/src/Filter/Filter/Filter.tsx

@@ -5,10 +5,12 @@ import React, {
   useRef,
   useState,
 } from "react"
+import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { FilterPopover } from "./subcomponents/FilterPopover"
 import { FilterTriggerRef } from "./types"
+import styles from "./Filter.module.css"
 
 export type FilterProps = {
   children: React.ReactNode
@@ -54,7 +56,10 @@ export const Filter = ({
   }, [filterButtonRef.current?.triggerRef?.current, onMount])
 
   return (
-    <div className={classNameOverride} {...restProps}>
+    <div
+      className={classnames(styles.filter, classNameOverride)}
+      {...restProps}
+    >
       {React.cloneElement(trigger, {
         ref: filterButtonRef,
       })}

package/src/Filter/FilterBar/FilterBar.module.css

@@ -0,0 +1,24 @@
+.wrapper {
+  container: filter-bar-wrapper / inline-size;
+}
+
+.filterBar {
+  display: flex;
+  padding: var(--spacing-8);
+  border-radius: var(--border-solid-border-radius);
+  background-color: var(--color-white);
+}
+
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .filterBar {
+    flex-direction: column;
+  }
+}
+
+.filtersContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+}

package/src/Filter/FilterBar/FilterBar.tsx

@@ -14,7 +14,7 @@ import {
 import { AddFiltersMenu } from "./subcomponents/AddFiltersMenu"
 import { ClearAllButton } from "./subcomponents/ClearAllButton"
 import { FiltersValues } from "./types"
-import styles from "./FilterBar.module.scss"
+import styles from "./FilterBar.module.css"
 
 export type FilterBarProps<ValuesMap extends FiltersValues> = OverrideClassName<
   Omit<FilterBarProviderProps<ValuesMap>, "children">
@@ -27,19 +27,21 @@ export const FilterBar = <ValuesMap extends FiltersValues>({
 }: FilterBarProps<ValuesMap>): JSX.Element => (
   <FilterBarProvider<ValuesMap> filters={filters} {...providerProps}>
     {(activeFilters): JSX.Element => (
-      <div className={classnames(styles.filterBar, classNameOverride)}>
-        <div className={styles.filtersContainer}>
-          {Object.values(activeFilters).map(({ id, Component }) => (
-            // `id` will always be `string`, but keyof ValuesMap transformed it
-            <React.Fragment key={id as string}>
-              {React.cloneElement(Component, { id })}
-            </React.Fragment>
-          ))}
-          <AddFiltersMenu />
-        </div>
+      <div className={styles.wrapper}>
+        <div className={classnames(styles.filterBar, classNameOverride)}>
+          <div className={styles.filtersContainer}>
+            {Object.values(activeFilters).map(({ id, Component }) => (
+              // `id` will always be `string`, but keyof ValuesMap transformed it
+              <React.Fragment key={id as string}>
+                {React.cloneElement(Component, { id })}
+              </React.Fragment>
+            ))}
+            <AddFiltersMenu />
+          </div>
 
-        <div>
-          <ClearAllButton />
+          <div>
+            <ClearAllButton />
+          </div>
         </div>
       </div>
     )}

package/src/Filter/FilterBar/_docs/FilterBar.stories.tsx

@@ -152,6 +152,11 @@ const filters = [
           { value: "none", label: "None" },
           { value: "pearls", label: "Pearls" },
           { value: "fruit-jelly", label: "Fruit Jelly" },
+          { value: "peanuts", label: "Peanuts" },
+          { value: "coconut", label: "Coconut" },
+          { value: "aloe", label: "Aloe Vera" },
+          { value: "mochi", label: "Mini Mochi" },
+          { value: "popping-pearls", label: "Popping Pearls" },
         ]}
       >
         {(): JSX.Element => (

package/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.module.css

@@ -0,0 +1,3 @@
+.filterBarButton {
+  width: 100%;
+}

package/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useEffect } from "react"
+import classnames from "classnames"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { useFilterBarContext } from "~components/Filter/FilterBar/context/FilterBarContext"
 import {
@@ -7,6 +8,7 @@ import {
   FilterButtonRemovable,
 } from "~components/Filter/FilterButton"
 import { isRefObject } from "~components/utils/isRefObject"
+import styles from "./FilterBarButton.module.css"
 
 export type FilterBarButtonProps = FilterButtonProps & {
   filterId: string
@@ -16,25 +18,41 @@ export type FilterBarButtonProps = FilterButtonProps & {
 export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
->(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
-  const { hideFilter, focusId, setFocus } = useFilterBarContext()
+>(
+  (
+    { filterId, isRemovable = false, classNameOverride, ...props },
+    ref
+  ): JSX.Element => {
+    const { hideFilter, focusId, setFocus } = useFilterBarContext()
 
-  useEffect(() => {
-    if (focusId === filterId && isRefObject(ref)) {
-      ref?.current?.triggerRef?.current?.focus()
-      setFocus(undefined)
-    }
-  }, [focusId])
+    useEffect(() => {
+      if (focusId === filterId && isRefObject(ref)) {
+        ref?.current?.triggerRef?.current?.focus()
+        setFocus(undefined)
+      }
+    }, [focusId])
 
-  return isRemovable ? (
-    <FilterButtonRemovable
-      ref={ref}
-      triggerButtonProps={props}
-      removeButtonProps={{ onClick: () => hideFilter(filterId) }}
-    />
-  ) : (
-    <FilterButton ref={ref} {...props} />
-  )
-})
+    return isRemovable ? (
+      <FilterButtonRemovable
+        ref={ref}
+        triggerButtonProps={props}
+        removeButtonProps={{ onClick: () => hideFilter(filterId) }}
+        classNameOverride={classnames(
+          classNameOverride,
+          styles.filterBarButton
+        )}
+      />
+    ) : (
+      <FilterButton
+        ref={ref}
+        classNameOverride={classnames(
+          classNameOverride,
+          styles.filterBarButton
+        )}
+        {...props}
+      />
+    )
+  }
+)
 
 FilterBarButton.displayName = "FilterBar.Button"

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.module.css

@@ -0,0 +1,6 @@
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .filterMultiSelect {
+    flex-basis: 100%;
+  }
+}

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx

@@ -8,6 +8,7 @@ import {
 } from "~components/Filter/FilterMultiSelect"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 import { checkArraysMatch } from "../../utils/checkArraysMatch"
+import styles from "./FilterBarMultiSelect.module.css"
 
 export type FilterBarMultiSelectProps = Omit<
   FilterMultiSelectProps,
@@ -97,6 +98,7 @@ export const FilterBarMultiSelect = ({
       items={items}
       isOpen={filterState.isOpen}
       onOpenChange={(open): void => setFilterOpenState(id, open)}
+      className={styles.filterMultiSelect}
       trigger={(): JSX.Element => {
         const triggerProps = {
           selectedOptionLabels: filterState.value
@@ -112,9 +114,13 @@ export const FilterBarMultiSelect = ({
           <FilterMultiSelect.RemovableTrigger
             {...triggerProps}
             onRemove={() => hideFilter(id)}
+            classNameOverride={styles.triggerButton}
           />
         ) : (
-          <FilterMultiSelect.TriggerButton {...triggerProps} />
+          <FilterMultiSelect.TriggerButton
+            classNameOverride={styles.triggerButton}
+            {...triggerProps}
+          />
         )
       }}
       triggerRef={buttonRef}

package/src/Filter/FilterButton/FilterButton/FilterButton.module.css

@@ -0,0 +1,24 @@
+.filterButton {
+  gap: var(--spacing-6);
+  justify-content: space-between;
+}
+
+/* keep max-width value in sync with other places using this container */
+@container filter-bar-wrapper (max-width: 767px) {
+  .filterButton {
+    flex-grow: 1;
+  }
+}
+
+.labelContainer {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+.hasSelectedValues {
+  font-weight: bold;
+}
+
+.labelSeparator {
+  margin-inline-end: var(--spacing-6);
+}

package/src/Filter/FilterButton/FilterButton/FilterButton.tsx

@@ -7,7 +7,7 @@ import {
   FilterButtonBase,
   FilterButtonBaseProps,
 } from "../subcomponents/FilterButtonBase"
-import styles from "./FilterButton.module.scss"
+import styles from "./FilterButton.module.css"
 
 export type FilterButtonProps = {
   label: string

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.module.css

@@ -0,0 +1,3 @@
+.filterButtonBase {
+  height: 100%;
+}

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
+import classnames from "classnames"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { Icon } from "~components/__future__/Icon"
@@ -11,6 +12,7 @@ import {
   FilterButtonBase,
   FilterButtonBaseProps,
 } from "../subcomponents/FilterButtonBase"
+import styles from "./FilterButtonRemovable.module.css"
 
 export type FilterButtonRemovableProps = {
   triggerButtonProps: FilterButtonProps & DataAttributes
@@ -49,7 +51,14 @@ export const FilterButtonRemovable = forwardRef<
     <ButtonGroup {...restProps}>
       <FilterButton ref={ref} {...triggerButtonProps} />
       <Tooltip text={removeButtonLabel} display="inline-block" position="below">
-        <FilterButtonBase ref={removeButtonRef} {...removeButtonProps}>
+        <FilterButtonBase
+          ref={removeButtonRef}
+          classNameOverride={classnames(
+            styles.filterButtonBase,
+            restProps.classNameOverride
+          )}
+          {...removeButtonProps}
+        >
           <Icon name="cancel" alt={removeButtonLabel} isFilled />
         </FilterButtonBase>
       </Tooltip>

package/src/Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.module.scss

@@ -13,7 +13,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  height: 3rem; // 48px
+  min-height: 3rem; // 48px
   padding: $spacing-sm;
   border-width: 0;
   border-radius: $border-solid-border-radius;
@@ -24,7 +24,7 @@
   line-height: $typography-button-secondary-line-height;
   letter-spacing: $typography-button-secondary-letter-spacing;
   color: $color-blue-500;
-  white-space: nowrap;
+  text-align: start;
 
   &:hover,
   &:active {

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -42,6 +42,7 @@ export type FilterMultiSelectProps = {
   trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode
   children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu
   triggerRef?: React.RefObject<HTMLButtonElement>
+  className?: string
 } & Omit<MenuPopupProps, "children"> &
   Omit<MenuTriggerProviderProps, "children"> &
   SelectionProps
@@ -62,6 +63,7 @@ export const FilterMultiSelect = ({
   selectionMode = "multiple",
   onSearchInputChange,
   triggerRef,
+  className,
 }: FilterMultiSelectProps): JSX.Element => {
   const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
   const menuPopupProps = { isLoading, loadingSkeleton }
@@ -83,7 +85,7 @@ export const FilterMultiSelect = ({
 
   return (
     <MenuTriggerProvider {...menuTriggerProps}>
-      <div>
+      <div className={className}>
         <MenuTriggerConsumer>{trigger}</MenuTriggerConsumer>
         <MenuPopup {...menuPopupProps}>
           <SelectionProvider {...selectionProps}>

package/src/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.module.css

@@ -0,0 +1,3 @@
+.filterButtonRemovable {
+  width: 100%;
+}

package/src/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx

@@ -1,9 +1,11 @@
 import React, { useRef } from "react"
+import classnames from "classnames"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { FilterButtonRemovable } from "~components/Filter/FilterButton"
 import { useMenuTriggerContext } from "../../../context"
 import { getTruncatedLabels } from "../../../utils"
 import { FilterTriggerButtonProps } from "../FilterTriggerButton"
+import styles from "./RemovableFilterTrigger.module.css"
 
 export type RemovableFilterTriggerProps = FilterTriggerButtonProps & {
   onRemove: () => void
@@ -22,7 +24,10 @@ export const RemovableFilterTrigger = ({
   return (
     <FilterButtonRemovable
       ref={ref}
-      classNameOverride={classNameOverride}
+      classNameOverride={classnames(
+        styles.filterButtonRemovable,
+        classNameOverride
+      )}
       triggerButtonProps={{
         ...buttonProps,
         label,

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

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterBar": "FilterBar-module_filterBar__ZhQLn",
-  "filtersContainer": "FilterBar-module_filtersContainer__v6OJn"
-};
-module.exports = styles;