@wix/patterns 1.268.0 → 1.270.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade3955103550";
+var _namespace_ = "Fade895820761";
 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":"Fade3955103550__root"};
+export var classes = {"root":"Fade895820761__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_ = "Heading126788469";
+var _namespace_ = "Heading2181737119";
 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":"Heading126788469__root"};
+export var classes = {"root":"Heading2181737119__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_ = "InputOverflow427764586";
+var _namespace_ = "InputOverflow589833437";
 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":"InputOverflow427764586__root"};
+export var classes = {"root":"InputOverflow589833437__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_ = "LoadingRow1970127218";
+var _namespace_ = "LoadingRow3717438772";
 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":"LoadingRow1970127218__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1970127218__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3717438772__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3717438772__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_ = "MaxHeightText811817058";
+var _namespace_ = "MaxHeightText1927198089";
 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":"MaxHeightText811817058__root"};
+export var classes = {"root":"MaxHeightText1927198089__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_ = "MaxLines1125993076";
+var _namespace_ = "MaxLines2208425368";
 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":"MaxLines1125993076__root"};
+export var classes = {"root":"MaxLines2208425368__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_ = "MultiBulkActionToolbar3415023081";
+var _namespace_ = "MultiBulkActionToolbar3451968442";
 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":"MultiBulkActionToolbar3415023081__root"};
+export var classes = {"root":"MultiBulkActionToolbar3451968442__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_ = "NestedTablePlaceholderStatesRow1145168280";
+var _namespace_ = "NestedTablePlaceholderStatesRow3875206318";
 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":"NestedTablePlaceholderStatesRow1145168280__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3875206318__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_ = "NestedTableRow793847650";
+var _namespace_ = "NestedTableRow1824734074";
 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":"NestedTableRow793847650__root","firstLevel":"NestedTableRow793847650__firstLevel","placeholder":"NestedTableRow793847650__placeholder","parentHovered":"NestedTableRow793847650__parentHovered"};
+export var classes = {"root":"NestedTableRow1824734074__root","firstLevel":"NestedTableRow1824734074__firstLevel","placeholder":"NestedTableRow1824734074__placeholder","parentHovered":"NestedTableRow1824734074__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_ = "MultipleDragOverlayEffect1235726712";
+var _namespace_ = "MultipleDragOverlayEffect2685109613";
 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":"MultipleDragOverlayEffect1235726712__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2685109613__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_ = "NestedTableDragAndDropRow3706152194";
+var _namespace_ = "NestedTableDragAndDropRow1505389999";
 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":"NestedTableDragAndDropRow3706152194__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1505389999__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_ = "PickerContent1424799459";
+var _namespace_ = "PickerContent2949225513";
 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":"PickerContent1424799459__root"};
+export var classes = {"root":"PickerContent2949225513__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_ = "PickerContentAdditionalStep1988769983";
+var _namespace_ = "PickerContentAdditionalStep1777674793";
 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":"PickerContentAdditionalStep1988769983__root","titles":"PickerContentAdditionalStep1988769983__titles","suffix":"PickerContentAdditionalStep1988769983__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1777674793__root","titles":"PickerContentAdditionalStep1777674793__titles","suffix":"PickerContentAdditionalStep1777674793__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_ = "PickerTableListItem1365460340";
+var _namespace_ = "PickerTableListItem4227246955";
 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":"PickerTableListItem1365460340__root"};
+export var classes = {"root":"PickerTableListItem4227246955__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_ = "ScrollableContent733215816";
+var _namespace_ = "ScrollableContent1687738429";
 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":"ScrollableContent733215816__root"};
+export var classes = {"root":"ScrollableContent1687738429__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_ = "SkeletonCard2383969299";
+var _namespace_ = "SkeletonCard1261171860";
 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":"SkeletonCard2383969299__root","headerLoading":"SkeletonCard2383969299__headerLoading"};
+export var classes = {"root":"SkeletonCard1261171860__root","headerLoading":"SkeletonCard1261171860__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_ = "SlidingModal2937515396";
+var _namespace_ = "SlidingModal862206277";
 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":"SlidingModal2937515396__root"};
+export var classes = {"root":"SlidingModal862206277__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_ = "TabsFilter768105421";
+var _namespace_ = "TabsFilter2487119388";
 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":"TabsFilter768105421__root","title":"TabsFilter768105421__title"};
+export var classes = {"root":"TabsFilter2487119388__root","title":"TabsFilter2487119388__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_ = "ManageTagsModal2429526632";
+var _namespace_ = "ManageTagsModal4194033029";
 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":"ManageTagsModal2429526632__root"};
+export var classes = {"root":"ManageTagsModal4194033029__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_ = "ToolbarItem3553500446";
+var _namespace_ = "ToolbarItem4213610158";
 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":"ToolbarItem3553500446__root"};
+export var classes = {"root":"ToolbarItem4213610158__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_ = "ToolbarItemBox4219279235";
+var _namespace_ = "ToolbarItemBox1452683993";
 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":"ToolbarItemBox4219279235__root"};
+export var classes = {"root":"ToolbarItemBox1452683993__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_ = "common1167869494";
+var _namespace_ = "common36264797";
 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":"common1167869494__root","column":"common1167869494__column","fullHeight":"common1167869494__fullHeight"};
+export var classes = {"root":"common36264797__root","column":"common36264797__column","fullHeight":"common36264797__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader1127455045";
+var _namespace_ = "CollectionPageHeader3988016596";
 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":"CollectionPageHeader1127455045__root"};
+export var classes = {"root":"CollectionPageHeader3988016596__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_ = "FormPageHeader2975891539";
+var _namespace_ = "FormPageHeader940274820";
 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":"FormPageHeader2975891539__root"};
+export var classes = {"root":"FormPageHeader940274820__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer3049499244__root.CardContainer3049499244--mobile{border-radius:0}.Collapse1642855738__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse1642855738__exit{height:0}.CollectionPage363037629__root.CollectionPage363037629--mobile{--wds-page-header-padding-horizontal:0}.CollectionPage363037629__root.CollectionPage363037629--panel{overflow:hidden;position:relative}.CollectionTable925489507__root.CollectionTable925489507--mobile td:first-child{padding-left:18px}.CollectionTable925489507__root.CollectionTable925489507--mobile td:last-child{padding-right:18px}.CollectionToolbar2741331859__left{min-width:0}.CollectionToolbar2741331859__root.CollectionToolbar2741331859--views .CollectionToolbar2741331859__left{flex-shrink:1;flex-grow:0}.CollectionToolbar2741331859__left.CollectionToolbar2741331859--expandable{flex:auto}.CollectionToolbar2741331859__root .CollectionToolbar2741331859__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2741331859__root.CollectionToolbar2741331859--views .CollectionToolbar2741331859__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2741331859__root .CollectionToolbar2741331859__right.CollectionToolbar2741331859__fullWidth{margin-inline-start:0!important}.CollectionToolbar2741331859__root.CollectionToolbar2741331859--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter3900878465__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter3900878465__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly2953838307__root.AutoCompleteReadonly2953838307--disableEditing{cursor:pointer}.AutoCompleteReadonly2953838307__root.AutoCompleteReadonly2953838307--disableEditing input{cursor:pointer}.ViewsDropdown1463646097__root{width:200px}.DragHandle878094408__root{display:flex;align-items:center}.DragHandle878094408__root:not(.DragHandle878094408--disabled){cursor:grab;color:#a8caff}.DragHandle878094408__root.DragHandle878094408--disabled{color:#acafc4}.DragHandle878094408__root:focus-visible:not(.DragHandle878094408--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle878094408__root.DragHandle878094408--disabled{pointer-events:none}.DragHandle878094408__root.DragHandle878094408--dragging:not(.DragHandle878094408--disabled){cursor:grabbing}.EntityPagePlain642998935__root.EntityPagePlain642998935--mobile{--wds-page-header-padding-horizontal:0}.Fade3955103550__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade3955103550__root.Fade3955103550--exit{opacity:0}.Heading126788469__root{visibility:visible}.Heading126788469__root.Heading126788469--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow427764586__root.InputOverflow427764586--selected:not(.InputOverflow427764586--focused) input::placeholder{color:#000624}@keyframes LoadingRow1970127218__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow1970127218__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow1970127218__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText811817058__root{opacity:1}.MaxHeightText811817058__root.MaxHeightText811817058--height24{line-height:24px}.MaxLines1125993076__root{overflow:hidden}.MaxLines1125993076__root.MaxLines1125993076--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3415023081__root{min-width:0}.NestedTablePlaceholderStatesRow1145168280__root td{padding:0!important;width:100%}.NestedTableRow793847650__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow793847650__root:hover{background-color:#e7f0ff!important}.NestedTableRow793847650__root.NestedTableRow793847650--expandable{cursor:pointer}.NestedTableRow793847650__placeholder td{padding:0!important;width:100%}.NestedTableRow793847650__root:hover td:first-of-type::before,.NestedTableRow793847650__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1235726712__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow3706152194__root.NestedTableDragAndDropRow3706152194--draggingInto td{background-color:#e7f0ff!important}.PickerContent1424799459__root{display:flex}.PickerContentAdditionalStep1988769983__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1988769983__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1365460340__root{box-sizing:border-box}.ScrollableContent733215816__root.ScrollableContent733215816--overflowY{overflow-y:auto}.ScrollableContent733215816__root.ScrollableContent733215816--overflowX{overflow-x:auto}.ScrollableContent733215816__root.ScrollableContent733215816--smooth{scroll-behavior:smooth}.SkeletonCard2383969299__headerLoading{display:block!important}.SlidingModal2937515396__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2937515396__root.SlidingModal2937515396---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal2937515396__root:not(.SlidingModal2937515396--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter768105421__root .TabsFilter768105421__title{color:inherit!important}.ManageTagsModal2429526632__root{display:flex}.ToolbarItem3553500446__root{min-width:0}.ToolbarItemBox4219279235__root{min-width:0}.ToolbarItemBox4219279235__root.ToolbarItemBox4219279235--removeStartPadding{margin-left:-24px}.ToolbarItemBox4219279235__root.ToolbarItemBox4219279235--expandable{flex:1 0}.common1167869494__column{display:flex;flex-direction:column}.common1167869494__fullHeight{height:100%;min-height:0}.CollectionPageHeader1127455045__root.CollectionPageHeader1127455045--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader1127455045__root.CollectionPageHeader1127455045--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2975891539__root.FormPageHeader2975891539--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2975891539__root.FormPageHeader2975891539--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer2477164957__root.CardContainer2477164957--mobile{border-radius:0}.Collapse3397740270__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3397740270__exit{height:0}.CollectionPage2002051450__root.CollectionPage2002051450--mobile{--wds-page-header-padding-horizontal:0}.CollectionPage2002051450__root.CollectionPage2002051450--panel{overflow:hidden;position:relative}.CollectionTable2865106376__root.CollectionTable2865106376--mobile td:first-child{padding-left:18px}.CollectionTable2865106376__root.CollectionTable2865106376--mobile td:last-child{padding-right:18px}.CollectionToolbar349092579__left{min-width:0}.CollectionToolbar349092579__root.CollectionToolbar349092579--views .CollectionToolbar349092579__left{flex-shrink:1;flex-grow:0}.CollectionToolbar349092579__left.CollectionToolbar349092579--expandable{flex:auto}.CollectionToolbar349092579__root .CollectionToolbar349092579__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar349092579__root.CollectionToolbar349092579--views .CollectionToolbar349092579__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar349092579__root .CollectionToolbar349092579__right.CollectionToolbar349092579__fullWidth{margin-inline-start:0!important}.CollectionToolbar349092579__root.CollectionToolbar349092579--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1659240687__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1659240687__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly4228521616__root.AutoCompleteReadonly4228521616--disableEditing{cursor:pointer}.AutoCompleteReadonly4228521616__root.AutoCompleteReadonly4228521616--disableEditing input{cursor:pointer}.ViewsDropdown2226868337__root{width:200px}.DragHandle4264230934__root{display:flex;align-items:center}.DragHandle4264230934__root:not(.DragHandle4264230934--disabled){cursor:grab;color:#a8caff}.DragHandle4264230934__root.DragHandle4264230934--disabled{color:#acafc4}.DragHandle4264230934__root:focus-visible:not(.DragHandle4264230934--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle4264230934__root.DragHandle4264230934--disabled{pointer-events:none}.DragHandle4264230934__root.DragHandle4264230934--dragging:not(.DragHandle4264230934--disabled){cursor:grabbing}.EntityPagePlain521301888__root.EntityPagePlain521301888--mobile{--wds-page-header-padding-horizontal:0}.Fade895820761__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade895820761__root.Fade895820761--exit{opacity:0}.Heading2181737119__root{visibility:visible}.Heading2181737119__root.Heading2181737119--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow589833437__root.InputOverflow589833437--selected:not(.InputOverflow589833437--focused) input::placeholder{color:#000624}@keyframes LoadingRow3717438772__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow3717438772__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow3717438772__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1927198089__root{opacity:1}.MaxHeightText1927198089__root.MaxHeightText1927198089--height24{line-height:24px}.MaxLines2208425368__root{overflow:hidden}.MaxLines2208425368__root.MaxLines2208425368--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3451968442__root{min-width:0}.NestedTablePlaceholderStatesRow3875206318__root td{padding:0!important;width:100%}.NestedTableRow1824734074__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1824734074__root:hover{background-color:#e7f0ff!important}.NestedTableRow1824734074__root.NestedTableRow1824734074--expandable{cursor:pointer}.NestedTableRow1824734074__placeholder td{padding:0!important;width:100%}.NestedTableRow1824734074__root:hover td:first-of-type::before,.NestedTableRow1824734074__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2685109613__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow1505389999__root.NestedTableDragAndDropRow1505389999--draggingInto td{background-color:#e7f0ff!important}.PickerContent2949225513__root{display:flex}.PickerContentAdditionalStep1777674793__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1777674793__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem4227246955__root{box-sizing:border-box}.ScrollableContent1687738429__root.ScrollableContent1687738429--overflowY{overflow-y:auto}.ScrollableContent1687738429__root.ScrollableContent1687738429--overflowX{overflow-x:auto}.ScrollableContent1687738429__root.ScrollableContent1687738429--smooth{scroll-behavior:smooth}.SkeletonCard1261171860__headerLoading{display:block!important}.SlidingModal862206277__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal862206277__root.SlidingModal862206277---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal862206277__root:not(.SlidingModal862206277--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2487119388__root .TabsFilter2487119388__title{color:inherit!important}.ManageTagsModal4194033029__root{display:flex}.ToolbarItem4213610158__root{min-width:0}.ToolbarItemBox1452683993__root{min-width:0}.ToolbarItemBox1452683993__root.ToolbarItemBox1452683993--removeStartPadding{margin-left:-24px}.ToolbarItemBox1452683993__root.ToolbarItemBox1452683993--expandable{flex:1 0}.common36264797__column{display:flex;flex-direction:column}.common36264797__fullHeight{height:100%;min-height:0}.CollectionPageHeader3988016596__root.CollectionPageHeader3988016596--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader3988016596__root.CollectionPageHeader3988016596--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader940274820__root.FormPageHeader940274820--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader940274820__root.FormPageHeader940274820--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.268.0';
+export const version = 'patterns@1.270.0';