@wix/patterns 1.427.0 → 1.431.0

package/src/components/MoreFiltersCTA/MoreFiltersCTA.tsx

@@ -1,9 +1,11 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { ContentFilter } from '@wix/wix-ui-icons-common';
+import { FilterSmall, ContentFilter } from '@wix/wix-ui-icons-common/lazy';
+import { Box, CounterBadge } from '@wix/design-system';
 import { CounterBadgeButton } from '../CounterBadgeButton';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 const _MoreFiltersCTA = () => {
   const state = useToolbarCollectionContext();
@@ -12,24 +14,51 @@ const _MoreFiltersCTA = () => {
     container: { translate: t },
     toolbarFiltersState,
   } = state;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
+  const count = state.collection.query.nonPersistentCustomFiltersCount;
+
+  if (!isBmHarmonyTheme) {
+    return (
+      <CounterBadgeButton dataHook="more-filters-button-counter" count={count}>
+        <ResponsiveButton
+          ref={toolbarFiltersState?.moreFiltersButtonRef}
+          state={responsive.filters}
+          shouldShrink={false}
+          key="more-filters-button"
+          dataHook="more-filters-button"
+          icon={<ContentFilter />}
+          onClick={toolbarFiltersState?.onFiltersButtonClick}
+        >
+          {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
+        </ResponsiveButton>
+      </CounterBadgeButton>
+    );
+  }
 
   return (
-    <CounterBadgeButton
-      dataHook="more-filters-button-counter"
-      count={state.collection.query.nonPersistentCustomFiltersCount}
+    <ResponsiveButton
+      ref={toolbarFiltersState?.moreFiltersButtonRef}
+      state={responsive.filters}
+      shouldShrink={false}
+      key="more-filters-button"
+      dataHook="more-filters-button"
+      icon={<FilterSmall />}
+      onClick={toolbarFiltersState?.onFiltersButtonClick}
     >
-      <ResponsiveButton
-        ref={toolbarFiltersState?.moreFiltersButtonRef}
-        state={responsive.filters}
-        shouldShrink={false}
-        key="more-filters-button"
-        dataHook="more-filters-button"
-        icon={<ContentFilter />}
-        onClick={toolbarFiltersState?.onFiltersButtonClick}
-      >
+      <Box gap="SP1" verticalAlign="middle" display="inline-flex">
         {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
-      </ResponsiveButton>
-    </CounterBadgeButton>
+        {count > 0 && (
+          <CounterBadge
+            dataHook="more-filters-button-counter"
+            skin="general"
+            size="tiny"
+          >
+            {count}
+          </CounterBadge>
+        )}
+      </Box>
+    </ResponsiveButton>
   );
 };
 

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1544486444";
+var _namespace_ = "MultiBulkActionToolbar771474346";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar1544486444__root","leftGroupWrapper":"MultiBulkActionToolbar1544486444__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1544486444__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1544486444__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar771474346__root","leftGroupWrapper":"MultiBulkActionToolbar771474346__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar771474346__selectedCountItem","selectedCountText":"MultiBulkActionToolbar771474346__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.tsx

@@ -17,6 +17,7 @@ import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
 import { BulkActionContainer } from './BulkActionContainer';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBulkActionMobileGroups } from '../../hooks/useBulkActionMobileGroups';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MultiBulkActionToolbarProps {
   /**
@@ -65,6 +66,7 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
     containerProps,
   });
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const [state] = useState(
     () =>
@@ -125,7 +127,10 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
   const bulkActionButtonsDesktop = (
     <>
       <Box alignSelf="stretch" marginLeft="SP4" marginRight="SP2">
-        <Divider direction="vertical" />
+        <Divider
+          direction="vertical"
+          skin={isBmHarmonyTheme ? 'light' : undefined}
+        />
       </Box>
 
       <Box gap="SP1" className={st(classes.root)}>

package/src/components/MultiLevelSorting/MultiLevelSortingCTAButton.tsx

@@ -2,12 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { FiltersMap } from '@wix/bex-core';
-import { ChangeOrderSmall } from '@wix/wix-ui-icons-common';
+import { ChangeOrderSmall, ReorderSmall } from '@wix/wix-ui-icons-common/lazy';
 import { MultiLevelSortingState, ToolbarCollectionState } from '../../state';
 import { MultiLevelSortingPanelEntry } from '../MultiLevelSortingPanel';
 import { CounterBadgeButton } from '../CounterBadgeButton';
 import { usePageContext } from '@wix/bex-core/react';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MultiLevelSortingCTAButtonProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -24,6 +25,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
   } = state;
 
   const { modalsContainerRef } = usePageContext();
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const [multiLevelSortingState] = useState(() =>
     runInAction(
@@ -50,7 +52,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
       <ResponsiveButton
         state={responsive.actions}
         shouldShrink={!isPanelLayout}
-        icon={<ChangeOrderSmall />}
+        icon={isHarmonyTheme ? <ReorderSmall /> : <ChangeOrderSmall />}
         dataHook="multi-level-sorting-button"
         onClick={() => {
           const isOpen = panels.toggleSidePanel('multiLevelSorting');

package/src/components/MultiLevelSortingPanel/MultiLevelSortingList.tsx

@@ -7,6 +7,7 @@ import { ListDragAndDropContext } from '../ListDragAndDrop/ListDragAndDropContex
 import { DraggableListItem } from '../ListDragAndDrop/DraggableListItem';
 import { MultiLevelSortingTableListItem } from './MultiLevelSortingTableListItem';
 import { DraggableCardOverlay } from '../GridDragAndDropDndKit/DraggableCardOverlay';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MultiLevelSortingListProps<T, F extends FiltersMap> {
   state: MultiLevelSortingState<T, F>;
@@ -17,13 +18,10 @@ export function _MultiLevelSortingList<T, F extends FiltersMap>(
 ) {
   const { state } = props;
   const { dragAndDrop } = state;
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const renderItem = useCallback(
-    (
-      sortableColumn: SortableColumn,
-      index: number,
-      { length }: { length: number },
-    ) => {
+    (sortableColumn: SortableColumn, index: number) => {
       return (
         <DraggableListItem
           key={sortableColumn.key}
@@ -36,12 +34,16 @@ export function _MultiLevelSortingList<T, F extends FiltersMap>(
             sortableColumn={sortableColumn}
             index={index}
             state={state}
-            showDivider={index < length - 1}
+            showDivider={
+              isHarmonyTheme
+                ? false
+                : index < state.sortingCollection.result.items.length - 1
+            }
           />
         </DraggableListItem>
       );
     },
-    [],
+    [isHarmonyTheme],
   );
 
   return (
@@ -55,7 +57,9 @@ export function _MultiLevelSortingList<T, F extends FiltersMap>(
         <Box
           direction="vertical"
           dataHook="multi-level-sorting-list"
-          backgroundColor="D60"
+          {...(isHarmonyTheme
+            ? { paddingLeft: 'SP2', paddingRight: 'SP2' }
+            : {})}
         >
           {state.sortingCollection.result.items.map(renderItem)}
         </Box>
@@ -63,7 +67,7 @@ export function _MultiLevelSortingList<T, F extends FiltersMap>(
           state={dragAndDrop}
           renderItem={(index) => {
             const item = state.sortingCollection.result.items[index];
-            return item ? renderItem(item, index, { length: 0 }) : null;
+            return item ? renderItem(item, index) : null;
           }}
         />
       </>

package/src/components/MultiLevelSortingPanel/MultiLevelSortingOrderSelect.tsx

@@ -6,7 +6,7 @@ import {
   Box,
   listItemSelectBuilder,
 } from '@wix/design-system';
-import { ArrowUpSmall, ArrowDownSmall } from '@wix/wix-ui-icons-common';
+import { ArrowUpSmall, ArrowDownSmall } from '@wix/wix-ui-icons-common/lazy';
 import { FiltersMap, SortOrder } from '@wix/bex-core';
 import { MultiLevelSortingState, SortableColumn } from '../../state';
 import { useWixPatternsContainer } from '@wix/bex-core/react';

package/src/components/MultiLevelSortingPanel/MultiLevelSortingPanel.tsx

@@ -16,6 +16,7 @@ import { useRafRender } from '../../hooks/useRafRender';
 import { MultiLevelSortingList } from './MultiLevelSortingList';
 import { ScrollableContent } from '../ScrollableContent';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MultiLevelSortingPanelProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -28,6 +29,7 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
   const { multiLevelSorting } = table;
 
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const entered = useRafRender();
 
   if (!entered || !multiLevelSorting) {
@@ -73,8 +75,7 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
         moveBy={{ y: -24 }}
       >
         <Box direction="vertical" width="100%">
-          <Divider direction="horizontal" />
-
+          {!isHarmonyTheme && <Divider direction="horizontal" />}
           <Box padding="SP4">
             <AddItem
               dataHook="multi-level-sorting-add-sort"

package/src/components/MultiLevelSortingPanel/MultiLevelSortingTableListItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, IconButton, Tooltip, TableListItem } from '@wix/design-system';
-import { DeleteSmall } from '@wix/wix-ui-icons-common';
+import { DeleteSmall } from '@wix/wix-ui-icons-common/lazy';
 import { observer } from 'mobx-react-lite';
 import { MultiLevelSortingColumnSelect } from './MultiLevelSortingColumnSelect';
 import { MultiLevelSortingOrderSelect } from './MultiLevelSortingOrderSelect';
@@ -8,6 +8,7 @@ import { GridCardItemProps } from '../DragAndDrop';
 import { MultiLevelSortingState, SortableColumn } from '../../state';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MultiLevelSortingTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
@@ -33,6 +34,7 @@ function _MultiLevelSortingTableListItem<T, F extends FiltersMap>(
     ...rest
   } = props;
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <div
@@ -42,8 +44,11 @@ function _MultiLevelSortingTableListItem<T, F extends FiltersMap>(
     >
       <TableListItem
         verticalPadding="tiny"
+        horizontalPadding={isHarmonyTheme ? 'tiny' : undefined}
         draggable={draggable}
         dragging={dragging}
+        dragHandleSize={isHarmonyTheme ? 'small' : undefined}
+        dragHandleProps={isHarmonyTheme ? dragHandleProps : undefined}
         showDivider={showDivider}
         options={[
           {
@@ -71,7 +76,8 @@ function _MultiLevelSortingTableListItem<T, F extends FiltersMap>(
                   <IconButton
                     dataHook="multi-level-sorting-remove-sort"
                     size="small"
-                    skin="light"
+                    skin={isHarmonyTheme ? 'dark' : 'light'}
+                    priority={isHarmonyTheme ? 'tertiary' : undefined}
                     onClick={() => {
                       state.removeSort(sortableColumn.columnId);
                     }}

package/src/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.tsx

@@ -9,6 +9,7 @@ import { KeyedItem } from '@wix/bex-core';
 import { DropdownSelectState } from '../../state';
 import { FilterProps } from '../../model';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { useDropdownTranslationContext } from '../../providers';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
@@ -52,6 +53,7 @@ function _MultiSelectCheckboxFilterBase<V>(
   const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
     popoverProps,
   });
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <MultiSelectCheckbox
@@ -59,7 +61,8 @@ function _MultiSelectCheckboxFilterBase<V>(
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border="round"
+      border={isBmHarmonyTheme ? 'standard' : 'round'}
+      size={isBmHarmonyTheme ? 'small' : undefined}
       textOverflow="ellipsis"
       options={options}
       placeholder={placeholder ?? translate('placeholder')}

package/src/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx

@@ -14,6 +14,7 @@ import { DropdownSelectState } from '../../state';
 import { FilterProps } from '../../model';
 import { useFilterRenderingContext } from '../FilterRenderingContext';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { useDropdownTranslationContext } from '../../providers';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
@@ -59,6 +60,7 @@ function _MultiSelectCheckboxFilterBase<V>(
   const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
     popoverProps,
   });
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const effectiveSize: InputSize =
     size || (location === 'panel' ? 'small' : 'medium');
@@ -85,10 +87,10 @@ function _MultiSelectCheckboxFilterBase<V>(
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border="round"
+      border={isBmHarmonyTheme ? 'standard' : 'round'}
       placeholder={translate('placeholder')}
       tags={tags}
-      size={size}
+      size={isBmHarmonyTheme ? effectiveSize : size}
       onClose={() => {
         dropdownSelect.close();
       }}

package/src/components/NestedTable/NestedTableMainColumnTitle.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {
   ChevronCollapseSmall,
   ChevronExpandSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { Box, TextButton, Tooltip } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 

package/src/components/NestedTable/NestedTableParentCell.tsx

@@ -6,7 +6,7 @@ import {
   NestedTableNodeState,
 } from '../../state/NestedTableState/NestedTableNodeState';
 import { Box, TextButton } from '@wix/design-system';
-import { ChevronRightSmall } from '@wix/wix-ui-icons-common';
+import { ChevronRightSmall } from '@wix/wix-ui-icons-common/lazy';
 import { Rotate } from '../Rotate';
 import { MainCellLayout } from './MainCellLayout';
 import type { NestedTableDragAndDrop } from '../NestedTableDragAndDrop/NestedTableDragAndDrop';

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow419327296";
+var _namespace_ = "NestedTablePlaceholderStatesRow875267755";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow419327296__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow875267755__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow1478356820";
+var _namespace_ = "NestedTableRow836910914";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow1478356820__root","firstLevel":"NestedTableRow1478356820__firstLevel","placeholder":"NestedTableRow1478356820__placeholder","parentHovered":"NestedTableRow1478356820__parentHovered"};
+export var classes = {"root":"NestedTableRow836910914__root","firstLevel":"NestedTableRow836910914__firstLevel","placeholder":"NestedTableRow836910914__placeholder","parentHovered":"NestedTableRow836910914__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/DepthLimitMessage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { NestedTableDragAndDropState } from './NestedTableDragAndDropState';
 import { Tag } from '@wix/design-system';
-import { BlockSmall } from '@wix/wix-ui-icons-common';
+import { BlockSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export interface NestedTableDragAndDropDropMessageProps<C extends string> {
   state: NestedTableDragAndDropState<C>;

package/src/components/NestedTableDragAndDrop/DragAndDropDisabledMessage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tag } from '@wix/design-system';
-import { BlockSmall } from '@wix/wix-ui-icons-common';
+import { BlockSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export interface DragAndDropDisabledMessageProps {
   message: string;

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect1868700924";
+var _namespace_ = "MultipleDragOverlayEffect927374861";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect1868700924__root"};
+export var classes = {"root":"MultipleDragOverlayEffect927374861__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow2309849426";
+var _namespace_ = "NestedTableDragAndDropRow915281379";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow2309849426__root"};
+export var classes = {"root":"NestedTableDragAndDropRow915281379__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NumberRangeFilter/NumberRangeFilter.tsx

@@ -4,6 +4,7 @@ import { FieldSet, FormField, NumberInput } from '@wix/design-system';
 import { FilterProps } from '../../model';
 import type { RangeItem } from '@wix/bex-core';
 import { useNumberRangeFilter } from './useNumberRangeFilter';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface NumberRangeFilterProps extends FilterProps<RangeItem<number>> {
   decimal?: boolean;
@@ -33,6 +34,8 @@ function NumberRangeFilter({
     max,
   });
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   return (
     <FieldSet
       dataHook={`number-range-filter-${filter.name}`}
@@ -54,7 +57,8 @@ function NumberRangeFilter({
           value={fromValue ?? ''}
           onChange={(value) => handleInputChange({ from: value, isFrom: true })}
           dataHook="number-range-filter-from-input"
-          size="medium"
+          size={isBmHarmonyTheme ? 'small' : 'medium'}
+          border={isBmHarmonyTheme ? 'standard' : undefined}
         />
       </FormField>
       <FormField
@@ -68,7 +72,8 @@ function NumberRangeFilter({
           value={toValue ?? ''}
           onChange={(value) => handleInputChange({ to: value, isFrom: false })}
           dataHook="number-range-filter-to-input"
-          size="medium"
+          size={isBmHarmonyTheme ? 'small' : 'medium'}
+          border={isBmHarmonyTheme ? 'standard' : undefined}
         />
       </FormField>
     </FieldSet>

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -18,8 +18,9 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useOperatorFilterState } from '../../hooks/useOperatorFilterState';
 import { FilterProps } from '../../model';
-import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import { renderOperatorFilterToolbarTag } from './renderOperatorFilterToolbarTag';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface OperatorPickerProps<T>
   extends FilterProps<OperatorFilterValue<T>> {}
@@ -27,6 +28,7 @@ export interface OperatorPickerProps<T>
 function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
   const { filter } = props;
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const filterState = filter as OperatorFilterState<T>;
   const allowedOperators = filterState.allowedOperators;
@@ -56,6 +58,7 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
       id: op,
       title: t(getOperatorLabel(op)),
       label: t(getOperatorLabel(op)),
+      ...(isBmHarmonyTheme ? { size: 'small' as const } : {}),
     }),
   );
 
@@ -66,6 +69,7 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
       dataHook={`operator-picker-${filter.name}`}
       direction="vertical"
       gap="12px"
+      style={isBmHarmonyTheme ? { width: '100%' } : undefined}
     >
       <FormField>
         <DropdownBase
@@ -76,6 +80,7 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
           appendTo="window"
           flip
           placement="bottom-start"
+          minWidth={isBmHarmonyTheme ? 0 : undefined}
         >
           {({ toggle }) => (
             <TextButton
@@ -94,7 +99,8 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
       {showValueInput && (
         <FormField>
           <Input
-            border="round"
+            border={isBmHarmonyTheme ? 'standard' : 'round'}
+            size={isBmHarmonyTheme ? 'small' : undefined}
             value={state.value?.toString() || ''}
             placeholder={t('cairo.filterOperator.valuePlaceholder')}
             onChange={(e) => state.setValue(e.target.value as T)}

package/src/components/PageErrorState/PageErrorState.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 import { LoadingErrorState } from '../ErrorState';
 import { Page, PageProps } from '@wix/design-system';
 import { PageErrorStateIllustration } from './PageErrorStateIllustration';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 
 export interface PageErrorStateProps extends PageProps {
   /**

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3692401186";
+var _namespace_ = "PickerContent3826816446";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent3692401186__root"};
+export var classes = {"root":"PickerContent3826816446__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.tsx

@@ -9,6 +9,7 @@ import { PickerContentWrapped } from './PickerContentWrapped';
 import { PickerContentItemsSelectionProps } from './PickerContentItemsSelection';
 import { SelectorListContentProps } from '@wix/design-system';
 import { PickerContentAdditionalStepProps } from './PickerContentAdditionalStep';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface PickerContentComponentBaseProps<T, F extends FiltersMap>
   extends PickerContentItemsSelectionProps<T, F>,
@@ -47,6 +48,7 @@ export function PickerContent<T, F extends FiltersMap>(
   props: PickerContentProps<T, F>,
 ) {
   const { modalState } = props;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   // wrap with a new WixPatternsContainer that can get initialProps
   return (
@@ -55,6 +57,7 @@ export function PickerContent<T, F extends FiltersMap>(
         {...props}
         renderPickerContent={({ state, renderItem }) => (
           <PickerSelectorListContent
+            size={isBmHarmonyTheme ? 'small' : undefined}
             {...props.selectorListProps}
             state={state}
             multiple={fromMultipleSelectionToBoolean(props.multiple)}

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep363356966";
+var _namespace_ = "PickerContentAdditionalStep2799604641";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep363356966__root","titles":"PickerContentAdditionalStep363356966__titles","suffix":"PickerContentAdditionalStep363356966__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2799604641__root","titles":"PickerContentAdditionalStep2799604641__titles","suffix":"PickerContentAdditionalStep2799604641__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};