@wix/patterns 1.263.0 → 1.264.0

package/src/components/MultiLevelSortingPanel/MultiLevelSortingPanel.tsx

@@ -15,6 +15,7 @@ import { ToolbarCollectionState } from '../../state';
 import { useRafRender } from '../../hooks/useRafRender';
 import { MultiLevelSortingList } from './MultiLevelSortingList';
 import { ScrollableContent } from '../ScrollableContent';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface MultiLevelSortingPanelProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -34,10 +35,10 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
   }
 
   return (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="multi-level-sorting-panel"
       width="100%"
-      onCloseButtonClick={() => {
+      onClose={() => {
         multiLevelSorting.reportSidePanelClose();
         table.sidePanel.close();
       }}
@@ -87,7 +88,7 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
           </Box>
         </Box>
       </Tooltip>
-    </SidePanel>
+    </PatternsSidePanel>
   );
 }
 

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2484428981";
+var _namespace_ = "NestedTablePlaceholderStatesRow3476621018";
 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":"NestedTablePlaceholderStatesRow2484428981__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3476621018__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_ = "NestedTableRow2222993695";
+var _namespace_ = "NestedTableRow1862023425";
 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":"NestedTableRow2222993695__root","firstLevel":"NestedTableRow2222993695__firstLevel","placeholder":"NestedTableRow2222993695__placeholder","parentHovered":"NestedTableRow2222993695__parentHovered"};
+export var classes = {"root":"NestedTableRow1862023425__root","firstLevel":"NestedTableRow1862023425__firstLevel","placeholder":"NestedTableRow1862023425__placeholder","parentHovered":"NestedTableRow1862023425__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_ = "MultipleDragOverlayEffect2289837617";
+var _namespace_ = "MultipleDragOverlayEffect1456717427";
 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":"MultipleDragOverlayEffect2289837617__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1456717427__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_ = "NestedTableDragAndDropRow792121382";
+var _namespace_ = "NestedTableDragAndDropRow2496377944";
 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":"NestedTableDragAndDropRow792121382__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2496377944__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_ = "PickerContent1116485106";
+var _namespace_ = "PickerContent3767537066";
 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":"PickerContent1116485106__root"};
+export var classes = {"root":"PickerContent3767537066__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_ = "PickerContentAdditionalStep3791920242";
+var _namespace_ = "PickerContentAdditionalStep919761103";
 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":"PickerContentAdditionalStep3791920242__root","titles":"PickerContentAdditionalStep3791920242__titles","suffix":"PickerContentAdditionalStep3791920242__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep919761103__root","titles":"PickerContentAdditionalStep919761103__titles","suffix":"PickerContentAdditionalStep919761103__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_ = "PickerTableListItem3878395080";
+var _namespace_ = "PickerTableListItem2671529059";
 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":"PickerTableListItem3878395080__root"};
+export var classes = {"root":"PickerTableListItem2671529059__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/RadioGroupFilter/RadioGroupFilter.tsx

@@ -4,6 +4,7 @@ import { useDropdownSelectFilterState } from '../../hooks';
 import { FilterProps } from '../../model';
 import { Box, RadioGroup, RadioProps } from '@wix/design-system';
 import { KeyedItem } from '@wix/bex-core';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export interface RadioGroupFilterProps<V> extends FilterProps<V[]> {
   /**
@@ -27,6 +28,11 @@ function _RadioGroupFilter<V>(props: RadioGroupFilterProps<V>) {
   const { dropdownSelect, init } = useDropdownSelectFilterState<V>({
     filter,
   });
+
+  const {
+    radioGroup: { spacing },
+  } = usePatternsTheme();
+
   const {
     select: { selectedValues },
     container: { translate: t },
@@ -63,6 +69,7 @@ function _RadioGroupFilter<V>(props: RadioGroupFilterProps<V>) {
       <RadioGroup
         dataHook="radio-group-filter-group"
         value={selectedValues[0]?.key || defaultValue.id}
+        spacing={spacing}
         onChange={(v) => {
           if (v?.toString() === defaultValue.id) {
             dropdownSelect.clear();

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export type ResponsiveButtonProps = ButtonAsButtonProps<{
   dataHook?: string;
@@ -29,6 +30,11 @@ function _ResponsiveButton(props: ResponsiveButtonProps) {
     ...rest
   } = props;
 
+  const {
+    sizes,
+    toolbar: { button },
+  } = usePatternsTheme();
+
   const {
     toolbar: { responsive },
   } = useToolbarCollectionContext();
@@ -48,7 +54,7 @@ function _ResponsiveButton(props: ResponsiveButtonProps) {
         <IconButton
           {...rest}
           dataHook={dataHook}
-          size="small"
+          size={sizes.small}
           priority="secondary"
         >
           {icon}
@@ -60,9 +66,10 @@ function _ResponsiveButton(props: ResponsiveButtonProps) {
       as={as}
       {...rest}
       dataHook={dataHook}
-      size="small"
+      size={sizes.small}
       priority="secondary"
       prefixIcon={icon}
+      suffixIcon={button.suffix}
     >
       {children}
     </Button>

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

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

package/src/components/SidePanel/PatternsSidePanel.tsx

@@ -0,0 +1,22 @@
+import { SidePanel, SidePanelProps } from '@wix/design-system';
+import React from 'react';
+import { useSidePanelProps } from '../../hooks/layout/useSidePanelProps';
+
+export interface PatternsSidePanelProps
+  extends Omit<
+    SidePanelProps,
+    | 'closeButtonProps'
+    | 'onCloseButtonClick'
+    | 'backButtonProps'
+    | 'onBackButtonClick'
+  > {
+  onClose?: () => void;
+}
+
+export function PatternsSidePanel(props: PatternsSidePanelProps) {
+  const { onClose, ...rest } = props;
+  const sidePanelProps = useSidePanelProps({
+    onClose,
+  });
+  return <SidePanel {...sidePanelProps} {...rest} />;
+}

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -15,7 +15,7 @@ export interface SidePanelModalProps {
 
 function _SidePanelModal(props: SidePanelModalProps) {
   const { top, left, state } = props;
-  const { onSidePanelOpen, closeSidePanel, containerLayoutType } =
+  const { onSidePanelOpen, closeSidePanel, isPanelLayout } =
     useWixPatternsContainer();
   const pageState = usePageContext();
 
@@ -24,15 +24,15 @@ function _SidePanelModal(props: SidePanelModalProps) {
   const { isOpen } = sidePanel;
 
   const width = useMemo(
-    () => (containerLayoutType === 'panel' ? '100%' : SidePanelWidth),
-    [containerLayoutType],
+    () => (isPanelLayout ? '100%' : SidePanelWidth),
+    [isPanelLayout],
   );
 
   const style = useMemo(
     () => ({
       top,
       left:
-        containerLayoutType === 'panel'
+        isPanelLayout
           ? 0
           : left != null
           ? left - SidePanelWidth
@@ -80,7 +80,7 @@ function _SidePanelModal(props: SidePanelModalProps) {
       dataHook="cairo-side-panel-modal"
       transitionStatus={sidePanel.transition.status}
       style={style}
-      appendTo={containerLayoutType === 'panel' ? 'parent' : undefined}
+      appendTo={isPanelLayout ? 'parent' : undefined}
       contentRef={(el) => {
         sidePanel.focus.modalElement = el;
       }}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard2427498728";
+var _namespace_ = "SkeletonCard1949124427";
 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":"SkeletonCard2427498728__root","headerLoading":"SkeletonCard2427498728__headerLoading"};
+export var classes = {"root":"SkeletonCard1949124427__root","headerLoading":"SkeletonCard1949124427__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_ = "SlidingModal1740485261";
+var _namespace_ = "SlidingModal2512982585";
 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":"SlidingModal1740485261__root"};
+export var classes = {"root":"SlidingModal2512982585__root"};
 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_ = "TabsFilter2458939024";
+var _namespace_ = "TabsFilter4153273067";
 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":"TabsFilter2458939024__root","title":"TabsFilter2458939024__title"};
+export var classes = {"root":"TabsFilter4153273067__root","title":"TabsFilter4153273067__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_ = "ManageTagsModal1989625989";
+var _namespace_ = "ManageTagsModal3205379865";
 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":"ManageTagsModal1989625989__root"};
+export var classes = {"root":"ManageTagsModal3205379865__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_ = "ToolbarItem2780647987";
+var _namespace_ = "ToolbarItem2832233981";
 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":"ToolbarItem2780647987__root"};
+export var classes = {"root":"ToolbarItem2832233981__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_ = "ToolbarItemBox4183899479";
+var _namespace_ = "ToolbarItemBox198729933";
 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":"ToolbarItemBox4183899479__root"};
+export var classes = {"root":"ToolbarItemBox198729933__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_ = "common2813459454";
+var _namespace_ = "common351681796";
 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":"common2813459454__root","column":"common2813459454__column","fullHeight":"common2813459454__fullHeight"};
+export var classes = {"root":"common351681796__root","column":"common351681796__column","fullHeight":"common351681796__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/layout/useSidePanelProps.ts

@@ -0,0 +1,24 @@
+import { SidePanelProps } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export function useSidePanelProps({
+  onClose,
+}: {
+  onClose?: () => void;
+}): Partial<SidePanelProps> {
+  const { isPanelLayout } = useWixPatternsContainer();
+
+  if (isPanelLayout) {
+    return {
+      backButtonProps: {
+        onClick: onClose,
+      },
+    };
+  }
+
+  return {
+    closeButtonProps: {
+      onClick: onClose,
+    },
+  };
+}

package/src/hooks/useCollectionPageChild/useCollectionPageChild.tsx

@@ -7,6 +7,10 @@ import {
   CollectionPageContent,
   CollectionPageContentElement,
 } from '../../components/CollectionPageContent';
+import {
+  CollectionPageFooter,
+  CollectionPageFooterElement,
+} from '../../components/CollectionPageFooter';
 
 export function useCollectionPageChild(children: ReactNode) {
   // Mapping to raw WDS components since original Page filtering none expected components: https://github.com/wix-private/wix-design-systems/blob/master/packages/wix-style-react/src/Page/Page.js#L626
@@ -23,6 +27,10 @@ export function useCollectionPageChild(children: ReactNode) {
             const content = child as CollectionPageContentElement;
             newChild = content.type.useCollectionPageContent(content);
             break;
+          case CollectionPageFooter:
+            const footer = child as CollectionPageFooterElement;
+            newChild = footer.type.useCollectionPageFooter(footer);
+            break;
           default:
             // WIP: Eventually once we will support all child types this will return null
             newChild = child;

package/src/providers/CairoProvider.tsx

@@ -11,6 +11,8 @@ import '../styles.global.css';
 
 import * as wixDesignSystemVersion from '../wix-design-system-version';
 import { minimalRequiredWdsRuntimeCheck } from '../minimalRequiredWdsRuntimeCheck';
+import { PatternsThemeProvider } from '../themes/PatternsThemeProvider';
+import { panelTheme } from '../themes/panel-theme';
 
 configure();
 
@@ -25,6 +27,7 @@ export interface CairoProviderProps extends CairoProviderBaseProps {}
 export function CairoProvider({
   value: valueProp,
   children,
+  layoutType,
   ...rest
 }: CairoProviderProps) {
   const [value] = useState(() => ({
@@ -35,9 +38,18 @@ export function CairoProvider({
     },
   }));
 
+  let child = children;
+
+  if (layoutType === 'panel') {
+    child = (
+      <PatternsThemeProvider value={panelTheme}>
+        {children}
+      </PatternsThemeProvider>
+    );
+  }
   return (
-    <CairoProviderBase {...rest} value={value}>
-      {children}
+    <CairoProviderBase {...rest} value={value} layoutType={layoutType}>
+      {child}
     </CairoProviderBase>
   );
 }

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

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

package/src/state/CollectionPage/index.ts

@@ -1,2 +1,3 @@
 export * from './useCollectionPageHeader';
 export * from './useCollectionPageContent';
+export * from './useCollectionPageFooter';

package/src/state/CollectionPage/useCollectionPageContent.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import { Page } from '@wix/design-system';
+import { Page, SidePanel } from '@wix/design-system';
 import { CollectionPageContentElement } from '../../components/CollectionPageContent';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export function useCollectionPageContent(child: CollectionPageContentElement) {
+  const { isPanelLayout } = useWixPatternsContainer();
+  if (isPanelLayout) {
+    return <SidePanel.Content {...child.props} noPadding stretchVertically />;
+  }
   return <Page.Content {...child.props} />;
 }

package/src/state/CollectionPage/useCollectionPageFooter.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Page, SidePanel } 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 <Page.Footer {...child.props} />;
+}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

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

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

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