@wix/patterns 1.437.0 → 1.438.0

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

@@ -0,0 +1,8 @@
+/* An empty state without an illustration (e.g. under Harmony) is much
+   shorter; keep the placeholder area from collapsing and center the
+   content vertically. With an illustration the content exceeds the
+   min-height, so this is a no-op. */
+.root {
+  min-height: 230px;
+  align-items: center;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "EmptyStateBase3827957578";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"EmptyStateBase3827957578__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/EmptyState/EmptyStateBase.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Box, EmptyState, EmptyStateProps } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
+import { st, classes } from './EmptyStateBase.st.css.js';
 
 export interface EmptyStateBaseProps
   extends EmptyStateBasePrivateProps,
@@ -40,7 +41,16 @@ export interface EmptyStateBasePrivateProps {
 }
 
 function _EmptyStateBase(props: EmptyStateBaseProps) {
-  const { children, customCta, title, subtitle, cta, image, ...rest } = props;
+  const {
+    children,
+    customCta,
+    title,
+    subtitle,
+    cta,
+    image,
+    className,
+    ...rest
+  } = props;
 
   let child;
 
@@ -68,6 +78,7 @@ function _EmptyStateBase(props: EmptyStateBaseProps) {
       subtitle={subtitle}
       theme="page-no-border"
       image={image ? <div style={{ display: 'flex' }}>{image}</div> : undefined}
+      className={st(classes.root, className)}
       {...rest}
     >
       {child}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain2692998454";
+var _namespace_ = "EntityPagePlain3524544437";
 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":"EntityPagePlain2692998454__root"};
+export var classes = {"root":"EntityPagePlain3524544437__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_ = "Fade3689079287";
+var _namespace_ = "Fade4041425303";
 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":"Fade3689079287__root"};
+export var classes = {"root":"Fade4041425303__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_ = "Heading3419941747";
+var _namespace_ = "Heading2959663805";
 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":"Heading3419941747__root"};
+export var classes = {"root":"Heading2959663805__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_ = "ImportStepUpload3378734560";
+var _namespace_ = "ImportStepUpload4192638496";
 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":"ImportStepUpload3378734560__root","fileUpload":"ImportStepUpload3378734560__fileUpload"};
+export var classes = {"root":"ImportStepUpload4192638496__root","fileUpload":"ImportStepUpload4192638496__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_ = "InputOverflow1209138119";
+var _namespace_ = "InputOverflow2262845997";
 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":"InputOverflow1209138119__root"};
+export var classes = {"root":"InputOverflow2262845997__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_ = "LoadingRow185549771";
+var _namespace_ = "LoadingRow2081305249";
 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":"LoadingRow185549771__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow185549771__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2081305249__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2081305249__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_ = "MaxHeightText106716902";
+var _namespace_ = "MaxHeightText2867209384";
 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":"MaxHeightText106716902__root"};
+export var classes = {"root":"MaxHeightText2867209384__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_ = "MaxLines409913796";
+var _namespace_ = "MaxLines4181318915";
 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":"MaxLines409913796__root"};
+export var classes = {"root":"MaxLines4181318915__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_ = "MultiBulkActionToolbar4137537886";
+var _namespace_ = "MultiBulkActionToolbar3837315458";
 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":"MultiBulkActionToolbar4137537886__root","leftGroupWrapper":"MultiBulkActionToolbar4137537886__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4137537886__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4137537886__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3837315458__root","leftGroupWrapper":"MultiBulkActionToolbar3837315458__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3837315458__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3837315458__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.tsx

@@ -265,9 +265,9 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
   );
 
   return (
-    <Box minHeight="60px">
+    <Box minHeight={isBmHarmonyTheme ? undefined : '60px'}>
       <TableToolbar
-        removeVerticalPadding={hasToolbarTabs}
+        removeVerticalPadding={!isBmHarmonyTheme && hasToolbarTabs}
         dataHook="bulk-action-toolbar"
       >
         <TableToolbar.ItemGroup position="start" className={st(classes.root)}>

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow4008336872";
+var _namespace_ = "NestedTablePlaceholderStatesRow3880183558";
 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":"NestedTablePlaceholderStatesRow4008336872__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3880183558__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_ = "NestedTableRow1941031690";
+var _namespace_ = "NestedTableRow4032185650";
 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":"NestedTableRow1941031690__root","firstLevel":"NestedTableRow1941031690__firstLevel","placeholder":"NestedTableRow1941031690__placeholder","parentHovered":"NestedTableRow1941031690__parentHovered"};
+export var classes = {"root":"NestedTableRow4032185650__root","firstLevel":"NestedTableRow4032185650__firstLevel","placeholder":"NestedTableRow4032185650__placeholder","parentHovered":"NestedTableRow4032185650__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_ = "MultipleDragOverlayEffect3191206267";
+var _namespace_ = "MultipleDragOverlayEffect1165270204";
 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":"MultipleDragOverlayEffect3191206267__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1165270204__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_ = "NestedTableDragAndDropRow1435116602";
+var _namespace_ = "NestedTableDragAndDropRow3178503355";
 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":"NestedTableDragAndDropRow1435116602__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3178503355__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_ = "PickerContent1981815248";
+var _namespace_ = "PickerContent930151585";
 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":"PickerContent1981815248__root"};
+export var classes = {"root":"PickerContent930151585__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_ = "PickerContentAdditionalStep564735449";
+var _namespace_ = "PickerContentAdditionalStep1693186447";
 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":"PickerContentAdditionalStep564735449__root","titles":"PickerContentAdditionalStep564735449__titles","suffix":"PickerContentAdditionalStep564735449__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1693186447__root","titles":"PickerContentAdditionalStep1693186447__titles","suffix":"PickerContentAdditionalStep1693186447__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_ = "PickerTableListItem3360675323";
+var _namespace_ = "PickerTableListItem3497975178";
 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":"PickerTableListItem3360675323__root"};
+export var classes = {"root":"PickerTableListItem3497975178__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_ = "ScrollableContent570415530";
+var _namespace_ = "ScrollableContent736114623";
 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":"ScrollableContent570415530__root"};
+export var classes = {"root":"ScrollableContent736114623__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget4282571245";
+var _namespace_ = "SetupWidget1282089645";
 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":"SetupWidget4282571245__root","row":"SetupWidget4282571245__row","completedCta":"SetupWidget4282571245__completedCta","card":"SetupWidget4282571245__card","stepIcon":"SetupWidget4282571245__stepIcon","chevron":"SetupWidget4282571245__chevron","chevronDisabled":"SetupWidget4282571245__chevronDisabled","inProgressLabel":"SetupWidget4282571245__inProgressLabel"};
+export var classes = {"root":"SetupWidget1282089645__root","row":"SetupWidget1282089645__row","completedCta":"SetupWidget1282089645__completedCta","card":"SetupWidget1282089645__card","stepIcon":"SetupWidget1282089645__stepIcon","chevron":"SetupWidget1282089645__chevron","chevronDisabled":"SetupWidget1282089645__chevronDisabled","inProgressLabel":"SetupWidget1282089645__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -1,11 +1,12 @@
 import { observer } from 'mobx-react-lite';
-import { SidePanelWidth } from '@wix/bex-core';
+import { SidePanelInset, SidePanelWidth } from '@wix/bex-core';
 import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
 import { SlidingModal } from '../SlidingModal';
 import React, { useEffect, useMemo } from 'react';
 import { reaction } from 'mobx';
 import { SidePanelModalItem } from './SidePanelModalItem';
 import { SidePanelsState } from '../../state/SidePanelsState';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface SidePanelModalProps {
   top: number;
@@ -32,25 +33,28 @@ function _SidePanelModal(props: SidePanelModalProps) {
     [isPanelLayout],
   );
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const inset = isBmHarmonyTheme && !isPanelLayout ? SidePanelInset : 0;
+
   const style = useMemo(
     () => ({
-      top,
+      top: top + inset,
       ...(useRelativeSidePanel
         ? {
-            right: isPanelLayout ? undefined : 0,
+            right: isPanelLayout ? undefined : inset,
           }
         : {
             left: isPanelLayout
               ? 0
               : left != null
-              ? left - SidePanelWidth
+              ? left - SidePanelWidth - inset
               : undefined,
           }),
-      bottom: 0,
+      bottom: inset,
       overflow: 'hidden',
       width,
     }),
-    [top, left, width],
+    [top, left, width, isPanelLayout, useRelativeSidePanel, inset],
   );
 
   useEffect(() => {
@@ -107,6 +111,8 @@ function _SidePanelModal(props: SidePanelModalProps) {
         sidePanel.transition.setStatus('exiting');
       }}
       width={SidePanelWidth}
+      closedOffset={inset}
+      inset={inset}
       isOpen={isOpen}
       onRequestClose={() => {
         sidePanel.close();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3264404199";
+var _namespace_ = "SkeletonCard304981479";
 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":"SkeletonCard3264404199__root","headerLoading":"SkeletonCard3264404199__headerLoading"};
+export var classes = {"root":"SkeletonCard304981479__root","headerLoading":"SkeletonCard304981479__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,5 +1,7 @@
+@property st-global(--wds-side-panel-standard-corner-radius);
+
 .root {
-  -st-states: exited, overlay, appendTo(enum(parent));
+  -st-states: exited, overlay, inset, appendTo(enum(parent));
   transition: transform 0.4s ease 0s;
   position: fixed;
   z-index: 1;
@@ -13,6 +15,12 @@
   position: absolute;
 }
 
+.root:inset {
+  border-radius: var(--wds-side-panel-standard-corner-radius, 0);
+  /* pre-promote the layer so the rounded clip + shadow rasterize before the slide starts */
+  will-change: transform;
+}
+
 .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_ = "SlidingModal1088809015";
+var _namespace_ = "SlidingModal1492185790";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal1088809015__root"};
+export var classes = {"root":"SlidingModal1492185790__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-side-panel-standard-corner-radius":"--wds-side-panel-standard-corner-radius"}; 
 
 
 

package/src/components/SlidingModal/SlidingModal.tsx

@@ -25,6 +25,8 @@ export interface SlidingModalProps {
   transitionStatus?: string;
   onRequestClose?: () => void;
   shadowWidth?: number;
+  closedOffset?: number;
+  inset?: number;
   appendTo?: 'parent';
   overlay?: boolean;
 }
@@ -35,6 +37,8 @@ export function SlidingModal(props: SlidingModalProps) {
     className,
     style: styleProp,
     shadowWidth = 20,
+    closedOffset = 0,
+    inset = 0,
     width,
     isOpen,
     children,
@@ -56,11 +60,13 @@ export function SlidingModal(props: SlidingModalProps) {
         isOpen
           ? 0
           : typeof width === 'number'
-          ? `${width + shadowWidth}px`
+          ? `${width + shadowWidth + closedOffset}px`
+          : closedOffset
+          ? `calc(${width} + ${shadowWidth + closedOffset}px)`
           : `${width}px`
       }, 0, 0)`,
     }),
-    [styleProp, width, isOpen],
+    [styleProp, width, isOpen, shadowWidth, closedOffset],
   );
 
   const isOpenRef = useRef(isOpen);
@@ -135,6 +141,7 @@ export function SlidingModal(props: SlidingModalProps) {
           exited: transitionStatus === 'exited',
           overlay,
           appendTo,
+          inset: inset > 0,
         },
         ...[className, isOpen ? 'cairo-sliding-modal-is-open' : undefined],
       )}

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3849828666";
+var _namespace_ = "AddFieldColumnHeader1736342762";
 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":"AddFieldColumnHeader3849828666__root","title":"AddFieldColumnHeader3849828666__title","hoverBridge":"AddFieldColumnHeader3849828666__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1736342762__root","title":"AddFieldColumnHeader1736342762__title","hoverBridge":"AddFieldColumnHeader1736342762__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3586451056";
+var _namespace_ = "TabsFilter261584330";
 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":"TabsFilter3586451056__root","title":"TabsFilter3586451056__title"};
+export var classes = {"root":"TabsFilter261584330__root","title":"TabsFilter261584330__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_ = "ManageTagsModal2897725672";
+var _namespace_ = "ManageTagsModal1286226300";
 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":"ManageTagsModal2897725672__root"};
+export var classes = {"root":"ManageTagsModal1286226300__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};