@dataemergencia/emergency 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -8,8 +8,8 @@
8
8
  --de-emergency-blue-soft: #e6f7fe;
9
9
  --de-emergency-blue-dark: #005f8f;
10
10
  --de-emergency-blue-border: #b8e6fc;
11
- --de-emergency-primary: #007bff;
12
- --de-emergency-primary-dark: #1e40af;
11
+ --de-emergency-primary: var(--de-emergency-scaem-primary);
12
+ --de-emergency-primary-dark: var(--de-emergency-scaem-blue-buttons-hover);
13
13
  --de-emergency-primary-foreground: #f9f9f9;
14
14
  --de-emergency-text: #3d4461;
15
15
  --de-emergency-text-secondary: #686868;
@@ -25,9 +25,46 @@
25
25
  --de-emergency-error: #dc3545;
26
26
  --de-emergency-information: #3fabf3;
27
27
  --de-emergency-green: green;
28
- --de-emergency-yellow: #ffd400;
28
+ --de-emergency-yellow: var(--de-emergency-alarm-step-two);
29
29
  --de-emergency-yellow-dark: #b38b00;
30
- --de-emergency-radius: .5rem;
30
+ --de-emergency-black-absolute: #000;
31
+ --de-emergency-black: #050505;
32
+ --de-emergency-gray-dark: #3b3b3b;
33
+ --de-emergency-gray-progress-bar: #a7a7a7;
34
+ --de-emergency-gray-secondary: #6c757d;
35
+ --de-emergency-white-light: #f5f5f5;
36
+ --de-emergency-white-dimmed: #e3e3e3;
37
+ --de-emergency-light-gray: #f8f9fa;
38
+ --de-emergency-border-panic-button: #d8d8d8;
39
+ --de-emergency-shadow-panic-button: #0000001a;
40
+ --de-emergency-alarm-step-one: #97d897;
41
+ --de-emergency-alarm-step-two: #ffff16;
42
+ --de-emergency-alarm-step-three: #ffa481;
43
+ --de-emergency-alarm-step-four: #ff1a1a;
44
+ --de-emergency-scaem-blue: #0671b8;
45
+ --de-emergency-scaem-blue-hover: #1185e4;
46
+ --de-emergency-scaem-blue-buttons-hover: #4cb5f6;
47
+ --de-emergency-scaem-lightblue: #1289d7;
48
+ --de-emergency-scaem-red-hover: #fc3535;
49
+ --de-emergency-scaem-red-2: #ff5851;
50
+ --de-emergency-scaem-red-2-hover: #ff7b7b;
51
+ --de-emergency-scaem-yellow: gold;
52
+ --de-emergency-scaem-orange: orange;
53
+ --de-emergency-scaem-primary: #3fabf3;
54
+ --de-emergency-scaem-secondary: #ff5851;
55
+ --de-emergency-scaem-third: #3d4461;
56
+ --de-emergency-scaem-fourth: #cfeafc;
57
+ --de-emergency-theme-shadow: #3fabf380;
58
+ --de-emergency-rutaweb-default: #004085;
59
+ --de-emergency-rutaweb-lighter: #1474da;
60
+ --de-emergency-rutaweb-light: #0560c2;
61
+ --de-emergency-rutaweb-secondary: #158948;
62
+ --de-emergency-rutaweb-hover: #002752;
63
+ --de-emergency-facebook: #3b5998;
64
+ --de-emergency-instagram: #e1306c;
65
+ --de-emergency-whatsapp: #25d366;
66
+ --de-emergency-whatsapp-darker: #1aa44e;
67
+ --de-emergency-radius: .75rem;
31
68
  --de-emergency-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
32
69
  "Helvetica Neue", Arial, sans-serif;
33
70
  --de-emergency-font-small: clamp(.875rem, 1.5vw, 1rem);
@@ -95,7 +132,7 @@
95
132
  width: 100%;
96
133
  color: var(--de-emergency-on-red, #fff);
97
134
  background: var(--de-emergency-red, red);
98
- border-radius: 0 0 .5rem .5rem;
135
+ border-radius: 0 0 var(--de-emergency-radius) var(--de-emergency-radius);
99
136
  grid-row: 1;
100
137
  justify-content: space-between;
101
138
  align-items: center;
@@ -104,6 +141,12 @@
104
141
  display: flex;
105
142
  }
106
143
 
144
+ .de-emergency-emergency-panel__header--close-only-nA5Hwa {
145
+ color: var(--de-emergency-text, #3d4461);
146
+ background: none;
147
+ justify-content: flex-end;
148
+ }
149
+
107
150
  .de-emergency-emergency-panel__title-nA5Hwa {
108
151
  flex: 1;
109
152
  margin: 0;
@@ -149,17 +192,17 @@
149
192
  align-items: center;
150
193
  gap: .75rem;
151
194
  width: 100%;
152
- padding: 1rem;
195
+ padding: .75rem;
153
196
  display: flex;
154
197
  position: relative;
155
198
  overflow-y: auto;
156
199
  }
157
200
 
158
- .de-emergency-emergency-panel__body--pricing-nA5Hwa {
201
+ .de-emergency-emergency-panel__body--pricing-nA5Hwa, .de-emergency-emergency-panel__body--pre-emergency-nA5Hwa {
159
202
  text-align: start;
160
203
  justify-content: flex-start;
161
204
  align-items: center;
162
- padding: 1rem;
205
+ padding: .75rem;
163
206
  }
164
207
 
165
208
  .de-emergency-emergency-panel__body-title-container-nA5Hwa {
@@ -186,7 +229,7 @@
186
229
  }
187
230
 
188
231
  .de-emergency-emergency-panel__body-split--with-availability-nA5Hwa {
189
- grid-template-rows: auto 1fr;
232
+ grid-template-rows: .5fr auto .5fr;
190
233
  }
191
234
 
192
235
  .de-emergency-emergency-panel__availability-region-nA5Hwa {
@@ -197,6 +240,26 @@
197
240
  display: flex;
198
241
  }
199
242
 
243
+ .de-emergency-emergency-panel__divider-nA5Hwa {
244
+ border: 0;
245
+ border-top: 1px solid var(--de-emergency-red, red);
246
+ width: 100%;
247
+ height: 0;
248
+ margin: 0;
249
+ }
250
+
251
+ .de-emergency-emergency-panel__sr-only-nA5Hwa {
252
+ white-space: nowrap;
253
+ clip-path: inset(50%);
254
+ border: 0;
255
+ width: 1px;
256
+ height: 1px;
257
+ margin: -1px;
258
+ padding: 0;
259
+ position: absolute;
260
+ overflow: hidden;
261
+ }
262
+
200
263
  .de-emergency-emergency-panel__prompt-region-nA5Hwa {
201
264
  flex-direction: column;
202
265
  justify-content: center;
@@ -214,7 +277,7 @@
214
277
  justify-content: center;
215
278
  align-items: stretch;
216
279
  gap: .75rem;
217
- width: min(100%, 22rem);
280
+ width: min(100%, 28rem);
218
281
  display: flex;
219
282
  }
220
283
 
@@ -222,8 +285,8 @@
222
285
  width: 100%;
223
286
  min-height: 2.75rem;
224
287
  color: var(--de-emergency-on-red, #fff);
225
- background: var(--de-emergency-red, red);
226
- border-radius: .75rem;
288
+ background: var(--de-emergency-blue, red);
289
+ border-radius: var(--de-emergency-radius);
227
290
  justify-content: center;
228
291
  align-items: center;
229
292
  gap: .5rem;
@@ -236,7 +299,7 @@
236
299
  }
237
300
 
238
301
  .de-emergency-emergency-availability__recharge-nA5Hwa:hover {
239
- background: var(--de-emergency-red-hover, #ff3535);
302
+ background: var(--de-emergency-blue-hover, #ff3535);
240
303
  }
241
304
 
242
305
  .de-emergency-emergency-availability__recharge-nA5Hwa:active {
@@ -251,7 +314,7 @@
251
314
  .de-emergency-emergency-availability__card-nA5Hwa {
252
315
  background: var(--de-emergency-white, #fff);
253
316
  border: 1px solid var(--de-emergency-yellow-dark, #b38b00);
254
- border-radius: .75rem;
317
+ border-radius: var(--de-emergency-radius);
255
318
  flex-direction: column;
256
319
  display: flex;
257
320
  overflow: hidden;
@@ -277,7 +340,7 @@
277
340
  justify-content: space-between;
278
341
  align-items: center;
279
342
  gap: 1rem;
280
- padding: .75rem 1rem;
343
+ padding: 1rem;
281
344
  display: flex;
282
345
  }
283
346
 
@@ -305,7 +368,7 @@
305
368
  min-height: 2.75rem;
306
369
  color: var(--de-emergency-primary, #007bff);
307
370
  border: 1px solid var(--de-emergency-primary, #007bff);
308
- border-radius: .5rem;
371
+ border-radius: var(--de-emergency-radius);
309
372
  flex: none;
310
373
  justify-content: center;
311
374
  align-items: center;
@@ -329,6 +392,114 @@
329
392
  outline-offset: 2px;
330
393
  }
331
394
 
395
+ .de-emergency-emergency-pre-emergency-nA5Hwa {
396
+ flex-direction: column;
397
+ gap: 1.5rem;
398
+ width: min(100%, 22rem);
399
+ display: flex;
400
+ }
401
+
402
+ .de-emergency-emergency-pre-emergency__notice-nA5Hwa {
403
+ color: var(--de-emergency-text, #3d4461);
404
+ text-align: center;
405
+ background: var(--de-emergency-scaem-yellow, gold);
406
+ border-radius: var(--de-emergency-radius);
407
+ flex-direction: column;
408
+ align-items: center;
409
+ gap: .625rem;
410
+ padding: 1.25rem 1rem;
411
+ display: flex;
412
+ }
413
+
414
+ .de-emergency-emergency-pre-emergency__notice-icon-nA5Hwa {
415
+ width: 2.5rem;
416
+ height: 2.5rem;
417
+ }
418
+
419
+ .de-emergency-emergency-pre-emergency__notice-text-nA5Hwa {
420
+ margin: 0;
421
+ font-size: 1rem;
422
+ font-weight: 700;
423
+ line-height: 1.4;
424
+ }
425
+
426
+ .de-emergency-emergency-pre-emergency__form-nA5Hwa {
427
+ flex-direction: column;
428
+ gap: .5rem;
429
+ width: 100%;
430
+ display: flex;
431
+ }
432
+
433
+ .de-emergency-emergency-pre-emergency__label-nA5Hwa {
434
+ color: var(--de-emergency-text, #3d4461);
435
+ font-size: .875rem;
436
+ font-weight: 600;
437
+ }
438
+
439
+ .de-emergency-emergency-pre-emergency__phone-row-nA5Hwa {
440
+ align-items: stretch;
441
+ gap: .5rem;
442
+ width: 100%;
443
+ display: flex;
444
+ }
445
+
446
+ .de-emergency-emergency-pre-emergency__input-nA5Hwa {
447
+ box-sizing: border-box;
448
+ width: 100%;
449
+ min-height: 3.25rem;
450
+ color: var(--de-emergency-text, #3d4461);
451
+ background: var(--de-emergency-white, #fff);
452
+ border: 2px solid var(--de-emergency-scaem-primary, #3fabf3);
453
+ border-radius: .75rem;
454
+ padding: 1.125rem;
455
+ font-family: inherit;
456
+ font-size: .9rem;
457
+ transition: background-color .3s, border-color .3s, color .3s;
458
+ }
459
+
460
+ .de-emergency-emergency-pre-emergency__input-nA5Hwa::placeholder {
461
+ color: var(--de-emergency-gray-light, #929292);
462
+ }
463
+
464
+ .de-emergency-emergency-pre-emergency__input-nA5Hwa:hover:not(:disabled) {
465
+ background: var(--de-emergency-white-soft, #f7f7f7);
466
+ }
467
+
468
+ .de-emergency-emergency-pre-emergency__input-nA5Hwa:focus-visible {
469
+ outline: 1px solid var(--de-emergency-blue, #00adf6);
470
+ }
471
+
472
+ .de-emergency-emergency-pre-emergency__input--area-code-nA5Hwa {
473
+ width: 5.5rem;
474
+ color: var(--de-emergency-gray, #555);
475
+ text-align: center;
476
+ cursor: not-allowed;
477
+ background: var(--de-emergency-white-pearl, #f1f1f1);
478
+ flex: 0 0 5.5rem;
479
+ padding-inline: .75rem;
480
+ }
481
+
482
+ .de-emergency-emergency-pre-emergency__input--number-nA5Hwa {
483
+ flex: auto;
484
+ min-width: 0;
485
+ }
486
+
487
+ .de-emergency-emergency-pre-emergency__input--valid-nA5Hwa {
488
+ border-color: var(--de-emergency-success, #4cd03a);
489
+ }
490
+
491
+ .de-emergency-emergency-pre-emergency__input--invalid-nA5Hwa {
492
+ border-color: var(--de-emergency-error, #dc3545);
493
+ }
494
+
495
+ .de-emergency-emergency-pre-emergency__error-nA5Hwa {
496
+ color: var(--de-emergency-error, #dc3545);
497
+ text-align: start;
498
+ margin: 0;
499
+ font-size: .8rem;
500
+ line-height: 1.4;
501
+ }
502
+
332
503
  .de-emergency-emergency-pricing-nA5Hwa {
333
504
  flex-direction: column;
334
505
  gap: .75rem;
@@ -513,6 +684,22 @@
513
684
  background: var(--de-emergency-blue-border, #b8e6fc);
514
685
  }
515
686
 
687
+ p.de-emergency-emergency-pricing__package-footnote-nA5Hwa {
688
+ color: var(--de-emergency-text-secondary, #6b7080);
689
+ text-align: center;
690
+ border-radius: var(--de-emergency-radius);
691
+ background: #3d44610f;
692
+ margin: 0;
693
+ padding: .4375rem .625rem;
694
+ font-size: .6875rem;
695
+ line-height: 1.4;
696
+ }
697
+
698
+ .de-emergency-emergency-pricing__package--highlighted-nA5Hwa .de-emergency-emergency-pricing__package-footnote-nA5Hwa {
699
+ color: var(--de-emergency-blue-dark, #005f8f);
700
+ background: #005f8f14;
701
+ }
702
+
516
703
  .de-emergency-emergency-pricing__select-nA5Hwa {
517
704
  min-height: 2.75rem;
518
705
  color: var(--de-emergency-text, #3d4461);
@@ -551,14 +738,6 @@
551
738
  background: var(--de-emergency-blue-hover, #29bfff);
552
739
  }
553
740
 
554
- .de-emergency-emergency-pricing__footnote-nA5Hwa {
555
- color: var(--de-emergency-text-secondary, #6b7080);
556
- text-align: center;
557
- margin: 0;
558
- font-size: .6875rem;
559
- line-height: 1.4;
560
- }
561
-
562
741
  .de-emergency-emergency-screen__placeholder-nA5Hwa {
563
742
  justify-content: center;
564
743
  align-items: center;
@@ -592,20 +771,29 @@
592
771
 
593
772
  .de-emergency-emergency-panel__footer-nA5Hwa {
594
773
  background: var(--de-emergency-white-soft, #f7f7f7);
595
- border-radius: .5rem .5rem 0 0;
774
+ border-radius: var(--de-emergency-radius) var(--de-emergency-radius) 0 0;
596
775
  grid-row: 3;
597
776
  justify-content: center;
598
777
  align-items: center;
599
778
  gap: 1rem;
600
779
  min-height: 6rem;
601
- padding: 1.25rem;
780
+ padding: .5rem;
602
781
  display: flex;
603
782
  }
604
783
 
784
+ .de-emergency-emergency-panel__footer--single-nA5Hwa {
785
+ padding: 1rem;
786
+ }
787
+
788
+ .de-emergency-emergency-panel__footer--single-nA5Hwa .de-emergency-emergency-panel__button-nA5Hwa {
789
+ width: min(100%, 22rem);
790
+ min-height: 4.875rem;
791
+ }
792
+
605
793
  .de-emergency-emergency-panel__button-nA5Hwa {
606
794
  text-transform: uppercase;
607
795
  border: 1px solid var(--de-emergency-gray-medium, #5555);
608
- border-radius: .75rem;
796
+ border-radius: var(--de-emergency-radius);
609
797
  flex-direction: column-reverse;
610
798
  justify-content: center;
611
799
  align-items: center;
@@ -681,7 +869,7 @@
681
869
  }
682
870
 
683
871
  .de-emergency-emergency-status-panel__title-nA5Hwa {
684
- color: var(--de-emergency-primary, #007bff);
872
+ color: var(--de-emergency-text, #007bff);
685
873
  flex: 1;
686
874
  margin: 0;
687
875
  font-size: clamp(1rem, 4.5vw, 1.5rem);
@@ -696,16 +884,16 @@
696
884
  }
697
885
 
698
886
  .de-emergency-emergency-status__header-nA5Hwa {
699
- background: var(--de-emergency-primary, #007bff);
700
- border-radius: .5rem;
887
+ background: var(--de-emergency-scaem-fourth, #007bff);
888
+ border-radius: var(--de-emergency-radius);
701
889
  grid-template-columns: 1fr .5fr .5fr .5fr;
702
890
  align-items: center;
703
891
  padding: .5rem 1rem;
704
- font-weight: 500;
892
+ font-weight: 600;
705
893
  display: grid;
706
894
 
707
895
  & .de-emergency-emergency-status__cell-text-nA5Hwa {
708
- color: var(--de-emergency-primary-foreground, #3d4461);
896
+ color: var(--de-emergency-scaem-secondary, #3d4461);
709
897
  }
710
898
  }
711
899
 
@@ -716,15 +904,15 @@
716
904
  }
717
905
 
718
906
  .de-emergency-emergency-status__row-container-nA5Hwa {
719
- border-radius: var(--de-emergency-radius, .5rem);
720
- outline: 1px dashed var(--de-emergency-gray-medium, #5555);
907
+ border-radius: var(--de-emergency-radius);
908
+ border: 1px dashed var(--de-emergency-gray-medium, #5555);
721
909
  flex-direction: column;
722
910
  display: flex;
723
911
  }
724
912
 
725
913
  .de-emergency-emergency-status__row-nA5Hwa {
726
914
  background: var(--de-emergency-white, #fff);
727
- border-radius: .5rem;
915
+ border-radius: var(--de-emergency-radius);
728
916
  grid-template-columns: 1fr .5fr .5fr .5fr;
729
917
  align-items: center;
730
918
  padding: .5rem;
@@ -800,7 +988,7 @@
800
988
  color: var(--de-emergency-on-red, #fff);
801
989
  white-space: nowrap;
802
990
  background: var(--de-emergency-primary, #007bff);
803
- border-radius: .5rem;
991
+ border-radius: var(--de-emergency-radius);
804
992
  align-items: center;
805
993
  gap: .5rem;
806
994
  padding: .5rem;
@@ -837,7 +1025,7 @@
837
1025
  }
838
1026
 
839
1027
  .de-emergency-emergency-status__loading-nA5Hwa {
840
- border-radius: .5rem;
1028
+ border-radius: var(--de-emergency-radius);
841
1029
  flex-direction: column;
842
1030
  justify-content: center;
843
1031
  align-self: center;
@@ -864,10 +1052,10 @@
864
1052
 
865
1053
  .de-emergency-emergency-status__abort-btn-nA5Hwa {
866
1054
  width: min(100%, 24rem);
867
- height: 3.5rem;
1055
+ height: 100%;
868
1056
  color: var(--de-emergency-on-red, #fff);
869
1057
  background: var(--de-emergency-red, red);
870
- border-radius: .5rem;
1058
+ border-radius: var(--de-emergency-radius);
871
1059
  flex-direction: row-reverse;
872
1060
  justify-content: center;
873
1061
  align-items: center;
@@ -915,7 +1103,7 @@
915
1103
  .de-emergency-emergency-feedback__dismiss-nA5Hwa {
916
1104
  color: var(--de-emergency-on-red, #fff);
917
1105
  background: var(--de-emergency-primary, #007bff);
918
- border-radius: .5rem;
1106
+ border-radius: var(--de-emergency-radius);
919
1107
  padding: .75rem 1.5rem;
920
1108
  font-weight: 600;
921
1109
  }
@@ -1040,7 +1228,7 @@
1040
1228
 
1041
1229
  .de-emergency-emergency-confirmation__card-nA5Hwa {
1042
1230
  background: var(--de-emergency-white, #fff);
1043
- border-radius: var(--de-emergency-radius, .5rem);
1231
+ border-radius: var(--de-emergency-radius);
1044
1232
  border: 1px solid #0000002d;
1045
1233
  flex-direction: column;
1046
1234
  width: min(100%, 31.25rem);
@@ -1160,8 +1348,14 @@
1160
1348
  "Helvetica Neue",
1161
1349
  Arial,
1162
1350
  sans-serif);
1351
+ background: radial-gradient(circle at 20% 20%,
1352
+ color-mix(in srgb, var(--de-emergency-red, red) 25%, transparent),
1353
+ transparent 45%),
1354
+ radial-gradient(circle at 80% 80%,
1355
+ color-mix(in srgb, var(--de-emergency-blue, #00adf6) 20%, transparent),
1356
+ transparent 50%),
1357
+ color-mix(in srgb, var(--de-emergency-black, #050505) 90%, transparent);
1163
1358
  backdrop-filter: blur(8px);
1164
- background: radial-gradient(circle at 20% 20%, #ff980040, #0000 45%), radial-gradient(circle at 80% 80%, #f57c0033, #0000 50%), #0f0f0fe6;
1165
1359
  justify-content: center;
1166
1360
  align-items: center;
1167
1361
  padding: 1rem;
@@ -1181,35 +1375,40 @@
1181
1375
  }
1182
1376
 
1183
1377
  .de-emergency-emergency-resume-notification-card-nA5Hwa {
1184
- color: #1a1a1a;
1378
+ width: min(100%, 420px);
1379
+ max-width: 420px;
1380
+ color: var(--de-emergency-text, #3d4461);
1185
1381
  text-align: center;
1186
- background: linear-gradient(145deg, #fff, #fafafa);
1187
- border: .1rem solid #ff980059;
1188
- border-radius: .5rem;
1382
+ background: var(--de-emergency-white, #fff);
1383
+ border: .1rem solid var(--de-emergency-border, #e3e5ea);
1384
+ border-radius: var(--de-emergency-radius);
1385
+ box-shadow: 0 25px 60px
1386
+ color-mix(in srgb, var(--de-emergency-black, #050505) 45%, transparent),
1387
+ 0 0 0 1px
1388
+ color-mix(in srgb, var(--de-emergency-white, #fff) 60%, transparent) inset;
1189
1389
  flex-direction: column;
1190
1390
  gap: 1rem;
1191
- width: min(100%, 420px);
1192
- max-width: 420px;
1193
1391
  margin: 1rem;
1194
1392
  padding: 2rem;
1195
1393
  animation: .5s ease-out de-emergency-de-emergency-slide-up-nA5Hwa;
1196
1394
  display: flex;
1197
1395
  position: relative;
1198
- box-shadow: 0 25px 60px #00000073, inset 0 0 0 1px #fff9;
1199
1396
  }
1200
1397
 
1201
1398
  .de-emergency-emergency-resume-notification-card-nA5Hwa:before {
1202
1399
  z-index: -1;
1203
1400
  content: "";
1401
+ background: linear-gradient(135deg,
1402
+ var(--de-emergency-red, red),
1403
+ var(--de-emergency-red-pressed, #e33327));
1204
1404
  opacity: .1;
1205
- background: linear-gradient(135deg, #ff9800, #f57c00);
1206
1405
  border-radius: 22px;
1207
1406
  position: absolute;
1208
1407
  inset: -1px;
1209
1408
  }
1210
1409
 
1211
1410
  .de-emergency-emergency-resume-notification-icon-nA5Hwa {
1212
- color: #ff9800;
1411
+ color: var(--de-emergency-red, red);
1213
1412
  font-size: 4rem;
1214
1413
  line-height: 1;
1215
1414
  animation: 2s infinite de-emergency-de-emergency-pulse-nA5Hwa;
@@ -1223,12 +1422,12 @@
1223
1422
 
1224
1423
  .de-emergency-emergency-resume-notification-title-nA5Hwa {
1225
1424
  font-size: var(--de-emergency-font-title, clamp(1.5rem, 2vw, 1.75rem));
1226
- color: #f57c00;
1425
+ color: var(--de-emergency-red, red);
1227
1426
  font-weight: 700;
1228
1427
  }
1229
1428
 
1230
1429
  .de-emergency-emergency-resume-notification-message-nA5Hwa {
1231
- font-size: var(--de-emergency-font-medium, clamp(1rem, 2vw, 1.125rem));
1430
+ font-size: var(--de-emergency-font-small, clamp(.85rem, 2vw, 1.125rem));
1232
1431
  color: var(--de-emergency-text, #3d4461);
1233
1432
  text-wrap: pretty;
1234
1433
  margin-bottom: 1rem;
@@ -1237,39 +1436,53 @@
1237
1436
 
1238
1437
  .de-emergency-emergency-resume-notification-button-nA5Hwa {
1239
1438
  min-width: 180px;
1240
- font-size: var(--de-emergency-font-small, clamp(.875rem, 2vw, .9rem));
1241
- color: #fff;
1242
- background: linear-gradient(135deg, #ff9800, #f57c00);
1243
- border-radius: .5rem;
1439
+ min-height: 3rem;
1440
+ font-size: var(--de-emergency-font-small, clamp(.875rem, 1.5vw, 1rem));
1441
+ color: var(--de-emergency-on-red, #fff);
1442
+ background: var(--de-emergency-red, red);
1443
+ border-radius: var(--de-emergency-radius);
1444
+ box-shadow: 0 2px 8px
1445
+ color-mix(in srgb, var(--de-emergency-black, #050505) 12%, transparent);
1446
+ border: 1px solid #0000;
1244
1447
  justify-content: center;
1245
1448
  align-items: center;
1246
1449
  gap: .5rem;
1247
- padding: 1rem;
1450
+ padding: .5rem 1rem;
1248
1451
  font-weight: 600;
1249
- transition: box-shadow .2s ease-out, transform .2s ease-out;
1452
+ transition: background-color .125s ease-out, box-shadow .125s ease-out, transform .125s ease-out;
1250
1453
  display: flex;
1251
1454
  position: relative;
1252
1455
  overflow: hidden;
1253
- box-shadow: 0 8px 20px #ff980059;
1254
1456
  }
1255
1457
 
1256
- .de-emergency-emergency-resume-notification-button-nA5Hwa:hover {
1257
- transform: translateY(-2px);
1258
- box-shadow: 0 12px 28px #ff980073;
1458
+ .de-emergency-emergency-resume-notification-button-nA5Hwa:hover:not(:disabled) {
1459
+ background: var(--de-emergency-red-hover, #ff3535);
1460
+ box-shadow: 0 6px 18px
1461
+ color-mix(in srgb, var(--de-emergency-red, red) 30%, transparent);
1462
+ transform: translateY(-1px);
1259
1463
  }
1260
1464
 
1261
- .de-emergency-emergency-resume-notification-button-nA5Hwa:active {
1262
- transform: translateY(0);
1465
+ .de-emergency-emergency-resume-notification-button-nA5Hwa:active:not(:disabled) {
1466
+ background: var(--de-emergency-red-pressed, #e33327);
1467
+ transform: scale(.95);
1468
+ }
1469
+
1470
+ .de-emergency-emergency-resume-notification-button-nA5Hwa:disabled {
1471
+ cursor: not-allowed;
1472
+ background: var(--de-emergency-gray, #555);
1263
1473
  }
1264
1474
 
1265
1475
  .de-emergency-emergency-resume-notification-button-nA5Hwa:focus-visible {
1266
- outline-offset: 3px;
1267
- outline: 2px solid #fff;
1476
+ outline: 2px solid var(--de-emergency-text, #3d4461);
1477
+ outline-offset: 2px;
1268
1478
  }
1269
1479
 
1270
1480
  .de-emergency-emergency-resume-notification-button-nA5Hwa:before {
1271
1481
  content: "";
1272
- background: linear-gradient(90deg, #0000, #ffffff59, #0000);
1482
+ background: linear-gradient(90deg,
1483
+ transparent,
1484
+ color-mix(in srgb, var(--de-emergency-white, #fff) 35%, transparent),
1485
+ transparent);
1273
1486
  width: 100%;
1274
1487
  height: 100%;
1275
1488
  transition: left .6s ease-out;
@@ -1332,7 +1545,7 @@
1332
1545
  @media (width <= 480px) {
1333
1546
  .de-emergency-emergency-panel__footer-nA5Hwa {
1334
1547
  gap: .5rem;
1335
- padding: 1rem;
1548
+ padding: .5rem;
1336
1549
  }
1337
1550
 
1338
1551
  .de-emergency-emergency-panel__button-nA5Hwa {
@@ -1346,7 +1559,7 @@
1346
1559
  }
1347
1560
 
1348
1561
  @media (prefers-reduced-motion: reduce) {
1349
- .de-emergency-emergency-panel-nA5Hwa, .de-emergency-emergency-panel__button-nA5Hwa, .de-emergency-emergency-panel__close-button-nA5Hwa, .de-emergency-emergency-status-panel__refresh-btn-nA5Hwa, .de-emergency-emergency-status__abort-btn-nA5Hwa, .de-emergency-emergency-availability__recharge-nA5Hwa, .de-emergency-emergency-availability__details-nA5Hwa, .de-emergency-emergency-pricing__package-nA5Hwa, .de-emergency-emergency-pricing__select-nA5Hwa {
1562
+ .de-emergency-emergency-panel-nA5Hwa, .de-emergency-emergency-panel__button-nA5Hwa, .de-emergency-emergency-panel__close-button-nA5Hwa, .de-emergency-emergency-status-panel__refresh-btn-nA5Hwa, .de-emergency-emergency-status__abort-btn-nA5Hwa, .de-emergency-emergency-availability__recharge-nA5Hwa, .de-emergency-emergency-availability__details-nA5Hwa, .de-emergency-emergency-pricing__package-nA5Hwa, .de-emergency-emergency-pricing__select-nA5Hwa, .de-emergency-emergency-pre-emergency__input-nA5Hwa {
1350
1563
  transition: none;
1351
1564
  }
1352
1565
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataemergencia/emergency",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Framework-agnostic emergency client for DataEmergencia, with a mountable React panel and an IIFE build.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -58,13 +58,13 @@
58
58
  "scripts": {
59
59
  "dev": "pnpm run example:vanilla",
60
60
  "build": "vp pack && node scripts/inject-iife-styles.mjs",
61
- "typecheck": "vp check --no-fmt --no-lint",
61
+ "typecheck": "tsc --noEmit",
62
62
  "lint": "vp lint",
63
63
  "lint:fix": "vp lint --fix",
64
64
  "fmt": "vp fmt",
65
65
  "fmt:check": "vp fmt --check",
66
- "check": "vp check",
67
- "check:fix": "vp check --fix",
66
+ "check": "vp fmt --check && vp lint && tsc --noEmit",
67
+ "check:fix": "vp fmt && vp lint --fix && tsc --noEmit",
68
68
  "test": "vp test run",
69
69
  "test:watch": "vp test watch",
70
70
  "pack": "npm pack --dry-run",