@wix/patterns 1.433.0 → 1.436.0

package/src/components/SetupWidget/SetupStepRow.tsx

@@ -7,6 +7,7 @@ import {
   Badge,
   Divider,
   Tooltip,
+  ClickableCard,
 } from '@wix/design-system';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -22,6 +23,8 @@ export interface SetupStepRowProps {
   onActivate: () => void;
   /** Supplies the inline-expansion content (render prop on the widget). */
   renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
+  /** Tints the row's background when it's focused (off under the Harmony theme, see `useBmHarmonyTheme`). */
+  focusedBackground?: boolean;
 }
 
 /**
@@ -29,8 +32,8 @@ export interface SetupStepRowProps {
  * - completed → green check, struck-through title, optional completed CTA
  * - disabled → muted bullet + disabled CTA (permission-denied)
  * - in-progress → "In progress" badge next to the title
- * - focused → blue surface, bold title, primary CTA
- * - hoverable rows tint blue on hover (handled in Stylable)
+ * - focused → bolder border, bold title, primary CTA (+ background tint if
+ *   `focusedBackground` is on)
  */
 export const SetupStepRow = ({
   step,
@@ -38,6 +41,7 @@ export const SetupStepRow = ({
   expanded,
   onActivate,
   renderStepContent,
+  focusedBackground,
 }: SetupStepRowProps) => {
   const { translate: t } = useWixPatternsContainer();
 
@@ -50,7 +54,6 @@ export const SetupStepRow = ({
   // Completed steps stay actionable when they carry a completed CTA (G2).
   const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
   const clickable = (!isCompleted && !isDisabled) || showCompletedCta;
-  const hoverable = !isFocused && !isCompleted && !isDisabled;
 
   const handleClick = clickable ? onActivate : undefined;
 
@@ -60,8 +63,7 @@ export const SetupStepRow = ({
       data-focused={isFocused}
       className={st(classes.row, {
         focused: isFocused,
-        hoverable,
-        clickable,
+        withBackground: !!focusedBackground,
       })}
       onClick={handleClick}
       onKeyDown={
@@ -77,121 +79,127 @@ export const SetupStepRow = ({
       role={clickable ? 'button' : undefined}
       tabIndex={clickable ? 0 : undefined}
     >
-      {/* Reserve the CTA button's height (small button = 30px) so rows keep a
-          stable height whether or not they render a CTA — otherwise completed
-          rows (which drop the CTA) would shrink and the widget would reflow. */}
-      <Box
-        align="space-between"
-        verticalAlign="middle"
-        width="100%"
-        minHeight="30px"
-      >
-        <Box minHeight="24px" verticalAlign="middle">
-          <SetupStepIcon status={step.status} />
+      <ClickableCard skin="outline" hasPadding={false} disabled={isDisabled}>
+        <Box direction="vertical" padding="6px">
+          {/* Reserve the CTA button's height (small button = 30px) so rows keep a
+              stable height whether or not they render a CTA — otherwise completed
+              rows (which drop the CTA) would shrink and the widget would reflow. */}
           <Box
-            paddingLeft="SP2"
-            paddingRight="SP2"
+            align="space-between"
             verticalAlign="middle"
-            gap="SP1"
+            width="100%"
+            minHeight="30px"
           >
-            <Text
-              dataHook={`setup-step-title-${step.id}`}
-              size="small"
-              skin={isDisabled ? 'disabled' : 'standard'}
-              weight={isFocused ? 'bold' : 'thin'}
-              secondary={isCompleted}
-              light={isCompleted}
-            >
-              {isCompleted ? <del>{step.title}</del> : step.title}
-            </Text>
-            {isInProgress && !isInlineExpanded && (
-              <Box marginTop="2px">
-                <Badge size="tiny" skin="urgent" type="transparent">
-                  {t('cairo.setupWidget.step.inProgress')}
-                </Badge>
+            <Box minHeight="24px" verticalAlign="middle">
+              <SetupStepIcon status={step.status} />
+              <Box
+                paddingLeft="SP2"
+                paddingRight="SP2"
+                verticalAlign="middle"
+                gap="SP1"
+              >
+                <Text
+                  dataHook={`setup-step-title-${step.id}`}
+                  size="small"
+                  skin={isDisabled ? 'disabled' : 'standard'}
+                  weight={isFocused ? 'bold' : 'thin'}
+                  secondary={isCompleted}
+                  light={isCompleted}
+                >
+                  {isCompleted ? <del>{step.title}</del> : step.title}
+                </Text>
+                {isInProgress && !isInlineExpanded && (
+                  <Box marginTop="2px">
+                    <Badge size="tiny" skin="urgent" type="transparent">
+                      {t('cairo.setupWidget.step.inProgress')}
+                    </Badge>
+                  </Box>
+                )}
               </Box>
-            )}
-          </Box>
-        </Box>
-        {showCta &&
-          (() => {
-            const ctaNode = (
-              <Box verticalAlign="middle">
-                <Button
+            </Box>
+            {showCta &&
+              (() => {
+                const ctaNode = (
+                  <Box verticalAlign="middle">
+                    <Button
+                      dataHook={`setup-step-cta-${step.id}`}
+                      size="small"
+                      priority={
+                        !isDisabled && !isFocused ? 'secondary' : 'primary'
+                      }
+                      disabled={isDisabled}
+                      ellipsis={false}
+                      onClick={(event: React.MouseEvent) => {
+                        event.stopPropagation();
+                        onActivate();
+                      }}
+                    >
+                      {step.ctaLabel}
+                    </Button>
+                  </Box>
+                );
+
+                // Disabled steps explain why the CTA is disabled (G5).
+                return isDisabled ? (
+                  <Tooltip
+                    dataHook={`setup-step-disabled-tooltip-${step.id}`}
+                    content={
+                      step.disabledTooltip ??
+                      // Translation-key id stays `lockedTooltip` until the
+                      // Translation Center key is renamed (TC follow-up to T2).
+                      t('cairo.setupWidget.step.lockedTooltip')
+                    }
+                  >
+                    {ctaNode}
+                  </Tooltip>
+                ) : (
+                  ctaNode
+                );
+              })()}
+            {showCompletedCta && (
+              <Box
+                verticalAlign="middle"
+                marginRight="SP2"
+                className={st(classes.completedCta)}
+              >
+                <TextButton
                   dataHook={`setup-step-cta-${step.id}`}
                   size="small"
-                  priority={!isDisabled && !isFocused ? 'secondary' : 'primary'}
-                  disabled={isDisabled}
-                  ellipsis={false}
                   onClick={(event: React.MouseEvent) => {
                     event.stopPropagation();
                     onActivate();
                   }}
                 >
-                  {step.ctaLabel}
-                </Button>
+                  {step.completedCtaLabel}
+                </TextButton>
               </Box>
-            );
-
-            // Disabled steps explain why the CTA is disabled (G5).
-            return isDisabled ? (
-              <Tooltip
-                dataHook={`setup-step-disabled-tooltip-${step.id}`}
-                content={
-                  step.disabledTooltip ??
-                  // Translation-key id stays `lockedTooltip` until the
-                  // Translation Center key is renamed (TC follow-up to T2).
-                  t('cairo.setupWidget.step.lockedTooltip')
-                }
-              >
-                {ctaNode}
-              </Tooltip>
-            ) : (
-              ctaNode
-            );
-          })()}
-        {showCompletedCta && (
-          <Box
-            verticalAlign="middle"
-            marginRight="SP2"
-            className={st(classes.completedCta)}
-          >
-            <TextButton
-              dataHook={`setup-step-cta-${step.id}`}
-              size="small"
-              onClick={(event: React.MouseEvent) => {
-                event.stopPropagation();
-                onActivate();
-              }}
-            >
-              {step.completedCtaLabel}
-            </TextButton>
-          </Box>
-        )}
-      </Box>
-      {isInlineExpanded && (
-        <Box
-          dataHook={`setup-step-content-${step.id}`}
-          direction="vertical"
-          paddingLeft="SP5"
-          paddingRight="SP1"
-          paddingBottom="SP1"
-          marginTop="SP2"
-        >
-          <Box marginBottom="SP2">
-            <Divider />
+            )}
           </Box>
-          {/* Stop clicks/keys inside the consumer widget from bubbling to the
-              row's toggle handler — otherwise interacting with the content
-              (e.g. an input) would collapse the card. */}
-          <div
-            onClick={(event) => event.stopPropagation()}
-            onKeyDown={(event) => event.stopPropagation()}
-          >
-            {renderStepContent?.(step)}
-          </div>
+          {isInlineExpanded && (
+            <Box
+              dataHook={`setup-step-content-${step.id}`}
+              direction="vertical"
+              paddingLeft="SP5"
+              paddingRight="SP1"
+              paddingBottom="SP1"
+              marginTop="SP2"
+            >
+              <Box marginBottom="SP2">
+                <Divider />
+              </Box>
+              {/* Stop clicks/keys inside the consumer widget from bubbling to the
+                  row's toggle handler — otherwise interacting with the content
+                  (e.g. an input) would collapse the card. */}
+              <div
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              >
+                {renderStepContent?.(step)}
+              </div>
+            </Box>
+          )}
         </Box>
-      )}
+      </ClickableCard>
     </div>
   );
 };

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

@@ -1,12 +1,8 @@
 @property st-global(--wds-color-border-dark-secondary);
-@property st-global(--wds-color-border-standard-primary);
-@property st-global(--wds-color-border-standard-secondary);
 @property st-global(--wds-color-fill-standard-tertiary);
 @property st-global(--wds-color-fill-standard-tertiary-hover);
 @property st-global(--wsr-color-D60);
 @property st-global(--wsr-color-D80);
-@property st-global(--wsr-color-B30);
-@property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-B60);
 @property st-global(--wds-color-text-standard-primary);
 @property st-global(--wds-color-text-disabled);
@@ -14,48 +10,43 @@
 @property st-global(--wsr-color-D10);
 @property st-global(--wsr-color-D10-30);
 @property st-global(--wsr-color-O10);
-@property st-global(--wds-space-100);
-@property st-global(--wds-border-radius-200);
 @property st-global(--wds-border-radius-400);
+@property st-global(--wds-clickable-card-outline-border-color);
+@property st-global(--wds-color-border-standard-primary-active);
+@property st-global(--wsr-color-B10);
+@property st-global(--wds-color-fill-surface-default);
 
 .root {}
 
 /* ---------------------------------------------------------------------------
- * Desktop step row — bordered card with hover/focus tinting. Hover only
- * applies to rows that are actually interactive (not focused / completed /
- * locked), gated by the `hoverable` state.
- *
- * Every var() carries the WDS fallback chain — semantic --wds token →
- * legacy --wsr token → hard-coded value — so the widget renders correctly
- * even when no theme stylesheet is loaded (same chains WDS ships itself).
+ * Desktop step row — border/background come from the nested WDS
+ * <ClickableCard skin="outline"> (SetupStepRow.tsx / SetupStepGroup.tsx); this
+ * class only handles this row's own layout and the focused-row border/
+ * background, which ClickableCard has no className/style prop to override
+ * directly. --wds-clickable-card-outline-border-color and --wds-color-fill-
+ * surface-default are the custom properties ClickableCard's own outline skin
+ * reads internally for border and background respectively — setting them
+ * here cascades down into it despite ClickableCard exposing no styling hook
+ * on its visible root element. The background tint (the `withBackground`
+ * state) is on unless the Harmony theme is active (`useBmHarmonyTheme`,
+ * SetupWidget.tsx) — it isn't part of the outline skin itself.
  * ------------------------------------------------------------------------- */
 .row {
-  -st-states: focused, hoverable, clickable;
+  -st-states: focused, withBackground;
 
   display: flex;
   flex-direction: column;
-  /* nearest default-theme token to the ~7-8px row padding; matches the SP1
-   * inner gaps for a consistent 6px rhythm */
-  padding: var(--wds-space-100, 6px);
-  border-radius: var(--wds-border-radius-200, 4px);
-  border: 1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
-  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
   /* clip (not hidden) keeps focus rings on the inner CTA from being cut off */
   overflow: clip;
+  --wds-clickable-card-outline-border-color: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
 }
 
-.row:clickable {
-  cursor: pointer;
-}
-
-.row:hoverable:hover {
-  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
-  border-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
+.row:focused {
+  --wds-clickable-card-outline-border-color: var(--wds-color-border-standard-primary-active, var(--wsr-color-B10, #116DFF));
 }
 
-.row:focused {
-  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
-  border-color: var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF));
+.row:focused:withBackground {
+  --wds-color-fill-surface-default: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
 }
 
 /* Completed step's CTA is revealed on row hover/focus (desktop), mirroring the

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_ = "SetupWidget4109451711";
 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":"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":"SetupWidget4109451711__root","row":"SetupWidget4109451711__row","completedCta":"SetupWidget4109451711__completedCta","card":"SetupWidget4109451711__card","stepIcon":"SetupWidget4109451711__stepIcon","chevron":"SetupWidget4109451711__chevron","chevronDisabled":"SetupWidget4109451711__chevronDisabled","inProgressLabel":"SetupWidget4109451711__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-border-standard-primary":"--wds-color-border-standard-primary","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-B30":"--wsr-color-B30","wsr-color-B40":"--wsr-color-B40","wsr-color-B60":"--wsr-color-B60","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-urgent":"--wds-color-text-urgent","wsr-color-D10":"--wsr-color-D10","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-O10":"--wsr-color-O10","wds-space-100":"--wds-space-100","wds-border-radius-200":"--wds-border-radius-200","wds-border-radius-400":"--wds-border-radius-400"}; 
+export var vars = {"wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-B60":"--wsr-color-B60","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-urgent":"--wds-color-text-urgent","wsr-color-D10":"--wsr-color-D10","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-O10":"--wsr-color-O10","wds-border-radius-400":"--wds-border-radius-400","wds-clickable-card-outline-border-color":"--wds-clickable-card-outline-border-color","wds-color-border-standard-primary-active":"--wds-color-border-standard-primary-active","wsr-color-B10":"--wsr-color-B10","wds-color-fill-surface-default":"--wds-color-fill-surface-default"}; 
 
 
 

package/src/components/SetupWidget/SetupWidget.tsx

@@ -5,6 +5,7 @@ import { SetupWidgetState, SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CardContainer } from '../CardContainer';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import { SetupWidgetHeader } from './SetupWidgetHeader';
 import { SetupStepRow } from './SetupStepRow';
@@ -90,6 +91,9 @@ const _SetupWidget = ({
 }: SetupWidgetProps) => {
   const { translate: t } = useWixPatternsContainer();
   const isMobile = useIsMobile();
+  // Harmony drops the focused-row background tint per UX — the outline-skin
+  // ClickableCard the row is built on has no tint of its own.
+  const isHarmonyTheme = useBmHarmonyTheme();
   const { status } = state._loadTask.status;
 
   const activateStep = (step: SetupWidgetStep) => {
@@ -146,6 +150,7 @@ const _SetupWidget = ({
         expanded={expanded}
         onActivate={onActivate}
         renderStepContent={renderStepContent}
+        focusedBackground={!isHarmonyTheme}
       />
     );
   };
@@ -186,7 +191,7 @@ const _SetupWidget = ({
   );
 
   const list = (
-    <Box direction="vertical" gap={isMobile ? 'SP3' : 'SP1'} width="100%">
+    <Box direction="vertical" gap={isMobile ? 'SP3' : 'SP2'} width="100%">
       {state.steps.map((step) => {
         const node = step.steps?.length ? (
           <SetupStepGroup

package/src/components/SetupWidget/SetupWidgetSkeleton.tsx

@@ -69,7 +69,7 @@ export const SetupWidgetSkeleton = ({
             minHeight="30px"
             verticalAlign="middle"
             border="1px solid"
-            borderColor="D60"
+            borderColor="var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))"
             borderRadius={isMobile ? '8px' : '4px'}
           >
             <Line width="40%" />

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_ = "SkeletonCard1261095733";
 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":"SkeletonCard1261095733__root","headerLoading":"SkeletonCard1261095733__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_ = "SlidingModal2267206532";
 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":"SlidingModal2267206532__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_ = "AddFieldColumnHeader2667196467";
 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":"AddFieldColumnHeader2667196467__root","title":"AddFieldColumnHeader2667196467__title","hoverBridge":"AddFieldColumnHeader2667196467__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabTitle.tsx

@@ -1,6 +1,7 @@
 import { Box, Text } from '@wix/design-system';
 import React, { useEffect, ReactNode, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { TabsResponsiveState } from './TabsResponsiveState';
 import { classes, st } from './TabsFilter.st.css.js';
 
@@ -23,6 +24,7 @@ function _TabTitle<V>({
 }: TabTitleProps<V>) {
   const badge = counterBadge?.(value);
   const badgeRef = useRef<HTMLSpanElement>();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   useEffect(() => {
     if (badgeRef.current) {
@@ -42,7 +44,12 @@ function _TabTitle<V>({
       align="center"
     >
       <Box maxWidth={state.itemMaxWidth} flexShrink={1} minWidth={0}>
-        <Text className={st(classes.title)} dataHook="title-text" ellipsis>
+        <Text
+          className={st(classes.title)}
+          dataHook="title-text"
+          ellipsis
+          size={isBmHarmonyTheme ? 'small' : undefined}
+        >
           {text}
         </Text>
       </Box>

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.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3678414365";
+var _namespace_ = "TabsFilter1822916798";
 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":"TabsFilter3678414365__root","title":"TabsFilter3678414365__title"};
+export var classes = {"root":"TabsFilter1822916798__root","title":"TabsFilter1822916798__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "ManageTagsModal3564937902";
 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":"ManageTagsModal3564937902__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_ = "ToolbarItem748894430";
 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":"ToolbarItem748894430__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};