vue-sonner - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

lib/vue-sonner.js

@@ -1,6 +0,6 @@
-var Yt = Object.defineProperty;
-var Lt = (s, a, t) => a in s ? Yt(s, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[a] = t;
-var B = (s, a, t) => Lt(s, typeof a != "symbol" ? a + "" : a, t);
-import { ref as p, watchEffect as W, defineComponent as vt, computed as y, onMounted as It, onUnmounted as Rt, openBlock as l, createElementBlock as h, normalizeClass as j, normalizeStyle as ut, unref as Y, createBlock as q, resolveDynamicComponent as Z, renderSlot as E, createCommentVNode as F, mergeProps as ct, Fragment as V, createElementVNode as M, normalizeProps as Et, createTextVNode as Pt, toDisplayString as lt, renderList as gt, useAttrs as Ft, nextTick as jt, watch as Dt, withCtx as X, createVNode as G } from "vue";
-function Nt(s) {
+var Ut = Object.defineProperty;
+var Kt = (s, a, t) => a in s ? Ut(s, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[a] = t;
+var B = (s, a, t) => Kt(s, typeof a != "symbol" ? a + "" : a, t);
+import { ref as p, watchEffect as W, defineComponent as vt, computed as y, onMounted as Yt, onUnmounted as Gt, openBlock as l, createElementBlock as h, normalizeClass as Y, normalizeStyle as ut, unref as L, createBlock as G, resolveDynamicComponent as Z, renderSlot as P, createCommentVNode as j, mergeProps as ct, Fragment as V, createElementVNode as M, normalizeProps as Lt, createTextVNode as Nt, toDisplayString as lt, renderList as gt, useAttrs as qt, nextTick as Jt, watch as Rt, withCtx as K, createVNode as X } from "vue";
+function Xt(s) {
   if (!s || typeof document > "u") return;
@@ -10,3 +10,3 @@ let a = document.head || document.getElementsByTagName("head")[0], t = document.createElement("style");
 }
-Nt(`:where([data-sonner-toaster][dir=ltr]),:where(html[dir=ltr]){--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}:where([data-sonner-toaster][dir=rtl]),:where(html[dir=rtl]){--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}:where([data-sonner-toaster]){position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999}:where([data-sonner-toaster][data-x-position=right]){right:max(var(--offset),env(safe-area-inset-right))}:where([data-sonner-toaster][data-x-position=left]){left:max(var(--offset),env(safe-area-inset-left))}:where([data-sonner-toaster][data-x-position=center]){left:50%;transform:translateX(-50%)}:where([data-sonner-toaster][data-y-position=top]){top:max(var(--offset),env(safe-area-inset-top))}:where([data-sonner-toaster][data-y-position=bottom]){bottom:max(var(--offset),env(safe-area-inset-bottom))}:where([data-sonner-toast]){--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);filter:blur(0);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}:where([data-sonner-toast][data-styled=true]){padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}:where([data-sonner-toast]:focus-visible){box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}:where([data-sonner-toast][data-y-position=top]){top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}:where([data-sonner-toast][data-y-position=bottom]){bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}:where([data-sonner-toast]) :where([data-description]){font-weight:400;line-height:1.4;color:inherit}:where([data-sonner-toast]) :where([data-title]){font-weight:500;line-height:1.5;color:inherit}:where([data-sonner-toast]) :where([data-icon]){display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}:where([data-sonner-toast][data-promise=true]) :where([data-icon])>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}:where([data-sonner-toast]) :where([data-icon])>*{flex-shrink:0}:where([data-sonner-toast]) :where([data-icon]) svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}:where([data-sonner-toast]) :where([data-content]){display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}:where([data-sonner-toast]) :where([data-button]):focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}:where([data-sonner-toast]) :where([data-button]):first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}:where([data-sonner-toast]) :where([data-cancel]){color:var(--normal-text);background:rgba(0,0,0,.08)}:where([data-sonner-toast][data-theme=dark]) :where([data-cancel]){background:rgba(255,255,255,.3)}[data-sonner-toast] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--normal-bg);color:var(--normal-text);border:1px solid var(--normal-border);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}:where([data-sonner-toast]) :where([data-disabled=true]){cursor:not-allowed}[data-sonner-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast]:hover [data-close-button]:hover{background:#000;border-color:#4c4c4c}:where([data-sonner-toast][data-swiping=true])::before{content:'';position:absolute;left:0;right:0;height:100%;z-index:-1}:where(
+Xt(`:where([data-sonner-toaster][dir=ltr]),:where(html[dir=ltr]){--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}:where([data-sonner-toaster][dir=rtl]),:where(html[dir=rtl]){--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}:where([data-sonner-toaster]){position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999}:where([data-sonner-toaster][data-x-position=right]){right:max(var(--offset),env(safe-area-inset-right))}:where([data-sonner-toaster][data-x-position=left]){left:max(var(--offset),env(safe-area-inset-left))}:where([data-sonner-toaster][data-x-position=center]){left:50%;transform:translateX(-50%)}:where([data-sonner-toaster][data-y-position=top]){top:max(var(--offset),env(safe-area-inset-top))}:where([data-sonner-toaster][data-y-position=bottom]){bottom:max(var(--offset),env(safe-area-inset-bottom))}:where([data-sonner-toast]){--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);filter:blur(0);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}:where([data-sonner-toast][data-styled=true]){padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}:where([data-sonner-toast]:focus-visible){box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}:where([data-sonner-toast][data-y-position=top]){top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}:where([data-sonner-toast][data-y-position=bottom]){bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}:where([data-sonner-toast]) :where([data-description]){font-weight:400;line-height:1.4;color:inherit}:where([data-sonner-toast]) :where([data-title]){font-weight:500;line-height:1.5;color:inherit}:where([data-sonner-toast]) :where([data-icon]){display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}:where([data-sonner-toast][data-promise=true]) :where([data-icon])>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}:where([data-sonner-toast]) :where([data-icon])>*{flex-shrink:0}:where([data-sonner-toast]) :where([data-icon]) svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}:where([data-sonner-toast]) :where([data-content]){display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}:where([data-sonner-toast]) :where([data-button]):focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}:where([data-sonner-toast]) :where([data-button]):first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}:where([data-sonner-toast]) :where([data-cancel]){color:var(--normal-text);background:rgba(0,0,0,.08)}:where([data-sonner-toast][data-theme=dark]) :where([data-cancel]){background:rgba(255,255,255,.3)}[data-sonner-toast] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--normal-bg);color:var(--normal-text);border:1px solid var(--normal-border);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}:where([data-sonner-toast]) :where([data-disabled=true]){cursor:not-allowed}[data-sonner-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast]:hover [data-close-button]:hover{background:#000;border-color:#4c4c4c}:where([data-sonner-toast][data-swiping=true])::before{content:'';position:absolute;left:0;right:0;height:100%;z-index:-1}:where(
 [data-sonner-toast][data-y-position=top][data-swiping=true]
@@ -25,3 +25,3 @@ )::before{bottom:50%;transform:scaleY(3) translateY(50%)}:where(
 let mt = 0;
-class Vt {
+class Qt {
   constructor() {
@@ -42,4 +42,4 @@ B(this, "subscribers");
     B(this, "create", (a) => {
-      var k;
-      const { message: t, ...r } = a, n = typeof a.id == "number" || a.id && ((k = a.id) == null ? void 0 : k.length) > 0 ? a.id : mt++, g = this.toasts.find((m) => m.id === n), x = a.dismissible === void 0 ? !0 : a.dismissible;
+      var x;
+      const { message: t, ...r } = a, n = typeof a.id == "number" || a.id && ((x = a.id) == null ? void 0 : x.length) > 0 ? a.id : mt++, g = this.toasts.find((m) => m.id === n), k = a.dismissible === void 0 ? !0 : a.dismissible;
       return g ? this.toasts = this.toasts.map((m) => m.id === n ? (this.publish({ ...m, ...a, id: n, title: t }), {
@@ -49,5 +49,5 @@ ...m,
         id: n,
-        dismissible: x,
+        dismissible: k,
         title: t
-      }) : m) : this.addToast({ title: t, ...r, dismissible: x, id: n }), n;
+      }) : m) : this.addToast({ title: t, ...r, dismissible: k, id: n }), n;
     });
@@ -77,5 +77,5 @@ B(this, "dismiss", (a) => (a || this.toasts.forEach((t) => {
       const n = a instanceof Promise ? a : a();
-      let g = r !== void 0, x;
-      const k = n.then(async (d) => {
-        if (x = ["resolve", d], Ut(d) && !d.ok) {
+      let g = r !== void 0, k;
+      const x = n.then(async (d) => {
+        if (k = ["resolve", d], _t(d) && !d.ok) {
           g = !1;
@@ -95,3 +95,3 @@ const v = typeof t.error == "function" ? await t.error(
       }).catch(async (d) => {
-        if (x = ["reject", d], t.error !== void 0) {
+        if (k = ["reject", d], t.error !== void 0) {
           g = !1;
@@ -107,4 +107,4 @@ const v = typeof t.error == "function" ? await t.error(d) : t.error, f = typeof t.description == "function" ? await t.description(
       }), m = () => new Promise(
-        (d, v) => k.then(
-          () => x[0] === "reject" ? v(x[1]) : d(x[1])
+        (d, v) => x.then(
+          () => k[0] === "reject" ? v(k[1]) : d(k[1])
         ).catch(v)
@@ -122,4 +122,4 @@ );
 }
-const $ = new Vt();
-function Wt(s, a) {
+const $ = new Qt();
+function Zt(s, a) {
   const t = (a == null ? void 0 : a.id) || mt++;
@@ -133,4 +133,4 @@ return $.create({
 }
-const Ut = (s) => s && typeof s == "object" && "ok" in s && typeof s.ok == "boolean" && "status" in s && typeof s.status == "number", Kt = Wt, Xt = () => $.toasts, Oe = Object.assign(
-  Kt,
+const _t = (s) => s && typeof s == "object" && "ok" in s && typeof s.ok == "boolean" && "status" in s && typeof s.status == "number", te = Zt, ee = () => $.toasts, Ve = Object.assign(
+  te,
   {
@@ -148,3 +148,3 @@ success: $.success,
   {
-    getHistory: Xt
+    getHistory: ee
   }
@@ -155,3 +155,3 @@ );
 }
-function Gt() {
+function ae() {
   const s = p(!1);
@@ -167,3 +167,3 @@ return W(() => {
 }
-function Ye() {
+function We() {
   const s = p([]);
@@ -193,6 +193,6 @@ return W((a) => {
 }
-const qt = ["aria-live", "data-rich-colors", "data-styled", "data-mounted", "data-promise", "data-removed", "data-visible", "data-y-position", "data-x-position", "data-index", "data-front", "data-swiping", "data-dismissible", "data-type", "data-invert", "data-swipe-out", "data-expanded"], Jt = ["aria-label", "data-disabled"], Qt = {
+const oe = ["aria-live", "data-rich-colors", "data-styled", "data-mounted", "data-promise", "data-removed", "data-visible", "data-y-position", "data-x-position", "data-index", "data-front", "data-swiping", "data-dismissible", "data-type", "data-invert", "data-swipe-out", "data-expanded"], se = ["aria-label", "data-disabled"], ne = {
   key: 0,
   "data-icon": ""
-}, Zt = { "data-content": "" }, _t = 4e3, te = 20, ee = 200, ae = /* @__PURE__ */ vt({
+}, re = 4e3, ie = 20, le = 200, de = /* @__PURE__ */ vt({
   __name: "Toast",
@@ -229,10 +229,10 @@ props: {
   setup(s, { emit: a }) {
-    const t = s, r = a, n = p(!1), g = p(!1), x = p(!1), k = p(!1), m = p(0), d = p(0), v = p(null), f = p(null), L = y(() => t.index === 0), ft = y(() => t.index + 1 <= t.visibleToasts), P = y(() => t.toast.type), N = y(() => t.toast.dismissible !== !1), pt = y(() => t.toast.class || ""), ht = y(() => t.descriptionClass || ""), o = t.toast.style || {}, i = y(
+    const t = s, r = a, n = p(!1), g = p(!1), k = p(!1), x = p(!1), m = p(0), d = p(0), v = p(null), f = p(null), N = y(() => t.index === 0), ft = y(() => t.index + 1 <= t.visibleToasts), I = y(() => t.toast.type), R = y(() => t.toast.dismissible !== !1), pt = y(() => t.toast.class || ""), ht = y(() => t.descriptionClass || ""), o = t.toast.style || {}, i = y(
       () => t.heights.findIndex((e) => e.toastId === t.toast.id) || 0
     ), c = y(() => t.toast.closeButton ?? t.closeButton), C = y(
-      () => t.toast.duration || t.duration || _t
-    ), S = p(0), T = p(0), R = p(0), z = p(null), U = y(() => t.position.split("-")), tt = y(() => U.value[0]), et = y(() => U.value[1]), at = y(() => typeof t.toast.title != "string"), ot = y(
+      () => t.toast.duration || t.duration || re
+    ), S = p(0), T = p(0), F = p(0), z = p(null), U = y(() => t.position.split("-")), tt = y(() => U.value[0]), et = y(() => U.value[1]), at = y(() => typeof t.toast.title != "string"), ot = y(
       () => typeof t.toast.description != "string"
-    ), st = y(() => t.heights.reduce((e, u, w) => w >= i.value ? e : e + u.height, 0)), nt = Gt(), rt = y(() => t.toast.invert || t.invert), H = y(() => P.value === "loading");
-    It(() => {
+    ), st = y(() => t.heights.reduce((e, u, w) => w >= i.value ? e : e + u.height, 0)), nt = ae(), rt = y(() => t.toast.invert || t.invert), H = y(() => I.value === "loading");
+    Yt(() => {
       if (!n.value) return;
@@ -243,8 +243,8 @@ const e = f.value, u = e == null ? void 0 : e.style.height;
       e.style.height = u, d.value = w;
-      let I;
+      let E;
       t.heights.find(
         (b) => b.toastId === t.toast.id
-      ) ? I = t.heights.map(
+      ) ? E = t.heights.map(
         (b) => b.toastId === t.toast.id ? { ...b, height: w } : b
-      ) : I = [
+      ) : E = [
         {
@@ -256,5 +256,5 @@ toastId: t.toast.id,
         ...t.heights
-      ], r("update:heights", I);
+      ], r("update:heights", E);
     });
-    function K() {
+    function q() {
       g.value = !0, m.value = T.value;
@@ -266,27 +266,27 @@ const e = t.heights.filter(
         r("removeToast", t.toast);
-      }, ee);
+      }, le);
     }
-    function Ht() {
+    function bt() {
       var e, u;
-      H.value || !N.value || (K(), (u = (e = t.toast).onDismiss) == null || u.call(e, t.toast));
+      H.value || !R.value || (q(), (u = (e = t.toast).onDismiss) == null || u.call(e, t.toast));
     }
-    function At(e) {
-      H.value || !N.value || (v.value = /* @__PURE__ */ new Date(), m.value = T.value, e.target.setPointerCapture(e.pointerId), e.target.tagName !== "BUTTON" && (x.value = !0, z.value = { x: e.clientX, y: e.clientY }));
+    function jt(e) {
+      H.value || !R.value || (v.value = /* @__PURE__ */ new Date(), m.value = T.value, e.target.setPointerCapture(e.pointerId), e.target.tagName !== "BUTTON" && (k.value = !0, z.value = { x: e.clientX, y: e.clientY }));
     }
-    function Mt() {
-      var I, D, b, A, O;
-      if (k.value) return;
+    function Vt() {
+      var E, D, b, A, O;
+      if (x.value) return;
       z.value = null;
       const e = Number(
-        ((I = f.value) == null ? void 0 : I.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
+        ((E = f.value) == null ? void 0 : E.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
       ), u = (/* @__PURE__ */ new Date()).getTime() - ((D = v.value) == null ? void 0 : D.getTime()), w = Math.abs(e) / u;
-      if (Math.abs(e) >= te || w > 0.11) {
-        m.value = T.value, (A = (b = t.toast).onDismiss) == null || A.call(b, t.toast), K(), k.value = !0;
+      if (Math.abs(e) >= ie || w > 0.11) {
+        m.value = T.value, (A = (b = t.toast).onDismiss) == null || A.call(b, t.toast), q(), x.value = !0;
         return;
       }
-      (O = f.value) == null || O.style.setProperty("--swipe-amount", "0px"), x.value = !1;
+      (O = f.value) == null || O.style.setProperty("--swipe-amount", "0px"), k.value = !1;
     }
-    function Ot(e) {
+    function Wt(e) {
       var O;
-      if (!z.value || !N.value) return;
+      if (!z.value || !R.value) return;
       const u = e.clientY - z.value.y, w = e.clientX - z.value.x, D = (U.value[0] === "top" ? Math.min : Math.max)(0, u), b = e.pointerType === "touch" ? 10 : 2;
@@ -298,21 +298,21 @@ Math.abs(D) > b ? (O = f.value) == null || O.style.setProperty("--swipe-amount", `${u}px`) : Math.abs(w) > b && (z.value = null);
     }), W((e) => {
-      if (t.toast.promise && P.value === "loading" || t.toast.duration === 1 / 0 || t.toast.type === "loading")
+      if (t.toast.promise && I.value === "loading" || t.toast.duration === 1 / 0 || t.toast.type === "loading")
         return;
       let u, w = C.value;
-      const I = () => {
-        if (R.value < S.value) {
+      const E = () => {
+        if (F.value < S.value) {
           const b = (/* @__PURE__ */ new Date()).getTime() - S.value;
           w = w - b;
         }
-        R.value = (/* @__PURE__ */ new Date()).getTime();
+        F.value = (/* @__PURE__ */ new Date()).getTime();
       }, D = () => {
         w !== 1 / 0 && (S.value = (/* @__PURE__ */ new Date()).getTime(), u = setTimeout(() => {
           var b, A;
-          (A = (b = t.toast).onAutoClose) == null || A.call(b, t.toast), K();
+          (A = (b = t.toast).onAutoClose) == null || A.call(b, t.toast), q();
         }, w));
       };
-      t.expanded || t.interacting || t.pauseWhenPageIsHidden && nt ? I() : D(), e(() => {
+      t.expanded || t.interacting || t.pauseWhenPageIsHidden && nt ? E() : D(), e(() => {
         clearTimeout(u);
       });
-    }), It(() => {
+    }), Yt(() => {
       if (f.value) {
@@ -328,3 +328,3 @@ const e = f.value.getBoundingClientRect().height;
       n.value = !0;
-    }), Rt(() => {
+    }), Gt(() => {
       if (f.value) {
@@ -337,3 +337,3 @@ const e = t.heights.filter(
     }), (e, u) => {
-      var w, I, D, b, A, O, bt, yt, wt, xt, kt, Tt, Bt, St, Ct, $t;
+      var w, E, D, b, A, O, yt, wt, kt, xt, Tt, Bt, St, Ct, $t, It, Et, Pt, Dt, zt, Ht, At, Mt, Ot;
       return l(), h("li", {
@@ -347,5 +347,14 @@ ref_key: "toastRef",
         "data-sonner-toast": "true",
-        class: j(pt.value),
+        class: Y(e.cn(
+          t.class,
+          pt.value,
+          (w = e.classes) == null ? void 0 : w.toast,
+          (E = e.toast.classes) == null ? void 0 : E.toast,
+          // @ts-ignore
+          (D = e.classes) == null ? void 0 : D[I.value],
+          // @ts-ignore
+          (A = (b = e.toast) == null ? void 0 : b.classes) == null ? void 0 : A[I.value]
+        )),
         "data-rich-colors": e.toast.richColors ?? e.defaultRichColors,
-        "data-styled": !(e.toast.component || (w = e.toast) != null && w.unstyled || e.unstyled),
+        "data-styled": !(e.toast.component || (O = e.toast) != null && O.unstyled || e.unstyled),
         "data-mounted": n.value,
@@ -358,8 +367,8 @@ "data-promise": !!e.toast.promise,
         "data-index": e.index,
-        "data-front": L.value,
-        "data-swiping": x.value,
-        "data-dismissible": N.value,
-        "data-type": P.value,
+        "data-front": N.value,
+        "data-swiping": k.value,
+        "data-dismissible": R.value,
+        "data-type": I.value,
         "data-invert": rt.value,
-        "data-swipe-out": k.value,
+        "data-swipe-out": x.value,
         "data-expanded": !!(e.expanded || e.expandByDefault && n.value),
@@ -373,7 +382,7 @@ style: ut({
           ...e.style,
-          ...Y(o)
+          ...L(o)
         }),
-        onPointerdown: At,
-        onPointerup: Mt,
-        onPointermove: Ot
+        onPointerdown: jt,
+        onPointerup: Vt,
+        onPointermove: Wt
       }, [
@@ -385,21 +394,24 @@ c.value && !e.toast.component ? (l(), h("button", {
           "data-close-button": "true",
-          class: j(e.cn((I = e.classes) == null ? void 0 : I.closeButton, (b = (D = e.toast) == null ? void 0 : D.classes) == null ? void 0 : b.closeButton)),
-          onClick: Ht
+          class: Y(e.cn((yt = e.classes) == null ? void 0 : yt.closeButton, (kt = (wt = e.toast) == null ? void 0 : wt.classes) == null ? void 0 : kt.closeButton)),
+          onClick: bt
         }, [
-          (A = e.icons) != null && A.close ? (l(), q(Z((O = e.icons) == null ? void 0 : O.close), { key: 0 })) : E(e.$slots, "close-icon", { key: 1 })
-        ], 10, Jt)) : F("", !0),
-        e.toast.component ? (l(), q(Z(e.toast.component), ct({ key: 1 }, e.toast.componentProps, { onCloseToast: K }), null, 16)) : (l(), h(V, { key: 2 }, [
-          P.value !== "default" || e.toast.icon || e.toast.promise ? (l(), h("div", Qt, [
-            (e.toast.promise || P.value === "loading") && !e.toast.icon ? E(e.$slots, "loading-icon", { key: 0 }) : F("", !0),
-            e.toast.icon ? (l(), q(Z(e.toast.icon), { key: 1 })) : (l(), h(V, { key: 2 }, [
-              P.value === "success" ? E(e.$slots, "success-icon", { key: 0 }) : P.value === "error" ? E(e.$slots, "error-icon", { key: 1 }) : P.value === "warning" ? E(e.$slots, "warning-icon", { key: 2 }) : P.value === "info" ? E(e.$slots, "info-icon", { key: 3 }) : F("", !0)
+          (xt = e.icons) != null && xt.close ? (l(), G(Z((Tt = e.icons) == null ? void 0 : Tt.close), { key: 0 })) : P(e.$slots, "close-icon", { key: 1 })
+        ], 10, se)) : j("", !0),
+        e.toast.component ? (l(), G(Z(e.toast.component), ct({ key: 1 }, e.toast.componentProps, { onCloseToast: bt }), null, 16)) : (l(), h(V, { key: 2 }, [
+          I.value !== "default" || e.toast.icon || e.toast.promise ? (l(), h("div", ne, [
+            (e.toast.promise || I.value === "loading") && !e.toast.icon ? P(e.$slots, "loading-icon", { key: 0 }) : j("", !0),
+            e.toast.icon ? (l(), G(Z(e.toast.icon), { key: 1 })) : (l(), h(V, { key: 2 }, [
+              I.value === "success" ? P(e.$slots, "success-icon", { key: 0 }) : I.value === "error" ? P(e.$slots, "error-icon", { key: 1 }) : I.value === "warning" ? P(e.$slots, "warning-icon", { key: 2 }) : I.value === "info" ? P(e.$slots, "info-icon", { key: 3 }) : j("", !0)
             ], 64))
-          ])) : F("", !0),
-          M("div", Zt, [
+          ])) : j("", !0),
+          M("div", {
+            "data-content": "",
+            class: Y(e.cn((Bt = e.classes) == null ? void 0 : Bt.content, (Ct = (St = e.toast) == null ? void 0 : St.classes) == null ? void 0 : Ct.content))
+          }, [
             M("div", {
               "data-title": "",
-              class: j(e.cn((bt = e.classes) == null ? void 0 : bt.title, (yt = e.toast.classes) == null ? void 0 : yt.title))
+              class: Y(e.cn(($t = e.classes) == null ? void 0 : $t.title, (It = e.toast.classes) == null ? void 0 : It.title))
             }, [
-              at.value ? (l(), q(Z(e.toast.title), Et(ct({ key: 0 }, e.toast.componentProps)), null, 16)) : (l(), h(V, { key: 1 }, [
-                Pt(lt(e.toast.title), 1)
+              at.value ? (l(), G(Z(e.toast.title), Lt(ct({ key: 0 }, e.toast.componentProps)), null, 16)) : (l(), h(V, { key: 1 }, [
+                Nt(lt(e.toast.title), 1)
               ], 64))
@@ -410,20 +422,20 @@ ], 2),
               "data-description": "",
-              class: j(
+              class: Y(
                 e.cn(
                   e.descriptionClass,
                   ht.value,
-                  (wt = e.classes) == null ? void 0 : wt.description,
-                  (xt = e.toast.classes) == null ? void 0 : xt.description
+                  (Et = e.classes) == null ? void 0 : Et.description,
+                  (Pt = e.toast.classes) == null ? void 0 : Pt.description
                 )
               )
             }, [
-              ot.value ? (l(), q(Z(e.toast.description), Et(ct({ key: 0 }, e.toast.componentProps)), null, 16)) : (l(), h(V, { key: 1 }, [
-                Pt(lt(e.toast.description), 1)
+              ot.value ? (l(), G(Z(e.toast.description), Lt(ct({ key: 0 }, e.toast.componentProps)), null, 16)) : (l(), h(V, { key: 1 }, [
+                Nt(lt(e.toast.description), 1)
               ], 64))
-            ], 2)) : F("", !0)
-          ]),
+            ], 2)) : j("", !0)
+          ], 2),
           e.toast.cancel ? (l(), h("button", {
             key: 1,
             style: ut(e.toast.cancelButtonStyle || e.cancelButtonStyle),
-            class: j(e.cn((kt = e.classes) == null ? void 0 : kt.cancelButton, (Tt = e.toast.classes) == null ? void 0 : Tt.cancelButton)),
+            class: Y(e.cn((Dt = e.classes) == null ? void 0 : Dt.cancelButton, (zt = e.toast.classes) == null ? void 0 : zt.cancelButton)),
             "data-button": "",
@@ -433,9 +445,9 @@ "data-cancel": "",
               var J, Q;
-              Y(dt)(e.toast.cancel) && N.value && ((Q = (J = e.toast.cancel).onClick) == null || Q.call(J, it), K());
+              L(dt)(e.toast.cancel) && R.value && ((Q = (J = e.toast.cancel).onClick) == null || Q.call(J, it), q());
             })
-          }, lt(Y(dt)(e.toast.cancel) ? (Bt = e.toast.cancel) == null ? void 0 : Bt.label : e.toast.cancel), 7)) : F("", !0),
+          }, lt(L(dt)(e.toast.cancel) ? (Ht = e.toast.cancel) == null ? void 0 : Ht.label : e.toast.cancel), 7)) : j("", !0),
           e.toast.action ? (l(), h("button", {
             key: 2,
             style: ut(e.toast.actionButtonStyle || e.actionButtonStyle),
-            class: j(e.cn((St = e.classes) == null ? void 0 : St.actionButton, (Ct = e.toast.classes) == null ? void 0 : Ct.actionButton)),
+            class: Y(e.cn((At = e.classes) == null ? void 0 : At.actionButton, (Mt = e.toast.classes) == null ? void 0 : Mt.actionButton)),
             "data-button": "",
@@ -445,7 +457,7 @@ "data-action": "",
               var J, Q;
-              Y(dt)(e.toast.action) && (it.defaultPrevented || ((Q = (J = e.toast.action).onClick) == null || Q.call(J, it), K()));
+              L(dt)(e.toast.action) && (it.defaultPrevented || ((Q = (J = e.toast.action).onClick) == null || Q.call(J, it), q()));
             })
-          }, lt(Y(dt)(e.toast.action) ? ($t = e.toast.action) == null ? void 0 : $t.label : e.toast.action), 7)) : F("", !0)
+          }, lt(L(dt)(e.toast.action) ? (Ot = e.toast.action) == null ? void 0 : Ot.label : e.toast.action), 7)) : j("", !0)
         ], 64))
-      ], 46, qt);
+      ], 46, oe);
     };
@@ -458,3 +470,3 @@ }
   return t;
-}, oe = {}, se = {
+}, ue = {}, ce = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -470,4 +482,4 @@ width: "12",
 };
-function ne(s, a) {
-  return l(), h("svg", se, a[0] || (a[0] = [
+function fe(s, a) {
+  return l(), h("svg", ce, a[0] || (a[0] = [
     M("line", {
@@ -487,3 +499,3 @@ x1: "18",
 }
-const re = /* @__PURE__ */ _(oe, [["render", ne]]), ie = ["data-visible"], le = { class: "sonner-spinner" }, de = /* @__PURE__ */ vt({
+const pe = /* @__PURE__ */ _(ue, [["render", fe]]), he = ["data-visible"], ge = { class: "sonner-spinner" }, me = /* @__PURE__ */ vt({
   __name: "Loader",
@@ -499,4 +511,4 @@ props: {
     }, [
-      M("div", le, [
-        (l(!0), h(V, null, gt(Y(a), (n) => (l(), h("div", {
+      M("div", ge, [
+        (l(!0), h(V, null, gt(L(a), (n) => (l(), h("div", {
           key: `spinner-bar-${n}`,
@@ -506,5 +518,5 @@ class: "sonner-loading-bar"
       ])
-    ], 8, ie));
+    ], 8, he));
   }
-}), ue = {}, ce = {
+}), ve = {}, be = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -516,4 +528,4 @@ viewBox: "0 0 20 20",
 };
-function fe(s, a) {
-  return l(), h("svg", ce, a[0] || (a[0] = [
+function ye(s, a) {
+  return l(), h("svg", be, a[0] || (a[0] = [
     M("path", {
@@ -526,3 +538,3 @@ "fill-rule": "evenodd",
 }
-const pe = /* @__PURE__ */ _(ue, [["render", fe]]), he = {}, ge = {
+const we = /* @__PURE__ */ _(ve, [["render", ye]]), ke = {}, xe = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -534,4 +546,4 @@ viewBox: "0 0 20 20",
 };
-function me(s, a) {
-  return l(), h("svg", ge, a[0] || (a[0] = [
+function Te(s, a) {
+  return l(), h("svg", xe, a[0] || (a[0] = [
     M("path", {
@@ -544,3 +556,3 @@ "fill-rule": "evenodd",
 }
-const ve = /* @__PURE__ */ _(he, [["render", me]]), be = {}, ye = {
+const Be = /* @__PURE__ */ _(ke, [["render", Te]]), Se = {}, Ce = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -552,4 +564,4 @@ viewBox: "0 0 24 24",
 };
-function we(s, a) {
-  return l(), h("svg", ye, a[0] || (a[0] = [
+function $e(s, a) {
+  return l(), h("svg", Ce, a[0] || (a[0] = [
     M("path", {
@@ -562,3 +574,3 @@ "fill-rule": "evenodd",
 }
-const xe = /* @__PURE__ */ _(be, [["render", we]]), ke = {}, Te = {
+const Ie = /* @__PURE__ */ _(Se, [["render", $e]]), Ee = {}, Pe = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -570,4 +582,4 @@ viewBox: "0 0 20 20",
 };
-function Be(s, a) {
-  return l(), h("svg", Te, a[0] || (a[0] = [
+function De(s, a) {
+  return l(), h("svg", Pe, a[0] || (a[0] = [
     M("path", {
@@ -580,7 +592,7 @@ "fill-rule": "evenodd",
 }
-const Se = /* @__PURE__ */ _(ke, [["render", Be]]), Ce = ["aria-label"], $e = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], Ie = 3, zt = "32px", Ee = 356, Pe = 14, De = typeof window < "u" && typeof document < "u";
-function ze(...s) {
+const ze = /* @__PURE__ */ _(Ee, [["render", De]]), He = ["aria-label"], Ae = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], Me = 3, Ft = "32px", Oe = 356, Ye = 14, Le = typeof window < "u" && typeof document < "u";
+function Ne(...s) {
   return s.filter(Boolean).join(" ");
 }
-const He = /* @__PURE__ */ vt({
+const Re = /* @__PURE__ */ vt({
   name: "Toaster",
@@ -597,4 +609,4 @@ inheritAttrs: !1,
     duration: {},
-    gap: { default: Pe },
-    visibleToasts: { default: Ie },
+    gap: { default: Ye },
+    visibleToasts: { default: Me },
     closeButton: { type: Boolean, default: !1 },
@@ -604,3 +616,3 @@ toastOptions: { default: () => ({}) },
     style: { default: () => ({}) },
-    offset: { default: zt },
+    offset: { default: Ft },
     dir: { default: "auto" },
@@ -610,3 +622,3 @@ icons: {},
     pauseWhenPageIsHidden: { type: Boolean, default: !1 },
-    cn: { type: Function, default: ze }
+    cn: { type: Function, default: Ne }
   },
@@ -620,18 +632,18 @@ setup(s) {
     }
-    const r = Ft(), n = p([]), g = y(() => {
+    const r = qt(), n = p([]), g = y(() => {
       const o = n.value.filter((i) => i.position).map((i) => i.position);
       return o.length > 0 ? Array.from(new Set([a.position].concat(o))) : [a.position];
-    }), x = p([]), k = p(!1), m = p(!1), d = p(
+    }), k = p([]), x = p(!1), m = p(!1), d = p(
       a.theme !== "system" ? a.theme : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-    ), v = p(null), f = p(null), L = p(!1), ft = a.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-    function P(o) {
+    ), v = p(null), f = p(null), N = p(!1), ft = a.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    function I(o) {
       var i;
       (i = n.value.find((c) => c.id === o.id)) != null && i.delete || $.dismiss(o.id), n.value = n.value.filter(({ id: c }) => c !== o.id);
     }
-    function N(o) {
+    function R(o) {
       var i, c;
-      L.value && !((c = (i = o.currentTarget) == null ? void 0 : i.contains) != null && c.call(i, o.relatedTarget)) && (L.value = !1, f.value && (f.value.focus({ preventScroll: !0 }), f.value = null));
+      N.value && !((c = (i = o.currentTarget) == null ? void 0 : i.contains) != null && c.call(i, o.relatedTarget)) && (N.value = !1, f.value && (f.value.focus({ preventScroll: !0 }), f.value = null));
     }
     function pt(o) {
-      o.target instanceof HTMLElement && o.target.dataset.dismissible === "false" || L.value || (L.value = !0, f.value = o.relatedTarget);
+      o.target instanceof HTMLElement && o.target.dataset.dismissible === "false" || N.value || (N.value = !0, f.value = o.relatedTarget);
     }
@@ -649,3 +661,3 @@ function ht(o) {
         }
-        jt(() => {
+        Jt(() => {
           const C = n.value.findIndex(
@@ -664,3 +676,3 @@ (S) => S.id === c.id
       });
-    }), Dt(
+    }), Rt(
       () => a.theme,
@@ -676,3 +688,3 @@ (o) => {
       }
-    ), Dt(
+    ), Rt(
       () => v.value,
@@ -682,21 +694,21 @@ () => {
           return () => {
-            f.value && (f.value.focus({ preventScroll: !0 }), f.value = null, L.value = !1);
+            f.value && (f.value.focus({ preventScroll: !0 }), f.value = null, N.value = !1);
           };
       }
     ), W(() => {
-      n.value.length <= 1 && (k.value = !1);
+      n.value.length <= 1 && (x.value = !1);
     }), W((o) => {
       function i(c) {
         const C = a.hotkey.every(
-          (R) => c[R] || c.code === R
+          (F) => c[F] || c.code === F
         ), S = Array.isArray(v.value) ? v.value[0] : v.value;
-        C && (k.value = !0, S == null || S.focus());
+        C && (x.value = !0, S == null || S.focus());
         const T = document.activeElement === v.value || (S == null ? void 0 : S.contains(document.activeElement));
-        c.code === "Escape" && T && (k.value = !1);
+        c.code === "Escape" && T && (x.value = !1);
       }
-      De && (document.addEventListener("keydown", i), o(() => {
+      Le && (document.addEventListener("keydown", i), o(() => {
         document.removeEventListener("keydown", i);
       }));
     }), (o, i) => (l(), h("section", {
-      "aria-label": `${o.containerAriaLabel} ${Y(ft)}`,
+      "aria-label": `${o.containerAriaLabel} ${L(ft)}`,
       tabIndex: -1
@@ -720,16 +732,16 @@ }, [
           style: {
-            "--front-toast-height": `${(S = x.value[0]) == null ? void 0 : S.height}px`,
-            "--offset": typeof o.offset == "number" ? `${o.offset}px` : o.offset || zt,
-            "--width": `${Ee}px`,
+            "--front-toast-height": `${(S = k.value[0]) == null ? void 0 : S.height}px`,
+            "--offset": typeof o.offset == "number" ? `${o.offset}px` : o.offset || Ft,
+            "--width": `${Oe}px`,
             "--gap": `${o.gap}px`,
             ...o.style,
-            ...Y(r).style
+            ...L(r).style
           }
         }, o.$attrs, {
-          onBlur: N,
+          onBlur: R,
           onFocus: pt,
-          onMouseenter: i[1] || (i[1] = () => k.value = !0),
-          onMousemove: i[2] || (i[2] = () => k.value = !0),
+          onMouseenter: i[1] || (i[1] = () => x.value = !0),
+          onMousemove: i[2] || (i[2] = () => x.value = !0),
           onMouseleave: i[3] || (i[3] = () => {
-            m.value || (k.value = !1);
+            m.value || (x.value = !1);
           }),
@@ -741,13 +753,13 @@ onPointerdown: ht,
             (T) => !T.position && C === 0 || T.position === c
-          ), (T, R) => {
+          ), (T, F) => {
             var z, U, tt, et, at, ot, st, nt, rt;
-            return l(), q(ae, {
+            return l(), G(de, {
               key: T.id,
-              heights: x.value.filter((H) => H.position === T.position),
+              heights: k.value.filter((H) => H.position === T.position),
               icons: o.icons,
-              index: R,
+              index: F,
               toast: T,
               defaultRichColors: o.richColors,
               duration: ((z = o.toastOptions) == null ? void 0 : z.duration) ?? o.duration,
-              class: j(((U = o.toastOptions) == null ? void 0 : U.class) ?? ""),
+              class: Y(((U = o.toastOptions) == null ? void 0 : U.class) ?? ""),
               descriptionClass: (tt = o.toastOptions) == null ? void 0 : tt.descriptionClass,
@@ -767,18 +779,18 @@ invert: o.invert,
               gap: o.gap,
-              expanded: k.value,
+              expanded: x.value,
               pauseWhenPageIsHidden: o.pauseWhenPageIsHidden,
               cn: o.cn,
               "onUpdate:heights": i[0] || (i[0] = (H) => {
-                x.value = H;
+                k.value = H;
               }),
-              onRemoveToast: P
+              onRemoveToast: I
             }, {
-              "close-icon": X(() => [
-                E(o.$slots, "close-icon", {}, () => [
-                  G(re)
+              "close-icon": K(() => [
+                P(o.$slots, "close-icon", {}, () => [
+                  X(pe)
                 ])
               ]),
-              "loading-icon": X(() => [
-                E(o.$slots, "loading-icon", {}, () => [
-                  G(de, {
+              "loading-icon": K(() => [
+                P(o.$slots, "loading-icon", {}, () => [
+                  X(me, {
                     visible: T.type === "loading"
@@ -788,20 +800,20 @@ }, null, 8, ["visible"])
               ]),
-              "success-icon": X(() => [
-                E(o.$slots, "success-icon", {}, () => [
-                  G(pe)
+              "success-icon": K(() => [
+                P(o.$slots, "success-icon", {}, () => [
+                  X(we)
                 ])
               ]),
-              "error-icon": X(() => [
-                E(o.$slots, "error-icon", {}, () => [
-                  G(Se)
+              "error-icon": K(() => [
+                P(o.$slots, "error-icon", {}, () => [
+                  X(ze)
                 ])
               ]),
-              "warning-icon": X(() => [
-                E(o.$slots, "warning-icon", {}, () => [
-                  G(xe)
+              "warning-icon": K(() => [
+                P(o.$slots, "warning-icon", {}, () => [
+                  X(Ie)
                 ])
               ]),
-              "info-icon": X(() => [
-                E(o.$slots, "info-icon", {}, () => [
-                  G(ve)
+              "info-icon": K(() => [
+                P(o.$slots, "info-icon", {}, () => [
+                  X(Be)
                 ])
@@ -812,17 +824,17 @@ ]),
           }), 128))
-        ], 16, $e);
+        ], 16, Ae);
       }), 128))
-    ], 8, Ce));
+    ], 8, He));
   }
-}), Le = {
+}), Ue = {
   install(s) {
-    s.component("Toaster", He);
+    s.component("Toaster", Re);
   }
 };
 export {
-  He as Toaster,
-  Le as default,
-  Oe as toast,
-  Ye as useVueSonner
+  Re as Toaster,
+  Ue as default,
+  Ve as toast,
+  We as useVueSonner
 };
 //# sourceMappingURL=vue-sonner.js.map

package.json

 {
   "name": "vue-sonner",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "type": "module",
@@ -39,5 +39,5 @@ "author": "xiaoluoboding <[e-mail]>",
     "@iconify/json": "^2.2.172",
-    "@microsoft/api-extractor": "^7.47.9",
+    "@microsoft/api-extractor": "^7.47.10",
     "@types/node": "^18.19.8",
-    "@unocss/reset": "^0.62.4",
+    "@unocss/reset": "^0.63.4",
     "@vitejs/plugin-vue": "^5.1.4",
@@ -49,10 +49,10 @@ "@vue/tsconfig": "^0.5.1",
     "highlight.js": "^11.10.0",
-    "typescript": "^5.6.2",
-    "unocss": "^0.62.4",
+    "typescript": "^5.6.3",
+    "unocss": "^0.63.4",
     "unplugin-icons": "^0.19.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.7",
-    "vue": "^3.5.8",
+    "vite": "^5.4.9",
+    "vue": "^3.5.12",
     "vue-tsc": "^2.1.6"
   }
 }

README.md

@@ -58,5 +58,5 @@ # Sonner for Vue
     - [Custom offset](#custom-offset)
-    - [Programmatically remove toast](#programmatically-remove-toast)
-    - [Programmatically remove toast](#programmatically-remove-toast-1)
     - [On Close Callback](#on-close-callback)
+    - [Persisting toasts](#persisting-toasts)
+    - [Dismissing toasts programmatically](#dismissing-toasts-programmatically)
     - [Keyboard focus](#keyboard-focus)
@@ -349,3 +349,3 @@ - [Inspiration](#inspiration)
 ```vue
-<Toaster 
+<Toaster
   :toastOptions="{
@@ -357,3 +357,3 @@ unstyled: true,
       warning: 'text-yellow-400',
-      info: 'bg-blue-400',
+      info: 'bg-blue-400'
     }
@@ -412,20 +412,16 @@ }"
 
-### Programmatically remove toast
+### On Close Callback
 
-To remove a toast programmatically use `toast.dismiss(id)`.
+You can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).
 
 ```ts
-const toastId = toast('Event has been created')
-
-toast.dismiss(toastId)
+toast('Event has been created', {
+  onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
+  onAutoClose: (t) =>
+    console.log(`Toast with id ${t.id} has been closed automatically`)
+})
 ```
 
-You can also use the dismiss method without the id to dismiss all toasts.
+### Persisting toasts
 
-```ts
-toast.dismiss()
-```
-
-### Programmatically remove toast
-
 You can change the duration of each toast by using the duration property, or change the duration of all toasts like this:
@@ -442,2 +438,4 @@
 
+If you want a toast to stay on screen forever, you can set the duration to `Infinity`.
+
 // Persisent toast
@@ -449,14 +447,18 @@ toast('Event has been created', {
 
-### On Close Callback
+### Dismissing toasts programmatically
 
-You can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).
+To remove a toast programmatically use `toast.dismiss(id)`.
 
 ```ts
-toast('Event has been created', {
-  onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
-  onAutoClose: (t) =>
-    console.log(`Toast with id ${t.id} has been closed automatically`)
-})
+const toastId = toast('Event has been created')
+
+toast.dismiss(toastId)
 ```
 
+You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.
+
+```ts
+toast.dismiss()
+```
+
 ### Keyboard focus
@@ -463,0 +465,0 @@

No alert changes

Improved metrics

Total package byte prevSize

264157

increased by0.39%

Lines of code

1157

increased by1.14%

Number of lines in readme file

473

increased by0.42%

No dependency changes