@wix/patterns 1.427.0 → 1.431.0

package/src/components/ActionControl/ActionPopover.tsx

@@ -6,7 +6,7 @@ import React, {
   MutableRefObject,
   RefObject,
 } from 'react';
-import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import {
   ActionSubItemPrivate,
   ActionSubitemLabelPrivate,
@@ -103,7 +103,6 @@ export function ActionPopover(props: {
             dataHook={dataHook ? `${dataHook}-tooltip` : undefined}
           >
             <Button
-              skin="standard"
               priority={priority}
               size={size}
               fullWidth={fullWidth}

package/src/components/AppliedFiltersTagList/AppliedFiltersTagListState.tsx

@@ -15,6 +15,7 @@ import groupBy from 'lodash/groupBy';
 import { FilterTagContent } from './FilterTagContent';
 import React from 'react';
 import { FilterProps } from '../../model';
+import { BM_HARMONY_THEME_EXPERIMENT } from '../../hooks/useBmHarmonyTheme';
 
 export interface FilterTagValue<V> {
   id: string;
@@ -201,11 +202,18 @@ export class AppliedFiltersTagListState<T, F extends FiltersMap> {
         filter,
         values: [value],
         maxWidth: this.maxWidth,
+        ...(this.isBmHarmonyTheme ? { skin: 'neutral' as const } : {}),
         ...filterProps?.renderToolbarTag?.(value),
       };
     });
   }
 
+  private get isBmHarmonyTheme() {
+    return this.table.container.experiments.enabled(
+      BM_HARMONY_THEME_EXPERIMENT,
+    );
+  }
+
   private generateAggregatedTag<V>(
     filterValuesGroup: FilterTagValue<V>[],
     filterProps?: FilterProps<V>,
@@ -227,6 +235,7 @@ export class AppliedFiltersTagListState<T, F extends FiltersMap> {
       filter: filterValuesGroup[0].filter,
       values: filterValuesGroup.map(({ value }) => value),
       maxWidth: this.maxWidth,
+      ...(this.isBmHarmonyTheme ? { skin: 'neutral' as const } : {}),
     };
   }
 }

package/src/components/ArchivedItemsPanel/ArchivedItemsCTAButton.tsx

@@ -12,10 +12,11 @@ import React, {
   lazy,
   Suspense,
 } from 'react';
-import { Archive, ChevronRight } from '@wix/wix-ui-icons-common';
+import { Archive, ChevronRight } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import type { DeleteFieldModalState, FieldArchive } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 // Lazy load the ArchivedItemsPanel - only loads when panel is opened
 const ArchivedItemsPanel = lazy(() =>
@@ -40,6 +41,7 @@ function _ArchivedItemsCTAButton({
   actionContainerProps,
 }: ArchivedItemsCTAButtonProps) {
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const style = useMemo<CSSProperties>(
     () => ({
@@ -68,9 +70,9 @@ function _ArchivedItemsCTAButton({
       <TableListItem
         onClick={handleOpenArchivedPanel}
         dataHook={`${dataHook}-archived-items-button`}
-        showDivider
+        showDivider={!isHarmonyTheme}
         verticalPadding="tiny"
-        horizontalPadding="small"
+        horizontalPadding={isHarmonyTheme ? 'tiny' : 'small'}
         options={[
           {
             value: (
@@ -85,7 +87,11 @@ function _ArchivedItemsCTAButton({
           {
             value: (
               <Box {...actionContainerProps}>
-                <IconButton size="tiny" skin="light">
+                <IconButton
+                  size="tiny"
+                  skin={isHarmonyTheme ? 'dark' : 'light'}
+                  priority={isHarmonyTheme ? 'tertiary' : undefined}
+                >
                   <ChevronRight />
                 </IconButton>
               </Box>

package/src/components/ArchivedItemsPanel/ArchivedItemsList.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Box } from '@wix/design-system';
 import { ArchivedItemsListItem } from './ArchivedItemsListItem';
 import type { ArchivedItem } from './types';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface ArchivedItemsListProps {
   items: ArchivedItem[];
@@ -16,17 +17,15 @@ export function _ArchivedItemsList({
   onDelete,
   dataHook = 'custom-columns',
 }: ArchivedItemsListProps) {
+  const isHarmonyTheme = useBmHarmonyTheme();
+
   return (
-    <Box
-      direction="vertical"
-      dataHook={`${dataHook}-archived-items-list`}
-      backgroundColor="D60"
-    >
+    <Box direction="vertical" dataHook={`${dataHook}-archived-items-list`}>
       {items.map((item, index) => (
         <ArchivedItemsListItem
           key={item.id}
           item={item}
-          showDivider={index < items.length - 1}
+          showDivider={isHarmonyTheme ? false : index < items.length - 1}
           onRestore={onRestore}
           onDelete={onDelete}
           dataHook={dataHook}

package/src/components/ArchivedItemsPanel/ArchivedItemsListItem.tsx

@@ -12,9 +12,10 @@ import {
   LockLockedFilledSmall,
   MoreSmall,
   UndoSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
 import type { ArchivedItem } from './types';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface ArchivedItemsListItemProps {
   item: ArchivedItem;
@@ -33,13 +34,14 @@ function _ArchivedItemsListItem({
 }: ArchivedItemsListItemProps) {
   const { translate: t } = useWixPatternsContainer();
   const { stackingRootRef } = usePageContext();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const isPii = item.isPii;
   const style = useMemo<CSSProperties>(
     () => ({
-      padding: '0 6px',
+      ...(isHarmonyTheme ? {} : { padding: '0 6px' }),
       wordBreak: 'break-word',
     }),
-    [],
+    [isHarmonyTheme],
   );
 
   const moreActionsButton = (
@@ -53,7 +55,8 @@ function _ArchivedItemsListItem({
           <IconButton
             size="tiny"
             dataHook={`${dataHook}-archived-item-options-trigger`}
-            skin="light"
+            skin={isHarmonyTheme ? 'dark' : 'light'}
+            priority={isHarmonyTheme ? 'tertiary' : undefined}
           >
             <MoreSmall />
           </IconButton>
@@ -79,6 +82,8 @@ function _ArchivedItemsListItem({
   return (
     <TableListItem
       showDivider={showDivider}
+      verticalPadding={isHarmonyTheme ? 'tiny' : undefined}
+      horizontalPadding={isHarmonyTheme ? 'medium' : undefined}
       data-hook={`${dataHook}-archived-item-${item.id}`}
       options={[
         {
@@ -87,7 +92,7 @@ function _ArchivedItemsListItem({
               <div style={style}>
                 <Text
                   size="small"
-                  weight="normal"
+                  weight={isHarmonyTheme ? 'thin' : 'normal'}
                   dataHook={`${dataHook}-archived-item-label`}
                 >
                   {item.label || item.id}

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

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

package/src/components/CardContainer/CardContainer.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { SkeletonCard } from '../SkeletonCard';
 import { ErrorCard, ErrorCardProps } from '../ErrorCard';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { Refresh as RefreshIcon } from '@wix/wix-ui-icons-common';
+import { Refresh as RefreshIcon } from '@wix/wix-ui-icons-common/lazy';
 import { st, classes } from './CardContainer.st.css.js';
 import { useIsMobile } from '../../hooks/useIsMobile';
 

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm3042240542";
+var _namespace_ = "CmsFieldForm3700105093";
 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":"CmsFieldForm3042240542__root","fullBleedDivider":"CmsFieldForm3042240542__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm3700105093__root","fullBleedDivider":"CmsFieldForm3700105093__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2556807168";
+var _namespace_ = "CmsFieldModal2185190114";
 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":"CmsFieldModal2556807168__root","modal":"CmsFieldModal2556807168__modal"};
+export var classes = {"root":"CmsFieldModal2185190114__root","modal":"CmsFieldModal2185190114__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection1569807852";
+var _namespace_ = "ValidationAndDefaultsSection2668938222";
 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":"ValidationAndDefaultsSection1569807852__root","accordionWrapper":"ValidationAndDefaultsSection1569807852__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2668938222__root","accordionWrapper":"ValidationAndDefaultsSection2668938222__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput1811547721";
+var _namespace_ = "CharactersLimitInput3709322953";
 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":"CharactersLimitInput1811547721__root","field":"CharactersLimitInput1811547721__field"};
+export var classes = {"root":"CharactersLimitInput3709322953__root","field":"CharactersLimitInput3709322953__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1149681514";
+var _namespace_ = "Collapse2929374578";
 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":"Collapse1149681514__root","exit":"Collapse1149681514__exit"};
+export var classes = {"root":"Collapse2929374578__root","exit":"Collapse2929374578__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionActionsBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, IconButton } 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';
 
 export const CollectionActionsBar = observer(() => {

package/src/components/CollectionAutoComplete/CollectionAutoComplete.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../providers';
 import { FilterProps } from '../../model';
 import { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { AutoCompleteFilterState } from '../AutoCompleteFilter/AutoCompleteFilterState';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
@@ -64,6 +65,7 @@ function _CollectionAutoComplete<V, F extends FiltersMap>(
 
   const container = useWixPatternsContainer();
   const toolbar = useFilterToolbarState();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const [collectionFilter] = useState(
     () =>
@@ -114,7 +116,8 @@ function _CollectionAutoComplete<V, F extends FiltersMap>(
     <AutoComplete
       dataHook={`collection-filter-${filter.name}`}
       closeOnSelect
-      border="round"
+      border={isBmHarmonyTheme ? 'standard' : 'round'}
+      size={isBmHarmonyTheme ? 'small' : undefined}
       options={options}
       onClose={() => {
         state.dropdown.dropdownSelect.close();

package/src/components/CollectionItemActions/CollectionItemActions.tsx

@@ -15,6 +15,7 @@ import {
 import { getDefaultActionCellProps } from './getDefaultActionCellProps';
 import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CollectionItemActionsProps<
   T,
@@ -30,6 +31,7 @@ function _CollectionItemActions<T, F extends FiltersMap = FiltersMap>({
   renderActionCell,
 }: CollectionItemActionsProps<T, F>) {
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const { confirmModal } = state;
   const toolbarState = useToolbarCollectionContext();
@@ -117,6 +119,14 @@ function _CollectionItemActions<T, F extends FiltersMap = FiltersMap>({
       <TableActionCell
         dataHook="collection-action-cell"
         {...tableActionCellProps}
+        moreActionsProps={
+          isBmHarmonyTheme
+            ? {
+                ...tableActionCellProps.moreActionsProps,
+                priority: 'tertiary',
+              }
+            : tableActionCellProps.moreActionsProps
+        }
         popoverMenuProps={{
           ...getDefaultActionCellProps(),
           onShow: () =>

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

package/src/components/CollectionSearch.tsx

@@ -10,6 +10,7 @@ import React, {
 import { FiltersMap } from '@wix/bex-core';
 import { useCollectionContext } from '@wix/bex-core/react';
 import { useIsMobile } from '../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../hooks/useBmHarmonyTheme';
 
 export interface CollectionSearchProps extends Partial<SearchProps> {
   onSearchChange?: (value: string) => unknown;
@@ -36,6 +37,7 @@ export const CollectionSearch = observer(function CollectionSearch<
   } = collection;
 
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const [isSearchExpanded, setIsSearchExpanded] = useState(!!search.value);
 
   const searchInputRef = useRef<Search>(null);
@@ -81,6 +83,7 @@ export const CollectionSearch = observer(function CollectionSearch<
       expandable={expandable}
       expandDirection={isMobile ? 'left' : undefined}
       placeholder={t('cairo.searchPlaceholder', { defaultValue: '' })}
+      border={isBmHarmonyTheme ? 'standard' : undefined}
       textOverflow="ellipsis"
       onFocus={() => {
         setIsSearchExpanded(true);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader2589279026";
+var _namespace_ = "CollectionSectionHeader2922683827";
 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":"CollectionSectionHeader2589279026__root","summaryIcon":"CollectionSectionHeader2589279026__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2922683827__root","summaryIcon":"CollectionSectionHeader2922683827__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeaderActionBar.tsx

@@ -7,7 +7,7 @@ import {
   wixPatternsSectionHeaderPrimaryActionClicked,
   cairoSectionCtaClicked,
 } from '@wix/bex-core/bi';
-import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
+import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 
 export interface CollectionSectionHeaderActionBarProps {
   sectionId: string;

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

package/src/components/CollectionToolbar/CollectionToolbar.st.css

@@ -1,5 +1,12 @@
 .root {
-  -st-states: views, mobile, responsiveMode(enum(title, views, tabs, disabled));
+  -st-states: views, mobile, harmony,
+    responsiveMode(enum(title, views, tabs, disabled));
+}
+
+/* Harmony spacing comes from the flex gap on the overflow box (8px);
+   drop the built-in 12px margin WDS TableToolbar.Item adds on top of it */
+.root:harmony .right :global([data-hook='horizontal-overflow-box']) > * {
+  margin-inline-start: 0;
 }
 
 .left {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2410956896";
+var _namespace_ = "CollectionToolbar4248294874";
 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":"CollectionToolbar2410956896__root","left":"CollectionToolbar2410956896__left","right":"CollectionToolbar2410956896__right","fullWidth":"CollectionToolbar2410956896__fullWidth"};
+export var classes = {"root":"CollectionToolbar4248294874__root","right":"CollectionToolbar4248294874__right","left":"CollectionToolbar4248294874__left","fullWidth":"CollectionToolbar4248294874__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -24,6 +24,7 @@ import {
   ToolbarBaseProps,
   ToolbarCollectionBaseProps,
 } from '../ToolbarCollection';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { useCollectionToolbarSyncedProps } from './useCollectionToolbarSyncedProps';
 import { useIsCollectionToolbarExists } from './useIsCollectionToolbarExists';
 import { CollectionToolbarActionsToolbarItemsGroup } from './CollectionToolbarActionsToolbarItemsGroup';
@@ -205,7 +206,10 @@ function _CollectionToolbar<T, F extends FiltersMap>(
       'specs.cairo.layout-toggle.redesign',
     );
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   const shouldAddDivider =
+    !isBmHarmonyTheme &&
     !isLayoutToggleRedesignEnabled &&
     tableGridSwitchButton &&
     (searchElement || MoreFiltersButton);

package/src/components/CollectionToolbar/PrimaryActionButton.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react';
 import { Button, ButtonProps } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useSelector } from '../../useSelector';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface PrimaryActionButtonProps
   extends Omit<ButtonProps, 'size' | 'fullWidth' | 'dataHook' | 'skin' | 'as'> {
@@ -18,7 +19,8 @@ export const PrimaryActionButton = forwardRef<Button, PrimaryActionButtonProps>(
   (props, ref) => {
     const { translate: t, initTask } = useWixPatternsContainer();
     const { toolbarBIReporter } = useToolbarCollectionContext();
-    const { priority = 'primary' } = props;
+    const isBmHarmonyTheme = useBmHarmonyTheme();
+    const { priority = isBmHarmonyTheme ? 'secondary' : 'primary' } = props;
 
     useSelector(() => initTask.status);
 
@@ -41,7 +43,7 @@ export const PrimaryActionButton = forwardRef<Button, PrimaryActionButtonProps>(
           t('cairo.collectionsPage.add.item.CTA', { defaultValue: '' })}
       </Button>
     );
-  }
+  },
 );
 
 PrimaryActionButton.displayName = 'PrimaryActionButton';

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3988720065";
+var _namespace_ = "SearchOrCustomFilter4202859381";
 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":"SearchOrCustomFilter3988720065__root","search":"SearchOrCustomFilter3988720065__search","searchMobile":"SearchOrCustomFilter3988720065__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter4202859381__root","search":"SearchOrCustomFilter4202859381__search","searchMobile":"SearchOrCustomFilter4202859381__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/ToolbarOverflowMenu.tsx

@@ -18,7 +18,7 @@ import {
   ChevronLeft,
   DataCollection,
   MoreSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { ViewTypeState } from '../../state/ViewTypeState';
 import {

package/src/components/CollectionToolbar/useToolbarOverflowItems.ts

@@ -12,7 +12,7 @@ import {
   ChangeOrder,
   UploadExport,
   DownloadImport,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 export interface ToolbarOverflowItems {
   primaryItems: ToolbarOverflowPrimaryItem[];