@wix/patterns 1.426.0 → 1.430.0

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/CardContainer/CardContainer.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm2825341027";
+var _namespace_ = "CmsFieldForm3637905500";
 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":"CmsFieldForm2825341027__root","fullBleedDivider":"CmsFieldForm2825341027__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm3637905500__root","fullBleedDivider":"CmsFieldForm3637905500__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_ = "CmsFieldModal1691223120";
+var _namespace_ = "CmsFieldModal1876956603";
 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":"CmsFieldModal1691223120__root","modal":"CmsFieldModal1691223120__modal"};
+export var classes = {"root":"CmsFieldModal1876956603__root","modal":"CmsFieldModal1876956603__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/FieldEditorModal.tsx

@@ -14,6 +14,8 @@ export interface FieldEditorModalProps {
   /** Cancel button label (localized). */
   secondaryButtonText: string;
   dataHook?: string;
+  /** z-index of the modal overlay, forwarded to the underlying WDS `Modal`. */
+  zIndex?: number;
 }
 
 /**
@@ -30,6 +32,7 @@ export const FieldEditorModal = observer(
     primaryButtonText,
     secondaryButtonText,
     dataHook = 'field-editor-modal',
+    zIndex,
   }: FieldEditorModalProps) => {
     const { formState } = state;
 
@@ -37,6 +40,7 @@ export const FieldEditorModal = observer(
       <CustomActionModal
         dataHook={dataHook}
         state={state.modal}
+        zIndex={zIndex}
         onAfterClose={() => state.reset()}
         title={title}
         content={formState ? <CmsFieldForm state={formState} /> : null}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection2116056137";
+var _namespace_ = "ValidationAndDefaultsSection738912025";
 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":"ValidationAndDefaultsSection2116056137__root","accordionWrapper":"ValidationAndDefaultsSection2116056137__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection738912025__root","accordionWrapper":"ValidationAndDefaultsSection738912025__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_ = "CharactersLimitInput3782966396";
+var _namespace_ = "CharactersLimitInput2299291232";
 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":"CharactersLimitInput3782966396__root","field":"CharactersLimitInput3782966396__field"};
+export var classes = {"root":"CharactersLimitInput2299291232__root","field":"CharactersLimitInput2299291232__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_ = "Collapse1347790111";
+var _namespace_ = "Collapse3811557587";
 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":"Collapse1347790111__root","exit":"Collapse1347790111__exit"};
+export var classes = {"root":"Collapse3811557587__root","exit":"Collapse3811557587__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "CollectionPage1525812740";
+var _namespace_ = "CollectionPage2667572599";
 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":"CollectionPage1525812740__root"};
+export var classes = {"root":"CollectionPage2667572599__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_ = "CollectionSectionHeader594798270";
+var _namespace_ = "CollectionSectionHeader874342386";
 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":"CollectionSectionHeader594798270__root","summaryIcon":"CollectionSectionHeader594798270__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader874342386__root","summaryIcon":"CollectionSectionHeader874342386__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -81,6 +81,9 @@ export interface CollectionTableBaseProps<T, F extends FiltersMap>
    * or `dataExtensionTableSource(...)` for DataExtension, which extends the
    * consumer's own collection.
    */
+  /** A fields source (e.g. `dataExtensionTableSource(...)`) whose fields become
+   *  columns and whose field management wires into the table. Schema sources
+   *  attach via the `@wix/patterns/schema` collection hooks instead. */
   fieldsSource?: FieldsSourceProvider;
 
   tags?: TagsElement<T, F>;
@@ -109,6 +112,15 @@ export interface CollectionTableBaseProps<T, F extends FiltersMap>
    * @external
    */
   bulkActionToolbar?: BulkActionToolbarRenderProp<T, F>;
+  /**
+   * When true, wraps every column header with the AddField hover popover.
+   * The "+" button is revealed when the consumer hovers a column header and
+   * triggers either the schema's `addField` or the data-extension's custom
+   * fields modal. Off by default.
+   * @external
+   */
+  showAddFieldButton?: boolean;
+
   /**
    * Opens a modal from the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar).
    * Supported parameters:
@@ -192,6 +204,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     keyedItems,
     resizeProps,
     forceResize,
+    showAddFieldButton,
     ...rest
   } = props;
 
@@ -244,6 +257,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
   const createWSRColumnBase = useCreateWSRColumnBase({
     horizontalScroll,
     showFieldTypeIcons: state.showFieldTypeIcons,
+    showAddFieldButton,
   });
 
   const transformedColumns: WSRTableColumn<KeyedItem<T>>[] =

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable2891095080";
+var _namespace_ = "CollectionTableWSRTable4061832017";
 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":"CollectionTableWSRTable2891095080__root"};
+export var classes = {"root":"CollectionTableWSRTable4061832017__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_ = "CollectionToolbar3005073471";
+var _namespace_ = "CollectionToolbar3645520063";
 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":"CollectionToolbar3005073471__root","left":"CollectionToolbar3005073471__left","right":"CollectionToolbar3005073471__right","fullWidth":"CollectionToolbar3005073471__fullWidth"};
+export var classes = {"root":"CollectionToolbar3645520063__root","right":"CollectionToolbar3645520063__right","left":"CollectionToolbar3645520063__left","fullWidth":"CollectionToolbar3645520063__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_ = "SearchOrCustomFilter387023842";
+var _namespace_ = "SearchOrCustomFilter156188642";
 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":"SearchOrCustomFilter387023842__root","search":"SearchOrCustomFilter387023842__search","searchMobile":"SearchOrCustomFilter387023842__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter156188642__root","search":"SearchOrCustomFilter156188642__search","searchMobile":"SearchOrCustomFilter156188642__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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[];

package/src/components/CollectionToolbars/CollectionToolbars.tsx

@@ -10,6 +10,7 @@ import { ToolbarAndTitlebarContainer } from './ToolbarAndTitlebarContainer';
 import { ToolbarCollectionBaseProps } from '../ToolbarCollection';
 import { TopNotificationBasicRenderProp } from '../TableTopNotification';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import {
   CollectionToolbarsVisualization,
   CollectionToolbarsVisualizationProps,
@@ -98,6 +99,7 @@ function _CollectionToolbars<T, F extends FiltersMap = FiltersMap>(
   } = state;
 
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const topNotification = isPanelLayout
     ? undefined
@@ -127,15 +129,29 @@ function _CollectionToolbars<T, F extends FiltersMap = FiltersMap>(
           )}
         </>
       )}
-      {shouldDisplaySubToolbar && (
-        <Box direction="vertical" backgroundColor="D80">
-          <Table.SubToolbar dataHook="collection-table-sub-toolbar">
+      {shouldDisplaySubToolbar &&
+        (isBmHarmonyTheme ? (
+          <Box
+            direction="vertical"
+            backgroundColor="D80"
+            dataHook="collection-table-sub-toolbar"
+            paddingBottom="SP4"
+            paddingLeft="SP6"
+            paddingRight="SP6"
+          >
             {AppliedFiltersTagList && shouldDisplayFiltersTags && (
               <AppliedFiltersTagList />
             )}
-          </Table.SubToolbar>
-        </Box>
-      )}
+          </Box>
+        ) : (
+          <Box direction="vertical" backgroundColor="D80">
+            <Table.SubToolbar dataHook="collection-table-sub-toolbar">
+              {AppliedFiltersTagList && shouldDisplayFiltersTags && (
+                <AppliedFiltersTagList />
+              )}
+            </Table.SubToolbar>
+          </Box>
+        ))}
       {summaryBar}
       {topNotification}
     </>

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -25,6 +25,7 @@ import { AutoCompleteReadonly } from './AutoCompleteReadonly';
 import { SaveToNewViewFooter } from './SaveToNewViewFooter';
 import { ViewsDropdownPrefix } from './ViewsDropdownPrefix';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export const VIEWS_REDESIGN_EXPERIMENT = 'specs.cairo.ViewsRedesign';
 
@@ -47,6 +48,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
   const isRedesign = container.internalExperiments?.enabled(
     VIEWS_REDESIGN_EXPERIMENT,
   );
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const { views: viewsState } = state;
   const { currentView, collection, localSearchState } = viewsState;
   const { filteredCategoriesWithViews } = localSearchState;
@@ -154,7 +156,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
             dropdownProps?.onInputClicked?.(e);
           }}
           fixedFooter={fixedFooter}
-          border="round"
+          border={isBmHarmonyTheme ? 'standard' : 'round'}
           selectedId={currentView?.id}
           selectedLabel={
             currentView

package/src/components/CollectionViewsDropdown/ViewsDropdownPrefix.tsx

@@ -3,7 +3,7 @@ import {
   FlagSmall,
   PinSmall,
   StatusAlertSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionViewsState } from '../../state';
@@ -54,11 +54,10 @@ export function _ViewsDropdownPrefix<T, F extends FiltersMap>(
   }
 
   if (views.isDefaultView) {
-    const DefaultIcon = isRedesign ? PinSmall : FlagSmall;
     return (
       <Input.Affix>
         <Box dataHook="view-default">
-          <DefaultIcon />
+          {isRedesign ? <PinSmall /> : <FlagSmall />}
         </Box>
       </Input.Affix>
     );

package/src/components/CustomColumnsPanel/CustomColumnsCTAButton.tsx

@@ -3,7 +3,8 @@ import React, { useEffect } from 'react';
 import { ToolbarCollectionState } from '../../state';
 import { FiltersMap, withoutDefaults } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
-import { AdjustSmall, TableChartSmall } from '@wix/wix-ui-icons-common';
+import { AdjustSmall, TableChartSmall } from '@wix/wix-ui-icons-common/lazy';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { CustomColumnsPanelEntry } from './CustomColumnsPanelEntry';
 import type { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
 import type { Column } from '../../model';
@@ -30,6 +31,7 @@ export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
   const analyticsButtonDiscoverability = experiments?.get(
     'specs.analytics.CustomColumnsWithLabelAndNewIcon',
   );
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   useEffect(() => {
     CustomColumnsPanelEntry.CustomColumnsDragAndDrop = dragAndDrop;
@@ -52,7 +54,7 @@ export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
   );
   const props = {
     size: 'small' as const,
-    priority: 'secondary' as const,
+    priority: isBmHarmonyTheme ? ('tertiary' as const) : ('secondary' as const),
     dataHook: 'custom-columns-button',
     onClick: () => {
       const isOpened = state.panels.toggleSidePanel('customColumns');