react-strawberry-toast 1.5.4 → 1.6.0

package/README.md

@@ -53,6 +53,7 @@ function App() {
 | style      | Style of ToastContainer  |  Object | |
 | gap      | Gap Between toasts  |  Number | 9 |
 | pauseOnActivate      | Pause Toast timer when blur events occurs  |  Boolean | true |
+| limit      | Limit the number of toast to be displayed |  Number | |
 
 
 ### toast
@@ -66,6 +67,10 @@ function App() {
 | icon      | The icon to be displayed in the toast  |  ReactNode | |
 | timeOut      | Time for toast to disappear  |  Number | 3000 |
 | removeTimeOut      | Time for toast to remove In Toast List  |  Number | 200 |
+| className      | Class of toast  |  String |  |
+| style      | Style of toast  |  Object | |
+| target      | Target element where toast will be located  |  Object | |
+
 
 ## License
 

package/dist/headless.d.mts

@@ -6,7 +6,7 @@ interface BaseOptions {
     toastId?: string;
     timeOut?: number;
     removeTimeOut?: number;
-    className?: string;
+    className?: string | null;
     style?: React.CSSProperties;
 }
 interface ToastBaseState {
@@ -22,7 +22,10 @@ interface Options extends BaseOptions {
     position?: Position | null;
     containerId?: string | null;
     pauseOnHover?: boolean;
-    align?: 'left' | 'center' | 'right' | '';
+    target?: {
+        element: HTMLElement;
+        offset?: [number, number];
+    } | null;
 }
 interface ToastDataCallback {
     toastId: ToastBaseState['toastId'];

package/dist/headless.d.ts

@@ -6,7 +6,7 @@ interface BaseOptions {
     toastId?: string;
     timeOut?: number;
     removeTimeOut?: number;
-    className?: string;
+    className?: string | null;
     style?: React.CSSProperties;
 }
 interface ToastBaseState {
@@ -22,7 +22,10 @@ interface Options extends BaseOptions {
     position?: Position | null;
     containerId?: string | null;
     pauseOnHover?: boolean;
-    align?: 'left' | 'center' | 'right' | '';
+    target?: {
+        element: HTMLElement;
+        offset?: [number, number];
+    } | null;
 }
 interface ToastDataCallback {
     toastId: ToastBaseState['toastId'];

package/dist/index.d.mts

@@ -7,7 +7,7 @@ interface BaseOptions {
     toastId?: string;
     timeOut?: number;
     removeTimeOut?: number;
-    className?: string;
+    className?: string | null;
     style?: React.CSSProperties;
 }
 interface ToastBaseState {
@@ -23,7 +23,10 @@ interface Options extends BaseOptions {
     position?: Position | null;
     containerId?: string | null;
     pauseOnHover?: boolean;
-    align?: 'left' | 'center' | 'right' | '';
+    target?: {
+        element: HTMLElement;
+        offset?: [number, number];
+    } | null;
 }
 interface ToastDataCallback {
     toastId: ToastBaseState['toastId'];

package/dist/index.d.ts

@@ -7,7 +7,7 @@ interface BaseOptions {
     toastId?: string;
     timeOut?: number;
     removeTimeOut?: number;
-    className?: string;
+    className?: string | null;
     style?: React.CSSProperties;
 }
 interface ToastBaseState {
@@ -23,7 +23,10 @@ interface Options extends BaseOptions {
     position?: Position | null;
     containerId?: string | null;
     pauseOnHover?: boolean;
-    align?: 'left' | 'center' | 'right' | '';
+    target?: {
+        element: HTMLElement;
+        offset?: [number, number];
+    } | null;
 }
 interface ToastDataCallback {
     toastId: ToastBaseState['toastId'];

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var W=Object.defineProperty;var tt=Object.getOwnPropertyDescriptor;var et=Object.getOwnPropertyNames;var at=Object.prototype.hasOwnProperty;var rt=(t,e)=>{for(var n in e)W(t,n,{get:e[n],enumerable:!0})},st=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of et(e))!at.call(t,o)&&o!==n&&W(t,o,{get:()=>e[o],enumerable:!(l=tt(e,o))||l.enumerable});return t};var ot=t=>st(W({},"__esModule",{value:!0}),t);var pt={};rt(pt,{ToastContainer:()=>dt,toast:()=>a,toastStore:()=>b,useToasts:()=>U});module.exports=ot(pt);var B=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var O=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}setState(e){this.state=typeof e=="function"?e(this.state):e,this.listeners.forEach(n=>n())}getSnapShot(){return this.state}};var p="react-strawberry-toast";var y=require("react/jsx-runtime");function nt(){return(0,y.jsxs)("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[(0,y.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z"}),(0,y.jsx)("path",{d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1ab173"})]})}function it(){return(0,y.jsx)("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,y.jsx)("path",{d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function ct(){return(0,y.jsx)("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,y.jsx)("path",{d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}var _={success:(0,y.jsx)(nt,{}),error:(0,y.jsx)(it,{}),loading:(0,y.jsx)("div",{className:`${p}__loading`}),warn:(0,y.jsx)(ct,{})};var X=t=>{let e=r=>{let s=t.toastTimers.get(r);clearTimeout(s),t.toastTimers.delete(r)},n=r=>{t.activatedToasts.add(r)},l=r=>t.activatedToasts.has(r),o=(r,s=200)=>{l(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(i=>i.toastId!==r),t.setState([...t.state])},s),e(r))},f=()=>{t.setState([])},m=(r,s,i)=>{t.state=t.state.map(c=>c.toastId===r?{...c,...i,updated:new Date().getTime(),data:s}:c),t.setState([...t.state])},h=r=>{let s=new Date().getTime();t.state=t.state.map(i=>i.toastId===r?{...i,pausedAt:s}:i),e(r)},T=(r,s)=>{let i=setTimeout(()=>{var g;t.state=t.state.map(d=>d.toastId===r?{...d,isVisible:!1}:d),t.setState([...t.state]);let c=(g=t.state.find(d=>d.toastId===r))==null?void 0:g.removeTimeOut;o(r,c)},s>2147483647?2147483647:s);t.toastTimers.set(r,i)};return{setActive:n,isActive:l,disappear:T,resume:r=>{if(t.toastTimers.has(r))return;let s=t.state.find(c=>c.toastId===r);if(!s)return;let i=s.createdAt+(s.timeOut||3e3)-(s.pausedAt||0);T(r,i)},pause:h,replace:m,remove:o,allClear:f}};var b=new O,lt=B(),A=(t="default")=>(e,n={})=>{let{timeOut:l=3e3,removeTimeOut:o=200,pauseOnHover:f=!0,toastId:m,className:h,style:T,align:u}=n,r=m||lt();if(a.isActive(r))throw new Error("A duplicate custom ID is not available.");let s=new Date().getTime(),i={updated:null,pausedAt:null,className:h||"",style:T||{},icon:n.icon||null,containerId:n.containerId||null,position:n.position||null,timeOut:l>2147483647?2147483647:l,align:u||"",toastId:r,data:e,createdAt:s,toastType:t,pauseOnHover:f,removeTimeOut:o,isVisible:!0};return b.state.push(i),b.setState([...b.state]),r},a=(t,e={})=>A()(t,e),x=X(b);a.setActive=x.setActive;a.isActive=x.isActive;a.disappear=x.disappear;a.resume=x.resume;a.pause=x.pause;a.replace=x.replace;a.remove=x.remove;a.allClear=x.allClear;a.success=A("success");a.error=A("error");a.warn=A("warn");a.loading=A("loading");a.custom=A("custom");a.promise=(t,e,n={})=>{let{loading:l,success:o,error:f}=e,m=a.loading(l,{...n,timeOut:2147483647}),h={toastId:m,close:()=>a.disappear(m,0),immediatelyClose:()=>{a.disappear(m,0),a.remove(m,0)},icons:{success:_.success,error:_.error,warn:_.warn,loading:_.loading},isVisible:!0},T=n.timeOut||=3e3;t.then(u=>{a.replace(m,typeof o=="function"?o(u,h):o,{...n,timeOut:T>2147483647?2147483647:T,toastType:"success"})}).catch(u=>{a.replace(m,typeof f=="function"?f(u,h):f,{...n,timeOut:T>2147483647?2147483647:T,toastType:"error"})})};var Z=require("react");var k=require("react");var G=require("react");function j({condition:t,children:e}){let n=G.Children.toArray(e);if(n.length>2)throw new Error("The number of children exceeds two.");return n.find(l=>t?l.key===".0":l.key===".1")}function q({children:t}){return t}function F({children:t}){return t}var J=({isVisible:t,position:e})=>t?/top/i.test(e)?`${p}__fade-in`:`${p}__fade-in-reverse`:/bottom/i.test(e)?`${p}__fade-out-reverse`:`${p}__fade-out`;var C=require("react"),V=(t,e)=>{let n=(0,C.useRef)(e);(0,C.useEffect)(()=>{n.current=e},[e]),(0,C.useEffect)(()=>(window.addEventListener(t,n.current),()=>{window.removeEventListener(t,n.current)}),[t])};var w=require("react/jsx-runtime"),K=(0,k.forwardRef)(function({toastProps:e,pauseOnActivate:n},l){let{toastId:o,isVisible:f,timeOut:m,containerId:h,className:T,style:u,icon:r,updated:s,toastType:i,position:c,data:g,pauseOnHover:d,align:P}=e,$=J({isVisible:f,position:c}),S=typeof g=="function"?g({toastId:o,close:()=>a.disappear(o,0),immediatelyClose:()=>{a.disappear(o,0),a.remove(o,0)},icons:{success:_.success,error:_.error,warn:_.warn,loading:_.loading},isVisible:f}):g,z=()=>{d&&a.pause(o)},H=()=>{d&&a.resume(o)},L=()=>{n&&a.resume(o)},D=()=>{n&&a.pause(o)};V("focus",L),V("blur",D),(0,k.useEffect)(()=>{a.isActive(o)||(a.setActive(o),a.disappear(o,m))},[o]),(0,k.useEffect)(()=>{s!==null&&a.disappear(o,m)},[s]);let N=r||(i==="custom"||i==="default"?null:_[i]),I=/center/i.test(c)?"-center":/left/i.test(c)?"-left":"-right",E=`${p}__toast${P?`-${P}`:I}`;return(0,w.jsx)("div",{role:"alert",ref:l,className:`${p}__toast-content-container`,"data-testid":`container-${h||"default"}`,onMouseEnter:z,onMouseLeave:H,children:(0,w.jsx)("div",{className:`${E} ${a.isActive(o)?"":$}`,children:(0,w.jsxs)(j,{condition:i!=="custom",children:[(0,w.jsx)(q,{children:(0,w.jsxs)("div",{className:T||`${p}__toast-content`,style:u,children:[N&&(0,w.jsx)("span",{className:`${p}__toast-icon`,children:N}),S]})}),(0,w.jsx)(F,{children:S})]})})})});var Q=require("react");var U=()=>(0,Q.useSyncExternalStore)(b.subscribe.bind(b),b.getSnapShot.bind(b),b.getSnapShot.bind(b));var R=require("react/jsx-runtime");function dt({className:t,style:e,limit:n,position:l="top-center",containerId:o="",gap:f=9,reverse:m=!1,pauseOnActivate:h=!0}){let T=U(),u=(0,Z.useRef)({}),r=T.reduce((s,i)=>{let c=i.position||l;return i.position=c,s[c]=s[c]||[],s[c].push(i),s},{});return(0,R.jsx)("div",{id:`${p}__root`,children:Object.entries(r).map(([s,i])=>{let c=i.filter(d=>o?d.containerId===o:!d.containerId).slice(0,n),g=m?c.reverse():c;return(0,R.jsx)("div",{"data-testid":s,className:`${`${p}__z9999`} ${t||`${p}__toast-container ${p}__${s}`}`,style:e,children:g.map((d,P,$)=>(0,R.jsx)(K,{ref:S=>{if(!S){delete u.current[d.toastId];return}let z="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",H=u.current[d.toastId]||S.getBoundingClientRect().height;u.current[d.toastId]=H;let L=/left/.test(s)?50:/center/.test(s)?0:-50,D=/bottom/.test(s)?0:1,N=$.filter((I,E)=>E<=P-D).reduce((I,E)=>/bottom/.test(s)?I-=f+u.current[E.toastId]:I+=f+u.current[E.toastId],0);S.style.transition=z,S.style.transform=`translate(${L}%, ${N}px)`},toastProps:d,pauseOnActivate:h},d.toastId))},s)})})}
+"use strict";var L=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var rt=Object.getOwnPropertyNames;var ot=Object.prototype.hasOwnProperty;var st=(t,e)=>{for(var n in e)L(t,n,{get:e[n],enumerable:!0})},nt=(t,e,n,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of rt(e))!ot.call(t,r)&&r!==n&&L(t,r,{get:()=>e[r],enumerable:!(p=at(e,r))||p.enumerable});return t};var it=t=>nt(L({},"__esModule",{value:!0}),t);var ut={};st(ut,{ToastContainer:()=>mt,toast:()=>o,toastStore:()=>h,useToasts:()=>V});module.exports=it(ut);var B=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var $=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}setState(e){this.state=typeof e=="function"?e(this.state):e,this.listeners.forEach(n=>n())}getSnapShot(){return this.state}};var l="react-strawberry-toast";var b=require("react/jsx-runtime");function ct(){return(0,b.jsxs)("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[(0,b.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z"}),(0,b.jsx)("path",{d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1dca82"})]})}function dt(){return(0,b.jsx)("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,b.jsx)("path",{d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function lt(){return(0,b.jsx)("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,b.jsx)("path",{d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}var g={success:(0,b.jsx)(ct,{}),error:(0,b.jsx)(dt,{}),loading:(0,b.jsx)("div",{className:`${l}__loading`}),warn:(0,b.jsx)(lt,{})};var X=t=>{let e=a=>{let i=t.toastTimers.get(a);clearTimeout(i),t.toastTimers.delete(a)},n=a=>{t.activatedToasts.add(a)},p=a=>t.activatedToasts.has(a),r=(a,i=200)=>{p(a)&&(t.activatedToasts.delete(a),setTimeout(()=>{t.state=t.state.filter(d=>d.toastId!==a),t.setState([...t.state])},i),e(a))},T=()=>{t.setState([])},m=(a,i,d)=>{t.state=t.state.map(w=>w.toastId===a?{...w,...d,updated:new Date().getTime(),data:i}:w),t.setState([...t.state])},v=a=>{let i=new Date().getTime();t.state=t.state.map(d=>d.toastId===a?{...d,pausedAt:i}:d),e(a)},u=(a,i)=>{let d=setTimeout(()=>{var s;t.state=t.state.map(c=>c.toastId===a?{...c,isVisible:!1}:c),t.setState([...t.state]);let w=(s=t.state.find(c=>c.toastId===a))==null?void 0:s.removeTimeOut;r(a,w)},i>2147483647?2147483647:i);t.toastTimers.set(a,d)};return{setActive:n,isActive:p,disappear:u,resume:a=>{if(t.toastTimers.has(a))return;let i=t.state.find(w=>w.toastId===a);if(!i)return;let d=i.createdAt+(i.timeOut||3e3)-(i.pausedAt||0);u(a,d)},pause:v,replace:m,remove:r,allClear:T}};var h=new $,pt=B(),A=(t="default")=>(e,n={})=>{let{timeOut:p=3e3,removeTimeOut:r=200,pauseOnHover:T=!0,toastId:m,className:v,style:u,target:f}=n,a=m||pt();if(o.isActive(a))throw new Error("A duplicate custom ID is not available.");let i=new Date().getTime(),d={updated:null,pausedAt:null,className:v||null,style:u||{},icon:n.icon||null,containerId:n.containerId||null,position:n.position||null,timeOut:p>2147483647?2147483647:p,toastId:a,data:e,createdAt:i,toastType:t,pauseOnHover:T,removeTimeOut:r,target:f||null,isVisible:!0};return h.state.push(d),h.setState([...h.state]),a},o=(t,e={})=>A()(t,e),E=X(h);o.setActive=E.setActive;o.isActive=E.isActive;o.disappear=E.disappear;o.resume=E.resume;o.pause=E.pause;o.replace=E.replace;o.remove=E.remove;o.allClear=E.allClear;o.success=A("success");o.error=A("error");o.warn=A("warn");o.loading=A("loading");o.custom=A("custom");o.promise=(t,e,n={})=>{let{loading:p,success:r,error:T}=e,m=o.loading(p,{...n,timeOut:2147483647}),v={toastId:m,close:()=>o.disappear(m,0),immediatelyClose:()=>{o.disappear(m,0),o.remove(m,0)},icons:{success:g.success,error:g.error,warn:g.warn,loading:g.loading},isVisible:!0},u=n.timeOut||=3e3;t.then(f=>{o.replace(m,typeof r=="function"?r(f,v):r,{...n,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(f=>{o.replace(m,typeof T=="function"?T(f,v):T,{...n,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};var U=require("react");var P=require("react");var G=require("react");function F({condition:t,children:e}){let n=G.Children.toArray(e);if(n.length>2)throw new Error("The number of children exceeds two.");return n.find(p=>t?p.key===".0":p.key===".1")}function j({children:t}){return t}function q({children:t}){return t}var J=({isVisible:t,position:e})=>e?t?/top/i.test(e)?`${l}__fade-in`:`${l}__fade-in-reverse`:/bottom/i.test(e)?`${l}__fade-out-reverse`:`${l}__fade-out`:t?`${l}__fade-in`:`${l}__fade-out`;var O=require("react"),W=(t,e)=>{let n=(0,O.useRef)(e);(0,O.useEffect)(()=>{n.current=e},[e]),(0,O.useEffect)(()=>(window.addEventListener(t,n.current),()=>{window.removeEventListener(t,n.current)}),[t])};var I=require("react/jsx-runtime"),Y=(0,P.forwardRef)(function({toastProps:e,pauseOnActivate:n},p){let{toastId:r,isVisible:T,timeOut:m,containerId:v,className:u,style:f,icon:a,updated:i,toastType:d,position:w,data:s,pauseOnHover:c}=e,y=J({isVisible:T,position:w}),S=typeof s=="function"?s({toastId:r,close:()=>o.disappear(r,0),immediatelyClose:()=>{o.disappear(r,0),o.remove(r,0)},icons:{success:g.success,error:g.error,warn:g.warn,loading:g.loading},isVisible:T}):s,_=()=>{n&&o.resume(r)},k=()=>{n&&o.pause(r)};W("focus",_),W("blur",k),(0,P.useEffect)(()=>{o.isActive(r)||(o.setActive(r),o.disappear(r,m))},[r]),(0,P.useEffect)(()=>{i!==null&&o.disappear(r,m)},[i]);let R=a||(d==="custom"||d==="default"?null:g[d]);return(0,I.jsx)("div",{role:"alert",ref:p,className:`${l}__toast-content-container`,"data-testid":`container-${v||"default"}`,onMouseEnter:()=>{c&&o.pause(r)},onMouseLeave:()=>{c&&o.resume(r)},children:(0,I.jsxs)(F,{condition:d!=="custom",children:[(0,I.jsx)(j,{children:(0,I.jsxs)("div",{className:u??`${l}__toast-content ${o.isActive(r)?"":y}`,style:f,children:[R&&(0,I.jsx)("span",{className:`${l}__toast-icon`,children:R}),S]})}),(0,I.jsx)(q,{children:S})]})})});var K=require("react");var V=()=>(0,K.useSyncExternalStore)(h.subscribe.bind(h),h.getSnapShot.bind(h),h.getSnapShot.bind(h));var C=require("react/jsx-runtime");function mt({className:t,style:e,limit:n,position:p="top-center",containerId:r="",gap:T=9,reverse:m=!1,pauseOnActivate:v=!0}){let u=V(),f=(0,U.useRef)({}),a=(0,U.useRef)({}),i=s=>{var c;return(c=s.target)==null?void 0:c.element},d=u.filter(i),w=u.filter(s=>!i(s)).reduce((s,c)=>{let y=c.position||p;return c.position=y,s[y]=s[y]||[],s[y].push(c),s},{});return(0,C.jsxs)("div",{id:`${l}__root`,"data-container-id":r,children:[d.filter(s=>r?s.containerId===r:!s.containerId).map(s=>(0,C.jsx)(Y,{ref:c=>{let y=s.target;if(!y||!c){delete a.current[s.toastId];return}let S=a.current[s.toastId]||y.element.getBoundingClientRect();a.current[s.toastId]={y:S.y,x:S.x};let[_,k]=y.offset||[0,0];c.style.top=`${S.y+k+window.scrollY}px`,c.style.left=`${S.x+_+window.scrollX}px`},toastProps:s,pauseOnActivate:v},s.toastId)),Object.entries(w).map(([s,c])=>{let y=c.filter(_=>r?_.containerId===r:!_.containerId).slice(0,n),S=m?y.reverse():y;return(0,C.jsx)("div",{"data-testid":s,className:`${`${l}__z9999`} ${t??`${l}__toast-container ${l}__${s}`}`,style:e,children:S.map((_,k,R)=>(0,C.jsx)(Y,{ref:N=>{if(!N){delete f.current[_.toastId];return}let Q=f.current[_.toastId]||N.getBoundingClientRect().height;f.current[_.toastId]=Q;let Z=/left/.test(s)?50:/center/.test(s)?0:-50,tt=/bottom/.test(s)?0:1,et=R.filter((H,M)=>M<=k-tt).reduce((H,M)=>/bottom/.test(s)?H-=T+f.current[M.toastId]:H+=T+f.current[M.toastId],0);N.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",N.style.transform=`translate(${Z}%, ${et}px)`},toastProps:_,pauseOnActivate:v},_.toastId))},s)})]})}

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-var W=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var P=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(s){return this.listeners.add(s),()=>{this.listeners.delete(s)}}setState(s){this.state=typeof s=="function"?s(this.state):s,this.listeners.forEach(n=>n())}getSnapShot(){return this.state}};var d="react-strawberry-toast";import{jsx as h,jsxs as tt}from"react/jsx-runtime";function K(){return tt("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[h("path",{stroke:"none",d:"M0 0h24v24H0z"}),h("path",{d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1ab173"})]})}function Q(){return h("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:h("path",{d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function Z(){return h("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:h("path",{d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}var y={success:h(K,{}),error:h(Q,{}),loading:h("div",{className:`${d}__loading`}),warn:h(Z,{})};var Y=t=>{let s=e=>{let r=t.toastTimers.get(e);clearTimeout(r),t.toastTimers.delete(e)},n=e=>{t.activatedToasts.add(e)},m=e=>t.activatedToasts.has(e),o=(e,r=200)=>{m(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(i=>i.toastId!==e),t.setState([...t.state])},r),s(e))},f=()=>{t.setState([])},p=(e,r,i)=>{t.state=t.state.map(c=>c.toastId===e?{...c,...i,updated:new Date().getTime(),data:r}:c),t.setState([...t.state])},_=e=>{let r=new Date().getTime();t.state=t.state.map(i=>i.toastId===e?{...i,pausedAt:r}:i),s(e)},T=(e,r)=>{let i=setTimeout(()=>{var w;t.state=t.state.map(l=>l.toastId===e?{...l,isVisible:!1}:l),t.setState([...t.state]);let c=(w=t.state.find(l=>l.toastId===e))==null?void 0:w.removeTimeOut;o(e,c)},r>2147483647?2147483647:r);t.toastTimers.set(e,i)};return{setActive:n,isActive:m,disappear:T,resume:e=>{if(t.toastTimers.has(e))return;let r=t.state.find(c=>c.toastId===e);if(!r)return;let i=r.createdAt+(r.timeOut||3e3)-(r.pausedAt||0);T(e,i)},pause:_,replace:p,remove:o,allClear:f}};var b=new P,et=W(),E=(t="default")=>(s,n={})=>{let{timeOut:m=3e3,removeTimeOut:o=200,pauseOnHover:f=!0,toastId:p,className:_,style:T,align:u}=n,e=p||et();if(a.isActive(e))throw new Error("A duplicate custom ID is not available.");let r=new Date().getTime(),i={updated:null,pausedAt:null,className:_||"",style:T||{},icon:n.icon||null,containerId:n.containerId||null,position:n.position||null,timeOut:m>2147483647?2147483647:m,align:u||"",toastId:e,data:s,createdAt:r,toastType:t,pauseOnHover:f,removeTimeOut:o,isVisible:!0};return b.state.push(i),b.setState([...b.state]),e},a=(t,s={})=>E()(t,s),g=Y(b);a.setActive=g.setActive;a.isActive=g.isActive;a.disappear=g.disappear;a.resume=g.resume;a.pause=g.pause;a.replace=g.replace;a.remove=g.remove;a.allClear=g.allClear;a.success=E("success");a.error=E("error");a.warn=E("warn");a.loading=E("loading");a.custom=E("custom");a.promise=(t,s,n={})=>{let{loading:m,success:o,error:f}=s,p=a.loading(m,{...n,timeOut:2147483647}),_={toastId:p,close:()=>a.disappear(p,0),immediatelyClose:()=>{a.disappear(p,0),a.remove(p,0)},icons:{success:y.success,error:y.error,warn:y.warn,loading:y.loading},isVisible:!0},T=n.timeOut||=3e3;t.then(u=>{a.replace(p,typeof o=="function"?o(u,_):o,{...n,timeOut:T>2147483647?2147483647:T,toastType:"success"})}).catch(u=>{a.replace(p,typeof f=="function"?f(u,_):f,{...n,timeOut:T>2147483647?2147483647:T,toastType:"error"})})};import{useRef as nt}from"react";import{useEffect as j,forwardRef as st}from"react";import{Children as at}from"react";function V({condition:t,children:s}){let n=at.toArray(s);if(n.length>2)throw new Error("The number of children exceeds two.");return n.find(m=>t?m.key===".0":m.key===".1")}function U({children:t}){return t}function B({children:t}){return t}var X=({isVisible:t,position:s})=>t?/top/i.test(s)?`${d}__fade-in`:`${d}__fade-in-reverse`:/bottom/i.test(s)?`${d}__fade-out-reverse`:`${d}__fade-out`;import{useEffect as G,useRef as rt}from"react";var L=(t,s)=>{let n=rt(s);G(()=>{n.current=s},[s]),G(()=>(window.addEventListener(t,n.current),()=>{window.removeEventListener(t,n.current)}),[t])};import{jsx as I,jsxs as q}from"react/jsx-runtime";var F=st(function({toastProps:s,pauseOnActivate:n},m){let{toastId:o,isVisible:f,timeOut:p,containerId:_,className:T,style:u,icon:e,updated:r,toastType:i,position:c,data:w,pauseOnHover:l,align:C}=s,O=X({isVisible:f,position:c}),x=typeof w=="function"?w({toastId:o,close:()=>a.disappear(o,0),immediatelyClose:()=>{a.disappear(o,0),a.remove(o,0)},icons:{success:y.success,error:y.error,warn:y.warn,loading:y.loading},isVisible:f}):w,M=()=>{l&&a.pause(o)},R=()=>{l&&a.resume(o)},$=()=>{n&&a.resume(o)},z=()=>{n&&a.pause(o)};L("focus",$),L("blur",z),j(()=>{a.isActive(o)||(a.setActive(o),a.disappear(o,p))},[o]),j(()=>{r!==null&&a.disappear(o,p)},[r]);let k=e||(i==="custom"||i==="default"?null:y[i]),A=/center/i.test(c)?"-center":/left/i.test(c)?"-left":"-right",S=`${d}__toast${C?`-${C}`:A}`;return I("div",{role:"alert",ref:m,className:`${d}__toast-content-container`,"data-testid":`container-${_||"default"}`,onMouseEnter:M,onMouseLeave:R,children:I("div",{className:`${S} ${a.isActive(o)?"":O}`,children:q(V,{condition:i!=="custom",children:[I(U,{children:q("div",{className:T||`${d}__toast-content`,style:u,children:[k&&I("span",{className:`${d}__toast-icon`,children:k}),x]})}),I(B,{children:x})]})})})});import{useSyncExternalStore as ot}from"react";var J=()=>ot(b.subscribe.bind(b),b.getSnapShot.bind(b),b.getSnapShot.bind(b));import{jsx as D}from"react/jsx-runtime";function jt({className:t,style:s,limit:n,position:m="top-center",containerId:o="",gap:f=9,reverse:p=!1,pauseOnActivate:_=!0}){let T=J(),u=nt({}),e=T.reduce((r,i)=>{let c=i.position||m;return i.position=c,r[c]=r[c]||[],r[c].push(i),r},{});return D("div",{id:`${d}__root`,children:Object.entries(e).map(([r,i])=>{let c=i.filter(l=>o?l.containerId===o:!l.containerId).slice(0,n),w=p?c.reverse():c;return D("div",{"data-testid":r,className:`${`${d}__z9999`} ${t||`${d}__toast-container ${d}__${r}`}`,style:s,children:w.map((l,C,O)=>D(F,{ref:x=>{if(!x){delete u.current[l.toastId];return}let M="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",R=u.current[l.toastId]||x.getBoundingClientRect().height;u.current[l.toastId]=R;let $=/left/.test(r)?50:/center/.test(r)?0:-50,z=/bottom/.test(r)?0:1,k=O.filter((A,S)=>S<=C-z).reduce((A,S)=>/bottom/.test(r)?A-=f+u.current[S.toastId]:A+=f+u.current[S.toastId],0);x.style.transition=M,x.style.transform=`translate(${$}%, ${k}px)`},toastProps:l,pauseOnActivate:_},l.toastId))},r)})})}export{jt as ToastContainer,a as toast,b as toastStore,J as useToasts};
+var D=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var P=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(o){return this.listeners.add(o),()=>{this.listeners.delete(o)}}setState(o){this.state=typeof o=="function"?o(this.state):o,this.listeners.forEach(n=>n())}getSnapShot(){return this.state}};var l="react-strawberry-toast";import{jsx as g,jsxs as rt}from"react/jsx-runtime";function tt(){return rt("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[g("path",{stroke:"none",d:"M0 0h24v24H0z"}),g("path",{d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1dca82"})]})}function et(){return g("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:g("path",{d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function at(){return g("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:g("path",{d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}var v={success:g(tt,{}),error:g(et,{}),loading:g("div",{className:`${l}__loading`}),warn:g(at,{})};var W=t=>{let o=e=>{let i=t.toastTimers.get(e);clearTimeout(i),t.toastTimers.delete(e)},n=e=>{t.activatedToasts.add(e)},m=e=>t.activatedToasts.has(e),s=(e,i=200)=>{m(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(d=>d.toastId!==e),t.setState([...t.state])},i),o(e))},T=()=>{t.setState([])},p=(e,i,d)=>{t.state=t.state.map(h=>h.toastId===e?{...h,...d,updated:new Date().getTime(),data:i}:h),t.setState([...t.state])},_=e=>{let i=new Date().getTime();t.state=t.state.map(d=>d.toastId===e?{...d,pausedAt:i}:d),o(e)},u=(e,i)=>{let d=setTimeout(()=>{var r;t.state=t.state.map(c=>c.toastId===e?{...c,isVisible:!1}:c),t.setState([...t.state]);let h=(r=t.state.find(c=>c.toastId===e))==null?void 0:r.removeTimeOut;s(e,h)},i>2147483647?2147483647:i);t.toastTimers.set(e,d)};return{setActive:n,isActive:m,disappear:u,resume:e=>{if(t.toastTimers.has(e))return;let i=t.state.find(h=>h.toastId===e);if(!i)return;let d=i.createdAt+(i.timeOut||3e3)-(i.pausedAt||0);u(e,d)},pause:_,replace:p,remove:s,allClear:T}};var w=new P,ot=D(),I=(t="default")=>(o,n={})=>{let{timeOut:m=3e3,removeTimeOut:s=200,pauseOnHover:T=!0,toastId:p,className:_,style:u,target:f}=n,e=p||ot();if(a.isActive(e))throw new Error("A duplicate custom ID is not available.");let i=new Date().getTime(),d={updated:null,pausedAt:null,className:_||null,style:u||{},icon:n.icon||null,containerId:n.containerId||null,position:n.position||null,timeOut:m>2147483647?2147483647:m,toastId:e,data:o,createdAt:i,toastType:t,pauseOnHover:T,removeTimeOut:s,target:f||null,isVisible:!0};return w.state.push(d),w.setState([...w.state]),e},a=(t,o={})=>I()(t,o),E=W(w);a.setActive=E.setActive;a.isActive=E.isActive;a.disappear=E.disappear;a.resume=E.resume;a.pause=E.pause;a.replace=E.replace;a.remove=E.remove;a.allClear=E.allClear;a.success=I("success");a.error=I("error");a.warn=I("warn");a.loading=I("loading");a.custom=I("custom");a.promise=(t,o,n={})=>{let{loading:m,success:s,error:T}=o,p=a.loading(m,{...n,timeOut:2147483647}),_={toastId:p,close:()=>a.disappear(p,0),immediatelyClose:()=>{a.disappear(p,0),a.remove(p,0)},icons:{success:v.success,error:v.error,warn:v.warn,loading:v.loading},isVisible:!0},u=n.timeOut||=3e3;t.then(f=>{a.replace(p,typeof s=="function"?s(f,_):s,{...n,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(f=>{a.replace(p,typeof T=="function"?T(f,_):T,{...n,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};import{useRef as q}from"react";import{useEffect as G,forwardRef as it}from"react";import{Children as st}from"react";function Y({condition:t,children:o}){let n=st.toArray(o);if(n.length>2)throw new Error("The number of children exceeds two.");return n.find(m=>t?m.key===".0":m.key===".1")}function V({children:t}){return t}function U({children:t}){return t}var B=({isVisible:t,position:o})=>o?t?/top/i.test(o)?`${l}__fade-in`:`${l}__fade-in-reverse`:/bottom/i.test(o)?`${l}__fade-out-reverse`:`${l}__fade-out`:t?`${l}__fade-in`:`${l}__fade-out`;import{useEffect as X,useRef as nt}from"react";var z=(t,o)=>{let n=nt(o);X(()=>{n.current=o},[o]),X(()=>(window.addEventListener(t,n.current),()=>{window.removeEventListener(t,n.current)}),[t])};import{jsx as N,jsxs as F}from"react/jsx-runtime";var H=it(function({toastProps:o,pauseOnActivate:n},m){let{toastId:s,isVisible:T,timeOut:p,containerId:_,className:u,style:f,icon:e,updated:i,toastType:d,position:h,data:r,pauseOnHover:c}=o,y=B({isVisible:T,position:h}),S=typeof r=="function"?r({toastId:s,close:()=>a.disappear(s,0),immediatelyClose:()=>{a.disappear(s,0),a.remove(s,0)},icons:{success:v.success,error:v.error,warn:v.warn,loading:v.loading},isVisible:T}):r,b=()=>{n&&a.resume(s)},A=()=>{n&&a.pause(s)};z("focus",b),z("blur",A),G(()=>{a.isActive(s)||(a.setActive(s),a.disappear(s,p))},[s]),G(()=>{i!==null&&a.disappear(s,p)},[i]);let C=e||(d==="custom"||d==="default"?null:v[d]);return N("div",{role:"alert",ref:m,className:`${l}__toast-content-container`,"data-testid":`container-${_||"default"}`,onMouseEnter:()=>{c&&a.pause(s)},onMouseLeave:()=>{c&&a.resume(s)},children:F(Y,{condition:d!=="custom",children:[N(V,{children:F("div",{className:u??`${l}__toast-content ${a.isActive(s)?"":y}`,style:f,children:[C&&N("span",{className:`${l}__toast-icon`,children:C}),S]})}),N(U,{children:S})]})})});import{useSyncExternalStore as ct}from"react";var j=()=>ct(w.subscribe.bind(w),w.getSnapShot.bind(w),w.getSnapShot.bind(w));import{jsx as L,jsxs as dt}from"react/jsx-runtime";function Jt({className:t,style:o,limit:n,position:m="top-center",containerId:s="",gap:T=9,reverse:p=!1,pauseOnActivate:_=!0}){let u=j(),f=q({}),e=q({}),i=r=>{var c;return(c=r.target)==null?void 0:c.element},d=u.filter(i),h=u.filter(r=>!i(r)).reduce((r,c)=>{let y=c.position||m;return c.position=y,r[y]=r[y]||[],r[y].push(c),r},{});return dt("div",{id:`${l}__root`,"data-container-id":s,children:[d.filter(r=>s?r.containerId===s:!r.containerId).map(r=>L(H,{ref:c=>{let y=r.target;if(!y||!c){delete e.current[r.toastId];return}let S=e.current[r.toastId]||y.element.getBoundingClientRect();e.current[r.toastId]={y:S.y,x:S.x};let[b,A]=y.offset||[0,0];c.style.top=`${S.y+A+window.scrollY}px`,c.style.left=`${S.x+b+window.scrollX}px`},toastProps:r,pauseOnActivate:_},r.toastId)),Object.entries(h).map(([r,c])=>{let y=c.filter(b=>s?b.containerId===s:!b.containerId).slice(0,n),S=p?y.reverse():y;return L("div",{"data-testid":r,className:`${`${l}__z9999`} ${t??`${l}__toast-container ${l}__${r}`}`,style:o,children:S.map((b,A,C)=>L(H,{ref:k=>{if(!k){delete f.current[b.toastId];return}let J=f.current[b.toastId]||k.getBoundingClientRect().height;f.current[b.toastId]=J;let K=/left/.test(r)?50:/center/.test(r)?0:-50,Q=/bottom/.test(r)?0:1,Z=C.filter((M,O)=>O<=A-Q).reduce((M,O)=>/bottom/.test(r)?M-=T+f.current[O.toastId]:M+=T+f.current[O.toastId],0);k.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",k.style.transform=`translate(${K}%, ${Z}px)`},toastProps:b,pauseOnActivate:_},b.toastId))},r)})]})}export{Jt as ToastContainer,a as toast,w as toastStore,j as useToasts};

package/dist/style.css

@@ -1 +1 @@
-@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.6);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.6);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:16px}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:16px}.react-strawberry-toast__bottom-left{bottom:16px;left:16px}.react-strawberry-toast__bottom-center{bottom:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:16px;right:16px}.react-strawberry-toast__toast-left{display:flex}.react-strawberry-toast__toast-center{display:flex;justify-content:center}.react-strawberry-toast__toast-right{display:flex;justify-content:flex-end}.react-strawberry-toast__toast-content-container{position:absolute;min-width:246px;pointer-events:none}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;background-color:#fff;padding:10px;display:flex;align-items:center;gap:5px;border-radius:8px;box-shadow:2px 4px 10px #0000001a;min-height:47px;max-width:368px}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}
+@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:calc(-50% + 16px)}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:calc(-50% + 16px)}.react-strawberry-toast__bottom-left{bottom:8px;left:calc(-50% + 16px)}.react-strawberry-toast__bottom-center{bottom:8px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:8px;right:calc(-50% + 16px)}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;background-color:#fff;padding:10px;display:flex;align-items:center;gap:5px;border-radius:8px;box-shadow:2px 4px 10px #0000001a;min-height:47px;max-width:368px}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-strawberry-toast",
   "description": "A simple and customizable React toast library",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "author": "dkpark10",
   "license": "MIT",
   "keywords": [