@wix/patterns 1.453.0 → 1.455.0

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2021328766";
+var _namespace_ = "View1029839718";
 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":"View2021328766__root"};
+export var classes = {"root":"View1029839718__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4268885103";
+var _namespace_ = "Edit1782115092";
 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":"Edit4268885103__root","numberInput":"Edit4268885103__numberInput"};
+export var classes = {"root":"Edit1782115092__root","numberInput":"Edit1782115092__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View465282478";
+var _namespace_ = "View3182519026";
 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":"View465282478__root","textView":"View465282478__textView"};
+export var classes = {"root":"View3182519026__root","textView":"View3182519026__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit630517005";
+var _namespace_ = "Edit3133063490";
 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":"Edit630517005__root","jsonInput":"Edit630517005__jsonInput"};
+export var classes = {"root":"Edit3133063490__root","jsonInput":"Edit3133063490__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1286480812";
+var _namespace_ = "View1787758235";
 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":"View1286480812__root"};
+export var classes = {"root":"View1787758235__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1481640690";
+var _namespace_ = "Edit1923521913";
 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":"Edit1481640690__root","selectInput":"Edit1481640690__selectInput"};
+export var classes = {"root":"Edit1923521913__root","selectInput":"Edit1923521913__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2162784185";
+var _namespace_ = "Edit1271775465";
 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":"Edit2162784185__root","editWrapper":"Edit2162784185__editWrapper","inputArea":"Edit2162784185__inputArea"};
+export var classes = {"root":"Edit1271775465__root","editWrapper":"Edit1271775465__editWrapper","inputArea":"Edit1271775465__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4287754222";
+var _namespace_ = "View2309756809";
 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":"View4287754222__root"};
+export var classes = {"root":"View2309756809__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2384698736";
+var _namespace_ = "Edit1765554353";
 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":"Edit2384698736__root","wrapper":"Edit2384698736__wrapper","overlay":"Edit2384698736__overlay"};
+export var classes = {"root":"Edit1765554353__root","wrapper":"Edit1765554353__wrapper","overlay":"Edit1765554353__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2064525405";
+var _namespace_ = "Edit3664384129";
 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":"Edit2064525405__root","urlInput":"Edit2064525405__urlInput"};
+export var classes = {"root":"Edit3664384129__root","urlInput":"Edit3664384129__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View258342196";
+var _namespace_ = "View928509354";
 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":"View258342196__root","textView":"View258342196__textView","urlText":"View258342196__urlText","suffix":"View258342196__suffix"};
+export var classes = {"root":"View928509354__root","textView":"View928509354__textView","urlText":"View928509354__urlText","suffix":"View928509354__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase1390390238";
+var _namespace_ = "EmptyStateBase3927892820";
 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":"EmptyStateBase1390390238__root"};
+export var classes = {"root":"EmptyStateBase3927892820__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_ = "EntityPagePlain1630098642";
+var _namespace_ = "EntityPagePlain3411895053";
 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":"EntityPagePlain1630098642__root"};
+export var classes = {"root":"EntityPagePlain3411895053__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_ = "Fade2121838970";
+var _namespace_ = "Fade125176140";
 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":"Fade2121838970__root"};
+export var classes = {"root":"Fade125176140__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -18,6 +18,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
 import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
+import { ScrollableContent } from '../ScrollableContent';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 const FILTER_SEARCH_THRESHOLD = 7;
@@ -105,10 +106,7 @@ function _FiltersPanel<T, F extends FiltersMap>(
         )}
       </SidePanel.Header>
 
-      <div
-        data-hook="filters-panel-scroll-container"
-        style={{ overflowY: 'auto' }}
-      >
+      <ScrollableContent dataHook="filters-panel-scroll-container" overflowY>
         {noResults ? (
           <FiltersPanelSearchNoResults state={filtersPanelState} />
         ) : (
@@ -122,7 +120,7 @@ function _FiltersPanel<T, F extends FiltersMap>(
             items={accordionItems}
           />
         )}
-      </div>
+      </ScrollableContent>
       <SidePanel.Footer noPadding>
         <FiltersPanelFooter
           state={toolbar}

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1967384934";
+var _namespace_ = "ImportStepUpload4079824026";
 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":"ImportStepUpload1967384934__root","fileUpload":"ImportStepUpload1967384934__fileUpload"};
+export var classes = {"root":"ImportStepUpload4079824026__root","fileUpload":"ImportStepUpload4079824026__fileUpload"};
 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_ = "InputOverflow240753260";
+var _namespace_ = "InputOverflow3748891380";
 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":"InputOverflow240753260__root"};
+export var classes = {"root":"InputOverflow3748891380__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_ = "LoadingRow4113539014";
+var _namespace_ = "LoadingRow1073025516";
 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":"LoadingRow4113539014__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow4113539014__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1073025516__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1073025516__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_ = "MaxHeightText3902442109";
+var _namespace_ = "MaxHeightText716070228";
 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":"MaxHeightText3902442109__root"};
+export var classes = {"root":"MaxHeightText716070228__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_ = "MaxLines3643567282";
+var _namespace_ = "MaxLines2426652755";
 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":"MaxLines3643567282__root"};
+export var classes = {"root":"MaxLines2426652755__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_ = "MultiBulkActionToolbar2079194393";
+var _namespace_ = "MultiBulkActionToolbar3972161443";
 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":"MultiBulkActionToolbar2079194393__root","leftGroupWrapper":"MultiBulkActionToolbar2079194393__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2079194393__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2079194393__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3972161443__root","leftGroupWrapper":"MultiBulkActionToolbar3972161443__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3972161443__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3972161443__selectedCountText"};
 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_ = "NestedTablePlaceholderStatesRow2465888099";
+var _namespace_ = "NestedTablePlaceholderStatesRow2638073900";
 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":"NestedTablePlaceholderStatesRow2465888099__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2638073900__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_ = "NestedTableRow3572834287";
+var _namespace_ = "NestedTableRow1925904929";
 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":"NestedTableRow3572834287__root","firstLevel":"NestedTableRow3572834287__firstLevel","placeholder":"NestedTableRow3572834287__placeholder","parentHovered":"NestedTableRow3572834287__parentHovered"};
+export var classes = {"root":"NestedTableRow1925904929__root","firstLevel":"NestedTableRow1925904929__firstLevel","placeholder":"NestedTableRow1925904929__placeholder","parentHovered":"NestedTableRow1925904929__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_ = "MultipleDragOverlayEffect1478146261";
+var _namespace_ = "MultipleDragOverlayEffect1460735402";
 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":"MultipleDragOverlayEffect1478146261__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1460735402__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_ = "NestedTableDragAndDropRow391701378";
+var _namespace_ = "NestedTableDragAndDropRow2886594640";
 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":"NestedTableDragAndDropRow391701378__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2886594640__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,6 +4,13 @@ import { baseUniDriverFactory } from '../../unidriver';
 export function PageWrapperUniDriver(base: UniDriver, _body: UniDriver) {
   return {
     getLang: async () => base.attr('lang'),
+    getPageWidth: async () => {
+      const page = (await base
+        .$('[data-hook="page-and-modals-root"]')
+        .getNative()) as HTMLElement;
+
+      return page.style.width;
+    },
     getDndKitLiveRegion: (count: number) =>
       base
         .$('[data-hook="modals-container"]')

package/src/components/PageWrapper/PageWrapperBase.tsx

@@ -4,7 +4,7 @@ import {
   PageContextProvider,
   useWixPatternsContainer,
 } from '@wix/bex-core/react';
-import { PageState, SidePanelWidth } from '@wix/bex-core';
+import { PageState } from '@wix/bex-core';
 import { runInAction } from 'mobx';
 import { WixDesignSystemProvider } from '@wix/design-system';
 import { version as cairoVersion } from '../../version';
@@ -18,20 +18,23 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
   const { pageState, children } = props;
 
   const [state] = useState(() => pageState ?? new PageState());
-  const { modalsContainerRef, stackingRootRef, _sidePanelOpen } = state;
-  const sidePanelOpen = useReactive(_sidePanelOpen);
+  const { modalsContainerRef, stackingRootRef, _sidePanelReservedWidth } =
+    state;
+  const sidePanelReservedWidth = useReactive(_sidePanelReservedWidth);
   const { environment, useRelativeSidePanel, isMobile } =
     useWixPatternsContainer();
 
   const pageAndModalsRootStyle = useMemo(
     () => ({
       position: 'relative' as const,
-      width: sidePanelOpen ? `calc(100% - ${SidePanelWidth}px)` : '100%',
+      width: sidePanelReservedWidth
+        ? `calc(100% - ${sidePanelReservedWidth}px)`
+        : '100%',
       height: '100%',
       transition: 'width 0.4s ease 0s',
       zIndex: 1,
     }),
-    [sidePanelOpen],
+    [sidePanelReservedWidth],
   );
 
   const rootStyle = useMemo(
@@ -63,7 +66,9 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
         }}
         lang={environment.language}
       >
-        <div style={pageAndModalsRootStyle}>{children}</div>
+        <div data-hook="page-and-modals-root" style={pageAndModalsRootStyle}>
+          {children}
+        </div>
         <div
           data-hook="modals-container"
           ref={(el) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent4239466499";
+var _namespace_ = "PickerContent1042923013";
 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":"PickerContent4239466499__root"};
+export var classes = {"root":"PickerContent1042923013__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_ = "PickerContentAdditionalStep25904613";
+var _namespace_ = "PickerContentAdditionalStep562808201";
 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":"PickerContentAdditionalStep25904613__root","titles":"PickerContentAdditionalStep25904613__titles","suffix":"PickerContentAdditionalStep25904613__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep562808201__root","titles":"PickerContentAdditionalStep562808201__titles","suffix":"PickerContentAdditionalStep562808201__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_ = "PickerTableListItem266401590";
+var _namespace_ = "PickerTableListItem3697136871";
 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":"PickerTableListItem266401590__root"};
+export var classes = {"root":"PickerTableListItem3697136871__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_ = "ScrollableContent3623041082";
+var _namespace_ = "ScrollableContent929363441";
 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":"ScrollableContent3623041082__root"};
+export var classes = {"root":"ScrollableContent929363441__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};