@wix/patterns 1.455.0 → 1.457.0

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1765554353";
+var _namespace_ = "Edit3177521009";
 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":"Edit1765554353__root","wrapper":"Edit1765554353__wrapper","overlay":"Edit1765554353__overlay"};
+export var classes = {"root":"Edit3177521009__root","wrapper":"Edit3177521009__wrapper","overlay":"Edit3177521009__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3664384129";
+var _namespace_ = "Edit3838105661";
 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":"Edit3664384129__root","urlInput":"Edit3664384129__urlInput"};
+export var classes = {"root":"Edit3838105661__root","urlInput":"Edit3838105661__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View928509354";
+var _namespace_ = "View3772793720";
 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":"View928509354__root","textView":"View928509354__textView","urlText":"View928509354__urlText","suffix":"View928509354__suffix"};
+export var classes = {"root":"View3772793720__root","textView":"View3772793720__textView","urlText":"View3772793720__urlText","suffix":"View3772793720__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EmptyState/EmptyStateBase.st.css.ts

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

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload4079824026";
+var _namespace_ = "ImportStepUpload2596437270";
 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":"ImportStepUpload4079824026__root","fileUpload":"ImportStepUpload4079824026__fileUpload"};
+export var classes = {"root":"ImportStepUpload2596437270__root","fileUpload":"ImportStepUpload2596437270__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow3748891380";
+var _namespace_ = "InputOverflow591199552";
 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":"InputOverflow3748891380__root"};
+export var classes = {"root":"InputOverflow591199552__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_ = "LoadingRow1073025516";
+var _namespace_ = "LoadingRow47118622";
 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":"LoadingRow1073025516__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1073025516__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow47118622__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow47118622__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_ = "MaxHeightText716070228";
+var _namespace_ = "MaxHeightText290765207";
 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":"MaxHeightText716070228__root"};
+export var classes = {"root":"MaxHeightText290765207__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_ = "MaxLines2426652755";
+var _namespace_ = "MaxLines584573782";
 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":"MaxLines2426652755__root"};
+export var classes = {"root":"MaxLines584573782__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_ = "MultiBulkActionToolbar3972161443";
+var _namespace_ = "MultiBulkActionToolbar3581774753";
 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":"MultiBulkActionToolbar3972161443__root","leftGroupWrapper":"MultiBulkActionToolbar3972161443__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3972161443__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3972161443__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3581774753__root","leftGroupWrapper":"MultiBulkActionToolbar3581774753__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3581774753__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3581774753__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_ = "NestedTablePlaceholderStatesRow2638073900";
+var _namespace_ = "NestedTablePlaceholderStatesRow1746249048";
 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":"NestedTablePlaceholderStatesRow2638073900__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1746249048__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_ = "NestedTableRow1925904929";
+var _namespace_ = "NestedTableRow3048693504";
 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":"NestedTableRow1925904929__root","firstLevel":"NestedTableRow1925904929__firstLevel","placeholder":"NestedTableRow1925904929__placeholder","parentHovered":"NestedTableRow1925904929__parentHovered"};
+export var classes = {"root":"NestedTableRow3048693504__root","firstLevel":"NestedTableRow3048693504__firstLevel","placeholder":"NestedTableRow3048693504__placeholder","parentHovered":"NestedTableRow3048693504__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_ = "MultipleDragOverlayEffect1460735402";
+var _namespace_ = "MultipleDragOverlayEffect2456429332";
 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":"MultipleDragOverlayEffect1460735402__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2456429332__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_ = "NestedTableDragAndDropRow2886594640";
+var _namespace_ = "NestedTableDragAndDropRow2873480396";
 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":"NestedTableDragAndDropRow2886594640__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2873480396__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_ = "PickerContent1042923013";
+var _namespace_ = "PickerContent2632079926";
 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":"PickerContent1042923013__root"};
+export var classes = {"root":"PickerContent2632079926__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_ = "PickerContentAdditionalStep562808201";
+var _namespace_ = "PickerContentAdditionalStep870535493";
 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":"PickerContentAdditionalStep562808201__root","titles":"PickerContentAdditionalStep562808201__titles","suffix":"PickerContentAdditionalStep562808201__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep870535493__root","titles":"PickerContentAdditionalStep870535493__titles","suffix":"PickerContentAdditionalStep870535493__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_ = "PickerTableListItem3697136871";
+var _namespace_ = "PickerTableListItem2813035785";
 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":"PickerTableListItem3697136871__root"};
+export var classes = {"root":"PickerTableListItem2813035785__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent929363441";
+var _namespace_ = "ScrollableContent2077771115";
 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":"ScrollableContent929363441__root"};
+export var classes = {"root":"ScrollableContent2077771115__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_ = "SetupWidget2182217761";
+var _namespace_ = "SetupWidget604674153";
 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":"SetupWidget2182217761__root","row":"SetupWidget2182217761__row","completedCta":"SetupWidget2182217761__completedCta","secondaryCta":"SetupWidget2182217761__secondaryCta","card":"SetupWidget2182217761__card","stepIcon":"SetupWidget2182217761__stepIcon","chevron":"SetupWidget2182217761__chevron","chevronDisabled":"SetupWidget2182217761__chevronDisabled","inProgressLabel":"SetupWidget2182217761__inProgressLabel"};
+export var classes = {"root":"SetupWidget604674153__root","row":"SetupWidget604674153__row","completedCta":"SetupWidget604674153__completedCta","secondaryCta":"SetupWidget604674153__secondaryCta","card":"SetupWidget604674153__card","stepIcon":"SetupWidget604674153__stepIcon","chevron":"SetupWidget604674153__chevron","chevronDisabled":"SetupWidget604674153__chevronDisabled","inProgressLabel":"SetupWidget604674153__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_ = "SkeletonCard2420811157";
+var _namespace_ = "SkeletonCard3138012566";
 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":"SkeletonCard2420811157__root","headerLoading":"SkeletonCard2420811157__headerLoading"};
+export var classes = {"root":"SkeletonCard3138012566__root","headerLoading":"SkeletonCard3138012566__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_ = "SlidingModal2306787096";
+var _namespace_ = "SlidingModal3873407384";
 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":"SlidingModal2306787096__root"};
+export var classes = {"root":"SlidingModal3873407384__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabTotal/TabTotalCounterBadge.tsx

@@ -11,7 +11,16 @@ import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
   extends UseFilterValueTotalStateParams<V, T, F>,
-    Partial<CounterBadgeProps> {}
+    Omit<Partial<CounterBadgeProps>, 'skin'> {
+  /**
+   * Badge skin. Pass a function to pick the skin from the total, for example to
+   * keep a tab neutral while its total is `0`.
+   * @external
+   */
+  readonly skin?:
+    | CounterBadgeProps['skin']
+    | ((total: number) => CounterBadgeProps['skin']);
+}
 
 function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   props: TabCounterBadgeProps<V, T, F>,
@@ -21,15 +30,15 @@ function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   const defaultSize = isHarmonyTheme ? 'tiny' : 'small';
 
   const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;
-  const state = useFilterValueTotalState(props);
-
-  const {
-    totalsCollection: { totalStatus, total, lifecycleState },
-  } = state;
+  const { resolvedTotal } = useFilterValueTotalState(props);
 
-  return totalStatus === 'success' && lifecycleState === 'result' ? (
-    <CounterBadge size={size} skin={skin} {...rest}>
-      {total}
+  return resolvedTotal != null ? (
+    <CounterBadge
+      size={size}
+      skin={typeof skin === 'function' ? skin(resolvedTotal) : skin}
+      {...rest}
+    >
+      {resolvedTotal}
     </CounterBadge>
   ) : null;
 }

package/src/components/TabTotal/useFilterValueTotalState.ts

@@ -1,8 +1,9 @@
 import { useFilterContext } from '../FilterContext';
 import { useCollectionContext } from '../CollectionContext';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { FilterValueTotalState } from '../../state';
 import { CollectionOptimisticActions, FiltersMap } from '@wix/bex-core';
+import { ToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 export interface UseFilterValueTotalStateParams<V, T, F extends FiltersMap> {
   /**
@@ -36,12 +37,22 @@ export function useFilterValueTotalState<V, T, F extends FiltersMap>({
       }),
   );
 
+  const table = useContext(ToolbarCollectionContext);
+  const key = value == null ? undefined : filter.itemKey(value);
+
   useEffect(() => state.init(), []);
   useEffect(() => {
     if (value !== state.value) {
       state.refresh(value);
     }
   }, [value]);
+  useEffect(
+    () =>
+      key != null
+        ? table?.tabs?.registerTabTotal(filter, key, state)
+        : undefined,
+    [table, key],
+  );
 
   return state;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader2018834474";
+var _namespace_ = "AddFieldColumnHeader2235869336";
 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":"AddFieldColumnHeader2018834474__root","title":"AddFieldColumnHeader2018834474__title","hoverBridge":"AddFieldColumnHeader2018834474__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2235869336__root","title":"AddFieldColumnHeader2235869336__title","hoverBridge":"AddFieldColumnHeader2235869336__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2386973154";
+var _namespace_ = "TabsFilter117233435";
 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":"TabsFilter2386973154__root","titleBox":"TabsFilter2386973154__titleBox"};
+export var classes = {"root":"TabsFilter117233435__root","titleBox":"TabsFilter117233435__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};