@wix/patterns 1.263.0 → 1.265.0

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_ = "NestedTableDragAndDropRow2736321106";
 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":"NestedTableDragAndDropRow2736321106__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_ = "PickerContent1184630930";
 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":"PickerContent1184630930__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_ = "PickerContentAdditionalStep1014198277";
 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":"PickerContentAdditionalStep1014198277__root","titles":"PickerContentAdditionalStep1014198277__titles","suffix":"PickerContentAdditionalStep1014198277__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_ = "PickerTableListItem2409496180";
 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":"PickerTableListItem2409496180__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_ = "ScrollableContent3193808438";
 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":"ScrollableContent3193808438__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_ = "SkeletonCard366659410";
 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":"SkeletonCard366659410__root","headerLoading":"SkeletonCard366659410__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_ = "SlidingModal826424250";
 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":"SlidingModal826424250__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/TableBase.tsx

@@ -19,13 +19,13 @@ export interface TableBaseProps<T, F extends FiltersMap>
 function _TableBase<T, F extends FiltersMap = FiltersMap>(
   props: TableBaseProps<T, F>,
 ) {
-  const {
-    state,
-    sections,
-    useNewInfiniteScrollLoader,
-    internalScroll,
-    multiLevelSorting,
-  } = props;
+  const { state, sections, useNewInfiniteScrollLoader, multiLevelSorting } =
+    props;
+
+  const internalScroll = state.toolbar.container.isPanelLayout
+    ? true
+    : props.internalScroll;
+
   const { table } = state;
   const { collection } = table;
   const {

package/src/components/TableFolders/TableFoldersContent.tsx

@@ -141,7 +141,7 @@ function _TableFoldersContent<
     tableGridSwitchButton,
     topNotification,
     search,
-    showTitleBar = true,
+    showTitleBar = !state.container.isPanelLayout,
     onRowClick,
     onFolderRowClick,
     selectionDisabled: selectionDisabledProp,

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_ = "TabsFilter3146213581";
 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":"TabsFilter3146213581__root","title":"TabsFilter3146213581__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_ = "ManageTagsModal497343785";
 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":"ManageTagsModal497343785__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -33,11 +33,12 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
     summaryBar,
     secondaryActions,
     moreActions,
+    internalScroll,
   } = props;
 
   checkConflictingToolbarProps(props);
 
-  state.internalScroll = props.internalScroll;
+  state.internalScroll = state.container.isPanelLayout ? true : internalScroll;
 
   const pageState = useCollectionPageContext();
   const router = useWixPatternsRouter();

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_ = "ToolbarItem246157428";
 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":"ToolbarItem246157428__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_ = "ToolbarItemBox3629337748";
 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":"ToolbarItemBox3629337748__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_ = "common430087294";
 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":"common430087294__root","column":"common430087294__column","fullHeight":"common430087294__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/dashboard/WixPatternsDashboardBaseProvider.tsx

@@ -7,18 +7,17 @@ import {
   showToastCompat,
   WixPatternsEssentials,
 } from '@wix/bex-core';
+import { CairoProviderBaseProps, usePageLocation } from '@wix/bex-core/react';
 import { Trans, useTranslation } from '@wix/bex-utils/@wix/wix-i18n-config';
 import { Essentials } from '@wix/fe-essentials/core';
-import React, { ReactNode, useState } from 'react';
+import React, { useState } from 'react';
 import { CairoProvider as CairoProviderBase } from '../providers';
-import { usePageLocation } from '@wix/bex-core/react';
 import { dashboard as dashboardType, EnvironmentState } from '@wix/dashboard';
 import { getInstanceJwtData } from './getInstanceJwtData';
 import { bi, errorHandler, experiments } from '@wix/essentials';
 
-export interface WixPatternsProviderProps {
-  children?: ReactNode;
-}
+export interface WixPatternsProviderProps
+  extends Omit<CairoProviderBaseProps, 'localCache' | 'contextType'> {}
 
 interface WixPatternsProviderPrivateProps extends WixPatternsProviderProps {
   dashboard: Pick<

package/src/essentials/WixPatternsEssentialsProvider.tsx

@@ -1,22 +1,19 @@
-import React, { ReactNode, useState } from 'react';
-import { ContextType, WixPatternsEssentialsOverrides } from '@wix/bex-core';
+import React, { useState } from 'react';
+import { WixPatternsEssentialsOverrides } from '@wix/bex-core';
+import { CairoProviderBaseProps } from '@wix/bex-core/react';
 import { useEssentials } from '@wix/fe-essentials/react';
 import { CairoProvider } from '../providers';
 import { buildWixPatternsEssentials } from './buildWixPatternsEssentials';
 
-export interface WixPatternsEssentialsProviderProps {
+export interface WixPatternsEssentialsProviderProps
+  extends CairoProviderBaseProps {
   value?: Partial<WixPatternsEssentialsOverrides>;
-  children?: ReactNode;
-  localCache?: boolean;
-  contextType?: ContextType;
 }
 
-export function WixPatternsEssentialsProvider({
-  value,
-  children,
-  localCache,
-  contextType,
-}: WixPatternsEssentialsProviderProps) {
+export function WixPatternsEssentialsProvider(
+  props: WixPatternsEssentialsProviderProps,
+) {
+  const { value, children } = props;
   const essentials = useEssentials();
 
   const [wixPatternsEssentials] = useState(() =>
@@ -26,11 +23,7 @@ export function WixPatternsEssentialsProvider({
   );
 
   return (
-    <CairoProvider
-      value={wixPatternsEssentials}
-      localCache={localCache}
-      contextType={contextType}
-    >
+    <CairoProvider {...props} value={wixPatternsEssentials}>
       {children}
     </CairoProvider>
   );

package/src/giza/WixPatternsGizaProvider.tsx

@@ -1,21 +1,15 @@
 import React, { ReactNode, useState } from 'react';
-import {
-  ContextType,
-  WixPatternsEssentialsOverrides,
-  showToastCompat,
-} from '@wix/bex-core';
+import { showToastCompat, WixPatternsEssentialsOverrides } from '@wix/bex-core';
+import { CairoProviderBaseProps, usePageLocation } from '@wix/bex-core/react';
 import { useEssentials } from '@wix/yoshi-flow-bm/fe-essentials-giza';
 import { useComponentLoaded, usePlatformApi } from '@wix/yoshi-flow-bm';
 import { CairoProvider } from '../providers';
 import { buildWixPatternsEssentials } from './buildWixPatternsEssentials';
 import { minimalRequiredRuntimeCheck } from '../utils/minimalRequiredRuntimeCheck';
-import { usePageLocation } from '@wix/bex-core/react';
 
-export interface WixPatternsGizaProviderProps {
+export interface WixPatternsGizaProviderProps extends CairoProviderBaseProps {
   children?: ReactNode;
   value?: Partial<WixPatternsEssentialsOverrides>;
-  localCache?: boolean;
-  contextType?: ContextType;
 }
 
 export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
@@ -29,7 +23,6 @@ export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
   const {
     children,
     value: wixPatternsEssentialsOverridesProp,
-    localCache,
     contextType = 'ACCOUNT',
   } = props;
   const { showToast, navigateTo, onBeforeUnload, getHostContainer } =
@@ -65,8 +58,8 @@ export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
 
   return (
     <CairoProvider
+      {...props}
       value={wixPatternsEssentials}
-      localCache={localCache}
       contextType={contextType}
     >
       {children}

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

@@ -1,6 +1,6 @@
 import {
-  CairoProvider as CairoProviderBase,
-  CairoProviderProps as CairoProviderBaseProps,
+  CairoProvider as CairoProviderCore,
+  CairoProviderProps as CairoProviderCoreProps,
 } from '@wix/bex-core/react';
 import { configure } from '@wix/bex-utils/react-dom';
 import React, { useState } from 'react';
@@ -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();
 
@@ -20,13 +22,11 @@ if (process.env.NODE_ENV !== 'production') {
   });
 }
 
-export interface CairoProviderProps extends CairoProviderBaseProps {}
+export interface CairoProviderProps extends CairoProviderCoreProps {}
+
+export function CairoProvider(props: CairoProviderProps) {
+  const { value: valueProp, children, layoutType, ...rest } = props;
 
-export function CairoProvider({
-  value: valueProp,
-  children,
-  ...rest
-}: CairoProviderProps) {
   const [value] = useState(() => ({
     ...valueProp,
     environment: {
@@ -35,9 +35,18 @@ export function CairoProvider({
     },
   }));
 
+  let child = children;
+
+  if (layoutType === 'panel') {
+    child = (
+      <PatternsThemeProvider value={panelTheme}>
+        {children}
+      </PatternsThemeProvider>
+    );
+  }
   return (
-    <CairoProviderBase {...rest} value={value}>
-      {children}
-    </CairoProviderBase>
+    <CairoProviderCore {...rest} value={value} layoutType={layoutType}>
+      {child}
+    </CairoProviderCore>
   );
 }

package/src/providers/WixPatternsBaseProvider.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode, useState } from 'react';
 import { CairoProvider } from './CairoProvider';
 import { experimentsFallbackApi, WixPatternsEssentials } from '@wix/bex-core';
+import { CairoProviderBaseProps } from '@wix/bex-core/react';
 import { Trans } from '@wix/bex-utils/@wix/wix-i18n-config';
 import { WixPatternsMinimalEssentials } from './WixPatternsMinimalEssentials';
 
-export interface WixPatternsBaseProviderProps {
+export interface WixPatternsBaseProviderProps extends CairoProviderBaseProps {
   /**
    * Minimal essentials that are required for wix-patterns to work (i.e i18n,bi,experiments)
    */

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_ = "CollectionPageHeader3779852258";
 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":"CollectionPageHeader3779852258__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';