@cookified/toastify 1.0.1 → 1.0.2

package/lib/index.cjs

@@ -1,57 +1,77 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  DefaultToastIcon: () => DefaultToastIcon,
-  FadeAnimation: () => FadeAnimation,
-  FolderStackAnimation: () => FolderStackAnimation,
-  SlideAnimation: () => SlideAnimation,
-  Toast: () => Toast,
-  ToastAnimation: () => ToastAnimation,
-  ToastContainer: () => ToastContainer,
-  Toaster: () => Toaster,
-  defaultSpring: () => defaultSpring,
-  toast: () => toast,
-  toastStore: () => toastStore
-});
-module.exports = __toCommonJS(index_exports);
+"use client";
+'use strict';
 
-// src/toastify/Toaster.tsx
-var import_react4 = require("motion/react");
-var import_react5 = require("react");
+var react = require('motion/react');
+var react$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
-// src/toastify/Toast.tsx
-var import_lucide_react = require("lucide-react");
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/toastify/Toaster.tsx
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function XIcon() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function LoaderIcon() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: badgeClasses, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { size: 12, strokeWidth: 2.5, className: "animate-spin" }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, {}) });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: badgeClasses, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 12, strokeWidth: 2.5 }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: badgeClasses, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { size: 12, strokeWidth: 2.5 }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: badgeClasses, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
         {
           width: "12",
@@ -64,15 +84,15 @@ function DefaultToastIcon({ type }) {
           strokeLinejoin: "round",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
           ]
         }
       ) });
     case "info":
     case "neutral":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: badgeClasses, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
         {
           width: "12",
@@ -85,8 +105,8 @@ function DefaultToastIcon({ type }) {
           strokeLinejoin: "round",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
           ]
         }
       ) });
@@ -100,25 +120,25 @@ function Toast({
   globalOptions
 }) {
   if (toast2.customRenderer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: toast2.customRenderer(toast2.id) });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: toast2.customRenderer(toast2.id) });
   }
-  const icon = toast2.icon ?? globalIcons?.[toast2.type] ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultToastIcon, { type: toast2.type });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const icon = toast2.icon ?? globalIcons?.[toast2.type] ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultToastIcon, { type: toast2.type });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       onClick: () => closeOnClick && onDismiss(),
       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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toastify-content flex min-w-0 flex-1 items-center gap-3", children: [
           icon,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 flex-col justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-[13px] font-medium leading-4 text-neutral-900 dark:text-neutral-100", children: toast2.title }),
-            toast2.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 truncate text-[12px] leading-4 text-neutral-500 dark:text-neutral-400", children: toast2.description })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toastify-text-group flex min-w-0 flex-col justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "toastify-description mt-0.5 truncate text-[12px] leading-4 text-neutral-500 dark:text-neutral-400", children: toast2.description })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
-          toast2.cancel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toastify-actions flex shrink-0 items-center gap-2", children: [
+          toast2.cancel && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -131,11 +151,11 @@ 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
             }
           ),
-          toast2.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          toast2.action && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -148,7 +168,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
             }
           )
@@ -158,18 +178,12 @@ function Toast({
   );
 }
 
-// src/toastify/animations/FadeAnimation.tsx
-var import_react = require("motion/react");
-
 // src/toastify/animations/constants.ts
 var defaultSpring = {
   stiffness: 220,
   damping: 26,
   mass: 1
 };
-
-// src/toastify/animations/FadeAnimation.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
 function FadeAnimation({
   index,
   position,
@@ -181,8 +195,8 @@ function FadeAnimation({
   const isTop = position.startsWith("top");
   const stackStep = 66;
   const targetY = isTop ? index * stackStep : -index * stackStep;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react.motion.article,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.motion.article,
     {
       role: "status",
       "aria-live": "polite",
@@ -221,7 +235,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,
@@ -231,10 +245,6 @@ function FadeAnimation({
     }
   );
 }
-
-// src/toastify/animations/FolderStackAnimation.tsx
-var import_react2 = require("motion/react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
 function FolderStackAnimation({
   index,
   isHovered,
@@ -255,8 +265,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__ */ (0, import_jsx_runtime3.jsx)(
-    import_react2.motion.article,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.motion.article,
     {
       role: "status",
       "aria-live": "polite",
@@ -295,7 +305,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,
@@ -306,10 +316,6 @@ function FolderStackAnimation({
     }
   );
 }
-
-// src/toastify/animations/SlideAnimation.tsx
-var import_react3 = require("motion/react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
 function SlideAnimation({
   index,
   position,
@@ -326,8 +332,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__ */ (0, import_jsx_runtime4.jsx)(
-    import_react3.motion.article,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.motion.article,
     {
       role: "status",
       "aria-live": "polite",
@@ -366,7 +372,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,
@@ -376,24 +382,21 @@ function SlideAnimation({
     }
   );
 }
-
-// src/toastify/animations/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
 function ToastAnimation({
   animation = "stack",
   ...props
 }) {
   if (typeof animation === "function") {
     const CustomAnimation = animation;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CustomAnimation, { ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(CustomAnimation, { ...props });
   }
   if (animation === "slide") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SlideAnimation, { ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideAnimation, { ...props });
   }
   if (animation === "fade") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FadeAnimation, { ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(FadeAnimation, { ...props });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FolderStackAnimation, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(FolderStackAnimation, { ...props });
 }
 
 // src/toastify/store.ts
@@ -586,15 +589,328 @@ var toast = Object.assign(toastFn, {
   }
 });
 
-// src/toastify/Toaster.tsx
-var import_jsx_runtime6 = require("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,
@@ -612,20 +928,20 @@ function ToasterItem({
   onDismiss
 }) {
   const itemDuration = toast2.type === "loading" ? false : toast2.duration !== void 0 ? toast2.duration : toastOptions?.duration !== void 0 ? toastOptions.duration : autoClose ?? duration;
-  const onDismissRef = (0, import_react5.useRef)(onDismiss);
-  (0, import_react5.useEffect)(() => {
+  const onDismissRef = react$1.useRef(onDismiss);
+  react$1.useEffect(() => {
     onDismissRef.current = onDismiss;
   }, [onDismiss]);
-  const [isDismissing, setIsDismissing] = (0, import_react5.useState)(false);
+  const [isDismissing, setIsDismissing] = react$1.useState(false);
   const handleDismiss = () => {
     setIsDismissing(true);
     onDismissRef.current();
   };
-  const remainingTimeRef = (0, import_react5.useRef)(itemDuration);
-  (0, import_react5.useEffect)(() => {
+  const remainingTimeRef = react$1.useRef(itemDuration);
+  react$1.useEffect(() => {
     remainingTimeRef.current = itemDuration;
   }, [itemDuration]);
-  (0, import_react5.useEffect)(() => {
+  react$1.useEffect(() => {
     if (itemDuration === false || isHovered) {
       return;
     }
@@ -642,7 +958,7 @@ function ToasterItem({
       }
     };
   }, [isHovered, itemDuration]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ToastAnimation,
     {
       animation,
@@ -654,7 +970,7 @@ function ToasterItem({
       isDismissing,
       onDismiss: handleDismiss,
       springConfig,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           toast: toast2,
@@ -679,13 +995,14 @@ function Toaster({
   animation = "stack",
   springConfig,
   icons,
+  unstyled = false,
   toastOptions
 }) {
-  const [toasts2, setToasts] = (0, import_react5.useState)([]);
-  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
-  const [hoverExpandedCount, setHoverExpandedCount] = (0, import_react5.useState)(null);
-  const leaveTimeoutRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => toastStore.subscribe(setToasts), []);
+  const [toasts2, setToasts] = react$1.useState([]);
+  const [isHovered, setIsHovered] = react$1.useState(false);
+  const [hoverExpandedCount, setHoverExpandedCount] = react$1.useState(null);
+  const leaveTimeoutRef = react$1.useRef(null);
+  react$1.useEffect(() => toastStore.subscribe(setToasts), []);
   const isTop = position.startsWith("top");
   const hasToasts = toasts2.length > 0;
   const activeCount = Math.min(toasts2.length, visibleToasts);
@@ -705,75 +1022,83 @@ function Toaster({
       setHoverExpandedCount(null);
     }, 140);
   };
-  (0, import_react5.useEffect)(() => {
+  react$1.useEffect(() => {
     return () => {
       if (leaveTimeoutRef.current) {
         window.clearTimeout(leaveTimeoutRef.current);
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react4.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 ? "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__ */ (0, import_jsx_runtime6.jsx)(
-        "div",
-        {
-          className: `relative w-full h-full flex ${isTop ? "flex-col" : "flex-col-reverse"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.AnimatePresence, { children: toasts2.slice(0, visibleToasts).map((toastItem, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !unstyled && /* @__PURE__ */ jsxRuntime.jsx(
+      "style",
+      {
+        "data-toastify-styles": "",
+        dangerouslySetInnerHTML: { __html: toastifyStyles }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.AnimatePresence, { children: toasts2.slice(0, visibleToasts).map((toastItem, index) => /* @__PURE__ */ jsxRuntime.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;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DefaultToastIcon,
-  FadeAnimation,
-  FolderStackAnimation,
-  SlideAnimation,
-  Toast,
-  ToastAnimation,
-  ToastContainer,
-  Toaster,
-  defaultSpring,
-  toast,
-  toastStore
-});
+
+exports.DefaultToastIcon = DefaultToastIcon;
+exports.FadeAnimation = FadeAnimation;
+exports.FolderStackAnimation = FolderStackAnimation;
+exports.SlideAnimation = SlideAnimation;
+exports.Toast = Toast;
+exports.ToastAnimation = ToastAnimation;
+exports.ToastContainer = ToastContainer;
+exports.Toaster = Toaster;
+exports.defaultSpring = defaultSpring;
+exports.toast = toast;
+exports.toastStore = toastStore;
+exports.toastifyStyles = toastifyStyles;