@wix/patterns 1.461.0 → 1.462.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain2909456022";
+var _namespace_ = "EntityPagePlain323960751";
 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":"EntityPagePlain2909456022__root"};
+export var classes = {"root":"EntityPagePlain323960751__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_ = "Fade532704291";
+var _namespace_ = "Fade1956429818";
 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":"Fade532704291__root"};
+export var classes = {"root":"Fade1956429818__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_ = "Heading2024812053";
+var _namespace_ = "Heading3238820002";
 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":"Heading2024812053__root"};
+export var classes = {"root":"Heading3238820002__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_ = "ImportStepUpload3247705764";
+var _namespace_ = "ImportStepUpload3773139056";
 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":"ImportStepUpload3247705764__root","fileUpload":"ImportStepUpload3247705764__fileUpload"};
+export var classes = {"root":"ImportStepUpload3773139056__root","fileUpload":"ImportStepUpload3773139056__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_ = "InputOverflow3729664396";
+var _namespace_ = "InputOverflow2108163204";
 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":"InputOverflow3729664396__root"};
+export var classes = {"root":"InputOverflow2108163204__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_ = "LoadingRow477909419";
+var _namespace_ = "LoadingRow1751324749";
 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":"LoadingRow477909419__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow477909419__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1751324749__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1751324749__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_ = "MaxHeightText4004829359";
+var _namespace_ = "MaxHeightText2387914086";
 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":"MaxHeightText4004829359__root"};
+export var classes = {"root":"MaxHeightText2387914086__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_ = "MaxLines2527383402";
+var _namespace_ = "MaxLines2905253173";
 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":"MaxLines2527383402__root"};
+export var classes = {"root":"MaxLines2905253173__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_ = "MultiBulkActionToolbar2649094695";
+var _namespace_ = "MultiBulkActionToolbar3896041689";
 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":"MultiBulkActionToolbar2649094695__root","leftGroupWrapper":"MultiBulkActionToolbar2649094695__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2649094695__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2649094695__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3896041689__root","leftGroupWrapper":"MultiBulkActionToolbar3896041689__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3896041689__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3896041689__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_ = "NestedTablePlaceholderStatesRow1438251547";
+var _namespace_ = "NestedTablePlaceholderStatesRow1814324768";
 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":"NestedTablePlaceholderStatesRow1438251547__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1814324768__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_ = "NestedTableRow774112669";
+var _namespace_ = "NestedTableRow4072666037";
 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":"NestedTableRow774112669__root","firstLevel":"NestedTableRow774112669__firstLevel","placeholder":"NestedTableRow774112669__placeholder","parentHovered":"NestedTableRow774112669__parentHovered"};
+export var classes = {"root":"NestedTableRow4072666037__root","firstLevel":"NestedTableRow4072666037__firstLevel","placeholder":"NestedTableRow4072666037__placeholder","parentHovered":"NestedTableRow4072666037__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_ = "MultipleDragOverlayEffect788284026";
+var _namespace_ = "MultipleDragOverlayEffect2746926945";
 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":"MultipleDragOverlayEffect788284026__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2746926945__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_ = "NestedTableDragAndDropRow2432249017";
+var _namespace_ = "NestedTableDragAndDropRow3084401325";
 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":"NestedTableDragAndDropRow2432249017__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3084401325__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageSubTitle/PageSubTitle.tsx

@@ -8,6 +8,7 @@ import { useSelector } from '../../useSelector';
 import { withoutDefaults } from '@wix/bex-core';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 /**
  * Props for the PageSubTitle component.
@@ -39,6 +40,18 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
   useSelector(() => initTask.status);
 
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
+  // Page.Header sizes its own subtitle wrapper from
+  // `--wds-page-header-subtitle-font-size`, which Harmony maps to the `tiny`
+  // body tokens. The nested Text needs the same size or it keeps painting the
+  // 16px `medium` tokens over it.
+  const subtitleSize = isBmHarmonyTheme ? 'tiny' : 'medium';
+  const learnMoreSize = isBmHarmonyTheme
+    ? 'tiny'
+    : isMobile
+    ? 'small'
+    : 'medium';
 
   const learnMoreSuffix = learnMore ? (
     <TextButton
@@ -47,7 +60,7 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
       rel="noopener"
       target="_blank"
       href={learnMore.url}
-      size={isMobile ? 'small' : 'medium'}
+      size={learnMoreSize}
       style={{ marginLeft: '6px' }}
       onClick={() => {
         bi?.reportBI(
@@ -71,8 +84,10 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
       verticalAlign="bottom"
     >
       <Text
+        dataHook="page-subtitle-text"
         ellipsis
         secondary
+        size={subtitleSize}
         maxLines={2}
         suffix={learnMoreSuffix}
         tooltipProps={{

package/src/components/PageSubTitle/PageSubTitle.uni.driver.ts

@@ -11,6 +11,10 @@ export default function SubTitleUniDriver(base: UniDriver, body: UniDriver) {
     getText() {
       return base.$('[data-hook="page-subtitle"]').text();
     },
+    /** Returns the WDS text size the subtitle renders at */
+    getTextSize() {
+      return base.$('[data-hook="page-subtitle-text"]').attr('data-size');
+    },
     getLearnMoreLabel() {
       return getLearnMoreButton().getButtonTextContent();
     },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2368873188";
+var _namespace_ = "PickerContent2945350360";
 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":"PickerContent2368873188__root"};
+export var classes = {"root":"PickerContent2945350360__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_ = "PickerContentAdditionalStep1074001824";
+var _namespace_ = "PickerContentAdditionalStep764710578";
 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":"PickerContentAdditionalStep1074001824__root","titles":"PickerContentAdditionalStep1074001824__titles","suffix":"PickerContentAdditionalStep1074001824__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep764710578__root","titles":"PickerContentAdditionalStep764710578__titles","suffix":"PickerContentAdditionalStep764710578__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_ = "PickerTableListItem3679162544";
+var _namespace_ = "PickerTableListItem4046409728";
 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":"PickerTableListItem3679162544__root"};
+export var classes = {"root":"PickerTableListItem4046409728__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_ = "ScrollableContent513350404";
+var _namespace_ = "ScrollableContent257427423";
 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":"ScrollableContent513350404__root"};
+export var classes = {"root":"ScrollableContent257427423__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SettingsPage/SettingsPage.uni.driver.ts

@@ -10,6 +10,10 @@ export const SettingsPageUniDriver = (base: UniDriver, body: UniDriver) => {
     /** Returns page header driver */
     getPageHeader: () =>
       PageHeaderUniDriver(base.$(`[data-hook="settings-page-header"]`), body),
+
+    /** Returns the WDS heading size the page title renders at */
+    getTitleSize: () =>
+      base.$('[data-hook="form-page-header-title"]').attr('data-size'),
     ...formPageContentUniDriver,
     ...baseUniDriverFactory(base),
   };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget396087111";
+var _namespace_ = "SetupWidget255849986";
 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":"SetupWidget396087111__root","row":"SetupWidget396087111__row","completedCta":"SetupWidget396087111__completedCta","secondaryCta":"SetupWidget396087111__secondaryCta","card":"SetupWidget396087111__card","stepIcon":"SetupWidget396087111__stepIcon","chevron":"SetupWidget396087111__chevron","chevronDisabled":"SetupWidget396087111__chevronDisabled","inProgressLabel":"SetupWidget396087111__inProgressLabel"};
+export var classes = {"root":"SetupWidget255849986__root","row":"SetupWidget255849986__row","completedCta":"SetupWidget255849986__completedCta","secondaryCta":"SetupWidget255849986__secondaryCta","card":"SetupWidget255849986__card","stepIcon":"SetupWidget255849986__stepIcon","chevron":"SetupWidget255849986__chevron","chevronDisabled":"SetupWidget255849986__chevronDisabled","inProgressLabel":"SetupWidget255849986__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_ = "SkeletonCard577227391";
+var _namespace_ = "SkeletonCard2842798833";
 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":"SkeletonCard577227391__root","headerLoading":"SkeletonCard577227391__headerLoading"};
+export var classes = {"root":"SkeletonCard2842798833__root","headerLoading":"SkeletonCard2842798833__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_ = "SlidingModal235468513";
+var _namespace_ = "SlidingModal3005563757";
 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":"SlidingModal235468513__root"};
+export var classes = {"root":"SlidingModal3005563757__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_ = "AddFieldColumnHeader2927909795";
+var _namespace_ = "AddFieldColumnHeader2269731922";
 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":"AddFieldColumnHeader2927909795__root","title":"AddFieldColumnHeader2927909795__title","hoverBridge":"AddFieldColumnHeader2927909795__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2269731922__root","title":"AddFieldColumnHeader2269731922__title","hoverBridge":"AddFieldColumnHeader2269731922__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_ = "TabsFilter3309937656";
+var _namespace_ = "TabsFilter4013180721";
 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":"TabsFilter3309937656__root","titleBox":"TabsFilter3309937656__titleBox"};
+export var classes = {"root":"TabsFilter4013180721__root","titleBox":"TabsFilter4013180721__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2960572131";
+var _namespace_ = "ManageTagsModal831681047";
 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":"ManageTagsModal2960572131__root"};
+export var classes = {"root":"ManageTagsModal831681047__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_ = "ToolbarItem2994816163";
+var _namespace_ = "ToolbarItem3984970641";
 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":"ToolbarItem2994816163__root"};
+export var classes = {"root":"ToolbarItem3984970641__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_ = "ToolbarItemBox2577102231";
+var _namespace_ = "ToolbarItemBox2813000421";
 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":"ToolbarItemBox2577102231__root"};
+export var classes = {"root":"ToolbarItemBox2813000421__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common589529049";
+var _namespace_ = "common1879432617";
 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":"common589529049__root","column":"common589529049__column","fullHeight":"common589529049__fullHeight"};
+export var classes = {"root":"common1879432617__root","column":"common1879432617__column","fullHeight":"common1879432617__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/page.ts

@@ -1,3 +1,7 @@
 export * from '../components/CollectionPageNew';
+export type {
+  CollectionPageHeaderBadge,
+  CollectionPageHeaderProps,
+} from '../components/CollectionPageHeaderNew';
 
 export { WidgetsFormProvider } from '../components/FormPage';

package/src/index.ts

@@ -181,6 +181,9 @@ export {
   type FormTypeConfig,
   type FormFieldComponentProps,
   type EditableCellConfig,
+  type EditableCellContextMenuAction,
+  type EditableCellContextMenuActionConfig,
+  type EditableCellContextMenuActionContext,
   type TableCellConfig,
   type CellViewProps,
   type CellEditProps,

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/CollectionPage/PanelHeader.tsx

@@ -1,20 +1,26 @@
 import { Box, Text } from '@wix/design-system';
 import React from 'react';
+import { CollectionPageHeaderBadge } from '../../components/CollectionPageHeaderNew';
+import { TitleBadges } from './TitleBadges';
 
 export interface PanelHeaderProps {
   title: string;
   subtitle?: string;
+  badges?: CollectionPageHeaderBadge[];
 }
 
 export function PanelHeader(props: PanelHeaderProps) {
-  const { title, subtitle } = props;
+  const { title, subtitle, badges } = props;
 
   return (
     <Box padding="SP4">
       <Box direction="vertical">
-        <Text size="small" weight="bold">
-          {title}
-        </Text>
+        <Box verticalAlign="middle">
+          <Text size="small" weight="bold">
+            {title}
+          </Text>
+          <TitleBadges badges={badges} />
+        </Box>
         {subtitle && <Text size="tiny">{subtitle}</Text>}
       </Box>
     </Box>