@wix/patterns 1.259.0 → 1.260.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable4197739063";
+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":"CollectionTable4197739063__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_ = "CollectionToolbar1543252129";
+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":"CollectionToolbar1543252129__root","left":"CollectionToolbar1543252129__left","right":"CollectionToolbar1543252129__right","fullWidth":"CollectionToolbar1543252129__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_ = "SearchOrCustomFilter185851976";
+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":"SearchOrCustomFilter185851976__root","search":"SearchOrCustomFilter185851976__search","searchMobile":"SearchOrCustomFilter185851976__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_ = "AutoCompleteReadonly2615306280";
+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":"AutoCompleteReadonly2615306280__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_ = "ViewsDropdown2220869632";
+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":"ViewsDropdown2220869632__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_ = "DragHandle3862412944";
+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":"DragHandle3862412944__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_ = "EntityPagePlain3374043653";
+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":"EntityPagePlain3374043653__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_ = "Fade3634012798";
+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":"Fade3634012798__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_ = "Heading3769833549";
+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":"Heading3769833549__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_ = "InputOverflow1132959698";
+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":"InputOverflow1132959698__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_ = "LoadingRow773610757";
+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":"LoadingRow773610757__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow773610757__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_ = "MaxHeightText3662701965";
+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":"MaxHeightText3662701965__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_ = "MaxLines4128093770";
+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":"MaxLines4128093770__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_ = "MultiBulkActionToolbar2149190412";
+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":"MultiBulkActionToolbar2149190412__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_ = "NestedTablePlaceholderStatesRow3101725934";
+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":"NestedTablePlaceholderStatesRow3101725934__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_ = "NestedTableRow2203962015";
+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":"NestedTableRow2203962015__root","firstLevel":"NestedTableRow2203962015__firstLevel","placeholder":"NestedTableRow2203962015__placeholder","parentHovered":"NestedTableRow2203962015__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_ = "MultipleDragOverlayEffect3678324328";
+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":"MultipleDragOverlayEffect3678324328__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_ = "NestedTableDragAndDropRow1047694534";
+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":"NestedTableDragAndDropRow1047694534__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_ = "PickerContent3116557461";
+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":"PickerContent3116557461__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_ = "PickerContentAdditionalStep235815480";
+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":"PickerContentAdditionalStep235815480__root","titles":"PickerContentAdditionalStep235815480__titles","suffix":"PickerContentAdditionalStep235815480__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_ = "PickerTableListItem3834432628";
+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":"PickerTableListItem3834432628__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_ = "ScrollableContent3791513152";
+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":"ScrollableContent3791513152__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;
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard2385041";
+var _namespace_ = "SkeletonCard1689965996";
 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":"SkeletonCard2385041__root","headerLoading":"SkeletonCard2385041__headerLoading"};
+export var classes = {"root":"SkeletonCard1689965996__root","headerLoading":"SkeletonCard1689965996__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,10 +1,15 @@
 .root {
-  -st-states: exited;
+  -st-states: exited, appendTo(enum(parent));
   transition: transform 0.4s ease 0s;
   position: fixed;
   z-index: 1;
 }
 
+.root:appendTo(parent) {
+  transition: transform 0s ease 0s;
+  position: absolute;
+}
+
 .root:not(:exited) {
   box-shadow: 0 3px 24px 0 rgba(22, 45, 61, 0.18),
     0 8px 8px 0 rgba(22, 45, 61, 0.12);

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

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

package/src/components/SlidingModal/SlidingModal.tsx

@@ -23,6 +23,7 @@ export interface SlidingModalProps {
   transitionStatus?: string;
   onRequestClose?: () => void;
   shadowWidth?: number;
+  appendTo?: 'parent';
 }
 
 export function SlidingModal(props: SlidingModalProps) {
@@ -41,6 +42,7 @@ export function SlidingModal(props: SlidingModalProps) {
     onExiting,
     onRequestClose,
     transitionStatus,
+    appendTo,
   } = props;
 
   const style = useMemo(
@@ -121,6 +123,7 @@ export function SlidingModal(props: SlidingModalProps) {
         classes.root,
         {
           exited: transitionStatus === 'exited',
+          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_ = "TabsFilter3490146555";
+var _namespace_ = "TabsFilter3557108515";
 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":"TabsFilter3490146555__root","title":"TabsFilter3490146555__title"};
+export var classes = {"root":"TabsFilter3557108515__root","title":"TabsFilter3557108515__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_ = "ManageTagsModal3254223459";
+var _namespace_ = "ManageTagsModal1405732498";
 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":"ManageTagsModal3254223459__root"};
+export var classes = {"root":"ManageTagsModal1405732498__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_ = "ToolbarItem1751863585";
+var _namespace_ = "ToolbarItem3877511843";
 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":"ToolbarItem1751863585__root"};
+export var classes = {"root":"ToolbarItem3877511843__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};