@samline/notify 1.0.2 → 2.0.1

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