main repo

node_modules/vaul/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 Emil Kowalski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

node_modules/vaul/README.md

@@ -0,0 +1,181 @@
+https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516
+
+Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. You can read about why and how it was built [here](https://emilkowal.ski/ui/building-a-drawer-component).
+
+## Usage
+
+To start using the library, install it in your project:,
+
+```bash
+npm install vaul
+```
+
+Use the drawer in your app.
+
+```jsx
+import { Drawer } from 'vaul';
+
+function MyComponent() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>Open</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Content>
+          <p>Content</p>
+        </Drawer.Content>
+        <Drawer.Overlay />
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+```
+
+## Examples
+
+Play around with the examples on codesandbox:
+
+- [With scaled background](https://codesandbox.io/p/sandbox/drawer-with-scale-g24vvh?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1)
+- [Without scaled background](https://codesandbox.io/p/sandbox/drawer-with-scale-forked-nx2glp?file=%2Fapp%2Fmy-drawer.tsx%3A4%2C1)
+- [With snap points](https://codesandbox.io/p/sandbox/drawer-non-dismissable-forked-jchtff?file=/app/my-drawer.tsx:1,1)
+- [Scrollable with inputs](https://codesandbox.io/p/sandbox/drawer-with-scale-forked-73f8jw?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1)
+- [Drawer from right instead of bottom](https://codesandbox.io/p/devbox/drawer-direction-right-n338ml?file=%2Fapp%2Fmy-drawer.tsx%3A47%2C2)
+- [Nested drawers](https://codesandbox.io/p/sandbox/drawer-non-dismissable-forked-5z2r3j?file=%2Fapp%2Fmy-drawer.tsx%3A49%2C16-49%2C246)
+- [Non-dismissible](https://codesandbox.io/p/sandbox/drawer-without-scale-forked-kxh9j5?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1)
+- [Non-draggable element](https://codesandbox.io/p/devbox/drawer-with-scale-forked-hwtfws?file=%2Fapp%2Fmy-drawer.tsx%3A42%2C37)
+
+## API Reference
+
+### Root
+
+Contains all parts of a dialog. Use `shouldScaleBackground` to enable background scaling, it requires an element with `[data-vaul-drawer-wrapper]` data attribute to scale its background.
+Can be controlled with the `value` and `onOpenChange` props. Can be opened by default via the `open` prop.
+
+Additional props:
+
+`closeThreshold`: Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
+
+`scrollLockTimeout`: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms.
+
+`snapPoints`: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example `[0.2, 0.5, 0.8]`. You can also use px values, which doesn't take screen height into account.
+
+`fadeFromIndex`: Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
+
+`modal`: When `false` it allows to interact with elements outside of the drawer without closing it. Defaults to `true`.
+
+`direction`: Direction of the drawer. Can be `top` or `bottom`, `left`, `right`. Defaults to `bottom`.
+
+`repositionInputs`: When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to `false` will fall back to the default browser behavior.
+
+`noBodyStyles`: When `true` the `body` doesn't get any styles assigned from Vaul.
+
+`handleOnly`: When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component. Defaults to `false`.
+
+`setBackgroundColorOnScale`: When `false` we don't change body's background color when the drawer is open. `true` by default.
+
+`defaultOpen`: Opened by default, still reacts to `open` state changes.
+
+`dismissible`: When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+
+`snapToSequentialPoint`: Disabled velocity based swiping for snap points. This means that a snap point won't be skipped even if the velocity is high enough. Useful if each snap point in a drawer is equally important.
+
+`onAnimationEnd`: Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered. Useful to revert any state changes for example.
+
+`[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged.
+
+### Controlled Drawer
+
+Drawer can be controlled programmatically by providing the `open` prop. If you want to react to open state changes from within the Drawer use the `onOpenChange` prop, this will allow you to provide your own open state while still closing the drawer when the escape key is pressed for example.
+
+```
+const [open, setOpen] = React.useState(false);
+
+// ...
+
+<Drawer.Root open={open} onOpenChange={setOpen}>
+  // ...
+</Drawer.Root>
+```
+
+### Custom Container
+
+Customize the element that your drawer portals into. By default, drawer will be appended to `document.body`.
+
+```tsx
+import React from 'react';
+import { Drawer } from 'vaul';
+
+export default () => {
+  const [container, setContainer] = React.useState(null);
+
+  return (
+    <div>
+      <Drawer.Root container={container}>
+        <Drawer.Trigger />
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content>...</Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+      // Drawer will be rendered inside this div.
+      <div ref={setContainer} />
+    </div>
+  );
+};
+```
+
+### Handle
+
+A drag hint (also known as grabber). Shows people that they can drag the drawer; they can also tap it to cycle through the snap points, and double tap quickly to close the drawer.
+
+```jsx
+import { Drawer } from 'vaul';
+
+function MyComponent() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>Open</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Content>
+          <Drawer.Handle />
+          <p>Content</p>
+        </Drawer.Content>
+        <Drawer.Overlay />
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+```
+
+### Trigger
+
+The button that opens the dialog. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#trigger).
+
+### Content
+
+Content that should be rendered in the drawer. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#content).
+
+### Overlay
+
+A layer that covers the inert portion of the view when the dialog is open. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#overlay).
+
+### Title
+
+An accessible title to be announced when the dialog is opened. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#title).
+
+### Description
+
+An optional accessible description to be announced when the dialog is opened. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#description).
+
+### Close
+
+The button that closes the dialog. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#close).
+
+### Portal
+
+Portals your drawer into the body.
+
+### CSS File
+
+CSS in this library is inserted by JavaScript into `<head>` element by default. If you're having issue with it such as [CSP restriction](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src), you can use `vaul/style.css` CSS as a workaround to apply the styles.
+
+> Note: You don't need to import it unless the default inline styles is blocked by CSP.

node_modules/vaul/dist/index.d.mts

@@ -0,0 +1,69 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import React from 'react';
+
+interface WithFadeFromProps {
+    snapPoints: (number | string)[];
+    fadeFromIndex: number;
+}
+interface WithoutFadeFromProps {
+    snapPoints?: (number | string)[];
+    fadeFromIndex?: never;
+}
+type DialogProps = {
+    activeSnapPoint?: number | string | null;
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    children?: React.ReactNode;
+    open?: boolean;
+    closeThreshold?: number;
+    noBodyStyles?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    shouldScaleBackground?: boolean;
+    setBackgroundColorOnScale?: boolean;
+    scrollLockTimeout?: number;
+    fixed?: boolean;
+    handleOnly?: boolean;
+    dismissible?: boolean;
+    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    modal?: boolean;
+    nested?: boolean;
+    onClose?: () => void;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    defaultOpen?: boolean;
+    disablePreventScroll?: boolean;
+    repositionInputs?: boolean;
+    snapToSequentialPoint?: boolean;
+    container?: HTMLElement | null;
+    onAnimationEnd?: (open: boolean) => void;
+    preventScrollRestoration?: boolean;
+    autoFocus?: boolean;
+} & (WithFadeFromProps | WithoutFadeFromProps);
+declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): React.JSX.Element;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
+    preventCycle?: boolean;
+};
+declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    preventCycle?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): React.JSX.Element;
+type PortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
+declare function Portal(props: PortalProps): React.JSX.Element;
+declare const Drawer: {
+    Root: typeof Root;
+    NestedRoot: typeof NestedRoot;
+    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: typeof Portal;
+    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        preventCycle?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+};
+
+export { Content, type ContentProps, type DialogProps, Drawer, Handle, type HandleProps, NestedRoot, Overlay, Portal, Root, type WithFadeFromProps, type WithoutFadeFromProps };

node_modules/vaul/dist/index.d.ts

@@ -0,0 +1,69 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import React from 'react';
+
+interface WithFadeFromProps {
+    snapPoints: (number | string)[];
+    fadeFromIndex: number;
+}
+interface WithoutFadeFromProps {
+    snapPoints?: (number | string)[];
+    fadeFromIndex?: never;
+}
+type DialogProps = {
+    activeSnapPoint?: number | string | null;
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    children?: React.ReactNode;
+    open?: boolean;
+    closeThreshold?: number;
+    noBodyStyles?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    shouldScaleBackground?: boolean;
+    setBackgroundColorOnScale?: boolean;
+    scrollLockTimeout?: number;
+    fixed?: boolean;
+    handleOnly?: boolean;
+    dismissible?: boolean;
+    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    modal?: boolean;
+    nested?: boolean;
+    onClose?: () => void;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    defaultOpen?: boolean;
+    disablePreventScroll?: boolean;
+    repositionInputs?: boolean;
+    snapToSequentialPoint?: boolean;
+    container?: HTMLElement | null;
+    onAnimationEnd?: (open: boolean) => void;
+    preventScrollRestoration?: boolean;
+    autoFocus?: boolean;
+} & (WithFadeFromProps | WithoutFadeFromProps);
+declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): React.JSX.Element;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
+    preventCycle?: boolean;
+};
+declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    preventCycle?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): React.JSX.Element;
+type PortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
+declare function Portal(props: PortalProps): React.JSX.Element;
+declare const Drawer: {
+    Root: typeof Root;
+    NestedRoot: typeof NestedRoot;
+    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: typeof Portal;
+    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        preventCycle?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+};
+
+export { Content, type ContentProps, type DialogProps, Drawer, Handle, type HandleProps, NestedRoot, Overlay, Portal, Root, type WithFadeFromProps, type WithoutFadeFromProps };

node_modules/vaul/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "vaul",
+  "version": "0.9.9",
+  "description": "Drawer component for React.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "style.css"
+  ],
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "require": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "pnpm type-check && bunchee && pnpm copy-assets",
+    "copy-assets": "cp -r ./src/style.css ./style.css",
+    "dev": "bunchee --watch",
+    "dev:website": "turbo run dev --filter=website...",
+    "dev:test": "turbo run dev --filter=test...",
+    "format": "prettier --write .",
+    "test": "playwright test"
+  },
+  "keywords": [
+    "react",
+    "drawer",
+    "dialog",
+    "modal"
+  ],
+  "author": "Emil Kowalski <e@emilkowal.ski>",
+  "license": "MIT",
+  "homepage": "https://vaul.emilkowal.ski/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/emilkowalski/vaul.git"
+  },
+  "bugs": {
+    "url": "https://github.com/emilkowalski/vaul/issues"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.37.1",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@types/node": "20.5.7",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.18",
+    "bunchee": "^5.1.5",
+    "eslint": "^7.32.0",
+    "prettier": "^2.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "turbo": "1.6",
+    "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "packageManager": "pnpm@8.8.0",
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.1"
+  }
+}

node_modules/vaul/style.css

@@ -0,0 +1,260 @@
+[data-vaul-drawer] {
+  touch-action: none;
+  will-change: transform;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  animation-duration: 0.5s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
+  animation-name: slideFromBottom;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='closed'] {
+  animation-name: slideToBottom;
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='open'] {
+  animation-name: slideFromTop;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='closed'] {
+  animation-name: slideToTop;
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='open'] {
+  animation-name: slideFromLeft;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='closed'] {
+  animation-name: slideToLeft;
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='open'] {
+  animation-name: slideFromRight;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='closed'] {
+  animation-name: slideToRight;
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-overlay][data-vaul-snap-points='false'] {
+  animation-duration: 0.5s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+[data-vaul-overlay][data-vaul-snap-points='false'][data-state='open'] {
+  animation-name: fadeIn;
+}
+[data-vaul-overlay][data-state='closed'] {
+  animation-name: fadeOut;
+}
+
+[data-vaul-overlay][data-vaul-snap-points='true'] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-overlay][data-vaul-snap-points='true'] {
+  opacity: 1;
+}
+
+[data-vaul-drawer]:not([data-vaul-custom-container='true'])::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[data-vaul-overlay][data-vaul-snap-points='true']:not([data-vaul-snap-points-overlay='true']):not(
+    [data-state='closed']
+  ) {
+  opacity: 0;
+}
+
+[data-vaul-overlay][data-vaul-snap-points-overlay='true'] {
+  opacity: 1;
+}
+
+[data-vaul-handle] {
+  display: block;
+  position: relative;
+  opacity: 0.7;
+  background: #e2e2e4;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 32px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+}
+
+[data-vaul-handle]:hover,
+[data-vaul-handle]:active {
+  opacity: 1;
+}
+
+[data-vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); /* 44px */
+  height: max(100%, 2.75rem); /* 44px */
+  touch-action: inherit;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-vaul-drawer] {
+    user-select: none;
+  }
+}
+
+@media (pointer: fine) {
+  [data-vaul-handle-hitarea]: {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideFromBottom {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToBottom {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToTop {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToLeft {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToRight {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}