@wix/patterns 1.430.0 → 1.431.0

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_ = "CardContainer3726824294";
+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":"CardContainer3726824294__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_ = "CmsFieldForm3637905500";
+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":"CmsFieldForm3637905500__root","fullBleedDivider":"CmsFieldForm3637905500__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_ = "CmsFieldModal1876956603";
+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":"CmsFieldModal1876956603__root","modal":"CmsFieldModal1876956603__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_ = "ValidationAndDefaultsSection738912025";
+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":"ValidationAndDefaultsSection738912025__root","accordionWrapper":"ValidationAndDefaultsSection738912025__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_ = "CharactersLimitInput2299291232";
+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":"CharactersLimitInput2299291232__root","field":"CharactersLimitInput2299291232__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_ = "Collapse3811557587";
+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":"Collapse3811557587__root","exit":"Collapse3811557587__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/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader874342386";
+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":"CollectionSectionHeader874342386__root","summaryIcon":"CollectionSectionHeader874342386__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_ = "CollectionTable1797147932";
+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":"CollectionTable1797147932__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_ = "CollectionTableWSRTable4061832017";
+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":"CollectionTableWSRTable4061832017__root"};
+export var classes = {"root":"CollectionTableWSRTable2186714947__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3645520063";
+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":"CollectionToolbar3645520063__root","right":"CollectionToolbar3645520063__right","left":"CollectionToolbar3645520063__left","fullWidth":"CollectionToolbar3645520063__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/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter156188642";
+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":"SearchOrCustomFilter156188642__root","search":"SearchOrCustomFilter156188642__search","searchMobile":"SearchOrCustomFilter156188642__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/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ManageViewPopover.tsx

@@ -12,7 +12,7 @@ import {
   FlagDismiss,
   Pin,
   Revert,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionViewsState } from '../../state';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -74,6 +74,7 @@ function _ManageViewPopover<T, F extends FiltersMap>(
   return (
     <PopoverMenu
       minWidth={271}
+      textSize="small"
       {...(redesign && { placement: 'right', appendTo: 'window' })}
       onShow={() => {
         emitter.emit('openManageViewPopoverMenu');
@@ -154,9 +155,10 @@ function _ManageViewPopover<T, F extends FiltersMap>(
   );
 }
 
-export const ManageViewPopover = observer(
-  forwardRef(_ManageViewPopover),
-) as <T, F extends FiltersMap>(
+export const ManageViewPopover = observer(forwardRef(_ManageViewPopover)) as <
+  T,
+  F extends FiltersMap,
+>(
   props: ManageViewPopoverProps<T, F> & {
     ref?: React.Ref<ManageViewPopoverHandle>;
   },

package/src/components/CollectionViewsDropdown/SaveToNewViewFooter.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { Divider, ListItemAction } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { ListItemAction } from '@wix/design-system';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionViewsState } from '../../state';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -18,10 +18,9 @@ function _SaveToNewViewFooter<T, F extends FiltersMap>({
 
   return (
     <div data-hook="save-to-new-view-footer">
-      <Divider />
       <ListItemAction
-        size="medium"
-        weight="thin"
+        size="small"
+        skin="primary"
         dataHook="save-to-new-view"
         prefixIcon={<Add />}
         disabled={viewsState.reachedViewsLimit}

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

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -65,6 +65,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
       const option = buildViewOption({
         view,
         viewsState,
+        isBmHarmonyTheme,
         suffix:
           isRedesign && isSelected ? (
             <ManageViewPopover
@@ -93,6 +94,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
     container.initTask.status,
     currentView?.id,
     isRedesign,
+    isBmHarmonyTheme,
   ]);
 
   const { options, fixedFooter } = showLoader
@@ -139,7 +141,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
             localSearchState.setInputValueAndScheduleSearch(e.target.value)
           }
           clearInput={() => localSearchState.clearSearch()}
-          dropdownWidth={isRedesign ? '264px' : dropdownWidth}
+          dropdownWidth={dropdownWidth}
           popoverProps={{ placement: 'bottom-start' }}
           {...dropdownProps}
           onDrillIn={

package/src/components/CollectionViewsDropdown/modals/SaveView/CollectionSaveViewModal.tsx

@@ -98,7 +98,7 @@ function _CollectionSaveViewModal<T, F extends FiltersMap = FiltersMap>({
           title={t('cairo.table.saveViewModal.title')}
           subtitle={
             <Box>
-              <Text secondary>
+              <Text size="small" weight="thin" secondary>
                 {t('cairo.table.saveViewModal.body')}
                 {state.learnMoreLink && (
                   <>

package/src/components/CollectionViewsDropdown/viewsDropdownRenderHelpers.tsx

@@ -65,16 +65,20 @@ export function buildViewOption<F extends FiltersMap>({
   viewsState,
   view,
   suffix,
+  isBmHarmonyTheme,
 }: {
   viewsState: ViewsState<F>;
   view: PrivateView<F>;
   suffix?: ReactNode;
+  isBmHarmonyTheme?: boolean;
 }) {
   const viewName = getViewName({ view, viewsState });
   return listItemSelectBuilder({
     id: view.id,
     title: viewName,
     label: viewName,
+    ...(isBmHarmonyTheme ? { size: 'small' } : {}),
+    ...(isBmHarmonyTheme ? { ellipsis: true } : {}),
     dataHook: 'view-item',
     suffix,
   });

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -9,6 +9,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { FieldIndications } from './FieldIndications';
 import { FieldActionsPopover } from '../FieldActions';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
@@ -37,6 +38,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
 
   const { collectionFieldsSource } = state;
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const showFieldTypeIcons = state.showFieldTypeIcons;
 
   const { infoTooltipProps } = column;
@@ -94,8 +96,9 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
         checkbox
         checked={checked}
         verticalPadding="tiny"
-        horizontalPadding="small"
+        horizontalPadding={isHarmonyTheme ? 'tiny' : 'small'}
         dragHandleSize="small"
+        showSelectionBorder={isHarmonyTheme ? false : undefined}
         checkboxDisabled={checkboxDisabled}
         checkboxTooltipContent={
           checkboxDisabled
@@ -172,7 +175,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                   )}
                   <Text
                     size="small"
-                    weight="normal"
+                    weight={isHarmonyTheme ? 'thin' : 'normal'}
                     dataHook="tableListItem-label"
                     ellipsis
                     appendTo="window"