@wix/patterns 1.430.0 → 1.432.0

package/src/components/EntityPageFields/EntityPageReferenceField.tsx

@@ -5,7 +5,12 @@ import type { BaseReferenceField, Field, Schema } from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
 import { useCollection } from '@wix/bex-core/react';
 import { FormReference, FormMultiReference } from '@wix/patterns-fields';
-import { useEntityPageContext } from '../../providers';
+import {
+  FilterTranslationProvider,
+  useEntityPageContext,
+} from '../../providers';
+import { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';
+import { useOpenCollectionOverlay } from '../../hooks/useOpenCollectionOverlay';
 
 type RefRow = Record<string, unknown>;
 
@@ -86,6 +91,28 @@ function _EntityPageReferenceField({
     }));
   }, [collection.result.keyedItems, idField, displayField, imageField]);
 
+  const { showInitialLoader, fixedFooter } = useFilterCollectionStates({
+    collection,
+    fixedFooter: undefined,
+  });
+
+  // Unlike EditableTable's reference cell, this field stays mounted while the
+  // overlay is open, so it can own the navigation itself. Refreshing on return
+  // forces a refetch so items added in the referenced collection show up.
+  const openReferencedCollection = useOpenCollectionOverlay({
+    collectionId: refSource?.collectionId,
+  });
+  const handleOpenCollection = useMemo(
+    () =>
+      openReferencedCollection
+        ? () =>
+            openReferencedCollection(() =>
+              collection.clearResultAndMoveToStart({ force: true }),
+            )
+        : undefined,
+    [openReferencedCollection, collection],
+  );
+
   // A reference with no matching source entry, or before its schema resolves,
   // can't render a picker — skip it rather than render a broken input.
   if (!refSource || !idField || !displayField) {
@@ -106,8 +133,10 @@ function _EntityPageReferenceField({
     searchValue: collection.query.search.value,
     onSearch: (query: string) => collection.search(query),
     onClearSearch: () => collection.clearSearch(),
-    hasMore: !collection.fetchedLastPage,
+    hasMore: !showInitialLoader && !collection.fetchedLastPage,
     loadMore: collection.fetchNextPageIfNeeded,
+    fixedFooter,
+    onOpenCollection: handleOpenCollection,
   };
 
   return field.type === 'MULTI_REFERENCE' ? (
@@ -117,4 +146,14 @@ function _EntityPageReferenceField({
   );
 }
 
-export const EntityPageReferenceField = observer(_EntityPageReferenceField);
+const EntityPageReferenceFieldContent = observer(_EntityPageReferenceField);
+
+// FilterTranslationProvider supplies the dropdown's loader / empty / no-results
+// texts that useFilterCollectionStates reads.
+export const EntityPageReferenceField = (
+  props: EntityPageReferenceFieldProps,
+) => (
+  <FilterTranslationProvider>
+    <EntityPageReferenceFieldContent {...props} />
+  </FilterTranslationProvider>
+);

package/src/components/ErrorState/OfflineErrorState.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, Suspense } from 'react';
 import { EmptyState, TextButton } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 import { ErrorBoundary } from '../ErrorBoundary';
 
 const offlineIllustrationPromise = import(

package/src/components/ExportButton/ExportButton.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FiltersMap, ModalState } from '@wix/bex-core';
 import { Button, Drawer, Modal } from '@wix/design-system';
-import { UploadExport } from '@wix/wix-ui-icons-common/lazy';
+import { UploadExport, UploadExportSmall } from '@wix/wix-ui-icons-common/lazy';
 import { observer, Observer } from 'mobx-react-lite';
 import { ExportButtonModalLayout } from './ExportButtonModalLayout';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -9,6 +9,7 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ExportButtonProps } from './ExportProps';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 function _ExportButton<T, F extends FiltersMap>(
   props: ExportButtonProps<T, F>,
@@ -41,6 +42,8 @@ function _ExportButton<T, F extends FiltersMap>(
   const [state] = useState(() => (table.exportState ??= new ModalState()));
 
   const isMobile = useIsMobile();
+  const isHarmonyTheme = useBmHarmonyTheme();
+  const exportIcon = isHarmonyTheme ? <UploadExportSmall /> : <UploadExport />;
 
   useEffect(() => {
     table.featuredComponents.exportModal.set(
@@ -104,7 +107,7 @@ function _ExportButton<T, F extends FiltersMap>(
           state={responsive.actions}
           dataHook="export-button"
           onClick={state.open}
-          icon={<UploadExport />}
+          icon={exportIcon}
         >
           {t('cairo.export.export')}
         </ResponsiveButton>
@@ -114,7 +117,7 @@ function _ExportButton<T, F extends FiltersMap>(
           priority="secondary"
           size="small"
           ellipsis
-          prefixIcon={<UploadExport />}
+          prefixIcon={exportIcon}
           dataHook="export-button"
           onClick={state.open}
         >

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

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

package/src/components/FieldActions/FieldActions.tsx

@@ -9,11 +9,12 @@ import {
   FlagSmall,
   DuplicateSmall,
   ArchiveSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { withoutDefaults } from '@wix/bex-core';
 import { cairoCtaClicked } from '@wix/bex-core/bi';
 import type { ReportBI, Translate, TranslationsKeys } from '@wix/bex-core';
 import type { HeaderAction, FieldActionsMenuConfig } from './headerActionTypes';
+import { MENU_DATA_HOOKS } from './fieldTypeActions';
 
 export type FieldActionKey =
   | 'editField'
@@ -126,11 +127,6 @@ export interface FieldActionsBIContext {
 
 const MENU_OPEN_CTA_NAME = 'More Actions Menu';
 
-const MENU_DATA_HOOKS = {
-  menuDataHook: 'field-actions-menu',
-  buttonDataHook: 'field-actions-menu-button',
-};
-
 const reportFieldActionCta = (
   bi: FieldActionsBIContext,
   cta: {

package/src/components/FieldActions/FieldActionsPopover.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { PopoverMenu, IconButton, Tooltip } from '@wix/design-system';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { MoreSmall } from '@wix/wix-ui-icons-common/lazy';
 import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
 import type { FieldActionsMenuConfig } from './headerActionTypes';
 import { actionMenuItems } from './actionMenuItems';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export function FieldActionsPopover({
   actions,
@@ -15,6 +16,7 @@ export function FieldActionsPopover({
 }: FieldActionsMenuConfig) {
   const { translate: t } = useWixPatternsContainer();
   const { stackingRootRef } = usePageContext();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const tooltip = tooltipContent ?? t('cairo.moreActions');
   const menuItems = actionMenuItems(actions);
 
@@ -31,6 +33,8 @@ export function FieldActionsPopover({
       >
         <IconButton
           size="tiny"
+          skin={isHarmonyTheme ? 'dark' : undefined}
+          priority={isHarmonyTheme ? 'tertiary' : undefined}
           disabled
           ariaLabel={t('cairo.moreActions')}
           dataHook={buttonDataHook}
@@ -52,7 +56,8 @@ export function FieldActionsPopover({
         <Tooltip content={tooltip}>
           <IconButton
             size="tiny"
-            skin="light"
+            skin={isHarmonyTheme ? 'dark' : 'light'}
+            priority={isHarmonyTheme ? 'tertiary' : undefined}
             ariaLabel={t('cairo.moreActions')}
             dataHook={buttonDataHook}
           >

package/src/components/FieldActions/HeaderActionsPopover.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useRef } from 'react';
 import { PopoverMenu, IconButton, Tooltip } from '@wix/design-system';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { MoreSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import type { HeaderAction } from './headerActionTypes';
 import { actionMenuItems } from './actionMenuItems';

package/src/components/FieldActions/fieldTypeActions.tsx

@@ -0,0 +1,56 @@
+import type { Field, FieldTypeDefinition } from '@wix/bex-core';
+import type { HeaderAction, FieldActionsMenuConfig } from './headerActionTypes';
+
+export const MENU_DATA_HOOKS = {
+  menuDataHook: 'field-actions-menu',
+  buttonDataHook: 'field-actions-menu-button',
+};
+
+/** The extra menu items a custom field type adds, as one action group. */
+export function buildFieldTypeActionGroup(args: {
+  field: Field;
+  definition: FieldTypeDefinition;
+}): HeaderAction[] {
+  const { field, definition } = args;
+  return (definition.actions?.items ?? [])
+    .filter((item) => item.visible?.(field) ?? true)
+    .map((item) => {
+      const disabledTooltip = item.disabledTooltip?.(field);
+      return {
+        label: item.label,
+        dataHook: `field-type-action-${item.key}`,
+        icon: item.icon,
+        skin: item.skin,
+        disabled: !!disabledTooltip,
+        disabledTooltip,
+        onClick: () => item.onClick(field),
+      };
+    });
+}
+
+/**
+ * Appends a custom field type's action group to a built menu. When the source
+ * built no menu (or only a disabled trigger), the type's actions still render:
+ * they are owned by the type, not gated by the source's permissions — so the
+ * source's menu-level disabledTooltip is dropped rather than shown over
+ * enabled items.
+ */
+export function mergeFieldTypeActions(
+  config: FieldActionsMenuConfig | null,
+  extras: HeaderAction[],
+): FieldActionsMenuConfig | null {
+  if (!extras.length) {
+    return config;
+  }
+  if (!config) {
+    return { actions: [extras], ...MENU_DATA_HOOKS };
+  }
+  if (config.actions.length === 0) {
+    return {
+      actions: [extras],
+      tooltipContent: config.tooltipContent,
+      ...MENU_DATA_HOOKS,
+    };
+  }
+  return { ...config, actions: [...config.actions, extras] };
+}

package/src/components/FieldActions/index.ts

@@ -9,7 +9,12 @@ export type {
   FieldActionHandlersConfig,
   FieldActionsBIContext,
 } from './FieldActions';
+export {
+  buildFieldTypeActionGroup,
+  mergeFieldTypeActions,
+} from './fieldTypeActions';
 export { HeaderActionsPopover } from './HeaderActionsPopover';
 export type { HeaderActionsPopoverProps } from './HeaderActionsPopover';
 export { FieldActionsPopover } from './FieldActionsPopover';
 export type { HeaderAction, FieldActionsMenuConfig } from './headerActionTypes';
+export type { FieldActionsConfig, FieldTypeActionItem } from './types';

package/src/components/FieldActions/types.ts

@@ -0,0 +1 @@
+export type { FieldTypeActionItem, FieldActionsConfig } from '@wix/bex-core';

package/src/components/FieldCell/FieldCell.tsx

@@ -1,12 +1,12 @@
 import React, { Suspense } from 'react';
 import { Box, Text, TextButton } from '@wix/design-system';
-import { Confirm, Minus } from '@wix/wix-ui-icons-common';
-import type { PatternsFieldType } from '@wix/bex-core';
+import { Confirm, Minus } from '@wix/wix-ui-icons-common/lazy';
+import type { FieldTypeDefinition, PatternsFieldType } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import type { CellAddressViewProps } from '@wix/patterns-fields';
 import type { WixCodeGalleryItem } from '@wix/patterns-fields/auto-field-types';
-import { getDateWithoutTimezone } from '../../utils/datesUtil';
+import { getDateWithoutTimezone, parseDate } from '../../utils/datesUtil';
 
 // Cell renderers live in @wix/patterns-fields, which statically pulls the
 // rich-text editor (Ricos/draft-js) and media SDKs. Importing them eagerly put
@@ -43,10 +43,17 @@ export interface FieldCellProps {
   type: PatternsFieldType;
   /** Stable id for cells that render WDS Tags (document, multi-document). */
   fieldId?: string;
+  /** The custom type definition a CUSTOM field resolves on its source.
+   *  Without a `table` slot the cell renders the plain-text default. */
+  definition?: FieldTypeDefinition;
 }
 
 function _FieldCell(props: FieldCellProps) {
   const { dateFormatters } = useWixPatternsContainer();
+  if (props.type === 'CUSTOM' && props.definition?.table) {
+    const { CellComponent } = props.definition.table;
+    return <CellComponent value={props.value} />;
+  }
   switch (props.type) {
     case 'LONG_TEXT':
       return (
@@ -54,24 +61,28 @@ function _FieldCell(props: FieldCellProps) {
           {props.value as React.ReactNode}
         </Text>
       );
-    case 'DATE':
+    case 'DATE': {
+      // A value that isn't a date renders blank. The formatters throw on one,
+      // which during render takes down the whole page, not just the cell.
+      const date = props.value
+        ? getDateWithoutTimezone(props.value as string)
+        : undefined;
       return (
         <Text size="small" ellipsis maxLines={1}>
-          {props.value
-            ? dateFormatters.medium.format(
-                getDateWithoutTimezone(props.value as string),
-              )
-            : null}
+          {date ? dateFormatters.medium.format(date) : null}
         </Text>
       );
-    case 'DATETIME':
+    }
+    case 'DATETIME': {
+      const dateTime = props.value
+        ? parseDate(props.value as string)
+        : undefined;
       return (
         <Text size="small" ellipsis maxLines={1}>
-          {props.value
-            ? dateFormatters.mediumTime.format(new Date(props.value as string))
-            : null}
+          {dateTime ? dateFormatters.mediumTime.format(dateTime) : null}
         </Text>
       );
+    }
     case 'BOOLEAN':
       return (
         <Box
@@ -153,10 +164,17 @@ function _FieldCell(props: FieldCellProps) {
     default:
       return (
         <Text size="small" ellipsis maxLines={1}>
-          {props.value as React.ReactNode}
+          {/* Rendering an object as a child throws and takes the page down with
+              it, so types with no case above show only primitives. REFERENCE /
+              MULTI_REFERENCE hold an expanded referenced item and are rendered
+              by the source instead (schemaRendering's columnOverrides). */}
+          {isRenderableText(props.value) ? String(props.value) : null}
         </Text>
       );
   }
 }
 
+const isRenderableText = (value: unknown): boolean =>
+  value != null && typeof value !== 'object';
+
 export const FieldCell = observer(_FieldCell);

package/src/components/FileCard/DownloadButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, IconButton, Loader, Tooltip } from '@wix/design-system';
-import { DownloadImportSmall } from '@wix/wix-ui-icons-common';
+import { DownloadImportSmall } from '@wix/wix-ui-icons-common/lazy';
 import { File } from './FileProps';
 import { useDownloadFile } from './useDownloadFile';
 import { useWixPatternsContainer } from '@wix/bex-core/react';

package/src/components/FileCard/FilePreviewModal.tsx

@@ -8,7 +8,7 @@ import {
 } from '@wix/design-system';
 import { resolveFileByMediaType } from './resolveFileByMediaType';
 import { useDownloadFile } from './useDownloadFile';
-import { Download } from '@wix/wix-ui-icons-common';
+import { Download } from '@wix/wix-ui-icons-common/lazy';
 import { FileViewProps } from './FileProps';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 

package/src/components/FiltersPanel/FilterAccordionResetButton.tsx

@@ -4,6 +4,7 @@ import { Filter } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { FilterToolbarState } from '../../providers';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FilterAccordionResetButtonProps<V> {
   state: FilterToolbarState;
@@ -15,6 +16,7 @@ function _FilterAccordionResetButton<V>(
 ) {
   const { state } = props;
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const filter = state.getPendingFilter(props.filter);
 
@@ -25,7 +27,7 @@ function _FilterAccordionResetButton<V>(
   return (
     <TextButton
       dataHook={`reset-filter-${filter.name}`}
-      size="medium"
+      size={isBmHarmonyTheme ? 'small' : 'medium'}
       onClick={(e: React.MouseEvent) => {
         e.stopPropagation();
         filter.reset({ emitEvents: ['change', 'refresh'] });
@@ -36,6 +38,4 @@ function _FilterAccordionResetButton<V>(
   );
 }
 
-export const FilterAccordionResetButton = observer(
-  _FilterAccordionResetButton,
-);
+export const FilterAccordionResetButton = observer(_FilterAccordionResetButton);

package/src/components/FiltersPanel/FilterAccordionTitle.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { FilterProps } from '../../model';
 import { FilterToolbarState } from '../../providers';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FilterAccordionTitleProps<V> {
   state: FilterToolbarState;
@@ -19,13 +20,14 @@ function _FilterAccordionTitle<V>(props: FilterAccordionTitleProps<V>) {
   const filter = state.getPendingFilter(props.filter);
 
   const { sizes } = usePatternsTheme();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Text
       dataHook={`accordion-item-title-${filter.name}`}
       ellipsis
       weight="normal"
-      size={sizes.medium}
+      size={isBmHarmonyTheme ? 'small' : sizes.medium}
     >
       {`${accordionItemProps?.label ?? ''}${
         filter.size > 0 ? ` (${filter.size})` : ''

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -18,6 +18,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
 import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 const FILTER_SEARCH_THRESHOLD = 7;
 
@@ -62,6 +63,8 @@ function _FiltersPanel<T, F extends FiltersMap>(
     location: 'panel' as const,
   }));
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   const [wsrDefaults] = useState(() => ({
     input: {
       size: 'small' as const,
@@ -96,7 +99,7 @@ function _FiltersPanel<T, F extends FiltersMap>(
         }
       >
         {showSearch && (
-          <Box padding="0 SP2 SP2 SP2">
+          <Box padding={isBmHarmonyTheme ? '0 SP4 SP2 SP4' : '0 SP2 SP2 SP2'}>
             <FiltersPanelSearch state={filtersPanelState} />
           </Box>
         )}
@@ -114,6 +117,8 @@ function _FiltersPanel<T, F extends FiltersMap>(
             skin="light"
             hideShadow
             multiple
+            size={isBmHarmonyTheme ? 'tiny' : undefined}
+            horizontalPadding={isBmHarmonyTheme ? 'small' : undefined}
             items={accordionItems}
           />
         )}

package/src/components/FiltersPanel/FiltersPanelFooter.tsx

@@ -4,6 +4,7 @@ import { ToolbarCollectionState } from '../../state';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { FiltersPanelAppliedFiltersSection } from './FiltersPanelAppliedFiltersSection';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FiltersPanelFooterProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -14,6 +15,7 @@ function _FiltersPanelFooter<T, F extends FiltersMap>(
   props: FiltersPanelFooterProps<T, F>,
 ) {
   const { state, onClearButtonClicked } = props;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const FiltersPanelSelectedFiltersSection =
     state.AddApplyFiltersButton?.FiltersPanelSelectedFiltersSection;
@@ -21,8 +23,8 @@ function _FiltersPanelFooter<T, F extends FiltersMap>(
   return (
     <Box
       gap="SP2"
-      paddingTop="SP3"
-      paddingBottom="SP3"
+      paddingTop={isBmHarmonyTheme ? 'SP4' : 'SP3'}
+      paddingBottom={isBmHarmonyTheme ? 'SP4' : 'SP3'}
       paddingLeft="SP4"
       paddingRight="SP4"
       verticalAlign="middle"

package/src/components/FiltersPanel/FiltersPanelSearch.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { FiltersPanelState } from './FiltersPanelState';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FiltersPanelSearchProps<T, F extends FiltersMap> {
   state: FiltersPanelState<T, F>;
@@ -13,11 +14,13 @@ function _FiltersPanelSearch<T, F extends FiltersMap>({
   state,
 }: FiltersPanelSearchProps<T, F>) {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Search
       dataHook="filters-panel-search"
       size="small"
+      border={isBmHarmonyTheme ? 'standard' : undefined}
       value={state.searchValue}
       onChange={(e) => state.setSearchValue(e.target.value)}
       onClear={() => state.clearSearch()}

package/src/components/FormPage/FormPageActionsBar.tsx

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react-lite';
 import { MoreActionsElement } from '../MoreActions';
 import { ActionsBarConfig, ctaKeys } from '@wix/bex-core';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FormPageActionsBarProps {
   moreActions?: MoreActionsElement;
@@ -23,6 +24,7 @@ export function _FormPageActionsBar({
   const { translate: t, initTask } = useWixPatternsContainer();
   const state = useFormPageContext();
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   if (!initTask.status.isSuccess) {
     return null;
@@ -34,7 +36,7 @@ export function _FormPageActionsBar({
       <Button
         priority="secondary"
         fullWidth={isMobile}
-        size={isMobile ? 'small' : 'medium'}
+        size={isBmHarmonyTheme || isMobile ? 'small' : 'medium'}
         dataHook="form-page-cancel-btn"
         onClick={onCancel}
       >
@@ -42,7 +44,7 @@ export function _FormPageActionsBar({
       </Button>
       <Button
         fullWidth={isMobile}
-        size={isMobile ? 'small' : 'medium'}
+        size={isBmHarmonyTheme || isMobile ? 'small' : 'medium'}
         dataHook="form-page-save-btn"
         onClick={onSave}
       >

package/src/components/Grid/useGridItemActions.tsx

@@ -9,7 +9,7 @@ import {
   PopoverMenu,
   PopoverMenuItemProps,
 } from '@wix/design-system';
-import { More } from '@wix/wix-ui-icons-common';
+import { More } from '@wix/wix-ui-icons-common/lazy';
 import { DisabledActionCellMenu } from '../ActionCell/DisabledActionCellMenu';
 import {
   createPrimaryActionCellPropsWithBI,

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

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

package/src/components/ImportButton/ImportButton.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { FiltersMap, ModalState } from '@wix/bex-core';
 import { Button, Drawer, Modal } from '@wix/design-system';
-import { DownloadImport } from '@wix/wix-ui-icons-common/lazy';
+import {
+  DownloadImport,
+  DownloadImportSmall,
+} from '@wix/wix-ui-icons-common/lazy';
 import { observer, Observer } from 'mobx-react-lite';
 import { ImportButtonModalLayout } from './ImportButtonModalLayout';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -9,6 +12,7 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ImportButtonProps } from './ImportProps';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
   const { toolbarType = 'default', config, renderFieldEditor } = props;
@@ -21,6 +25,12 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
   const { translate: t } = useWixPatternsContainer();
   const [state] = useState(() => (table.importState ??= new ModalState()));
   const isMobile = useIsMobile();
+  const isHarmonyTheme = useBmHarmonyTheme();
+  const importIcon = isHarmonyTheme ? (
+    <DownloadImportSmall />
+  ) : (
+    <DownloadImport />
+  );
 
   useEffect(() => {
     table.featuredComponents.importModal.set(
@@ -71,7 +81,7 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
           state={responsive.actions}
           dataHook="import-button"
           onClick={state.open}
-          icon={<DownloadImport />}
+          icon={importIcon}
         >
           {t('cairo.import.import')}
         </ResponsiveButton>
@@ -81,7 +91,7 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
           priority="secondary"
           size="small"
           ellipsis
-          prefixIcon={<DownloadImport />}
+          prefixIcon={importIcon}
           dataHook="import-button"
           onClick={state.open}
         >