Change Sheet default export to named export

README.md

@@ -41,7 +41,7 @@ npm install framer-motion
 ## Usage
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useState } from 'react';
 
 function Example() {
@@ -98,7 +98,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 Imperative method that can be accessed via a ref for snapping to a snap point in given index.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -144,7 +144,7 @@ Similarly to the `snapTo` method the `y` value can be accessed via a ref.
 The `y` value can be useful for certain situtation eg. when you want to combine snap points with scrollable sheet content and ensure that the content stays properly scrollable in any snap point. Below you can see a simplified example of this situation and for a more detailed example take a look at the [ScrollableSnapPoints](example/components/ScrollableSnapPoints.tsx) component in the example app.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -371,7 +371,7 @@ You can add your own styles or override the default sheet styles via the exposed
 #### CSS-in-JS
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import styled from 'styled-components';
 import { useState } from 'react';
 
@@ -421,7 +421,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
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useRef } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 

example/components/ContentHeight.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 
 import { Button } from './common';
 
@@ -36,7 +36,7 @@ const ContentHeight = () => {
                 {boxes.map((_, i) => (
                   <Box
                     key={i}
-                    onClick={() => setBoxes(prev => [...prev, i + 1])}
+                    onClick={() => setBoxes((prev) => [...prev, i + 1])}
                   >
                     {i} (click to create new boxes )
                   </Box>

example/components/DisableDrag.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import { Button } from './common';
 

example/components/Scrollable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import { Button } from './common';
 

example/components/SnapPoints.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 
 import { Button } from './common';
 import { useMetaThemeColor } from './hooks';

example/components/a11y/A11ySheet.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { OverlayTriggerState } from 'react-stately';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import {
   FocusScope,

example/components/apple-music/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import { useMetaThemeColor } from '../hooks';
 import { album } from './data';

example/components/slack-message/NewMessageContent.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 const people = [
   'john',

example/components/slack-message/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { FiEdit as MessageIcon, FiSearch as SearchIcon } from 'react-icons/fi';
 import { useOverlayTriggerState } from 'react-stately';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import {
   useOverlay,

src/index.tsx

@@ -1,6 +1,6 @@
 import { type MotionValue } from 'framer-motion';
 
-import Sheet from './sheet';
+import _Sheet from './sheet';
 import SheetContainer from './SheetContainer';
 import SheetContent from './SheetContent';
 import SheetHeader from './SheetHeader';
@@ -14,11 +14,11 @@ export interface SheetRef {
 }
 
 // HACK: this is needed to get the typing to work properly...
-const _SheetCompound: any = Sheet;
+const _SheetCompound: any = _Sheet;
 _SheetCompound.Container = SheetContainer;
 _SheetCompound.Header = SheetHeader;
 _SheetCompound.Content = SheetContent;
 _SheetCompound.Backdrop = SheetBackdrop;
 _SheetCompound.Scroller = SheetScroller;
 
-export default _SheetCompound as SheetCompound;
+export const Sheet = _SheetCompound as SheetCompound;