@cookified/toastify 1.0.0 → 1.0.2

package/{dist → lib}/index.js

@@ -1,19 +1,73 @@
-// src/toastify/Toaster.tsx
-import { AnimatePresence, motion as motion4 } from "motion/react";
-import { useEffect, useRef, useState } from "react";
+"use client";
+import { motion, AnimatePresence } from 'motion/react';
+import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/toastify/Toast.tsx
-import { Check, Loader2, X } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/toastify/Toaster.tsx
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function XIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function LoaderIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "toastify-spin animate-spin",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
 function DefaultToastIcon({ type }) {
-  const badgeClasses = "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white shadow-xs dark:bg-white dark:text-neutral-950";
+  const badgeClasses = "toastify-badge flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white shadow-xs dark:bg-white dark:text-neutral-950";
   switch (type) {
     case "loading":
-      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(Loader2, { size: 12, strokeWidth: 2.5, className: "animate-spin" }) });
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(LoaderIcon, {}) });
     case "success":
-      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(Check, { size: 12, strokeWidth: 2.5 }) });
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(CheckIcon, {}) });
     case "error":
-      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 2.5 }) });
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(XIcon, {}) });
     case "warning":
       return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxs(
         "svg",
@@ -74,14 +128,14 @@ function Toast({
       className: `toastify-toast flex h-14 w-full select-none items-center justify-between gap-3 rounded-md border border-neutral-200/90 bg-white px-3.5 shadow-md shadow-neutral-950/5 dark:border-neutral-800/90 dark:bg-neutral-900 dark:shadow-neutral-950/40 ${globalOptions?.className ?? ""} ${toast2.className ?? ""}`,
       style: { ...globalOptions?.style, ...toast2.style },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "toastify-content flex min-w-0 flex-1 items-center gap-3", children: [
           icon,
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col justify-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "truncate text-[13px] font-medium leading-4 text-neutral-900 dark:text-neutral-100", children: toast2.title }),
-            toast2.description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-[12px] leading-4 text-neutral-500 dark:text-neutral-400", children: toast2.description })
+          /* @__PURE__ */ jsxs("div", { className: "toastify-text-group flex min-w-0 flex-col justify-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "toastify-title truncate text-[13px] font-medium leading-4 text-neutral-900 dark:text-neutral-100", children: toast2.title }),
+            toast2.description && /* @__PURE__ */ jsx("div", { className: "toastify-description mt-0.5 truncate text-[12px] leading-4 text-neutral-500 dark:text-neutral-400", children: toast2.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "toastify-actions flex shrink-0 items-center gap-2", children: [
           toast2.cancel && /* @__PURE__ */ jsx(
             "button",
             {
@@ -95,7 +149,7 @@ function Toast({
                 }
                 onDismiss();
               },
-              className: "cursor-pointer rounded px-2 py-1 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100",
+              className: "toastify-btn-cancel cursor-pointer rounded px-2 py-1 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100",
               children: toast2.cancel.label
             }
           ),
@@ -112,7 +166,7 @@ function Toast({
                 }
                 onDismiss();
               },
-              className: "cursor-pointer rounded px-2.5 py-1 text-xs font-medium bg-neutral-900 text-white transition-all hover:bg-neutral-800 shadow-[inset_0_-2px_4px_rgba(0,0,0,0.5),0_1px_2px_rgba(0,0,0,0.08)] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200 dark:shadow-[inset_0_-2px_4px_rgba(0,0,0,0.22),0_1px_2px_rgba(0,0,0,0.15)] dark:active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.25)]",
+              className: "toastify-btn-action cursor-pointer rounded px-2.5 py-1 text-xs font-medium bg-neutral-900 text-white transition-all hover:bg-neutral-800 shadow-[inset_0_-2px_4px_rgba(0,0,0,0.5),0_1px_2px_rgba(0,0,0,0.08)] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200 dark:shadow-[inset_0_-2px_4px_rgba(0,0,0,0.22),0_1px_2px_rgba(0,0,0,0.15)] dark:active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.25)]",
               children: toast2.action.label
             }
           )
@@ -122,18 +176,12 @@ function Toast({
   );
 }
 
-// src/toastify/animations/FadeAnimation.tsx
-import { motion } from "motion/react";
-
 // src/toastify/animations/constants.ts
 var defaultSpring = {
   stiffness: 220,
   damping: 26,
   mass: 1
 };
-
-// src/toastify/animations/FadeAnimation.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
 function FadeAnimation({
   index,
   position,
@@ -145,7 +193,7 @@ function FadeAnimation({
   const isTop = position.startsWith("top");
   const stackStep = 66;
   const targetY = isTop ? index * stackStep : -index * stackStep;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     motion.article,
     {
       role: "status",
@@ -185,7 +233,7 @@ function FadeAnimation({
           onDismiss();
         }
       },
-      className: "absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
+      className: "toastify-item absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
       style: {
         [isTop ? "top" : "bottom"]: 0,
         left: 0,
@@ -195,10 +243,6 @@ function FadeAnimation({
     }
   );
 }
-
-// src/toastify/animations/FolderStackAnimation.tsx
-import { motion as motion2 } from "motion/react";
-import { jsx as jsx3 } from "react/jsx-runtime";
 function FolderStackAnimation({
   index,
   isHovered,
@@ -219,8 +263,8 @@ function FolderStackAnimation({
   const targetScale = collapsed ? Math.max(0.88, 1 - index * 0.05) : 1;
   const targetOpacity = !isVisible ? 0 : collapsed ? index === 0 ? 1 : index === 1 ? 0.94 : 0.84 : 1;
   const exitX = isCenter ? 0 : isLeft ? -36 : 36;
-  return /* @__PURE__ */ jsx3(
-    motion2.article,
+  return /* @__PURE__ */ jsx(
+    motion.article,
     {
       role: "status",
       "aria-live": "polite",
@@ -259,7 +303,7 @@ function FolderStackAnimation({
           onDismiss();
         }
       },
-      className: "absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
+      className: "toastify-item absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
       style: {
         [isTop ? "top" : "bottom"]: 0,
         left: 0,
@@ -270,10 +314,6 @@ function FolderStackAnimation({
     }
   );
 }
-
-// src/toastify/animations/SlideAnimation.tsx
-import { motion as motion3 } from "motion/react";
-import { jsx as jsx4 } from "react/jsx-runtime";
 function SlideAnimation({
   index,
   position,
@@ -290,8 +330,8 @@ function SlideAnimation({
   const entryX = isCenter ? 0 : isLeft ? -120 : 120;
   const exitX = isCenter ? 0 : isLeft ? -140 : 140;
   const initialY = isCenter ? isTop ? targetY - 30 : targetY + 30 : targetY;
-  return /* @__PURE__ */ jsx4(
-    motion3.article,
+  return /* @__PURE__ */ jsx(
+    motion.article,
     {
       role: "status",
       "aria-live": "polite",
@@ -330,7 +370,7 @@ function SlideAnimation({
           onDismiss();
         }
       },
-      className: "absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
+      className: "toastify-item absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
       style: {
         [isTop ? "top" : "bottom"]: 0,
         left: 0,
@@ -340,24 +380,21 @@ function SlideAnimation({
     }
   );
 }
-
-// src/toastify/animations/index.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
 function ToastAnimation({
   animation = "stack",
   ...props
 }) {
   if (typeof animation === "function") {
     const CustomAnimation = animation;
-    return /* @__PURE__ */ jsx5(CustomAnimation, { ...props });
+    return /* @__PURE__ */ jsx(CustomAnimation, { ...props });
   }
   if (animation === "slide") {
-    return /* @__PURE__ */ jsx5(SlideAnimation, { ...props });
+    return /* @__PURE__ */ jsx(SlideAnimation, { ...props });
   }
   if (animation === "fade") {
-    return /* @__PURE__ */ jsx5(FadeAnimation, { ...props });
+    return /* @__PURE__ */ jsx(FadeAnimation, { ...props });
   }
-  return /* @__PURE__ */ jsx5(FolderStackAnimation, { ...props });
+  return /* @__PURE__ */ jsx(FolderStackAnimation, { ...props });
 }
 
 // src/toastify/store.ts
@@ -550,15 +587,328 @@ var toast = Object.assign(toastFn, {
   }
 });
 
-// src/toastify/Toaster.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+// src/toastify/styles.ts
+var toastifyStyles = `
+/* Toastify Standalone CSS */
+@keyframes toastify-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.toastify-spin {
+  animation: toastify-spin 1s linear infinite;
+}
+
+.toastify-toaster {
+  position: fixed;
+  z-index: 9999;
+  width: 356px;
+  max-width: calc(100vw - 32px);
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.toastify-toaster *,
+.toastify-toaster *::before,
+.toastify-toaster *::after {
+  box-sizing: border-box;
+}
+
+/* Positions */
+.toastify-pos-top-left {
+  top: 24px;
+  left: 24px;
+}
+.toastify-pos-top-center {
+  top: 24px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.toastify-pos-top-right {
+  top: 24px;
+  right: 24px;
+}
+.toastify-pos-bottom-left {
+  bottom: 24px;
+  left: 24px;
+}
+.toastify-pos-bottom-center {
+  bottom: 24px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.toastify-pos-bottom-right {
+  bottom: 24px;
+  right: 24px;
+}
+
+.toastify-pointer-auto {
+  pointer-events: auto;
+}
+.toastify-pointer-none {
+  pointer-events: none;
+}
+
+/* Toast List Container */
+.toastify-list {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.toastify-list-col {
+  flex-direction: column;
+}
+.toastify-list-col-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Individual Toast Item wrapper */
+.toastify-item {
+  position: absolute;
+  height: 56px;
+  width: 100%;
+  user-select: none;
+  cursor: grab;
+}
+.toastify-item:active {
+  cursor: grabbing;
+}
+
+/* Toast Card with Tactile Micro-bevels */
+.toastify-toast {
+  display: flex;
+  height: 56px;
+  width: 100%;
+  user-select: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-radius: 8px;
+  padding: 0 14px;
+  box-sizing: border-box;
+  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  
+  /* Light theme default */
+  background-color: #ffffff;
+  border: 1px solid rgba(229, 231, 235, 0.9);
+  color: #111827;
+  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
+}
+
+/* Dark theme overrides */
+.toastify-toaster.dark .toastify-toast,
+[data-theme="dark"] .toastify-toast,
+.dark .toastify-toast {
+  background-color: #171717;
+  border: 1px solid rgba(38, 38, 38, 0.9);
+  color: #f5f5f5;
+  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);
+}
+
+/* System dark theme preference when theme="system" */
+@media (prefers-color-scheme: dark) {
+  .toastify-toaster.system .toastify-toast {
+    background-color: #171717;
+    border: 1px solid rgba(38, 38, 38, 0.9);
+    color: #f5f5f5;
+    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);
+  }
+  .toastify-toaster.system .toastify-badge {
+    background-color: #ffffff;
+    color: #0a0a0a;
+  }
+  .toastify-toaster.system .toastify-title {
+    color: #f5f5f5;
+  }
+  .toastify-toaster.system .toastify-description {
+    color: #a3a3a3;
+  }
+  .toastify-toaster.system .toastify-btn-cancel {
+    color: #a3a3a3;
+  }
+  .toastify-toaster.system .toastify-btn-cancel:hover {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+  .toastify-toaster.system .toastify-btn-action {
+    background-color: #f5f5f5;
+    color: #171717;
+    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);
+  }
+  .toastify-toaster.system .toastify-btn-action:hover {
+    background-color: #e5e5e5;
+  }
+}
+
+/* Badge Icon Wrapper */
+.toastify-badge {
+  display: flex;
+  height: 20px;
+  width: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: #171717;
+  color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.toastify-toaster.dark .toastify-badge,
+[data-theme="dark"] .toastify-badge,
+.dark .toastify-badge {
+  background-color: #ffffff;
+  color: #0a0a0a;
+}
+
+/* Content Area */
+.toastify-content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0%;
+  align-items: center;
+  gap: 12px;
+}
+
+.toastify-text-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.toastify-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+  color: #171717;
+}
+
+.toastify-toaster.dark .toastify-title,
+[data-theme="dark"] .toastify-title,
+.dark .toastify-title {
+  color: #f5f5f5;
+}
+
+.toastify-description {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 16px;
+  color: #737373;
+}
+
+.toastify-toaster.dark .toastify-description,
+[data-theme="dark"] .toastify-description,
+.dark .toastify-description {
+  color: #a3a3a3;
+}
+
+/* Action Area */
+.toastify-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.toastify-btn-cancel {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #525252;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.toastify-btn-cancel:hover {
+  background-color: #f5f5f5;
+  color: #171717;
+}
+
+.toastify-toaster.dark .toastify-btn-cancel,
+[data-theme="dark"] .toastify-btn-cancel,
+.dark .toastify-btn-cancel {
+  color: #a3a3a3;
+}
+
+.toastify-toaster.dark .toastify-btn-cancel:hover,
+[data-theme="dark"] .toastify-btn-cancel:hover,
+.dark .toastify-btn-cancel:hover {
+  background-color: #262626;
+  color: #f5f5f5;
+}
+
+.toastify-btn-action {
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #171717;
+  color: #ffffff;
+  transition: background-color 0.15s, box-shadow 0.15s;
+  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.toastify-btn-action:hover {
+  background-color: #262626;
+}
+
+.toastify-btn-action:active {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.toastify-toaster.dark .toastify-btn-action,
+[data-theme="dark"] .toastify-btn-action,
+.dark .toastify-btn-action {
+  background-color: #f5f5f5;
+  color: #171717;
+  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.toastify-toaster.dark .toastify-btn-action:hover,
+[data-theme="dark"] .toastify-btn-action:hover,
+.dark .toastify-btn-action:hover {
+  background-color: #e5e5e5;
+}
+
+.toastify-toaster.dark .toastify-btn-action:active,
+[data-theme="dark"] .toastify-btn-action:active,
+.dark .toastify-btn-action:active {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+`;
 var positionClasses = {
-  "top-left": "top-6 left-6",
-  "top-center": "top-6 left-0 right-0 mx-auto",
-  "top-right": "top-6 right-6",
-  "bottom-left": "bottom-6 left-6",
-  "bottom-center": "bottom-6 left-0 right-0 mx-auto",
-  "bottom-right": "bottom-6 right-6"
+  "top-left": "toastify-pos-top-left top-6 left-6",
+  "top-center": "toastify-pos-top-center top-6 left-0 right-0 mx-auto",
+  "top-right": "toastify-pos-top-right top-6 right-6",
+  "bottom-left": "toastify-pos-bottom-left bottom-6 left-6",
+  "bottom-center": "toastify-pos-bottom-center bottom-6 left-0 right-0 mx-auto",
+  "bottom-right": "toastify-pos-bottom-right bottom-6 right-6"
 };
 function ToasterItem({
   toast: toast2,
@@ -606,7 +956,7 @@ function ToasterItem({
       }
     };
   }, [isHovered, itemDuration]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx(
     ToastAnimation,
     {
       animation,
@@ -618,7 +968,7 @@ function ToasterItem({
       isDismissing,
       onDismiss: handleDismiss,
       springConfig,
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx(
         Toast,
         {
           toast: toast2,
@@ -643,6 +993,7 @@ function Toaster({
   animation = "stack",
   springConfig,
   icons,
+  unstyled = false,
   toastOptions
 }) {
   const [toasts2, setToasts] = useState([]);
@@ -676,67 +1027,65 @@ function Toaster({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsx6(
-    motion4.div,
-    {
-      "data-toastify-toaster": "true",
-      role: "region",
-      "aria-label": "Notifications",
-      "aria-live": "polite",
-      tabIndex: -1,
-      className: `toastify-toaster fixed z-50 w-[356px] max-w-[calc(100vw-32px)] ${hasToasts ? "pointer-events-auto" : "pointer-events-none"} ${positionClasses[position]} ${theme === "dark" ? "dark" : ""} ${className ?? ""}`,
-      style,
-      animate: {
-        height: containerHeight
-      },
-      transition: {
-        type: "spring",
-        stiffness: 220,
-        damping: 26,
-        mass: 1,
-        ...springConfig
-      },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: /* @__PURE__ */ jsx6(
-        "div",
-        {
-          className: `relative w-full h-full flex ${isTop ? "flex-col" : "flex-col-reverse"}`,
-          children: /* @__PURE__ */ jsx6(AnimatePresence, { children: toasts2.slice(0, visibleToasts).map((toastItem, index) => /* @__PURE__ */ jsx6(
-            ToasterItem,
-            {
-              toast: toastItem,
-              index,
-              totalToasts: toasts2.length,
-              isHovered,
-              position,
-              duration,
-              autoClose,
-              closeOnClick,
-              animation,
-              springConfig,
-              icons,
-              toastOptions,
-              onDismiss: () => toastStore.remove(toastItem.id)
-            },
-            toastItem.id
-          )) })
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !unstyled && /* @__PURE__ */ jsx(
+      "style",
+      {
+        "data-toastify-styles": "",
+        dangerouslySetInnerHTML: { __html: toastifyStyles }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        "data-toastify-toaster": "true",
+        role: "region",
+        "aria-label": "Notifications",
+        "aria-live": "polite",
+        tabIndex: -1,
+        className: `toastify-toaster fixed z-50 w-[356px] max-w-[calc(100vw-32px)] ${hasToasts ? "toastify-pointer-auto pointer-events-auto" : "toastify-pointer-none pointer-events-none"} ${positionClasses[position]} ${theme === "dark" ? "dark" : theme === "system" ? "system" : ""} ${className ?? ""}`,
+        style,
+        animate: {
+          height: containerHeight
+        },
+        transition: {
+          type: "spring",
+          stiffness: 220,
+          damping: 26,
+          mass: 1,
+          ...springConfig
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `toastify-list relative w-full h-full flex ${isTop ? "toastify-list-col flex-col" : "toastify-list-col-reverse flex-col-reverse"}`,
+            children: /* @__PURE__ */ jsx(AnimatePresence, { children: toasts2.slice(0, visibleToasts).map((toastItem, index) => /* @__PURE__ */ jsx(
+              ToasterItem,
+              {
+                toast: toastItem,
+                index,
+                totalToasts: toasts2.length,
+                isHovered,
+                position,
+                duration,
+                autoClose,
+                closeOnClick,
+                animation,
+                springConfig,
+                icons,
+                toastOptions,
+                onDismiss: () => toastStore.remove(toastItem.id)
+              },
+              toastItem.id
+            )) })
+          }
+        )
+      }
+    )
+  ] });
 }
 var ToastContainer = Toaster;
-export {
-  DefaultToastIcon,
-  FadeAnimation,
-  FolderStackAnimation,
-  SlideAnimation,
-  Toast,
-  ToastAnimation,
-  ToastContainer,
-  Toaster,
-  defaultSpring,
-  toast,
-  toastStore
-};
+
+export { DefaultToastIcon, FadeAnimation, FolderStackAnimation, SlideAnimation, Toast, ToastAnimation, ToastContainer, Toaster, defaultSpring, toast, toastStore, toastifyStyles };