@wix/patterns 1.427.0 → 1.431.0

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_ = "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":"AutoCompleteReadonly4202717207__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_ = "ViewsDropdown967112736";
+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":"ViewsDropdown967112736__root"};
+export var classes = {"root":"ViewsDropdown2139846012__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;
@@ -63,6 +65,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
       const option = buildViewOption({
         view,
         viewsState,
+        isBmHarmonyTheme,
         suffix:
           isRedesign && isSelected ? (
             <ManageViewPopover
@@ -91,6 +94,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
     container.initTask.status,
     currentView?.id,
     isRedesign,
+    isBmHarmonyTheme,
   ]);
 
   const { options, fixedFooter } = showLoader
@@ -137,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={
@@ -154,7 +158,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/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"

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -6,6 +6,7 @@ import { Column } from '../../model';
 import { Box } from '@wix/design-system';
 import { addEventListener } from '@wix/bex-core/util';
 import { ColumnListTableListItem } from './ColumnListTableListItem';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface ColumnsListProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -15,6 +16,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
   const { state } = props;
   const { columnsCollection, dragAndDrop } = state;
   const hasSearchValue = state.searchValue.trim().length > 0;
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   useEffect(() => {
     if (dragAndDrop == null) {
@@ -40,14 +42,18 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
   }, []);
 
   const renderItem = useCallback(
-    (column: Column, index: number, { length }: { length: number }) => {
+    (column: Column, index: number) => {
       const itemContent = (
         <ColumnListTableListItem
           key={column.id}
           index={index}
           state={state}
           column={column}
-          showDivider={index < length - 1}
+          showDivider={
+            isHarmonyTheme
+              ? false
+              : index < columnsCollection.result.items.length - 1
+          }
         />
       );
 
@@ -69,14 +75,14 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
 
       return itemContent;
     },
-    [hasSearchValue],
+    [hasSearchValue, isHarmonyTheme],
   );
 
   let child = (
     <Box
       direction="vertical"
       dataHook="custom-columns-list"
-      backgroundColor="D60"
+      {...(isHarmonyTheme ? { paddingLeft: 'SP2', paddingRight: 'SP2' } : {})}
     >
       {columnsCollection.result.items.map(renderItem)}
     </Box>
@@ -104,7 +110,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
             state={dragAndDrop}
             renderItem={(index) => {
               const item = columnsCollection.result.items[index];
-              return item ? renderItem(item, index, { length: 0 }) : null;
+              return item ? renderItem(item, index) : null;
             }}
           />
         </>

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');

package/src/components/CustomColumnsPanel/CustomColumnsEntityPageContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { assertContextValue } from '../../createContext';
+
+/** Carries the panel's state from the mount to the registered panel component,
+ *  which the side-panel machinery renders with no props. Per mount, so two
+ *  panels on one page stay independent. */
+export const CustomColumnsEntityPageContext =
+  createContext<CustomColumnsEntityPageState | null>(null);
+
+export const CustomColumnsEntityPageProvider =
+  CustomColumnsEntityPageContext.Provider;
+
+export const useCustomColumnsEntityPageContext = () => {
+  const value = useContext(CustomColumnsEntityPageContext);
+  assertContextValue('CustomColumnsEntityPageProvider', value);
+  return value;
+};

package/src/components/CustomColumnsPanel/CustomColumnsEntityPagePanelEntry.tsx

@@ -1,20 +1,14 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { CustomColumnsPanel } from './CustomColumnsPanel';
-import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { useCustomColumnsEntityPageContext } from './CustomColumnsEntityPageContext';
 
 function _CustomColumnsEntityPagePanelEntry() {
-  const state = CustomColumnsEntityPagePanelEntry.state;
-
-  if (!state) {
-    return null;
-  }
+  const state = useCustomColumnsEntityPageContext();
 
   return <CustomColumnsPanel state={state} />;
 }
 
 export const CustomColumnsEntityPagePanelEntry = observer(
   _CustomColumnsEntityPagePanelEntry,
-) as typeof _CustomColumnsEntityPagePanelEntry & {
-  state?: CustomColumnsEntityPageState;
-};
+);

package/src/components/CustomColumnsPanel/CustomColumnsEntityPagePanelMount.tsx

@@ -6,6 +6,7 @@ import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPag
 import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
 import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
 import { CustomColumnsEntityPagePanelEntry } from './CustomColumnsEntityPagePanelEntry';
+import { CustomColumnsEntityPageProvider } from './CustomColumnsEntityPageContext';
 
 export interface CustomColumnsEntityPagePanelMountProps {
   state: CustomColumnsEntityPageState;
@@ -19,7 +20,6 @@ function _CustomColumnsEntityPagePanelMount({
   const { modalsContainerRef, stackingRootRef } = usePageContext();
 
   useEffect(() => {
-    CustomColumnsEntityPagePanelEntry.state = state;
     panels.registerSidePanel(
       'customColumns',
       CustomColumnsEntityPagePanelEntry,
@@ -27,16 +27,23 @@ function _CustomColumnsEntityPagePanelMount({
     return panels.init();
   }, []);
 
-  if (isPanelLayout) {
-    return <WixPatternsPanelModalsContainer state={panels} />;
-  }
-
+  // The panel component is registered by type and rendered with no props, so it
+  // reads its state from this provider — one per mount, which keeps two panels
+  // on the same page independent.
   return (
-    <WixPatternsModalsContainer
-      rootRef={stackingRootRef}
-      anchorRef={useRelativeSidePanel ? stackingRootRef : modalsContainerRef}
-      state={panels}
-    />
+    <CustomColumnsEntityPageProvider value={state}>
+      {isPanelLayout ? (
+        <WixPatternsPanelModalsContainer state={panels} />
+      ) : (
+        <WixPatternsModalsContainer
+          rootRef={stackingRootRef}
+          anchorRef={
+            useRelativeSidePanel ? stackingRootRef : modalsContainerRef
+          }
+          state={panels}
+        />
+      )}
+    </CustomColumnsEntityPageProvider>
   );
 }
 

package/src/components/CustomColumnsPanel/CustomColumnsNoResults.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Text, TextButton } from '@wix/design-system';
-import { Revert } from '@wix/wix-ui-icons-common';
+import { Revert } from '@wix/wix-ui-icons-common/lazy';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionEmptyStateBase } from '../CollectionEmptyStateBase';

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -4,6 +4,7 @@ import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelState
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { ColumnsList } from './ColumnsList';
 import { CustomColumnsSearch } from './CustomColumnsSearch';
 import { CustomColumnsNoResults } from './CustomColumnsNoResults';
@@ -30,6 +31,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
 }: CustomColumnsPanelProps<T, F>) {
   const entered = useRafRender();
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const { dragAndDrop, collectionFieldsSource } = state;
   const archive = collectionFieldsSource?.fieldsSource.archive;
@@ -37,7 +39,8 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
     collectionFieldsSource?.customFieldsPanel.deleteFieldModal;
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
-  const isEditable = !!collectionFieldsSource || isSchema;
+  const isEditable =
+    !!collectionFieldsSource || isSchema || state.isFieldsEditable;
 
   useEffect(() => state.init(), []);
 
@@ -73,7 +76,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
       >
         <SidePanel.Header title={t(titleKey)} subtitle={t(subtitleKey)}>
           {shouldShowSearch && (
-            <Box padding="0 SP3 SP2 SP3">
+            <Box padding={isHarmonyTheme ? '0 SP4 SP2 SP4' : '0 SP3 SP2 SP3'}>
               <CustomColumnsSearch state={state} />
             </Box>
           )}
@@ -91,16 +94,29 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
             <CustomColumnsNoResults state={state} />
           ) : (
             <>
-              {archive?.shouldDisplay && deleteFieldModal && (
-                <Suspense fallback={null}>
-                  <ArchivedItemsCTAButton
-                    archive={archive}
-                    deleteFieldModal={deleteFieldModal}
-                    onCloseSidePanel={() => state.onClose()}
-                    dataHook="custom-columns"
-                  />
-                </Suspense>
-              )}
+              {archive?.shouldDisplay &&
+                deleteFieldModal &&
+                (isHarmonyTheme ? (
+                  <Box direction="vertical" marginLeft="SP2" marginRight="SP2">
+                    <Suspense fallback={null}>
+                      <ArchivedItemsCTAButton
+                        archive={archive}
+                        deleteFieldModal={deleteFieldModal}
+                        onCloseSidePanel={() => state.onClose()}
+                        dataHook="custom-columns"
+                      />
+                    </Suspense>
+                  </Box>
+                ) : (
+                  <Suspense fallback={null}>
+                    <ArchivedItemsCTAButton
+                      archive={archive}
+                      deleteFieldModal={deleteFieldModal}
+                      onCloseSidePanel={() => state.onClose()}
+                      dataHook="custom-columns"
+                    />
+                  </Suspense>
+                ))}
               <ColumnsList state={state} />
             </>
           )}

package/src/components/CustomColumnsPanel/CustomColumnsSearch.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomColumnsSearchProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -13,6 +14,7 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
   state,
 }: CustomColumnsSearchProps<T, F>) {
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const searchInputRef = useRef<Search>(null);
 
   useEffect(() => {
@@ -31,6 +33,7 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
       ref={searchInputRef}
       dataHook="custom-columns-search"
       size="small"
+      border={isHarmonyTheme ? 'standard' : undefined}
       value={state.searchValue}
       onChange={(e) => {
         state.setSearchValue(e.target.value);

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -3,7 +3,7 @@ import { Badge, Box, Tooltip } from '@wix/design-system';
 import {
   LockLockedFilledSmall,
   FlagFilledSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { Column } from '../../model';

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -17,7 +17,11 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { CustomFieldTypeDropdown } from './CustomFieldTypeDropdown';
-import { ChevronDown, ChevronUp, InfoCircle } from '@wix/wix-ui-icons-common';
+import {
+  ChevronDown,
+  ChevronUp,
+  InfoCircle,
+} from '@wix/wix-ui-icons-common/lazy';
 import { Trans } from '../Trans';
 import { runInAction } from 'mobx';
 import { PiiFormFields } from './CustomFieldFormPiiFields';