@wix/patterns 1.426.0 → 1.430.0

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -64,6 +64,22 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
     isConfigurationStepVisible: () => configurationStepBase().exists(),
     isSummaryStepVisible: () => summaryStepBase().exists(),
 
+    // Summary step count rows (created / updated / failed). Each row's text is
+    // the translated count line; `*Exists` reflects whether that row rendered
+    // (a count row is shown only when its count is > 0).
+    summaryCreatedExists: () =>
+      summaryStepBase().$('[data-hook="import-summary-created"]').exists(),
+    getSummaryCreatedText: () =>
+      summaryStepBase().$('[data-hook="import-summary-created"]').text(),
+    summaryUpdatedExists: () =>
+      summaryStepBase().$('[data-hook="import-summary-updated"]').exists(),
+    getSummaryUpdatedText: () =>
+      summaryStepBase().$('[data-hook="import-summary-updated"]').text(),
+    summaryFailedExists: () =>
+      summaryStepBase().$('[data-hook="import-summary-failed"]').exists(),
+    getSummaryFailedText: () =>
+      summaryStepBase().$('[data-hook="import-summary-failed"]').text(),
+
     /** Simulates selecting a file in the upload step */
     uploadFile: async (file: File) => {
       const nativeInput: HTMLInputElement = await fileInputBase()
@@ -154,6 +170,16 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
     clickEditField: (header: string) =>
       modalLayoutBase().$(`[data-hook="import-edit-field-${header}"]`).click(),
 
+    // The mapping dropdown's popover appends to `window`, so its "+ Create New
+    // Field" footer renders on `body`, not under the modal layout.
+    /** Whether the dropdown's "+ Create New Field" footer is shown for a column */
+    createFieldFooterExists: (header: string) =>
+      body.$(`[data-hook="import-create-field-${header}"]`).exists(),
+
+    /** Click the "+ Create New Field" dropdown footer for a column */
+    clickCreateField: (header: string) =>
+      body.$(`[data-hook="import-create-field-${header}"]`).click(),
+
     /** Whether the CMS field-editor modal is open */
     fieldEditorIsOpen: () =>
       body.$('[data-hook="field-editor-modal"]').exists(),

package/src/components/ImportButton/ImportProps.tsx

@@ -1,18 +1,41 @@
-import { ImportButtonConfig, ModalState } from '@wix/bex-core';
+import { ImportConfig, ImportState, ModalState } from '@wix/bex-core';
+import { ReactNode } from 'react';
 
 type ImportButtonToolbarType = 'default' | 'bulkActionToolbar';
 
+/**
+ * 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;
+}) => ReactNode;
+
 export interface ImportButtonParams {
   /**
-   * The import inputs: a manual object (existing fields + destination / backup /
-   * create-new-field / onJobError), or a live schema-backed config from
-   * {@link useSchemaImport} that supplies them from the collection's schema. See
-   * {@link ImportButtonConfig}.
+   * 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?: ImportConfig;
+  /**
+   * 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.
    */
-  config: ImportButtonConfig;
+  renderFieldEditor?: RenderImportFieldEditor;
 }
 
 export type ImportButtonProps = ImportButtonParams & {
+  /**
+   * Which button variant to render. `'default'` (the default) shows a
+   * `ResponsiveButton`; `'bulkActionToolbar'` shows a compact secondary
+   * `Button`.
+   */
   toolbarType?: ImportButtonToolbarType;
 };
 

package/src/components/ImportButton/ImportRequiredFieldsSideNote.tsx

@@ -0,0 +1,60 @@
+import { Box, Text, Tooltip } from '@wix/design-system';
+import {
+  StatusAlertFilledSmall,
+  InfoCircleSmall,
+} from '@wix/wix-ui-icons-common';
+import { ImportState } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ImportRequiredFieldsSideNoteProps {
+  state: ImportState;
+}
+
+/**
+ * Footer side-note shown in the mapping step while required destination fields
+ * are unmapped (CAIRO-4452): a red "Missing N required field(s)" line plus an
+ * info icon whose tooltip lists which fields. Rendered in the modal's
+ * `sideActions` (the footer's left region, in the button row) rather than the
+ * full-width footnote strip. The Import button stays enabled — the click is
+ * blocked (with a toast) in `ImportState.startImport`.
+ */
+function _ImportRequiredFieldsSideNote({
+  state,
+}: ImportRequiredFieldsSideNoteProps) {
+  const { translate: t, missingRequiredFields } = state;
+
+  const fieldNames = missingRequiredFields
+    .map((field) => field.header || field.id || '')
+    .filter(Boolean)
+    .join(', ');
+
+  return (
+    <Box gap="SP1" verticalAlign="middle" dataHook="import-missing-required">
+      <Box verticalAlign="middle" color="R10">
+        <StatusAlertFilledSmall />
+      </Box>
+      <Text size="small" skin="error" dataHook="import-missing-required-text">
+        {t('cairo.import.missingRequiredField', {
+          count: missingRequiredFields.length,
+        })}
+      </Text>
+      <Tooltip
+        appendTo="window"
+        fixed={false}
+        flip
+        content={t('cairo.import.missingRequiredMessage', {
+          fields: fieldNames,
+        })}
+      >
+        <Box verticalAlign="middle" color="D40">
+          <InfoCircleSmall />
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+}
+
+export const ImportRequiredFieldsSideNote = observer(
+  _ImportRequiredFieldsSideNote,
+);

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -1,13 +1,15 @@
 import {
   Box,
+  Divider,
   Dropdown,
   Text,
   TextButton,
   TableListItem,
+  ListItemAction,
   listItemSelectBuilder,
   SectionHelper,
 } from '@wix/design-system';
-import { ArrowRight } from '@wix/wix-ui-icons-common';
+import { Add, ArrowRight } from '@wix/wix-ui-icons-common';
 import { ImportState, NewFieldType } from '@wix/bex-core';
 import { useTranslations } from '@wix/patterns-fields';
 import React from 'react';
@@ -16,8 +18,6 @@ import { IdCollisionControl } from './ImportIdCollisionControl';
 
 export interface ImportStepConfigurationProps {
   state: ImportState;
-  /** Opens the "Edit field" editor for a column's pending new field. */
-  onEditField: (header: string) => void;
 }
 
 const COLUMN_WIDTHS = {
@@ -64,7 +64,6 @@ interface NewFieldHelperTextProps {
   state: ImportState;
   header: string;
   fieldType: NewFieldType;
-  onEditField: () => void;
 }
 
 /**
@@ -79,7 +78,6 @@ const NewFieldHelperText = observer(function _NewFieldHelperText({
   state,
   header,
   fieldType,
-  onEditField,
 }: NewFieldHelperTextProps) {
   const { t: ft } = useTranslations();
   const typeName = ft(NEW_FIELD_TYPE_TITLE_KEY[fieldType]).toLocaleLowerCase();
@@ -96,7 +94,7 @@ const NewFieldHelperText = observer(function _NewFieldHelperText({
       <TextButton
         size="tiny"
         dataHook={`import-edit-field-${header}`}
-        onClick={onEditField}
+        onClick={() => state.beginFieldEdit(header)}
       >
         {state.translate('cairo.import.editField')}
       </TextButton>
@@ -108,14 +106,12 @@ interface FieldMappingCellProps {
   state: ImportState;
   header: string;
   fieldOptions: DropdownOption[];
-  onEditField: (header: string) => void;
 }
 
 const FieldMappingCell = observer(function _FieldMappingCell({
   state,
   header,
   fieldOptions,
-  onEditField,
 }: FieldMappingCellProps) {
   const { translate: t, selectedFieldIds, canCreateNewField } = state;
   const mapping = state.mappingByHeader[header];
@@ -138,12 +134,18 @@ const FieldMappingCell = observer(function _FieldMappingCell({
     })),
     ...(canCreateNewField
       ? [
-          // The option is the CSV column header itself (the new field is named
-          // after it) followed by a translated "(New)" marker. The header is
-          // built in code rather than via an interpolated key so it always
-          // shows, regardless of which translation bundle the consumer loads.
+          // The new field's name — the display name the user entered in the
+          // field editor once they've named it, otherwise the CSV column header
+          // (the default the field is created with). Followed by a translated
+          // "(New)" marker, built in code rather than via an interpolated key so
+          // it always shows regardless of which translation bundle the consumer
+          // loads.
           (() => {
-            const label = `${header} ${t('cairo.import.newFieldSuffix')}`;
+            const newFieldName =
+              mapping?.kind === 'new' && mapping.displayName
+                ? mapping.displayName
+                : header;
+            const label = `${newFieldName} ${t('cairo.import.newFieldSuffix')}`;
             return listItemSelectBuilder({
               id: CREATE_NEW_FIELD_OPTION_ID,
               label,
@@ -178,6 +180,28 @@ const FieldMappingCell = observer(function _FieldMappingCell({
           fixed: false,
         }}
         options={options}
+        fixedFooter={
+          canCreateNewField ? (
+            <div>
+              {/* Separate the "Create new field" action from the field options
+                  above it (CAIRO-4476). */}
+              <Divider />
+              <ListItemAction
+                size="small"
+                skin="primary"
+                prefixIcon={<Add />}
+                dataHook={`import-create-field-${header}`}
+                title={t('cairo.import.createNewField')}
+                // Map the column to a new field, then open the editor on it — the
+                // editor component (renderFieldEditor) reacts to `editingHeader`.
+                onClick={() => {
+                  state.setNewFieldMapping(header);
+                  state.beginFieldEdit(header);
+                }}
+              />
+            </div>
+          ) : undefined
+        }
         size="small"
       />
       {mapping?.kind === 'new' && (
@@ -185,7 +209,6 @@ const FieldMappingCell = observer(function _FieldMappingCell({
           state={state}
           header={header}
           fieldType={mapping.fieldType}
-          onEditField={() => onEditField(header)}
         />
       )}
       {state.canConfigureWritePolicy && state.idMappedHeader === header && (
@@ -195,10 +218,7 @@ const FieldMappingCell = observer(function _FieldMappingCell({
   );
 });
 
-function _ImportStepConfiguration({
-  state,
-  onEditField,
-}: ImportStepConfigurationProps) {
+function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
   const { csvHeaders, fields, translate: t } = state;
 
   // Row order is snapshotted per file in state, with the `_id`-mapped column
@@ -294,7 +314,6 @@ function _ImportStepConfiguration({
                       state={state}
                       header={header}
                       fieldOptions={baseDropdownOptions}
-                      onEditField={onEditField}
                     />
                   ),
                   width: COLUMN_WIDTHS.field,

package/src/components/ImportButton/ImportStepSummary.tsx

@@ -0,0 +1,72 @@
+import { Box, Text } from '@wix/design-system';
+import {
+  StatusAlertFilled,
+  StatusCompleteFilled,
+} from '@wix/wix-ui-icons-common';
+import { ImportState } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ImportStepSummaryProps {
+  state: ImportState;
+}
+
+function CountRow({
+  icon,
+  color,
+  children,
+}: {
+  icon: React.ReactNode;
+  color: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Box gap="SP2" verticalAlign="middle">
+      <Box align="center" verticalAlign="middle" color={color}>
+        {icon}
+      </Box>
+      <Box direction="vertical">{children}</Box>
+    </Box>
+  );
+}
+
+function _ImportStepSummary({ state }: ImportStepSummaryProps) {
+  const { result, translate: t } = state;
+  const { created, updated, failed } = result;
+
+  return (
+    <Box
+      direction="vertical"
+      gap="SP3"
+      width="100%"
+      dataHook="import-summary-step"
+    >
+      {created > 0 && (
+        <CountRow icon={<StatusCompleteFilled />} color="G10">
+          <Text dataHook="import-summary-created">
+            {t('cairo.import.summaryCreated', { count: created })}
+          </Text>
+        </CountRow>
+      )}
+      {updated > 0 && (
+        <CountRow icon={<StatusCompleteFilled />} color="G10">
+          <Text dataHook="import-summary-updated">
+            {t('cairo.import.summaryUpdated', { count: updated })}
+          </Text>
+        </CountRow>
+      )}
+      {failed > 0 && (
+        <CountRow icon={<StatusAlertFilled />} color="R10">
+          <Text dataHook="import-summary-failed">
+            {t('cairo.import.summaryFailed', { count: failed })}
+          </Text>
+          <Text size="small" secondary dataHook="import-summary-failed-hint">
+            {t('cairo.import.summaryFailedHint')}
+          </Text>
+        </CountRow>
+      )}
+    </Box>
+  );
+}
+
+export const ImportStepSummary = observer(_ImportStepSummary);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload589431647";
+var _namespace_ = "ImportStepUpload1386334335";
 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":"ImportStepUpload589431647__root","fileUpload":"ImportStepUpload589431647__fileUpload"};
+export var classes = {"root":"ImportStepUpload1386334335__root","fileUpload":"ImportStepUpload1386334335__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepper.tsx

@@ -3,10 +3,14 @@ import { ImportState, ImportStep } from '@wix/bex-core';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 
+// The stepper is only rendered on the upload/configuration steps (see
+// ImportButtonModalLayout); progress and summary map past the last visible step
+// so both rendered steps read as completed if the stepper is ever shown.
 const STEPPER_INDEX: Record<ImportStep, number> = {
   upload: 0,
   configuration: 1,
   progress: 2,
+  summary: 2,
 };
 
 function getStepperSteps(currentStep: ImportStep, t: ImportState['translate']) {

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -11,18 +11,17 @@ import React, { ReactNode } from 'react';
 import { ImportStepUpload } from './ImportStepUpload';
 import { ImportStepConfiguration } from './ImportStepConfiguration';
 import { ImportStepProgress } from './ImportStepProgress';
+import { ImportRequiredFieldsSideNote } from './ImportRequiredFieldsSideNote';
+import { ImportStepSummary } from './ImportStepSummary';
 
 export interface GetImportModalStepProps {
   state: ImportState;
   isMobile?: boolean;
-  /** Opens the "Edit field" editor for a column's pending new field. */
-  onEditField: (header: string) => void;
 }
 
 export function getImportModalStepProps({
   state,
   isMobile,
-  onEditField,
 }: GetImportModalStepProps): Partial<
   CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
 > {
@@ -38,7 +37,15 @@ export function getImportModalStepProps({
           <Text size="small" secondary>
             {t('cairo.import.footerText')}
           </Text>
-          <TextButton size="small">{t('cairo.import.footerLink')}</TextButton>
+          <TextButton
+            size="small"
+            as="a"
+            href="https://support.wix.com/en/article/import-data-from-a-file"
+            target="_blank"
+            rel="noopener"
+          >
+            {t('cairo.import.footerLink')}
+          </TextButton>
         </Box>
       ),
       showFooterDivider: false,
@@ -80,9 +87,14 @@ export function getImportModalStepProps({
         </Box>
       ),
       subtitle: t('cairo.import.subtitle'),
-      children: (
-        <ImportStepConfiguration state={state} onEditField={onEditField} />
-      ),
+      children: <ImportStepConfiguration state={state} />,
+      // Left-aligned footer side-note while required fields are unmapped
+      // (CAIRO-4452). Sits in the footer's button row (`sideActions`), not the
+      // full-width footnote strip. The Import button stays enabled; the click is
+      // blocked with a toast in `startImport`.
+      sideActions: state.hasMissingRequiredFields ? (
+        <ImportRequiredFieldsSideNote state={state} />
+      ) : undefined,
       showFooterDivider: true,
       primaryButtonText: t('cairo.import.startImport'),
       primaryButtonOnClick: state.hasMappings ? state.startImport : undefined,
@@ -103,6 +115,37 @@ export function getImportModalStepProps({
     };
   }
 
+  if (currentStep === 'summary') {
+    const { succeeded, failed } = state.result;
+    const hasFailures = failed > 0;
+
+    return {
+      title: t('cairo.import.summaryTitle', {
+        imported: String(succeeded),
+        total: state.totalCount,
+      }),
+      children: <ImportStepSummary state={state} />,
+      showFooterDivider: false,
+      // When rows failed, "Download CSV" is the primary (emphasized) action and
+      // "Close" the secondary — the user's next step is to fix the failures. A
+      // fully successful import has nothing to download, so "Close" is primary
+      // and stands alone.
+      ...(hasFailures
+        ? {
+            primaryButtonText: t('cairo.import.downloadCsv'),
+            primaryButtonOnClick: state.downloadFailedRows,
+            secondaryButtonText: t('cairo.import.close'),
+            secondaryButtonOnClick: state.done,
+          }
+        : {
+            primaryButtonText: t('cairo.import.close'),
+            primaryButtonOnClick: state.done,
+          }),
+      closeButtonProps: { onClick: state.done, autoFocus: true },
+      onRequestClose: state.done,
+    };
+  }
+
   const hasError = state.importStatus.isError;
 
   return {

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_ = "InputOverflow4130537648";
+var _namespace_ = "InputOverflow1073409881";
 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":"InputOverflow4130537648__root"};
+export var classes = {"root":"InputOverflow1073409881__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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/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_ = "LoadingRow1562995583";
+var _namespace_ = "LoadingRow491026576";
 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":"LoadingRow1562995583__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1562995583__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow491026576__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow491026576__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {};