@wix/patterns 1.427.0 → 1.430.0

package/src/components/SchemaSource/SchemaState.ts

@@ -1,93 +1,45 @@
-import {
-  action,
-  computed,
-  makeObservable,
-  observable,
-  runInAction,
-} from 'mobx';
-import {
-  Field,
-  FieldManagement,
-  FieldsSource,
-  LoadedSchema,
-  Schema,
-  SchemaSource,
-  TaskState,
-  WixPatternsContainer,
-} from '@wix/bex-core';
-import type { RemoveToast, ToastConfig } from '@wix/bex-core';
+import { computed, makeObservable } from 'mobx';
+import { Field, FieldsSource, SourceState } from '@wix/bex-core';
 import type { ToolbarCollectionState } from '../../state';
 import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
 import { isFilterableFieldType } from '../../state/buildFieldFilters';
 import { schemaFieldsSource } from './schemaFieldsSource';
-import { schemaFieldManagement } from './schemaFieldManagement';
 import { schemaRendering } from './schemaRendering';
 
 export interface SchemaStateParams<T> {
-  container: WixPatternsContainer;
-  source: SchemaSource<T>;
+  sourceState: SourceState<T>;
 }
 
 /**
- * Holds a collection's loaded schema and turns it into a source-neutral
- * FieldsSource for the table. It owns the field-management object and the
- * add/edit field modal, loads the schema once, and builds the table columns
- * from its fields.
+ * The collection-page side of a source: turns the loaded schema into a
+ * source-neutral FieldsSource for the table, owns the field-management object
+ * and the add/edit field modal, and builds the table columns from the fields.
+ * The page-neutral holding (load, fields, field mutations) lives in the
+ * composed core `SourceState`.
  */
 export class SchemaState<T = Record<string, unknown>> {
-  readonly container: WixPatternsContainer;
-  readonly source: SchemaSource<T>;
-  readonly fieldManagement: FieldManagement;
+  readonly sourceState: SourceState<T>;
+  /** The read contract the collection spine consumes — a plain adapter whose
+   *  getters read through to `sourceState`, so MobX tracks through it. Built
+   *  once: the spine keeps this exact instance. */
   readonly fieldsSource: FieldsSource;
-  readonly makePrimaryTask = new TaskState();
-  readonly duplicateTask = new TaskState();
-  readonly duplicateWithContentTask = new TaskState();
 
-  loadedSchema?: LoadedSchema<T> = undefined;
   toolbar?: ToolbarCollectionState<any, any> = undefined;
 
   constructor(params: SchemaStateParams<T>) {
-    this.container = params.container;
-    this.source = params.source;
-    this.fieldManagement = schemaFieldManagement(this);
+    this.sourceState = params.sourceState;
     this.fieldsSource = schemaFieldsSource(this);
 
     makeObservable(this, {
-      loadedSchema: observable.ref,
-      schema: computed,
-      fields: computed,
       filterableFields: computed,
-      mergeFields: action,
     });
   }
 
-  get schema(): Schema | undefined {
-    return this.loadedSchema?.schema;
-  }
-
-  get fieldActions() {
-    return this.loadedSchema?.fieldActions;
-  }
-
-  get fields(): Field[] {
-    const fields = this.schema?.fields ?? {};
-    return Object.values(fields).filter((f): f is Field => Boolean(f));
-  }
-
   /** Fields whose type maps to an auto filter in the toolbar. */
   get filterableFields(): Field[] {
-    return this.fields.filter((f) => isFilterableFieldType(f.type));
+    return this.sourceState.fields.filter((f) => isFilterableFieldType(f.type));
   }
 
-  /** Loads the schema. CollectionFieldsSourceState runs this, tracks its status,
-   *  and shows a retry toast on failure. */
-  load = async (): Promise<void> => {
-    const loaded = await this.source.loadSchema();
-    runInAction(() => {
-      this.loadedSchema = loaded;
-    });
-  };
-
   /** Attaches this source to a table's toolbar via the shared wrapper. */
   setOnTable(toolbar: ToolbarCollectionState<any, any>) {
     this.toolbar = toolbar;
@@ -96,125 +48,4 @@ export class SchemaState<T = Record<string, unknown>> {
       ...schemaRendering(this),
     });
   }
-
-  /** Replaces the loaded schema's fields with the map returned by a mutation. */
-  mergeFields(fields: Schema['fields']) {
-    const current = this.loadedSchema;
-    if (!current) {
-      return;
-    }
-    this.loadedSchema = {
-      ...current,
-      schema: { ...current.schema, fields },
-    };
-  }
-
-  makePrimary = (fieldId: string): void => {
-    const run = this.fieldActions?.makePrimary;
-    if (!run) {
-      return;
-    }
-    void this.runFieldMutation(
-      this.makePrimaryTask,
-      () => run(fieldId),
-      {
-        successMessage: 'Primary field updated',
-        successBi: 'cairo-field-action-make-primary-success',
-        errorMessage: "Couldn't update primary field",
-        errorBi: 'cairo-field-action-make-primary-error',
-      },
-      () => this.makePrimary(fieldId),
-    );
-  };
-
-  duplicateField = (fieldId: string): void => {
-    const run = this.fieldActions?.duplicateField;
-    if (!run) {
-      return;
-    }
-    void this.runFieldMutation(
-      this.duplicateTask,
-      () => run(fieldId),
-      {
-        successMessage: 'Field duplicated',
-        successBi: 'cairo-field-action-duplicate-success',
-        errorMessage: "Couldn't duplicate field",
-        errorBi: 'cairo-field-action-duplicate-error',
-      },
-      () => this.duplicateField(fieldId),
-    );
-  };
-
-  duplicateFieldWithContent = (fieldId: string): void => {
-    const run = this.fieldActions?.duplicateFieldWithContent;
-    if (!run) {
-      return;
-    }
-    void this.runFieldMutation(
-      this.duplicateWithContentTask,
-      () => run(fieldId),
-      {
-        successMessage: 'Field duplicated with content',
-        successBi: 'cairo-field-action-duplicate-with-content-success',
-        errorMessage: "Couldn't duplicate field with content",
-        errorBi: 'cairo-field-action-duplicate-with-content-error',
-      },
-      () => this.duplicateFieldWithContent(fieldId),
-    );
-  };
-
-  // makePrimary/duplicate return the updated fields map (like add/edit/delete),
-  // so merge it locally — same path as the modal actions, no full re-fetch.
-  // Toasts + loading mirror the field-management actions, so the header and the
-  // side panel report the same outcome.
-  private runFieldMutation = async (
-    task: TaskState<unknown>,
-    run: () => Promise<Schema['fields']>,
-    toasts: {
-      successMessage: string;
-      successBi: string;
-      errorMessage: string;
-      errorBi: string;
-    },
-    retry: () => void,
-  ) => {
-    if (task.status.isLoading) {
-      return;
-    }
-    await task.run(async () => {
-      const fields = await run();
-      runInAction(() => this.mergeFields(fields));
-    });
-    if (task.status.isSuccess) {
-      this.notify({
-        type: 'SUCCESS',
-        message: toasts.successMessage,
-        biName: toasts.successBi,
-      });
-    } else if (task.status.isError) {
-      this.notify({
-        type: 'ERROR',
-        message: toasts.errorMessage,
-        biName: toasts.errorBi,
-        action: {
-          text: 'Try again',
-          onClick: retry,
-          removeToastOnClick: true,
-        },
-      });
-    }
-  };
-
-  private currentToastRemove: RemoveToast | undefined;
-
-  // Shared by the source's field mutations (make-primary / duplicate / delete) to
-  // surface a toast; deduped against the previous one.
-  notify = (config: ToastConfig) => {
-    const show = this.container.showToast;
-    if (!show) {
-      return;
-    }
-    this.currentToastRemove?.();
-    this.currentToastRemove = show(config).remove;
-  };
 }

package/src/components/SchemaSource/schemaFieldActions.ts

@@ -28,14 +28,16 @@ export const schemaFieldActionHandlers =
     origin: CustomFieldOrigin;
     location: string;
   }): FieldActionHandlersConfig | null => {
-    const field = s.schema?.fields[fieldId];
+    const { sourceState } = s;
+    const field = sourceState.schema?.fields[fieldId];
     if (!field) {
       return null;
     }
-    const fa = s.fieldActions;
-    const canEdit = s.fieldManagement.canEditField(field);
-    const canDelete = s.schema
-      ? s.source.canDeleteField(field, s.schema)
+    const fa = sourceState.fieldActions;
+    const canEdit =
+      s.fieldsSource.fieldManagement?.canEditField(field) ?? false;
+    const canDelete = sourceState.schema
+      ? sourceState.source.canDeleteField(field, sourceState.schema)
       : false;
 
     const handlers: FieldActionHandlers = {};
@@ -44,14 +46,14 @@ export const schemaFieldActionHandlers =
         panel.openCustomFieldModal({ fieldId, origin });
     }
     if (fa?.makePrimary) {
-      handlers.makePrimary = () => s.makePrimary(fieldId);
+      handlers.makePrimary = () => sourceState.makePrimary(fieldId);
     }
     if (fa?.duplicateField) {
-      handlers.duplicateField = () => s.duplicateField(fieldId);
+      handlers.duplicateField = () => sourceState.duplicateField(fieldId);
     }
     if (fa?.duplicateFieldWithContent) {
       handlers.duplicateFieldWithContent = () =>
-        s.duplicateFieldWithContent(fieldId);
+        sourceState.duplicateFieldWithContent(fieldId);
     }
     if (canDelete && fa?.deleteField) {
       handlers.delete = () =>
@@ -70,12 +72,13 @@ export const schemaFieldActionHandlers =
       handlers,
       disabledTooltips: schemaFieldDisabledTooltips(field, {
         canEdit,
-        canAddFields: s.fieldManagement.canAddFields,
+        canAddFields: s.fieldsSource.fieldManagement?.canAddFields ?? false,
       }),
       loading: {
-        makePrimary: s.makePrimaryTask.status.isLoading,
-        duplicateField: s.duplicateTask.status.isLoading,
-        duplicateFieldWithContent: s.duplicateWithContentTask.status.isLoading,
+        makePrimary: sourceState.makePrimaryTask.status.isLoading,
+        duplicateField: sourceState.duplicateTask.status.isLoading,
+        duplicateFieldWithContent:
+          sourceState.duplicateWithContentTask.status.isLoading,
       },
     };
   };
@@ -84,7 +87,7 @@ export const createSchemaFieldActionsMenu =
   (s: SchemaState<any>) =>
   (panel: CustomFieldsPanelState): FieldActionsMenuBuilder => {
     const handlers = schemaFieldActionHandlers(s, panel);
-    const t = s.container.translate;
+    const t = s.sourceState.container.translate;
     return (args) =>
       buildFieldActionsMenu({
         fieldId: args.fieldId,
@@ -93,9 +96,9 @@ export const createSchemaFieldActionsMenu =
         translate: t,
         tooltipContent: t('cairo.custom-columns.more-actions.tooltip'),
         bi: {
-          reportBi: s.container.reportBi,
+          reportBi: s.sourceState.container.reportBi,
           location: args.location,
-          listSize: s.fields.length,
+          listSize: s.sourceState.fields.length,
         },
       });
   };

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -1,15 +1,21 @@
-import { FieldDraft, FieldManagement, NonReferenceField } from '@wix/bex-core';
+import {
+  FieldDraft,
+  FieldManagement,
+  NonReferenceField,
+  SourceState,
+} from '@wix/bex-core';
 import { runInAction } from 'mobx';
-import type { SchemaState } from './SchemaState';
 import { standardFieldTypeLabels } from './standardFieldTypeLabels';
 
 /**
- * Builds the source-neutral FieldManagement over SchemaState. add/edit/delete
- * call the schema's FieldActions, then merge the returned fields into the loaded
- * schema so the columns update from the response (no reload). The creatable
- * types, permissions, and can-edit/add rules come from the source.
+ * Builds the source-neutral FieldManagement over a source's state. add/edit/
+ * delete call the schema's FieldActions, then merge the returned fields into
+ * the loaded schema so the columns update from the response (no reload). The
+ * creatable types, permissions, and can-edit/add rules come from the source.
  */
-export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
+export const schemaFieldManagement = (
+  sourceState: SourceState<any>,
+): FieldManagement => {
   const draftToField = (draft: FieldDraft): NonReferenceField => ({
     id: draft.key,
     displayName: draft.name,
@@ -20,29 +26,32 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
 
   return {
     get canAddFields() {
-      return s.schema ? s.source.canAddFields(s.schema) : false;
+      const { schema, source } = sourceState;
+      return schema ? source.canAddFields(schema) : false;
     },
     addFieldDisabled: false,
-    canEditField: (field) =>
-      s.schema ? s.source.canEditField(field, s.schema) : false,
-    supportsPii: s.source.supportsPii,
-    permissions: s.source.fieldPermissions,
+    canEditField: (field) => {
+      const { schema, source } = sourceState;
+      return schema ? source.canEditField(field, schema) : false;
+    },
+    supportsPii: sourceState.source.supportsPii,
+    permissions: sourceState.source.fieldPermissions,
     // Self-contained: does the delete and reports its own toast (matching the
     // DataExtension source). Rethrows on failure so the shared delete modal stays
     // open for a retry.
     deleteField: async (fieldId) => {
       try {
-        const fields = await s.fieldActions?.deleteField?.(fieldId);
+        const fields = await sourceState.fieldActions?.deleteField?.(fieldId);
         if (fields) {
-          runInAction(() => s.mergeFields(fields));
+          runInAction(() => sourceState.mergeFields(fields));
         }
-        s.notify({
+        sourceState.notify({
           type: 'SUCCESS',
           message: 'Field deleted',
           biName: 'cairo-field-action-delete-success',
         });
       } catch (e) {
-        s.notify({
+        sourceState.notify({
           type: 'ERROR',
           message: "Couldn't delete field",
           biName: 'cairo-field-action-delete-error',
@@ -52,8 +61,8 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
     },
 
     get creatableFieldTypes() {
-      const t = s.container.translate;
-      return s.source.creatableFieldTypes.map((ft) => {
+      const t = sourceState.container.translate;
+      return sourceState.source.creatableFieldTypes.map((ft) => {
         // The standard pair applies only when the source didn't custom-label
         // the entry — a custom label with the standard placeholder would show
         // contradictory copy (the modal falls back to its generic placeholder).
@@ -73,25 +82,27 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
       });
     },
     get existingFieldKeys() {
-      return s.fields.map((f) => f.id);
+      return sourceState.fields.map((f) => f.id);
     },
 
     addField: async (draft) => {
-      const fields = await s.fieldActions?.addField?.(draftToField(draft));
+      const fields = await sourceState.fieldActions?.addField?.(
+        draftToField(draft),
+      );
       if (fields) {
-        runInAction(() => s.mergeFields(fields));
+        runInAction(() => sourceState.mergeFields(fields));
       }
     },
     editField: async (fieldId, draft) => {
-      const fields = await s.fieldActions?.editField?.(fieldId, {
+      const fields = await sourceState.fieldActions?.editField?.(fieldId, {
         displayName: draft.name,
       });
       if (fields) {
-        runInAction(() => s.mergeFields(fields));
+        runInAction(() => sourceState.mergeFields(fields));
       }
     },
     getFieldDraft: (fieldId) => {
-      const field = s.schema?.fields[fieldId];
+      const field = sourceState.schema?.fields[fieldId];
       if (!field) {
         return undefined;
       }

package/src/components/SchemaSource/schemaFieldsSource.ts

@@ -1,5 +1,6 @@
 import type { FieldsSource } from '@wix/bex-core';
 import type { SchemaState } from './SchemaState';
+import { schemaFieldManagement } from './schemaFieldManagement';
 
 /**
  * Exposes SchemaState as a source-neutral FieldsSource. Reads through to the
@@ -7,17 +8,18 @@ import type { SchemaState } from './SchemaState';
  * archiving, so those members are omitted.
  */
 export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
+  const { sourceState } = s;
   const source: FieldsSource = {
-    load: () => s.load(),
+    load: () => sourceState.load(),
 
     get fields() {
-      return s.fields;
+      return sourceState.fields;
     },
     get filterableFields() {
       return s.filterableFields;
     },
     get manageableFields() {
-      return s.fields.filter((f) => !f.isSystem);
+      return sourceState.fields.filter((f) => !f.isSystem);
     },
     columnIdForField: (field) => field.id,
     queryFieldId: (field) => field.id,
@@ -27,15 +29,15 @@ export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
       [field.id]: value,
     }),
 
-    fieldManagement: s.fieldManagement,
+    fieldManagement: schemaFieldManagement(sourceState),
     get fieldActions() {
-      return s.fieldActions;
+      return sourceState.fieldActions;
     },
 
     // Merge a returned fields map into the loaded schema (e.g. after an import
-    // creates fields). `mergeFields` is a SchemaState action, so the columns
+    // creates fields). `mergeFields` is a SourceState action, so the columns
     // rebuild reactively with no refetch.
-    mergeFields: (fields) => s.mergeFields(fields),
+    mergeFields: (fields) => sourceState.mergeFields(fields),
   };
 
   return source;

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -1,3 +1,4 @@
+import { SourceState } from '@wix/bex-core';
 import type { SchemaSource } from '@wix/bex-core';
 import type { FieldsSourceProvider } from '../fieldsSourceProvider';
 import type { ToolbarCollectionState } from '../../state';
@@ -9,7 +10,7 @@ import { SchemaState } from './SchemaState';
  * in the table hook — keeps it out of the core table bundle; only consumers that
  * call `tableSchemaSource` pull it in.
  *
- * `schemaState` exposes the attached state so `useSchemaImport` reads the same
+ * `schemaState` exposes the attached state so the import reads the same
  * live schema the table renders — import always matches the visible columns
  * (including fields it just created, or ones added via the field-management
  * panel), rather than a separate loaded copy.
@@ -24,12 +25,12 @@ export type TableSchemaSource<T = Record<string, unknown>> = SchemaSource<T> &
  * `...source`): a getter placed in a spread literal is evaluated once and
  * flattened to a static `undefined` data property by Object.assign-based (loose)
  * object-spread transpilation, which silently drops the live binding — so
- * `useSchemaImport` would never see the loaded fields. A prototype accessor is
+ * the import would never see the loaded fields. A prototype accessor is
  * always a real accessor, immune to that.
  *
  * The wrapped source's members (`collectionConfig`, `loadSchema`, …) are copied
  * onto the instance so it's usable anywhere a `SchemaSource` is; `state` is
- * created once on attach and reused, so the table and `useSchemaImport` share
+ * created once on attach and reused, so the table and the import share
  * one SchemaState (and one load).
  */
 class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
@@ -49,8 +50,23 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   get collectionId() {
     return this.source.collectionId;
   }
-  get collectionConfig() {
-    return this.source.collectionConfig;
+  get paginationMode() {
+    return this.source.paginationMode;
+  }
+  get itemKey() {
+    return this.source.itemKey;
+  }
+  get itemName() {
+    return this.source.itemName;
+  }
+  get getFieldValue() {
+    return this.source.getFieldValue;
+  }
+  get setFieldValue() {
+    return this.source.setFieldValue;
+  }
+  get references() {
+    return this.source.references;
   }
   get creatableFieldTypes() {
     return this.source.creatableFieldTypes;
@@ -83,8 +99,10 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
 
   setOnTable(toolbar: ToolbarCollectionState<any, any>): void {
     this.state ??= new SchemaState<T>({
-      container: toolbar.container,
-      source: this.source,
+      sourceState: new SourceState<T>({
+        container: toolbar.container,
+        source: this.source,
+      }),
     });
     this.state.setOnTable(toolbar);
   }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget401057936";
+var _namespace_ = "SetupWidget525839026";
 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":"SetupWidget401057936__root","row":"SetupWidget401057936__row","completedCta":"SetupWidget401057936__completedCta","card":"SetupWidget401057936__card","stepIcon":"SetupWidget401057936__stepIcon","chevron":"SetupWidget401057936__chevron","chevronDisabled":"SetupWidget401057936__chevronDisabled","inProgressLabel":"SetupWidget401057936__inProgressLabel"};
+export var classes = {"root":"SetupWidget525839026__root","row":"SetupWidget525839026__row","completedCta":"SetupWidget525839026__completedCta","card":"SetupWidget525839026__card","stepIcon":"SetupWidget525839026__stepIcon","chevron":"SetupWidget525839026__chevron","chevronDisabled":"SetupWidget525839026__chevronDisabled","inProgressLabel":"SetupWidget525839026__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SingleSelectFilterBase/SingleSelectFilterBase.tsx

@@ -10,6 +10,7 @@ import { DropdownSelectState } from '../../state';
 import { BuildSectionOptionsArgs, ListItem } from '../../hooks';
 import { FilterProps } from '../../model';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
   keyedItem: KeyedItem<T>;
@@ -48,6 +49,7 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
   const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
     popoverProps,
   });
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Dropdown
@@ -55,7 +57,7 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border="round"
+      border={isBmHarmonyTheme ? undefined : 'round'}
       closeOnSelect
       options={options}
       clearButton={clearButton}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3052355857";
+var _namespace_ = "SkeletonCard163200451";
 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":"SkeletonCard3052355857__root","headerLoading":"SkeletonCard3052355857__headerLoading"};
+export var classes = {"root":"SkeletonCard163200451__root","headerLoading":"SkeletonCard163200451__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/TabTotal/TabTotalCounterBadge.tsx

@@ -7,6 +7,7 @@ import {
 } from './useFilterValueTotalState';
 import { FiltersMap } from '@wix/bex-core';
 import { initTabTotal } from '../../state/initTabTotal';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
   extends UseFilterValueTotalStateParams<V, T, F>,
@@ -15,7 +16,11 @@ export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
 function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   props: TabCounterBadgeProps<V, T, F>,
 ) {
-  const { value, skin = 'neutralStandard', ...rest } = props;
+  const isHarmonyTheme = useBmHarmonyTheme();
+  const defaultSkin = isHarmonyTheme ? 'general' : 'neutralStandard';
+  const defaultSize = isHarmonyTheme ? 'tiny' : 'small';
+
+  const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;
   const state = useFilterValueTotalState(props);
 
   const {
@@ -23,7 +28,7 @@ function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   } = state;
 
   return totalStatus === 'success' && lifecycleState === 'result' ? (
-    <CounterBadge skin={skin} {...rest}>
+    <CounterBadge size={size} skin={skin} {...rest}>
       {total}
     </CounterBadge>
   ) : null;