@wix/patterns 1.433.0 → 1.434.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow1504112851";
+var _namespace_ = "LoadingRow1130441557";
 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":"LoadingRow1504112851__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1504112851__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1130441557__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1130441557__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_ = "MaxHeightText3055850773";
+var _namespace_ = "MaxHeightText1050269616";
 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":"MaxHeightText3055850773__root"};
+export var classes = {"root":"MaxHeightText1050269616__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_ = "MaxLines1849116077";
+var _namespace_ = "MaxLines1963498891";
 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":"MaxLines1849116077__root"};
+export var classes = {"root":"MaxLines1963498891__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1481972970";
+var _namespace_ = "MultiBulkActionToolbar3848768586";
 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":"MultiBulkActionToolbar1481972970__root","leftGroupWrapper":"MultiBulkActionToolbar1481972970__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1481972970__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1481972970__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3848768586__root","leftGroupWrapper":"MultiBulkActionToolbar3848768586__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3848768586__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3848768586__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow2829227085";
+var _namespace_ = "NestedTableRow2441062097";
 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":"NestedTableRow2829227085__root","firstLevel":"NestedTableRow2829227085__firstLevel","placeholder":"NestedTableRow2829227085__placeholder","parentHovered":"NestedTableRow2829227085__parentHovered"};
+export var classes = {"root":"NestedTableRow2441062097__root","firstLevel":"NestedTableRow2441062097__firstLevel","placeholder":"NestedTableRow2441062097__placeholder","parentHovered":"NestedTableRow2441062097__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep205887611";
+var _namespace_ = "PickerContentAdditionalStep1055771732";
 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":"PickerContentAdditionalStep205887611__root","titles":"PickerContentAdditionalStep205887611__titles","suffix":"PickerContentAdditionalStep205887611__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1055771732__root","titles":"PickerContentAdditionalStep1055771732__titles","suffix":"PickerContentAdditionalStep1055771732__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -11,7 +11,7 @@ import { standardFieldTypeLabels } from './standardFieldTypeLabels';
  * 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.
+ * field modal, permissions, and can-edit/add rules come from the source.
  */
 export const schemaFieldManagement = (
   sourceState: SourceState<any>,
@@ -34,20 +34,6 @@ export const schemaFieldManagement = (
       const { schema, source } = sourceState;
       return schema ? source.canEditField(field, schema) : false;
     },
-    supportsPii: sourceState.source.supportsPii,
-    get piiWarning() {
-      return sourceState.source.piiWarning?.();
-    },
-    permissions: sourceState.source.fieldPermissions,
-    get fieldModalText() {
-      const t = sourceState.container.translate;
-      return (
-        sourceState.source.fieldModalText ?? {
-          addTitle: t('cairo.customFields.addCustomField.modal.title'),
-          editTitle: t('cairo.customFields.editCustomField.modal.title'),
-        }
-      );
-    },
     // 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.
@@ -72,29 +58,40 @@ export const schemaFieldManagement = (
       }
     },
 
-    get creatableFieldTypes() {
+    get fieldModal() {
       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).
-        const standard =
-          ft.label == null
-            ? standardFieldTypeLabels[ft.patternsType]
-            : undefined;
-        return {
-          id: ft.patternsType,
-          label:
-            ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
-          namePlaceholder:
-            ft.namePlaceholder ??
-            (standard ? t(standard.namePlaceholderKey) : undefined),
-          subtitle: ft.subtitle,
-          group: ft.group,
-          supportsPii: ft.supportsPii,
-          patternsType: ft.patternsType,
-        };
-      });
+      const { fieldModal } = sourceState.source;
+      return {
+        text: fieldModal.text ?? {
+          addTitle: t('cairo.customFields.addCustomField.modal.title'),
+          editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        },
+        types: fieldModal.types.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).
+          const standard =
+            ft.label == null
+              ? standardFieldTypeLabels[ft.patternsType]
+              : undefined;
+          return {
+            id: ft.patternsType,
+            label:
+              ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
+            namePlaceholder:
+              ft.namePlaceholder ??
+              (standard ? t(standard.namePlaceholderKey) : undefined),
+            subtitle: ft.subtitle,
+            group: ft.group,
+            supportsPii: ft.supportsPii,
+            piiWarning: ft.piiWarning,
+            settingsSection: ft.settingsSection,
+            patternsType: ft.patternsType,
+          };
+        }),
+        permissions: sourceState.source.fieldPermissions,
+        supportsPii: sourceState.source.supportsPii,
+      };
     },
     get existingFieldKeys() {
       return sourceState.fields.map((f) => f.id);
@@ -103,15 +100,18 @@ export const schemaFieldManagement = (
     addField: async (draft) => {
       const fields = await sourceState.fieldActions?.addField?.(
         draftToField(draft),
+        draft.settings,
       );
       if (fields) {
         runInAction(() => sourceState.mergeFields(fields));
       }
     },
     editField: async (fieldId, draft) => {
-      const fields = await sourceState.fieldActions?.editField?.(fieldId, {
-        displayName: draft.name,
-      });
+      const fields = await sourceState.fieldActions?.editField?.(
+        fieldId,
+        { displayName: draft.name },
+        draft.settings,
+      );
       if (fields) {
         runInAction(() => sourceState.mergeFields(fields));
       }
@@ -130,6 +130,7 @@ export const schemaFieldManagement = (
         writeApps: false,
         writeUsers: false,
         containsPii: field.isPii ?? false,
+        field,
       };
     },
   };

package/src/components/SchemaSource/standardFieldTypeLabels.ts

@@ -1,8 +1,8 @@
 import type { PatternsFieldType, TranslationsKeys } from '@wix/bex-core';
 
 /**
- * The add-field modal's standard name and name-input placeholder per creatable
- * field type, used when a source declares a type without a custom label.
+ * The add-field modal's standard name and name-input placeholder per field
+ * type, used when a source declares a type without a custom label.
  * NUMBER uses the integer variant's copy.
  */
 export const standardFieldTypeLabels: Partial<

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -74,8 +74,8 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
     // wrapper would hand the components a source with no container.
     return (this.source as SchemaSourceWithFields).fieldsContainer;
   }
-  get creatableFieldTypes() {
-    return this.source.creatableFieldTypes;
+  get fieldModal() {
+    return this.source.fieldModal;
   }
   get fieldTypes() {
     return this.source.fieldTypes;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent3106237506";
+var _namespace_ = "ScrollableContent2990159044";
 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":"ScrollableContent3106237506__root"};
+export var classes = {"root":"ScrollableContent2990159044__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_ = "SetupWidget2832764723";
+var _namespace_ = "SetupWidget122544272";
 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":"SetupWidget2832764723__root","row":"SetupWidget2832764723__row","completedCta":"SetupWidget2832764723__completedCta","card":"SetupWidget2832764723__card","stepIcon":"SetupWidget2832764723__stepIcon","chevron":"SetupWidget2832764723__chevron","chevronDisabled":"SetupWidget2832764723__chevronDisabled","inProgressLabel":"SetupWidget2832764723__inProgressLabel"};
+export var classes = {"root":"SetupWidget122544272__root","row":"SetupWidget122544272__row","completedCta":"SetupWidget122544272__completedCta","card":"SetupWidget122544272__card","stepIcon":"SetupWidget122544272__stepIcon","chevron":"SetupWidget122544272__chevron","chevronDisabled":"SetupWidget122544272__chevronDisabled","inProgressLabel":"SetupWidget122544272__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1542096506";
+var _namespace_ = "SkeletonCard2938728785";
 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":"SkeletonCard1542096506__root","headerLoading":"SkeletonCard1542096506__headerLoading"};
+export var classes = {"root":"SkeletonCard2938728785__root","headerLoading":"SkeletonCard2938728785__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_ = "SlidingModal942360491";
+var _namespace_ = "SlidingModal2563845956";
 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":"SlidingModal942360491__root"};
+export var classes = {"root":"SlidingModal2563845956__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader448034550";
+var _namespace_ = "AddFieldColumnHeader1409429537";
 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":"AddFieldColumnHeader448034550__root","title":"AddFieldColumnHeader448034550__title","hoverBridge":"AddFieldColumnHeader448034550__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1409429537__root","title":"AddFieldColumnHeader1409429537__title","hoverBridge":"AddFieldColumnHeader1409429537__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsDefault.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Tabs } from '@wix/design-system';
+import { Tabs, TabsProps } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { Filter, FiltersMap } from '@wix/bex-core';
-import { ALL_TAB_ITEM_ID, TabsFilterItem, TabsFilterItemBase } from './types';
+import { ALL_TAB_ITEM_ID, TabsFilterItemBase, TabsFilterItem } from './types';
 import { TabsFilterState } from './TabsFilterState';
 
 export interface TabsDefaultProps<V, T, F extends FiltersMap> {
@@ -12,6 +12,7 @@ export interface TabsDefaultProps<V, T, F extends FiltersMap> {
   selectedId: string;
   state: TabsFilterState<T, F>;
   type?: 'uniformFull';
+  size?: TabsProps['size'];
   onChange?: (value: V | null | undefined) => unknown;
   all?: string | null | false;
 }
@@ -19,7 +20,7 @@ export interface TabsDefaultProps<V, T, F extends FiltersMap> {
 function _TabsDefault<V, T, F extends FiltersMap>(
   props: TabsDefaultProps<V, T, F>,
 ) {
-  const { state, filter, selectedId, items, type, onChange, all } = props;
+  const { state, filter, selectedId, items, type, size, onChange, all } = props;
   const { itemKey } = filter;
 
   const { responsive } = state;
@@ -49,6 +50,7 @@ function _TabsDefault<V, T, F extends FiltersMap>(
         filter.refresh(values);
       }}
       type={type}
+      size={size}
       items={items}
       hasDivider={false}
     />

package/src/components/TabsFilter/TabsFilter.st.css

@@ -1,8 +1,12 @@
 @property st-global(--wds-color-text-standard-primary);
 @property st-global(--wds-tabs-label-fill);
 @property st-global(--wds-tabs-label-fill-active);
+@property st-global(--wds-tabs-label-font-size-medium);
+@property st-global(--wds-tabs-label-line-height-medium);
 @property st-global(--wsr-color-B10);
 @property st-global(--wsr-color-D10);
+@property st-global(--wsr-text-font-size-medium);
+@property st-global(--wsr-text-line-height-medium);
 
 .root {
   -st-states: selected;
@@ -10,6 +14,8 @@
 
 .root .title {
   color: var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
+  font-size: var(--wds-tabs-label-font-size-medium, var(--wsr-text-font-size-medium, 16px));
+  line-height: var(--wds-tabs-label-line-height-medium, var(--wsr-text-line-height-medium, 22px));
 }
 
 .root:selected .title,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3678414365";
+var _namespace_ = "TabsFilter2813371047";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"TabsFilter3678414365__root","title":"TabsFilter3678414365__title"};
+export var classes = {"root":"TabsFilter2813371047__root","title":"TabsFilter2813371047__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-tabs-label-fill":"--wds-tabs-label-fill","wds-tabs-label-fill-active":"--wds-tabs-label-fill-active","wsr-color-B10":"--wsr-color-B10","wsr-color-D10":"--wsr-color-D10"}; 
+export var vars = {"wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-tabs-label-fill":"--wds-tabs-label-fill","wds-tabs-label-fill-active":"--wds-tabs-label-fill-active","wds-tabs-label-font-size-medium":"--wds-tabs-label-font-size-medium","wds-tabs-label-line-height-medium":"--wds-tabs-label-line-height-medium","wsr-color-B10":"--wsr-color-B10","wsr-color-D10":"--wsr-color-D10","wsr-text-font-size-medium":"--wsr-text-font-size-medium","wsr-text-line-height-medium":"--wsr-text-line-height-medium"}; 
 
 
 

package/src/components/TabsFilter/TabsFilter.tsx

@@ -9,6 +9,7 @@ import { Box, DropdownProps, TabsProps } from '@wix/design-system';
 import { Filter } from '@wix/bex-core';
 import { runInAction } from 'mobx';
 import { FilterContextProvider } from '../FilterContext';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { observer } from 'mobx-react-lite';
 import { TabTitle } from './TabTitle';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -91,6 +92,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     mobilePopoverProps,
   } = props;
   const { itemKey, itemName } = filter;
+  const size = useBmHarmonyTheme() ? 'small' : undefined;
 
   const table = useToolbarCollectionContext();
   const filterAllValueTotal = useFilterValueTotalState({
@@ -229,6 +231,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
             state={state}
             onChange={onChange}
             type={type}
+            size={size}
             all={all}
           />
         ) : (

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2727734484";
+var _namespace_ = "ManageTagsModal2370684890";
 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":"ManageTagsModal2727734484__root"};
+export var classes = {"root":"ManageTagsModal2370684890__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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