@wix/patterns 1.427.0 → 1.431.0

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_ = "Heading3050382977";
+var _namespace_ = "Heading3951898647";
 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":"Heading3050382977__root"};
+export var classes = {"root":"Heading3951898647__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/CmsImportFieldEditor.tsx

@@ -7,11 +7,11 @@ import { FieldEditorModalState } from '../CmsFieldManagement/FieldEditorModalSta
 import { buildFieldDraft } from './importFieldEditor';
 
 /**
- * The CMS create/edit-field modal for the import flow, returned by
- * `useSchemaImport` as `renderFieldEditor`. Self-contained: it opens and
- * pre-fills from `state.editingMapping` when a column starts editing, writes the
- * result back via `state.applyFieldEdit`, and clears `state.editingHeader` on
- * close so re-editing the same column re-opens it.
+ * The CMS create/edit-field modal for the import flow. `ImportButton` picks and
+ * lazy-loads it for a CMS (Wix Data) import (from the config's `dataSource`).
+ * Self-contained: it opens and pre-fills from `state.editingMapping` when a
+ * column starts editing, writes the result back via `state.applyFieldEdit`, and
+ * clears `state.editingHeader` on close so re-editing the same column re-opens it.
  */
 const _CmsImportFieldEditor = ({ state }: { state: ImportState }) => {
   const t = state.translate;

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';
+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}
         >

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -7,7 +7,7 @@ import {
   Text,
 } from '@wix/design-system';
 import { getImportModalStepProps } from './getImportModalStepProps';
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, lazy, useEffect, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useCreateImport } from '@wix/bex-core';
 import { detectFieldType } from '@wix/patterns-fields';
@@ -19,24 +19,48 @@ import { ImportStepper } from './ImportStepper';
 import { MessageActionModal } from '../ActionModal';
 import { ModalWrapper } from '../CollectionModal';
 import { PatternsFieldsProvider } from '../../providers';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   const { config, importModalState, renderFieldEditor, ...rest } = props;
 
   const isMobile = useIsMobile();
+  // The config is read live off the table's source, which is in context here (the
+  // consumer builds `config` above the collection provider, so it can't be). Pass
+  // the toolbar's fields source to ImportState, which builds the effective config.
+  const toolbar = useToolbarCollectionContext();
 
   const createImport = useCreateImport({
-    config,
+    importInputs: config,
+    fieldsSource: toolbar.collectionFieldsSource?.fieldsSource,
     // Media-aware detection (image/video/document/audio) lives in
-    // patterns-fields; core defaults to primitive detection without it. A
-    // schema-backed config carries its own `mergeFields` (via useSchemaImport),
-    // so created columns refresh with no wiring here (CAIRO-4400).
+    // patterns-fields; core defaults to primitive detection without it.
+    // ImportState wires the schema-backed `mergeFields` from the source, so
+    // created columns refresh with no wiring here (CAIRO-4400).
     detectColumnType: detectFieldType,
     importModalState,
   });
 
   const [state] = useState(() => createImport());
 
+  // The create/edit-field editor follows the destination and is loaded on demand,
+  // so neither the CMS nor the DataExtension editor is bundled until an import
+  // that can create fields actually opens. A `renderFieldEditor` prop overrides.
+  const isPlatformized = Boolean(config?.destination);
+  const FieldEditor = useMemo(
+    () =>
+      lazy(() =>
+        isPlatformized
+          ? import('../DataExtension/DataExtensionImportFieldEditor').then(
+              (m) => ({ default: m.DataExtensionImportFieldEditor }),
+            )
+          : import('./CmsImportFieldEditor').then((m) => ({
+              default: m.CmsImportFieldEditor,
+            })),
+      ),
+    [isPlatformized],
+  );
+
   const {
     onRequestClose,
     children,
@@ -170,7 +194,15 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   return (
     <>
       {child}
-      {state.canCreateNewField ? renderFieldEditor?.({ state }) : null}
+      {state.canCreateNewField ? (
+        renderFieldEditor ? (
+          renderFieldEditor({ state })
+        ) : (
+          <Suspense fallback={null}>
+            <FieldEditor state={state} />
+          </Suspense>
+        )
+      ) : null}
     </>
   );
 }

package/src/components/ImportButton/ImportIdCollisionControl.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, TextButton, PopoverMenu } from '@wix/design-system';
-import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import { ImportState, WritePolicy } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';

package/src/components/ImportButton/ImportProps.tsx

@@ -1,14 +1,14 @@
-import { ImportButtonConfig, ImportState, ModalState } from '@wix/bex-core';
+import { ImportConfig, ImportState, ModalState } from '@wix/bex-core';
 import { ReactNode } from 'react';
 
 type ImportButtonToolbarType = 'default' | 'bulkActionToolbar';
 
 /**
- * Renders the source's "create/edit field" modal. Returned by a source's import
- * hook (`useSchemaImport`, `usePlatformizedImport`) and passed to `ImportButton`
- * as `renderFieldEditor`. The returned element is a self-contained editor that
- * watches `state.editingHeader` to open, pre-fill, and close itself, and writes
- * the result back via the state's `applyFieldEdit` / `applyDataExtensionFieldEdit`.
+ * Renders the "create/edit field" modal. The element is a self-contained editor
+ * that watches `state.editingHeader` to open, pre-fill, and close itself, and
+ * writes the result back via the state's `applyFieldEdit` /
+ * `applyDataExtensionFieldEdit`. `ImportButton` picks and lazy-loads the right
+ * one from the destination by default; pass this only to override.
  */
 export type RenderImportFieldEditor = (args: {
   state: ImportState;
@@ -16,16 +16,16 @@ export type RenderImportFieldEditor = (args: {
 
 export interface ImportButtonParams {
   /**
-   * The import inputs. Build it with a source hook — `useSchemaImport` for a CMS
-   * (Wix Data) collection, or `usePlatformizedImport` for a platformized
-   * destination — and pass the returned `config`.
+   * The import inputs, as a plain object. Omit it entirely to import into the
+   * table's own collection (Wix Data) — the collection, its fields, and
+   * create-new-field are read from the table's source. Set `destination` (and
+   * any `fields`) to write to a platformized target instead.
    */
-  config: ImportButtonConfig;
+  config?: ImportConfig;
   /**
-   * Renders the source's create/edit-field modal (see
-   * {@link RenderImportFieldEditor}). Supplied by consumer-driven sources (e.g.
-   * `useSchemaImport` for CMS). A DataExtension destination provides its own
-   * internally, so it need not be passed for that case.
+   * Overrides the create/edit-field modal (see {@link RenderImportFieldEditor}).
+   * By default the editor is chosen from the destination (CMS vs DataExtension)
+   * and loaded on demand, so this need not be passed.
    */
   renderFieldEditor?: RenderImportFieldEditor;
 }

package/src/components/ImportButton/ImportRequiredFieldsSideNote.tsx

@@ -2,7 +2,7 @@ import { Box, Text, Tooltip } from '@wix/design-system';
 import {
   StatusAlertFilledSmall,
   InfoCircleSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { ImportState } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -9,7 +9,7 @@ import {
   listItemSelectBuilder,
   SectionHelper,
 } from '@wix/design-system';
-import { Add, ArrowRight } from '@wix/wix-ui-icons-common';
+import { Add, ArrowRight } from '@wix/wix-ui-icons-common/lazy';
 import { ImportState, NewFieldType } from '@wix/bex-core';
 import { useTranslations } from '@wix/patterns-fields';
 import React from 'react';

package/src/components/ImportButton/ImportStepSummary.tsx

@@ -2,7 +2,7 @@ import { Box, Text } from '@wix/design-system';
 import {
   StatusAlertFilled,
   StatusCompleteFilled,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { ImportState } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3529433858";
+var _namespace_ = "ImportStepUpload1021181682";
 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":"ImportStepUpload3529433858__root","fileUpload":"ImportStepUpload3529433858__fileUpload"};
+export var classes = {"root":"ImportStepUpload1021181682__root","fileUpload":"ImportStepUpload1021181682__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepper.tsx

@@ -21,13 +21,11 @@ function getStepperSteps(currentStep: ImportStep, t: ImportState['translate']) {
     { text: t('cairo.import.stepper.matchFields') },
   ].map((step, index) => ({
     ...step,
-    type: (
-      index < activeIndex
-        ? 'completed'
-        : index > activeIndex
-          ? 'disabled'
-          : 'normal'
-    ) as 'completed' | 'disabled' | 'normal',
+    type: (index < activeIndex
+      ? 'completed'
+      : index > activeIndex
+      ? 'disabled'
+      : 'normal') as 'completed' | 'disabled' | 'normal',
   }));
 }
 

package/src/components/ImportButton/index.ts

@@ -1,3 +1,4 @@
 export * from './ImportButton';
 export * from './ImportModal';
 export { ImportButtonProps, ImportModalProps } from './ImportProps';
+export type { ImportConfig } from '@wix/bex-core';

package/src/components/ImportButton/newFieldTypeMapping.ts

@@ -1,21 +1 @@
-import type { NewFieldType, PatternsFieldType } from '@wix/bex-core';
-
-// Maps the import flow's `NewFieldType` (lowercase, data-driven detection) to the
-// schema's `PatternsFieldType` (uppercase) used by `Field` / the field editor.
-// The reverse mapping (editor output → `NewFieldType`) lives in core, next to
-// `ImportState`, which consumes it directly.
-
-const NEW_FIELD_TYPE_TO_PATTERNS: Record<NewFieldType, PatternsFieldType> = {
-  text: 'SHORT_TEXT',
-  number: 'NUMBER',
-  date: 'DATE',
-  boolean: 'BOOLEAN',
-  url: 'URL',
-  image: 'IMAGE',
-  video: 'VIDEO',
-  document: 'DOCUMENT',
-  audio: 'AUDIO',
-};
-
-export const toPatternsFieldType = (type: NewFieldType): PatternsFieldType =>
-  NEW_FIELD_TYPE_TO_PATTERNS[type];
+export { toPatternsFieldType } from '@wix/bex-core';

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

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

package/src/components/Kanban/StageActions.tsx

@@ -5,7 +5,7 @@ import {
   PopoverMenuItemProps,
 } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { MoreSmall } from '@wix/wix-ui-icons-common/lazy';
 import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
 import { SecondaryActionAction } from '../ActionCell';
 import { FiltersMap } from '../../exports/core';

package/src/components/Kanban/useCardActions.tsx

@@ -10,7 +10,7 @@ import {
   PopoverMenuItemProps,
 } from '@wix/design-system';
 import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { MoreSmall } from '@wix/wix-ui-icons-common/lazy';
 import { DisabledActionCellMenu } from '../ActionCell/DisabledActionCellMenu';
 import {
   createKanbanPrimaryActionCellPropsWithBI,

package/src/components/LayoutSwitch/LayoutSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo } from 'react';
+import React, { ReactElement, Suspense, useEffect, useMemo } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { Table, TableProps } from '../Table';
@@ -16,6 +16,13 @@ const LazyEditableTable = React.lazy(() =>
 
 export interface LayoutSwitchProps<T, F extends FiltersMap> {
   state: ILayoutSwitchState<T, F>;
+  /**
+   * An `<ImportButton />` element added to the toolbar of whichever layout is
+   * shown. Set it here once instead of repeating it in each layout's props. A
+   * layout's own `importButton` (in `tableProps`/`gridProps`/`spreadsheetProps`)
+   * takes precedence over this one.
+   */
+  importButton?: ReactElement;
   tableProps?: Omit<TableProps<T, F>, 'tableGridSwitchButton'>;
   gridProps?: Omit<GridProps<T, F>, 'tableGridSwitchButton'>;
   spreadsheetProps?: Omit<EditableTableProps<T, F>, 'tableGridSwitchButton'>;
@@ -23,6 +30,7 @@ export interface LayoutSwitchProps<T, F extends FiltersMap> {
 
 function _LayoutSwitch<T, F extends FiltersMap>({
   state,
+  importButton,
   tableProps,
   gridProps,
   spreadsheetProps,
@@ -87,7 +95,11 @@ function _LayoutSwitch<T, F extends FiltersMap>({
   if (activeView === 'table') {
     return (
       <div data-hook="layout-view-table" style={{ display: 'contents' }}>
-        <Table {...tableProps!} tableGridSwitchButton={layoutSwitchButton} />
+        <Table
+          {...tableProps!}
+          importButton={tableProps!.importButton ?? importButton}
+          tableGridSwitchButton={layoutSwitchButton}
+        />
       </div>
     );
   }
@@ -95,7 +107,11 @@ function _LayoutSwitch<T, F extends FiltersMap>({
   if (activeView === 'grid') {
     return (
       <div data-hook="layout-view-grid" style={{ display: 'contents' }}>
-        <Grid {...gridProps!} tableGridSwitchButton={layoutSwitchButton} />
+        <Grid
+          {...gridProps!}
+          importButton={gridProps!.importButton ?? importButton}
+          tableGridSwitchButton={layoutSwitchButton}
+        />
       </div>
     );
   }
@@ -108,6 +124,7 @@ function _LayoutSwitch<T, F extends FiltersMap>({
         >
           <LazyEditableTable
             {...spreadsheetProps!}
+            importButton={spreadsheetProps!.importButton ?? importButton}
             tableGridSwitchButton={layoutSwitchButton}
           />
         </Suspense>

package/src/components/LayoutSwitch/LayoutSwitch.uni.driver.ts

@@ -25,11 +25,13 @@ export function LayoutSwitchUniDriver(base: UniDriver, body: UniDriver) {
     isShowingSpreadsheet: () =>
       base.$('[data-hook="layout-view-spreadsheet"]').exists(),
     /** Get Table driver */
-    getTable: () => TableUniDriver(base, body),
+    getTable: (): ReturnType<typeof TableUniDriver> =>
+      TableUniDriver(base, body),
     /** Get Grid driver */
-    getGrid: () => GridUniDriver(base, body),
+    getGrid: (): ReturnType<typeof GridUniDriver> => GridUniDriver(base, body),
     /** Get Spreadsheet (EditableTable) driver */
-    getSpreadsheet: () => EditableTableUniDriver(base, body),
+    getSpreadsheet: (): ReturnType<typeof EditableTableUniDriver> =>
+      EditableTableUniDriver(base, body),
   };
 }
 

package/src/components/LayoutSwitchButton/LayoutSwitchButton.tsx

@@ -10,6 +10,7 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
 import { layoutConfig } from './layoutConfig';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface LayoutSwitchButtonProps {
   state: ViewTypeState;
@@ -23,6 +24,7 @@ function _LayoutSwitchButton({ state, options }: LayoutSwitchButtonProps) {
   const isLayoutToggleRedesignEnabled = internalExperiments?.enabled(
     'specs.cairo.layout-toggle.redesign',
   );
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const dropdownOptions = useMemo(
     () =>
@@ -40,7 +42,7 @@ function _LayoutSwitchButton({ state, options }: LayoutSwitchButtonProps) {
   if (!isLayoutToggleRedesignEnabled) {
     return (
       <SegmentedToggle
-        size="small"
+        size={isBmHarmonyTheme ? 'tiny' : 'small'}
         dataHook="layout-switch-toggle-button"
         selected={viewType}
         onClick={(_, value) => {

package/src/components/LayoutSwitchButton/layoutConfig.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import {
   TableChart,
   LayoutGallery,
-  LayoutSplit,
-} from '@wix/wix-ui-icons-common';
+  LayoutThreeRows,
+} from '@wix/wix-ui-icons-common/lazy';
 import { TranslationsKeys } from '@wix/bex-core';
 import { ViewType } from '../../state/ViewTypeState';
 
@@ -12,7 +12,7 @@ export const layoutConfig: Record<
   { icon: React.ReactNode; translationKey: TranslationsKeys }
 > = {
   table: {
-    icon: <LayoutSplit />,
+    icon: <LayoutThreeRows />,
     translationKey: 'cairo.table.layout.table',
   },
   grid: {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow59215511";
+var _namespace_ = "LoadingRow3544261193";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow59215511__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow59215511__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3544261193__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3544261193__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

package/src/components/MaxSelection.tsx

@@ -1,6 +1,7 @@
 import { CollectionState, Translate } from '@wix/bex-core';
 import React from 'react';
 import { Text } from '@wix/design-system';
+import { useBmHarmonyTheme } from '../hooks/useBmHarmonyTheme';
 
 export type MultipleSelection = boolean | number;
 
@@ -54,7 +55,7 @@ export type MaxSelectionLabelProps = {
 
 export function BulkSelectionMaxSelectionLabel(props: MaxSelectionLabelProps) {
   const { selectedCount, t, multiple, dataHook } = props;
-
+  const isHarmonyBmTheme = useBmHarmonyTheme();
   const maxSelectedItems = maxSelectedItemsFromMultipleSelection(multiple);
 
   let text;
@@ -81,7 +82,11 @@ export function BulkSelectionMaxSelectionLabel(props: MaxSelectionLabelProps) {
   }
 
   return (
-    <Text dataHook={dataHook} secondary>
+    <Text
+      dataHook={dataHook}
+      size={isHarmonyBmTheme ? 'small' : undefined}
+      secondary
+    >
       {text}
     </Text>
   );

package/src/components/MoreActions/ExploreAppsState.tsx

@@ -3,7 +3,7 @@ import { ReportProps } from '@wix/fe-essentials/bi';
 import { action, makeObservable, observable } from 'mobx';
 import { wixPatternsAppWasInstalledSrc144Evid200 } from '@wix/bex-core/bi';
 import { ExploreAppsModal } from './ExploreAppsModal';
-import { RelatedApps } from '@wix/wix-ui-icons-common';
+import { RelatedApps } from '@wix/wix-ui-icons-common/lazy';
 
 export interface ExploreAppsModalProps {
   title: string;

package/src/components/MoreActions/MoreActionsIcon.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import { Box, IconButton, Tooltip } 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';
 import { MoreActionsBase } from './MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MoreActionsProps } from './MoreActionsProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface MoreActionsIconProps extends MoreActionsProps {}
 
 function _MoreActionsIcon(params: MoreActionsIconProps) {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Box
@@ -21,7 +23,7 @@ function _MoreActionsIcon(params: MoreActionsIconProps) {
           triggerElement={
             <IconButton
               dataHook="more-actions-popover-button"
-              priority="secondary"
+              priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
             >
               <More />
             </IconButton>

package/src/components/MoreActions/MoreActionsText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@wix/design-system';
-import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import { observer } from 'mobx-react-lite';
 import { MoreActionsBase } from './MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';