diff --git a/.changeset/shaggy-beers-breathe.md b/.changeset/shaggy-beers-breathe.md
new file mode 100644
index 0000000000..2b643c4369
--- /dev/null
+++ b/.changeset/shaggy-beers-breathe.md
@@ -0,0 +1,7 @@
+---
+"@heroui/shared-icons": patch
+"@heroui/toast": patch
+"@heroui/theme": patch
+---
+
+Introducing the toast component(#2560)
diff --git a/apps/docs/components/scripts/script-providers.tsx b/apps/docs/components/scripts/script-providers.tsx
index 1a399abb1e..5b8f34a868 100644
--- a/apps/docs/components/scripts/script-providers.tsx
+++ b/apps/docs/components/scripts/script-providers.tsx
@@ -9,6 +9,7 @@ export function ScriptProviders({isKapaEnabled = true}: {isKapaEnabled?: boolean
     <>
       <Script
         defer
+        data-button-position-left="20px"
         data-modal-disclaimer="This is a custom LLM for HeroUI with access to all developer docs (heroui.com/docs) and GitHub Issues and PRs (github.com/heroui-inc/heroui)."
         data-modal-example-questions="How do I install for Next.js?,How do I customize primary color?"
         data-project-color="#000000"
diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
index f77a04ef03..32ae712b6d 100644
--- a/apps/docs/config/routes.json
+++ b/apps/docs/config/routes.json
@@ -437,7 +437,7 @@
           "title": "Toast",
           "keywords": "toast, notification, message",
           "path": "/docs/components/toast.mdx",
-          "comingSoon": true
+          "newPost": true
         },
         {
           "key": "textarea",
diff --git a/apps/docs/content/components/toast/color.raw.jsx b/apps/docs/content/components/toast/color.raw.jsx
new file mode 100644
index 0000000000..32c6c8ddaa
--- /dev/null
+++ b/apps/docs/content/components/toast/color.raw.jsx
@@ -0,0 +1,24 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+        <Button
+          key={color}
+          color={color}
+          variant={"flat"}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              color: color,
+            })
+          }
+        >
+          {color}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/toast/color.ts b/apps/docs/content/components/toast/color.ts
new file mode 100644
index 0000000000..6c2d8d6af9
--- /dev/null
+++ b/apps/docs/content/components/toast/color.ts
@@ -0,0 +1,9 @@
+import App from "./color.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/toast/custom-close-icon.raw.jsx b/apps/docs/content/components/toast/custom-close-icon.raw.jsx
new file mode 100644
index 0000000000..496a944e63
--- /dev/null
+++ b/apps/docs/content/components/toast/custom-close-icon.raw.jsx
@@ -0,0 +1,44 @@
+import {addToast, Button} from "@heroui/react";
+
+const CustomToastComponent = () => {
+  return (
+    <Button
+      variant="flat"
+      onPress={() => {
+        addToast({
+          hideIcon: true,
+          title: "Toast Title",
+          description: "Toast Description",
+          classNames: {
+            closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
+          },
+          closeIcon: (
+            <svg
+              fill="none"
+              height="32"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              width="32"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          ),
+        });
+      }}
+    >
+      Show Toast
+    </Button>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <CustomToastComponent />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/toast/custom-close-icon.ts b/apps/docs/content/components/toast/custom-close-icon.ts
new file mode 100644
index 0000000000..ea4122cd0b
--- /dev/null
+++ b/apps/docs/content/components/toast/custom-close-icon.ts
@@ -0,0 +1,9 @@
+import App from "./custom-close-icon.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/toast/custom-styles.raw.jsx b/apps/docs/content/components/toast/custom-styles.raw.jsx
new file mode 100644
index 0000000000..9234037df1
--- /dev/null
+++ b/apps/docs/content/components/toast/custom-styles.raw.jsx
@@ -0,0 +1,50 @@
+import {addToast, Button, cn} from "@heroui/react";
+
+const CustomToastComponent = () => {
+  return (
+    <Button
+      variant="flat"
+      onPress={() => {
+        addToast({
+          title: "Successfull!",
+          description: "Document uploaded to cloud successfully.",
+          classNames: {
+            base: cn([
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              "min-w-[350px]",
+              "rounded-md",
+              "flex flex-col items-start",
+              "before:bg-primary border-primary-200 dark:border-primary-100",
+            ]),
+            icon: "w-6 h-6 fill-current",
+          },
+          endContent: (
+            <div className="ms-11 my-2 flex gap-x-2">
+              <Button color={"primary"} size="sm" variant="bordered">
+                View Document
+              </Button>
+              <Button className="underline-offset-2" color={"primary"} size="sm" variant="light">
+                Maybe Later
+              </Button>
+            </div>
+          ),
+          color: "primary",
+        });
+      }}
+    >
+      Show Toast
+    </Button>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <CustomToastComponent />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/toast/custom-styles.ts b/apps/docs/content/components/toast/custom-styles.ts
new file mode 100644
index 0000000000..da3ea9093a
--- /dev/null
+++ b/apps/docs/content/components/toast/custom-styles.ts
@@ -0,0 +1,9 @@
+import App from "./custom-styles.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/toast/index.ts b/apps/docs/content/components/toast/index.ts
new file mode 100644
index 0000000000..c884ac0ac2
--- /dev/null
+++ b/apps/docs/content/components/toast/index.ts
@@ -0,0 +1,17 @@
+import color from "./color";
+import variants from "./variants";
+import customStyles from "./custom-styles";
+import radius from "./radius";
+import placement from "./placement";
+import usage from "./usage";
+import customCloseIcon from "./custom-close-icon";
+
+export const toastContent = {
+  color,
+  variants,
+  customStyles,
+  radius,
+  placement,
+  usage,
+  customCloseIcon,
+};
diff --git a/apps/docs/content/components/toast/placement.raw.jsx b/apps/docs/content/components/toast/placement.raw.jsx
new file mode 100644
index 0000000000..a7ab53233d
--- /dev/null
+++ b/apps/docs/content/components/toast/placement.raw.jsx
@@ -0,0 +1,36 @@
+import {addToast, Button, ToastProvider} from "@heroui/react";
+import React from "react";
+
+export default function App() {
+  const [placement, setPlacement] = React.useState("right-bottom");
+
+  return (
+    <>
+      <ToastProvider placement={placement} toastOffset={placement.includes("top") ? 60 : 0} />
+      <div className="flex flex-wrap gap-2">
+        {[
+          "left-top",
+          "right-top",
+          "center-top",
+          "left-bottom",
+          "right-bottom",
+          "center-bottom",
+        ].map((position) => (
+          <Button
+            key={position}
+            variant={"flat"}
+            onPress={() => {
+              setPlacement(position);
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+              });
+            }}
+          >
+            {position}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/toast/placement.ts b/apps/docs/content/components/toast/placement.ts
new file mode 100644
index 0000000000..eee2244366
--- /dev/null
+++ b/apps/docs/content/components/toast/placement.ts
@@ -0,0 +1,9 @@
+import App from "./placement.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/toast/radius.raw.jsx b/apps/docs/content/components/toast/radius.raw.jsx
new file mode 100644
index 0000000000..1414cfb235
--- /dev/null
+++ b/apps/docs/content/components/toast/radius.raw.jsx
@@ -0,0 +1,24 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {["none", "sm", "md", "lg", "full"].map((radius) => (
+        <Button
+          key={radius}
+          radius={radius}
+          variant={"flat"}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              radius: radius,
+            })
+          }
+        >
+          {radius}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/toast/radius.ts b/apps/docs/content/components/toast/radius.ts
new file mode 100644
index 0000000000..7b78db1ce0
--- /dev/null
+++ b/apps/docs/content/components/toast/radius.ts
@@ -0,0 +1,9 @@
+import App from "./radius.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/toast/usage.raw.jsx b/apps/docs/content/components/toast/usage.raw.jsx
new file mode 100644
index 0000000000..f439af4c62
--- /dev/null
+++ b/apps/docs/content/components/toast/usage.raw.jsx
@@ -0,0 +1,117 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+          });
+        }}
+      >
+        Default
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+          });
+        }}
+      >
+        With Description
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            hideIcon: true,
+          });
+        }}
+      >
+        Hidden Icon
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            promise: new Promise((resolve) => setTimeout(resolve, 3000)),
+          });
+        }}
+      >
+        Promise (3000ms)
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            endContent: (
+              <Button size="sm" variant="flat">
+                Upgrade
+              </Button>
+            ),
+          });
+        }}
+      >
+        With endContent
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            timeout: 3000,
+            shouldShowTimeoutProgess: true,
+          });
+        }}
+      >
+        Show Timeout Progress (3000ms)
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() =>
+          addToast({
+            title: "Toast title",
+            description: "Toast displayed successfully",
+            icon: (
+              <svg height={24} viewBox="0 0 24 24" width={24}>
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeMiterlimit={10}
+                  strokeWidth={1.5}
+                >
+                  <path
+                    d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+                    data-name="Stroke 1"
+                  />
+                  <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+                </g>
+              </svg>
+            ),
+          })
+        }
+      >
+        Custom Icon
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/toast/usage.ts b/apps/docs/content/components/toast/usage.ts
new file mode 100644
index 0000000000..1118304c37
--- /dev/null
+++ b/apps/docs/content/components/toast/usage.ts
@@ -0,0 +1,9 @@
+import App from "./usage.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/toast/variants.raw.jsx b/apps/docs/content/components/toast/variants.raw.jsx
new file mode 100644
index 0000000000..7d4d5b9d8d
--- /dev/null
+++ b/apps/docs/content/components/toast/variants.raw.jsx
@@ -0,0 +1,30 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {[
+        ["solid", "solid"],
+        ["bordered", "bordered"],
+        ["flat", "faded"],
+      ].map((variant) => (
+        <Button
+          key={variant[0]}
+          // @ts-ignore
+          variant={variant[1]}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              // @ts-ignore
+              variant: variant[0],
+              color: "secondary",
+            })
+          }
+        >
+          {variant[0]}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/toast/variants.ts b/apps/docs/content/components/toast/variants.ts
new file mode 100644
index 0000000000..ddea95fb2e
--- /dev/null
+++ b/apps/docs/content/components/toast/variants.ts
@@ -0,0 +1,9 @@
+import App from "./variants.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx
new file mode 100644
index 0000000000..d7a1c27fea
--- /dev/null
+++ b/apps/docs/content/docs/components/toast.mdx
@@ -0,0 +1,343 @@
+---
+title: "Toast"
+description: "Toast are temporary notifications that provide concise feedback about an action or event."
+---
+
+import {toastContent} from "@/content/components/toast";
+
+# Toast
+
+Toasts are temporary notifications that provide concise feedback about an action or event.
+
+<ComponentLinks component="toast" />
+
+---
+
+<CarbonAd />
+
+## Installation
+
+<PackageManagers
+  showGlobalInstallWarning
+  commands={{
+    cli: "npx heroui-cli@latest add toast",
+    npm: "npm install @heroui/toast",
+    yarn: "yarn add @heroui/toast",
+    pnpm: "pnpm add @heroui/toast",
+    bun: "bun add @heroui/toast",
+  }}
+/>
+
+## Import
+
+<ImportTabs
+  commands={{
+    main: 'import {addToast, ToastProvider} from "@heroui/react";',
+    individual: 'import {addToast, ToastProvider} from "@heroui/toast";',
+  }}
+/>
+
+## Requirement
+
+The `ToastProvider` must be added to the application before using the `addToast` function. This is required to initialize the context for managing toasts.
+
+```jsx {4,9}
+// app/providers.tsx
+
+import {HeroUIProvider} from '@heroui/react'
+import {ToastProvider} from "@heroui/toast";
+
+export default function Providers({children}) {
+  return (
+    <HeroUIProvider>
+      <ToastProvider />
+      {children}
+    </HeroUIProvider>
+  )
+}
+```
+
+<Spacer y={4} />
+
+```jsx {3,9,11}
+// app/layout.tsx
+
+import {Providers} from "./providers";
+
+export default function RootLayout({children}) {
+  return (
+    <html lang="en" className='dark'>
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
+```
+
+
+### Usage
+
+<CodeDemo title="Usage" files={toastContent.usage} />
+
+### Colors
+
+Toast comes with 6 color variants to convey different meanings.
+
+<CodeDemo title="Color" files={toastContent.color} />
+
+### Variants
+
+<CodeDemo
+  title="Variants"
+  files={toastContent.variants}
+/>
+
+### Radius
+
+<CodeDemo
+  title="Radius"
+  files={toastContent.radius}
+/>
+
+### Toast Placement
+
+<CodeDemo
+  title="Placement"
+  files={toastContent.placement}
+/>
+
+### Custom Styles
+
+You can customize the alert by passing custom Tailwind CSS classes to the component slots.
+
+<CodeDemo
+  title="Custom Style"
+  files={toastContent.customStyles}
+/>
+
+### Custom Close Icon
+
+You can pass a custom close icon to the toast by passing the `closeIcon` prop and a custom class name to the `closeButton` slot.
+
+<CodeDemo
+  title="Custom Close Icon"
+  files={toastContent.customCloseIcon}
+/>
+
+### Global Toast Props
+
+You can pass global toast props to the `ToastProvider` to apply to all toasts.
+
+```jsx
+<ToastProvider 
+  toastProps={{
+    radius: "full",
+    color: "primary",
+    variant: "flat",
+    timeout: 1000,
+    hideIcon: true,
+    classNames: {
+      closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
+    },
+  }} 
+/>
+```
+
+<Spacer y={4} />
+
+## Data Attributes
+
+Toast has the following attributes on the `base` element:
+
+- **data-has-title**: When the toast has a title
+- **data-has-description**: When the toast has a description
+- **data-animation**: Shows the current animation of toast ("entering", "queued", "exiting", "undefined")
+- **data-placement**: Where the toast is placed on the view-port.
+- **data-drag-value**: Value by which the toast is dragged from it's original position. (This remains "0" in case of disabledAnimation)
+
+<Spacer y={4} />
+
+### Slots
+
+Toast has the following slots:
+
+- `base`: The main toast container element
+- `title`: The title element
+- `description`: The description element
+- `icon`: The icon element
+- `loadingIcon`: The icon to be displayed until `promise` is resolved/rejected.
+- `content`: The wrapper for the title, description and icon content.
+- `motionDiv`: The motion.div for the FramerMotion.
+- `progressTrack`: The track of the progressBar.
+- `progressIndicator`: The indicator of the progressBar.
+- `closeButton`: The close button element
+- `closeIcon`: The icon which resides in the close button.
+
+
+## Accessibility
+
+- Toast has role of `alert`
+- All Toasts are present in ToastRegion.
+- Close button has aria-label="Close" by default
+- When no toast are present, ToastRegion is removed from the DOM
+
+<Spacer y={4} />
+
+## API
+
+### Toast Props
+
+<APITable
+  data={[
+    {
+      attribute: "title",
+      type: "ReactNode",
+      description: "The alert title",
+      default: "-"
+    },
+    {
+      attribute: "icon", 
+      type: "ReactNode",
+      description: "The alert icon - overrides the default icon",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode", 
+      description: "The alert description",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The alert color theme",
+      default: "default"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | flat",
+      description: "The alert variant",
+      default: "flat"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The alert border radius",
+      default: "md"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The alert end content", 
+      default: "-"
+    },
+    {
+      attribute: "closeIcon",
+      type: "ReactNode",
+      description: "The close icon for the toast - overrides the default close icon",
+      default: "-"
+    },
+    {
+      attribute: "timeout",
+      type: "number",
+      description: "Time in milliseconds after which the toast will be closed", 
+      default: "6000"
+    },
+    {
+      attribute: "promise",
+      type: "Promise | undefined",
+      description: "Promise based on which the notification will be styled",
+      default: "undefined"
+    },
+    {
+      attribute: "loadingIcon", 
+      type: "ReactNode",
+      description: "The loading icon for toasts with promise prop - overrides the default loading icon",
+      default: "-"
+    },
+    {
+      attribute: "priority",
+      type: "number | undefined",
+      description: "Priority at which the toast will be displayed",
+      default: "undefined",
+    },
+    {
+      attribute: "hideIcon",
+      type: "boolean",
+      description: "Hides icon when true",
+      default: "false"
+    },
+    {
+      attribute: "hideCloseButton",
+      type: "boolean",
+      description: "Hides closeButton when true",
+      default: "false"
+    },
+    {
+      attribute: "shouldShowTimeoutProgress",
+      type: "boolean",
+      description: "Whether to indicate the timeout progress or not",
+      default: "false",
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"content\" | \"title\" | \"description\" | \"icon\" | \"loadingIcon\" | \"progressTrack\" | \"progressIndicator\ | \"motionDiv\" | \"closeButton\" | \"closeIcon\", string>>",
+      description: "Allows to set custom class names for the toast slots.",
+      default: "-"
+    }
+  ]}
+/>
+
+### ToastProvider Props
+
+<APITable
+  data={[
+    {
+      attribute: "maxVisibleToasts",
+      type: "number",
+      description: "Maximum toasts which will be visible",
+      default: "5"
+    },
+    {
+      attribute: "placement", 
+      type: "right-bottom" | "left-bottom" | "center-bottom" | "right-top" | "left-top" | "center-top",
+      description: "The placement of the toast.",
+      default: "right-bottom"
+    },
+    {
+      attribute: "disableAnimation", 
+      type: "boolean",
+      description: "Disables the animation.",
+      default: "false"
+    },
+    {
+      attribute: "toastOffset",
+      type: "number",
+      description: "offset distance from the top or bottom",
+      default: "0"
+    },
+    {
+      attribute: "toastProps",
+      type: "ToastProps",
+      description: "Props to be passed to all toasts",
+      default: "-"
+    },
+  ]}
+/>
+
+
+### Toast Events
+
+<APITable
+  data={[
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler called when the close button is clicked",
+      default: "-"
+    }
+  ]}
+/>
\ No newline at end of file
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index 9668d14742..8f3748517e 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -69,6 +69,9 @@ module.exports = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      spacing: {
+        'toast-gap': 'var(--toast-gap)',
+      },
       typography: (theme) => ({
         DEFAULT: {
           css: {
diff --git a/packages/components/toast/README.md b/packages/components/toast/README.md
new file mode 100644
index 0000000000..a1e2fee852
--- /dev/null
+++ b/packages/components/toast/README.md
@@ -0,0 +1,22 @@
+# @heroui/toast
+
+Toast Component helps to provide feedback on user-actions.
+
+## Installation
+
+```sh
+yarn add @heroui/toast
+# or
+npm i @heroui/toast
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/canary/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/canary/LICENSE).
diff --git a/packages/components/toast/__tests__/toast.test.tsx b/packages/components/toast/__tests__/toast.test.tsx
new file mode 100644
index 0000000000..613a9db712
--- /dev/null
+++ b/packages/components/toast/__tests__/toast.test.tsx
@@ -0,0 +1,177 @@
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
+
+import {addToast, ToastProvider} from "../src";
+
+const title = "Testing Title";
+const description = "Testing Description";
+
+describe("Toast", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  it("should render correctly", () => {
+    const wrapper = render(
+      <>
+        <ToastProvider />
+        <button
+          onClick={() => {
+            addToast({
+              title: "toast title",
+              description: "toast description",
+            });
+          }}
+        >
+          Show Toast
+        </button>
+      </>,
+    );
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("ref should be forwarded", async () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    const wrapper = render(
+      <>
+        <ToastProvider />
+        <button
+          data-testid="button"
+          onClick={() => {
+            addToast({
+              title: "toast title",
+              description: "toast description",
+              ref: ref,
+            });
+          }}
+        >
+          Show Toast
+        </button>
+      </>,
+    );
+
+    const button = wrapper.getByTestId("button");
+
+    await user.click(button);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should display title and description when component is rendered", async () => {
+    const wrapper = render(
+      <>
+        <ToastProvider />
+        <button
+          data-testid="button"
+          onClick={() => {
+            addToast({
+              title: title,
+              description: description,
+            });
+          }}
+        >
+          Show Toast
+        </button>
+      </>,
+    );
+
+    const button = wrapper.getByTestId("button");
+
+    await user.click(button);
+
+    const region = screen.getByRole("region");
+
+    expect(region).toContainHTML(title);
+    expect(region).toContainHTML(description);
+
+    await user.click(wrapper.getAllByRole("button")[0]);
+  });
+
+  it("should close", async () => {
+    const wrapper = render(
+      <>
+        <ToastProvider />
+        <button
+          data-testid="button"
+          onClick={() => {
+            addToast({
+              title: title,
+              description: description,
+            });
+          }}
+        >
+          Show Toast
+        </button>
+      </>,
+    );
+
+    const button = wrapper.getByTestId("button");
+
+    await user.click(button);
+
+    const initialCloseButtons = wrapper.getAllByRole("button");
+    const initialButtonLength = initialCloseButtons.length;
+
+    await user.click(initialCloseButtons[0]);
+
+    const finalCloseButtons = wrapper.getAllByRole("button");
+    const finalButtonLength = finalCloseButtons.length;
+
+    expect(initialButtonLength).toEqual(finalButtonLength + 1);
+  });
+
+  it("should work with placement", async () => {
+    const wrapper = render(
+      <>
+        <ToastProvider placement="left-bottom" />
+        <button
+          data-testid="button"
+          onClick={() => {
+            addToast({
+              title: title,
+              description: description,
+            });
+          }}
+        >
+          Show Toast
+        </button>
+      </>,
+    );
+
+    const region = wrapper.getByRole("region");
+
+    expect(region).toHaveAttribute("data-placement", "left-bottom");
+  });
+
+  it("should have loading-icon when promise prop is passed.", async () => {
+    const wrapper = render(
+      <>
+        <ToastProvider />
+        <button
+          data-testid="button"
+          onClick={() => {
+            addToast({
+              title: title,
+              description: description,
+              promise: new Promise((resolve) => setTimeout(resolve, 3000)),
+            });
+          }}
+        >
+          Show Toast
+        </button>
+      </>,
+    );
+
+    const button = wrapper.getByTestId("button");
+
+    await user.click(button);
+
+    const loadingIcon = wrapper.getByLabelText("loadingIcon");
+
+    expect(loadingIcon).toBeTruthy();
+  });
+});
diff --git a/packages/components/toast/package.json b/packages/components/toast/package.json
new file mode 100644
index 0000000000..bb8cf0898d
--- /dev/null
+++ b/packages/components/toast/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@heroui/toast",
+  "version": "2.0.0",
+  "description": "Toast are temporary notifications that provide concise feedback about an action or event",
+  "keywords": [
+    "toast"
+  ],
+  "author": "HeroUI <support@heroui.com>",
+  "homepage": "https://heroui.com",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heroui-inc/heroui.git",
+    "directory": "packages/components/toast"
+  },
+  "bugs": {
+    "url": "https://github.com/heroui-inc/heroui/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": {
+    "@heroui/system": ">=2.4.8",
+    "@heroui/theme": ">=2.4.7",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1"
+  },
+  "dependencies": {
+    "@heroui/react-utils": "workspace:*",
+    "@heroui/shared-utils": "workspace:*",
+    "@heroui/shared-icons": "workspace:*",
+    "@heroui/use-is-mobile": "workspace:*",
+    "@heroui/spinner": "workspace:*",
+    "@react-aria/toast": "3.0.0-beta.19",
+    "@react-aria/utils": "3.27.0",
+    "@react-aria/interactions": "3.23.0",
+    "@react-stately/toast": "3.0.0-beta.7",
+    "@react-stately/utils": "3.10.5"
+  },
+  "devDependencies": {
+    "@heroui/system": "workspace:*",
+    "@heroui/theme": "workspace:*",
+    "@heroui/button": "workspace:*",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
diff --git a/packages/components/toast/src/index.ts b/packages/components/toast/src/index.ts
new file mode 100644
index 0000000000..25f2660b91
--- /dev/null
+++ b/packages/components/toast/src/index.ts
@@ -0,0 +1,14 @@
+import Toast from "./toast";
+import {ToastProvider} from "./toast-provider";
+
+// export types
+export type {ToastProps} from "./toast";
+
+// export hooks
+export {useToast} from "./use-toast";
+export {addToast} from "./toast-provider";
+export {closeAll} from "./toast-provider";
+
+// export component
+export {Toast};
+export {ToastProvider};
diff --git a/packages/components/toast/src/toast-provider.tsx b/packages/components/toast/src/toast-provider.tsx
new file mode 100644
index 0000000000..c871da2e89
--- /dev/null
+++ b/packages/components/toast/src/toast-provider.tsx
@@ -0,0 +1,83 @@
+import {ToastOptions, ToastQueue, useToastQueue} from "@react-stately/toast";
+import {useProviderContext} from "@heroui/system";
+
+import {ToastRegion} from "./toast-region";
+import {ToastProps} from "./use-toast";
+
+let globalToastQueue: ToastQueue<ToastProps> | null = null;
+
+interface ToastProviderProps {
+  maxVisibleToasts?: number;
+  placement?:
+    | "right-bottom"
+    | "left-bottom"
+    | "center-bottom"
+    | "right-top"
+    | "left-top"
+    | "center-top";
+  disableAnimation?: boolean;
+  toastProps?: ToastProps;
+  toastOffset?: number;
+}
+
+export const getToastQueue = () => {
+  if (!globalToastQueue) {
+    globalToastQueue = new ToastQueue({
+      maxVisibleToasts: Infinity,
+      hasExitAnimation: true,
+    });
+  }
+
+  return globalToastQueue;
+};
+
+export const ToastProvider = ({
+  placement = "right-bottom",
+  disableAnimation: disableAnimationProp = false,
+  maxVisibleToasts = 3,
+  toastOffset = 0,
+  toastProps = {},
+}: ToastProviderProps) => {
+  const toastQueue = useToastQueue(getToastQueue());
+  const globalContext = useProviderContext();
+  const disableAnimation = disableAnimationProp ?? globalContext?.disableAnimation ?? false;
+
+  if (toastQueue.visibleToasts.length == 0) {
+    return null;
+  }
+
+  return (
+    <ToastRegion
+      disableAnimation={disableAnimation}
+      maxVisibleToasts={maxVisibleToasts}
+      placement={placement}
+      toastOffset={toastOffset}
+      toastProps={toastProps}
+      toastQueue={toastQueue}
+    />
+  );
+};
+
+export const addToast = ({...props}: ToastProps & ToastOptions) => {
+  if (!globalToastQueue) {
+    return;
+  }
+
+  const options: Partial<ToastOptions> = {
+    priority: props?.priority,
+  };
+
+  globalToastQueue.add(props, options);
+};
+
+export const closeAll = () => {
+  if (!globalToastQueue) {
+    return;
+  }
+
+  const keys = globalToastQueue.visibleToasts.map((toast) => toast.key);
+
+  keys.map((key) => {
+    globalToastQueue?.close(key);
+  });
+};
diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx
new file mode 100644
index 0000000000..05b36e6579
--- /dev/null
+++ b/packages/components/toast/src/toast-region.tsx
@@ -0,0 +1,106 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {useToastRegion, AriaToastRegionProps} from "@react-aria/toast";
+import {QueuedToast, ToastState} from "@react-stately/toast";
+import {useHover} from "@react-aria/interactions";
+import {mergeProps} from "@react-aria/utils";
+import {toastRegion, ToastRegionVariantProps} from "@heroui/theme";
+
+import Toast from "./toast";
+import {ToastProps} from "./use-toast";
+
+interface ToastRegionProps<T> extends AriaToastRegionProps, ToastRegionVariantProps {
+  toastQueue: ToastState<T>;
+  placement?:
+    | "right-bottom"
+    | "left-bottom"
+    | "center-bottom"
+    | "right-top"
+    | "left-top"
+    | "center-top";
+  maxVisibleToasts: number;
+  toastOffset?: number;
+  toastProps?: ToastProps;
+}
+
+export function ToastRegion<T extends ToastProps>({
+  toastQueue,
+  placement,
+  disableAnimation,
+  maxVisibleToasts,
+  toastOffset,
+  toastProps = {},
+  ...props
+}: ToastRegionProps<T>) {
+  const ref = useRef(null);
+  const {regionProps} = useToastRegion(props, toastQueue, ref);
+  const {hoverProps, isHovered} = useHover({
+    isDisabled: false,
+  });
+
+  const [isTouched, setIsTouched] = useState(false);
+
+  const slots = useMemo(
+    () =>
+      toastRegion({
+        disableAnimation,
+      }),
+    [disableAnimation],
+  );
+
+  useEffect(() => {
+    function handleTouchOutside(event: TouchEvent) {
+      if (ref.current && !(ref.current as HTMLDivElement).contains(event.target as Node)) {
+        setIsTouched(false);
+      }
+    }
+    document.addEventListener("touchstart", handleTouchOutside);
+
+    return () => {
+      document.removeEventListener("touchstart", handleTouchOutside);
+    };
+  }, []);
+
+  const [heights, setHeights] = useState<number[]>([]);
+  const total = toastQueue.visibleToasts?.length ?? 0;
+
+  const handleTouchStart = useCallback(() => {
+    setIsTouched(true);
+  }, []);
+
+  return (
+    <div
+      {...mergeProps(regionProps, hoverProps)}
+      ref={ref}
+      className={slots.base()}
+      data-placement={placement}
+      onTouchStart={handleTouchStart}
+    >
+      {toastQueue.visibleToasts.map((toast: QueuedToast<ToastProps>, index) => {
+        if (disableAnimation && total - index > maxVisibleToasts) {
+          return null;
+        }
+
+        if (total - index <= 4 || (isHovered && total - index <= maxVisibleToasts + 1)) {
+          return (
+            <Toast
+              key={toast.key}
+              state={toastQueue}
+              toast={toast}
+              {...mergeProps(toastProps, toast.content)}
+              disableAnimation={disableAnimation}
+              heights={heights}
+              index={index}
+              isRegionExpanded={isHovered || isTouched}
+              placement={placement}
+              setHeights={setHeights}
+              toastOffset={toastOffset}
+              total={total}
+            />
+          );
+        }
+
+        return null;
+      })}
+    </div>
+  );
+}
diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx
new file mode 100644
index 0000000000..11d4e820cc
--- /dev/null
+++ b/packages/components/toast/src/toast.tsx
@@ -0,0 +1,130 @@
+import {forwardRef} from "@heroui/system";
+import {Button, ButtonProps} from "@heroui/button";
+import {
+  CloseIcon,
+  DangerIcon,
+  InfoFilledIcon,
+  SuccessIcon,
+  WarningIcon,
+} from "@heroui/shared-icons";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
+import {cloneElement, isValidElement} from "react";
+import {Spinner} from "@heroui/spinner";
+
+import {UseToastProps, useToast} from "./use-toast";
+
+const loadFeatures = () => import("framer-motion").then((res) => res.domMax);
+
+export interface ToastProps extends UseToastProps {}
+
+const iconMap = {
+  primary: InfoFilledIcon,
+  secondary: InfoFilledIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  danger: DangerIcon,
+} as const;
+
+const Toast = forwardRef<"div", ToastProps>((props, ref) => {
+  const {
+    Component,
+    icon,
+    loadingIcon,
+    domRef,
+    endContent,
+    color,
+    hideIcon,
+    closeIcon,
+    disableAnimation,
+    progressBarRef,
+    classNames,
+    slots,
+    isProgressBarVisible,
+    getToastProps,
+    getContentProps,
+    getTitleProps,
+    getDescriptionProps,
+    getCloseButtonProps,
+    getIconProps,
+    getMotionDivProps,
+    getCloseIconProps,
+    getLoadingIconProps,
+    isLoading,
+  } = useToast({
+    ...props,
+    ref,
+  });
+
+  const customIcon = icon && isValidElement(icon) ? cloneElement(icon, getIconProps()) : null;
+  const IconComponent = iconMap[color] || iconMap.primary;
+  const customLoadingIcon =
+    loadingIcon && isValidElement(loadingIcon)
+      ? cloneElement(loadingIcon, getLoadingIconProps())
+      : null;
+  const loadingIconComponent = isLoading
+    ? customLoadingIcon || (
+        <Spinner
+          aria-label="loadingIcon"
+          classNames={{wrapper: getLoadingIconProps().className}}
+          color={color ?? "default"}
+        />
+      )
+    : null;
+
+  const customCloseIcon =
+    closeIcon && isValidElement(closeIcon) ? cloneElement(closeIcon, {}) : null;
+
+  const toastContent = (
+    <Component ref={domRef} {...getToastProps()}>
+      <main {...getContentProps()}>
+        {hideIcon && !isLoading
+          ? null
+          : loadingIconComponent || customIcon || <IconComponent {...getIconProps()} />}
+        <div>
+          <div {...getTitleProps()}>{props.toast.content.title}</div>
+          <div {...getDescriptionProps()}>{props.toast.content.description}</div>
+        </div>
+      </main>
+      {isProgressBarVisible && (
+        <div className={slots.progressTrack({class: classNames?.progressTrack})}>
+          <div
+            ref={progressBarRef}
+            className={slots.progressIndicator({class: classNames?.progressIndicator})}
+          />
+        </div>
+      )}
+      <Button isIconOnly {...(getCloseButtonProps() as ButtonProps)}>
+        {customCloseIcon || <CloseIcon {...getCloseIconProps()} />}
+      </Button>
+      {endContent}
+    </Component>
+  );
+
+  return (
+    <>
+      {disableAnimation ? (
+        toastContent
+      ) : (
+        <LazyMotion features={loadFeatures}>
+          <AnimatePresence>
+            <m.div {...getMotionDivProps()}>
+              <m.div
+                key={"inner-div"}
+                animate={{opacity: 1}}
+                exit={{opacity: 0}}
+                initial={{opacity: 0}}
+                transition={{duration: 0.25, ease: "easeOut", delay: 0.1}}
+              >
+                {toastContent}
+              </m.div>
+            </m.div>
+          </AnimatePresence>
+        </LazyMotion>
+      )}
+    </>
+  );
+});
+
+Toast.displayName = "HeroUI.Toast";
+
+export default Toast;
diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
new file mode 100644
index 0000000000..7dd8a59b6b
--- /dev/null
+++ b/packages/components/toast/src/use-toast.ts
@@ -0,0 +1,621 @@
+import type {SlotsToClasses, ToastSlots, ToastVariantProps} from "@heroui/theme";
+
+import {HTMLHeroUIProps, PropGetter, mapPropsVariants, useProviderContext} from "@heroui/system";
+import {toast as toastTheme} from "@heroui/theme";
+import {ReactRef, useDOMRef} from "@heroui/react-utils";
+import {clsx, dataAttr, isEmpty, objectToDeps} from "@heroui/shared-utils";
+import {ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
+import {useToast as useToastAria, AriaToastProps} from "@react-aria/toast";
+import {chain, mergeProps} from "@react-aria/utils";
+import {QueuedToast, ToastState} from "@react-stately/toast";
+import {MotionProps} from "framer-motion";
+import {useHover} from "@react-aria/interactions";
+import {useIsMobile} from "@heroui/use-is-mobile";
+
+export interface ToastProps extends ToastVariantProps {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+  /**
+   * title of the toast
+   */
+  title?: ReactNode;
+  /**
+   * description of the toast
+   */
+  description?: string;
+  /**
+   * Promise based on which the notification will be styled.
+   */
+  promise?: Promise<any>;
+  /**
+   * Classname or List of classes to change the classNames of the element.
+   * if `className` is passed, it will be added to the base slot.
+   *
+   * @example
+   * ```ts
+   * addToast({
+   *   classNames={{
+   *    base:"base-classes",
+   *    content: "content-classes"
+   *    description: "description-classes"
+   *    title: "title-classes"
+   *    loadingIcon: "loading-icon-classes",
+   *    icon: "icon-classes",
+   *    progressTrack: "progress-track-classes",
+   *    progressIndicator: "progress-indicator-classes",
+   *    closeButton: "closeButton-classes"
+   *    closeIcon: "closeIcon-classes"
+   *   }}
+   * })
+   * ```
+   */
+  classNames?: SlotsToClasses<ToastSlots>;
+  /**
+   * Content to be displayed in the end side of the toast
+   */
+  endContent?: ReactNode;
+  /**
+   * Icon to be displayed in the toast - overrides the default icon
+   */
+  icon?: ReactNode;
+  /**
+   * Icon to be displayed in the close button - overrides the default close icon
+   */
+  closeIcon?: ReactNode | ((props: any) => ReactNode);
+  /**
+   * Icon to be displayed in the loading toast - overrides the loading icon
+   */
+  loadingIcon?: ReactNode;
+  /**
+   * Whether the toast-icon should be hidden.
+   * @default false
+   */
+  hideIcon?: boolean;
+  /**
+   * Time to auto-close the toast.
+   */
+  timeout?: number;
+  /**
+   * hides the close button
+   */
+  hideCloseButton?: boolean;
+  /**
+   * function which is called when toast is closed.
+   */
+  onClose?: () => void;
+  /**
+   * props that will be passed to the m.div
+   */
+  motionProps?: MotionProps;
+  /**
+   * should apply styles to indicate timeout progress
+   */
+  shouldShowTimeoutProgess?: boolean;
+}
+
+interface Props<T> extends Omit<HTMLHeroUIProps<"div">, "title">, ToastProps {
+  toast: QueuedToast<T>;
+  index: number;
+  total: number;
+  state: ToastState<T>;
+  heights: number[];
+  setHeights: (val: number[]) => void;
+  disableAnimation?: boolean;
+  isRegionExpanded: boolean;
+  placement?:
+    | "right-bottom"
+    | "left-bottom"
+    | "center-bottom"
+    | "right-top"
+    | "left-top"
+    | "center-top";
+  toastOffset?: number;
+}
+
+export type UseToastProps<T = ToastProps> = Props<T> &
+  ToastVariantProps &
+  Omit<AriaToastProps<T>, "div">;
+
+const SWIPE_THRESHOLD_X = 100;
+const SWIPE_THRESHOLD_Y = 20;
+const INITIAL_POSITION = 50;
+
+export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>) {
+  const [props, variantProps] = mapPropsVariants(originalProps, toastTheme.variantKeys);
+  const {
+    ref,
+    as,
+    title,
+    description,
+    className,
+    classNames,
+    toast,
+    endContent,
+    closeIcon,
+    hideIcon = false,
+    placement: placementProp = "right-bottom",
+    isRegionExpanded,
+    hideCloseButton = false,
+    state,
+    total = 1,
+    index = 0,
+    heights,
+    promise: promiseProp,
+    setHeights,
+    toastOffset = 0,
+    motionProps,
+    timeout = 6000,
+    shouldShowTimeoutProgess = false,
+    icon,
+    onClose,
+    ...otherProps
+  } = props;
+
+  const {isHovered: isToastHovered, hoverProps} = useHover({
+    isDisabled: false,
+  });
+
+  const globalContext = useProviderContext();
+  const disableAnimation =
+    originalProps?.disableAnimation ?? globalContext?.disableAnimation ?? false;
+
+  const isMobile = useIsMobile();
+  let placement = placementProp;
+
+  if (isMobile) {
+    if (placementProp.includes("top")) {
+      placement = "center-top";
+    } else {
+      placement = "center-bottom";
+    }
+  }
+
+  const animationRef = useRef<number | null>(null);
+  const startTime = useRef<number | null>(null);
+  const progressRef = useRef<number>(0);
+  const progressBarRef = useRef<HTMLDivElement>(null);
+  const pausedTime = useRef<number>(0);
+  const timeElapsed = useRef<number>(0);
+
+  useEffect(() => {
+    if (progressBarRef.current) {
+      progressBarRef.current.style.width = "0%";
+    }
+  }, []);
+
+  useEffect(() => {
+    const updateProgress = (timestamp: number) => {
+      if (!timeout) {
+        return;
+      }
+
+      if (startTime.current === null) {
+        startTime.current = timestamp;
+      }
+
+      if (isToastHovered || isRegionExpanded || index != total - 1) {
+        pausedTime.current += timestamp - startTime.current;
+        startTime.current = null;
+        animationRef.current = requestAnimationFrame(updateProgress);
+
+        return;
+      }
+
+      const elapsed = timestamp - startTime.current + pausedTime.current;
+
+      timeElapsed.current = elapsed;
+      if (timeElapsed.current >= timeout) {
+        state.close(toast.key);
+      }
+
+      progressRef.current = Math.min((elapsed / timeout) * 100, 100);
+
+      if (progressBarRef.current) {
+        progressBarRef.current.style.width = `${
+          shouldShowTimeoutProgess ? progressRef.current : 0
+        }%`;
+      }
+
+      if (progressRef.current < 100) {
+        animationRef.current = requestAnimationFrame(updateProgress);
+      }
+    };
+
+    animationRef.current = requestAnimationFrame(updateProgress);
+
+    return () => {
+      if (animationRef.current !== null) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [timeout, shouldShowTimeoutProgess, state, isToastHovered, index, total, isRegionExpanded]);
+
+  const [isLoading, setIsLoading] = useState<boolean>(!!promiseProp);
+
+  useEffect(() => {
+    if (!promiseProp) return;
+    promiseProp.finally(() => {
+      setIsLoading(false);
+    });
+  }, [promiseProp]);
+
+  const Component = as || "div";
+  const loadingIcon: ReactNode = icon;
+
+  const domRef = useDOMRef(ref);
+  const baseStyles = clsx(className, classNames?.base);
+  const {toastProps, contentProps, titleProps, descriptionProps, closeButtonProps} = useToastAria(
+    props,
+    state,
+    domRef,
+  );
+
+  const [mounted, setMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const [initialHeight, setInitialHeight] = useState<number>(0);
+
+  // Following was inspired from sonner ❤️
+  useLayoutEffect(() => {
+    if (!domRef.current || !mounted) {
+      return;
+    }
+    const toastNode = domRef.current;
+    const originalHeight = toastNode.style.height;
+
+    toastNode.style.height = "auto";
+    const computedStyle = getComputedStyle(toastNode);
+    const marginTop = parseFloat(computedStyle.marginTop);
+    const marginBottom = parseFloat(computedStyle.marginBottom);
+    const newHeight = toastNode.getBoundingClientRect().height + marginTop + marginBottom;
+
+    toastNode.style.height = originalHeight;
+
+    setInitialHeight((prevHeight) => (prevHeight !== newHeight ? newHeight : prevHeight));
+    const updatedHeights = [...heights];
+
+    if (updatedHeights.length > index) {
+      updatedHeights[index] = newHeight;
+    } else {
+      updatedHeights.push(newHeight);
+    }
+    setHeights(updatedHeights);
+  }, [mounted, total, setHeights, index]);
+
+  let liftHeight = 4;
+
+  for (let idx = index + 1; idx < total; idx++) {
+    liftHeight += heights[idx];
+  }
+
+  const frontHeight = heights[heights.length - 1];
+
+  const slots = useMemo(
+    () =>
+      toastTheme({
+        ...variantProps,
+        disableAnimation,
+      }),
+    [objectToDeps(variantProps)],
+  );
+
+  const multiplier = placement.includes("top") ? 1 : -1;
+  const toastVariants = {
+    hidden: {opacity: 0, y: -INITIAL_POSITION * multiplier},
+    visible: {opacity: 1, y: 0},
+    exit: {opacity: 0, y: -INITIAL_POSITION * multiplier},
+  };
+
+  const [drag, setDrag] = useState(false);
+  const [dragValue, setDragValue] = useState(0);
+
+  const shouldCloseToast = (offsetX: number, offsetY: number) => {
+    const isRight = placement.includes("right");
+    const isLeft = placement.includes("left");
+    const isCenterTop = placement === "center-top";
+    const isCenterBottom = placement === "center-bottom";
+
+    if (
+      (isRight && offsetX >= SWIPE_THRESHOLD_X) ||
+      (isLeft && offsetX <= -SWIPE_THRESHOLD_X) ||
+      (isCenterTop && offsetY <= -SWIPE_THRESHOLD_Y) ||
+      (isCenterBottom && offsetY >= SWIPE_THRESHOLD_Y)
+    ) {
+      return true;
+    }
+  };
+
+  const getDragElasticConstraints = (placement: string) => {
+    const elasticConstraint = {top: 0, bottom: 0, right: 0, left: 0};
+
+    if (placement === "center-bottom") {
+      elasticConstraint.bottom = 1;
+
+      return elasticConstraint;
+    }
+    if (placement === "center-top") {
+      elasticConstraint.top = 1;
+
+      return elasticConstraint;
+    }
+    if (placement.includes("right")) {
+      elasticConstraint.right = 1;
+
+      return elasticConstraint;
+    }
+    if (placement.includes("left")) {
+      elasticConstraint.left = 1;
+
+      return elasticConstraint;
+    }
+
+    elasticConstraint.left = 1;
+    elasticConstraint.right = 1;
+
+    return elasticConstraint;
+  };
+
+  let opacityValue: undefined | number = undefined;
+
+  if ((drag && placement === "center-bottom") || placement === "center-top") {
+    opacityValue = Math.max(0, 1 - dragValue / (SWIPE_THRESHOLD_Y + 5));
+  } else if (drag) {
+    opacityValue = Math.max(0, 1 - dragValue / (SWIPE_THRESHOLD_X + 20));
+  }
+
+  const getToastProps: PropGetter = useCallback(
+    (props = {}) => ({
+      ref: domRef,
+      className: slots.base({class: clsx(baseStyles, classNames?.base)}),
+      "data-has-title": dataAttr(!isEmpty(title)),
+      "data-has-description": dataAttr(!isEmpty(description)),
+      "data-placement": placement,
+      "data-drag-value": dragValue,
+      "data-toast": true,
+      "data-animation": toast.animation,
+      "aria-label": "toast",
+      onTransitionEnd: () => {
+        if (toast.animation === "exiting") {
+          const updatedHeights = heights;
+
+          updatedHeights.splice(index, 1);
+          setHeights([...updatedHeights]);
+
+          state.remove(toast.key);
+        }
+      },
+      style: {
+        opacity: opacityValue,
+      },
+      ...mergeProps(props, otherProps, toastProps, hoverProps),
+    }),
+    [slots, classNames, toastProps, hoverProps, toast, toast.animation, toast.key, opacityValue],
+  );
+
+  const getIconProps: PropGetter = useCallback(
+    (props = {}) => ({
+      "aria-label": "descriptionIcon",
+      className: slots.icon({class: classNames?.icon}),
+      ...props,
+    }),
+    [],
+  );
+
+  const getLoadingIconProps: PropGetter = useCallback(
+    (props = {}) => ({
+      className: slots.loadingIcon({class: classNames?.loadingIcon}),
+      ...props,
+    }),
+    [],
+  );
+
+  const getContentProps: PropGetter = useCallback(
+    (props = {}) => ({
+      className: slots.content({class: classNames?.content}),
+      ...mergeProps(props, otherProps, contentProps),
+    }),
+    [contentProps],
+  );
+
+  const getTitleProps: PropGetter = useCallback(
+    (props = {}) => ({
+      className: slots.title({class: classNames?.title}),
+      ...mergeProps(props, otherProps, titleProps),
+    }),
+    [titleProps],
+  );
+
+  const getDescriptionProps: PropGetter = useCallback(
+    (props = {}) => ({
+      className: slots.description({class: classNames?.description}),
+      ...mergeProps(props, otherProps, descriptionProps),
+    }),
+    [descriptionProps],
+  );
+
+  const getCloseButtonProps: PropGetter = useCallback(
+    (props = {}) => ({
+      className: slots.closeButton({class: classNames?.closeButton}),
+      "aria-label": "closeButton",
+      "data-hidden": dataAttr(hideCloseButton),
+      ...mergeProps(props, closeButtonProps, {
+        onPress: chain(() => {
+          setTimeout(() => document.body.focus(), 0);
+        }, onClose),
+      }),
+    }),
+    [closeButtonProps, onClose],
+  );
+
+  const getCloseIconProps: PropGetter = useCallback(
+    (props = {}) => ({
+      className: slots.closeIcon({class: classNames?.closeIcon}),
+      "aria-label": "closeIcon",
+      ...props,
+    }),
+    [],
+  );
+
+  const getMotionDivProps = useCallback(
+    (
+      props = {},
+    ): MotionProps & {
+      "data-drag": string | boolean;
+      "data-placement": string;
+      "data-drag-value": number;
+      className: string;
+    } => {
+      const isCloseToEnd = total - index - 1 <= 2;
+      const dragDirection = placement === "center-bottom" || placement === "center-top" ? "y" : "x";
+      const dragConstraints = {left: 0, right: 0, top: 0, bottom: 0};
+      const dragElastic = getDragElasticConstraints(placement);
+
+      const animateProps = (() => {
+        if (placement.includes("top")) {
+          return {
+            top:
+              isRegionExpanded || drag
+                ? liftHeight + toastOffset
+                : (total - 1 - index) * 8 + toastOffset,
+            bottom: "auto",
+          };
+        } else if (placement.includes("bottom")) {
+          return {
+            bottom:
+              isRegionExpanded || drag
+                ? liftHeight + toastOffset
+                : (total - 1 - index) * 8 + toastOffset,
+            top: "auto",
+          };
+        }
+
+        return {};
+      })();
+
+      return {
+        animate: {
+          opacity: isCloseToEnd ? 1 : 0,
+          pointerEvents: isCloseToEnd ? "all" : "none",
+          scaleX: isRegionExpanded || drag ? 1 : 1 - (total - 1 - index) * 0.1,
+          height: isRegionExpanded || drag ? initialHeight : frontHeight,
+          y: 0,
+          ...animateProps,
+        },
+        drag: dragDirection,
+        dragConstraints,
+        exit: {opacity: 0},
+        initial: {opacity: 0, scale: 1, y: -40 * multiplier},
+        transition: {duration: 0.3, ease: "easeOut"},
+        variants: toastVariants,
+        dragElastic,
+        onDragEnd: (_, info) => {
+          const {x: offsetX, y: offsetY} = info.offset;
+
+          setDrag(false);
+
+          if (shouldCloseToast(offsetX, offsetY)) {
+            const updatedHeights = heights;
+
+            updatedHeights.splice(index, 1);
+            setHeights([...updatedHeights]);
+
+            state.close(toast.key);
+            state.remove(toast.key);
+
+            return;
+          }
+          setDragValue(0);
+        },
+        onDrag: (_, info) => {
+          let updatedDragValue = 0;
+
+          if (placement === "center-top") {
+            updatedDragValue = -info.offset.y;
+          } else if (placement === "center-bottom") {
+            updatedDragValue = info.offset.y;
+          } else if (placement.includes("right")) {
+            updatedDragValue = info.offset.x;
+          } else if (placement.includes("left")) {
+            updatedDragValue = -info.offset.x;
+          }
+
+          if (updatedDragValue >= 0) {
+            setDragValue(updatedDragValue);
+          }
+        },
+        onDragStart: () => {
+          setDrag(true);
+        },
+        "data-drag": dataAttr(drag),
+        "data-placement": placement,
+        "data-drag-value": dragValue,
+        className: slots.motionDiv({class: classNames?.motionDiv}),
+        ...props,
+        ...motionProps,
+      };
+    },
+    [
+      closeButtonProps,
+      total,
+      index,
+      placement,
+      isRegionExpanded,
+      liftHeight,
+      multiplier,
+      initialHeight,
+      frontHeight,
+      toastVariants,
+      classNames,
+      drag,
+      dataAttr,
+      setDrag,
+      shouldCloseToast,
+      slots,
+      toastOffset,
+    ],
+  );
+
+  return {
+    Component,
+    title,
+    description,
+    icon,
+    loadingIcon,
+    domRef,
+    closeIcon,
+    classNames,
+    color: variantProps["color"],
+    hideIcon,
+    placement,
+    state,
+    toast,
+    disableAnimation,
+    isProgressBarVisible: !!timeout,
+    total,
+    index,
+    getToastProps,
+    getTitleProps,
+    getContentProps,
+    getDescriptionProps,
+    getCloseButtonProps,
+    getIconProps,
+    getMotionDivProps,
+    getCloseIconProps,
+    getLoadingIconProps,
+    progressBarRef,
+    endContent,
+    slots,
+    isRegionExpanded,
+    liftHeight,
+    frontHeight,
+    initialHeight,
+    isLoading,
+  };
+}
+
+export type UseToastReturn = ReturnType<typeof useToast>;
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
new file mode 100644
index 0000000000..8358f2b58e
--- /dev/null
+++ b/packages/components/toast/stories/toast.stories.tsx
@@ -0,0 +1,410 @@
+import React, {useEffect} from "react";
+import {Meta} from "@storybook/react";
+import {cn, toast} from "@heroui/theme";
+import {Button} from "@heroui/button";
+
+import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src";
+
+export default {
+  title: "Components/Toast",
+  component: Toast,
+  argTypes: {
+    variant: {
+      control: {type: "select"},
+      options: ["flat", "bordered", "solid"],
+    },
+    color: {
+      control: {type: "select"},
+      options: ["default", "foreground", "primary", "secondary", "success", "warning", "danger"],
+    },
+    radius: {
+      control: {type: "select"},
+      options: ["none", "sm", "md", "lg", "full"],
+    },
+    size: {
+      control: {type: "select"},
+      options: ["sm", "md", "lg"],
+    },
+    hideIcon: {
+      control: {
+        type: "boolean",
+      },
+    },
+    shadow: {
+      control: {type: "select"},
+      options: ["sm", "md", "lg"],
+    },
+    placement: {
+      control: {type: "select"},
+      options: [
+        "right-bottom",
+        "left-bottom",
+        "center-bottom",
+        "right-top",
+        "left-top",
+        "center-top",
+      ],
+    },
+    hideCloseButton: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex justify-start items-start w-screen h-screen">
+        <Story />
+      </div>
+    ),
+    (Story) => {
+      useEffect(() => {
+        return () => {
+          closeAll();
+        };
+      }, []);
+
+      return <Story />;
+    },
+  ],
+} as Meta<typeof Toast>;
+
+const defaultProps = {
+  ...toast.defaultVariants,
+};
+
+const Template = (args: ToastProps) => {
+  return (
+    <>
+      <ToastProvider placement={args.placement} />
+      <div>
+        <Button
+          onPress={() => {
+            addToast({
+              title: "Toast Title",
+              ...args,
+            });
+          }}
+        >
+          Show toast
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const ShowTimeoutProgressTemplate = (args: ToastProps) => {
+  return (
+    <>
+      <ToastProvider placement={args.placement} />
+      <Button
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            timeout: 3000,
+            shouldShowTimeoutProgess: true,
+            ...args,
+          });
+        }}
+      >
+        Toast
+      </Button>
+    </>
+  );
+};
+
+const WithEndContentTemplate = (args) => {
+  return (
+    <>
+      <ToastProvider placement={args.placement} />
+      <Button
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            endContent: (
+              <Button color="warning" size="sm" variant="flat">
+                Upgrade
+              </Button>
+            ),
+            color: "warning",
+            variant: "faded",
+            ...args,
+          });
+        }}
+      >
+        Toast
+      </Button>
+    </>
+  );
+};
+
+const PlacementTemplate = (args: ToastProps) => {
+  return (
+    <>
+      <ToastProvider placement={args.placement} />
+      <div>
+        <Button
+          onPress={() => {
+            addToast({
+              title: "Toast Title",
+              description: "Toast Displayed Successfully",
+              ...args,
+            });
+          }}
+        >
+          Show toast
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const DisableAnimationTemplate = (args: ToastProps) => {
+  return (
+    <>
+      <ToastProvider disableAnimation={true} placement={args.placement} />
+      <div>
+        <Button
+          onPress={() => {
+            addToast({
+              title: "Toast Title",
+              description: "Toast Displayed Successfully",
+              ...args,
+            });
+          }}
+        >
+          Show toast
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const PromiseToastTemplate = (args: ToastProps) => {
+  return (
+    <>
+      <ToastProvider placement={args.placement} />
+      <div>
+        <Button
+          onPress={() => {
+            addToast({
+              title: "Toast Title",
+              description: "Toast Displayed Successfully",
+              promise: new Promise((resolve) => setTimeout(resolve, 4000)),
+              ...args,
+            });
+          }}
+        >
+          Show toast
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const CustomToastComponent = (args) => {
+  const color = args.color;
+  const colorMap = {
+    primary: "before:bg-primary border-primary-200 dark:border-primary-100",
+    secondary: "before:bg-secondary border-secondary-200 dark:border-secondary-100",
+    success: "before:bg-success border-success-200 dark:border-success-100",
+    warning: "before:bg-warning border-warning-200 dark:border-warning-100",
+    danger: "before:bg-danger border-danger-200 dark:border-danger-100",
+  };
+
+  return (
+    <>
+      <Button
+        color={color}
+        variant="bordered"
+        onPress={() => {
+          addToast({
+            title: "Sucessful!",
+            description: "Document uploaded to cloud successful.",
+            classNames: {
+              base: cn([
+                "bg-default-50 dark:bg-background shadow-sm",
+                "border-1",
+                "relative before:content-[''] before:absolute before:z-10",
+                "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+                "rounded-l-none border-l-0",
+                "rounded-md",
+                "flex flex-col items-start",
+                colorMap[color],
+              ]),
+              icon: "w-6 h-6 fill-current",
+            },
+            endContent: (
+              <div className="ms-11 my-2 flex gap-x-2">
+                <Button color={color} size="sm" variant="bordered">
+                  View Document
+                </Button>
+                <Button className="underline-offset-2" color={color} size="sm" variant="light">
+                  Maybe Later
+                </Button>
+              </div>
+            ),
+            color: color,
+          });
+        }}
+      >
+        Toast
+      </Button>
+    </>
+  );
+};
+
+const CustomToastTemplate = (args) => {
+  const colors = ["primary", "secondary", "warning", "danger", "success"];
+
+  return (
+    <>
+      <ToastProvider placement={args.placement} />
+      <div className="flex gap-2">
+        {colors.map((color, idx) => (
+          <CustomToastComponent key={idx} color={color} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+const CustomCloseButtonTemplate = (args) => {
+  return (
+    <>
+      <ToastProvider
+        placement={args.placement}
+        toastProps={{
+          classNames: {
+            closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
+          },
+        }}
+      />
+      <Button
+        onPress={() =>
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            closeIcon: (
+              <svg
+                fill="none"
+                height="32"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                width="32"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            ),
+          })
+        }
+      >
+        Toast
+      </Button>
+    </>
+  );
+};
+
+export const Default = {
+  render: Template,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithDescription = {
+  render: Template,
+  args: {
+    description: "Toast displayed successfully.",
+    ...defaultProps,
+  },
+};
+
+export const WithCustomIcon = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    title: "Custom Icon",
+    icon: (
+      <svg height={24} viewBox="0 0 24 24" width={24}>
+        <g
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit={10}
+          strokeWidth={1.5}
+        >
+          <path
+            d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+            data-name="Stroke 1"
+          />
+          <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+        </g>
+      </svg>
+    ),
+  },
+};
+
+export const iconHidden = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    hideIcon: true,
+  },
+};
+
+export const DisableAnimation = {
+  render: DisableAnimationTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const PromiseToast = {
+  render: PromiseToastTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const ShowTimeoutProgress = {
+  render: ShowTimeoutProgressTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const Placement = {
+  render: PlacementTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithEndContent = {
+  render: WithEndContentTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const CustomStyles = {
+  render: CustomToastTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const CustomCloseButton = {
+  render: CustomCloseButtonTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/toast/tsconfig.json b/packages/components/toast/tsconfig.json
new file mode 100644
index 0000000000..5d012f6e61
--- /dev/null
+++ b/packages/components/toast/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/components/toast/tsup.config.ts b/packages/components/toast/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/components/toast/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";'},
+});
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index 2b8b3d613c..6f5202b0ee 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -89,6 +89,7 @@
     "@heroui/drawer": "workspace:*",
     "@heroui/form": "workspace:*",
     "@heroui/alert": "workspace:*",
+    "@heroui/toast": "workspace:*",
     "@react-aria/visually-hidden": "3.8.19"
   },
   "peerDependencies": {
diff --git a/packages/core/react/src/index.ts b/packages/core/react/src/index.ts
index 2b29b0ac5e..50aec9e35c 100644
--- a/packages/core/react/src/index.ts
+++ b/packages/core/react/src/index.ts
@@ -47,6 +47,7 @@ export * from "@heroui/form";
 export * from "@heroui/alert";
 export * from "@heroui/drawer";
 export * from "@heroui/input-otp";
+export * from "@heroui/toast";
 
 /**
  * React Aria - Exports
diff --git a/packages/core/theme/src/components/index.ts b/packages/core/theme/src/components/index.ts
index dee45f4401..68832da61e 100644
--- a/packages/core/theme/src/components/index.ts
+++ b/packages/core/theme/src/components/index.ts
@@ -41,3 +41,4 @@ export * from "./date-picker";
 export * from "./alert";
 export * from "./drawer";
 export * from "./form";
+export * from "./toast";
diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts
new file mode 100644
index 0000000000..a668019e26
--- /dev/null
+++ b/packages/core/theme/src/components/toast.ts
@@ -0,0 +1,389 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "../utils/tv";
+import {colorVariants} from "../utils";
+
+const toastRegion = tv({
+  slots: {
+    base: "relative z-50",
+  },
+  variants: {
+    disableAnimation: {
+      false: {
+        base: "",
+      },
+      true: {
+        base: [
+          "data-[placement=right-bottom]:bottom-0 data-[placement=right-bottom]:right-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=right-bottom]:fixed data-[placement=right-bottom]:flex data-[placement=right-bottom]:flex-col",
+          "data-[placement=left-bottom]:bottom-0 data-[placement=left-bottom]:left-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=left-bottom]:fixed data-[placement=left-bottom]:flex data-[placement=left-bottom]:flex-col",
+          "data-[placement=center-bottom]:bottom-0 data-[placement=center-bottom]:fixed w-full px-2 sm:w-auto sm:px-0 data-[placement=center-bottom]:flex data-[placement=center-bottom]:flex-col data-[placement=center-bottom]:left-1/2 data-[placement=center-bottom]:-translate-x-1/2",
+          "data-[placement=right-top]:top-0 data-[placement=right-top]:right-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=right-top]:fixed data-[placement=right-top]:flex data-[placement=right-top]:flex-col",
+          "data-[placement=left-top]:top-0 data-[placement=left-top]:left-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=left-top]:fixed data-[placement=left-top]:flex data-[placement=left-top]:flex-col",
+          "data-[placement=center-top]:top-0 data-[placement=center-top]:fixed w-full px-2 sm:w-auto sm:px-0 data-[placement=center-top]:flex data-[placement=center-top]:flex-col data-[placement=center-top]:left-1/2 data-[placement=center-top]:-translate-x-1/2",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    disableAnimation: false,
+  },
+});
+
+const toast = tv({
+  slots: {
+    base: [
+      "flex gap-x-4 items-center",
+      "group",
+      "cursor-pointer",
+      "relative",
+      "z-50",
+      "box-border",
+      "outline-none",
+      "p-3 sm:mx-1",
+      "my-1",
+      "w-full sm:w-[270px] md:w-[300px]",
+      "min-h-4",
+    ],
+    title: ["font-medium", "text-small", "me-4", "text-foreground"],
+    description: ["text-small", "me-4", "text-default-600"],
+    icon: ["w-6 h-6 fill-current"],
+    loadingIcon: ["w-6 h-6 fill-current"],
+    content: ["flex flex-grow flex-row gap-x-4 items-center relative"],
+    progressTrack: ["absolute top-0 inset-0 bg-transparent overflow-hidden"],
+    progressIndicator: ["h-full bg-default-400 opacity-20"],
+    motionDiv: [
+      "fixed",
+      "px-4 sm:px-0",
+      "data-[placement=right-bottom]:bottom-0 data-[placement=right-bottom]:right-0 data-[placement=right-bottom]:mx-auto w-full sm:data-[placement=right-bottom]:w-max mb-1 sm:data-[placement=right-bottom]:mr-2",
+      "data-[placement=left-bottom]:bottom-0 data-[placement=left-bottom]:left-0 data-[placement=left-bottom]:mx-auto w-full sm:data-[placement=left-bottom]:w-max mb-1 sm:data-[placement=left-bottom]:ml-2",
+      "data-[placement=center-bottom]:bottom-0 data-[placement=center-bottom]:left-0 data-[placement=center-bottom]:right-0 w-full sm:data-[placement=center-bottom]:w-max sm:data-[placement=center-bottom]:mx-auto",
+      "data-[placement=right-top]:top-0 data-[placement=right-top]:right-0 data-[placement=right-top]:mx-auto w-full sm:data-[placement=right-top]:w-max sm:data-[placement=right-top]:mr-2",
+      "data-[placement=left-top]:top-0 data-[placement=left-top]:left-0 data-[placement=left-top]:mx-auto w-full sm:data-[placement=left-top]:w-max sm:data-[placement=left-top]:ml-2",
+      "data-[placement=center-top]:top-0 data-[placement=center-top]:left-0 data-[placement=center-top]:right-0 w-full sm:data-[placement=center-top]:w-max sm:data-[placement=center-top]:mx-auto",
+    ],
+    closeButton: [
+      "opacity-0 pointer-events-none group-hover:pointer-events-auto p-0 group-hover:opacity-100 w-6 h-6 min-w-4 absolute -right-2 -top-2 items-center justify-center bg-transparent text-default-400 hover:text-default-600 border border-3 border-transparent",
+      "data-[hidden=true]:hidden",
+    ],
+    closeIcon: ["rounded-full w-full h-full p-0.5 border border-default-400 bg-default-100"],
+  },
+  variants: {
+    size: {
+      sm: {
+        icon: "w-5 h-5",
+        loadingIcon: "w-5 h-5",
+        title: "text-sm font-medium",
+        description: "text-xs",
+      },
+      md: {
+        title: "text-sm font-semibold",
+        description: "text-xs",
+      },
+      lg: {
+        title: "text-md font-semibold",
+        description: "text-sm",
+      },
+    },
+    variant: {
+      flat: "bg-content1 border border-default-100",
+      solid: colorVariants.solid.default,
+      bordered: "bg-background border border-default-200",
+    },
+    color: {
+      default: "",
+      foreground: {
+        progressIndicator: "h-full opacity-20 bg-foreground-400",
+      },
+      primary: {
+        progressIndicator: "h-full opacity-20 bg-primary-400",
+      },
+      secondary: {
+        progressIndicator: "h-full opacity-20 bg-secondary-400",
+      },
+      success: {
+        progressIndicator: "h-full opacity-20 bg-success-400",
+      },
+      warning: {
+        progressIndicator: "h-full opacity-20 bg-warning-400",
+      },
+      danger: {
+        progressIndicator: "h-full opacity-20 bg-danger-400",
+      },
+    },
+    radius: {
+      none: {
+        base: "rounded-none",
+        progressTrack: "rounded-none",
+      },
+      sm: {
+        base: "rounded-small",
+        progressTrack: "rounded-small",
+      },
+      md: {
+        base: "rounded-medium",
+        progressTrack: "rounded-medium",
+      },
+      lg: {
+        base: "rounded-large",
+        progressTrack: "rounded-large",
+      },
+      full: {
+        base: "rounded-full",
+        closeButton: "-top-px -right-px",
+        progressTrack: "rounded-full",
+      },
+    },
+    disableAnimation: {
+      true: {
+        closeButton: "transition-none",
+        base: "data-[animation=exiting]:opacity-0",
+      },
+      false: {
+        closeButton: "transition-opacity ease-in duration-300",
+        base: [
+          "data-[animation=exiting]:transform",
+          "data-[animation=exiting]:delay-100",
+          "data-[animation=exiting]:data-[placement=right-bottom]:translate-x-28",
+          "data-[animation=exiting]:data-[placement=left-bottom]:-translate-x-28",
+          "data-[animation=exiting]:data-[placement=center-bottom]:translate-y-28",
+          "data-[animation=exiting]:data-[placement=right-top]:translate-x-28",
+          "data-[animation=exiting]:data-[placement=left-top]:-translate-x-28",
+          "data-[animation=exiting]:data-[placement=center-top]:-translate-y-28",
+          "data-[animation=exiting]:opacity-0",
+          "data-[animation=exiting]:duration-200",
+        ],
+      },
+    },
+    shadow: {
+      none: {
+        base: "shadow-none",
+      },
+      sm: {
+        base: "shadow-small",
+      },
+      md: {
+        base: "shadow-medium",
+      },
+      lg: {
+        base: "shadow-large",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "flat",
+    radius: "md",
+    shadow: "sm",
+  },
+  compoundVariants: [
+    // flat and color
+    {
+      variant: "flat",
+      color: "foreground",
+      class: {
+        base: "bg-foreground text-background",
+        closeButton: "text-foreground-400 hover:text-foreground-600",
+        closeIcon: "border border-foreground-400 bg-foreground-100",
+        title: "text-background-600",
+        description: "text-background-500",
+      },
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        base: "bg-primary-50 text-primary-600 border-primary-100",
+        closeButton: "text-primary-400 hover:text-primary-600",
+        closeIcon: "border border-primary-400 bg-primary-100",
+        title: "text-primary-600",
+        description: "text-primary-500",
+      },
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        base: "bg-secondary-50 text-secondary-600 border-secondary-100",
+        closeButton: "text-secondary-400 hover:text-secondary-600",
+        closeIcon: "border border-secondary-400 bg-secondary-100",
+        title: "text-secondary-600",
+        description: "text-secondary-500",
+      },
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        base: "bg-success-50 text-success-600 border-success-100",
+        closeButton: "text-success-400 hover:text-success-600",
+        closeIcon: "border border-success-400 bg-success-100",
+        title: "text-success-600",
+        description: "text-success-500",
+      },
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        base: "bg-warning-50 text-warning-600 border-warning-100",
+        closeButton: "text-warning-400 hover:text-warning-600",
+        closeIcon: "border border-warning-400 bg-warning-100",
+        title: "text-warning-600",
+        description: "text-warning-500",
+      },
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: {
+        base: "bg-danger-50 text-danger-600 border-danger-100",
+        closeButton: "text-danger-400 hover:text-danger-600",
+        closeIcon: "border border-danger-400 bg-danger-100",
+        title: "text-danger-600",
+        description: "text-danger-500",
+      },
+    },
+    // bordered and color
+    {
+      variant: "bordered",
+      color: "foreground",
+      class: {
+        base: "bg-foreground border-foreground-400 text-background",
+        closeButton: "text-foreground-400 hover:text-foreground-600",
+        closeIcon: "border border-foreground-400 bg-foreground-100",
+        title: "text-background-600",
+        description: "text-background-500",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        base: "border-primary-400 text-primary-600",
+        closeButton: "text-primary-400 hover:text-primary-600",
+        closeIcon: "border border-primary-400 bg-primary-100",
+        title: "text-primary-600",
+        description: "text-primary-500",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        base: "border-secondary-400 text-secondary-600",
+        closeButton: "text-secondary-400 hover:text-secondary-600",
+        closeIcon: "border border-secondary-400 bg-secondary-100",
+        title: "text-secondary-600",
+        description: "text-secondary-500",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        base: "border-success-400 text-success-600",
+        closeButton: "text-success-400 hover:text-success-600",
+        closeIcon: "border border-success-400 bg-success-100",
+        title: "text-success-600",
+        description: "text-success-500",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        base: "border-warning-400 text-warning-600",
+        closeButton: "text-warning-400 hover:text-warning-600",
+        closeIcon: "border border-warning-400 bg-warning-100",
+        title: "text-warning-600",
+        description: "text-warning-500",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        base: "border-danger-400 text-danger-600",
+        closeButton: "text-danger-400 hover:text-danger-600",
+        closeIcon: "border border-danger-400 bg-danger-100",
+        title: "text-danger-600",
+        description: "text-danger-500",
+      },
+    },
+    // solid and color
+    {
+      variant: "solid",
+      color: "foreground",
+      class: {
+        base: colorVariants.solid.foreground,
+        closeButton: "text-foreground-400 hover:text-foreground-600",
+        closeIcon: "border border-foreground-400 bg-foreground-100",
+        title: "text-background",
+        description: "text-background",
+      },
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: colorVariants.solid.primary,
+        closeButton: "text-primary-400 hover:text-primary-600",
+        closeIcon: "border border-primary-400 bg-primary-100",
+        title: "text-primary-foreground",
+        description: "text-primary-foreground",
+      },
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: colorVariants.solid.secondary,
+        closeButton: "text-secondary-400 hover:text-secondary-600",
+        closeIcon: "border border-secondary-400 bg-secondary-100",
+        title: "text-secondary-foreground",
+        description: "text-secondary-foreground",
+      },
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: colorVariants.solid.success,
+        closeButton: "text-success-400 hover:text-success-600",
+        closeIcon: "border border-success-400 bg-success-100",
+        title: "text-success-foreground",
+        description: "text-success-foreground",
+      },
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: colorVariants.solid.warning,
+        closeButton: "text-warning-400 hover:text-warning-600",
+        closeIcon: "border border-warning-400 bg-warning-100",
+        title: "text-warning-foreground",
+        description: "text-warning-foreground",
+      },
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: colorVariants.solid.danger,
+        closeButton: "text-danger-400 hover:text-danger-600",
+        closeIcon: "border border-danger-400 bg-danger-100",
+        title: "text-danger-foreground",
+        description: "text-danger-foreground",
+      },
+    },
+  ],
+});
+
+export type ToastVariantProps = VariantProps<typeof toast>;
+export type ToastSlots = keyof ReturnType<typeof toast>;
+
+export type ToastRegionVariantProps = VariantProps<typeof toastRegion>;
+export type ToastRegionSlots = keyof ReturnType<typeof toastRegion>;
+
+export {toast, toastRegion};
diff --git a/packages/utilities/shared-icons/src/close.tsx b/packages/utilities/shared-icons/src/close.tsx
index 13ef5c2b00..51681d6e2b 100644
--- a/packages/utilities/shared-icons/src/close.tsx
+++ b/packages/utilities/shared-icons/src/close.tsx
@@ -17,6 +17,7 @@ export const CloseIcon = (
   return (
     <svg
       aria-hidden="true"
+      className="fill-current"
       fill="none"
       focusable="false"
       height="1em"
diff --git a/packages/utilities/shared-icons/src/danger.tsx b/packages/utilities/shared-icons/src/danger.tsx
index ffa5c56f6d..d5cd7f3259 100644
--- a/packages/utilities/shared-icons/src/danger.tsx
+++ b/packages/utilities/shared-icons/src/danger.tsx
@@ -7,6 +7,7 @@ export const DangerIcon = (
 ) => {
   return (
     <svg
+      className="fill-current"
       fill="none"
       height="20"
       viewBox="0 0 20 20"
diff --git a/packages/utilities/shared-icons/src/index.ts b/packages/utilities/shared-icons/src/index.ts
index a2f5a0286d..664f7da714 100644
--- a/packages/utilities/shared-icons/src/index.ts
+++ b/packages/utilities/shared-icons/src/index.ts
@@ -18,6 +18,7 @@ export * from "./moon";
 export * from "./moon-filled";
 export * from "./headphones";
 export * from "./anchor";
+export * from "./info-filled";
 export * from "./info";
 export * from "./shield-security";
 export * from "./monitor-mobile";
diff --git a/packages/utilities/shared-icons/src/info-filled.tsx b/packages/utilities/shared-icons/src/info-filled.tsx
new file mode 100644
index 0000000000..86b8014939
--- /dev/null
+++ b/packages/utilities/shared-icons/src/info-filled.tsx
@@ -0,0 +1,20 @@
+import {IconSvgProps} from "./types";
+
+export const InfoFilledIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-icons/src/warning.tsx b/packages/utilities/shared-icons/src/warning.tsx
index fd4d4d3133..69bd9c02de 100644
--- a/packages/utilities/shared-icons/src/warning.tsx
+++ b/packages/utilities/shared-icons/src/warning.tsx
@@ -7,6 +7,7 @@ export const WarningIcon = (
 ) => {
   return (
     <svg
+      className="fill-current"
       fill="none"
       height="24"
       viewBox="0 0 24 24"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89a2e5207d..01eaf337cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,7 +66,7 @@ importers:
         version: 3.27.0(react@18.3.0)
       '@storybook/react':
         specifier: ^8.4.5
-        version: 8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)
+        version: 8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)
       '@swc/core':
         specifier: ^1.3.35
         version: 1.10.6(@swc/helpers@0.5.15)
@@ -81,7 +81,7 @@ importers:
         version: 6.6.3
       '@testing-library/react':
         specifier: ^16.0.1
-        version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -123,16 +123,16 @@ importers:
         version: 7.32.0
       eslint-config-airbnb:
         specifier: ^18.2.1
-        version: 18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
+        version: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
       eslint-config-airbnb-typescript:
         specifier: ^12.3.1
-        version: 12.3.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
+        version: 12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
       eslint-config-prettier:
         specifier: ^8.2.0
         version: 8.10.0(eslint@7.32.0)
       eslint-config-react-app:
         specifier: ^6.0.0
-        version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0)(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
+        version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
       eslint-config-ts-lambdas:
         specifier: ^1.2.3
         version: 1.2.3(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3)
@@ -141,7 +141,7 @@ importers:
         version: 2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
       eslint-loader:
         specifier: ^4.0.2
-        version: 4.0.2(eslint@7.32.0)(webpack@5.97.1)
+        version: 4.0.2(eslint@7.32.0)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12))
       eslint-plugin-import:
         specifier: ^2.26.0
         version: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
@@ -195,13 +195,13 @@ importers:
         version: 10.7.11
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+        version: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       jest-environment-jsdom:
         specifier: ^29.7.0
         version: 29.7.0
       jest-watch-typeahead:
         specifier: 2.2.2
-        version: 2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
+        version: 2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)))
       lint-staged:
         specifier: ^13.0.3
         version: 13.3.0(enquirer@2.4.1)
@@ -252,7 +252,7 @@ importers:
         version: 5.7.3
       webpack:
         specifier: ^5.53.0
-        version: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))
+        version: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
       webpack-bundle-analyzer:
         specifier: ^4.4.2
         version: 4.10.2
@@ -3033,6 +3033,61 @@ importers:
         specifier: 0.13.0
         version: 0.13.0(react@18.3.0)
 
+  packages/components/toast:
+    dependencies:
+      '@heroui/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@heroui/shared-icons':
+        specifier: workspace:*
+        version: link:../../utilities/shared-icons
+      '@heroui/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+      '@heroui/spinner':
+        specifier: workspace:*
+        version: link:../spinner
+      '@heroui/use-is-mobile':
+        specifier: workspace:*
+        version: link:../../hooks/use-is-mobile
+      '@react-aria/interactions':
+        specifier: 3.23.0
+        version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@react-aria/toast':
+        specifier: 3.0.0-beta.19
+        version: 3.0.0-beta.19(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@react-aria/utils':
+        specifier: 3.27.0
+        version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@react-stately/toast':
+        specifier: 3.0.0-beta.7
+        version: 3.0.0-beta.7(react@18.3.0)
+      '@react-stately/utils':
+        specifier: 3.10.5
+        version: 3.10.5(react@18.3.0)
+      framer-motion:
+        specifier: '>=11.5.6 || >=12.0.0-alpha.1'
+        version: 11.11.13(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+    devDependencies:
+      '@heroui/button':
+        specifier: workspace:*
+        version: link:../button
+      '@heroui/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@heroui/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: 18.3.0
+        version: 18.3.0
+      react-dom:
+        specifier: 18.3.0
+        version: 18.3.0(react@18.3.0)
+
   packages/components/tooltip:
     dependencies:
       '@heroui/aria-utils':
@@ -3274,6 +3329,9 @@ importers:
       '@heroui/theme':
         specifier: workspace:*
         version: link:../theme
+      '@heroui/toast':
+        specifier: workspace:*
+        version: link:../../components/toast
       '@heroui/tooltip':
         specifier: workspace:*
         version: link:../../components/tooltip
@@ -3363,7 +3421,7 @@ importers:
         version: 18.3.0
       tailwind-variants:
         specifier: ^0.3.0
-        version: 0.3.0(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)))
+        version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
 
   packages/core/theme:
     dependencies:
@@ -3390,7 +3448,7 @@ importers:
         version: 2.5.4
       tailwind-variants:
         specifier: 0.3.0
-        version: 0.3.0(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)))
+        version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
     devDependencies:
       '@types/color':
         specifier: ^4.2.0
@@ -3403,22 +3461,22 @@ importers:
         version: 2.2.0
       tailwindcss:
         specifier: ^3.4.16
-        version: 3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
+        version: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
 
   packages/hooks/use-aria-accordion:
     dependencies:
       '@react-aria/button':
         specifier: 3.11.1
-        version: 3.11.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.11.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/focus':
         specifier: 3.19.1
-        version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/selection':
         specifier: 3.22.0
-        version: 3.22.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.22.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/utils':
         specifier: 3.27.0
-        version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-stately/tree':
         specifier: 3.8.7
         version: 3.8.7(react@18.3.0)
@@ -3440,10 +3498,10 @@ importers:
     dependencies:
       '@react-aria/button':
         specifier: 3.11.1
-        version: 3.11.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.11.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/focus':
         specifier: 3.19.1
-        version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-stately/tree':
         specifier: 3.8.7
         version: 3.8.7(react@18.3.0)
@@ -3465,13 +3523,13 @@ importers:
         version: link:../../utilities/shared-utils
       '@react-aria/focus':
         specifier: 3.19.1
-        version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/interactions':
         specifier: 3.23.0
-        version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/utils':
         specifier: 3.27.0
-        version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-types/button':
         specifier: 3.10.2
         version: 3.10.2(react@18.3.0)
@@ -3493,13 +3551,13 @@ importers:
         version: link:../../utilities/shared-utils
       '@react-aria/focus':
         specifier: 3.19.1
-        version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/interactions':
         specifier: 3.23.0
-        version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/utils':
         specifier: 3.27.0
-        version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-types/link':
         specifier: 3.5.10
         version: 3.5.10(react@18.3.0)
@@ -3636,7 +3694,7 @@ importers:
         version: link:../use-callback-ref
       '@react-aria/utils':
         specifier: 3.27.0
-        version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-stately/utils':
         specifier: 3.10.5
         version: 3.10.5(react@18.3.0)
@@ -3652,7 +3710,7 @@ importers:
     dependencies:
       '@react-aria/interactions':
         specifier: 3.23.0
-        version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
@@ -3697,13 +3755,13 @@ importers:
     dependencies:
       '@react-aria/interactions':
         specifier: 3.23.0
-        version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-aria/ssr':
         specifier: 3.9.7
         version: 3.9.7(react@18.3.0)
       '@react-aria/utils':
         specifier: 3.27.0
-        version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-types/shared':
         specifier: 3.27.0
         version: 3.27.0(react@18.3.0)
@@ -3753,7 +3811,7 @@ importers:
         version: link:../../utilities/shared-utils
       '@react-aria/i18n':
         specifier: 3.12.5
-        version: 3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+        version: 3.12.5(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
@@ -6920,6 +6978,12 @@ packages:
       react: 18.3.0
       react-dom: 18.3.0
 
+  '@react-aria/landmark@3.0.0-beta.18':
+    resolution: {integrity: sha512-jFtWL7TYZrKucWNDx6ppUkGSqS2itkjhyLo9MIFqEg2mi4Lc2EoUjI/Gw9xMT+IJgebTcdQeXJpPskspl3Pojg==}
+    peerDependencies:
+      react: 18.3.0
+      react-dom: 18.3.0
+
   '@react-aria/link@3.7.8':
     resolution: {integrity: sha512-oiXUPQLZmf9Q9Xehb/sG1QRxfo28NFKdh9w+unD12sHI6NdLMETl5MA4CYyTgI0dfMtTjtfrF68GCnWfc7JvXQ==}
     peerDependencies:
@@ -7006,6 +7070,12 @@ packages:
       react: 18.3.0
       react-dom: 18.3.0
 
+  '@react-aria/toast@3.0.0-beta.19':
+    resolution: {integrity: sha512-LCMTcmSmum5CzBk+DIec66q6pJGEl+InQPJdsby7QG/row0ka6wHPvul78HVseN7dzg6G3xVjvHtVPOixkuegA==}
+    peerDependencies:
+      react: 18.3.0
+      react-dom: 18.3.0
+
   '@react-aria/toggle@3.10.11':
     resolution: {integrity: sha512-J3jO3KJiUbaYVDEpeXSBwqcyKxpi9OreiHRGiaxb6VwB+FWCj7Gb2WKajByXNyfs8jc6kX9VUFaXa7jze60oEQ==}
     peerDependencies:
@@ -7148,6 +7218,11 @@ packages:
     peerDependencies:
       react: 18.3.0
 
+  '@react-stately/toast@3.0.0-beta.7':
+    resolution: {integrity: sha512-+KDkaOS5Y4ApOfiP0HHij4ySwAd1VM9/pI4rVTyHrzkp0R2Q0eBxZ74MpWMpVfJa2lSjb/qEm60tqJ3A+4R/cQ==}
+    peerDependencies:
+      react: 18.3.0
+
   '@react-stately/toggle@3.8.1':
     resolution: {integrity: sha512-MVpe79ghVQiwLmVzIPhF/O/UJAUc9B+ZSylVTyJiEPi0cwhbkKGQv9thOF0ebkkRkace5lojASqUAYtSTZHQJA==}
     peerDependencies:
@@ -8861,8 +8936,8 @@ packages:
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  bundle-require@5.0.0:
-    resolution: {integrity: sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==}
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
       esbuild: '>=0.18'
@@ -9017,8 +9092,8 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
-  chokidar@4.0.2:
-    resolution: {integrity: sha512-/b57FK+bblSU+dfewfFe0rT1YjVDfOmeLQwCAuC+vwvgLkXboATqqmy+Ipux6JrF6L5joe5CBnFOw+gLWH6yKg==}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
   chownr@1.1.4:
@@ -10347,8 +10422,8 @@ packages:
   fd-package-json@1.2.0:
     resolution: {integrity: sha512-45LSPmWf+gC5tdCQMNH4s9Sr00bIkiD9aN7dc5hqkrEw1geRYyDQS1v1oMHAW3ysfxfndqGsrDREHHjNNbKUfA==}
 
-  fdir@6.4.2:
-    resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==}
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
@@ -13401,11 +13476,6 @@ packages:
     peerDependencies:
       react: 18.3.0
 
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
-    peerDependencies:
-      react: 18.3.0
-
   react-error-overlay@6.0.9:
     resolution: {integrity: sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==}
 
@@ -13532,9 +13602,9 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.0.2:
-    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
-    engines: {node: '>= 14.16.0'}
+  readdirp@4.1.1:
+    resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
+    engines: {node: '>= 14.18.0'}
 
   recast@0.23.9:
     resolution: {integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==}
@@ -14432,8 +14502,8 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tailwindcss@3.4.16:
-    resolution: {integrity: sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==}
+  tailwindcss@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -16795,7 +16865,7 @@ snapshots:
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)
+      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -17514,7 +17584,7 @@ snapshots:
       jest-util: 29.7.0
       slash: 3.0.0
 
-  '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))':
+  '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))':
     dependencies:
       '@jest/console': 29.7.0
       '@jest/reporters': 29.7.0
@@ -17528,7 +17598,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -18946,19 +19016,6 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/button@3.11.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
-    dependencies:
-      '@react-aria/focus': 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/toolbar': 3.0.0-beta.12(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-stately/toggle': 3.8.1(react@18.3.0)
-      '@react-types/button': 3.10.2(react@18.3.0)
-      '@react-types/shared': 3.27.0(react@18.3.0)
-      '@swc/helpers': 0.5.15
-      react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
-
   '@react-aria/calendar@3.7.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@internationalized/date': 3.7.0
@@ -19054,16 +19111,6 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/focus@3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
-    dependencies:
-      '@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-types/shared': 3.27.0(react@18.3.0)
-      '@swc/helpers': 0.5.15
-      clsx: 2.1.1
-      react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
-
   '@react-aria/form@3.0.12(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@react-aria/interactions': 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
@@ -19105,19 +19152,6 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/i18n@3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
-    dependencies:
-      '@internationalized/date': 3.7.0
-      '@internationalized/message': 3.1.6
-      '@internationalized/number': 3.6.0
-      '@internationalized/string': 3.2.5
-      '@react-aria/ssr': 3.9.7(react@18.3.0)
-      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-types/shared': 3.27.0(react@18.3.0)
-      '@swc/helpers': 0.5.15
-      react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
-
   '@react-aria/interactions@3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@react-aria/ssr': 3.9.7(react@18.3.0)
@@ -19127,22 +19161,22 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/interactions@3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
+  '@react-aria/label@3.7.14(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
-      '@react-aria/ssr': 3.9.7(react@18.3.0)
-      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
+      '@react-aria/utils': 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-types/shared': 3.27.0(react@18.3.0)
       '@swc/helpers': 0.5.15
       react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
+      react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/label@3.7.14(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
+  '@react-aria/landmark@3.0.0-beta.18(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@react-aria/utils': 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-types/shared': 3.27.0(react@18.3.0)
       '@swc/helpers': 0.5.15
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
+      use-sync-external-store: 1.4.0(react@18.3.0)
 
   '@react-aria/link@3.7.8(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
@@ -19246,18 +19280,6 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/selection@3.22.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
-    dependencies:
-      '@react-aria/focus': 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/i18n': 3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-stately/selection': 3.19.0(react@18.3.0)
-      '@react-types/shared': 3.27.0(react@18.3.0)
-      '@swc/helpers': 0.5.15
-      react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
-
   '@react-aria/slider@3.7.15(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@react-aria/focus': 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
@@ -19346,6 +19368,19 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
+  '@react-aria/toast@3.0.0-beta.19(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
+    dependencies:
+      '@react-aria/i18n': 3.12.5(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@react-aria/interactions': 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@react-aria/landmark': 3.0.0-beta.18(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@react-aria/utils': 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@react-stately/toast': 3.0.0-beta.7(react@18.3.0)
+      '@react-types/button': 3.10.2(react@18.3.0)
+      '@react-types/shared': 3.27.0(react@18.3.0)
+      '@swc/helpers': 0.5.15
+      react: 18.3.0
+      react-dom: 18.3.0(react@18.3.0)
+
   '@react-aria/toggle@3.10.11(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@react-aria/focus': 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
@@ -19368,16 +19403,6 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/toolbar@3.0.0-beta.12(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
-    dependencies:
-      '@react-aria/focus': 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/i18n': 3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
-      '@react-types/shared': 3.27.0(react@18.3.0)
-      '@swc/helpers': 0.5.15
-      react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
-
   '@react-aria/tooltip@3.7.11(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@react-aria/focus': 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
@@ -19400,16 +19425,6 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@react-aria/utils@3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
-    dependencies:
-      '@react-aria/ssr': 3.9.7(react@18.3.0)
-      '@react-stately/utils': 3.10.5(react@18.3.0)
-      '@react-types/shared': 3.27.0(react@18.3.0)
-      '@swc/helpers': 0.5.15
-      clsx: 2.1.1
-      react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
-
   '@react-aria/virtualizer@4.1.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@react-aria/i18n': 3.12.5(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
@@ -19625,6 +19640,12 @@ snapshots:
       '@swc/helpers': 0.5.15
       react: 18.3.0
 
+  '@react-stately/toast@3.0.0-beta.7(react@18.3.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
+      react: 18.3.0
+      use-sync-external-store: 1.4.0(react@18.3.0)
+
   '@react-stately/toggle@3.8.1(react@18.3.0)':
     dependencies:
       '@react-stately/utils': 3.10.5(react@18.3.0)
@@ -20203,10 +20224,10 @@ snapshots:
     dependencies:
       storybook: 8.5.0(prettier@3.4.2)
 
-  '@storybook/react-dom-shim@8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))':
+  '@storybook/react-dom-shim@8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))':
     dependencies:
       react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
+      react-dom: 18.3.0(react@18.3.0)
       storybook: 8.5.0(prettier@2.8.8)
 
   '@storybook/react-dom-shim@8.5.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@3.4.2))':
@@ -20237,16 +20258,16 @@ snapshots:
       - supports-color
       - typescript
 
-  '@storybook/react@8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)':
+  '@storybook/react@8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)':
     dependencies:
       '@storybook/components': 8.4.7(storybook@8.5.0(prettier@2.8.8))
       '@storybook/global': 5.0.0
       '@storybook/manager-api': 8.4.7(storybook@8.5.0(prettier@2.8.8))
       '@storybook/preview-api': 8.4.7(storybook@8.5.0(prettier@2.8.8))
-      '@storybook/react-dom-shim': 8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))
+      '@storybook/react-dom-shim': 8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))
       '@storybook/theming': 8.4.7(storybook@8.5.0(prettier@2.8.8))
       react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
+      react-dom: 18.3.0(react@18.3.0)
       storybook: 8.5.0(prettier@2.8.8)
     optionalDependencies:
       typescript: 5.7.3
@@ -20405,12 +20426,12 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
+  '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@testing-library/dom': 10.4.0
       react: 18.3.0
-      react-dom: 18.3.1(react@18.3.0)
+      react-dom: 18.3.0(react@18.3.0)
     optionalDependencies:
       '@types/react': 18.2.8
       '@types/react-dom': 18.2.4
@@ -21599,7 +21620,7 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  bundle-require@5.0.0(esbuild@0.24.2):
+  bundle-require@5.1.0(esbuild@0.24.2):
     dependencies:
       esbuild: 0.24.2
       load-tsconfig: 0.2.5
@@ -21807,9 +21828,9 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  chokidar@4.0.2:
+  chokidar@4.0.3:
     dependencies:
-      readdirp: 4.0.2
+      readdirp: 4.1.1
 
   chownr@1.1.4: {}
 
@@ -22106,7 +22127,7 @@ snapshots:
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@5.7.3)
-      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)
+      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
       typescript: 5.7.3
 
   cosmiconfig@8.3.6(typescript@5.7.3):
@@ -22127,13 +22148,13 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
-  create-jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
+  create-jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
     dependencies:
       '@jest/types': 29.6.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -22796,7 +22817,7 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0):
+  eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       confusing-browser-globals: 1.0.11
       eslint: 7.32.0
@@ -22804,11 +22825,11 @@ snapshots:
       object.assign: 4.1.7
       object.entries: 1.1.8
 
-  eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
+  eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
     dependencies:
       '@typescript-eslint/parser': 4.33.0(eslint@7.32.0)(typescript@5.7.3)
-      eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
-      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
+      eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
+      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
     transitivePeerDependencies:
       - eslint
       - eslint-plugin-import
@@ -22818,10 +22839,10 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-config-airbnb@18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0):
+  eslint-config-airbnb@18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       eslint: 7.32.0
-      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
+      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0)
       eslint-plugin-react: 7.37.3(eslint@7.32.0)
@@ -22853,7 +22874,7 @@ snapshots:
     dependencies:
       eslint: 7.32.0
 
-  eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0)(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
+  eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
     dependencies:
       '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3)
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.7.3)
@@ -22912,7 +22933,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.97.1):
+  eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)):
     dependencies:
       eslint: 7.32.0
       find-cache-dir: 3.3.2
@@ -22920,9 +22941,9 @@ snapshots:
       loader-utils: 2.0.4
       object-hash: 2.2.0
       schema-utils: 2.7.1
-      webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))
+      webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -22956,7 +22977,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -23432,7 +23453,7 @@ snapshots:
     dependencies:
       walk-up-path: 3.0.1
 
-  fdir@6.4.2(picomatch@4.0.2):
+  fdir@6.4.3(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
 
@@ -24682,16 +24703,16 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
+  jest-cli@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      create-jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       exit: 0.1.2
       import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       jest-util: 29.7.0
       jest-validate: 29.7.0
       yargs: 17.7.2
@@ -24701,7 +24722,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
+  jest-config@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
     dependencies:
       '@babel/core': 7.26.0
       '@jest/test-sequencer': 29.7.0
@@ -24727,7 +24748,7 @@ snapshots:
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 15.14.9
-      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)
+      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -24944,11 +24965,11 @@ snapshots:
       leven: 3.1.0
       pretty-format: 29.7.0
 
-  jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))):
+  jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))):
     dependencies:
       ansi-escapes: 6.2.1
       chalk: 5.4.1
-      jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       jest-regex-util: 29.6.3
       jest-watcher: 29.7.0
       slash: 5.1.0
@@ -24979,12 +25000,12 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
+  jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
       '@jest/types': 29.6.3
       import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+      jest-cli: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -27013,6 +27034,14 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.49
 
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.7.0
+    optionalDependencies:
+      postcss: 8.4.49
+      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
+
   postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)):
     dependencies:
       lilconfig: 3.1.3
@@ -27352,12 +27381,6 @@ snapshots:
       react: 18.3.0
       scheduler: 0.23.2
 
-  react-dom@18.3.1(react@18.3.0):
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.0
-      scheduler: 0.23.2
-
   react-error-overlay@6.0.9: {}
 
   react-hook-form@7.54.2(react@18.3.0):
@@ -27502,7 +27525,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.2: {}
+  readdirp@4.1.1: {}
 
   recast@0.23.9:
     dependencies:
@@ -28624,10 +28647,10 @@ snapshots:
       tailwind-merge: 2.5.4
       tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3))
 
-  tailwind-variants@0.3.0(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))):
+  tailwind-variants@0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))):
     dependencies:
       tailwind-merge: 2.5.4
-      tailwindcss: 3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
+      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
 
   tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)):
     dependencies:
@@ -28683,7 +28706,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
+  tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -28702,7 +28725,7 @@ snapshots:
       postcss: 8.4.49
       postcss-import: 15.1.0(postcss@8.4.49)
       postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
       postcss-nested: 6.2.0(postcss@8.4.49)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.10
@@ -28758,7 +28781,7 @@ snapshots:
 
   term-size@2.2.1: {}
 
-  terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1):
+  terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -28770,6 +28793,18 @@ snapshots:
       '@swc/core': 1.10.6(@swc/helpers@0.5.15)
       esbuild: 0.24.2
 
+  terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      jest-worker: 27.5.1
+      schema-utils: 4.3.0
+      serialize-javascript: 6.0.2
+      terser: 5.37.0
+      webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
+    optionalDependencies:
+      '@swc/core': 1.10.6(@swc/helpers@0.5.15)
+      esbuild: 0.24.2
+
   terser@5.37.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
@@ -28827,7 +28862,7 @@ snapshots:
 
   tinyglobby@0.2.10:
     dependencies:
-      fdir: 6.4.2(picomatch@4.0.2)
+      fdir: 6.4.3(picomatch@4.0.2)
       picomatch: 4.0.2
 
   tinypool@1.0.2: {}
@@ -28907,6 +28942,26 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
+  ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 15.14.9
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.7.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.10.6(@swc/helpers@0.5.15)
+
   ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
@@ -28947,6 +29002,7 @@ snapshots:
       yn: 3.1.1
     optionalDependencies:
       '@swc/core': 1.10.6(@swc/helpers@0.5.15)
+    optional: true
 
   ts-pattern@5.6.0: {}
 
@@ -28969,9 +29025,9 @@ snapshots:
 
   tsup@8.3.5(@swc/core@1.10.6(@swc/helpers@0.5.15))(jiti@1.21.7)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
     dependencies:
-      bundle-require: 5.0.0(esbuild@0.24.2)
+      bundle-require: 5.1.0(esbuild@0.24.2)
       cac: 6.7.14
-      chokidar: 4.0.2
+      chokidar: 4.0.3
       consola: 3.3.3
       debug: 4.4.0
       esbuild: 0.24.2
@@ -29578,7 +29634,7 @@ snapshots:
       loader-utils: 1.4.2
       supports-color: 6.1.0
       v8-compile-cache: 2.4.0
-      webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))
+      webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
       yargs: 13.3.2
 
   webpack-merge@5.10.0:
@@ -29613,7 +29669,39 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1)
+      terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1)))
+      watchpack: 2.4.2
+      webpack-sources: 3.2.3
+    optionalDependencies:
+      webpack-cli: 3.3.12(webpack@5.97.1)
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
+  webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.6
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.14.0
+      browserslist: 4.24.3
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.0
+      es-module-lexer: 1.6.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.3.0
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     optionalDependencies: