@wix/patterns 1.267.0 → 1.269.0

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

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

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

@@ -32,11 +32,7 @@ export function GridUniDriver(base: UniDriver, body: UniDriver) {
   const infiniteScrollLoader = () =>
     SkeletonGridUniDriver(infiniteScrollLoaderBase(), body);
 
-  const modalsContainerBase = () =>
-    body.$(`[data-hook="cairo-modals-container"]`);
-
-  const slidingModalBase = () =>
-    modalsContainerBase().$('[data-hook="cairo-side-panel-modal"]');
+  const slidingModalBase = () => body.$('[data-hook="cairo-side-panel-modal"]');
 
   const getEmptyStateByDataHook = (dataHook = 'collection-empty-state') =>
     CollectionEmptyStateUniDriver(base.$(`[data-hook="${dataHook}"]`), body);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading3158021534";
+var _namespace_ = "Heading3503061181";
 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":"Heading3158021534__root"};
+export var classes = {"root":"Heading3503061181__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_ = "InputOverflow3236173267";
+var _namespace_ = "InputOverflow183325328";
 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":"InputOverflow3236173267__root"};
+export var classes = {"root":"InputOverflow183325328__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_ = "LoadingRow2398070843";
+var _namespace_ = "LoadingRow4046643414";
 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":"LoadingRow2398070843__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2398070843__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow4046643414__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow4046643414__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_ = "MaxHeightText173930744";
+var _namespace_ = "MaxHeightText3552155163";
 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":"MaxHeightText173930744__root"};
+export var classes = {"root":"MaxHeightText3552155163__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_ = "MaxLines954524742";
+var _namespace_ = "MaxLines2905734380";
 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":"MaxLines954524742__root"};
+export var classes = {"root":"MaxLines2905734380__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_ = "MultiBulkActionToolbar2133876086";
+var _namespace_ = "MultiBulkActionToolbar1750080485";
 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":"MultiBulkActionToolbar2133876086__root"};
+export var classes = {"root":"MultiBulkActionToolbar1750080485__root"};
 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_ = "NestedTablePlaceholderStatesRow2723501048";
+var _namespace_ = "NestedTablePlaceholderStatesRow963816273";
 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":"NestedTablePlaceholderStatesRow2723501048__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow963816273__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_ = "NestedTableRow1133267633";
+var _namespace_ = "NestedTableRow3502968394";
 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":"NestedTableRow1133267633__root","firstLevel":"NestedTableRow1133267633__firstLevel","placeholder":"NestedTableRow1133267633__placeholder","parentHovered":"NestedTableRow1133267633__parentHovered"};
+export var classes = {"root":"NestedTableRow3502968394__root","firstLevel":"NestedTableRow3502968394__firstLevel","placeholder":"NestedTableRow3502968394__placeholder","parentHovered":"NestedTableRow3502968394__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_ = "MultipleDragOverlayEffect1068395415";
+var _namespace_ = "MultipleDragOverlayEffect1661640563";
 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":"MultipleDragOverlayEffect1068395415__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1661640563__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_ = "NestedTableDragAndDropRow4137815036";
+var _namespace_ = "NestedTableDragAndDropRow1395005424";
 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":"NestedTableDragAndDropRow4137815036__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1395005424__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_ = "PickerContent3438207586";
+var _namespace_ = "PickerContent1840232817";
 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":"PickerContent3438207586__root"};
+export var classes = {"root":"PickerContent1840232817__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_ = "PickerContentAdditionalStep4143253153";
+var _namespace_ = "PickerContentAdditionalStep3550219379";
 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":"PickerContentAdditionalStep4143253153__root","titles":"PickerContentAdditionalStep4143253153__titles","suffix":"PickerContentAdditionalStep4143253153__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3550219379__root","titles":"PickerContentAdditionalStep3550219379__titles","suffix":"PickerContentAdditionalStep3550219379__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_ = "PickerTableListItem1386941642";
+var _namespace_ = "PickerTableListItem3881874115";
 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":"PickerTableListItem1386941642__root"};
+export var classes = {"root":"PickerTableListItem3881874115__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_ = "ScrollableContent3869977938";
+var _namespace_ = "ScrollableContent3717617086";
 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":"ScrollableContent3869977938__root"};
+export var classes = {"root":"ScrollableContent3717617086__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -31,12 +31,11 @@ function _SidePanelModal(props: SidePanelModalProps) {
   const style = useMemo(
     () => ({
       top,
-      left:
-        isPanelLayout
-          ? 0
-          : left != null
-          ? left - SidePanelWidth
-          : undefined,
+      left: isPanelLayout
+        ? 0
+        : left != null
+        ? left - SidePanelWidth
+        : undefined,
       bottom: 0,
       overflow: 'hidden',
       width,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1000238212";
+var _namespace_ = "SkeletonCard2244991520";
 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":"SkeletonCard1000238212__root","headerLoading":"SkeletonCard1000238212__headerLoading"};
+export var classes = {"root":"SkeletonCard2244991520__root","headerLoading":"SkeletonCard2244991520__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_ = "SlidingModal3445316288";
+var _namespace_ = "SlidingModal2312253764";
 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":"SlidingModal3445316288__root"};
+export var classes = {"root":"SlidingModal2312253764__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -24,8 +24,9 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
     body,
   );
 
-  const initialLoaderBase = () => base.$(`[data-hook="toolbar-skeleton"]`);
-  const initialLoader = () => LoaderUniDriver(initialLoaderBase(), body);
+  const initialLoaderBase = () =>
+    base.$(`[data-hook="placeholder-states-loading-state"]`);
+  const initialLoader = () => initialLoaderBase();
 
   const infiniteScrollLoaderBase = () =>
     base.$(`[data-hook="infinite-scroll-loader"]`);
@@ -373,7 +374,7 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
         delay,
       ),
     /** Indicates whether initial loader is in loading status */
-    isInitialLoaderLoading: () => initialLoader().isLoading(),
+    isInitialLoaderLoading: () => initialLoader().exists(),
     /** Indicates whether initial loader exists */
     initialLoaderExists: () => initialLoader().exists(),
 

package/src/components/TableSkeleton/TableSkeleton.tsx

@@ -74,7 +74,7 @@ export function _TableSkeleton<T, F extends FiltersMap>(
       },
     ),
   );
-  if (!itemsContentWidth) {
+  if (!itemsContentWidth && process.env.NODE_ENV !== 'test') {
     return null;
   }
   return (

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1686671822";
+var _namespace_ = "TabsFilter1861698704";
 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":"TabsFilter1686671822__root","title":"TabsFilter1686671822__title"};
+export var classes = {"root":"TabsFilter1861698704__root","title":"TabsFilter1861698704__title"};
 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_ = "ManageTagsModal3082686369";
+var _namespace_ = "ManageTagsModal1337732452";
 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":"ManageTagsModal3082686369__root"};
+export var classes = {"root":"ManageTagsModal1337732452__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_ = "ToolbarItem348002915";
+var _namespace_ = "ToolbarItem3569533551";
 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":"ToolbarItem348002915__root"};
+export var classes = {"root":"ToolbarItem3569533551__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_ = "ToolbarItemBox3052096235";
+var _namespace_ = "ToolbarItemBox3801721263";
 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":"ToolbarItemBox3052096235__root"};
+export var classes = {"root":"ToolbarItemBox3801721263__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_ = "common3040524433";
+var _namespace_ = "common4014911658";
 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":"common3040524433__root","column":"common3040524433__column","fullHeight":"common3040524433__fullHeight"};
+export var classes = {"root":"common4014911658__root","column":"common4014911658__column","fullHeight":"common4014911658__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/layout/useSidePanelProps.ts

@@ -10,15 +10,11 @@ export function useSidePanelProps({
 
   if (isPanelLayout) {
     return {
-      backButtonProps: {
-        onClick: onClose,
-      },
+      onBackButtonClick: onClose,
     };
   }
 
   return {
-    closeButtonProps: {
-      onClick: onClose,
-    },
+    onCloseButtonClick: onClose,
   };
 }

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

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

package/src/state/CollectionPage/PanelHeader.tsx

@@ -0,0 +1,22 @@
+import { Box, Text } from '@wix/design-system';
+import React from 'react';
+
+export interface PanelHeaderProps {
+  title: string;
+  subtitle?: string;
+}
+
+export function PanelHeader(props: PanelHeaderProps) {
+  const { title, subtitle } = props;
+
+  return (
+    <Box padding="SP4">
+      <Box direction="vertical">
+        <Text size="small" weight="bold">
+          {title}
+        </Text>
+        {subtitle && <Text size="tiny">{subtitle}</Text>}
+      </Box>
+    </Box>
+  );
+}

package/src/state/CollectionPage/useCollectionPageFooter.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
-import { Page, SidePanel } from '@wix/design-system';
+import { Box, Divider, Page } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CollectionPageFooterElement } from '../../components/CollectionPageFooter';
 
 export function useCollectionPageFooter(child: CollectionPageFooterElement) {
   const { isPanelLayout } = useWixPatternsContainer();
   if (isPanelLayout) {
-    return <SidePanel.Footer {...child.props} />;
+    return (
+      <>
+        <Divider />
+        <Box direction="vertical" padding="SP4" {...child.props} />
+      </>
+    );
   }
   return <Page.Footer {...child.props} />;
 }

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, Page, SidePanel } from '@wix/design-system';
+import { Box, Heading, Page } from '@wix/design-system';
 import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
 import { useCollectionPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
@@ -10,6 +10,7 @@ import { classes, st } from './CollectionPageHeader.st.css.js';
 import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
 import { MoreActions } from '../../components/MoreActions';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { PanelHeader } from './PanelHeader';
 
 const MoreActionsBySecondaryAction = observer(
   ({ child }: { child: CollectionPageHeaderElement }) => {
@@ -52,7 +53,12 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
   const { isPanelLayout } = useWixPatternsContainer();
 
   if (isPanelLayout) {
-    return <SidePanel.Header title={child.props.title.text} />;
+    return (
+      <PanelHeader
+        title={child.props.title.text}
+        subtitle={child.props.subtitle?.text}
+      />
+    );
   }
   return (
     <Page.Header

package/src/state/FormPage/FormPageHeader.st.css.ts

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