@wix/patterns 1.293.0 → 1.294.0

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

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

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading764938732";
+var _namespace_ = "Heading4240559294";
 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":"Heading764938732__root"};
+export var classes = {"root":"Heading4240559294__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_ = "InputOverflow2643339167";
+var _namespace_ = "InputOverflow2676779985";
 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":"InputOverflow2643339167__root"};
+export var classes = {"root":"InputOverflow2676779985__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_ = "LoadingRow3136630845";
+var _namespace_ = "LoadingRow3390662115";
 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":"LoadingRow3136630845__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3136630845__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3390662115__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3390662115__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_ = "MaxHeightText2524688560";
+var _namespace_ = "MaxHeightText1269394709";
 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":"MaxHeightText2524688560__root"};
+export var classes = {"root":"MaxHeightText1269394709__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_ = "MaxLines2769455779";
+var _namespace_ = "MaxLines1149589607";
 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":"MaxLines2769455779__root"};
+export var classes = {"root":"MaxLines1149589607__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_ = "MultiBulkActionToolbar1338277002";
+var _namespace_ = "MultiBulkActionToolbar3085669340";
 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":"MultiBulkActionToolbar1338277002__root"};
+export var classes = {"root":"MultiBulkActionToolbar3085669340__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_ = "NestedTablePlaceholderStatesRow2390724309";
+var _namespace_ = "NestedTablePlaceholderStatesRow3541608152";
 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":"NestedTablePlaceholderStatesRow2390724309__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3541608152__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_ = "NestedTableRow3894354182";
+var _namespace_ = "NestedTableRow1225442242";
 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":"NestedTableRow3894354182__root","firstLevel":"NestedTableRow3894354182__firstLevel","placeholder":"NestedTableRow3894354182__placeholder","parentHovered":"NestedTableRow3894354182__parentHovered"};
+export var classes = {"root":"NestedTableRow1225442242__root","firstLevel":"NestedTableRow1225442242__firstLevel","placeholder":"NestedTableRow1225442242__placeholder","parentHovered":"NestedTableRow1225442242__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_ = "MultipleDragOverlayEffect279577481";
+var _namespace_ = "MultipleDragOverlayEffect1674066281";
 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":"MultipleDragOverlayEffect279577481__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1674066281__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_ = "NestedTableDragAndDropRow717664795";
+var _namespace_ = "NestedTableDragAndDropRow261684141";
 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":"NestedTableDragAndDropRow717664795__root"};
+export var classes = {"root":"NestedTableDragAndDropRow261684141__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageWrapper/PageWrapperBase.tsx

@@ -18,7 +18,7 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
   const [state] = useState(() => pageState ?? new PageState());
   const { modalsContainerRef, stackingRootRef, _sidePanelOpen } = state;
   const sidePanelOpen = useReactive(_sidePanelOpen);
-  const { environment } = useWixPatternsContainer();
+  const { environment, useRelativeSidePanel } = useWixPatternsContainer();
 
   // CAIRO-3582: modify mobile detection to use user agent
   // useEffect(() => {
@@ -41,6 +41,7 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
       position: 'relative' as const,
       width: '100%',
       height: '100%',
+      overflow: useRelativeSidePanel ? ('hidden' as const) : undefined,
     }),
     [],
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent1604483775";
+var _namespace_ = "PickerContent1012843822";
 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":"PickerContent1604483775__root"};
+export var classes = {"root":"PickerContent1012843822__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_ = "PickerContentAdditionalStep1425898416";
+var _namespace_ = "PickerContentAdditionalStep1513575593";
 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":"PickerContentAdditionalStep1425898416__root","titles":"PickerContentAdditionalStep1425898416__titles","suffix":"PickerContentAdditionalStep1425898416__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1513575593__root","titles":"PickerContentAdditionalStep1513575593__titles","suffix":"PickerContentAdditionalStep1513575593__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_ = "PickerTableListItem1858320760";
+var _namespace_ = "PickerTableListItem1758675998";
 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":"PickerTableListItem1858320760__root"};
+export var classes = {"root":"PickerTableListItem1758675998__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_ = "ScrollableContent211797723";
+var _namespace_ = "ScrollableContent1022134013";
 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":"ScrollableContent211797723__root"};
+export var classes = {"root":"ScrollableContent1022134013__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -15,8 +15,12 @@ export interface SidePanelModalProps {
 
 function _SidePanelModal(props: SidePanelModalProps) {
   const { top, left, state } = props;
-  const { onSidePanelOpen, closeSidePanel, isPanelLayout } =
-    useWixPatternsContainer();
+  const {
+    onSidePanelOpen,
+    closeSidePanel,
+    isPanelLayout,
+    useRelativeSidePanel,
+  } = useWixPatternsContainer();
   const pageState = usePageContext();
 
   const { sidePanel, sidePanelComponents } = state;
@@ -31,11 +35,17 @@ function _SidePanelModal(props: SidePanelModalProps) {
   const style = useMemo(
     () => ({
       top,
-      left: isPanelLayout
-        ? 0
-        : left != null
-        ? left - SidePanelWidth
-        : undefined,
+      ...(useRelativeSidePanel
+        ? {
+            right: isPanelLayout ? undefined : 0,
+          }
+        : {
+            left: isPanelLayout
+              ? 0
+              : left != null
+              ? left - SidePanelWidth
+              : undefined,
+          }),
       bottom: 0,
       overflow: 'hidden',
       width,
@@ -79,7 +89,8 @@ function _SidePanelModal(props: SidePanelModalProps) {
       dataHook="cairo-side-panel-modal"
       transitionStatus={sidePanel.transition.status}
       style={style}
-      appendTo={isPanelLayout ? 'parent' : undefined}
+      appendTo={isPanelLayout || useRelativeSidePanel ? 'parent' : undefined}
+      overlay={isPanelLayout}
       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_ = "SkeletonCard2192080013";
+var _namespace_ = "SkeletonCard2881269976";
 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":"SkeletonCard2192080013__root","headerLoading":"SkeletonCard2192080013__headerLoading"};
+export var classes = {"root":"SkeletonCard2881269976__root","headerLoading":"SkeletonCard2881269976__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css

@@ -1,12 +1,15 @@
 .root {
-  -st-states: exited, appendTo(enum(parent));
+  -st-states: exited, overlay, appendTo(enum(parent));
   transition: transform 0.4s ease 0s;
   position: fixed;
   z-index: 1;
 }
 
-.root:appendTo(parent) {
+.root:overlay {
   transition: transform 0s ease 0s;
+}
+
+.root:appendTo(parent) {
   position: absolute;
 }
 

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

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

package/src/components/SlidingModal/SlidingModal.tsx

@@ -24,6 +24,7 @@ export interface SlidingModalProps {
   onRequestClose?: () => void;
   shadowWidth?: number;
   appendTo?: 'parent';
+  overlay?: boolean;
 }
 
 export function SlidingModal(props: SlidingModalProps) {
@@ -43,6 +44,7 @@ export function SlidingModal(props: SlidingModalProps) {
     onRequestClose,
     transitionStatus,
     appendTo,
+    overlay,
   } = props;
 
   const style = useMemo(
@@ -123,6 +125,7 @@ export function SlidingModal(props: SlidingModalProps) {
         classes.root,
         {
           exited: transitionStatus === 'exited',
+          overlay,
           appendTo,
         },
         ...[className, isOpen ? 'cairo-sliding-modal-is-open' : undefined],

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter687559846";
+var _namespace_ = "TabsFilter1706152998";
 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":"TabsFilter687559846__root","title":"TabsFilter687559846__title"};
+export var classes = {"root":"TabsFilter1706152998__root","title":"TabsFilter1706152998__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_ = "ManageTagsModal56886408";
+var _namespace_ = "ManageTagsModal2592090336";
 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":"ManageTagsModal56886408__root"};
+export var classes = {"root":"ManageTagsModal2592090336__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_ = "ToolbarItem4282027664";
+var _namespace_ = "ToolbarItem1620155007";
 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":"ToolbarItem4282027664__root"};
+export var classes = {"root":"ToolbarItem1620155007__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_ = "ToolbarItemBox2373593134";
+var _namespace_ = "ToolbarItemBox2213283046";
 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":"ToolbarItemBox2373593134__root"};
+export var classes = {"root":"ToolbarItemBox2213283046__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/WixPatternsModalsContainer.tsx

@@ -23,7 +23,8 @@ export function WixPatternsModalsContainer(
 ) {
   const { state, rootRef, anchorRef, zIndex = 1 } = props;
 
-  const { appendModalsToBody, lodash } = useWixPatternsContainer();
+  const { appendModalsToBody, lodash, useRelativeSidePanel } =
+    useWixPatternsContainer();
 
   const [render, setRender] = useState<{
     top?: number;
@@ -73,14 +74,22 @@ export function WixPatternsModalsContainer(
     [zIndex],
   );
 
-  let child = (
-    <div style={modalsContainerStyle} data-hook="cairo-modals-container">
-      {render.top != null && (
-        <SidePanelModal state={state} top={render.top} left={render.left} />
-      )}
-    </div>
+  let child = render.top != null && (
+    <SidePanelModal
+      state={state}
+      top={useRelativeSidePanel ? 0 : render.top}
+      left={render.left}
+    />
   );
 
+  if (!useRelativeSidePanel) {
+    child = (
+      <div style={modalsContainerStyle} data-hook="cairo-modals-container">
+        {child}
+      </div>
+    );
+  }
+
   if (render.anchor == null) {
     return null;
   }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common4180989211";
+var _namespace_ = "common2482990161";
 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":"common4180989211__root","column":"common4180989211__column","fullHeight":"common4180989211__fullHeight"};
+export var classes = {"root":"common2482990161__root","column":"common2482990161__column","fullHeight":"common2482990161__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_ = "CollectionPageHeader4254332244";
+var _namespace_ = "CollectionPageHeader2866889353";
 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":"CollectionPageHeader4254332244__root"};
+export var classes = {"root":"CollectionPageHeader2866889353__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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