@samline/notify 1.0.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/{LICENSE → LICENSE.md} +2 -2
  2. package/README.md +27 -163
  3. package/dist/_runtime.d.mts +87 -0
  4. package/dist/_runtime.d.ts +87 -0
  5. package/dist/_runtime.js +97 -0
  6. package/dist/_runtime.mjs +83 -0
  7. package/dist/browser/assets-client-B-VVPPYQ.js +114 -0
  8. package/dist/browser/assets-client-CUzxHubR.mjs +108 -0
  9. package/dist/browser/index-client-BBOQyMFk.mjs +173 -0
  10. package/dist/browser/index-client-Czb7hTpD.js +181 -0
  11. package/dist/browser/index.d.mts +134 -0
  12. package/dist/browser/index.d.ts +134 -0
  13. package/dist/browser/index.js +34 -0
  14. package/dist/browser/index.mjs +26 -0
  15. package/dist/browser/render-client-CjcQoukB.js +981 -0
  16. package/dist/browser/render-client-bGRSTd-L.mjs +974 -0
  17. package/dist/core/index.d.mts +68 -0
  18. package/dist/core/index.d.ts +68 -0
  19. package/dist/core/index.js +1 -0
  20. package/dist/core/index.mjs +1 -0
  21. package/dist/index.d.mts +131 -0
  22. package/dist/index.d.ts +131 -0
  23. package/dist/index.js +1240 -0
  24. package/dist/index.mjs +1228 -0
  25. package/dist/react/index.d.mts +158 -0
  26. package/dist/react/index.d.ts +158 -0
  27. package/dist/react/index.js +1116 -0
  28. package/dist/react/index.mjs +1107 -0
  29. package/dist/styles.css +589 -422
  30. package/dist/svelte/assets-client-B-VVPPYQ.js +114 -0
  31. package/dist/svelte/assets-client-CUzxHubR.mjs +108 -0
  32. package/dist/svelte/index-client-DbXbWMIe.js +177 -0
  33. package/dist/svelte/index-client-Dj_WfPK9.mjs +170 -0
  34. package/dist/svelte/index.d.mts +14 -0
  35. package/dist/svelte/index.d.ts +14 -0
  36. package/dist/svelte/index.js +43 -0
  37. package/dist/svelte/index.mjs +36 -0
  38. package/dist/svelte/render-client-CjcQoukB.js +981 -0
  39. package/dist/svelte/render-client-bGRSTd-L.mjs +974 -0
  40. package/dist/vue/assets-client-B-VVPPYQ.js +114 -0
  41. package/dist/vue/assets-client-CUzxHubR.mjs +108 -0
  42. package/dist/vue/index-client-DbXbWMIe.js +177 -0
  43. package/dist/vue/index-client-Dj_WfPK9.mjs +170 -0
  44. package/dist/vue/index.d.mts +50 -0
  45. package/dist/vue/index.d.ts +50 -0
  46. package/dist/vue/index.js +110 -0
  47. package/dist/vue/index.mjs +104 -0
  48. package/dist/vue/render-client-CjcQoukB.js +981 -0
  49. package/dist/vue/render-client-bGRSTd-L.mjs +974 -0
  50. package/package.json +140 -95
  51. package/dist/browser-notify.js +0 -68
  52. package/dist/cc-2Yt7NqMX.mjs +0 -21
  53. package/dist/cc-B6peeNak.mjs +0 -33
  54. package/dist/cc-BWuAzFJ6.js +0 -12
  55. package/dist/cc-CaBHsjUt.js +0 -34
  56. package/dist/cc-DGff5sSY.js +0 -21
  57. package/dist/cc-he3fHS3P.mjs +0 -12
  58. package/dist/notify.d.mts +0 -48
  59. package/dist/notify.d.mts.map +0 -1
  60. package/dist/notify.d.ts +0 -48
  61. package/dist/notify.d.ts.map +0 -1
  62. package/dist/notify.js +0 -206
  63. package/dist/notify.mjs +0 -202
  64. package/dist/react-notify-12s--2JK5UjB.mjs +0 -1244
  65. package/dist/react-notify-12s-Kv2M6zlv.js +0 -1247
  66. package/dist/react.d.mts +0 -70
  67. package/dist/react.d.mts.map +0 -1
  68. package/dist/react.d.ts +0 -70
  69. package/dist/react.d.ts.map +0 -1
  70. package/dist/react.js +0 -19
  71. package/dist/react.mjs +0 -10
  72. package/dist/render-notify-toasts.js +0 -213
  73. package/dist/svelte.d.mts +0 -49
  74. package/dist/svelte.d.mts.map +0 -1
  75. package/dist/svelte.d.ts +0 -49
  76. package/dist/svelte.d.ts.map +0 -1
  77. package/dist/svelte.js +0 -284
  78. package/dist/svelte.mjs +0 -280
  79. package/dist/vue.d.mts +0 -107
  80. package/dist/vue.d.mts.map +0 -1
  81. package/dist/vue.d.ts +0 -107
  82. package/dist/vue.d.ts.map +0 -1
  83. package/dist/vue.js +0 -2215
  84. package/dist/vue.mjs +0 -2211
package/dist/index.mjs ADDED
@@ -0,0 +1,1228 @@
1
+ 'use client';
2
+ function __insertCSS(code) {
3
+ if (!code || typeof document == 'undefined') return
4
+ let head = document.head || document.getElementsByTagName('head')[0]
5
+ let style = document.createElement('style')
6
+ style.type = 'text/css'
7
+ head.appendChild(style)
8
+ ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
9
+ }
10
+
11
+ import React from 'react';
12
+ import { createRoot } from 'react-dom/client';
13
+ import ReactDOM from 'react-dom';
14
+
15
+ // Visible toasts amount
16
+ const VISIBLE_TOASTS_AMOUNT = 3;
17
+ // Viewport padding
18
+ const VIEWPORT_OFFSET = '24px';
19
+ // Mobile viewport padding
20
+ const MOBILE_VIEWPORT_OFFSET = '16px';
21
+ // Default lifetime of a toasts (in ms)
22
+ const TOAST_LIFETIME = 4000;
23
+ // Default toast width
24
+ const TOAST_WIDTH = 356;
25
+ // Default gap between toasts
26
+ const GAP = 14;
27
+ // Threshold to dismiss a toast
28
+ const SWIPE_THRESHOLD = 45;
29
+ // Equal to exit animation duration
30
+ const TIME_BEFORE_UNMOUNT = 200;
31
+ function cn(...classes) {
32
+ return classes.filter(Boolean).join(' ');
33
+ }
34
+ function canUseDOM() {
35
+ return typeof window !== 'undefined' && typeof document !== 'undefined';
36
+ }
37
+ function getDefaultSwipeDirections(position) {
38
+ const [y, x] = position.split('-');
39
+ const directions = [];
40
+ if (y) {
41
+ directions.push(y);
42
+ }
43
+ if (x) {
44
+ directions.push(x);
45
+ }
46
+ return directions;
47
+ }
48
+ function getDocumentDirection() {
49
+ if (!canUseDOM()) return 'ltr';
50
+ const dirAttribute = document.documentElement.getAttribute('dir');
51
+ if (dirAttribute === 'auto' || !dirAttribute) {
52
+ return window.getComputedStyle(document.documentElement).direction;
53
+ }
54
+ return dirAttribute;
55
+ }
56
+ function assignOffset(defaultOffset, mobileOffset) {
57
+ const styles = {};
58
+ [
59
+ defaultOffset,
60
+ mobileOffset
61
+ ].forEach((offset, index)=>{
62
+ const isMobile = index === 1;
63
+ const prefix = isMobile ? '--mobile-offset' : '--offset';
64
+ const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
65
+ function assignAll(value) {
66
+ [
67
+ 'top',
68
+ 'right',
69
+ 'bottom',
70
+ 'left'
71
+ ].forEach((key)=>{
72
+ styles[`${prefix}-${key}`] = typeof value === 'number' ? `${value}px` : value;
73
+ });
74
+ }
75
+ if (typeof offset === 'number' || typeof offset === 'string') {
76
+ assignAll(offset);
77
+ } else if (typeof offset === 'object') {
78
+ [
79
+ 'top',
80
+ 'right',
81
+ 'bottom',
82
+ 'left'
83
+ ].forEach((key)=>{
84
+ if (offset[key] === undefined) {
85
+ styles[`${prefix}-${key}`] = defaultValue;
86
+ } else {
87
+ styles[`${prefix}-${key}`] = typeof offset[key] === 'number' ? `${offset[key]}px` : offset[key];
88
+ }
89
+ });
90
+ } else {
91
+ assignAll(defaultValue);
92
+ }
93
+ });
94
+ return styles;
95
+ }
96
+
97
+ let toastsCounter = 1;
98
+ class Observer {
99
+ constructor(){
100
+ // We use arrow functions to maintain the correct `this` reference
101
+ this.subscribe = (subscriber)=>{
102
+ this.subscribers.push(subscriber);
103
+ return ()=>{
104
+ const index = this.subscribers.indexOf(subscriber);
105
+ this.subscribers.splice(index, 1);
106
+ };
107
+ };
108
+ this.publish = (data)=>{
109
+ this.subscribers.forEach((subscriber)=>subscriber(data));
110
+ };
111
+ this.addToast = (data)=>{
112
+ this.publish(data);
113
+ this.toasts = [
114
+ ...this.toasts,
115
+ data
116
+ ];
117
+ };
118
+ this.create = (data)=>{
119
+ const { message, ...rest } = data;
120
+ const id = typeof data?.id === 'number' || data.id?.length > 0 ? data.id : toastsCounter++;
121
+ const alreadyExists = this.toasts.find((toast)=>{
122
+ return toast.id === id;
123
+ });
124
+ const dismissible = data.dismissible === undefined ? true : data.dismissible;
125
+ if (this.dismissedToasts.has(id)) {
126
+ this.dismissedToasts.delete(id);
127
+ }
128
+ if (alreadyExists) {
129
+ this.toasts = this.toasts.map((toast)=>{
130
+ if (toast.id === id) {
131
+ this.publish({
132
+ ...toast,
133
+ ...data,
134
+ id,
135
+ title: message
136
+ });
137
+ return {
138
+ ...toast,
139
+ ...data,
140
+ id,
141
+ dismissible,
142
+ title: message
143
+ };
144
+ }
145
+ return toast;
146
+ });
147
+ } else {
148
+ this.addToast({
149
+ title: message,
150
+ ...rest,
151
+ dismissible,
152
+ id
153
+ });
154
+ }
155
+ return id;
156
+ };
157
+ this.dismiss = (id)=>{
158
+ if (id) {
159
+ this.dismissedToasts.add(id);
160
+ requestAnimationFrame(()=>this.subscribers.forEach((subscriber)=>subscriber({
161
+ id,
162
+ dismiss: true
163
+ })));
164
+ } else {
165
+ this.toasts.forEach((toast)=>{
166
+ this.subscribers.forEach((subscriber)=>subscriber({
167
+ id: toast.id,
168
+ dismiss: true
169
+ }));
170
+ });
171
+ }
172
+ return id;
173
+ };
174
+ this.message = (message, data)=>{
175
+ return this.create({
176
+ ...data,
177
+ message
178
+ });
179
+ };
180
+ this.error = (message, data)=>{
181
+ return this.create({
182
+ ...data,
183
+ message,
184
+ type: 'error'
185
+ });
186
+ };
187
+ this.success = (message, data)=>{
188
+ return this.create({
189
+ ...data,
190
+ type: 'success',
191
+ message
192
+ });
193
+ };
194
+ this.info = (message, data)=>{
195
+ return this.create({
196
+ ...data,
197
+ type: 'info',
198
+ message
199
+ });
200
+ };
201
+ this.warning = (message, data)=>{
202
+ return this.create({
203
+ ...data,
204
+ type: 'warning',
205
+ message
206
+ });
207
+ };
208
+ this.loading = (message, data)=>{
209
+ return this.create({
210
+ ...data,
211
+ type: 'loading',
212
+ message
213
+ });
214
+ };
215
+ this.promise = (promise, data)=>{
216
+ if (!data) {
217
+ // Nothing to show
218
+ return;
219
+ }
220
+ let id = undefined;
221
+ if (data.loading !== undefined) {
222
+ id = this.create({
223
+ ...data,
224
+ promise,
225
+ type: 'loading',
226
+ message: data.loading,
227
+ description: typeof data.description !== 'function' ? data.description : undefined
228
+ });
229
+ }
230
+ const p = Promise.resolve(promise instanceof Function ? promise() : promise);
231
+ let shouldDismiss = id !== undefined;
232
+ let result;
233
+ const originalPromise = p.then(async (response)=>{
234
+ result = [
235
+ 'resolve',
236
+ response
237
+ ];
238
+ const isReactElementResponse = React.isValidElement(response);
239
+ if (isReactElementResponse) {
240
+ shouldDismiss = false;
241
+ this.create({
242
+ id,
243
+ type: 'default',
244
+ message: response
245
+ });
246
+ } else if (isHttpResponse(response) && !response.ok) {
247
+ shouldDismiss = false;
248
+ const promiseData = typeof data.error === 'function' ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
249
+ const description = typeof data.description === 'function' ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
250
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
251
+ const toastSettings = isExtendedResult ? promiseData : {
252
+ message: promiseData
253
+ };
254
+ this.create({
255
+ id,
256
+ type: 'error',
257
+ description,
258
+ ...toastSettings
259
+ });
260
+ } else if (response instanceof Error) {
261
+ shouldDismiss = false;
262
+ const promiseData = typeof data.error === 'function' ? await data.error(response) : data.error;
263
+ const description = typeof data.description === 'function' ? await data.description(response) : data.description;
264
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
265
+ const toastSettings = isExtendedResult ? promiseData : {
266
+ message: promiseData
267
+ };
268
+ this.create({
269
+ id,
270
+ type: 'error',
271
+ description,
272
+ ...toastSettings
273
+ });
274
+ } else if (data.success !== undefined) {
275
+ shouldDismiss = false;
276
+ const promiseData = typeof data.success === 'function' ? await data.success(response) : data.success;
277
+ const description = typeof data.description === 'function' ? await data.description(response) : data.description;
278
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
279
+ const toastSettings = isExtendedResult ? promiseData : {
280
+ message: promiseData
281
+ };
282
+ this.create({
283
+ id,
284
+ type: 'success',
285
+ description,
286
+ ...toastSettings
287
+ });
288
+ }
289
+ }).catch(async (error)=>{
290
+ result = [
291
+ 'reject',
292
+ error
293
+ ];
294
+ if (data.error !== undefined) {
295
+ shouldDismiss = false;
296
+ const promiseData = typeof data.error === 'function' ? await data.error(error) : data.error;
297
+ const description = typeof data.description === 'function' ? await data.description(error) : data.description;
298
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
299
+ const toastSettings = isExtendedResult ? promiseData : {
300
+ message: promiseData
301
+ };
302
+ this.create({
303
+ id,
304
+ type: 'error',
305
+ description,
306
+ ...toastSettings
307
+ });
308
+ }
309
+ }).finally(()=>{
310
+ if (shouldDismiss) {
311
+ // Toast is still in load state (and will be indefinitely — dismiss it)
312
+ this.dismiss(id);
313
+ id = undefined;
314
+ }
315
+ data.finally?.();
316
+ });
317
+ const unwrap = ()=>new Promise((resolve, reject)=>originalPromise.then(()=>result[0] === 'reject' ? reject(result[1]) : resolve(result[1])).catch(reject));
318
+ if (typeof id !== 'string' && typeof id !== 'number') {
319
+ // cannot Object.assign on undefined
320
+ return {
321
+ unwrap
322
+ };
323
+ } else {
324
+ return Object.assign(id, {
325
+ unwrap
326
+ });
327
+ }
328
+ };
329
+ this.custom = (jsx, data)=>{
330
+ const id = data?.id || toastsCounter++;
331
+ this.create({
332
+ jsx: jsx(id),
333
+ ...data,
334
+ id
335
+ });
336
+ return id;
337
+ };
338
+ this.getActiveToasts = ()=>{
339
+ return this.toasts.filter((toast)=>!this.dismissedToasts.has(toast.id));
340
+ };
341
+ this.subscribers = [];
342
+ this.toasts = [];
343
+ this.dismissedToasts = new Set();
344
+ }
345
+ }
346
+ const ToastState = new Observer();
347
+ // bind this to the toast function
348
+ const toastFunction = (message, data)=>{
349
+ return ToastState.create({
350
+ ...data,
351
+ message
352
+ });
353
+ };
354
+ const isHttpResponse = (data)=>{
355
+ return data && typeof data === 'object' && 'ok' in data && typeof data.ok === 'boolean' && 'status' in data && typeof data.status === 'number';
356
+ };
357
+ const basicToast = toastFunction;
358
+ const getHistory = ()=>ToastState.toasts;
359
+ const getToasts = ()=>ToastState.getActiveToasts();
360
+ // We use `Object.assign` to maintain the correct types as we would lose them otherwise
361
+ const toast$1 = Object.assign(basicToast, {
362
+ success: ToastState.success,
363
+ info: ToastState.info,
364
+ warning: ToastState.warning,
365
+ error: ToastState.error,
366
+ custom: ToastState.custom,
367
+ message: ToastState.message,
368
+ promise: ToastState.promise,
369
+ dismiss: ToastState.dismiss,
370
+ loading: ToastState.loading
371
+ }, {
372
+ getHistory,
373
+ getToasts
374
+ });
375
+
376
+ const getAsset = (type)=>{
377
+ switch(type){
378
+ case 'success':
379
+ return SuccessIcon;
380
+ case 'info':
381
+ return InfoIcon;
382
+ case 'warning':
383
+ return WarningIcon;
384
+ case 'error':
385
+ return ErrorIcon;
386
+ default:
387
+ return null;
388
+ }
389
+ };
390
+ const bars = Array(12).fill(0);
391
+ const Loader = ({ visible, className })=>{
392
+ return /*#__PURE__*/ React.createElement("div", {
393
+ className: [
394
+ 'notify-loading-wrapper',
395
+ className
396
+ ].filter(Boolean).join(' '),
397
+ "data-visible": visible
398
+ }, /*#__PURE__*/ React.createElement("div", {
399
+ className: "notify-spinner"
400
+ }, bars.map((_, i)=>/*#__PURE__*/ React.createElement("div", {
401
+ className: "notify-loading-bar",
402
+ key: `spinner-bar-${i}`
403
+ }))));
404
+ };
405
+ const SuccessIcon = /*#__PURE__*/ React.createElement("svg", {
406
+ xmlns: "http://www.w3.org/2000/svg",
407
+ viewBox: "0 0 20 20",
408
+ fill: "currentColor",
409
+ height: "20",
410
+ width: "20"
411
+ }, /*#__PURE__*/ React.createElement("path", {
412
+ fillRule: "evenodd",
413
+ 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",
414
+ clipRule: "evenodd"
415
+ }));
416
+ const WarningIcon = /*#__PURE__*/ React.createElement("svg", {
417
+ xmlns: "http://www.w3.org/2000/svg",
418
+ viewBox: "0 0 24 24",
419
+ fill: "currentColor",
420
+ height: "20",
421
+ width: "20"
422
+ }, /*#__PURE__*/ React.createElement("path", {
423
+ fillRule: "evenodd",
424
+ 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",
425
+ clipRule: "evenodd"
426
+ }));
427
+ const InfoIcon = /*#__PURE__*/ React.createElement("svg", {
428
+ xmlns: "http://www.w3.org/2000/svg",
429
+ viewBox: "0 0 20 20",
430
+ fill: "currentColor",
431
+ height: "20",
432
+ width: "20"
433
+ }, /*#__PURE__*/ React.createElement("path", {
434
+ fillRule: "evenodd",
435
+ 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",
436
+ clipRule: "evenodd"
437
+ }));
438
+ const ErrorIcon = /*#__PURE__*/ React.createElement("svg", {
439
+ xmlns: "http://www.w3.org/2000/svg",
440
+ viewBox: "0 0 20 20",
441
+ fill: "currentColor",
442
+ height: "20",
443
+ width: "20"
444
+ }, /*#__PURE__*/ React.createElement("path", {
445
+ fillRule: "evenodd",
446
+ 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",
447
+ clipRule: "evenodd"
448
+ }));
449
+ const CloseIcon = /*#__PURE__*/ React.createElement("svg", {
450
+ xmlns: "http://www.w3.org/2000/svg",
451
+ width: "12",
452
+ height: "12",
453
+ viewBox: "0 0 24 24",
454
+ fill: "none",
455
+ stroke: "currentColor",
456
+ strokeWidth: "1.5",
457
+ strokeLinecap: "round",
458
+ strokeLinejoin: "round"
459
+ }, /*#__PURE__*/ React.createElement("line", {
460
+ x1: "18",
461
+ y1: "6",
462
+ x2: "6",
463
+ y2: "18"
464
+ }), /*#__PURE__*/ React.createElement("line", {
465
+ x1: "6",
466
+ y1: "6",
467
+ x2: "18",
468
+ y2: "18"
469
+ }));
470
+
471
+ const useIsDocumentHidden = ()=>{
472
+ const [isDocumentHidden, setIsDocumentHidden] = React.useState(document.hidden);
473
+ React.useEffect(()=>{
474
+ const callback = ()=>{
475
+ setIsDocumentHidden(document.hidden);
476
+ };
477
+ document.addEventListener('visibilitychange', callback);
478
+ return ()=>document.removeEventListener('visibilitychange', callback);
479
+ }, []);
480
+ return isDocumentHidden;
481
+ };
482
+
483
+ __insertCSS("[data-notify-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-notify-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-notify-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;transition:transform .4s ease}@media (hover:none) and (pointer:coarse){[data-notify-toaster][data-lifted=true]{transform:none}}[data-notify-toaster][data-x-position=right]{right:var(--offset-right)}[data-notify-toaster][data-x-position=left]{left:var(--offset-left)}[data-notify-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-notify-toaster][data-y-position=top]{top:var(--offset-top)}[data-notify-toaster][data-y-position=bottom]{bottom:var(--offset-bottom)}[data-notify-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;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-notify-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-notify-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-notify-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-notify-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-notify-toast][data-styled=true] [data-description]{font-weight:400;line-height:1.4;color:#3f3f3f}[data-rich-colors=true][data-notify-toast][data-styled=true] [data-description]{color:inherit}[data-notify-toaster][data-notify-theme=dark] [data-description]{color:#e8e8e8}[data-notify-toast][data-styled=true] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-notify-toast][data-styled=true] [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-notify-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:notify-fade-in .3s ease forwards}[data-notify-toast][data-styled=true] [data-icon]>*{flex-shrink:0}[data-notify-toast][data-styled=true] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-notify-toast][data-styled=true] [data-content]{display:flex;flex-direction:column;gap:2px}[data-notify-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;font-weight:500;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-notify-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-notify-toast][data-styled=true] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-notify-toast][data-styled=true] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-notify-toaster][data-notify-theme=dark] [data-notify-toast][data-styled=true] [data-cancel]{background:rgba(255,255,255,.3)}[data-notify-toast][data-styled=true] [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;color:var(--normal-text);background:var(--normal-bg);border:1px solid var(--normal-border);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-notify-toast][data-styled=true] [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-notify-toast][data-styled=true] [data-disabled=true]{cursor:not-allowed}[data-notify-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-notify-toast][data-swiping=true]::before{content:'';position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-notify-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-notify-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-notify-toast][data-swiping=false][data-removed=true]::before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-notify-toast][data-expanded=true]::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-notify-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-notify-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-notify-toast]>*{transition:opacity .4s}[data-notify-toast][data-x-position=right]{right:0}[data-notify-toast][data-x-position=left]{left:0}[data-notify-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-notify-toast][data-visible=false]{opacity:0;pointer-events:none}[data-notify-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-notify-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-notify-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-notify-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-notify-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}[data-notify-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y,0)) translateX(var(--swipe-amount-x,0));transition:none}[data-notify-toast][data-swiped=true]{-webkit-user-select:none;user-select:none}[data-notify-toast][data-swipe-out=true][data-y-position=bottom],[data-notify-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-notify-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-notify-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-notify-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-notify-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width:600px){[data-notify-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-notify-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-notify-toaster] [data-notify-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-notify-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-notify-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-notify-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-notify-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-notify-toaster][data-notify-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 87%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 93%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 84%);--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-notify-toaster][data-notify-theme=light] [data-notify-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-notify-toaster][data-notify-theme=dark] [data-notify-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-notify-toaster][data-notify-theme=dark]{--normal-bg:#000;--normal-bg-hover:hsl(0, 0%, 12%);--normal-border:hsl(0, 0%, 20%);--normal-border-hover:hsl(0, 0%, 25%);--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, 43%, 17%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 9%);--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-notify-toaster][data-notify-theme=dark] [data-notify-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-notify-toaster][data-notify-theme=dark] [data-notify-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-notify-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-notify-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-notify-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-notify-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-notify-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-notify-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-notify-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true][data-notify-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.notify-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.notify-loading-wrapper[data-visible=false]{transform-origin:center;animation:notify-fade-out .2s ease forwards}.notify-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.notify-loading-bar{animation:notify-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.notify-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.notify-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.notify-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.notify-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.notify-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.notify-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.notify-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.notify-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.notify-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.notify-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.notify-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.notify-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes notify-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes notify-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes notify-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.notify-loading-bar,[data-notify-toast],[data-notify-toast]>*{transition:none!important;animation:none!important}}.notify-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.notify-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}");
484
+
485
+ function isAction(action) {
486
+ return action.label !== undefined;
487
+ }
488
+
489
+ const Toast = (props)=>{
490
+ const { invert: ToasterInvert, toast, unstyled, interacting, setHeights, visibleToasts, heights, index, toasts, expanded, removeToast, defaultRichColors, closeButton: closeButtonFromToaster, style, cancelButtonStyle, actionButtonStyle, className = '', descriptionClassName = '', duration: durationFromToaster, position, gap, expandByDefault, classNames, icons, closeButtonAriaLabel = 'Close toast' } = props;
491
+ const [swipeDirection, setSwipeDirection] = React.useState(null);
492
+ const [swipeOutDirection, setSwipeOutDirection] = React.useState(null);
493
+ const [mounted, setMounted] = React.useState(false);
494
+ const [removed, setRemoved] = React.useState(false);
495
+ const [swiping, setSwiping] = React.useState(false);
496
+ const [swipeOut, setSwipeOut] = React.useState(false);
497
+ const [isSwiped, setIsSwiped] = React.useState(false);
498
+ const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
499
+ const [initialHeight, setInitialHeight] = React.useState(0);
500
+ const remainingTime = React.useRef(toast.duration || durationFromToaster || TOAST_LIFETIME);
501
+ const dragStartTime = React.useRef(null);
502
+ const toastRef = React.useRef(null);
503
+ const isFront = index === 0;
504
+ const isVisible = index + 1 <= visibleToasts;
505
+ const toastType = toast.type;
506
+ const dismissible = toast.dismissible !== false;
507
+ const toastClassname = toast.className || '';
508
+ const toastDescriptionClassname = toast.descriptionClassName || '';
509
+ const heightIndex = React.useMemo(()=>heights.findIndex((height)=>height.toastId === toast.id) || 0, [
510
+ heights,
511
+ toast.id
512
+ ]);
513
+ const closeButton = React.useMemo(()=>toast.closeButton ?? closeButtonFromToaster, [
514
+ toast.closeButton,
515
+ closeButtonFromToaster
516
+ ]);
517
+ const duration = React.useMemo(()=>toast.duration || durationFromToaster || TOAST_LIFETIME, [
518
+ toast.duration,
519
+ durationFromToaster
520
+ ]);
521
+ const closeTimerStartTimeRef = React.useRef(0);
522
+ const offset = React.useRef(0);
523
+ const lastCloseTimerStartTimeRef = React.useRef(0);
524
+ const pointerStartRef = React.useRef(null);
525
+ const [y, x] = position.split('-');
526
+ const toastsHeightBefore = React.useMemo(()=>{
527
+ return heights.reduce((prev, curr, reducerIndex)=>{
528
+ if (reducerIndex >= heightIndex) {
529
+ return prev;
530
+ }
531
+ return prev + curr.height;
532
+ }, 0);
533
+ }, [
534
+ heights,
535
+ heightIndex
536
+ ]);
537
+ const isDocumentHidden = useIsDocumentHidden();
538
+ const invert = toast.invert || ToasterInvert;
539
+ const disabled = toastType === 'loading';
540
+ offset.current = React.useMemo(()=>heightIndex * gap + toastsHeightBefore, [
541
+ heightIndex,
542
+ toastsHeightBefore
543
+ ]);
544
+ React.useEffect(()=>{
545
+ remainingTime.current = duration;
546
+ }, [
547
+ duration
548
+ ]);
549
+ React.useEffect(()=>{
550
+ setMounted(true);
551
+ }, []);
552
+ React.useEffect(()=>{
553
+ const toastNode = toastRef.current;
554
+ if (toastNode) {
555
+ const height = toastNode.getBoundingClientRect().height;
556
+ setInitialHeight(height);
557
+ setHeights((h)=>[
558
+ {
559
+ toastId: toast.id,
560
+ height,
561
+ position: toast.position
562
+ },
563
+ ...h
564
+ ]);
565
+ return ()=>setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
566
+ }
567
+ }, [
568
+ setHeights,
569
+ toast.id
570
+ ]);
571
+ React.useLayoutEffect(()=>{
572
+ if (!mounted) return;
573
+ const toastNode = toastRef.current;
574
+ const originalHeight = toastNode.style.height;
575
+ toastNode.style.height = 'auto';
576
+ const newHeight = toastNode.getBoundingClientRect().height;
577
+ toastNode.style.height = originalHeight;
578
+ setInitialHeight(newHeight);
579
+ setHeights((currentHeights)=>{
580
+ const alreadyExists = currentHeights.find((height)=>height.toastId === toast.id);
581
+ if (!alreadyExists) {
582
+ return [
583
+ {
584
+ toastId: toast.id,
585
+ height: newHeight,
586
+ position: toast.position
587
+ },
588
+ ...currentHeights
589
+ ];
590
+ }
591
+ return currentHeights.map((height)=>height.toastId === toast.id ? {
592
+ ...height,
593
+ height: newHeight
594
+ } : height);
595
+ });
596
+ }, [
597
+ mounted,
598
+ toast.title,
599
+ toast.description,
600
+ setHeights,
601
+ toast.id,
602
+ toast.jsx,
603
+ toast.action,
604
+ toast.cancel
605
+ ]);
606
+ const deleteToast = React.useCallback(()=>{
607
+ setRemoved(true);
608
+ setOffsetBeforeRemove(offset.current);
609
+ setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
610
+ setTimeout(()=>{
611
+ removeToast(toast);
612
+ }, TIME_BEFORE_UNMOUNT);
613
+ }, [
614
+ toast,
615
+ removeToast,
616
+ setHeights,
617
+ offset
618
+ ]);
619
+ React.useEffect(()=>{
620
+ if (toast.promise && toastType === 'loading' || toast.duration === Infinity || toast.type === 'loading') return;
621
+ let timeoutId;
622
+ const pauseTimer = ()=>{
623
+ if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) {
624
+ const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
625
+ remainingTime.current = remainingTime.current - elapsedTime;
626
+ }
627
+ lastCloseTimerStartTimeRef.current = new Date().getTime();
628
+ };
629
+ const startTimer = ()=>{
630
+ if (remainingTime.current === Infinity) return;
631
+ closeTimerStartTimeRef.current = new Date().getTime();
632
+ timeoutId = setTimeout(()=>{
633
+ toast.onAutoClose?.(toast);
634
+ deleteToast();
635
+ }, remainingTime.current);
636
+ };
637
+ if (expanded || interacting || isDocumentHidden) {
638
+ pauseTimer();
639
+ } else {
640
+ startTimer();
641
+ }
642
+ return ()=>clearTimeout(timeoutId);
643
+ }, [
644
+ expanded,
645
+ interacting,
646
+ toast,
647
+ toastType,
648
+ isDocumentHidden,
649
+ deleteToast
650
+ ]);
651
+ React.useEffect(()=>{
652
+ if (toast.delete) {
653
+ deleteToast();
654
+ toast.onDismiss?.(toast);
655
+ }
656
+ }, [
657
+ deleteToast,
658
+ toast.delete
659
+ ]);
660
+ function getLoadingIcon() {
661
+ if (icons?.loading) {
662
+ return /*#__PURE__*/ React.createElement("div", {
663
+ className: cn(classNames?.loader, toast?.classNames?.loader, 'notify-loader'),
664
+ "data-visible": toastType === 'loading'
665
+ }, icons.loading);
666
+ }
667
+ return /*#__PURE__*/ React.createElement(Loader, {
668
+ className: cn(classNames?.loader, toast?.classNames?.loader),
669
+ visible: toastType === 'loading'
670
+ });
671
+ }
672
+ const icon = toast.icon || icons?.[toastType] || getAsset(toastType);
673
+ return /*#__PURE__*/ React.createElement("li", {
674
+ tabIndex: 0,
675
+ ref: toastRef,
676
+ className: cn(className, toastClassname, classNames?.toast, toast?.classNames?.toast, classNames?.default, classNames?.[toastType], toast?.classNames?.[toastType]),
677
+ "data-notify-toast": "",
678
+ "data-rich-colors": toast.richColors ?? defaultRichColors,
679
+ "data-styled": !Boolean(toast.jsx || toast.unstyled || unstyled),
680
+ "data-mounted": mounted,
681
+ "data-promise": Boolean(toast.promise),
682
+ "data-swiped": isSwiped,
683
+ "data-removed": removed,
684
+ "data-visible": isVisible,
685
+ "data-y-position": y,
686
+ "data-x-position": x,
687
+ "data-index": index,
688
+ "data-front": isFront,
689
+ "data-swiping": swiping,
690
+ "data-dismissible": dismissible,
691
+ "data-type": toastType,
692
+ "data-invert": invert,
693
+ "data-swipe-out": swipeOut,
694
+ "data-swipe-direction": swipeOutDirection,
695
+ "data-expanded": Boolean(expanded || expandByDefault && mounted),
696
+ "data-testid": toast.testId,
697
+ style: {
698
+ '--index': index,
699
+ '--toasts-before': index,
700
+ '--z-index': toasts.length - index,
701
+ '--offset': `${removed ? offsetBeforeRemove : offset.current}px`,
702
+ '--initial-height': expandByDefault ? 'auto' : `${initialHeight}px`,
703
+ ...style,
704
+ ...toast.style
705
+ },
706
+ onDragEnd: ()=>{
707
+ setSwiping(false);
708
+ setSwipeDirection(null);
709
+ pointerStartRef.current = null;
710
+ },
711
+ onPointerDown: (event)=>{
712
+ if (event.button === 2) return;
713
+ if (disabled || !dismissible) return;
714
+ dragStartTime.current = new Date();
715
+ setOffsetBeforeRemove(offset.current);
716
+ event.target.setPointerCapture(event.pointerId);
717
+ if (event.target.tagName === 'BUTTON') return;
718
+ setSwiping(true);
719
+ pointerStartRef.current = {
720
+ x: event.clientX,
721
+ y: event.clientY
722
+ };
723
+ },
724
+ onPointerUp: ()=>{
725
+ if (swipeOut || !dismissible) return;
726
+ pointerStartRef.current = null;
727
+ const swipeAmountX = Number(toastRef.current?.style.getPropertyValue('--swipe-amount-x').replace('px', '') || 0);
728
+ const swipeAmountY = Number(toastRef.current?.style.getPropertyValue('--swipe-amount-y').replace('px', '') || 0);
729
+ const timeTaken = new Date().getTime() - dragStartTime.current?.getTime();
730
+ const swipeAmount = swipeDirection === 'x' ? swipeAmountX : swipeAmountY;
731
+ const velocity = Math.abs(swipeAmount) / timeTaken;
732
+ if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
733
+ setOffsetBeforeRemove(offset.current);
734
+ toast.onDismiss?.(toast);
735
+ if (swipeDirection === 'x') {
736
+ setSwipeOutDirection(swipeAmountX > 0 ? 'right' : 'left');
737
+ } else {
738
+ setSwipeOutDirection(swipeAmountY > 0 ? 'down' : 'up');
739
+ }
740
+ deleteToast();
741
+ setSwipeOut(true);
742
+ return;
743
+ }
744
+ toastRef.current?.style.setProperty('--swipe-amount-x', '0px');
745
+ toastRef.current?.style.setProperty('--swipe-amount-y', '0px');
746
+ setIsSwiped(false);
747
+ setSwiping(false);
748
+ setSwipeDirection(null);
749
+ },
750
+ onPointerMove: (event)=>{
751
+ if (!pointerStartRef.current || !dismissible) return;
752
+ const isHighlighted = window.getSelection()?.toString().length > 0;
753
+ if (isHighlighted) return;
754
+ const yDelta = event.clientY - pointerStartRef.current.y;
755
+ const xDelta = event.clientX - pointerStartRef.current.x;
756
+ const swipeDirections = props.swipeDirections ?? getDefaultSwipeDirections(position);
757
+ if (!swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
758
+ setSwipeDirection(Math.abs(xDelta) > Math.abs(yDelta) ? 'x' : 'y');
759
+ }
760
+ let swipeAmount = {
761
+ x: 0,
762
+ y: 0
763
+ };
764
+ const getDampening = (delta)=>{
765
+ const factor = Math.abs(delta) / 20;
766
+ return 1 / (1.5 + factor);
767
+ };
768
+ if (swipeDirection === 'y') {
769
+ if (swipeDirections.includes('top') || swipeDirections.includes('bottom')) {
770
+ if (swipeDirections.includes('top') && yDelta < 0 || swipeDirections.includes('bottom') && yDelta > 0) {
771
+ swipeAmount.y = yDelta;
772
+ } else {
773
+ const dampenedDelta = yDelta * getDampening(yDelta);
774
+ swipeAmount.y = Math.abs(dampenedDelta) < Math.abs(yDelta) ? dampenedDelta : yDelta;
775
+ }
776
+ }
777
+ } else if (swipeDirection === 'x') {
778
+ if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
779
+ if (swipeDirections.includes('left') && xDelta < 0 || swipeDirections.includes('right') && xDelta > 0) {
780
+ swipeAmount.x = xDelta;
781
+ } else {
782
+ const dampenedDelta = xDelta * getDampening(xDelta);
783
+ swipeAmount.x = Math.abs(dampenedDelta) < Math.abs(xDelta) ? dampenedDelta : xDelta;
784
+ }
785
+ }
786
+ }
787
+ if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) {
788
+ setIsSwiped(true);
789
+ }
790
+ toastRef.current?.style.setProperty('--swipe-amount-x', `${swipeAmount.x}px`);
791
+ toastRef.current?.style.setProperty('--swipe-amount-y', `${swipeAmount.y}px`);
792
+ }
793
+ }, closeButton && !toast.jsx && toastType !== 'loading' ? /*#__PURE__*/ React.createElement("button", {
794
+ "aria-label": closeButtonAriaLabel,
795
+ "data-disabled": disabled,
796
+ "data-close-button": true,
797
+ onClick: disabled || !dismissible ? ()=>{} : ()=>{
798
+ deleteToast();
799
+ toast.onDismiss?.(toast);
800
+ },
801
+ className: cn(classNames?.closeButton, toast?.classNames?.closeButton)
802
+ }, icons?.close ?? CloseIcon) : null, (toastType || toast.icon || toast.promise) && toast.icon !== null && (icons?.[toastType] !== null || toast.icon) ? /*#__PURE__*/ React.createElement("div", {
803
+ "data-icon": "",
804
+ className: cn(classNames?.icon, toast?.classNames?.icon)
805
+ }, toast.promise || toast.type === 'loading' && !toast.icon ? toast.icon || getLoadingIcon() : null, toast.type !== 'loading' ? icon : null) : null, /*#__PURE__*/ React.createElement("div", {
806
+ "data-content": "",
807
+ className: cn(classNames?.content, toast?.classNames?.content)
808
+ }, /*#__PURE__*/ React.createElement("div", {
809
+ "data-title": "",
810
+ className: cn(classNames?.title, toast?.classNames?.title)
811
+ }, toast.jsx ? toast.jsx : typeof toast.title === 'function' ? toast.title() : toast.title), toast.description ? /*#__PURE__*/ React.createElement("div", {
812
+ "data-description": "",
813
+ className: cn(descriptionClassName, toastDescriptionClassname, classNames?.description, toast?.classNames?.description)
814
+ }, typeof toast.description === 'function' ? toast.description() : toast.description) : null), /*#__PURE__*/ React.isValidElement(toast.cancel) ? toast.cancel : toast.cancel && isAction(toast.cancel) ? /*#__PURE__*/ React.createElement("button", {
815
+ "data-button": true,
816
+ "data-cancel": true,
817
+ style: toast.cancelButtonStyle || cancelButtonStyle,
818
+ onClick: (event)=>{
819
+ if (!isAction(toast.cancel)) return;
820
+ if (!dismissible) return;
821
+ toast.cancel.onClick?.(event);
822
+ deleteToast();
823
+ },
824
+ className: cn(classNames?.cancelButton, toast?.classNames?.cancelButton)
825
+ }, toast.cancel.label) : null, /*#__PURE__*/ React.isValidElement(toast.action) ? toast.action : toast.action && isAction(toast.action) ? /*#__PURE__*/ React.createElement("button", {
826
+ "data-button": true,
827
+ "data-action": true,
828
+ style: toast.actionButtonStyle || actionButtonStyle,
829
+ onClick: (event)=>{
830
+ if (!isAction(toast.action)) return;
831
+ toast.action.onClick?.(event);
832
+ if (event.defaultPrevented) return;
833
+ deleteToast();
834
+ },
835
+ className: cn(classNames?.actionButton, toast?.classNames?.actionButton)
836
+ }, toast.action.label) : null);
837
+ };
838
+ const Toaster$1 = /*#__PURE__*/ React.forwardRef(function Toaster(props, ref) {
839
+ const { id, invert, position = 'bottom-right', hotkey = [
840
+ 'altKey',
841
+ 'KeyT'
842
+ ], expand, closeButton, className, offset, mobileOffset, theme = 'light', richColors, duration, style, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, customAriaLabel, containerAriaLabel = 'Notifications' } = props;
843
+ const [toasts, setToasts] = React.useState([]);
844
+ const filteredToasts = React.useMemo(()=>{
845
+ if (id) {
846
+ return toasts.filter((toast)=>toast.toasterId === id);
847
+ }
848
+ return toasts.filter((toast)=>!toast.toasterId);
849
+ }, [
850
+ toasts,
851
+ id
852
+ ]);
853
+ const possiblePositions = React.useMemo(()=>{
854
+ return Array.from(new Set([
855
+ position
856
+ ].concat(filteredToasts.filter((toast)=>toast.position).map((toast)=>toast.position))));
857
+ }, [
858
+ filteredToasts,
859
+ position
860
+ ]);
861
+ const [heights, setHeights] = React.useState([]);
862
+ const [expanded, setExpanded] = React.useState(false);
863
+ const [interacting, setInteracting] = React.useState(false);
864
+ const [actualTheme, setActualTheme] = React.useState(theme !== 'system' ? theme : typeof window !== 'undefined' ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : 'light');
865
+ const listRef = React.useRef(null);
866
+ const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
867
+ const lastFocusedElementRef = React.useRef(null);
868
+ const isFocusWithinRef = React.useRef(false);
869
+ const removeToast = React.useCallback((toastToRemove)=>{
870
+ setToasts((currentToasts)=>{
871
+ if (!currentToasts.find((toast)=>toast.id === toastToRemove.id)?.delete) {
872
+ ToastState.dismiss(toastToRemove.id);
873
+ }
874
+ return currentToasts.filter(({ id: toastId })=>toastId !== toastToRemove.id);
875
+ });
876
+ }, []);
877
+ React.useEffect(()=>{
878
+ return ToastState.subscribe((toast)=>{
879
+ if (toast.dismiss) {
880
+ requestAnimationFrame(()=>{
881
+ setToasts((currentToasts)=>currentToasts.map((t)=>t.id === toast.id ? {
882
+ ...t,
883
+ delete: true
884
+ } : t));
885
+ });
886
+ return;
887
+ }
888
+ setTimeout(()=>{
889
+ ReactDOM.flushSync(()=>{
890
+ setToasts((currentToasts)=>{
891
+ const indexOfExistingToast = currentToasts.findIndex((t)=>t.id === toast.id);
892
+ if (indexOfExistingToast !== -1) {
893
+ return [
894
+ ...currentToasts.slice(0, indexOfExistingToast),
895
+ {
896
+ ...currentToasts[indexOfExistingToast],
897
+ ...toast
898
+ },
899
+ ...currentToasts.slice(indexOfExistingToast + 1)
900
+ ];
901
+ }
902
+ return [
903
+ toast,
904
+ ...currentToasts
905
+ ];
906
+ });
907
+ });
908
+ });
909
+ });
910
+ }, []);
911
+ React.useEffect(()=>{
912
+ if (theme !== 'system') {
913
+ setActualTheme(theme);
914
+ return;
915
+ }
916
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
917
+ setActualTheme('dark');
918
+ } else {
919
+ setActualTheme('light');
920
+ }
921
+ if (typeof window === 'undefined') return;
922
+ const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
923
+ try {
924
+ darkMediaQuery.addEventListener('change', ({ matches })=>{
925
+ setActualTheme(matches ? 'dark' : 'light');
926
+ });
927
+ } catch (error) {
928
+ darkMediaQuery.addListener(({ matches })=>{
929
+ try {
930
+ setActualTheme(matches ? 'dark' : 'light');
931
+ } catch (listenerError) {
932
+ console.error(listenerError);
933
+ }
934
+ });
935
+ }
936
+ }, [
937
+ theme
938
+ ]);
939
+ React.useEffect(()=>{
940
+ if (toasts.length <= 1) {
941
+ setExpanded(false);
942
+ }
943
+ }, [
944
+ toasts
945
+ ]);
946
+ React.useEffect(()=>{
947
+ const handleKeyDown = (event)=>{
948
+ const isHotkeyPressed = hotkey.length > 0 && hotkey.every((key)=>event[key] || event.code === key);
949
+ if (isHotkeyPressed) {
950
+ setExpanded(true);
951
+ listRef.current?.focus();
952
+ }
953
+ if (event.code === 'Escape' && (document.activeElement === listRef.current || listRef.current?.contains(document.activeElement))) {
954
+ setExpanded(false);
955
+ }
956
+ };
957
+ document.addEventListener('keydown', handleKeyDown);
958
+ return ()=>document.removeEventListener('keydown', handleKeyDown);
959
+ }, [
960
+ hotkey
961
+ ]);
962
+ React.useEffect(()=>{
963
+ if (listRef.current) {
964
+ return ()=>{
965
+ if (lastFocusedElementRef.current) {
966
+ lastFocusedElementRef.current.focus({
967
+ preventScroll: true
968
+ });
969
+ lastFocusedElementRef.current = null;
970
+ isFocusWithinRef.current = false;
971
+ }
972
+ };
973
+ }
974
+ }, []);
975
+ return /*#__PURE__*/ React.createElement("section", {
976
+ ref: ref,
977
+ "aria-label": customAriaLabel ?? `${containerAriaLabel} ${hotkeyLabel}`,
978
+ tabIndex: -1,
979
+ "aria-live": "polite",
980
+ "aria-relevant": "additions text",
981
+ "aria-atomic": "false",
982
+ suppressHydrationWarning: true,
983
+ "data-react-aria-top-layer": true
984
+ }, possiblePositions.map((currentPosition, index)=>{
985
+ const [y, x] = currentPosition.split('-');
986
+ if (!filteredToasts.length) return null;
987
+ return /*#__PURE__*/ React.createElement("ol", {
988
+ key: currentPosition,
989
+ dir: dir === 'auto' ? getDocumentDirection() : dir,
990
+ tabIndex: -1,
991
+ ref: listRef,
992
+ className: className,
993
+ "data-notify-toaster": true,
994
+ "data-notify-theme": actualTheme,
995
+ "data-y-position": y,
996
+ "data-x-position": x,
997
+ style: {
998
+ '--front-toast-height': `${heights[0]?.height || 0}px`,
999
+ '--width': `${TOAST_WIDTH}px`,
1000
+ '--gap': `${gap}px`,
1001
+ ...style,
1002
+ ...assignOffset(offset, mobileOffset)
1003
+ },
1004
+ onBlur: (event)=>{
1005
+ if (isFocusWithinRef.current && !event.currentTarget.contains(event.relatedTarget)) {
1006
+ isFocusWithinRef.current = false;
1007
+ if (lastFocusedElementRef.current) {
1008
+ lastFocusedElementRef.current.focus({
1009
+ preventScroll: true
1010
+ });
1011
+ lastFocusedElementRef.current = null;
1012
+ }
1013
+ }
1014
+ },
1015
+ onFocus: (event)=>{
1016
+ const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
1017
+ if (isNotDismissible) return;
1018
+ if (!isFocusWithinRef.current) {
1019
+ isFocusWithinRef.current = true;
1020
+ lastFocusedElementRef.current = event.relatedTarget;
1021
+ }
1022
+ },
1023
+ onMouseEnter: ()=>setExpanded(true),
1024
+ onMouseMove: ()=>setExpanded(true),
1025
+ onMouseLeave: ()=>{
1026
+ if (!interacting) {
1027
+ setExpanded(false);
1028
+ }
1029
+ },
1030
+ onDragEnd: ()=>setExpanded(false),
1031
+ onPointerDown: (event)=>{
1032
+ const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
1033
+ if (isNotDismissible) return;
1034
+ setInteracting(true);
1035
+ },
1036
+ onPointerUp: ()=>setInteracting(false)
1037
+ }, filteredToasts.filter((toast)=>!toast.position && index === 0 || toast.position === currentPosition).map((toast, toastIndex)=>/*#__PURE__*/ React.createElement(Toast, {
1038
+ key: toast.id,
1039
+ icons: icons,
1040
+ index: toastIndex,
1041
+ toast: toast,
1042
+ defaultRichColors: richColors,
1043
+ duration: toastOptions?.duration ?? duration,
1044
+ className: toastOptions?.className,
1045
+ descriptionClassName: toastOptions?.descriptionClassName,
1046
+ invert: invert,
1047
+ visibleToasts: visibleToasts,
1048
+ closeButton: toastOptions?.closeButton ?? closeButton,
1049
+ interacting: interacting,
1050
+ position: currentPosition,
1051
+ style: toastOptions?.style,
1052
+ unstyled: toastOptions?.unstyled,
1053
+ classNames: toastOptions?.classNames,
1054
+ cancelButtonStyle: toastOptions?.cancelButtonStyle,
1055
+ actionButtonStyle: toastOptions?.actionButtonStyle,
1056
+ closeButtonAriaLabel: toastOptions?.closeButtonAriaLabel,
1057
+ removeToast: removeToast,
1058
+ toasts: filteredToasts.filter((t)=>t.position == toast.position),
1059
+ heights: heights.filter((h)=>h.position == toast.position),
1060
+ setHeights: setHeights,
1061
+ expandByDefault: expand,
1062
+ gap: gap,
1063
+ expanded: expanded,
1064
+ swipeDirections: props.swipeDirections
1065
+ })));
1066
+ }));
1067
+ });
1068
+
1069
+ let vanillaToasterRoot = null;
1070
+ let vanillaToasterElement = null;
1071
+ let vanillaToasterOptions = {};
1072
+ function toReactAction(action) {
1073
+ if (!action) return undefined;
1074
+ return {
1075
+ label: action.label,
1076
+ onClick: (event)=>{
1077
+ action.onClick?.(event);
1078
+ if (action.closeOnClick === false) {
1079
+ event.preventDefault();
1080
+ }
1081
+ }
1082
+ };
1083
+ }
1084
+ function normalizeToastOptions(options) {
1085
+ if (!options) return undefined;
1086
+ return {
1087
+ ...options,
1088
+ action: toReactAction(options.action),
1089
+ cancel: toReactAction(options.cancel)
1090
+ };
1091
+ }
1092
+ function normalizePromiseValue(value) {
1093
+ if (typeof value !== 'function') {
1094
+ return value;
1095
+ }
1096
+ return async (data)=>value(data);
1097
+ }
1098
+ function normalizePromiseData(data) {
1099
+ if (!data) return undefined;
1100
+ const { loading, success, error, description, finally: finallyCallback, ...rest } = data;
1101
+ return {
1102
+ ...normalizeToastOptions(rest),
1103
+ loading: loading,
1104
+ success: normalizePromiseValue(success),
1105
+ error: normalizePromiseValue(error),
1106
+ description: description,
1107
+ finally: finallyCallback
1108
+ };
1109
+ }
1110
+ function getVanillaContainer() {
1111
+ if (!canUseDOM()) return null;
1112
+ if (vanillaToasterElement?.isConnected) {
1113
+ return vanillaToasterElement;
1114
+ }
1115
+ const existing = document.querySelector('[data-notify-vanilla-root]');
1116
+ if (existing) {
1117
+ vanillaToasterElement = existing;
1118
+ return existing;
1119
+ }
1120
+ const element = document.createElement('div');
1121
+ element.dataset.notifyVanillaRoot = '';
1122
+ document.body.appendChild(element);
1123
+ vanillaToasterElement = element;
1124
+ return element;
1125
+ }
1126
+ function renderVanillaToaster() {
1127
+ const container = getVanillaContainer();
1128
+ if (!container) return null;
1129
+ if (!vanillaToasterRoot) {
1130
+ vanillaToasterRoot = createRoot(container);
1131
+ }
1132
+ vanillaToasterRoot.render(/*#__PURE__*/ React.createElement(Toaster$1, vanillaToasterOptions));
1133
+ return container;
1134
+ }
1135
+ function buildVanillaController(element) {
1136
+ return {
1137
+ element,
1138
+ options: vanillaToasterOptions,
1139
+ update (options = {}) {
1140
+ vanillaToasterOptions = {
1141
+ ...vanillaToasterOptions,
1142
+ ...options
1143
+ };
1144
+ renderVanillaToaster();
1145
+ return buildVanillaController(element);
1146
+ },
1147
+ destroy () {
1148
+ destroyToaster();
1149
+ }
1150
+ };
1151
+ }
1152
+ function ensureVanillaToaster() {
1153
+ const container = renderVanillaToaster();
1154
+ return container ? buildVanillaController(container) : null;
1155
+ }
1156
+ function createToaster(options = {}) {
1157
+ vanillaToasterOptions = {
1158
+ ...vanillaToasterOptions,
1159
+ ...options
1160
+ };
1161
+ return ensureVanillaToaster();
1162
+ }
1163
+ function configureToaster(options = {}) {
1164
+ return createToaster(options);
1165
+ }
1166
+ const Toaster = createToaster;
1167
+ function getToaster() {
1168
+ if (!vanillaToasterElement || !vanillaToasterRoot) {
1169
+ return null;
1170
+ }
1171
+ return buildVanillaController(vanillaToasterElement);
1172
+ }
1173
+ function destroyToaster() {
1174
+ vanillaToasterRoot?.unmount();
1175
+ vanillaToasterRoot = null;
1176
+ if (vanillaToasterElement?.parentNode) {
1177
+ vanillaToasterElement.parentNode.removeChild(vanillaToasterElement);
1178
+ }
1179
+ vanillaToasterElement = null;
1180
+ }
1181
+ function ensureVanillaRendererMounted() {
1182
+ if (!canUseDOM()) return;
1183
+ ensureVanillaToaster();
1184
+ }
1185
+ const toast = Object.assign((message, data)=>{
1186
+ ensureVanillaRendererMounted();
1187
+ return toast$1(message, normalizeToastOptions(data));
1188
+ }, {
1189
+ success (message, data) {
1190
+ ensureVanillaRendererMounted();
1191
+ return toast$1.success(message, normalizeToastOptions(data));
1192
+ },
1193
+ info (message, data) {
1194
+ ensureVanillaRendererMounted();
1195
+ return toast$1.info(message, normalizeToastOptions(data));
1196
+ },
1197
+ warning (message, data) {
1198
+ ensureVanillaRendererMounted();
1199
+ return toast$1.warning(message, normalizeToastOptions(data));
1200
+ },
1201
+ error (message, data) {
1202
+ ensureVanillaRendererMounted();
1203
+ return toast$1.error(message, normalizeToastOptions(data));
1204
+ },
1205
+ loading (message, data) {
1206
+ ensureVanillaRendererMounted();
1207
+ return toast$1.loading(message, normalizeToastOptions(data));
1208
+ },
1209
+ message (message, data) {
1210
+ ensureVanillaRendererMounted();
1211
+ return toast$1.message(message, normalizeToastOptions(data));
1212
+ },
1213
+ promise (promise, data) {
1214
+ ensureVanillaRendererMounted();
1215
+ return toast$1.promise(promise, normalizePromiseData(data));
1216
+ },
1217
+ dismiss (id) {
1218
+ return toast$1.dismiss(id);
1219
+ },
1220
+ getHistory () {
1221
+ return toast$1.getHistory();
1222
+ },
1223
+ getToasts () {
1224
+ return toast$1.getToasts();
1225
+ }
1226
+ });
1227
+
1228
+ export { Toaster, configureToaster, createToaster, destroyToaster, getToaster, toast };