vue-sonner - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

lib/Toast.vue.d.ts

 import './styles.css';
-import type { HeightT, Position, ToastT } from './types';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+import type { CSSProperties } from 'vue';
+import type { CnFunction, HeightT, Position, ToastClassnames, ToastT } from './types';
+interface ToastProps {
     toast: ToastT;
@@ -10,2 +11,3 @@ toasts: ToastT[];
     heights: HeightT[];
+    gap?: number;
     position: Position;
@@ -16,22 +18,18 @@ visibleToasts: number;
     interacting: boolean;
-    duration?: number | undefined;
-    descriptionClass?: string | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    duration?: number;
+    descriptionClass?: string;
+    style?: CSSProperties;
+    cancelButtonStyle?: CSSProperties;
+    actionButtonStyle?: CSSProperties;
+    unstyled?: boolean;
+    descriptionClassName?: string;
+    classNames?: ToastClassnames;
+    closeButtonAriaLabel?: string;
+    pauseWhenPageIsHidden: boolean;
+    cn: CnFunction;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<ToastProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:heights": (heights: HeightT[]) => void;
     removeToast: (toast: ToastT) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    toast: ToastT;
-    toasts: ToastT[];
-    index: number;
-    expanded: boolean;
-    invert: boolean;
-    heights: HeightT[];
-    position: Position;
-    visibleToasts: number;
-    expandByDefault: boolean;
-    closeButton: boolean;
-    interacting: boolean;
-    duration?: number | undefined;
-    descriptionClass?: string | undefined;
-}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ToastProps>>> & {
     "onUpdate:heights"?: ((heights: HeightT[]) => any) | undefined;
@@ -38,0 +36,0 @@ onRemoveToast?: ((toast: ToastT) => any) | undefined;

lib/Toaster.vue.d.ts

 import { type CSSProperties } from 'vue';
-import type { Position, Theme, ToastOptions } from './types';
+import type { CnFunction, Position, Theme, ToastOptions } from './types';
 export interface ToasterProps {
@@ -19,2 +19,5 @@ invert?: boolean;
     dir?: 'rtl' | 'ltr' | 'auto';
+    containerAriaLabel?: string;
+    pauseWhenPageIsHidden?: boolean;
+    cn?: CnFunction;
 }
@@ -37,2 +40,4 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ToasterProps>, {
     gap: number;
+    containerAriaLabel: string;
+    pauseWhenPageIsHidden: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ToasterProps>, {
@@ -54,4 +59,7 @@ invert: boolean;
     gap: number;
+    containerAriaLabel: string;
+    pauseWhenPageIsHidden: boolean;
 }>>>, {
     invert: boolean;
+    closeButton: boolean;
     duration: number;
@@ -61,4 +69,5 @@ style: CSSProperties;
     position: Position;
+    gap: number;
     visibleToasts: number;
-    closeButton: boolean;
+    pauseWhenPageIsHidden: boolean;
     theme: Theme;
@@ -68,6 +77,6 @@ hotkey: string[];
     expand: boolean;
-    gap: number;
     toastOptions: ToastOptions;
     offset: string | number;
     dir: "auto" | "ltr" | "rtl";
+    containerAriaLabel: string;
 }, {}>;
@@ -74,0 +83,0 @@ export default _default;

lib/types.d.ts

 import type { Component, CSSProperties } from 'vue';
-export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading';
+export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading' | 'default';
 export type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>);
+export type PromiseExternalToast = Omit<ExternalToast, 'description'>;
 export type PromiseData<ToastData = any> = ExternalToast & {
@@ -8,4 +9,29 @@ loading?: string | Component;
     error?: (data: ToastData) => string | Component;
+    description?: string | Component | ((data: any) => Component | string);
     finally?: () => void | Promise<void>;
 };
+export interface ToastClassnames {
+    toast?: string;
+    title?: string;
+    description?: string;
+    loader?: string;
+    closeButton?: string;
+    cancelButton?: string;
+    actionButton?: string;
+    normal?: string;
+    action?: string;
+    success?: string;
+    error?: string;
+    info?: string;
+    warning?: string;
+    loading?: string;
+    default?: string;
+}
+export interface ToastIcons {
+    success?: Component;
+    info?: Component;
+    warning?: Component;
+    error?: Component;
+    loading?: Component;
+}
 export interface ToastT {
@@ -17,2 +43,3 @@ id: number | string;
     invert?: boolean;
+    closeButton?: boolean;
     dismissible?: boolean;
@@ -24,7 +51,7 @@ description?: string;
     action?: {
-        label: string;
+        label: string | Component;
         onClick: () => void;
     };
     cancel?: {
-        label: string;
+        label: string | Component;
         onClick?: () => void;
@@ -35,5 +62,8 @@ };
     promise?: PromiseT;
+    cancelButtonStyle?: CSSProperties;
+    actionButtonStyle?: CSSProperties;
     style?: CSSProperties;
     unstyled?: boolean;
     className?: string;
+    classNames?: ToastClassnames;
     descriptionClassName?: string;
@@ -46,10 +76,16 @@ position?: Position;
     toastId: number | string;
+    position: Position;
 }
 export interface ToastOptions {
     className?: string;
+    closeButton?: boolean;
     descriptionClassName?: string;
     style?: CSSProperties;
+    cancelButtonStyle?: CSSProperties;
+    actionButtonStyle?: CSSProperties;
     duration?: number;
     unstyled?: boolean;
+    classNames?: ToastClassnames;
 }
+export type CnFunction = (...classes: Array<string | undefined>) => string;
 export declare enum SwipeStateTypes {
@@ -65,4 +101,4 @@ SwipedOut = "SwipedOut",
 }
-export type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title' | 'delete'> & {
+export type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title' | 'delete' | 'promise'> & {
     id?: number | string;
 };

lib/vue-sonner.js

@@ -1,83 +0,102 @@
-var yt = Object.defineProperty;
-var xt = (r, t, e) => t in r ? yt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var g = (r, t, e) => (xt(r, typeof t != "symbol" ? t + "" : t, e), e);
-import { defineComponent as et, openBlock as d, createElementBlock as f, createElementVNode as T, Fragment as F, renderList as lt, unref as O, ref as c, computed as v, onMounted as Q, watchEffect as R, onUnmounted as dt, normalizeClass as st, normalizeStyle as Z, createVNode as kt, createCommentVNode as C, createBlock as I, createTextVNode as nt, toDisplayString as Y, resolveDynamicComponent as Tt, useAttrs as _t, nextTick as $t, watch as Ct } from "vue";
-function wt(r) {
-  if (!r || typeof document > "u")
+var xt = Object.defineProperty;
+var Tt = (i, e, t) => e in i ? xt(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var w = (i, e, t) => (Tt(i, typeof e != "symbol" ? e + "" : e, t), t);
+import { defineComponent as dt, openBlock as d, createElementBlock as g, createElementVNode as P, Fragment as U, renderList as rt, unref as V, ref as f, watchEffect as D, computed as h, onMounted as Bt, onUnmounted as $t, normalizeClass as nt, normalizeStyle as it, createVNode as Ct, createCommentVNode as M, createBlock as H, createTextVNode as ft, toDisplayString as j, resolveDynamicComponent as St, useAttrs as Nt, nextTick as Et, watch as pt } from "vue";
+function kt(i) {
+  if (!i || typeof document > "u")
     return;
-  let t = document.head || document.getElementsByTagName("head")[0], e = document.createElement("style");
-  e.type = "text/css", t.appendChild(e), e.styleSheet ? e.styleSheet.cssText = r : e.appendChild(document.createTextNode(r));
+  let e = document.head || document.getElementsByTagName("head")[0], t = document.createElement("style");
+  t.type = "text/css", e.appendChild(t), t.styleSheet ? t.styleSheet.cssText = i : t.appendChild(document.createTextNode(i));
 }
-wt("[data-sonner-toaster][dir=ltr],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%)}[data-sonner-toaster][dir=rtl],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%)}[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}[data-sonner-toaster][data-x-position=right]{right:max(var(--offset),env(safe-area-inset-right))}[data-sonner-toaster][data-x-position=left]{left:max(var(--offset),env(safe-area-inset-left))}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:max(var(--offset),env(safe-area-inset-top))}[data-sonner-toaster][data-y-position=bottom]{bottom:max(var(--offset),env(safe-area-inset-bottom))}[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);touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[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}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast] [data-description]{font-weight:400;line-height:1.4;color:inherit}[data-sonner-toast] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast] [data-icon]{display:flex;height:20px;width:20px;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)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast] [data-icon]>*{flex-shrink:0}[data-sonner-toast] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast] [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;transition:opacity .4s,box-shadow .2s;z-index:100}[data-sonner-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toast][data-theme=dark] [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(--gray1);color:var(--gray12);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;opacity:0;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)}[data-sonner-toast] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast]:hover [data-close-button]{opacity:1}[data-sonner-toast]:focus [data-close-button]{opacity:1}[data-sonner-toast]:focus-within [data-close-button]{opacity:1}[data-sonner-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]:before{content:'';position:absolute;left:0;right:0;height:100%}[data-sonner-toast][data-y-position=top][data-swiping=true]:before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]:before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]:before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast]:after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount,0));transition:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation:swipe-out .2s ease-out forwards}@keyframes swipe-out{from{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));opacity:1}to{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;--mobile-offset:16px;right:var(--mobile-offset);left:var(--mobile-offset);width:100%}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - 32px)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset)}[data-sonner-toaster][data-y-position=bottom]{bottom:20px}[data-sonner-toaster][data-y-position=top]{top:20px}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset);right:var(--mobile-offset);transform:none}}[data-sonner-toaster][data-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 91%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 91%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 91%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-theme=dark]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 100%, 12%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 12%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-rich-colors=true] [data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{display:none;transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}");
-let tt = 1;
-class Bt {
+kt("[data-sonner-toaster][dir=ltr],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%)}[data-sonner-toaster][dir=rtl],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%)}[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}[data-sonner-toaster][data-x-position=right]{right:max(var(--offset),env(safe-area-inset-right))}[data-sonner-toaster][data-x-position=left]{left:max(var(--offset),env(safe-area-inset-left))}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:max(var(--offset),env(safe-area-inset-top))}[data-sonner-toaster][data-y-position=bottom]{bottom:max(var(--offset),env(safe-area-inset-bottom))}[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);touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[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}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast] [data-description]{font-weight:400;line-height:1.4;color:inherit}[data-sonner-toast] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast] [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)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast] [data-icon]>*{flex-shrink:0}[data-sonner-toast] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast] [data-content]{display:flex;flex-direction:column;gap:2px;transform:translateZ(0)}[data-sonner-toast] [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}[data-sonner-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toast][data-theme=dark] [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(--gray1);color:var(--gray12);border:1px solid var(--gray4);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)}[data-sonner-toast] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]:before{content:'';position:absolute;left:0;right:0;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]:before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]:before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]:before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast]:after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount,0));transition:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation:swipe-out .2s ease-out forwards}@keyframes swipe-out{from{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));opacity:1}to{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;--mobile-offset:16px;right:var(--mobile-offset);left:var(--mobile-offset);width:100%}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - 32px)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset)}[data-sonner-toaster][data-y-position=bottom]{bottom:20px}[data-sonner-toaster][data-y-position=top]{top:20px}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset);right:var(--mobile-offset);transform:none}}[data-sonner-toaster][data-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 91%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 91%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 91%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-theme=dark]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 100%, 12%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 12%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-rich-colors=true] [data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}");
+let lt = 1;
+class It {
   constructor() {
-    g(this, "subscribers");
-    g(this, "toasts");
+    w(this, "subscribers");
+    w(this, "toasts");
     // We use arrow functions to maintain the correct `this` reference
-    g(this, "subscribe", (t) => (this.subscribers.push(t), () => {
-      const e = this.subscribers.indexOf(t);
-      this.subscribers.splice(e, 1);
+    w(this, "subscribe", (e) => (this.subscribers.push(e), () => {
+      const t = this.subscribers.indexOf(e);
+      this.subscribers.splice(t, 1);
     }));
-    g(this, "publish", (t) => {
-      this.subscribers.forEach((e) => e(t));
+    w(this, "publish", (e) => {
+      this.subscribers.forEach((t) => t(e));
     });
-    g(this, "addToast", (t) => {
-      this.publish(t), this.toasts = [...this.toasts, t];
+    w(this, "addToast", (e) => {
+      this.publish(e), this.toasts = [...this.toasts, e];
     });
-    g(this, "create", (t) => {
-      var h;
-      const { message: e, ...n } = t, a = typeof (t == null ? void 0 : t.id) == "number" || ((h = t.id) == null ? void 0 : h.length) > 0 ? t.id : tt++, p = this.toasts.findIndex((x) => x.id === a), u = t.dismissible === void 0 ? !0 : t.dismissible;
-      return p !== -1 ? this.toasts = this.toasts.map((x) => x.id === a ? (this.publish({ ...x, ...t, id: a, title: e }), {
-        ...x,
-        ...t,
-        id: a,
-        dismissible: u,
-        title: e
-      }) : x) : this.addToast({ title: e, ...n, dismissible: u, id: a }), a;
+    w(this, "create", (e) => {
+      var y;
+      const { message: t, ...n } = e, o = typeof (e == null ? void 0 : e.id) == "number" || ((y = e.id) == null ? void 0 : y.length) > 0 ? e.id : lt++, u = this.toasts.findIndex((c) => c.id === o), p = e.dismissible === void 0 ? !0 : e.dismissible;
+      return u !== -1 ? this.toasts = this.toasts.map((c) => c.id === o ? (this.publish({ ...c, ...e, id: o, title: t }), {
+        ...c,
+        ...e,
+        id: o,
+        dismissible: p,
+        title: t
+      }) : c) : this.addToast({ title: t, ...n, dismissible: p, id: o }), o;
     });
-    g(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
+    w(this, "dismiss", (e) => (e || this.toasts.forEach((t) => {
       this.subscribers.forEach(
-        (n) => n({ id: e.id, dismiss: !0 })
+        (n) => n({ id: t.id, dismiss: !0 })
       );
-    }), this.subscribers.forEach((e) => e({ id: t, dismiss: !0 })), t));
-    g(this, "message", (t, e) => this.create({ ...e, message: t }));
-    g(this, "error", (t, e) => this.create({ ...e, type: "error", message: t }));
-    g(this, "success", (t, e) => this.create({ ...e, type: "success", message: t }));
-    g(this, "info", (t, e) => this.create({ ...e, type: "info", message: t }));
-    g(this, "warning", (t, e) => this.create({ ...e, type: "warning", message: t }));
-    g(this, "loading", (t, e) => this.create({ ...e, type: "loading", message: t }));
-    g(this, "promise", (t, e) => {
-      if (!e)
+    }), this.subscribers.forEach((t) => t({ id: e, dismiss: !0 })), e));
+    w(this, "message", (e, t) => this.create({ ...t, message: e }));
+    w(this, "error", (e, t) => this.create({ ...t, type: "error", message: e }));
+    w(this, "success", (e, t) => this.create({ ...t, type: "success", message: e }));
+    w(this, "info", (e, t) => this.create({ ...t, type: "info", message: e }));
+    w(this, "warning", (e, t) => this.create({ ...t, type: "warning", message: e }));
+    w(this, "loading", (e, t) => this.create({ ...t, type: "loading", message: e }));
+    w(this, "promise", (e, t) => {
+      if (!t)
         return;
       let n;
-      e.loading !== void 0 && (n = this.create({
-        ...e,
-        promise: t,
+      t.loading !== void 0 && (n = this.create({
+        ...t,
+        promise: e,
         type: "loading",
-        message: e.loading
+        message: t.loading,
+        description: typeof t.description != "function" ? t.description : void 0
       }));
-      const a = t instanceof Promise ? t : t();
-      let p = n !== void 0;
-      return a.then((u) => {
-        if (e.success !== void 0) {
-          p = !1;
-          const h = typeof e.success == "function" ? e.success(u) : e.success;
-          this.create({ id: n, type: "success", message: h });
+      const o = e instanceof Promise ? e : e();
+      let u = n !== void 0;
+      return o.then((p) => {
+        if (p && // @ts-expect-error
+        typeof p.ok == "boolean" && // @ts-expect-error
+        !p.ok) {
+          u = !1;
+          const y = typeof t.error == "function" ? (
+            // @ts-expect-error
+            t.error(`HTTP error! status: ${response.status}`)
+          ) : t.error, c = typeof t.description == "function" ? (
+            // @ts-expect-error
+            t.description(`HTTP error! status: ${response.status}`)
+          ) : t.description;
+          this.create({ id: n, type: "error", message: y, description: c });
+        } else if (t.success !== void 0) {
+          u = !1;
+          const y = typeof t.success == "function" ? t.success(p) : t.success, c = typeof t.description == "function" ? (
+            // @ts-expect-error
+            t.description(p)
+          ) : t.description;
+          this.create({ id: n, type: "success", message: y, description: c });
         }
-      }).catch((u) => {
-        if (e.error !== void 0) {
-          p = !1;
-          const h = typeof e.error == "function" ? e.error(u) : e.error;
-          this.create({ id: n, type: "error", message: h });
+      }).catch((p) => {
+        if (t.error !== void 0) {
+          u = !1;
+          const y = typeof t.error == "function" ? t.error(p) : t.error, c = typeof t.description == "function" ? (
+            // @ts-expect-error
+            t.description(p)
+          ) : t.description;
+          this.create({ id: n, type: "error", message: y, description: c });
         }
       }).finally(() => {
-        var u;
-        p && (this.dismiss(n), n = void 0), (u = e.finally) == null || u.call(e);
+        var p;
+        u && (this.dismiss(n), n = void 0), (p = t.finally) == null || p.call(t);
       }), n;
     });
     // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?
-    g(this, "custom", (t, e) => {
-      const n = (e == null ? void 0 : e.id) || tt++;
-      return this.publish({ ...e, id: n, title: t }), n;
+    w(this, "custom", (e, t) => {
+      const n = (t == null ? void 0 : t.id) || lt++;
+      return this.publish({ ...t, id: n, title: e }), n;
     });
@@ -87,20 +106,20 @@ this.subscribers = [], this.toasts = [];
 }
-const k = new Bt(), Et = (r, t) => {
-  const e = (t == null ? void 0 : t.id) || tt++;
-  return k.publish({
-    title: r,
-    ...t,
-    id: e
-  }), e;
-}, St = Et, Ie = Object.assign(St, {
-  success: k.success,
-  info: k.info,
-  warning: k.warning,
-  error: k.error,
-  custom: k.custom,
-  message: k.message,
-  promise: k.promise,
-  dismiss: k.dismiss,
-  loading: k.loading
-}), It = ["data-visible"], zt = { className: "sonner-spinner" }, Nt = /* @__PURE__ */ et({
+const S = new It(), _t = (i, e) => {
+  const t = (e == null ? void 0 : e.id) || lt++;
+  return S.addToast({
+    title: i,
+    ...e,
+    id: t
+  }), t;
+}, Pt = _t, ze = Object.assign(Pt, {
+  success: S.success,
+  info: S.info,
+  warning: S.warning,
+  error: S.error,
+  custom: S.custom,
+  message: S.message,
+  promise: S.promise,
+  dismiss: S.dismiss,
+  loading: S.loading
+}), zt = ["data-visible"], Mt = { className: "sonner-spinner" }, Ot = /* @__PURE__ */ dt({
   __name: "Loader",
@@ -110,22 +129,22 @@ props: {
   },
-  setup(r) {
-    const t = Array(12).fill(0);
-    return (e, n) => (d(), f("div", {
+  setup(i) {
+    const e = Array(12).fill(0);
+    return (t, n) => (d(), g("div", {
       className: "sonner-loading-wrapper",
-      "data-visible": r.visible
+      "data-visible": i.visible
     }, [
-      T("div", zt, [
-        (d(!0), f(F, null, lt(O(t), (a) => (d(), f("div", {
-          key: `spinner-bar-${a}`,
+      P("div", Mt, [
+        (d(!0), g(U, null, rt(V(e), (o) => (d(), g("div", {
+          key: `spinner-bar-${o}`,
           className: "sonner-loading-bar"
         }))), 128))
       ])
-    ], 8, It));
+    ], 8, zt));
   }
-}), H = (r, t) => {
-  const e = r.__vccOpts || r;
-  for (const [n, a] of t)
-    e[n] = a;
-  return e;
-}, Mt = {}, Ot = {
+}), K = (i, e) => {
+  const t = i.__vccOpts || i;
+  for (const [n, o] of e)
+    t[n] = o;
+  return t;
+}, At = {}, Ht = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -136,13 +155,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, Pt = /* @__PURE__ */ T("path", {
+}, Dt = /* @__PURE__ */ P("path", {
   "fill-rule": "evenodd",
   d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
   "clip-rule": "evenodd"
-}, null, -1), At = [
-  Pt
+}, null, -1), Lt = [
+  Dt
 ];
-function Dt(r, t) {
-  return d(), f("svg", Ot, At);
+function Yt(i, e) {
+  return d(), g("svg", Ht, Lt);
 }
-const Yt = /* @__PURE__ */ H(Mt, [["render", Dt]]), Rt = {}, Ht = {
+const Rt = /* @__PURE__ */ K(At, [["render", Yt]]), Ft = {}, Wt = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -153,3 +172,3 @@ viewBox: "0 0 20 20",
   width: "20"
-}, Lt = /* @__PURE__ */ T("path", {
+}, jt = /* @__PURE__ */ P("path", {
   "fill-rule": "evenodd",
@@ -159,8 +178,8 @@ d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
 }, null, -1), Ut = [
-  Lt
+  jt
 ];
-function Vt(r, t) {
-  return d(), f("svg", Ht, Ut);
+function Vt(i, e) {
+  return d(), g("svg", Wt, Ut);
 }
-const jt = /* @__PURE__ */ H(Rt, [["render", Vt]]), Ft = {}, Kt = {
+const Kt = /* @__PURE__ */ K(Ft, [["render", Vt]]), Xt = {}, Gt = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -171,13 +190,13 @@ viewBox: "0 0 24 24",
   width: "20"
-}, Wt = /* @__PURE__ */ T("path", {
+}, Zt = /* @__PURE__ */ P("path", {
   "fill-rule": "evenodd",
   d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
   "clip-rule": "evenodd"
-}, null, -1), Xt = [
-  Wt
+}, null, -1), qt = [
+  Zt
 ];
-function Gt(r, t) {
-  return d(), f("svg", Kt, Xt);
+function Jt(i, e) {
+  return d(), g("svg", Gt, qt);
 }
-const qt = /* @__PURE__ */ H(Ft, [["render", Gt]]), Jt = {}, Qt = {
+const Qt = /* @__PURE__ */ K(Xt, [["render", Jt]]), te = {}, ee = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -188,13 +207,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, Zt = /* @__PURE__ */ T("path", {
+}, ae = /* @__PURE__ */ P("path", {
   "fill-rule": "evenodd",
   d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
   "clip-rule": "evenodd"
-}, null, -1), te = [
-  Zt
+}, null, -1), oe = [
+  ae
 ];
-function ee(r, t) {
-  return d(), f("svg", Qt, te);
+function se(i, e) {
+  return d(), g("svg", ee, oe);
 }
-const ae = /* @__PURE__ */ H(Jt, [["render", ee]]), oe = {}, se = {
+const ne = /* @__PURE__ */ K(te, [["render", se]]), re = {}, ie = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -209,3 +228,3 @@ width: "12",
   "stroke-linejoin": "round"
-}, ne = /* @__PURE__ */ T("line", {
+}, le = /* @__PURE__ */ P("line", {
   x1: "18",
@@ -215,3 +234,3 @@ y1: "6",
   y2: "18"
-}, null, -1), re = /* @__PURE__ */ T("line", {
+}, null, -1), de = /* @__PURE__ */ P("line", {
   x1: "6",
@@ -221,13 +240,23 @@ y1: "6",
   y2: "18"
-}, null, -1), ie = [
-  ne,
-  re
+}, null, -1), ce = [
+  le,
+  de
 ];
-function le(r, t) {
-  return d(), f("svg", se, ie);
+function ue(i, e) {
+  return d(), g("svg", ie, ce);
 }
-const de = /* @__PURE__ */ H(oe, [["render", le]]), ce = ["aria-live", "data-styled", "data-mounted", "data-promise", "data-removed", "data-visible", "data-y-position", "data-x-position", "data-index", "data-front", "data-swiping", "data-type", "data-invert", "data-swipe-out", "data-expanded"], ue = ["data-disabled"], fe = {
+const fe = /* @__PURE__ */ K(re, [["render", ue]]), pe = () => {
+  const i = f(!1);
+  return D(() => {
+    const e = () => {
+      i.value = document.hidden;
+    };
+    return document.addEventListener("visibilitychange", e), () => window.removeEventListener("visibilitychange", e);
+  }), {
+    isDocumentHidden: i
+  };
+}, me = ["aria-live", "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"], he = ["aria-label", "data-disabled"], ge = {
   key: 1,
   "data-icon": ""
-}, pe = { "data-content": "" }, me = { "data-title": "" }, he = 4e3, ge = 14, ve = 20, be = 200, ye = /* @__PURE__ */ et({
+}, ve = { "data-content": "" }, be = { "data-title": "" }, ye = 4e3, we = 14, xe = 20, Te = 200, ke = /* @__PURE__ */ dt({
   __name: "Toast",
@@ -241,2 +270,3 @@ props: {
     heights: {},
+    gap: {},
     position: {},
@@ -248,190 +278,214 @@ visibleToasts: {},
     duration: {},
-    descriptionClass: {}
+    descriptionClass: {},
+    style: {},
+    cancelButtonStyle: {},
+    actionButtonStyle: {},
+    unstyled: { type: Boolean },
+    descriptionClassName: {},
+    classNames: {},
+    closeButtonAriaLabel: {},
+    pauseWhenPageIsHidden: { type: Boolean },
+    cn: { type: Function }
   },
   emits: ["update:heights", "removeToast"],
-  setup(r, { emit: t }) {
-    const e = (o) => !!o.promise, n = t, a = r, p = c(!1), u = c(!1), h = c(!1), x = c(!1), w = c(null), z = c(0), L = c(0), U = c(null), s = c(null), i = v(() => a.index === 0), b = v(() => a.index + 1 <= a.visibleToasts), y = v(() => a.toast.type), N = v(() => a.toast.dismissible), B = a.toast.className || "", E = a.toast.descriptionClassName || "", V = a.toast.style || {}, P = v(
-      () => a.heights.findIndex((o) => o.toastId === a.toast.id) || 0
-    ), K = v(
-      () => a.toast.duration || a.duration || he
-    ), W = c(0), A = c(0), X = c(K.value), at = c(0), M = c(null), G = v(() => a.position.split("-")), ct = v(() => G.value[0]), ut = v(() => G.value[1]), ft = v(() => a.heights.reduce((o, l, m) => m >= P.value ? o : o + l.height, 0)), pt = v(() => a.toast.invert || a.invert), q = v(() => w.value === "loading"), j = v(
-      () => w.value ?? (a.toast.type || null)
-    ), J = v(() => !e(a.toast) && typeof a.toast.title == "object"), mt = v(() => {
-      if (!e(a.toast))
+  setup(i, { emit: e }) {
+    const t = (a) => !!a.promise, n = e, o = i, u = f(!1), p = f(!1), y = f(!1), c = f(!1), N = f(null), E = f(0), X = f(0), I = f(null), x = f(null), O = h(() => o.index === 0), et = h(() => o.index + 1 <= o.visibleToasts), L = h(() => o.toast.type), G = h(() => o.toast.dismissible !== !1), at = h(() => {
+      var a, l, k, C, T, m, st;
+      return o.cn(
+        (a = o.classNames) == null ? void 0 : a.toast,
+        (k = (l = o.toast) == null ? void 0 : l.classNames) == null ? void 0 : k.toast,
+        (C = o.classNames) == null ? void 0 : C.default,
+        (T = o.classNames) == null ? void 0 : T[o.toast.type || "default"],
+        (st = (m = o.toast) == null ? void 0 : m.classNames) == null ? void 0 : st[o.toast.type || "default"]
+      );
+    }), ot = o.toast.descriptionClassName || "", s = o.toast.style || {}, r = h(
+      () => o.heights.findIndex((a) => a.toastId === o.toast.id) || 0
+    ), v = h(() => o.toast.closeButton ?? o.closeButton), B = h(
+      () => o.toast.duration || o.duration || ye
+    ), $ = f(0), b = f(0), z = f(B.value), W = f(0), _ = f(null), Y = h(() => o.position.split("-")), Z = h(() => Y.value[0]), q = h(() => Y.value[1]), J = h(() => o.heights.reduce((a, l, k) => k >= r.value ? a : a + l.height, 0)), Q = pe(), tt = h(() => o.toast.invert || o.invert), R = h(() => N.value === "loading"), F = h(
+      () => N.value ?? (o.toast.type || null)
+    ), ct = h(() => !t(o.toast) && typeof o.toast.title == "object"), gt = h(() => {
+      if (!t(o.toast))
         return null;
-      switch (w.value) {
+      switch (N.value) {
         case "loading":
-          return a.toast.loading;
+          return o.toast.loading;
         case "success":
-          return typeof a.toast.success == "function" ? U.value : a.toast.success;
+          return typeof o.toast.success == "function" ? I.value : o.toast.success;
         case "error":
-          return typeof a.toast.error == "function" ? U.value : a.toast.error;
+          return typeof o.toast.error == "function" ? I.value : o.toast.error;
         default:
           return null;
       }
-    });
-    Q(() => p.value = !0), R(() => {
-      A.value = P.value * ge + ft.value;
-    });
-    function ht() {
-      var o, l;
-      (!q.value || N.value) && (S(), (l = (o = a.toast).onDismiss) == null || l.call(o, a.toast));
-    }
-    function S() {
-      u.value = !0, z.value = A.value;
-      const o = a.heights.filter(
-        (l) => l.toastId !== a.toast.id
+    }), vt = () => {
+      var a, l;
+      (!R.value || G.value) && (A(), (l = (a = o.toast).onDismiss) == null || l.call(a, o.toast));
+    }, A = () => {
+      p.value = !0, E.value = b.value;
+      const a = o.heights.filter(
+        (l) => l.toastId !== o.toast.id
       );
-      n("update:heights", o), setTimeout(() => {
-        n("removeToast", a.toast);
-      }, be);
-    }
-    const gt = (o) => {
-      q || (z.value = A.value, o.target.setPointerCapture(o.pointerId), o.target.tagName !== "BUTTON" && (h.value = !0, M.value = { x: o.clientX, y: o.clientY }));
-    }, vt = (o) => {
-      var m, D, _, $;
-      if (x.value)
+      n("update:heights", a), setTimeout(() => {
+        n("removeToast", o.toast);
+      }, Te);
+    }, bt = (a) => {
+      R || (E.value = b.value, a.target.setPointerCapture(a.pointerId), a.target.tagName !== "BUTTON" && (y.value = !0, _.value = { x: a.clientX, y: a.clientY }));
+    }, yt = (a) => {
+      var k, C, T, m;
+      if (c.value)
         return;
-      M.value = null;
+      _.value = null;
       const l = Number(
-        ((m = s.value) == null ? void 0 : m.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
+        ((k = x.value) == null ? void 0 : k.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
       );
-      if (Math.abs(l) >= ve) {
-        z.value = A.value, (_ = (D = a.toast).onDismiss) == null || _.call(D, a.toast), S(), x.value = !0;
+      if (Math.abs(l) >= xe) {
+        E.value = b.value, (T = (C = o.toast).onDismiss) == null || T.call(C, o.toast), A(), c.value = !0;
         return;
       }
-      ($ = s.value) == null || $.style.setProperty("--swipe-amount", "0px"), h.value = !0;
-    }, bt = (o) => {
-      var ot;
-      if (!M.value)
+      (m = x.value) == null || m.style.setProperty("--swipe-amount", "0px"), y.value = !0;
+    }, wt = (a) => {
+      var ut;
+      if (!_.value)
         return;
-      const l = o.clientY - M.value.y, m = o.clientX - M.value.x, _ = (G.value[0] === "top" ? Math.min : Math.max)(0, l), $ = o.pointerType === "touch" ? 10 : 2;
-      Math.abs(_) > $ ? (ot = s.value) == null || ot.style.setProperty("--swipe-amount", `${l}px`) : Math.abs(m) > $ && (M.value = null);
+      const l = a.clientY - _.value.y, k = a.clientX - _.value.x, T = (Y.value[0] === "top" ? Math.min : Math.max)(0, l), m = a.pointerType === "touch" ? 10 : 2;
+      Math.abs(T) > m ? (ut = x.value) == null || ut.style.setProperty("--swipe-amount", `${l}px`) : Math.abs(k) > m && (_.value = null);
     };
-    return R((o) => {
-      if (a.toast.promise && w.value === "loading" || a.toast.duration === 1 / 0)
+    return D(() => {
+      b.value = r.value * we + J.value;
+    }), D((a) => {
+      if (o.toast.promise && N.value === "loading" || o.toast.duration === 1 / 0)
         return;
       let l;
-      const m = () => {
-        if (at.value < W.value) {
-          const _ = (/* @__PURE__ */ new Date()).getTime() - W.value;
-          X.value = X.value - _;
+      const k = () => {
+        if (W.value < $.value) {
+          const T = (/* @__PURE__ */ new Date()).getTime() - $.value;
+          z.value = z.value - T;
         }
-        at.value = (/* @__PURE__ */ new Date()).getTime();
-      }, D = () => {
-        W.value = (/* @__PURE__ */ new Date()).getTime(), l = setTimeout(() => {
-          var _, $;
-          ($ = (_ = a.toast).onAutoClose) == null || $.call(_, a.toast), S();
-        }, X.value);
+        W.value = (/* @__PURE__ */ new Date()).getTime();
+      }, C = () => {
+        $.value = (/* @__PURE__ */ new Date()).getTime(), l = setTimeout(() => {
+          var T, m;
+          (m = (T = o.toast).onAutoClose) == null || m.call(T, o.toast), A();
+        }, z.value);
       };
-      a.expanded || a.interacting ? m() : D(), o(() => {
+      o.expanded || o.interacting || o.pauseWhenPageIsHidden && Q ? k() : C(), a(() => {
         clearTimeout(l);
       });
-    }), Q(() => {
-      if (s.value) {
-        const o = s.value.getBoundingClientRect().height;
-        L.value = o;
-        const l = [{ toastId: a.toast.id, height: o }, ...a.heights];
+    }), D(() => {
+      o.toast.delete && A();
+    }), Bt(() => {
+      if (x.value) {
+        const a = x.value.getBoundingClientRect().height;
+        X.value = a;
+        const l = [
+          { toastId: o.toast.id, height: a, position: o.toast.position },
+          ...o.heights
+        ];
         n("update:heights", l);
       }
-    }), dt(() => {
-      if (s.value) {
-        const o = a.heights.filter(
-          (l) => l.toastId !== a.toast.id
+      u.value = !0;
+    }), $t(() => {
+      if (x.value) {
+        const a = o.heights.filter(
+          (l) => l.toastId !== o.toast.id
         );
-        n("update:heights", o);
+        n("update:heights", a);
       }
-    }), R(() => {
-      a.toast.delete && S();
-    }), (o, l) => (d(), f("li", {
-      "aria-live": o.toast.important ? "assertive" : "polite",
-      "aria-atomic": "",
-      role: "status",
-      tabindex: "0",
-      ref_key: "toastRef",
-      ref: s,
-      "data-sonner-toast": "",
-      class: st(O(B)),
-      "data-styled": !J.value,
-      "data-mounted": p.value,
-      "data-promise": !!o.toast.promise,
-      "data-removed": u.value,
-      "data-visible": b.value,
-      "data-y-position": ct.value,
-      "data-x-position": ut.value,
-      "data-index": a.index,
-      "data-front": i.value,
-      "data-swiping": h.value,
-      "data-type": w.value !== "loading" && w.value ? w.value : y.value,
-      "data-invert": pt.value,
-      "data-swipe-out": x.value,
-      "data-expanded": !!(a.expanded || a.expandByDefault && p.value),
-      style: Z({
-        "--index": a.index,
-        "--toasts-before": a.index,
-        "--z-index": o.toasts.length - a.index,
-        "--offset": `${u.value ? z.value : A.value}px`,
-        "--initial-height": a.expandByDefault ? "auto" : `${L.value}px`,
-        ...O(V)
-      }),
-      onPointerdown: gt,
-      onPointerup: vt,
-      onPointermove: bt
-    }, [
-      a.closeButton && !J.value ? (d(), f("button", {
-        key: 0,
-        "aria-label": "Close toast",
-        "data-close-button": "",
-        "data-disabled": q.value,
-        onClick: ht
+    }), (a, l) => {
+      var k, C, T;
+      return d(), g("li", {
+        "aria-live": a.toast.important ? "assertive" : "polite",
+        "aria-atomic": "",
+        role: "status",
+        tabindex: "0",
+        ref_key: "toastRef",
+        ref: x,
+        "data-sonner-toast": "",
+        class: nt(at.value),
+        "data-styled": !(a.toast.unstyled || a.unstyled),
+        "data-mounted": u.value,
+        "data-promise": !!a.toast.promise,
+        "data-removed": p.value,
+        "data-visible": et.value,
+        "data-y-position": Z.value,
+        "data-x-position": q.value,
+        "data-index": a.index,
+        "data-front": O.value,
+        "data-swiping": y.value,
+        "data-dismissible": G.value,
+        "data-type": L.value,
+        "data-invert": tt.value,
+        "data-swipe-out": c.value,
+        "data-expanded": !!(a.expanded || a.expandByDefault && u.value),
+        style: it({
+          "--index": a.index,
+          "--toasts-before": a.index,
+          "--z-index": a.toasts.length - a.index,
+          "--offset": `${p.value ? E.value : b.value}px`,
+          "--initial-height": a.expandByDefault ? "auto" : `${X.value}px`,
+          ...a.style,
+          ...V(s)
+        }),
+        onPointerdown: bt,
+        onPointerup: yt,
+        onPointermove: wt
       }, [
-        kt(de)
-      ], 8, ue)) : C("", !0),
-      y.value || o.toast.icon || o.toast.promise ? (d(), f("div", fe, [
-        typeof o.toast.promise == "function" || y.value === "loading" ? (d(), I(Nt, {
+        v.value && !ct.value ? (d(), g("button", {
           key: 0,
-          visible: w.value === "loading" || y.value === "loading"
-        }, null, 8, ["visible"])) : C("", !0),
-        j.value === "success" ? (d(), I(Yt, { key: 1 })) : j.value === "info" ? (d(), I(jt, { key: 2 })) : j.value === "warning" ? (d(), I(qt, { key: 3 })) : j.value === "error" ? (d(), I(ae, { key: 4 })) : C("", !0)
-      ])) : C("", !0),
-      T("div", pe, [
-        T("div", me, [
-          typeof o.toast.title == "string" ? (d(), f(F, { key: 0 }, [
-            nt(Y(o.toast.title), 1)
-          ], 64)) : o.toast.title === void 0 || o.toast.title === null ? (d(), f(F, { key: 1 }, [
-            nt(Y(mt.value), 1)
-          ], 64)) : J.value ? (d(), I(Tt(o.toast.title), {
-            key: 2,
-            onCloseToast: l[0] || (l[0] = () => {
-              var m;
-              S(), (m = o.toast.cancel) != null && m.onClick && o.toast.cancel.onClick();
-            })
-          }, null, 32)) : C("", !0)
+          "aria-label": a.closeButtonAriaLabel || "Close toast",
+          "data-disabled": R.value,
+          "data-close-button": "",
+          class: nt(a.cn((k = a.classNames) == null ? void 0 : k.closeButton, (T = (C = a.toast) == null ? void 0 : C.classNames) == null ? void 0 : T.closeButton)),
+          onClick: vt
+        }, [
+          Ct(fe)
+        ], 10, he)) : M("", !0),
+        L.value || a.toast.icon || a.toast.promise ? (d(), g("div", ge, [
+          typeof a.toast.promise == "function" || L.value === "loading" ? (d(), H(Ot, {
+            key: 0,
+            visible: N.value === "loading" || L.value === "loading"
+          }, null, 8, ["visible"])) : M("", !0),
+          F.value === "success" ? (d(), H(Rt, { key: 1 })) : F.value === "info" ? (d(), H(Kt, { key: 2 })) : F.value === "warning" ? (d(), H(Qt, { key: 3 })) : F.value === "error" ? (d(), H(ne, { key: 4 })) : M("", !0)
+        ])) : M("", !0),
+        P("div", ve, [
+          P("div", be, [
+            typeof a.toast.title == "string" ? (d(), g(U, { key: 0 }, [
+              ft(j(a.toast.title), 1)
+            ], 64)) : a.toast.title === void 0 || a.toast.title === null ? (d(), g(U, { key: 1 }, [
+              ft(j(gt.value), 1)
+            ], 64)) : ct.value ? (d(), H(St(a.toast.title), {
+              key: 2,
+              onCloseToast: l[0] || (l[0] = () => {
+                var m;
+                A(), (m = a.toast.cancel) != null && m.onClick && a.toast.cancel.onClick();
+              })
+            }, null, 32)) : M("", !0)
+          ]),
+          a.toast.description ? (d(), g("div", {
+            key: 0,
+            "data-description": "",
+            class: nt(a.descriptionClass + V(ot))
+          }, j(a.toast.description), 3)) : M("", !0)
         ]),
-        o.toast.description ? (d(), f("div", {
-          key: 0,
-          "data-description": "",
-          class: st(o.descriptionClass + O(E))
-        }, Y(o.toast.description), 3)) : C("", !0)
-      ]),
-      o.toast.cancel ? (d(), f("button", {
-        key: 2,
-        "data-button": "",
-        "data-cancel": "",
-        onClick: l[1] || (l[1] = () => {
-          var m;
-          S(), (m = o.toast.cancel) != null && m.onClick && o.toast.cancel.onClick();
-        })
-      }, Y(o.toast.cancel.label), 1)) : C("", !0),
-      o.toast.action ? (d(), f("button", {
-        key: 3,
-        "data-button": "",
-        onClick: l[2] || (l[2] = () => {
-          var m;
-          S(), (m = o.toast.action) == null || m.onClick();
-        })
-      }, Y(o.toast.action.label), 1)) : C("", !0)
-    ], 46, ce));
+        a.toast.cancel ? (d(), g("button", {
+          key: 2,
+          "data-button": "",
+          "data-cancel": "",
+          onClick: l[1] || (l[1] = () => {
+            var m;
+            A(), (m = a.toast.cancel) != null && m.onClick && a.toast.cancel.onClick();
+          })
+        }, j(a.toast.cancel.label), 1)) : M("", !0),
+        a.toast.action ? (d(), g("button", {
+          key: 3,
+          "data-button": "",
+          onClick: l[2] || (l[2] = () => {
+            var m;
+            A(), (m = a.toast.action) == null || m.onClick();
+          })
+        }, j(a.toast.action.label), 1)) : M("", !0)
+      ], 46, me);
+    };
   }
-}), xe = ["aria-label"], we = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], ke = 3, rt = "32px", Te = 4e3, _e = 356, it = 14, $e = typeof window < "u" && typeof document < "u", Ce = /* @__PURE__ */ et({
+}), Be = ["aria-label"], $e = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], Ce = 3, mt = "32px", Se = 4e3, Ne = 356, ht = 14, Ee = typeof window < "u" && typeof document < "u", Ie = /* @__PURE__ */ dt({
   name: "Toaster",
@@ -447,5 +501,5 @@ inheritAttrs: !1,
     expand: { type: Boolean, default: !1 },
-    duration: { default: Te },
-    gap: { default: it },
-    visibleToasts: { default: ke },
+    duration: { default: Se },
+    gap: { default: ht },
+    visibleToasts: { default: Ce },
     closeButton: { type: Boolean, default: !1 },
@@ -455,14 +509,14 @@ toastOptions: { default: () => ({}) },
     style: { default: () => ({}) },
-    offset: { default: rt },
-    dir: { default: "auto" }
+    offset: { default: mt },
+    dir: { default: "auto" },
+    containerAriaLabel: { default: "Notifications" },
+    pauseWhenPageIsHidden: { type: Boolean, default: !1 },
+    cn: {}
   },
-  setup(r) {
-    const t = r, e = _t(), n = c([]), a = c([]), p = c(!1), u = c(!1), h = c(
-      t.theme !== "system" ? t.theme : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-    ), x = v(() => t.position.split("-")), w = c(null), z = t.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-    function L(s) {
-      n.value = n.value.filter(({ id: i }) => i !== s.id);
+  setup(i) {
+    function e(...s) {
+      return s.filter(Boolean).join(" ");
     }
-    function U() {
-      if (typeof window > "u")
+    function t() {
+      if (typeof window > "u" || typeof document > "u")
         return "ltr";
@@ -472,112 +526,154 @@ const s = document.documentElement.getAttribute("dir");
     }
-    return Q(() => {
-      const s = k.subscribe((i) => {
-        if (i.dismiss) {
-          n.value = n.value.map(
-            (b) => b.id === i.id ? { ...b, delete: !0 } : b
+    const n = i, o = Nt(), u = f([]), p = h(() => {
+      const s = u.value.filter((r) => r.position).map((r) => r.position);
+      return s.length > 0 ? Array.from(new Set([n.position].concat(s))) : [n.position];
+    }), y = f([]), c = f(!1), N = f(!1), E = f(
+      n.theme !== "system" ? n.theme : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+    );
+    h(() => n.position.split("-"));
+    const X = h(() => n.cn || e), I = f(null), x = f(null), O = f(!1), et = n.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    function L(s) {
+      u.value = u.value.filter(({ id: r }) => r !== s.id);
+    }
+    const G = (s) => {
+      var r, v;
+      O.value && !((v = (r = s.currentTarget) == null ? void 0 : r.contains) != null && v.call(r, s.relatedTarget)) && (O.value = !1, x.value && (x.value.focus({ preventScroll: !0 }), x.value = null));
+    }, at = (s) => {
+      s.target instanceof HTMLElement && s.target.dataset.dismissible === "false" || O.value || (O.value = !0, x.value = s.relatedTarget);
+    }, ot = (s) => {
+      s.target && s.target instanceof HTMLElement && s.target.dataset.dismissible === "false" || (N.value = !1);
+    };
+    return D((s) => {
+      const r = S.subscribe((v) => {
+        if (v.dismiss) {
+          u.value = u.value.map(
+            (B) => B.id === v.id ? { ...B, delete: !0 } : B
           );
           return;
         }
-        $t(() => {
-          const b = n.value.findIndex((y) => y.id === i.id);
-          b !== -1 ? n.value.splice(b, 1, i) : n.value = [i, ...n.value];
+        Et(() => {
+          const B = u.value.findIndex(
+            ($) => $.id === v.id
+          );
+          B !== -1 ? u.value.splice(B, 1, v) : u.value = [v, ...u.value];
         });
       });
-      dt(() => {
-        s();
+      s(() => {
+        r();
       });
-    }), Ct(
-      () => t.theme,
+    }), pt(
+      () => n.theme,
       (s) => {
         if (s !== "system") {
-          h.value = s;
+          E.value = s;
           return;
         }
-        s === "system" && (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? h.value = "dark" : h.value = "light"), !(typeof window > "u") && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: i }) => {
-          i ? h.value = "dark" : h.value = "light";
+        s === "system" && (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? E.value = "dark" : E.value = "light"), !(typeof window > "u") && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: r }) => {
+          r ? E.value = "dark" : E.value = "light";
         });
       }
-    ), R(() => {
-      n.value.length <= 1 && (p.value = !1);
-    }), R((s) => {
-      function i(b) {
-        var N, B;
-        t.hotkey.every(
-          (E) => b[E] || b.code === E
-        ) && (p.value = !0, (N = w.value) == null || N.focus()), b.code === "Escape" && (document.activeElement === w.value || (B = w.value) != null && B.contains(document.activeElement)) && (p.value = !1);
+    ), pt(
+      () => I.value,
+      () => {
+        if (I.value)
+          return () => {
+            x.value && (x.value.focus({ preventScroll: !0 }), x.value = null, O.value = !1);
+          };
       }
-      $e && (document.addEventListener("keydown", i), s(() => {
-        document.removeEventListener("keydown", i);
+    ), D(() => {
+      u.value.length <= 1 && (c.value = !1);
+    }), D((s) => {
+      function r(v) {
+        var $, b;
+        n.hotkey.every(
+          (z) => v[z] || v.code === z
+        ) && (c.value = !0, ($ = I.value) == null || $.focus()), v.code === "Escape" && (document.activeElement === I.value || (b = I.value) != null && b.contains(document.activeElement)) && (c.value = !1);
+      }
+      Ee && (document.addEventListener("keydown", r), s(() => {
+        document.removeEventListener("keydown", r);
       }));
-    }), (s, i) => {
-      var b;
-      return d(), f("section", {
-        "aria-label": `Notifications ${O(z)}`,
-        tabIndex: -1
-      }, [
-        T("ol", {
+    }), (s, r) => (d(), g("section", {
+      "aria-label": `${s.containerAriaLabel} ${V(et)}`,
+      tabIndex: -1
+    }, [
+      (d(!0), g(U, null, rt(p.value, (v, B) => {
+        var $;
+        return d(), g("ol", {
+          key: v,
+          ref_for: !0,
           ref_key: "listRef",
-          ref: w,
+          ref: I,
           "data-sonner-toaster": "",
-          dir: s.dir === "auto" ? U() : s.dir,
+          dir: s.dir === "auto" ? t() : s.dir,
           tabIndex: -1,
           "data-theme": s.theme,
           "data-rich-colors": s.richColors,
-          "data-y-position": x.value[0],
-          "data-x-position": x.value[1],
-          style: Z(
+          "data-y-position": v.split("-")[0],
+          "data-x-position": v.split("-")[1],
+          style: it(
             {
-              "--front-toast-height": `${(b = a.value[0]) == null ? void 0 : b.height}px`,
-              "--offset": typeof s.offset == "number" ? `${s.offset}px` : s.offset || rt,
-              "--width": `${_e}px`,
-              "--gap": `${it}px`,
-              ...O(e).style
+              "--front-toast-height": `${($ = y.value[0]) == null ? void 0 : $.height}px`,
+              "--offset": typeof s.offset == "number" ? `${s.offset}px` : s.offset || mt,
+              "--width": `${Ne}px`,
+              "--gap": `${ht}px`,
+              ...s.style,
+              ...V(o).style
             }
           ),
-          onMouseenter: i[1] || (i[1] = (y) => p.value = !0),
-          onMousemove: i[2] || (i[2] = (y) => p.value = !0),
-          onMouseleave: i[3] || (i[3] = () => {
-            u.value || (p.value = !1);
+          onBlur: G,
+          onFocus: at,
+          onMouseenter: r[1] || (r[1] = (b) => c.value = !0),
+          onMousemove: r[2] || (r[2] = (b) => c.value = !0),
+          onMouseleave: r[3] || (r[3] = () => {
+            N.value || (c.value = !1);
           }),
-          onPointerdown: i[4] || (i[4] = (y) => u.value = !1),
-          onPointerup: i[5] || (i[5] = (y) => u.value = !1)
+          onPointerdown: ot,
+          onPointerup: r[4] || (r[4] = (b) => N.value = !1)
         }, [
-          (d(!0), f(F, null, lt(n.value, (y, N) => {
-            var B, E, V, P;
-            return d(), I(ye, {
-              key: y.id,
-              index: N,
-              toast: y,
-              duration: ((B = s.toastOptions) == null ? void 0 : B.duration) ?? s.duration,
-              className: (E = s.toastOptions) == null ? void 0 : E.className,
-              descriptionClassName: (V = s.toastOptions) == null ? void 0 : V.descriptionClassName,
+          (d(!0), g(U, null, rt(u.value.filter(
+            (b) => !b.position && B === 0 || b.position === s.position
+          ), (b, z) => {
+            var W, _, Y, Z, q, J, Q, tt, R;
+            return d(), H(ke, {
+              key: b.id,
+              index: z,
+              toast: b,
+              duration: ((W = s.toastOptions) == null ? void 0 : W.duration) ?? s.duration,
+              className: (_ = s.toastOptions) == null ? void 0 : _.className,
+              descriptionClassName: (Y = s.toastOptions) == null ? void 0 : Y.descriptionClassName,
               invert: s.invert,
               visibleToasts: s.visibleToasts,
-              closeButton: s.closeButton,
-              interacting: u.value,
+              closeButton: ((Z = s.toastOptions) == null ? void 0 : Z.closeButton) ?? s.closeButton,
+              interacting: N.value,
               position: s.position,
-              style: Z((P = s.toastOptions) == null ? void 0 : P.style),
-              toasts: n.value,
+              style: it((q = s.toastOptions) == null ? void 0 : q.style),
+              unstyled: (J = s.toastOptions) == null ? void 0 : J.unstyled,
+              classNames: (Q = s.toastOptions) == null ? void 0 : Q.classNames,
+              cancelButtonStyle: (tt = s.toastOptions) == null ? void 0 : tt.cancelButtonStyle,
+              actionButtonStyle: (R = s.toastOptions) == null ? void 0 : R.actionButtonStyle,
+              toasts: u.value,
               expandByDefault: s.expand,
               gap: s.gap,
-              expanded: p.value,
-              heights: a.value,
-              "onUpdate:heights": i[0] || (i[0] = (K) => a.value = K),
+              expanded: c.value,
+              pauseWhenPageIsHidden: s.pauseWhenPageIsHidden,
+              cn: X.value,
+              heights: y.value,
+              "onUpdate:heights": r[0] || (r[0] = (F) => y.value = F),
               onRemoveToast: L
-            }, null, 8, ["index", "toast", "duration", "className", "descriptionClassName", "invert", "visibleToasts", "closeButton", "interacting", "position", "style", "toasts", "expandByDefault", "gap", "expanded", "heights"]);
+            }, null, 8, ["index", "toast", "duration", "className", "descriptionClassName", "invert", "visibleToasts", "closeButton", "interacting", "position", "style", "unstyled", "classNames", "cancelButtonStyle", "actionButtonStyle", "toasts", "expandByDefault", "gap", "expanded", "pauseWhenPageIsHidden", "cn", "heights"]);
           }), 128))
-        ], 44, we)
-      ], 8, xe);
-    };
+        ], 44, $e);
+      }), 128))
+    ], 8, Be));
   }
-}), ze = {
-  install(r) {
-    r.component("Toaster", Ce);
+}), Me = {
+  install(i) {
+    i.component("Toaster", Ie);
   }
 };
 export {
-  Ce as Toaster,
-  ze as default,
-  Ie as toast
+  Ie as Toaster,
+  Me as default,
+  ze as toast
 };
 //# sourceMappingURL=vue-sonner.js.map

package.json

 {
   "name": "vue-sonner",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
@@ -5,0 +5,0 @@ "author": "xiaoluoboding <[e-mail]>",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

259390

increased by3.86%

Number of package files

25

increased by4.17%

Lines of code

1155

increased by15.5%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes