react-modal-sheet 3.4.1 → 4.0.0

package/README.md

@@ -23,23 +23,37 @@
 npm install react-modal-sheet
 ```
 
-or if you use `yarn`:
+### Peer dependencies
+
+The gestures and animations are handled by the excellent [Motion](https://motion.dev/) library so before you can start using this library you need to install `motion`:
 
 ```sh
-yarn add react-modal-sheet
+npm install motion
 ```
 
-### Peer dependencies
+> [!IMPORTANT]
+> If you are still using the old `framer-motion` package you need to upgrade to `motion` as `react-modal-sheet` is now built on top of the new `motion` package. **Version `v3.5.0` and older are compatible with `framer-motion`**.
 
-The gestures and animations are handled by the excellent [Framer Motion](https://github.com/framer/motion) library so before you can start using this library you need to install `framer-motion`:
+---
 
-```sh
-npm install framer-motion
-```
+<details>
+  <summary><strong>📚 Table of contents</strong></summary>
+  
+  - [Usage](#-usage)
+  - [Props](#%EF%B8%8F-props)
+  - [Methods and properties](#%EF%B8%8F-methods-and-properties)
+  - [Compound Components](#-compound-components)
+  - [Advanced usage](#-advanced-usage)
+  - [Customization](#-customization)
+  - [Accessibility](#%EF%B8%8F-accessibility)
+  - [Troubleshooting](#-troubleshooting)
+</details>
+
+---
 
 ## 💻 Usage
 
-```jsx
+```tsx
 import { Sheet } from 'react-modal-sheet';
 import { useState } from 'react';
 
@@ -86,7 +100,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 | `snapPoints`            | no       |                                      | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen.    |
 | `initialSnap`           | no       | 0                                    | Initial snap point when sheet is opened (index from `snapPoints`).                                                                                                                                                                   |
 | `rootId`                | no       |                                      | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect.                                                                                                                                           |
-| `tweenConfig`           | no       | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://www.framer.com/motion/transition/#tween) transition when the sheet is opened, closed, or snapped to a point.                                                                      |
+| `tweenConfig`           | no       | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://motion.dev/docs/react-transitions#tween) transition when the sheet is opened, closed, or snapped to a point.                                                                      |
 | `mountPoint`            | no       | `document.body`                      | HTML element that should be used as the mount point for the sheet.                                                                                                                                                                   |
 | `prefersReducedMotion`  | no       | false                                | Skip sheet animations (sheet instantly snaps to desired location).                                                                                                                                                                   |
 | `dragVelocityThreshold` | no       | 500                                  | How fast the sheet must be flicked down to close. Higher values make the sheet harder to close.                                                                                                                                      |
@@ -104,7 +118,7 @@ import { useState, useRef } from 'react';
 
 function Example() {
   const [isOpen, setOpen] = useState(false);
-  const ref = useRef<SheetRef>();
+  const ref = useRef<SheetRef>(null);
   const snapTo = (i: number) => ref.current?.snapTo(i);
 
   return (
@@ -150,7 +164,7 @@ import { useState, useRef } from 'react';
 
 function Example() {
   const [isOpen, setOpen] = useState(false);
-  const ref = useRef<SheetRef>();
+  const ref = useRef<SheetRef>(null);
 
   return (
     <>
@@ -269,7 +283,7 @@ Sheet scroller can be used to make the whole sheet content or parts of it scroll
 
 Sheet backdrop is a translucent overlay that helps to separate the sheet from it's background. By default the backdrop doesn't have any interaction attached to it but if you, for example, want to close the sheet when the backdrop is clicked you can provide tap handler to it which will change the rendered element from `div` to `button`.
 
-**⚠️ Note:** as the element is a motion component you need to use [`onTap`](https://www.framer.com/motion/gestures/#tap) instead of `onClick` if you want to add a click handler to it.
+**⚠️ Note:** as the element is a motion component you need to use [`onTap`](https://motion.dev/docs/react-gestures#tap) instead of `onClick` if you want to add a click handler to it.
 
 > 🖥 Rendered element: `motion.div` or `motion.button`.
 
@@ -305,7 +319,7 @@ The scroller component is in-between these states when the user has scrolled onl
 
 The default value for the `draggableAt` prop is `top` which should be a good default for most use cases. You shouldn't need `bottom` or `both` unless you have scrollable content inside a sheet that also has snap points.
 
-```jsx
+```tsx
 function ScrollableExample() {
   return (
     <Sheet>
@@ -330,7 +344,7 @@ In addition to the `Sheet.Backdrop` it's possible to apply a scaling effect to t
 
 To enable this effect you can provide the id of the root element where your application is mounted:
 
-```jsx
+```tsx
 function Example() {
   return <Sheet rootId="root">{/*...*/}</Sheet>;
 }
@@ -346,7 +360,7 @@ The default styles for the `Sheet` component somewhat follows the styles of the
 
 Adding a custom header is as simple as providing your own header as the child component to `Sheet.Header`:
 
-```jsx
+```tsx
 function Example() {
   return (
     <Sheet>
@@ -388,7 +402,7 @@ You can add your own styles or override the default sheet styles via the exposed
 
 #### CSS-in-JS
 
-```jsx
+```tsx
 import { Sheet } from 'react-modal-sheet';
 import { styled } from 'styled-components';
 import { useState } from 'react';
@@ -438,7 +452,7 @@ The example below utilizes React Aria to achieve an accessible modal-like bottom
 
 > ℹ️ The example was built by following the React Aria's [useDialog](https://react-spectrum.adobe.com/react-aria/useDialog.html) documentation.
 
-```jsx
+```tsx
 import { Sheet } from 'react-modal-sheet';
 import { useRef } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
@@ -519,3 +533,9 @@ If you want to see a more real-world-like implementation you can take a look at
 ### 🔩 Building a reusable sheet
 
 In your projects it might make sense to build a reusable bottom sheet that has all the accessibility features included and can then be easily used in various places in the project. Take a look at the [A11ySheet](example/components/a11y/A11ySheet.tsx) example to get some insight on how to build such a component. By incorporating all the accessibility features inside your own reusable component you don't need to repeat them every time you want to use a bottom sheet in your app.
+
+## 🐛 Troubleshooting
+
+### The sheet doesn't open when using `StrictMode`
+
+If you are using React [StrictMode](https://react.dev/reference/react/StrictMode) the sheet animations might not work as expected. This seems to be an issue in the `motion` library and I haven't been able to find a good solution for it yet. You see all `motion` issues related to the `StrictMode` [here](https://github.com/motiondivision/motion/issues?q=is%3Aissue+StrictMode). Easiest solution is to just not to use `StrictMode` 🤷‍♂️

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { motion, EasingDefinition, MotionProps, MotionValue } from 'framer-motion';
-import { ForwardRefExoticComponent, RefAttributes, ReactNode, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { motion, MotionProps, EasingDefinition, MotionValue } from 'motion/react';
+import { ReactNode, ComponentPropsWithoutRef, HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 interface SheetEvents {
     onOpenStart?: () => void;
@@ -62,5 +62,7 @@ interface SheetRef {
     snapTo: (index: number) => void;
 }
 declare const Sheet: SheetCompound;
+type SheetHeaderProps = SheetDraggableProps;
+type SheetContentProps = SheetDraggableProps;
 
-export { Sheet, type SheetRef };
+export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetScrollerProps };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { motion, EasingDefinition, MotionProps, MotionValue } from 'framer-motion';
-import { ForwardRefExoticComponent, RefAttributes, ReactNode, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { motion, MotionProps, EasingDefinition, MotionValue } from 'motion/react';
+import { ReactNode, ComponentPropsWithoutRef, HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 interface SheetEvents {
     onOpenStart?: () => void;
@@ -62,5 +62,7 @@ interface SheetRef {
     snapTo: (index: number) => void;
 }
 declare const Sheet: SheetCompound;
+type SheetHeaderProps = SheetDraggableProps;
+type SheetContentProps = SheetDraggableProps;
 
-export { Sheet, type SheetRef };
+export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetScrollerProps };

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var React2 = require('react');
 var reactDom = require('react-dom');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -35,8 +35,7 @@ function useModalEffect({
   function setup() {
     const root = document.querySelector(`#${rootId}`);
     const body = document.querySelector("body");
-    if (!root)
-      return;
+    if (!root) return;
     body.style.backgroundColor = "#000";
     root.style.overflow = "hidden";
     root.style.transitionTimingFunction = "cubic-bezier(0.32, 0.72, 0, 1)";
@@ -47,8 +46,7 @@ function useModalEffect({
   function cleanup() {
     const root = document.querySelector(`#${rootId}`);
     const body = document.querySelector("body");
-    if (!root)
-      return;
+    if (!root) return;
     setTimeout(() => {
       body.style.removeProperty("background-color");
       root.style.removeProperty("overflow");
@@ -63,17 +61,14 @@ function useModalEffect({
   }
   useIsomorphicLayoutEffect(() => {
     return () => {
-      if (rootId)
-        cleanup();
+      if (rootId) cleanup();
     };
   }, []);
   React2.useEffect(() => {
     const root = document.querySelector(`#${rootId}`);
-    if (!root)
-      return;
+    if (!root) return;
     function onCompleted() {
-      if (y.get() - 10 >= heightRef.current)
-        cleanup();
+      if (y.get() - 10 >= heightRef.current) cleanup();
     }
     const removeStartListener = y.on("animationStart", () => {
       var _a;
@@ -85,9 +80,9 @@ function useModalEffect({
         const progress = Math.max(0, 1 - value / heightRef.current);
         const pageWidth = window.innerWidth;
         const scale = (pageWidth - 16) / pageWidth;
-        const ty = framerMotion.transform(progress, [0, 1], [0, 24]);
-        const s = framerMotion.transform(progress, [0, 1], [1, scale]);
-        const borderRadius = framerMotion.transform(progress, [0, 1], [0, 10]);
+        const ty = react.transform(progress, [0, 1], [0, 24]);
+        const s = react.transform(progress, [0, 1], [1, scale]);
+        const borderRadius = react.transform(progress, [0, 1], [0, 10]);
         const inset = "env(safe-area-inset-top)";
         root.style.transform = `scale(${s}) translate3d(0, calc(${inset} + ${ty}px), 0)`;
         root.style.borderTopRightRadius = `${borderRadius}px`;
@@ -148,14 +143,14 @@ function useDimensions() {
   return dimensions;
 }
 function usePrevious(state) {
-  const ref = React2.useRef();
+  const ref = React2.useRef(void 0);
   React2.useEffect(() => {
     ref.current = state;
   });
   return ref.current;
 }
 function useEffectEvent(handler) {
-  const handlerRef = React2.useRef();
+  const handlerRef = React2.useRef(void 0);
   useIsomorphicLayoutEffect(() => {
     handlerRef.current = handler;
   });
@@ -175,8 +170,7 @@ var SheetContext = React2.createContext(
 );
 var useSheetContext = () => {
   const context = React2.useContext(SheetContext);
-  if (!context)
-    throw Error("Sheet context error");
+  if (!context) throw new Error("Sheet context error");
   return context;
 };
 var SheetScrollerContext = React2.createContext(void 0);
@@ -186,12 +180,10 @@ function SheetScrollerContextProvider({
   const sheetContext = useSheetContext();
   const [disableDrag, setDisableDrag] = React2.useState(!!sheetContext.disableDrag);
   function setDragEnabled() {
-    if (!sheetContext.disableDrag)
-      setDisableDrag(false);
+    if (!sheetContext.disableDrag) setDisableDrag(false);
   }
   function setDragDisabled() {
-    if (!disableDrag)
-      setDisableDrag(true);
+    if (!disableDrag) setDisableDrag(true);
   }
   return /* @__PURE__ */ React2__default.default.createElement(
     SheetScrollerContext.Provider,
@@ -203,8 +195,7 @@ function SheetScrollerContextProvider({
 }
 var useSheetScrollerContext = () => {
   const context = React2.useContext(SheetScrollerContext);
-  if (!context)
-    throw Error("Sheet scroller context error");
+  if (!context) throw new Error("Sheet scroller context error");
   return context;
 };
 
@@ -223,8 +214,7 @@ function getClosest(nums, goal) {
 }
 function inDescendingOrder(arr) {
   for (let i = 0; i < arr.length; i++) {
-    if (arr[i + 1] > arr[i])
-      return false;
+    if (arr[i + 1] > arr[i]) return false;
   }
   return true;
 }
@@ -251,16 +241,14 @@ function mergeRefs(refs) {
   };
 }
 function isTouchDevice() {
-  if (typeof window === "undefined")
-    return false;
+  if (typeof window === "undefined") return false;
   return "ontouchstart" in window || navigator.maxTouchPoints > 0;
 }
 function testPlatform(re) {
   var _a;
   return typeof window !== "undefined" && window.navigator != null ? re.test(
     // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/dot-notation
-    ((_a = window.navigator["userAgentData"]) == null ? void 0 : _a.platform) || window.navigator.platform
+    ((_a = window.navigator.userAgentData) == null ? void 0 : _a.platform) || window.navigator.platform
   ) : false;
 }
 function cached(fn) {
@@ -370,7 +358,9 @@ function preventScrollMobileSafari() {
   let scrollable;
   let lastY = 0;
   const onTouchStart = (e) => {
-    scrollable = getScrollParent(e.target, true);
+    var _a;
+    const target = (_a = e.composedPath()) == null ? void 0 : _a[0];
+    scrollable = getScrollParent(target, true);
     if (scrollable === document.documentElement && scrollable === document.body) {
       return;
     }
@@ -396,7 +386,8 @@ function preventScrollMobileSafari() {
     lastY = y;
   };
   const onTouchEnd = (e) => {
-    const target = e.target;
+    var _a;
+    const target = (_a = e.composedPath()) == null ? void 0 : _a[0];
     if (willOpenKeyboard(target) && target !== document.activeElement) {
       e.preventDefault();
       target.style.transform = "translateY(-2000px)";
@@ -407,7 +398,8 @@ function preventScrollMobileSafari() {
     }
   };
   const onFocus = (e) => {
-    const target = e.target;
+    var _a;
+    const target = (_a = e.composedPath()) == null ? void 0 : _a[0];
     if (willOpenKeyboard(target)) {
       target.style.transform = "translateY(-2000px)";
       requestAnimationFrame(() => {
@@ -519,7 +511,8 @@ var styles = {
     backgroundColor: "rgba(0, 0, 0, 0.2)",
     touchAction: "none",
     // Disable iOS body scrolling
-    border: "none"
+    border: "none",
+    WebkitTapHighlightColor: "transparent"
   },
   container: {
     zIndex: 2,
@@ -564,7 +557,6 @@ var styles = {
     overflowY: "auto"
   }
 };
-var styles_default = styles;
 
 // src/sheet.tsx
 var Sheet = React2.forwardRef(
@@ -592,20 +584,20 @@ var Sheet = React2.forwardRef(
     ...rest
   }, ref) => {
     const sheetRef = React2.useRef(null);
-    const indicatorRotation = framerMotion.useMotionValue(0);
+    const indicatorRotation = react.useMotionValue(0);
     const { height: windowHeight } = useDimensions();
-    const shouldReduceMotion = framerMotion.useReducedMotion();
+    const shouldReduceMotion = react.useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
     const animationOptions = {
       type: "tween",
       ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
     };
-    const y = framerMotion.useMotionValue(windowHeight);
-    const zIndex = framerMotion.useTransform(
+    const y = react.useMotionValue(windowHeight);
+    const zIndex = react.useTransform(
       y,
-      (value) => value + 2 >= windowHeight ? -1 : 9999999
+      (value) => value + 2 >= windowHeight ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
     );
-    const visibility = framerMotion.useTransform(
+    const visibility = react.useTransform(
       y,
       (value) => value + 2 >= windowHeight ? "hidden" : "visible"
     );
@@ -626,8 +618,7 @@ var Sheet = React2.forwardRef(
     let snapPoints = snapPointsProp;
     if (snapPoints) {
       snapPoints = snapPoints.map((point) => {
-        if (point > 0 && point <= 1)
-          return Math.round(point * windowHeight);
+        if (point > 0 && point <= 1) return Math.round(point * windowHeight);
         return point < 0 ? windowHeight + point : point;
       });
       console.assert(
@@ -639,16 +630,13 @@ var Sheet = React2.forwardRef(
     }
     const onDrag = useEffectEvent((_, { delta }) => {
       const velocity = y.getVelocity();
-      if (velocity > 0)
-        indicatorRotation.set(10);
-      if (velocity < 0)
-        indicatorRotation.set(-10);
+      if (velocity > 0) indicatorRotation.set(10);
+      if (velocity < 0) indicatorRotation.set(-10);
       y.set(Math.max(y.get() + delta.y, 0));
     });
     const onDragStart = useEffectEvent(() => {
       const focusedElement = document.activeElement;
-      if (!focusedElement || !sheetRef.current)
-        return;
+      if (!focusedElement || !sheetRef.current) return;
       const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
       if (isInput && sheetRef.current.contains(focusedElement)) {
         focusedElement.blur();
@@ -673,22 +661,22 @@ var Sheet = React2.forwardRef(
           snapTo = sheetHeight;
         }
         snapTo = validateSnapTo({ snapTo, sheetHeight });
-        void framerMotion.animate(y, snapTo, animationOptions);
+        react.animate(y, snapTo, animationOptions);
         if (snapPoints && onSnap) {
           const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
-          const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue));
+          const snapIndex = snapPoints.indexOf(
+            getClosest(snapPoints, snapValue)
+          );
           onSnap(snapIndex);
         }
         const roundedSheetHeight = Math.round(sheetHeight);
         const shouldClose = snapTo + 2 >= roundedSheetHeight;
-        if (shouldClose)
-          onClose();
+        if (shouldClose) onClose();
       }
       indicatorRotation.set(0);
     });
     React2.useEffect(() => {
-      if (!snapPoints || !onSnap)
-        return;
+      if (!snapPoints || !onSnap) return;
       const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
       onSnap(snapIndex);
     }, [isOpen]);
@@ -703,11 +691,9 @@ var Sheet = React2.forwardRef(
             snapTo: sheetHeight - snapPoint,
             sheetHeight
           });
-          void framerMotion.animate(y, snapTo, animationOptions);
-          if (onSnap)
-            onSnap(snapIndex);
-          if (snapTo >= sheetHeight)
-            onClose();
+          react.animate(y, snapTo, animationOptions);
+          if (onSnap) onSnap(snapIndex);
+          if (snapTo >= sheetHeight) onClose();
         }
       }
     }));
@@ -745,24 +731,22 @@ var Sheet = React2.forwardRef(
       disableDrag
     };
     const sheet = /* @__PURE__ */ React2__default.default.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React2__default.default.createElement(
-      framerMotion.motion.div,
+      react.motion.div,
       {
         ...rest,
         ref,
-        style: { ...styles_default.wrapper, zIndex, visibility, ...style }
+        style: { ...styles.wrapper, zIndex, visibility, ...style }
       },
-      /* @__PURE__ */ React2__default.default.createElement(framerMotion.AnimatePresence, null, isOpen ? /* @__PURE__ */ React2__default.default.createElement(SheetScrollerContextProvider, null, React2.Children.map(
+      /* @__PURE__ */ React2__default.default.createElement(react.AnimatePresence, null, isOpen ? /* @__PURE__ */ React2__default.default.createElement(SheetScrollerContextProvider, null, React2.Children.map(
         children,
         (child, i) => React2.cloneElement(child, { key: `sheet-child-${i}` })
       )) : null)
     ));
-    if (IS_SSR)
-      return sheet;
+    if (IS_SSR) return sheet;
     return reactDom.createPortal(sheet, mountPoint ?? document.body);
   }
 );
 Sheet.displayName = "Sheet";
-var sheet_default = Sheet;
 var SheetContainer = React2.forwardRef(
   ({ children, style = {}, className = "", ...rest }, ref) => {
     const {
@@ -782,13 +766,13 @@ var SheetContainer = React2.forwardRef(
     const maxSnapHeight = snapPoints ? snapPoints[0] : null;
     const height = maxSnapHeight !== null ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})` : MAX_HEIGHT;
     return /* @__PURE__ */ React2__default.default.createElement(
-      framerMotion.motion.div,
+      react.motion.div,
       {
         ...rest,
         ref: mergeRefs([sheetRef, ref]),
         className: `react-modal-sheet-container ${className}`,
         style: {
-          ...styles_default.container,
+          ...styles.container,
           ...style,
           ...detent === "full-height" && { height },
           ...detent === "content-height" && { maxHeight: height },
@@ -804,7 +788,6 @@ var SheetContainer = React2.forwardRef(
   }
 );
 SheetContainer.displayName = "SheetContainer";
-var SheetContainer_default = SheetContainer;
 var SheetContent = React2.forwardRef(
   ({ children, style, disableDrag, className = "", ...rest }, ref) => {
     const sheetContext = useSheetContext();
@@ -812,12 +795,12 @@ var SheetContent = React2.forwardRef(
     const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
     const dragProps = disableDrag || sheetScrollerContext.disableDrag ? void 0 : sheetContext.dragProps;
     return /* @__PURE__ */ React2__default.default.createElement(
-      framerMotion.motion.div,
+      react.motion.div,
       {
         ...rest,
         ref: mergeRefs([ref, constraintsRef]),
         className: `react-modal-sheet-content ${className}`,
-        style: { ...styles_default.content, ...style },
+        style: { ...styles.content, ...style },
         ...dragProps,
         dragConstraints: constraintsRef,
         onMeasureDragConstraints
@@ -827,52 +810,50 @@ var SheetContent = React2.forwardRef(
   }
 );
 SheetContent.displayName = "SheetContent";
-var SheetContent_default = SheetContent;
 var SheetHeader = React2.forwardRef(
   ({ children, style, disableDrag, ...rest }, ref) => {
     const { indicatorRotation, dragProps } = useSheetContext();
     const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
     const _dragProps = disableDrag ? void 0 : dragProps;
-    const indicator1Transform = framerMotion.useTransform(
+    const indicator1Transform = react.useTransform(
       indicatorRotation,
       (r) => `translateX(2px) rotate(${r}deg)`
     );
-    const indicator2Transform = framerMotion.useTransform(
+    const indicator2Transform = react.useTransform(
       indicatorRotation,
       (r) => `translateX(-2px) rotate(${-1 * r}deg)`
     );
     return /* @__PURE__ */ React2__default.default.createElement(
-      framerMotion.motion.div,
+      react.motion.div,
       {
         ...rest,
         ref: mergeRefs([ref, constraintsRef]),
-        style: { ...styles_default.headerWrapper, ...style },
+        style: { ...styles.headerWrapper, ...style },
         ..._dragProps,
         dragConstraints: constraintsRef,
         onMeasureDragConstraints
       },
-      children || /* @__PURE__ */ React2__default.default.createElement("div", { className: "react-modal-sheet-header", style: styles_default.header }, /* @__PURE__ */ React2__default.default.createElement(
-        framerMotion.motion.span,
+      children || /* @__PURE__ */ React2__default.default.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React2__default.default.createElement(
+        react.motion.span,
         {
           className: "react-modal-sheet-drag-indicator",
-          style: { ...styles_default.indicator, transform: indicator1Transform }
+          style: { ...styles.indicator, transform: indicator1Transform }
         }
       ), /* @__PURE__ */ React2__default.default.createElement(
-        framerMotion.motion.span,
+        react.motion.span,
         {
           className: "react-modal-sheet-drag-indicator",
-          style: { ...styles_default.indicator, transform: indicator2Transform }
+          style: { ...styles.indicator, transform: indicator2Transform }
         }
       ))
     );
   }
 );
 SheetHeader.displayName = "SheetHeader";
-var SheetHeader_default = SheetHeader;
 var isClickable = (props) => !!props.onClick || !!props.onTap;
 var SheetBackdrop = React2.forwardRef(
   ({ style = {}, className = "", ...rest }, ref) => {
-    const Comp = isClickable(rest) ? framerMotion.motion.button : framerMotion.motion.div;
+    const Comp = isClickable(rest) ? react.motion.button : react.motion.div;
     const pointerEvents = isClickable(rest) ? "auto" : "none";
     return /* @__PURE__ */ React2__default.default.createElement(
       Comp,
@@ -880,7 +861,7 @@ var SheetBackdrop = React2.forwardRef(
         ...rest,
         ref,
         className: `react-modal-sheet-backdrop ${className}`,
-        style: { ...styles_default.backdrop, ...style, pointerEvents },
+        style: { ...styles.backdrop, ...style, pointerEvents },
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 }
@@ -889,15 +870,13 @@ var SheetBackdrop = React2.forwardRef(
   }
 );
 SheetBackdrop.displayName = "SheetBackdrop";
-var SheetBackdrop_default = SheetBackdrop;
 var SheetScroller = React2.forwardRef(
   ({ draggableAt = "top", children, style, className = "", ...rest }, ref) => {
     const sheetScrollerContext = useSheetScrollerContext();
     function determineDragState(element) {
       const { scrollTop, scrollHeight, clientHeight } = element;
       const isScrollable2 = scrollHeight > clientHeight;
-      if (!isScrollable2)
-        return;
+      if (!isScrollable2) return;
       const isAtTop = scrollTop <= 0;
       const isAtBottom = scrollHeight - scrollTop === clientHeight;
       const shouldEnable = draggableAt === "top" && isAtTop || draggableAt === "bottom" && isAtBottom || draggableAt === "both" && (isAtTop || isAtBottom);
@@ -926,7 +905,7 @@ var SheetScroller = React2.forwardRef(
         ...rest,
         ref,
         className: `react-modal-sheet-scroller ${className}`,
-        style: { ...styles_default.scroller, ...style },
+        style: { ...styles.scroller, ...style },
         ...scrollProps
       },
       children
@@ -934,17 +913,16 @@ var SheetScroller = React2.forwardRef(
   }
 );
 SheetScroller.displayName = "SheetScroller";
-var SheetScroller_default = SheetScroller;
 
 // src/index.tsx
-var _SheetCompound = sheet_default;
-_SheetCompound.Container = SheetContainer_default;
-_SheetCompound.Header = SheetHeader_default;
-_SheetCompound.Content = SheetContent_default;
-_SheetCompound.Backdrop = SheetBackdrop_default;
-_SheetCompound.Scroller = SheetScroller_default;
-var Sheet2 = _SheetCompound;
+var Sheet2 = Object.assign(Sheet, {
+  Container: SheetContainer,
+  Header: SheetHeader,
+  Content: SheetContent,
+  Backdrop: SheetBackdrop,
+  Scroller: SheetScroller
+});
 
 exports.Sheet = Sheet2;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map