@wix/patterns 1.258.0 → 1.260.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.258.0",
+  "version": "1.260.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -198,8 +198,8 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.209.0",
-    "@wix/bex-utils": "2.59.0",
+    "@wix/bex-core": "2.210.0",
+    "@wix/bex-utils": "2.60.0",
     "@wix/essentials": "^0.1.26",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "3.13.0",
@@ -304,7 +304,7 @@
     "@wix/fe-essentials": "^1.233.0",
     "@wix/wix-ui-icons-common": "^3.0.0",
     "@wix/yoshi-flow-bm": "^6.103.0",
-    "react": "^16.13.1",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
     "webpack": "^5.76.1"
   },
@@ -416,5 +416,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "06b4ef01be49fc246a2f8cd784dc1f77fb53daa4678d051ffad6858c"
+  "falconPackageHash": "b57757f22fa5460d4ec0a8597e1d3c7044299c25d7d14ccfe22d79f1"
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3568529214";
+var _namespace_ = "Collapse3404484541";
 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":"Collapse3568529214__root","exit":"Collapse3568529214__exit"};
+export var classes = {"root":"Collapse3404484541__root","exit":"Collapse3404484541__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionCard/CollectionCard.tsx

@@ -14,6 +14,8 @@ import type { DataExtensionType } from '../DataExtension';
 import { classes, st } from '../common.st.css.js';
 import { ErrorState } from '../ErrorState';
 import type { TagsElement } from '../Tags';
+import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface CollectionCardProps<T, F extends FiltersMap>
   extends CardProps {
@@ -41,6 +43,8 @@ function _CollectionCard<T, F extends FiltersMap>({
 }: CollectionCardProps<T, F>) {
   const page = usePageContext();
 
+  const { containerLayoutType } = useWixPatternsContainer();
+
   const { modalsContainerRef, stackingRootRef } = page;
 
   const {
@@ -115,11 +119,15 @@ function _CollectionCard<T, F extends FiltersMap>({
           }}
         />
 
-        <WixPatternsModalsContainer
-          rootRef={stackingRootRef}
-          anchorRef={modalsContainerRef}
-          state={state.panels}
-        />
+        {containerLayoutType === 'panel' ? (
+          <WixPatternsPanelModalsContainer state={state.panels} />
+        ) : (
+          <WixPatternsModalsContainer
+            rootRef={stackingRootRef}
+            anchorRef={modalsContainerRef}
+            state={state.panels}
+          />
+        )}
       </MultiCollectionSupportProvider>
     </ToolbarCollectionProvider>
   );

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -203,7 +203,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
     >
       <Table
         {...props}
-        skin={isGreyHeadersEnabled ? "neutral" : undefined}
+        skin={isGreyHeadersEnabled ? 'neutral' : props.skin}
         withWrapper={false}
         data={keyedItemsWithTooltip}
         viewportRef={stackingRootRef}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1343894156";
+var _namespace_ = "CollectionToolbar3076293600";
 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":"CollectionToolbar1343894156__root","left":"CollectionToolbar1343894156__left","right":"CollectionToolbar1343894156__right","fullWidth":"CollectionToolbar1343894156__fullWidth"};
+export var classes = {"root":"CollectionToolbar3076293600__root","left":"CollectionToolbar3076293600__left","right":"CollectionToolbar3076293600__right","fullWidth":"CollectionToolbar3076293600__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2519736350";
+var _namespace_ = "SearchOrCustomFilter1503668046";
 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":"SearchOrCustomFilter2519736350__root","search":"SearchOrCustomFilter2519736350__search","searchMobile":"SearchOrCustomFilter2519736350__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1503668046__root","search":"SearchOrCustomFilter1503668046__search","searchMobile":"SearchOrCustomFilter1503668046__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3203712901";
+var _namespace_ = "DragHandle3889210548";
 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":"DragHandle3203712901__root"};
+export var classes = {"root":"DragHandle3889210548__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_ = "EntityPagePlain91645944";
+var _namespace_ = "EntityPagePlain2960123993";
 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":"EntityPagePlain91645944__root"};
+export var classes = {"root":"EntityPagePlain2960123993__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_ = "Fade698605852";
+var _namespace_ = "Fade573421859";
 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":"Fade698605852__root"};
+export var classes = {"root":"Fade573421859__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_ = "Heading2236980878";
+var _namespace_ = "Heading2974527410";
 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":"Heading2236980878__root"};
+export var classes = {"root":"Heading2974527410__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_ = "InputOverflow1307460668";
+var _namespace_ = "InputOverflow1139788378";
 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":"InputOverflow1307460668__root"};
+export var classes = {"root":"InputOverflow1139788378__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_ = "LoadingRow2727062828";
+var _namespace_ = "LoadingRow1587360019";
 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":"LoadingRow2727062828__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2727062828__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1587360019__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1587360019__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_ = "MaxHeightText3921536750";
+var _namespace_ = "MaxHeightText327937011";
 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":"MaxHeightText3921536750__root"};
+export var classes = {"root":"MaxHeightText327937011__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_ = "MaxLines2683262557";
+var _namespace_ = "MaxLines1687073014";
 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":"MaxLines2683262557__root"};
+export var classes = {"root":"MaxLines1687073014__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_ = "MultiBulkActionToolbar3356323267";
+var _namespace_ = "MultiBulkActionToolbar2454378092";
 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":"MultiBulkActionToolbar3356323267__root"};
+export var classes = {"root":"MultiBulkActionToolbar2454378092__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_ = "NestedTablePlaceholderStatesRow2274518903";
+var _namespace_ = "NestedTablePlaceholderStatesRow1332638569";
 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":"NestedTablePlaceholderStatesRow2274518903__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1332638569__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_ = "NestedTableRow3432613196";
+var _namespace_ = "NestedTableRow919608236";
 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":"NestedTableRow3432613196__root","firstLevel":"NestedTableRow3432613196__firstLevel","placeholder":"NestedTableRow3432613196__placeholder","parentHovered":"NestedTableRow3432613196__parentHovered"};
+export var classes = {"root":"NestedTableRow919608236__root","firstLevel":"NestedTableRow919608236__firstLevel","placeholder":"NestedTableRow919608236__placeholder","parentHovered":"NestedTableRow919608236__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableWSRTable.tsx

@@ -140,7 +140,7 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
       rowVerticalPadding={rowVerticalPadding}
       search={search === true ? <QuerySearch state={query.search} /> : search}
       {...rest}
-      skin={isGreyHeadersEnabled ? "neutral" : undefined}
+      skin={isGreyHeadersEnabled ? 'neutral' : rest.skin}
       showHeaderWhenEmpty
       sticky
       tabs={tabs}

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect1749262334";
+var _namespace_ = "MultipleDragOverlayEffect3742767738";
 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":"MultipleDragOverlayEffect1749262334__root"};
+export var classes = {"root":"MultipleDragOverlayEffect3742767738__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_ = "NestedTableDragAndDropRow1541159342";
+var _namespace_ = "NestedTableDragAndDropRow2956027975";
 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":"NestedTableDragAndDropRow1541159342__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2956027975__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_ = "PickerContent2855242609";
+var _namespace_ = "PickerContent3335617476";
 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":"PickerContent2855242609__root"};
+export var classes = {"root":"PickerContent3335617476__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_ = "PickerContentAdditionalStep3330351341";
+var _namespace_ = "PickerContentAdditionalStep3871678748";
 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":"PickerContentAdditionalStep3330351341__root","titles":"PickerContentAdditionalStep3330351341__titles","suffix":"PickerContentAdditionalStep3330351341__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3871678748__root","titles":"PickerContentAdditionalStep3871678748__titles","suffix":"PickerContentAdditionalStep3871678748__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_ = "PickerTableListItem4029328239";
+var _namespace_ = "PickerTableListItem2275210523";
 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":"PickerTableListItem4029328239__root"};
+export var classes = {"root":"PickerTableListItem2275210523__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_ = "ScrollableContent3273966693";
+var _namespace_ = "ScrollableContent586130565";
 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":"ScrollableContent3273966693__root"};
+export var classes = {"root":"ScrollableContent586130565__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -15,22 +15,33 @@ export interface SidePanelModalProps {
 
 function _SidePanelModal(props: SidePanelModalProps) {
   const { top, left, state } = props;
-  const { onSidePanelOpen, closeSidePanel } = useWixPatternsContainer();
+  const { onSidePanelOpen, closeSidePanel, containerLayoutType } =
+    useWixPatternsContainer();
   const pageState = usePageContext();
 
   const { sidePanel, sidePanelComponents } = state;
 
   const { isOpen } = sidePanel;
 
+  const width = useMemo(
+    () => (containerLayoutType === 'panel' ? '100%' : SidePanelWidth),
+    [containerLayoutType],
+  );
+
   const style = useMemo(
     () => ({
       top,
-      left: left != null ? left - SidePanelWidth : undefined,
+      left:
+        containerLayoutType === 'panel'
+          ? 0
+          : left != null
+          ? left - SidePanelWidth
+          : undefined,
       bottom: 0,
       overflow: 'hidden',
-      width: SidePanelWidth,
+      width,
     }),
-    [top, left],
+    [top, left, width],
   );
 
   useEffect(() => {
@@ -69,6 +80,7 @@ function _SidePanelModal(props: SidePanelModalProps) {
       dataHook="cairo-side-panel-modal"
       transitionStatus={sidePanel.transition.status}
       style={style}
+      appendTo={containerLayoutType === 'panel' ? 'parent' : undefined}
       contentRef={(el) => {
         sidePanel.focus.modalElement = el;
       }}
@@ -92,12 +104,7 @@ function _SidePanelModal(props: SidePanelModalProps) {
     >
       {Array.from(sidePanelComponents.entries()).map(([key, ComponentType]) => {
         return (
-          <SidePanelModalItem
-            key={key}
-            id={key}
-            width={SidePanelWidth}
-            state={state}
-          >
+          <SidePanelModalItem key={key} id={key} width={width} state={state}>
             <ComponentType />
           </SidePanelModalItem>
         );

package/src/components/SidePanelModal/SidePanelModalItem.tsx

@@ -5,7 +5,7 @@ import { SidePanelsState } from '../../state/SidePanelsState';
 export interface SidePanelModalItemProps {
   id: string;
   children?: ReactNode;
-  width: number;
+  width: number | string;
   state: SidePanelsState;
 }