@epic-web/workshop-app 4.6.5 → 4.7.0

package/node_modules/framer-motion/dist/index.d.ts

@@ -1271,6 +1271,27 @@ declare class FlatTree {
     forEach(callback: (child: WithDepth) => void): void;
 }
 
+interface SwitchLayoutGroup {
+    register?: (member: IProjectionNode) => void;
+    deregister?: (member: IProjectionNode) => void;
+}
+type InitialPromotionConfig = {
+    /**
+     * The initial transition to use when the elements in this group mount (and automatically promoted).
+     * Subsequent updates should provide a transition in the promote method.
+     */
+    transition?: Transition$1;
+    /**
+     * If the follow tree should preserve its opacity when the lead is promoted on mount
+     */
+    shouldPreserveFollowOpacity?: (member: IProjectionNode) => boolean;
+};
+type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;
+/**
+ * Internal, exported only for usage in Framer
+ */
+declare const SwitchLayoutGroupContext: react.Context<SwitchLayoutGroupContext>;
+
 interface Measurements {
     animationId: number;
     measuredBox: Box;
@@ -1398,83 +1419,6 @@ interface ProjectionNodeOptions {
     initialPromotionConfig?: InitialPromotionConfig;
 }
 
-interface SwitchLayoutGroup {
-    register?: (member: IProjectionNode) => void;
-    deregister?: (member: IProjectionNode) => void;
-}
-type InitialPromotionConfig = {
-    /**
-     * The initial transition to use when the elements in this group mount (and automatically promoted).
-     * Subsequent updates should provide a transition in the promote method.
-     */
-    transition?: Transition$1;
-    /**
-     * If the follow tree should preserve its opacity when the lead is promoted on mount
-     */
-    shouldPreserveFollowOpacity?: (member: IProjectionNode) => boolean;
-};
-type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;
-/**
- * Internal, exported only for usage in Framer
- */
-declare const SwitchLayoutGroupContext: react.Context<SwitchLayoutGroupContext>;
-
-declare abstract class Feature<T extends any = any> {
-    isMounted: boolean;
-    node: VisualElement<T>;
-    constructor(node: VisualElement<T>);
-    abstract mount(): void;
-    abstract unmount(): void;
-    update(): void;
-}
-
-declare function MeasureLayout(props: MotionProps & {
-    visualElement: VisualElement;
-}): react_jsx_runtime.JSX.Element;
-
-interface FeatureClass<Props = unknown> {
-    new (props: Props): Feature<Props>;
-}
-type HydratedFeatureDefinition = {
-    isEnabled: (props: MotionProps) => boolean;
-    Feature: FeatureClass<unknown>;
-    ProjectionNode?: any;
-    MeasureLayout?: typeof MeasureLayout;
-};
-interface HydratedFeatureDefinitions {
-    animation?: HydratedFeatureDefinition;
-    exit?: HydratedFeatureDefinition;
-    drag?: HydratedFeatureDefinition;
-    tap?: HydratedFeatureDefinition;
-    focus?: HydratedFeatureDefinition;
-    hover?: HydratedFeatureDefinition;
-    pan?: HydratedFeatureDefinition;
-    inView?: HydratedFeatureDefinition;
-    layout?: HydratedFeatureDefinition;
-}
-type FeatureDefinition = {
-    isEnabled: HydratedFeatureDefinition["isEnabled"];
-    Feature?: HydratedFeatureDefinition["Feature"];
-    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
-    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
-};
-type FeatureDefinitions = {
-    [K in keyof HydratedFeatureDefinition]: FeatureDefinition;
-};
-type FeaturePackage = {
-    Feature?: HydratedFeatureDefinition["Feature"];
-    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
-    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
-};
-type FeaturePackages = {
-    [K in keyof HydratedFeatureDefinitions]: FeaturePackage;
-};
-interface FeatureBundle extends FeaturePackages {
-    renderer: CreateVisualElement<any>;
-}
-type LazyFeatureBundle$1 = () => Promise<FeatureBundle>;
-type RenderComponent<Instance, RenderState> = (Component: string | react.ComponentType<react.PropsWithChildren<unknown>>, props: MotionProps, ref: react.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean, visualElement?: VisualElement<Instance>) => any;
-
 type AnimationType = "animate" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "exit";
 
 type VisualElementAnimationOptions = {
@@ -1491,6 +1435,7 @@ interface AnimationState$1 {
     getState: () => {
         [key: string]: AnimationTypeState;
     };
+    reset: () => void;
 }
 interface AnimationTypeState {
     isActive: boolean;
@@ -1721,7 +1666,6 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     unmount(): void;
     private bindToMotionValue;
     sortNodePosition(other: VisualElement<Instance>): number;
-    loadFeatures({ children, ...renderedProps }: MotionProps, isStrict: boolean, preloadedFeatures?: FeatureBundle, initialLayoutGroupConfig?: SwitchLayoutGroupContext): react.ComponentType<MotionProps> | undefined;
     updateFeatures(): void;
     notifyUpdate: () => void;
     triggerBuild(): void;
@@ -3434,6 +3378,62 @@ type SVGMotionComponents = {
     [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
 };
 
+declare abstract class Feature<T extends any = any> {
+    isMounted: boolean;
+    node: VisualElement<T>;
+    constructor(node: VisualElement<T>);
+    abstract mount(): void;
+    abstract unmount(): void;
+    update(): void;
+}
+
+declare function MeasureLayout(props: MotionProps & {
+    visualElement: VisualElement;
+}): react_jsx_runtime.JSX.Element;
+
+interface FeatureClass<Props = unknown> {
+    new (props: Props): Feature<Props>;
+}
+type HydratedFeatureDefinition = {
+    isEnabled: (props: MotionProps) => boolean;
+    Feature: FeatureClass<unknown>;
+    ProjectionNode?: any;
+    MeasureLayout?: typeof MeasureLayout;
+};
+interface HydratedFeatureDefinitions {
+    animation?: HydratedFeatureDefinition;
+    exit?: HydratedFeatureDefinition;
+    drag?: HydratedFeatureDefinition;
+    tap?: HydratedFeatureDefinition;
+    focus?: HydratedFeatureDefinition;
+    hover?: HydratedFeatureDefinition;
+    pan?: HydratedFeatureDefinition;
+    inView?: HydratedFeatureDefinition;
+    layout?: HydratedFeatureDefinition;
+}
+type FeatureDefinition = {
+    isEnabled: HydratedFeatureDefinition["isEnabled"];
+    Feature?: HydratedFeatureDefinition["Feature"];
+    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
+    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
+};
+type FeatureDefinitions = {
+    [K in keyof HydratedFeatureDefinitions]: FeatureDefinition;
+};
+type FeaturePackage = {
+    Feature?: HydratedFeatureDefinition["Feature"];
+    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
+    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
+};
+type FeaturePackages = {
+    [K in keyof HydratedFeatureDefinitions]: FeaturePackage;
+};
+interface FeatureBundle extends FeaturePackages {
+    renderer: CreateVisualElement<any>;
+}
+type LazyFeatureBundle$1 = () => Promise<FeatureBundle>;
+type RenderComponent<Instance, RenderState> = (Component: string | react.ComponentType<react.PropsWithChildren<unknown>>, props: MotionProps, ref: react.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean, visualElement?: VisualElement<Instance>) => any;
+
 interface MotionComponentConfig<Instance, RenderState> {
     preloadedFeatures?: FeatureBundle;
     createVisualElement?: CreateVisualElement<Instance>;

package/node_modules/framer-motion/dist/three-entry.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import * as react from 'react';
+import * as React$1 from 'react';
 import { SVGAttributes, CSSProperties, useEffect } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -956,7 +956,7 @@ interface MotionConfigContext {
 /**
  * @public
  */
-declare const MotionConfigContext: react.Context<MotionConfigContext>;
+declare const MotionConfigContext: React$1.Context<MotionConfigContext>;
 
 declare class NodeStack {
     lead?: IProjectionNode;
@@ -987,6 +987,18 @@ declare class FlatTree {
     forEach(callback: (child: WithDepth) => void): void;
 }
 
+type InitialPromotionConfig = {
+    /**
+     * The initial transition to use when the elements in this group mount (and automatically promoted).
+     * Subsequent updates should provide a transition in the promote method.
+     */
+    transition?: Transition$1;
+    /**
+     * If the follow tree should preserve its opacity when the lead is promoted on mount
+     */
+    shouldPreserveFollowOpacity?: (member: IProjectionNode) => boolean;
+};
+
 interface Measurements {
     animationId: number;
     measuredBox: Box;
@@ -1114,72 +1126,6 @@ interface ProjectionNodeOptions {
     initialPromotionConfig?: InitialPromotionConfig;
 }
 
-interface SwitchLayoutGroup {
-    register?: (member: IProjectionNode) => void;
-    deregister?: (member: IProjectionNode) => void;
-}
-type InitialPromotionConfig = {
-    /**
-     * The initial transition to use when the elements in this group mount (and automatically promoted).
-     * Subsequent updates should provide a transition in the promote method.
-     */
-    transition?: Transition$1;
-    /**
-     * If the follow tree should preserve its opacity when the lead is promoted on mount
-     */
-    shouldPreserveFollowOpacity?: (member: IProjectionNode) => boolean;
-};
-type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;
-/**
- * Internal, exported only for usage in Framer
- */
-declare const SwitchLayoutGroupContext: react.Context<SwitchLayoutGroupContext>;
-
-declare abstract class Feature<T extends any = any> {
-    isMounted: boolean;
-    node: VisualElement<T>;
-    constructor(node: VisualElement<T>);
-    abstract mount(): void;
-    abstract unmount(): void;
-    update(): void;
-}
-
-declare function MeasureLayout(props: MotionProps & {
-    visualElement: VisualElement;
-}): react_jsx_runtime.JSX.Element;
-
-interface FeatureClass<Props = unknown> {
-    new (props: Props): Feature<Props>;
-}
-type HydratedFeatureDefinition = {
-    isEnabled: (props: MotionProps) => boolean;
-    Feature: FeatureClass<unknown>;
-    ProjectionNode?: any;
-    MeasureLayout?: typeof MeasureLayout;
-};
-interface HydratedFeatureDefinitions {
-    animation?: HydratedFeatureDefinition;
-    exit?: HydratedFeatureDefinition;
-    drag?: HydratedFeatureDefinition;
-    tap?: HydratedFeatureDefinition;
-    focus?: HydratedFeatureDefinition;
-    hover?: HydratedFeatureDefinition;
-    pan?: HydratedFeatureDefinition;
-    inView?: HydratedFeatureDefinition;
-    layout?: HydratedFeatureDefinition;
-}
-type FeaturePackage = {
-    Feature?: HydratedFeatureDefinition["Feature"];
-    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
-    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
-};
-type FeaturePackages = {
-    [K in keyof HydratedFeatureDefinitions]: FeaturePackage;
-};
-interface FeatureBundle extends FeaturePackages {
-    renderer: CreateVisualElement<any>;
-}
-
 type AnimationType = "animate" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "exit";
 
 type VisualElementAnimationOptions = {
@@ -1196,6 +1142,7 @@ interface AnimationState {
     getState: () => {
         [key: string]: AnimationTypeState;
     };
+    reset: () => void;
 }
 interface AnimationTypeState {
     isActive: boolean;
@@ -1422,7 +1369,6 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     unmount(): void;
     private bindToMotionValue;
     sortNodePosition(other: VisualElement<Instance>): number;
-    loadFeatures({ children, ...renderedProps }: MotionProps, isStrict: boolean, preloadedFeatures?: FeatureBundle, initialLayoutGroupConfig?: SwitchLayoutGroupContext): react.ComponentType<MotionProps> | undefined;
     updateFeatures(): void;
     notifyUpdate: () => void;
     triggerBuild(): void;
@@ -1958,7 +1904,7 @@ declare class DragControls {
      *
      * @public
      */
-    start(event: react.PointerEvent | PointerEvent, options?: DragControlOptions): void;
+    start(event: React$1.PointerEvent | PointerEvent, options?: DragControlOptions): void;
 }
 
 type DragElastic = boolean | number | Partial<BoundingBox>;
@@ -2930,7 +2876,48 @@ interface AnimationLifecycles {
     onAnimationComplete?(definition: AnimationDefinition): void;
 }
 type EventProps = LayoutLifecycles & AnimationLifecycles;
-type CreateVisualElement<Instance> = (Component: string | React.ComponentType<React.PropsWithChildren<unknown>>, options: VisualElementOptions<Instance>) => VisualElement<Instance>;
+
+declare abstract class Feature<T extends any = any> {
+    isMounted: boolean;
+    node: VisualElement<T>;
+    constructor(node: VisualElement<T>);
+    abstract mount(): void;
+    abstract unmount(): void;
+    update(): void;
+}
+
+declare function MeasureLayout(props: MotionProps & {
+    visualElement: VisualElement;
+}): react_jsx_runtime.JSX.Element;
+
+interface FeatureClass<Props = unknown> {
+    new (props: Props): Feature<Props>;
+}
+type HydratedFeatureDefinition = {
+    isEnabled: (props: MotionProps) => boolean;
+    Feature: FeatureClass<unknown>;
+    ProjectionNode?: any;
+    MeasureLayout?: typeof MeasureLayout;
+};
+interface HydratedFeatureDefinitions {
+    animation?: HydratedFeatureDefinition;
+    exit?: HydratedFeatureDefinition;
+    drag?: HydratedFeatureDefinition;
+    tap?: HydratedFeatureDefinition;
+    focus?: HydratedFeatureDefinition;
+    hover?: HydratedFeatureDefinition;
+    pan?: HydratedFeatureDefinition;
+    inView?: HydratedFeatureDefinition;
+    layout?: HydratedFeatureDefinition;
+}
+type FeaturePackage = {
+    Feature?: HydratedFeatureDefinition["Feature"];
+    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
+    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
+};
+type FeaturePackages = {
+    [K in keyof HydratedFeatureDefinitions]: FeaturePackage;
+};
 
 declare const animations: FeaturePackages;
 
@@ -2939,7 +2926,7 @@ interface MotionContextProps<Instance = unknown> {
     initial?: false | string | string[];
     animate?: string | string[];
 }
-declare const MotionContext: react.Context<MotionContextProps<unknown>>;
+declare const MotionContext: React$1.Context<MotionContextProps<unknown>>;
 
 declare const createBox: () => Box;
 

package/node_modules/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "11.2.9",
+    "version": "11.2.12",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -17,6 +17,10 @@
             "import": "./dist/es/dom-entry.mjs",
             "default": "./dist/cjs/dom-entry.js"
         },
+        "./projection": {
+            "import": "./dist/es/projection-entry.mjs",
+            "default": "./dist/es/projection-entry.mjs"
+        },
         "./package.json": "./package.json"
     },
     "types": "dist/index.d.ts",
@@ -50,20 +54,14 @@
         "test-client": "jest --config jest.config.json --max-workers=2",
         "test-server": "jest --config jest.config.ssr.json",
         "test-watch": "jest --watch --coverage --coverageReporters=lcov --config jest.config.json",
-        "test-appear": "yarn run collect-appear-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/appear.chrome.ts --config baseUrl=http://localhost:8000/'",
-        "test-projection": "yarn run collect-projection-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://localhost:8000/'",
-        "test-e2e-chrome": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --browser chrome  --spec \"cypress/integration/layout-relative.chrome.ts\"'",
-        "test-e2e-electron": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --config ignoreTestFiles=*.chrome.ts'",
-        "test-e2e": "yarn test-appear && yarn test-projection && yarn test-e2e-electron",
-        "test-e2e-file": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --spec \"cypress/integration/while-in-view.ts\"'",
-        "collect-appear-tests": "node ../../dev/optimized-appear/collect-appear-tests.js",
-        "collect-projection-tests": "node ../../dev/projection/collect-projection-tests.js",
+        "test-e2e": "yarn test-e2e-html && yarn test-e2e-react",
+        "test-e2e-html": "node ../../dev/inc/collect-html-tests.js && start-server-and-test 'pushd ../../; yarn dev-server; popd' http://localhost:8000 'cypress run -s cypress/integration/appear.chrome.ts --config baseUrl=http://localhost:8000/ && cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://localhost:8000/'",
+        "test-e2e-react": "start-server-and-test 'pushd ../../; yarn dev-server; popd' http://localhost:9990 'cypress run --headless --config ignoreTestFiles=*.chrome.ts'",
         "prettier": "prettier ./src/* --write",
         "watch": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"",
         "prepack": "yarn build",
         "postpublish": "git push --tags",
-        "measure": "rollup -c ./rollup.size.config.mjs && webpack --config webpack.size.config.js && bundlesize",
-        "start-dev-server": "webpack serve --config ../../dev/webpack/config.js --hot"
+        "measure": "rollup -c ./rollup.size.config.mjs && bundlesize"
     },
     "dependencies": {
         "tslib": "^2.4.0"
@@ -87,15 +85,15 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "33.3 kB"
+            "maxSize": "33.4 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "5.5 kB"
+            "maxSize": "5.8 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "16.85 kB"
+            "maxSize": "16.88 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
@@ -103,20 +101,8 @@
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "17.85 kB"
-        },
-        {
-            "path": "./dist/size-webpack-m.js",
-            "maxSize": "5.99 kB"
-        },
-        {
-            "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "21.9 kB"
-        },
-        {
-            "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "34.6 kB"
+            "maxSize": "17.86 kB"
         }
     ],
-    "gitHead": "a58d3e7db0a52d3e1747924b1d09e895731e891e"
+    "gitHead": "435843d7aa332820bb9d4a75cb9c96146b3af2d8"
 }

package/node_modules/react-remove-scroll/dist/es2015/SideEffect.js

@@ -20,7 +20,7 @@ export function RemoveScrollSideCar(props) {
     var touchStartRef = React.useRef([0, 0]);
     var activeAxis = React.useRef();
     var id = React.useState(idCounter++)[0];
-    var Style = React.useState(function () { return styleSingleton(); })[0];
+    var Style = React.useState(styleSingleton)[0];
     var lastProps = React.useRef(props);
     React.useEffect(function () {
         lastProps.current = props;
@@ -83,7 +83,7 @@ export function RemoveScrollSideCar(props) {
             return;
         }
         var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
-        var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0];
+        var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta); })[0];
         // self event, and should be canceled
         if (sourceEvent && sourceEvent.should) {
             if (event.cancelable) {
@@ -106,7 +106,7 @@ export function RemoveScrollSideCar(props) {
         }
     }, []);
     var shouldCancel = React.useCallback(function (name, delta, target, should) {
-        var event = { name: name, delta: delta, target: target, should: should };
+        var event = { name: name, delta: delta, target: target, should: should, shadowParent: getOutermostShadowParent(target) };
         shouldPreventQueue.current.push(event);
         setTimeout(function () {
             shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
@@ -142,5 +142,16 @@ export function RemoveScrollSideCar(props) {
     var removeScrollBar = props.removeScrollBar, inert = props.inert;
     return (React.createElement(React.Fragment, null,
         inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
-        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
+        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null));
+}
+function getOutermostShadowParent(node) {
+    var shadowParent = null;
+    while (node !== null) {
+        if (node instanceof ShadowRoot) {
+            shadowParent = node.host;
+            node = node.host;
+        }
+        node = node.parentNode;
+    }
+    return shadowParent;
 }

package/node_modules/react-remove-scroll/dist/es2015/UI.js

@@ -16,12 +16,12 @@ var RemoveScroll = React.forwardRef(function (props, parentRef) {
         onWheelCapture: nothing,
         onTouchMoveCapture: nothing,
     }), callbacks = _a[0], setCallbacks = _a[1];
-    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
+    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
     var SideCar = sideCar;
     var containerRef = useMergeRefs([ref, parentRef]);
     var containerProps = __assign(__assign({}, rest), callbacks);
     return (React.createElement(React.Fragment, null,
-        enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
+        enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })),
         forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
 });
 RemoveScroll.defaultProps = {

package/node_modules/react-remove-scroll/dist/es2015/handleScroll.js

@@ -13,6 +13,7 @@ var elementCanBeScrolled = function (node, overflow) {
 var elementCouldBeVScrolled = function (node) { return elementCanBeScrolled(node, 'overflowY'); };
 var elementCouldBeHScrolled = function (node) { return elementCanBeScrolled(node, 'overflowX'); };
 export var locationCouldBeScrolled = function (axis, node) {
+    var ownerDocument = node.ownerDocument;
     var current = node;
     do {
         // Skip over shadow root
@@ -27,7 +28,7 @@ export var locationCouldBeScrolled = function (axis, node) {
             }
         }
         current = current.parentNode;
-    } while (current && current !== document.body);
+    } while (current && current !== ownerDocument.body);
     return false;
 };
 var getVScrollVariables = function (_a) {
@@ -79,17 +80,24 @@ export var handleScroll = function (axis, endTarget, event, sourceDelta, noOvers
                 availableScrollTop += position;
             }
         }
-        target = target.parentNode;
+        if (target instanceof ShadowRoot) {
+            target = target.host;
+        }
+        else {
+            target = target.parentNode;
+        }
     } while (
     // portaled content
     (!targetInLock && target !== document.body) ||
         // self content
         (targetInLock && (endTarget.contains(target) || endTarget === target)));
-    if (isDeltaPositive && ((noOverscroll && availableScroll === 0) || (!noOverscroll && delta > availableScroll))) {
+    // handle epsilon around 0 (non standard zoom levels)
+    if (isDeltaPositive &&
+        ((noOverscroll && Math.abs(availableScroll) < 1) || (!noOverscroll && delta > availableScroll))) {
         shouldCancelScroll = true;
     }
     else if (!isDeltaPositive &&
-        ((noOverscroll && availableScrollTop === 0) || (!noOverscroll && -delta > availableScrollTop))) {
+        ((noOverscroll && Math.abs(availableScrollTop) < 1) || (!noOverscroll && -delta > availableScrollTop))) {
         shouldCancelScroll = true;
     }
     return shouldCancelScroll;

package/node_modules/react-remove-scroll/dist/es2015/types.d.ts

@@ -3,6 +3,7 @@ import { Ref, RefObject } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { RefAttributes } from 'react';
 export declare type Axis = 'v' | 'h';
+export declare type GapMode = 'padding' | 'margin';
 export interface RemoveScrollEffectCallbacks {
     onScrollCapture(event: any): void;
     onWheelCapture(event: any): void;
@@ -19,8 +20,9 @@ export interface ChildrenNode {
 }
 export interface ChildrenForward {
     /**
-     * if forwardProps is true - children should be single Element
-     * which would NOT with a div
+     * if forwardProps is true - everything will be forwarded to a single child node
+     * otherwise - a Container, controlled by `as` prop will be rendered in place
+     * @default false
      * @see {@link IRemoveScrollSelfProps.as}
      */
     forwardProps: true;
@@ -64,6 +66,11 @@ export interface IRemoveScrollSelfProps {
      * @default 'div'
      */
     as?: string | React.ElementType;
+    /**
+     * controls the way "gap" is filled
+     * @default "margin"
+     */
+    gapMode?: GapMode;
 }
 export declare type IRemoveScrollProps = IRemoveScrollSelfProps & (ChildrenForward | ChildrenNode);
 export declare type IRemoveScrollUIProps = IRemoveScrollProps & {
@@ -76,6 +83,7 @@ export interface IRemoveScrollEffectProps {
     inert?: boolean;
     shards?: Array<React.RefObject<any> | HTMLElement>;
     lockRef: RefObject<HTMLElement>;
+    gapMode?: GapMode;
     setCallbacks(cb: RemoveScrollEffectCallbacks): void;
 }
 interface WithClassNames {

package/node_modules/react-remove-scroll/dist/es2019/SideEffect.js

@@ -18,7 +18,7 @@ export function RemoveScrollSideCar(props) {
     const touchStartRef = React.useRef([0, 0]);
     const activeAxis = React.useRef();
     const [id] = React.useState(idCounter++);
-    const [Style] = React.useState(() => styleSingleton());
+    const [Style] = React.useState(styleSingleton);
     const lastProps = React.useRef(props);
     React.useEffect(() => {
         lastProps.current = props;
@@ -81,7 +81,7 @@ export function RemoveScrollSideCar(props) {
             return;
         }
         const delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
-        const sourceEvent = shouldPreventQueue.current.filter((e) => e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta))[0];
+        const sourceEvent = shouldPreventQueue.current.filter((e) => e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta))[0];
         // self event, and should be canceled
         if (sourceEvent && sourceEvent.should) {
             if (event.cancelable) {
@@ -104,7 +104,7 @@ export function RemoveScrollSideCar(props) {
         }
     }, []);
     const shouldCancel = React.useCallback((name, delta, target, should) => {
-        const event = { name, delta, target, should };
+        const event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
         shouldPreventQueue.current.push(event);
         setTimeout(() => {
             shouldPreventQueue.current = shouldPreventQueue.current.filter((e) => e !== event);
@@ -140,5 +140,16 @@ export function RemoveScrollSideCar(props) {
     const { removeScrollBar, inert } = props;
     return (React.createElement(React.Fragment, null,
         inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
-        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
+        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null));
+}
+function getOutermostShadowParent(node) {
+    let shadowParent = null;
+    while (node !== null) {
+        if (node instanceof ShadowRoot) {
+            shadowParent = node.host;
+            node = node.host;
+        }
+        node = node.parentNode;
+    }
+    return shadowParent;
 }