@wix/patterns 1.352.0 → 1.354.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.352.0",
+  "version": "1.354.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -205,7 +205,7 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.271.0",
+    "@wix/bex-core": "2.273.0",
     "@wix/bex-utils": "2.82.0",
     "@wix/essentials": "^0.1.26",
     "@wix/sdk": "^1.15.22",
@@ -423,5 +423,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "3c8e346c7f43c7cf149334b483188a870823fffb325b80117d8f2abc"
+  "falconPackageHash": "5679be500f93a82429cf1df54b73a88aaab59f8a7e5c25bbf7633d5d"
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse801451134";
+var _namespace_ = "Collapse894242556";
 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":"Collapse801451134__root","exit":"Collapse801451134__exit"};
+export var classes = {"root":"Collapse894242556__root","exit":"Collapse894242556__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionMultiSelectCheckbox/CollectionMultiSelectCheckbox.tsx

@@ -83,8 +83,13 @@ function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
       }),
   );
 
-  const { dropdownSelect, init, inputState, shouldShowPlaceholder } =
-    dropdownCollectionFilterState;
+  const {
+    dropdownSelect,
+    init,
+    inputState,
+    shouldShowPlaceholder,
+    inputValue,
+  } = dropdownCollectionFilterState;
   const { disableEditing } = inputState;
 
   const {
@@ -153,7 +158,7 @@ function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
         dropdownSelect.delete(keyedItem);
         onDeselect?.(id, option);
       }}
-      value={collection.query.search.value}
+      value={inputValue}
       onFocus={() => {
         inputState.onFocus();
         onFocus();

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

package/src/components/CollectionPageNew/CollectionPage.tsx

@@ -40,6 +40,12 @@ function _CollectionPage({
   } = usePageHeader(childrenArr);
   const container = useWixPatternsContainer();
 
+  const applyMinWidthExperiment = container.internalExperiments?.enabled(
+    'specs.cairo.CollectionPageMinWidth',
+  );
+
+  const minWidth = applyMinWidthExperiment ? 394 : undefined;
+
   const [reportBI] = useState(() =>
     container.createBILogger({
       componentType: 'Collection page',
@@ -90,7 +96,7 @@ function _CollectionPage({
             scrollableContentRef?.(el);
           }}
           {...rest}
-          minWidth={isMobile ? 0 : undefined}
+          minWidth={isMobile ? 0 : minWidth}
         >
           {wrappedChildren}
         </Page>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader4064214935";
+var _namespace_ = "CollectionSectionHeader31367715";
 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":"CollectionSectionHeader4064214935__root","summaryIcon":"CollectionSectionHeader4064214935__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader31367715__root","summaryIcon":"CollectionSectionHeader31367715__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar159339193";
+var _namespace_ = "CollectionToolbar3064572987";
 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":"CollectionToolbar159339193__root","left":"CollectionToolbar159339193__left","right":"CollectionToolbar159339193__right","fullWidth":"CollectionToolbar159339193__fullWidth"};
+export var classes = {"root":"CollectionToolbar3064572987__root","left":"CollectionToolbar3064572987__left","right":"CollectionToolbar3064572987__right","fullWidth":"CollectionToolbar3064572987__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3975397441";
+var _namespace_ = "SearchOrCustomFilter588284694";
 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":"SearchOrCustomFilter3975397441__root","search":"SearchOrCustomFilter3975397441__search","searchMobile":"SearchOrCustomFilter3975397441__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter588284694__root","search":"SearchOrCustomFilter588284694__search","searchMobile":"SearchOrCustomFilter588284694__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -15,6 +15,7 @@ import { ManageViewPopover } from './ManageViewPopover';
 import {
   buildCategoryOption,
   buildViewOption,
+  getCategoryName,
   getViewName,
 } from './viewsDropdownRenderHelpers';
 import { AutoCompleteReadonly } from './AutoCompleteReadonly';
@@ -52,7 +53,10 @@ function _ViewsDropdown<T, F extends FiltersMap>({
         buildViewOption({ view, viewsState }),
       ),
       ...categories.flatMap((category) => [
-        buildCategoryOption({ category, viewsState }),
+        // Skip category header if category has no displayable name
+        ...(getCategoryName({ category, viewsState })
+          ? [buildCategoryOption({ category, viewsState })]
+          : []),
         ...category.views.map((view) => buildViewOption({ view, viewsState })),
       ]),
     ];

package/src/components/CollectionViewsDropdown/viewsDropdownRenderHelpers.tsx

@@ -7,7 +7,6 @@ import {
   BasicCategory,
   PREDEFINED_VIEWS_ID,
   PrivateView,
-  SAVED_VIEWS_ID,
   ViewsState,
 } from '../../index';
 import { FiltersMap } from '@wix/bex-core';
@@ -21,9 +20,7 @@ export function getCategoryName<F extends FiltersMap>({
   category: BasicCategory;
 }) {
   const { translate: t } = viewsState.collection;
-  if (category.id === SAVED_VIEWS_ID) {
-    return t('cairo.viewDropdown.category.savedViews');
-  }
+
   if (category.id === PREDEFINED_VIEWS_ID) {
     return t('cairo.viewDropdown.category.predefinedViews');
   }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1719636738";
+var _namespace_ = "DragHandle3378996893";
 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":"DragHandle1719636738__root"};
+export var classes = {"root":"DragHandle3378996893__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_ = "EntityPagePlain2454018564";
+var _namespace_ = "EntityPagePlain3916354704";
 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":"EntityPagePlain2454018564__root"};
+export var classes = {"root":"EntityPagePlain3916354704__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_ = "Fade4100073960";
+var _namespace_ = "Fade3949225734";
 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":"Fade4100073960__root"};
+export var classes = {"root":"Fade3949225734__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_ = "Heading1810640181";
+var _namespace_ = "Heading2050728262";
 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":"Heading1810640181__root"};
+export var classes = {"root":"Heading2050728262__root"};
 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_ = "InputOverflow259513846";
+var _namespace_ = "InputOverflow3622050185";
 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":"InputOverflow259513846__root"};
+export var classes = {"root":"InputOverflow3622050185__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_ = "LoadingRow1962776937";
+var _namespace_ = "LoadingRow2018071028";
 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":"LoadingRow1962776937__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1962776937__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2018071028__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2018071028__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_ = "MaxHeightText3996867344";
+var _namespace_ = "MaxHeightText348988631";
 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":"MaxHeightText3996867344__root"};
+export var classes = {"root":"MaxHeightText348988631__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_ = "MaxLines4229375414";
+var _namespace_ = "MaxLines2705649516";
 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":"MaxLines4229375414__root"};
+export var classes = {"root":"MaxLines2705649516__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_ = "MultiBulkActionToolbar1760143859";
+var _namespace_ = "MultiBulkActionToolbar3410828587";
 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":"MultiBulkActionToolbar1760143859__root","leftGroupWrapper":"MultiBulkActionToolbar1760143859__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1760143859__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1760143859__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3410828587__root","leftGroupWrapper":"MultiBulkActionToolbar3410828587__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3410828587__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3410828587__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_ = "NestedTablePlaceholderStatesRow218800380";
+var _namespace_ = "NestedTablePlaceholderStatesRow3243016841";
 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":"NestedTablePlaceholderStatesRow218800380__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3243016841__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_ = "NestedTableRow3140066734";
+var _namespace_ = "NestedTableRow468253171";
 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":"NestedTableRow3140066734__root","firstLevel":"NestedTableRow3140066734__firstLevel","placeholder":"NestedTableRow3140066734__placeholder","parentHovered":"NestedTableRow3140066734__parentHovered"};
+export var classes = {"root":"NestedTableRow468253171__root","firstLevel":"NestedTableRow468253171__firstLevel","placeholder":"NestedTableRow468253171__placeholder","parentHovered":"NestedTableRow468253171__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_ = "MultipleDragOverlayEffect2746358990";
+var _namespace_ = "MultipleDragOverlayEffect388376216";
 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":"MultipleDragOverlayEffect2746358990__root"};
+export var classes = {"root":"MultipleDragOverlayEffect388376216__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_ = "NestedTableDragAndDropRow2229560427";
+var _namespace_ = "NestedTableDragAndDropRow2652673804";
 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":"NestedTableDragAndDropRow2229560427__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2652673804__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageSubTitle/PageSubTitle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, TextButton } from '@wix/design-system';
+import { Box, Text, TextButton } from '@wix/design-system';
 import {
   useCollectionPageContext,
   useWixPatternsContainer,
@@ -40,33 +40,47 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
 
   const isMobile = useIsMobile();
 
+  const learnMoreSuffix = learnMore ? (
+    <TextButton
+      dataHook="subtitle-learn-more-cta"
+      as="a"
+      rel="noopener"
+      target="_blank"
+      href={learnMore.url}
+      size={isMobile ? 'small' : 'medium'}
+      style={{ marginLeft: '6px' }}
+      onClick={() => {
+        bi?.reportBI(
+          withoutDefaults(cairoPageCtaClicked)({
+            location: 'Collection Page Header',
+            ctaType: 'link',
+            ctaName: 'Learn more',
+          }),
+        );
+      }}
+    >
+      {learnMore.label ?? t('cairo.subtitle.learnMore')}
+    </TextButton>
+  ) : undefined;
+
   return (
-    <Box dataHook="page-subtitle" display="inline">
-      {text}
-      {learnMore && (
-        <>
-          <Box inline marginLeft="SP1" />
-          <TextButton
-            dataHook="subtitle-learn-more-cta"
-            as="a"
-            rel="noopener"
-            target="_blank"
-            href={learnMore.url}
-            size={isMobile ? 'small' : 'medium'}
-            onClick={() => {
-              bi?.reportBI(
-                withoutDefaults(cairoPageCtaClicked)({
-                  location: 'Collection Page Header',
-                  ctaType: 'link',
-                  ctaName: 'Learn more',
-                }),
-              );
-            }}
-          >
-            {learnMore.label ?? t('cairo.subtitle.learnMore')}
-          </TextButton>
-        </>
-      )}
+    <Box
+      dataHook="page-subtitle"
+      width="100%"
+      minWidth={0}
+      verticalAlign="bottom"
+    >
+      <Text
+        ellipsis
+        secondary
+        maxLines={2}
+        suffix={learnMoreSuffix}
+        tooltipProps={{
+          placement: 'auto',
+        }}
+      >
+        {text}
+      </Text>
     </Box>
   );
 };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3852751846";
+var _namespace_ = "PickerContent1631951733";
 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":"PickerContent3852751846__root"};
+export var classes = {"root":"PickerContent1631951733__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_ = "PickerContentAdditionalStep505382893";
+var _namespace_ = "PickerContentAdditionalStep3866125661";
 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":"PickerContentAdditionalStep505382893__root","titles":"PickerContentAdditionalStep505382893__titles","suffix":"PickerContentAdditionalStep505382893__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3866125661__root","titles":"PickerContentAdditionalStep3866125661__titles","suffix":"PickerContentAdditionalStep3866125661__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};