@wix/patterns 1.430.0 → 1.431.0

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -18,6 +18,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
 import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 const FILTER_SEARCH_THRESHOLD = 7;
 
@@ -62,6 +63,8 @@ function _FiltersPanel<T, F extends FiltersMap>(
     location: 'panel' as const,
   }));
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   const [wsrDefaults] = useState(() => ({
     input: {
       size: 'small' as const,
@@ -96,7 +99,7 @@ function _FiltersPanel<T, F extends FiltersMap>(
         }
       >
         {showSearch && (
-          <Box padding="0 SP2 SP2 SP2">
+          <Box padding={isBmHarmonyTheme ? '0 SP4 SP2 SP4' : '0 SP2 SP2 SP2'}>
             <FiltersPanelSearch state={filtersPanelState} />
           </Box>
         )}
@@ -114,6 +117,8 @@ function _FiltersPanel<T, F extends FiltersMap>(
             skin="light"
             hideShadow
             multiple
+            size={isBmHarmonyTheme ? 'tiny' : undefined}
+            horizontalPadding={isBmHarmonyTheme ? 'small' : undefined}
             items={accordionItems}
           />
         )}

package/src/components/FiltersPanel/FiltersPanelFooter.tsx

@@ -4,6 +4,7 @@ import { ToolbarCollectionState } from '../../state';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { FiltersPanelAppliedFiltersSection } from './FiltersPanelAppliedFiltersSection';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FiltersPanelFooterProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -14,6 +15,7 @@ function _FiltersPanelFooter<T, F extends FiltersMap>(
   props: FiltersPanelFooterProps<T, F>,
 ) {
   const { state, onClearButtonClicked } = props;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const FiltersPanelSelectedFiltersSection =
     state.AddApplyFiltersButton?.FiltersPanelSelectedFiltersSection;
@@ -21,8 +23,8 @@ function _FiltersPanelFooter<T, F extends FiltersMap>(
   return (
     <Box
       gap="SP2"
-      paddingTop="SP3"
-      paddingBottom="SP3"
+      paddingTop={isBmHarmonyTheme ? 'SP4' : 'SP3'}
+      paddingBottom={isBmHarmonyTheme ? 'SP4' : 'SP3'}
       paddingLeft="SP4"
       paddingRight="SP4"
       verticalAlign="middle"

package/src/components/FiltersPanel/FiltersPanelSearch.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { FiltersPanelState } from './FiltersPanelState';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FiltersPanelSearchProps<T, F extends FiltersMap> {
   state: FiltersPanelState<T, F>;
@@ -13,11 +14,13 @@ function _FiltersPanelSearch<T, F extends FiltersMap>({
   state,
 }: FiltersPanelSearchProps<T, F>) {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Search
       dataHook="filters-panel-search"
       size="small"
+      border={isBmHarmonyTheme ? 'standard' : undefined}
       value={state.searchValue}
       onChange={(e) => state.setSearchValue(e.target.value)}
       onClear={() => state.clearSearch()}

package/src/components/FormPage/FormPageActionsBar.tsx

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react-lite';
 import { MoreActionsElement } from '../MoreActions';
 import { ActionsBarConfig, ctaKeys } from '@wix/bex-core';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FormPageActionsBarProps {
   moreActions?: MoreActionsElement;
@@ -23,6 +24,7 @@ export function _FormPageActionsBar({
   const { translate: t, initTask } = useWixPatternsContainer();
   const state = useFormPageContext();
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   if (!initTask.status.isSuccess) {
     return null;
@@ -34,7 +36,7 @@ export function _FormPageActionsBar({
       <Button
         priority="secondary"
         fullWidth={isMobile}
-        size={isMobile ? 'small' : 'medium'}
+        size={isBmHarmonyTheme || isMobile ? 'small' : 'medium'}
         dataHook="form-page-cancel-btn"
         onClick={onCancel}
       >
@@ -42,7 +44,7 @@ export function _FormPageActionsBar({
       </Button>
       <Button
         fullWidth={isMobile}
-        size={isMobile ? 'small' : 'medium'}
+        size={isBmHarmonyTheme || isMobile ? 'small' : 'medium'}
         dataHook="form-page-save-btn"
         onClick={onSave}
       >

package/src/components/Grid/useGridItemActions.tsx

@@ -9,7 +9,7 @@ import {
   PopoverMenu,
   PopoverMenuItemProps,
 } from '@wix/design-system';
-import { More } from '@wix/wix-ui-icons-common';
+import { More } from '@wix/wix-ui-icons-common/lazy';
 import { DisabledActionCellMenu } from '../ActionCell/DisabledActionCellMenu';
 import {
   createPrimaryActionCellPropsWithBI,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading3915340741";
+var _namespace_ = "Heading3951898647";
 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":"Heading3915340741__root"};
+export var classes = {"root":"Heading3951898647__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportButton.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { FiltersMap, ModalState } from '@wix/bex-core';
 import { Button, Drawer, Modal } from '@wix/design-system';
-import { DownloadImport } from '@wix/wix-ui-icons-common/lazy';
+import {
+  DownloadImport,
+  DownloadImportSmall,
+} from '@wix/wix-ui-icons-common/lazy';
 import { observer, Observer } from 'mobx-react-lite';
 import { ImportButtonModalLayout } from './ImportButtonModalLayout';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -9,6 +12,7 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ImportButtonProps } from './ImportProps';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
   const { toolbarType = 'default', config, renderFieldEditor } = props;
@@ -21,6 +25,12 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
   const { translate: t } = useWixPatternsContainer();
   const [state] = useState(() => (table.importState ??= new ModalState()));
   const isMobile = useIsMobile();
+  const isHarmonyTheme = useBmHarmonyTheme();
+  const importIcon = isHarmonyTheme ? (
+    <DownloadImportSmall />
+  ) : (
+    <DownloadImport />
+  );
 
   useEffect(() => {
     table.featuredComponents.importModal.set(
@@ -71,7 +81,7 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
           state={responsive.actions}
           dataHook="import-button"
           onClick={state.open}
-          icon={<DownloadImport />}
+          icon={importIcon}
         >
           {t('cairo.import.import')}
         </ResponsiveButton>
@@ -81,7 +91,7 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
           priority="secondary"
           size="small"
           ellipsis
-          prefixIcon={<DownloadImport />}
+          prefixIcon={importIcon}
           dataHook="import-button"
           onClick={state.open}
         >

package/src/components/ImportButton/ImportIdCollisionControl.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, TextButton, PopoverMenu } from '@wix/design-system';
-import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import { ImportState, WritePolicy } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';

package/src/components/ImportButton/ImportRequiredFieldsSideNote.tsx

@@ -2,7 +2,7 @@ import { Box, Text, Tooltip } from '@wix/design-system';
 import {
   StatusAlertFilledSmall,
   InfoCircleSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { ImportState } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -9,7 +9,7 @@ import {
   listItemSelectBuilder,
   SectionHelper,
 } from '@wix/design-system';
-import { Add, ArrowRight } from '@wix/wix-ui-icons-common';
+import { Add, ArrowRight } from '@wix/wix-ui-icons-common/lazy';
 import { ImportState, NewFieldType } from '@wix/bex-core';
 import { useTranslations } from '@wix/patterns-fields';
 import React from 'react';

package/src/components/ImportButton/ImportStepSummary.tsx

@@ -2,7 +2,7 @@ import { Box, Text } from '@wix/design-system';
 import {
   StatusAlertFilled,
   StatusCompleteFilled,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { ImportState } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1386334335";
+var _namespace_ = "ImportStepUpload1021181682";
 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":"ImportStepUpload1386334335__root","fileUpload":"ImportStepUpload1386334335__fileUpload"};
+export var classes = {"root":"ImportStepUpload1021181682__root","fileUpload":"ImportStepUpload1021181682__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepper.tsx

@@ -21,13 +21,11 @@ function getStepperSteps(currentStep: ImportStep, t: ImportState['translate']) {
     { text: t('cairo.import.stepper.matchFields') },
   ].map((step, index) => ({
     ...step,
-    type: (
-      index < activeIndex
-        ? 'completed'
-        : index > activeIndex
-          ? 'disabled'
-          : 'normal'
-    ) as 'completed' | 'disabled' | 'normal',
+    type: (index < activeIndex
+      ? 'completed'
+      : index > activeIndex
+      ? 'disabled'
+      : 'normal') as 'completed' | 'disabled' | 'normal',
   }));
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow1073409881";
+var _namespace_ = "InputOverflow2881700459";
 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":"InputOverflow1073409881__root"};
+export var classes = {"root":"InputOverflow2881700459__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Kanban/StageActions.tsx

@@ -5,7 +5,7 @@ import {
   PopoverMenuItemProps,
 } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { MoreSmall } from '@wix/wix-ui-icons-common/lazy';
 import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
 import { SecondaryActionAction } from '../ActionCell';
 import { FiltersMap } from '../../exports/core';

package/src/components/Kanban/useCardActions.tsx

@@ -10,7 +10,7 @@ import {
   PopoverMenuItemProps,
 } from '@wix/design-system';
 import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { MoreSmall } from '@wix/wix-ui-icons-common/lazy';
 import { DisabledActionCellMenu } from '../ActionCell/DisabledActionCellMenu';
 import {
   createKanbanPrimaryActionCellPropsWithBI,

package/src/components/LayoutSwitch/LayoutSwitch.uni.driver.ts

@@ -25,11 +25,13 @@ export function LayoutSwitchUniDriver(base: UniDriver, body: UniDriver) {
     isShowingSpreadsheet: () =>
       base.$('[data-hook="layout-view-spreadsheet"]').exists(),
     /** Get Table driver */
-    getTable: () => TableUniDriver(base, body),
+    getTable: (): ReturnType<typeof TableUniDriver> =>
+      TableUniDriver(base, body),
     /** Get Grid driver */
-    getGrid: () => GridUniDriver(base, body),
+    getGrid: (): ReturnType<typeof GridUniDriver> => GridUniDriver(base, body),
     /** Get Spreadsheet (EditableTable) driver */
-    getSpreadsheet: () => EditableTableUniDriver(base, body),
+    getSpreadsheet: (): ReturnType<typeof EditableTableUniDriver> =>
+      EditableTableUniDriver(base, body),
   };
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow491026576";
+var _namespace_ = "LoadingRow3544261193";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow491026576__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow491026576__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3544261193__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3544261193__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3754196047";
+var _namespace_ = "MaxHeightText2140070545";
 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":"MaxHeightText3754196047__root"};
+export var classes = {"root":"MaxHeightText2140070545__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines3268543179";
+var _namespace_ = "MaxLines4019853602";
 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":"MaxLines3268543179__root"};
+export var classes = {"root":"MaxLines4019853602__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxSelection.tsx

@@ -1,6 +1,7 @@
 import { CollectionState, Translate } from '@wix/bex-core';
 import React from 'react';
 import { Text } from '@wix/design-system';
+import { useBmHarmonyTheme } from '../hooks/useBmHarmonyTheme';
 
 export type MultipleSelection = boolean | number;
 
@@ -54,7 +55,7 @@ export type MaxSelectionLabelProps = {
 
 export function BulkSelectionMaxSelectionLabel(props: MaxSelectionLabelProps) {
   const { selectedCount, t, multiple, dataHook } = props;
-
+  const isHarmonyBmTheme = useBmHarmonyTheme();
   const maxSelectedItems = maxSelectedItemsFromMultipleSelection(multiple);
 
   let text;
@@ -81,7 +82,11 @@ export function BulkSelectionMaxSelectionLabel(props: MaxSelectionLabelProps) {
   }
 
   return (
-    <Text dataHook={dataHook} secondary>
+    <Text
+      dataHook={dataHook}
+      size={isHarmonyBmTheme ? 'small' : undefined}
+      secondary
+    >
       {text}
     </Text>
   );

package/src/components/MoreActions/ExploreAppsState.tsx

@@ -3,7 +3,7 @@ import { ReportProps } from '@wix/fe-essentials/bi';
 import { action, makeObservable, observable } from 'mobx';
 import { wixPatternsAppWasInstalledSrc144Evid200 } from '@wix/bex-core/bi';
 import { ExploreAppsModal } from './ExploreAppsModal';
-import { RelatedApps } from '@wix/wix-ui-icons-common';
+import { RelatedApps } from '@wix/wix-ui-icons-common/lazy';
 
 export interface ExploreAppsModalProps {
   title: string;

package/src/components/MoreActions/MoreActionsIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, IconButton, Tooltip } from '@wix/design-system';
-import { More } from '@wix/wix-ui-icons-common';
+import { More } from '@wix/wix-ui-icons-common/lazy';
 import { observer } from 'mobx-react-lite';
 import { MoreActionsBase } from './MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';

package/src/components/MoreActions/MoreActionsText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@wix/design-system';
-import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import { observer } from 'mobx-react-lite';
 import { MoreActionsBase } from './MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar4197357314";
+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":"MultiBulkActionToolbar4197357314__root","leftGroupWrapper":"MultiBulkActionToolbar4197357314__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4197357314__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4197357314__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/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

@@ -61,7 +61,8 @@ function _MultiSelectCheckboxFilterBase<V>(
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border={isBmHarmonyTheme ? undefined : 'round'}
+      border={isBmHarmonyTheme ? 'standard' : 'round'}
+      size={isBmHarmonyTheme ? 'small' : undefined}
       textOverflow="ellipsis"
       options={options}
       placeholder={placeholder ?? translate('placeholder')}

package/src/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx

@@ -87,10 +87,10 @@ function _MultiSelectCheckboxFilterBase<V>(
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border={isBmHarmonyTheme ? undefined : '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';