feat: added drawer component (#3986)

Signed-off-by: The1111mp <The1111mp@outlook.com>
Co-authored-by: The1111mp <The1111mp@outlook.com>

apps/docs/config/routes.json

@@ -253,6 +253,13 @@
           "keywords": "dropdown, menu, selection, option list",
           "path": "/docs/components/dropdown.mdx"
         },
+        {
+          "key": "drawer",
+          "title": "Drawer",
+          "keywords": "drawer, panel, slide, overlay",
+          "path": "/docs/components/drawer.mdx",
+          "newPost": true
+        },
         {
           "key": "image",
           "title": "Image",

apps/docs/content/components/drawer/backdrop.ts

@@ -0,0 +1,132 @@
+const MailIcon = `export const MailIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const LockIcon = `export const LockIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
+      fill="currentColor"
+    />
+    <path
+      d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react";
+import {MailIcon} from "./MailIcon";
+import {LockIcon} from "./LockIcon";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [backdrop, setBackdrop] = React.useState("opaque");
+
+  const backdrops = ["opaque", "blur", "transparent"];
+
+  const handleBackdropChange = (backdrop) => {
+    setBackdrop(backdrop);
+    onOpen();
+  };
+
+  return (
+    <>
+      <div className="flex gap-2">
+        {backdrops.map((backdrop) => (
+          <Button
+            key={backdrop}
+            className="capitalize"
+            variant="flat"
+            color="primary"
+            onPress={() => handleBackdropChange(backdrop)}
+          >
+            {backdrop}
+          </Button>
+        ))}
+      </div>
+      <Drawer backdrop={backdrop} isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
+              <DrawerBody>
+                <Input
+                  autoFocus
+                  endContent={
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Email"
+                  placeholder="Enter your email"
+                  variant="bordered"
+                />
+                <Input
+                  endContent={
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                  variant="bordered"
+                />
+                <div className="flex py-2 px-1 justify-between">
+                  <Checkbox
+                    classNames={{
+                      label: "text-small",
+                    }}
+                  >
+                    Remember me
+                  </Checkbox>
+                  <Link color="primary" href="#" size="sm">
+                    Forgot password?
+                  </Link>
+                </div>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="flat" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Sign in
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/MailIcon.jsx": MailIcon,
+  "/LockIcon.jsx": LockIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/drawer/custom-motion.ts

@@ -0,0 +1,63 @@
+const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer 
+        isOpen={isOpen} 
+        onOpenChange={onOpenChange}
+        motionProps={{
+          variants: {
+            enter: {
+              opacity: 1,
+              x: 0,
+              duration: 0.3,
+            },
+            exit: {
+              x: 100,
+              opacity: 0,
+              duration: 0.3,
+            },
+          },
+        }}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Custom Motion Drawer</DrawerHeader>
+              <DrawerBody>
+                <p>
+                  This drawer has custom enter/exit animations.
+                </p>
+                <p> 
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/drawer/form.ts

@@ -0,0 +1,115 @@
+const MailIcon = `export const MailIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+`;
+
+const LockIcon = `export const LockIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
+      fill="currentColor"
+    />
+    <path
+      d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react";
+import {MailIcon} from "./MailIcon";
+import {LockIcon} from "./LockIcon";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen} color="warning" variant="flat">
+        Open Drawer
+      </Button>
+      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
+              <DrawerBody>
+                <Input
+                  autoFocus
+                  endContent={
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Email"
+                  placeholder="Enter your email"
+                  variant="bordered"
+                />
+                <Input
+                  endContent={
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                  variant="bordered"
+                />
+                <div className="flex py-2 px-1 justify-between">
+                  <Checkbox
+                    classNames={{
+                      label: "text-small",
+                    }}
+                  >
+                    Remember me
+                  </Checkbox>
+                  <Link color="primary" href="#" size="sm">
+                    Forgot password?
+                  </Link>
+                </div>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="flat" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Sign in
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/MailIcon.jsx": MailIcon,
+  "/LockIcon.jsx": LockIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/drawer/index.ts

@@ -0,0 +1,17 @@
+import usage from "./usage";
+import sizes from "./sizes";
+import nonDismissable from "./non-dismissable";
+import placement from "./placement";
+import form from "./form";
+import backdrop from "./backdrop";
+import customMotion from "./custom-motion";
+
+export const drawerContent = {
+  usage,
+  sizes,
+  nonDismissable,
+  placement,
+  form,
+  backdrop,
+  customMotion,
+};

apps/docs/content/components/drawer/non-dismissable.ts

@@ -0,0 +1,52 @@
+const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer 
+        isOpen={isOpen} 
+        onOpenChange={onOpenChange}
+        isDismissable={false}
+        isKeyboardDismissDisabled={true}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Non Dismissable Drawer</DrawerHeader>
+              <DrawerBody>
+                <p>
+                  Click the close button or action button to close the drawer.
+                  Clicking outside or pressing the escape key won't close it.
+                </p>
+                <p> 
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/drawer/placement.ts

@@ -0,0 +1,68 @@
+const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [placement, setPlacement] = React.useState("left")
+
+  const handleOpen = (placement) => {
+    setPlacement(placement)
+    onOpen();
+  }
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        {["left", "right", "top", "bottom"].map((placement) => (
+          <Button 
+            key={placement} 
+            onPress={() => handleOpen(placement)}
+            className="capitalize"
+          >
+            Open {placement}
+          </Button>
+        ))}
+      </div>
+      <Drawer 
+        placement={placement}
+        isOpen={isOpen} 
+        onOpenChange={onOpenChange}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Drawer Title</DrawerHeader>
+              <DrawerBody>
+                <p> 
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
+                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
+                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/drawer/sizes.ts

@@ -0,0 +1,64 @@
+const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onClose} = useDisclosure();
+  const [size, setSize] = React.useState('md')
+
+  const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"];
+
+  const handleOpen = (size) => {
+    setSize(size)
+    onOpen();
+  }
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        {sizes.map((size) => (
+          <Button key={size} onPress={() => handleOpen(size)}>Open {size}</Button>
+        ))}  
+      </div>
+      <Drawer 
+        size={size} 
+        isOpen={isOpen} 
+        onClose={onClose}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Drawer Title</DrawerHeader>
+              <DrawerBody>
+                <p> 
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
+                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
+                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/drawer/usage.ts

@@ -0,0 +1,55 @@
+const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Drawer Title</DrawerHeader>
+              <DrawerBody>
+                <p> 
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
+                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
+                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
+                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
+                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/index.ts

@@ -32,3 +32,4 @@ export * from "./navbar";
 export * from "./table";
 export * from "./autocomplete";
 export * from "./alert";
+export * from "./drawer";

apps/docs/content/docs/components/drawer.mdx

@@ -0,0 +1,186 @@
+---
+title: "Drawer"
+description: "Display a panel that slides in from the edge of the screen, containing supplementary content."
+---
+
+import {drawerContent} from "@/content/components/drawer";
+
+# Drawer
+
+Displays a panel that slides in from the edge of the screen, containing supplementary content.
+
+<ComponentLinks component="drawer" reactAriaHook="useModal" />
+
+---
+
+<CarbonAd/>
+
+## Installation
+
+<PackageManagers
+  showGlobalInstallWarning
+  commands={{
+    cli: "npx nextui-cli@latest add drawer",
+    npm: "npm install @nextui-org/drawer",
+    yarn: "yarn add @nextui-org/drawer",
+    pnpm: "pnpm add @nextui-org/drawer",
+    bun: "bun add @nextui-org/drawer"
+  }}
+/>
+
+## Import
+
+NextUI exports 5 drawer-related components:
+
+- **Drawer**: The main component to display a drawer.
+- **DrawerContent**: The wrapper of the other drawer components.
+- **DrawerHeader**: The header of the drawer.
+- **DrawerBody**: The body of the drawer.
+- **DrawerFooter**: The footer of the drawer.
+
+<ImportTabs
+  commands={{
+    main: `import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter
+} from "@nextui-org/react";`,
+    individual:
+      `import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter
+} from "@nextui-org/drawer";`,
+  }}
+/>
+
+## Usage
+
+When the drawer opens:
+
+- Focus is bounded within the drawer and set to the first tabbable element.
+- Content behind a drawer is inert, meaning that users cannot interact with it.
+
+<CodeDemo title="Usage" files={drawerContent.usage} />
+
+### Sizes
+
+<CodeDemo title="Sizes" files={drawerContent.sizes} />
+
+### Non-dismissible
+
+By default, the drawer can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.
+You can disable this behavior by setting the following properties:
+
+- Set the `isDismissable` property to `false` to prevent the drawer from closing when clicking on the overlay.
+- Set the `isKeyboardDismissDisabled` property to `true` to prevent the drawer from closing when pressing the Esc key.
+
+<CodeDemo title="Non-dissmissible" files={drawerContent.nonDismissable} />
+
+### Drawer placement
+
+The drawer can be placed on any edge of the screen using the `placement` prop:
+- `left` (default)
+- `right`
+- `top`
+- `bottom`
+
+<CodeDemo title="Placement" files={drawerContent.placement} />
+
+### With Form
+
+The `Drawer` handles the focus within the drawer content. It means that you can use the drawer with
+form elements without any problem. The focus returns to the trigger when the drawer closes.
+
+<CodeDemo title="With Form" files={drawerContent.form} />
+
+> **Note**: You can add the `autoFocus` prop to the first `Input` component to focus it when the drawer opens.
+
+### Backdrop
+
+The `Drawer` component has a `backdrop` prop to show a backdrop behind the drawer. The backdrop can be
+either `transparent`, `opaque` or `blur`. The default value is `opaque`.
+
+<CodeDemo title="Backdrop" files={drawerContent.backdrop} />
+
+### Custom Motion
+
+Drawer offers a `motionProps` property to customize the `enter` / `exit` animation.
+
+<CodeDemo title="Custom Motion" files={drawerContent.customMotion} />
+
+> Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).
+
+## Slots
+
+- **wrapper**: The wrapper slot of the drawer. It wraps the `base` and the `backdrop` slots.
+- **base**: The main slot of the drawer content.
+- **backdrop**: The backdrop slot, it is displayed behind the drawer.
+- **header**: The header of the drawer, it is displayed at the top of the drawer.
+- **body**: The body of the drawer, it is displayed in the middle of the drawer.
+- **footer**: The footer of the drawer, it is displayed at the bottom of the drawer.
+- **closeButton**: The close button of the drawer.
+
+## Data Attributes
+
+`Drawer` has the following attributes on the `base` element:
+
+- **data-open**:
+  When the drawer is open. Based on drawer state.
+- **data-dismissable**:
+  When the drawer is dismissable. Based on `isDismissable` prop.
+
+<Spacer y={4} />
+
+## Accessibility
+
+- Content outside the drawer is hidden from assistive technologies while it is open.
+- The drawer optionally closes when interacting outside, or pressing the <Kbd>Esc</Kbd> key.
+- Focus is moved into the drawer on mount, and restored to the trigger element on unmount.
+- While open, focus is contained within the drawer, preventing the user from tabbing outside.
+- Scrolling the page behind the drawer is prevented while it is open, including in mobile browsers.
+
+<Spacer y={4} />
+
+## API
+
+### Drawer Props
+
+| Attribute                 | Type                                                                                                | Description                                                                                           | Default         |
+| ------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------- |
+| children\*                | `ReactNode`                                                                                         | The content of the drawer. It's usually the `DrawerContent`.                                          | -               |
+| size                      | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `4xl` \| `5xl` \| `full`                  | The drawer size.                                                                                       | `md`            |
+| radius                    | `none` \| `sm` \| `md` \| `lg`                                                                      | The drawer border radius.                                                                              | `lg`            |
+| placement                 | `left` \| `right` \| `top` \| `bottom`                                                              | The drawer position.                                                                                   | `right`         |
+| isOpen                    | `boolean`                                                                                           | Whether the drawer is open by default (controlled).                                                    | -               |
+| defaultOpen               | `boolean`                                                                                           | Whether the drawer is open by default (uncontrolled).                                                  | -               |
+| isDismissable             | `boolean`                                                                                           | Whether the drawer can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.        | `true`          |
+| isKeyboardDismissDisabled | `boolean`                                                                                           | Whether pressing the <Kbd>Esc</Kbd> key to close the drawer should be disabled.                        | `false`         |
+| shouldBlockScroll         | `boolean`                                                                                           | Whether the drawer should block the scroll of the page on open.                                        | `true`          |
+| hideCloseButton           | `boolean`                                                                                           | Whether to hide the drawer close button.                                                               | `false`         |
+| closeButton               | `ReactNode`                                                                                         | Custom close button to display on top right corner.                                                   | -               |
+| motionProps               | [MotionProps](#motion-props)                                                                        | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |                 |
+| portalContainer           | `HTMLElement`                                                                                       | The container element in which the overlay portal will be placed.                                     | `document.body` |
+| disableAnimation          | `boolean`                                                                                           | Whether the drawer should not have animations.                                                         | `false`         |
+| classNames                | `Record<"wrapper"｜ "base"｜ "backdrop"｜ "header" ｜ "body" ｜ "footer" ｜ "closeButton", string>` | Allows to set custom class names for the drawer slots.                                                 | -               |
+
+### Drawer Events
+
+| Attribute    | Type                        | Description                                                 |
+| ------------ | --------------------------- | ----------------------------------------------------------- |
+| onOpenChange | `(isOpen: boolean) => void` | Handler that is called when the drawer's open state changes. |
+| onClose      | `() => void`                | Handler that is called when the drawer is closed.            |
+
+<Spacer y={4} />
+
+### Drawer types
+
+#### Motion Props
+
+```ts
+export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
+```

packages/components/drawer/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/drawer
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/drawer
+# or
+npm i @nextui-org/drawer
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/components/drawer/__tests__/drawer.test.tsx

@@ -0,0 +1,110 @@
+import "@testing-library/jest-dom";
+import * as React from "react";
+import {render, fireEvent} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter} from "../src";
+// e.g. console.error Warning: Function components cannot be given refs.
+// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
+const spy = jest.spyOn(console, "error").mockImplementation(() => {});
+
+describe("Drawer", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render correctly", () => {
+    const wrapper = render(
+      <Drawer isOpen>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    expect(() => wrapper.unmount()).not.toThrow();
+    expect(spy).toHaveBeenCalledTimes(0);
+  });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLElement>();
+
+    render(
+      <Drawer ref={ref} isOpen>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should have the proper 'aria' attributes", () => {
+    const {getByRole, getByText} = render(
+      <Drawer isOpen>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    const drawer = getByRole("dialog");
+
+    expect(drawer).toHaveAttribute("aria-modal", "true");
+    expect(drawer).toHaveAttribute("role", "dialog");
+
+    const drawerHeader = getByText("Drawer header");
+
+    expect(drawer).toHaveAttribute("aria-labelledby", drawerHeader.id);
+
+    const drawerBody = getByText("Drawer body");
+
+    expect(drawer).toHaveAttribute("aria-describedby", drawerBody.id);
+  });
+
+  test("should fire 'onOpenChange' callback when close button is clicked", async () => {
+    const onClose = jest.fn();
+
+    const {getByLabelText} = render(
+      <Drawer isOpen onClose={onClose}>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    const closeButton = getByLabelText("Close");
+    const user = userEvent.setup();
+
+    await user.click(closeButton);
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should hide the drawer when pressing the escape key", () => {
+    const onClose = jest.fn();
+
+    const wrapper = render(
+      <Drawer isOpen onClose={onClose}>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    const drawer = wrapper.getByRole("dialog");
+
+    fireEvent.keyDown(drawer, {key: "Escape"});
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

packages/components/drawer/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@nextui-org/drawer",
+  "version": "2.0.0",
+  "description": "Used to render a content that slides in from the side of the screen.",
+  "keywords": [
+    "drawer"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/drawer"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@nextui-org/theme": ">=2.0.0",
+    "@nextui-org/system": ">=2.0.0"
+  },
+  "dependencies": {
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/framer-utils": "workspace:*",
+    "@nextui-org/modal": "workspace:*"
+  },
+  "devDependencies": {
+    "@nextui-org/theme": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/input": "workspace:*",
+    "@nextui-org/checkbox": "workspace:*",
+    "@nextui-org/button": "workspace:*",
+    "@nextui-org/link": "workspace:*",
+    "@nextui-org/switch": "workspace:*",
+    "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/use-disclosure": "workspace:*",
+    "react-lorem-component": "0.13.0",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/components/drawer/src/drawer.tsx

@@ -0,0 +1,22 @@
+import {forwardRef} from "@nextui-org/system";
+import {Modal} from "@nextui-org/modal";
+
+import {useDrawer, UseDrawerProps} from "./use-drawer";
+
+export interface DrawerProps extends UseDrawerProps {
+  children: React.ReactNode;
+}
+
+const Drawer = forwardRef<"div", DrawerProps>(({children, ...props}, ref) => {
+  const {domRef, getModalProps} = useDrawer({...props, ref});
+
+  return (
+    <Modal ref={domRef} {...getModalProps()}>
+      {children}
+    </Modal>
+  );
+});
+
+Drawer.displayName = "NextUI.Drawer";
+
+export default Drawer;

packages/components/drawer/src/index.ts

@@ -0,0 +1,20 @@
+import {ModalHeader, ModalBody, ModalFooter, ModalContent} from "@nextui-org/modal";
+
+import Drawer from "./drawer";
+
+// export types
+export type {DrawerProps} from "./drawer";
+
+// export hooks
+export {useDrawer} from "./use-drawer";
+
+// export component
+export {Drawer};
+
+// export subcomponents
+export {
+  ModalHeader as DrawerHeader,
+  ModalBody as DrawerBody,
+  ModalFooter as DrawerFooter,
+  ModalContent as DrawerContent,
+};

packages/components/drawer/src/use-drawer.ts

@@ -0,0 +1,99 @@
+import type {ModalProps} from "@nextui-org/modal";
+
+import {drawer} from "@nextui-org/theme";
+import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
+import {useCallback, useMemo} from "react";
+import {TRANSITION_EASINGS} from "@nextui-org/framer-utils";
+import {clsx} from "@nextui-org/shared-utils";
+import {PropGetter} from "@nextui-org/system";
+
+interface Props extends Omit<ModalProps, "placement" | "scrollBehavior" | "children"> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+  /**
+   * The placement of the drawer.
+   */
+  placement?: "top" | "right" | "bottom" | "left";
+  /**
+   * The scroll behavior of the drawer.
+   */
+  scrollBehavior?: "inside" | "outside";
+}
+
+export type UseDrawerProps = Props;
+
+export function useDrawer(originalProps: UseDrawerProps) {
+  const {
+    ref,
+    className,
+    classNames,
+    placement = "right",
+    scrollBehavior = "inside",
+    size = "md",
+    motionProps: drawerMotionProps,
+    ...otherProps
+  } = originalProps;
+
+  const domRef = useDOMRef(ref);
+
+  const motionProps = useMemo(() => {
+    if (drawerMotionProps !== void 0) return drawerMotionProps;
+
+    const key = placement === "left" || placement === "right" ? "x" : "y";
+
+    return {
+      variants: {
+        enter: {
+          [key]: 0,
+          transition: {
+            [key]: {
+              bounce: 0,
+              duration: 0.3,
+              ease: TRANSITION_EASINGS.ease,
+            },
+          },
+        },
+        exit: {
+          [key]: placement === "top" || placement === "left" ? "-100%" : "100%",
+          transition: {
+            [key]: {
+              bounce: 0,
+              duration: 0.6,
+              ease: TRANSITION_EASINGS.ease,
+            },
+          },
+        },
+      },
+    };
+  }, [placement, drawerMotionProps]);
+
+  const baseStyles = clsx(classNames?.base, className);
+
+  const slots = useMemo(
+    () =>
+      drawer({
+        size,
+        placement,
+      }),
+    [size, placement],
+  );
+
+  const getModalProps = useCallback<PropGetter>(() => {
+    return {
+      classNames: {
+        ...classNames,
+        base: slots.base({class: baseStyles}),
+      },
+      motionProps,
+      scrollBehavior,
+      size,
+      ...otherProps,
+    };
+  }, [baseStyles, classNames, motionProps, scrollBehavior, size, otherProps]);
+
+  return {domRef, getModalProps};
+}
+
+export type UseDrawerReturn = ReturnType<typeof useDrawer>;

packages/components/drawer/stories/drawer.stories.tsx

@@ -0,0 +1,218 @@
+/* eslint-disable jsx-a11y/no-autofocus */
+import React from "react";
+import {Meta} from "@storybook/react";
+import {drawer} from "@nextui-org/theme";
+import {Button} from "@nextui-org/button";
+import {Input} from "@nextui-org/input";
+import {Checkbox} from "@nextui-org/checkbox";
+import {Link} from "@nextui-org/link";
+import {MailFilledIcon, LockFilledIcon} from "@nextui-org/shared-icons";
+import {useDisclosure} from "@nextui-org/use-disclosure";
+
+import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerProps} from "../src";
+
+export default {
+  title: "Components/Drawer",
+  component: Drawer,
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+      },
+      options: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"],
+    },
+    placement: {
+      control: {
+        type: "select",
+      },
+      options: ["left", "right", "top", "bottom"],
+    },
+    radius: {
+      control: {
+        type: "select",
+      },
+      options: ["none", "sm", "md", "lg"],
+    },
+    backdrop: {
+      control: {
+        type: "select",
+      },
+      options: ["transparent", "blur", "opaque"],
+    },
+    disableAnimation: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isDismissable: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isKeyboardDismissDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex justify-center items-center w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof Drawer>;
+
+const defaultProps = {
+  ...drawer.defaultVariants,
+  isDismissable: true,
+  isKeyboardDismissDisabled: false,
+};
+
+const content = (
+  <DrawerContent>
+    {(onClose) => (
+      <>
+        <DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
+        <DrawerBody>
+          <Input
+            autoFocus
+            endContent={
+              <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            }
+            label="Email"
+            placeholder="Enter your email"
+            variant="bordered"
+          />
+          <Input
+            endContent={
+              <LockFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            }
+            label="Password"
+            placeholder="Enter your password"
+            type="password"
+            variant="bordered"
+          />
+          <div className="flex py-2 px-1 justify-between">
+            <Checkbox
+              classNames={{
+                label: "text-sm",
+              }}
+            >
+              Remember me
+            </Checkbox>
+            <Link color="primary" href="#" size="sm">
+              Forgot password?
+            </Link>
+          </div>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            Close
+          </Button>
+          <Button color="primary" onPress={onClose}>
+            Sign in
+          </Button>
+        </DrawerFooter>
+      </>
+    )}
+  </DrawerContent>
+);
+
+const Template = (args: DrawerProps) => {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer {...args} isOpen={isOpen} onOpenChange={onOpenChange}>
+        {content}
+      </Drawer>
+    </>
+  );
+};
+
+const PlacementTemplate = (args: DrawerProps) => {
+  const [placement, setPlacement] = React.useState<DrawerProps["placement"]>("right");
+  const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
+
+  const handlePress = (placement: DrawerProps["placement"]) => {
+    setPlacement(placement);
+    onOpen();
+  };
+
+  const placements = ["right", "left", "top", "bottom"] as DrawerProps["placement"][];
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-2 px-4">
+        {placements.map((placement) => (
+          <Button
+            key={placement}
+            color="primary"
+            variant="flat"
+            onPress={() => handlePress(placement)}
+          >
+            Open Drawer {placement}
+          </Button>
+        ))}
+      </div>
+      <Drawer {...args} isOpen={isOpen} placement={placement} onOpenChange={onOpenChange}>
+        {content}
+      </Drawer>
+    </>
+  );
+};
+
+export const Default = {
+  render: Template,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const DefaultOpen = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    defaultOpen: true,
+  },
+};
+
+export const Placement = {
+  render: PlacementTemplate,
+  args: {
+    ...defaultProps,
+    placement: "right",
+  },
+};
+
+export const DisableAnimation = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    disableAnimation: true,
+  },
+};
+
+export const CustomMotion = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    motionProps: {
+      variants: {
+        enter: {
+          opacity: 1,
+          x: 0,
+          duration: 0.3,
+        },
+        exit: {
+          x: 100,
+          opacity: 0,
+          duration: 0.3,
+        },
+      },
+    },
+  },
+};

packages/components/drawer/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}

packages/components/drawer/tsup.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});

packages/components/modal/__tests__/modal.test.tsx

@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom";
 import * as React from "react";
 import {render, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";

packages/core/react/package.json

@@ -85,6 +85,7 @@
     "@nextui-org/date-picker": "workspace:*",
     "@nextui-org/alert": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
+    "@nextui-org/drawer": "workspace:*",
     "@react-aria/visually-hidden": "3.8.15"
   },
   "peerDependencies": {

packages/core/react/src/index.ts

@@ -44,6 +44,7 @@ export * from "@nextui-org/calendar";
 export * from "@nextui-org/date-input";
 export * from "@nextui-org/date-picker";
 export * from "@nextui-org/alert";
+export * from "@nextui-org/drawer";
 
 /**
  * React Aria - Exports

packages/core/theme/src/components/alert.ts

@@ -1,6 +1,7 @@
 import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
+import {colorVariants} from "../utils";
 /**
  * Alert wrapper **Tailwind Variants** component
  *
@@ -23,57 +24,23 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4"],
-    mainWrapper: ["flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start"],
-    title: ["w-full text-medium font-normal block min-h-6 max-h-full"],
-    description: ["text-small font-normal min-h-5 max-h-full"],
-    closeButton: ["relative fill-current"],
-    alertIcon: ["fill-current"],
+    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
+    mainWrapper: [
+      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit",
+    ],
+    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
+    description: "text-small font-normal min-h-5 max-h-full text-inherit",
+    closeButton: "relative text-inherit",
+    alertIcon: "fill-current w-6",
   },
   variants: {
     color: {
-      default: {
-        base: ["bg-default-100"],
-        title: ["text-foreground"],
-        description: ["text-default-600"],
-        closeButton: ["text-default-400"],
-        alertIcon: ["text-default-foreground"],
-      },
-      primary: {
-        base: ["bg-primary-50"],
-        title: ["text-primary"],
-        description: ["text-primary"],
-        closeButton: ["text-primary-200"],
-        alertIcon: ["text-primary"],
-      },
-      secondary: {
-        base: ["bg-secondary-50"],
-        title: ["text-secondary"],
-        description: ["text-secondary-200"],
-        closeButton: ["text-secondary-200"],
-        alertIcon: ["text-secondary"],
-      },
-      success: {
-        base: ["bg-success-50"],
-        title: ["text-success"],
-        description: ["text-success-800 dark:text-success"],
-        closeButton: ["text-success-200"],
-        alertIcon: ["text-success"],
-      },
-      warning: {
-        base: ["bg-warning-50"],
-        title: ["text-warning"],
-        description: ["text-warning-800 dark:text-warning"],
-        closeButton: ["text-warning-200"],
-        alertIcon: ["text-warning"],
-      },
-      danger: {
-        base: ["bg-danger-50"],
-        title: ["text-danger"],
-        description: ["text-danger-800 dark:text-danger"],
-        closeButton: ["text-danger-200"],
-        alertIcon: ["text-danger"],
-      },
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {},
     },
     variant: {
       solid: {},
@@ -104,8 +71,8 @@ const alert = tv({
         alertIcon: "mt-0.5",
       },
       false: {
-        base: ["items-center"],
-        mainWrapper: ["justify-center"],
+        base: "items-center",
+        mainWrapper: "justify-center",
       },
     },
   },
@@ -120,10 +87,8 @@ const alert = tv({
       variant: "solid",
       color: "default",
       class: {
-        base: "bg-default",
-        title: "text-default-foreground",
-        description: "text-default-foreground",
-        closeButton: "text-default-foreground data-[hover]:bg-default-100",
+        base: colorVariants.solid.default,
+        closeButton: "data-[hover]:bg-default-100",
         alertIcon: "text-default-foreground",
       },
     },
@@ -131,55 +96,35 @@ const alert = tv({
       variant: "solid",
       color: "primary",
       class: {
-        base: "bg-primary",
-        title: "text-primary-foreground",
-        description: "text-primary-foreground",
-        closeButton: "text-primary-foreground",
-        alertIcon: "text-primary-foreground",
+        base: colorVariants.solid.primary,
       },
     },
     {
       variant: "solid",
       color: "secondary",
       class: {
-        base: "bg-secondary",
-        title: "text-secondary-foreground",
-        description: "text-secondary-foreground",
-        closeButton: "text-secondary-foreground",
-        alertIcon: "text-secondary-foreground",
+        base: colorVariants.solid.secondary,
       },
     },
     {
       variant: "solid",
       color: "success",
       class: {
-        base: "bg-success",
-        title: "text-success-foreground",
-        description: "text-success-foreground",
-        closeButton: "text-success-foreground",
-        alertIcon: "text-success-foreground",
+        base: colorVariants.solid.success,
       },
     },
     {
       variant: "solid",
       color: "warning",
       class: {
-        base: "bg-warning",
-        title: "text-warning-foreground",
-        description: "text-warning-foreground",
-        closeButton: "text-warning-foreground",
-        alertIcon: "text-warning-foreground",
+        base: colorVariants.solid.warning,
       },
     },
     {
       variant: "solid",
       color: "danger",
       class: {
-        base: "bg-danger",
-        title: "text-danger-foreground",
-        description: "text-danger-foreground",
-        closeButton: "text-danger-foreground",
-        alertIcon: "text-danger-foreground",
+        base: colorVariants.solid.danger,
       },
     },
 
@@ -188,66 +133,49 @@ const alert = tv({
       variant: "flat",
       color: "default",
       class: {
-        base: "bg-default-100",
-        title: "text-default-foreground",
+        base: [colorVariants.flat.default, "text-default-foreground"],
         description: "text-default-600",
         closeButton: "text-default-400",
-        alertIcon: "text-default-foreground",
       },
     },
     {
       variant: "flat",
       color: "primary",
       class: {
-        base: "bg-primary-50",
-        title: "text-primary",
-        description: "text-primary-600",
+        base: colorVariants.flat.primary,
         closeButton: "text-primary-400 data-[hover]:bg-primary-100",
-        alertIcon: "text-primary",
       },
     },
     {
       variant: "flat",
       color: "secondary",
       class: {
-        base: "bg-secondary-50",
-        title: "text-secondary",
-        description: "text-secondary-600",
+        base: colorVariants.flat.secondary,
         closeButton: "text-secondary-400 data-[hover]:bg-secondary-100",
-        alertIcon: "text-secondary",
       },
     },
     {
       variant: "flat",
       color: "success",
       class: {
-        base: "bg-success-50",
-        title: "text-success",
-        description: "text-success-800 dark:text-success",
+        base: colorVariants.flat.success,
         closeButton: "text-success-400 data-[hover]:bg-success-100",
-        alertIcon: "text-success",
       },
     },
     {
       variant: "flat",
       color: "warning",
       class: {
-        base: "bg-warning-50",
-        title: "text-warning",
-        description: "text-warning-800 dark:text-warning",
+        base: colorVariants.flat.warning,
         closeButton: "text-warning-500 data-[hover]:bg-warning-200",
-        alertIcon: "text-warning",
       },
     },
     {
       variant: "flat",
       color: "danger",
       class: {
-        base: "bg-danger-50",
-        title: "text-danger",
-        description: "text-danger-800 dark:text-danger",
+        base: colorVariants.flat.danger,
         closeButton: "text-danger-400 data-[hover]:bg-danger-100",
-        alertIcon: "text-danger",
       },
     },
 
@@ -256,66 +184,49 @@ const alert = tv({
       variant: "bordered",
       color: "default",
       class: {
-        base: "border-default-200",
-        title: "text-default-foreground",
+        base: [colorVariants.bordered.default],
         description: "text-default-600",
         closeButton: "text-default-400",
-        alertIcon: "text-default-foreground",
       },
     },
     {
       variant: "bordered",
       color: "primary",
       class: {
-        base: "border-primary",
-        title: "text-primary",
-        description: "text-primary-600",
-        closeButton: "text-primary-400 data-[hover]:bg-primary-50",
-        alertIcon: "text-primary",
+        base: [colorVariants.bordered.primary],
+        closeButton: "data-[hover]:bg-primary-50",
       },
     },
     {
       variant: "bordered",
       color: "secondary",
       class: {
-        base: "border-secondary",
-        title: "text-secondary",
-        description: "text-secondary-600",
-        closeButton: "text-secondary-400 data-[hover]:bg-secondary-50",
-        alertIcon: "text-secondary",
+        base: [colorVariants.bordered.secondary],
+        closeButton: "data-[hover]:bg-secondary-50",
       },
     },
     {
       variant: "bordered",
       color: "success",
       class: {
-        base: "border-success",
-        title: "text-success",
-        description: "text-success-600",
-        closeButton: "text-success-400 data-[hover]:bg-success-50",
-        alertIcon: "text-success",
+        base: [colorVariants.bordered.success],
+        closeButton: "data-[hover]:bg-success-50",
       },
     },
     {
       variant: "bordered",
       color: "warning",
       class: {
-        base: "border-warning",
-        title: "text-warning",
-        description: "text-warning-600",
-        closeButton: "text-warning-500 data-[hover]:bg-warning-100",
-        alertIcon: "text-warning",
+        base: [colorVariants.bordered.warning],
+        closeButton: "data-[hover]:bg-warning-100",
       },
     },
     {
       variant: "bordered",
       color: "danger",
       class: {
-        base: "border-danger",
-        title: "text-danger",
-        description: "text-danger-600",
-        closeButton: "text-danger-400 data-[hover]:bg-danger-50",
-        alertIcon: "text-danger",
+        base: [colorVariants.bordered.danger],
+        closeButton: "data-[hover]:bg-danger-50",
       },
     },
   ],

packages/core/theme/src/components/drawer.ts

@@ -0,0 +1,76 @@
+import {VariantProps} from "tailwind-variants";
+
+import {tv} from "../utils/tv";
+
+/**
+ * Modal **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base} = drawer({...})
+ *
+ * <div>
+ *    <button>Open Drawer</button>
+ *    <div className={base()}>
+ *       Drawer Content
+ *    </div>
+ * </div>
+ * ```
+ */
+const drawer = tv({
+  slots: {
+    base: ["absolute", "m-0", "sm:m-0", "overflow-y-auto"],
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "max-w-xs max-h-[20rem]",
+      },
+      sm: {
+        base: "max-w-sm max-h-[24rem]",
+      },
+      md: {
+        base: "max-w-md max-h-[28rem]",
+      },
+      lg: {
+        base: "max-w-lg max-h-[32rem]",
+      },
+      xl: {
+        base: "max-w-xl max-h-[36rem]",
+      },
+      "2xl": {
+        base: "max-w-2xl max-h-[42rem]",
+      },
+      "3xl": {
+        base: "max-w-3xl max-h-[48rem]",
+      },
+      "4xl": {
+        base: "max-w-4xl max-h-[56rem]",
+      },
+      "5xl": {
+        base: "max-w-5xl max-h-[64rem]",
+      },
+      full: {
+        base: "max-w-full max-h-full h-[100dvh] !rounded-none",
+      },
+    },
+    placement: {
+      top: {
+        base: "inset-x-0 top-0 max-w-[none] rounded-t-none",
+      },
+      right: {
+        base: "inset-y-0 right-0 max-h-[none] rounded-r-none",
+      },
+      bottom: {
+        base: "inset-x-0 bottom-0 max-w-[none] rounded-b-none",
+      },
+      left: {
+        base: "inset-y-0 left-0 max-h-[none] rounded-l-none",
+      },
+    },
+  },
+});
+
+export type DrawerVariants = VariantProps<typeof drawer>;
+
+export {drawer};

packages/core/theme/src/components/index.ts

@@ -39,3 +39,4 @@ export * from "./calendar";
 export * from "./date-input";
 export * from "./date-picker";
 export * from "./alert";
+export * from "./drawer";

packages/core/theme/src/utils/variants.ts

@@ -30,11 +30,11 @@ const bordered = {
 
 const flat = {
   default: "bg-default/40 text-default-700",
-  primary: "bg-primary/20 text-primary-700",
-  secondary: "bg-secondary/20 text-secondary-700",
-  success: "bg-success/20 text-success-800 dark:text-success",
-  warning: "bg-warning/20 text-warning-800 dark:text-warning",
-  danger: "bg-danger/20 text-danger-800 dark:text-danger-500",
+  primary: "bg-primary/20 text-primary-600",
+  secondary: "bg-secondary/20 text-secondary-600",
+  success: "bg-success/20 text-success-700 dark:text-success",
+  warning: "bg-warning/20 text-warning-700 dark:text-warning",
+  danger: "bg-danger/20 text-danger-600 dark:text-danger-500",
   foreground: "bg-foreground/10 text-foreground",
 };
 

pnpm-lock.yaml

@@ -1454,6 +1454,61 @@ importers:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
 
+  packages/components/drawer:
+    dependencies:
+      '@nextui-org/framer-utils':
+        specifier: workspace:*
+        version: link:../../utilities/framer-utils
+      '@nextui-org/modal':
+        specifier: workspace:*
+        version: link:../modal
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+    devDependencies:
+      '@nextui-org/button':
+        specifier: workspace:*
+        version: link:../button
+      '@nextui-org/checkbox':
+        specifier: workspace:*
+        version: link:../checkbox
+      '@nextui-org/input':
+        specifier: workspace:*
+        version: link:../input
+      '@nextui-org/link':
+        specifier: workspace:*
+        version: link:../link
+      '@nextui-org/shared-icons':
+        specifier: workspace:*
+        version: link:../../utilities/shared-icons
+      '@nextui-org/switch':
+        specifier: workspace:*
+        version: link:../switch
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      '@nextui-org/use-disclosure':
+        specifier: workspace:*
+        version: link:../../hooks/use-disclosure
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)
+      react-lorem-component:
+        specifier: 0.13.0
+        version: 0.13.0(react@18.3.1)
+
   packages/components/dropdown:
     dependencies:
       '@nextui-org/aria-utils':
@@ -2913,6 +2968,9 @@ importers:
       '@nextui-org/divider':
         specifier: workspace:*
         version: link:../../components/divider
+      '@nextui-org/drawer':
+        specifier: workspace:*
+        version: link:../../components/drawer
       '@nextui-org/dropdown':
         specifier: workspace:*
         version: link:../../components/dropdown
@@ -7931,7 +7989,7 @@ packages:
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
-      eslint: 8.57.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
 
   '@typescript-eslint/visitor-keys@3.10.1':
     resolution: {integrity: sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==}
@@ -18187,17 +18245,16 @@ snapshots:
 
   '@opentelemetry/semantic-conventions@1.27.0': {}
 
-  '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
       '@parcel/graph': 3.2.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
     dependencies:
@@ -18213,47 +18270,46 @@ snapshots:
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/config-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)(postcss@8.4.47)(terser@5.36.0)(typescript@4.9.5)':
     dependencies:
-      '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/core': 2.12.0(@swc/helpers@0.5.13)
-      '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)(postcss@8.4.47)(terser@5.36.0)(typescript@4.9.5)
-      '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(postcss@8.4.47)(terser@5.36.0)(typescript@4.9.5)
+      '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/optimizer-swc': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/transformer-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
-      '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
     transitivePeerDependencies:
       - '@swc/helpers'
       - cssnano
@@ -18275,13 +18331,13 @@ snapshots:
       '@parcel/graph': 3.2.0
       '@parcel/logger': 2.12.0
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/profiler': 2.12.0
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       abortcontroller-polyfill: 1.7.5
       base-x: 3.0.10
       browserslist: 4.24.2
@@ -18309,7 +18365,7 @@ snapshots:
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/utils': 2.12.0
       '@parcel/watcher': 2.5.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -18326,14 +18382,13 @@ snapshots:
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/node-resolver-core@3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
@@ -18347,10 +18402,10 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.24.2
@@ -18358,18 +18413,16 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)(postcss@8.4.47)(terser@5.36.0)(typescript@4.9.5)':
+  '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(postcss@8.4.47)(terser@5.36.0)(typescript@4.9.5)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       htmlnano: 2.1.1(postcss@8.4.47)(svgo@2.8.0)(terser@5.36.0)(typescript@4.9.5)
       nullthrows: 1.1.1
       posthtml: 0.16.6
       svgo: 2.8.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
       - cssnano
       - postcss
       - purgecss
@@ -18379,31 +18432,28 @@ snapshots:
       - typescript
       - uncss
 
-  '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.13)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-    transitivePeerDependencies:
-      - '@swc/helpers'
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
 
-  '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       svgo: 2.8.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/optimizer-swc@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       '@swc/core': 1.8.0(@swc/helpers@0.5.13)
@@ -18421,39 +18471,37 @@ snapshots:
       '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@swc/core': 1.8.0(@swc/helpers@0.5.13)
       semver: 7.6.3
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       lightningcss: 1.28.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
@@ -18462,38 +18510,33 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/utils': 2.12.0
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/profiler@2.12.0':
     dependencies:
@@ -18501,79 +18544,71 @@ snapshots:
       '@parcel/events': 2.12.0
       chrome-trace-event: 1.0.4
 
-  '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/utils': 2.12.0
       chalk: 4.1.2
       term-size: 2.2.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       chrome-trace-event: 1.0.4
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       react-error-overlay: 6.0.9
       react-refresh: 0.9.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/rust@2.12.0': {}
 
@@ -18581,10 +18616,10 @@ snapshots:
     dependencies:
       detect-libc: 1.0.3
 
-  '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.24.2
@@ -18593,12 +18628,11 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.24.2
@@ -18606,12 +18640,11 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/rust': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -18621,45 +18654,41 @@ snapshots:
       srcset: 4.0.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.13)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       nullthrows: 1.1.1
-    transitivePeerDependencies:
-      - '@swc/helpers'
 
   '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.13)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@swc/helpers': 0.5.13
       browserslist: 4.24.2
       nullthrows: 1.1.1
       regenerator-runtime: 0.13.11
       semver: 7.6.3
 
-  '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       json5: 2.2.3
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       clone: 2.1.2
@@ -18668,11 +18697,10 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -18681,28 +18709,25 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       react-refresh: 0.9.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/rust': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -18711,7 +18736,6 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
     dependencies:
@@ -18720,7 +18744,7 @@ snapshots:
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/source-map': 2.1.1
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       utility-types: 3.11.0
     transitivePeerDependencies:
       - '@parcel/core'
@@ -18797,7 +18821,7 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.0
       '@parcel/watcher-win32-x64': 2.5.0
 
-  '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)':
+  '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.13)
       '@parcel/diagnostic': 2.12.0
@@ -18806,8 +18830,6 @@ snapshots:
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
-    transitivePeerDependencies:
-      - '@swc/helpers'
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
@@ -28265,9 +28287,9 @@ snapshots:
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
       '@parcel/logger': 2.12.0
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
-      '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)
+      '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
+      '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))
       '@parcel/utils': 2.12.0
       chalk: 4.1.2
       commander: 7.2.0