@wix/patterns 1.427.0 → 1.430.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.427.0";
+export declare const version = "patterns@1.430.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.427.0",
+  "version": "1.430.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -220,10 +220,10 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.333.0",
-    "@wix/bex-utils": "2.120.0",
+    "@wix/bex-core": "2.336.0",
+    "@wix/bex-utils": "2.123.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.55.0",
+    "@wix/patterns-fields": "1.58.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "3.22.0",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -286,11 +286,11 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.95.0",
+    "@wix/cairo-integration-utils": "1.98.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
-    "@wix/design-system": "^1.285.0",
+    "@wix/design-system": "^1.301.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/fe-essentials-standalone": "^1.374.0",
     "@wix/jest-yoshi-preset-base": "^6.74.0",
@@ -444,5 +444,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "db5acddaeb8f899af9afc918381d5adbdd7a9a0fb6f85f03d3658630"
+  "falconPackageHash": "59abd8be99cd5e07d845f984a9e063aebd996700f340f50c05026554"
 }

package/src/components/ActionControl/ActionButton.tsx

@@ -39,7 +39,6 @@ export function ActionButton(props: ActionButtonProps) {
     <div ref={setRef} style={{ width: '100%' }}>
       <DisabledTooltip content={tooltip} dataHook={`${dataHook}-tooltip`}>
         <Button
-          skin="standard"
           priority={priority}
           size={size}
           prefixIcon={prefixIcon}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer159439662";
+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":"CardContainer159439662__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_ = "CmsFieldForm3042240542";
+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":"CmsFieldForm3042240542__root","fullBleedDivider":"CmsFieldForm3042240542__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_ = "CmsFieldModal2556807168";
+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":"CmsFieldModal2556807168__root","modal":"CmsFieldModal2556807168__modal"};
+export var classes = {"root":"CmsFieldModal1876956603__root","modal":"CmsFieldModal1876956603__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_ = "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":"ValidationAndDefaultsSection1569807852__root","accordionWrapper":"ValidationAndDefaultsSection1569807852__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_ = "CharactersLimitInput1811547721";
+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":"CharactersLimitInput1811547721__root","field":"CharactersLimitInput1811547721__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_ = "Collapse1149681514";
+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":"Collapse1149681514__root","exit":"Collapse1149681514__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_ = "CollectionPage252974580";
+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":"CollectionPage252974580__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_ = "CollectionSectionHeader2589279026";
+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":"CollectionSectionHeader2589279026__root","summaryIcon":"CollectionSectionHeader2589279026__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_ = "CollectionTable3761963699";
+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":"CollectionTable3761963699__root"};
+export var classes = {"root":"CollectionTable1797147932__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_ = "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":"CollectionTableWSRTable3587764784__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_ = "CollectionToolbar2410956896";
+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":"CollectionToolbar2410956896__root","left":"CollectionToolbar2410956896__left","right":"CollectionToolbar2410956896__right","fullWidth":"CollectionToolbar2410956896__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_ = "SearchOrCustomFilter3988720065";
+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":"SearchOrCustomFilter3988720065__root","search":"SearchOrCustomFilter3988720065__search","searchMobile":"SearchOrCustomFilter3988720065__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_ = "AutoCompleteReadonly4202717207";
+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":"AutoCompleteReadonly4202717207__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_ = "ViewsDropdown967112736";
+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":"ViewsDropdown967112736__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');