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