@safestrong/ppa-component-library 1.4.0 → 1.4.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.
- package/dist/styles.css +254 -111
- package/package.json +5 -4
package/dist/styles.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.
|
|
1
|
+
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer theme, base, components, utilities;
|
|
4
4
|
@layer theme {
|
|
@@ -27,7 +27,9 @@
|
|
|
27
27
|
html, :host {
|
|
28
28
|
line-height: 1.5;
|
|
29
29
|
-webkit-text-size-adjust: 100%;
|
|
30
|
-
tab-size: 4;
|
|
30
|
+
-moz-tab-size: 4;
|
|
31
|
+
-o-tab-size: 4;
|
|
32
|
+
tab-size: 4;
|
|
31
33
|
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
32
34
|
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
33
35
|
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
@@ -119,10 +121,19 @@
|
|
|
119
121
|
::file-selector-button {
|
|
120
122
|
margin-inline-end: 4px;
|
|
121
123
|
}
|
|
124
|
+
::-moz-placeholder {
|
|
125
|
+
opacity: 1;
|
|
126
|
+
}
|
|
122
127
|
::placeholder {
|
|
123
128
|
opacity: 1;
|
|
124
129
|
}
|
|
125
130
|
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
131
|
+
::-moz-placeholder {
|
|
132
|
+
color: currentcolor;
|
|
133
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
134
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
126
137
|
::placeholder {
|
|
127
138
|
color: currentcolor;
|
|
128
139
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -156,7 +167,9 @@
|
|
|
156
167
|
box-shadow: none;
|
|
157
168
|
}
|
|
158
169
|
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
|
159
|
-
appearance: button;
|
|
170
|
+
-webkit-appearance: button;
|
|
171
|
+
-moz-appearance: button;
|
|
172
|
+
appearance: button;
|
|
160
173
|
}
|
|
161
174
|
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
162
175
|
height: auto;
|
|
@@ -181,8 +194,8 @@
|
|
|
181
194
|
.top-\[-0\.2rem\] {
|
|
182
195
|
top: -0.2rem;
|
|
183
196
|
}
|
|
184
|
-
.top-\[
|
|
185
|
-
top:
|
|
197
|
+
.top-\[9rem\] {
|
|
198
|
+
top: 9rem;
|
|
186
199
|
}
|
|
187
200
|
.top-full {
|
|
188
201
|
top: 100%;
|
|
@@ -190,48 +203,42 @@
|
|
|
190
203
|
.right-0 {
|
|
191
204
|
right: calc(var(--spacing) * 0);
|
|
192
205
|
}
|
|
193
|
-
.right-\[2rem\] {
|
|
194
|
-
right: 2rem;
|
|
195
|
-
}
|
|
196
206
|
.right-full {
|
|
197
207
|
right: 100%;
|
|
198
208
|
}
|
|
199
209
|
.bottom-full {
|
|
200
210
|
bottom: 100%;
|
|
201
211
|
}
|
|
202
|
-
.left
|
|
203
|
-
left:
|
|
212
|
+
.left-\[0rem\] {
|
|
213
|
+
left: 0rem;
|
|
204
214
|
}
|
|
205
|
-
.
|
|
206
|
-
|
|
215
|
+
.left-\[30rem\] {
|
|
216
|
+
left: 30rem;
|
|
207
217
|
}
|
|
208
|
-
.
|
|
209
|
-
|
|
218
|
+
.left-full {
|
|
219
|
+
left: 100%;
|
|
210
220
|
}
|
|
211
221
|
.mt-\[1px\] {
|
|
212
222
|
margin-top: 1px;
|
|
213
223
|
}
|
|
214
|
-
.mt-\[1rem\] {
|
|
215
|
-
margin-top: 1rem;
|
|
216
|
-
}
|
|
217
|
-
.mt-\[2\.5rem\] {
|
|
218
|
-
margin-top: 2.5rem;
|
|
219
|
-
}
|
|
220
|
-
.mt-\[2rem\] {
|
|
221
|
-
margin-top: 2rem;
|
|
222
|
-
}
|
|
223
|
-
.mt-\[3rem\] {
|
|
224
|
-
margin-top: 3rem;
|
|
225
|
-
}
|
|
226
224
|
.mr-2 {
|
|
227
225
|
margin-right: calc(var(--spacing) * 2);
|
|
228
226
|
}
|
|
229
227
|
.mr-\[0\.3rem\] {
|
|
230
228
|
margin-right: 0.3rem;
|
|
231
229
|
}
|
|
230
|
+
.mb-\[0\.5rem\] {
|
|
231
|
+
margin-bottom: 0.5rem;
|
|
232
|
+
}
|
|
233
|
+
.mb-\[1rem\] {
|
|
234
|
+
margin-bottom: 1rem;
|
|
235
|
+
}
|
|
232
236
|
.ml-\[5rem\] {
|
|
233
237
|
margin-left: 5rem;
|
|
234
238
|
}
|
|
239
|
+
.\!block {
|
|
240
|
+
display: block !important;
|
|
241
|
+
}
|
|
235
242
|
.flex {
|
|
236
243
|
display: flex;
|
|
237
244
|
}
|
|
@@ -241,25 +248,38 @@
|
|
|
241
248
|
.inline-block {
|
|
242
249
|
display: inline-block;
|
|
243
250
|
}
|
|
251
|
+
.h-\[1\.6rem\] {
|
|
252
|
+
height: 1.6rem;
|
|
253
|
+
}
|
|
244
254
|
.h-\[3rem\] {
|
|
245
255
|
height: 3rem;
|
|
246
256
|
}
|
|
247
257
|
.h-\[10rem\] {
|
|
248
258
|
height: 10rem;
|
|
249
259
|
}
|
|
260
|
+
.h-\[17rem\] {
|
|
261
|
+
height: 17rem;
|
|
262
|
+
}
|
|
250
263
|
.\!w-\[30rem\] {
|
|
251
264
|
width: 30rem !important;
|
|
252
265
|
}
|
|
266
|
+
.\!w-\[250px\] {
|
|
267
|
+
width: 250px !important;
|
|
268
|
+
}
|
|
253
269
|
.w-\[2rem\] {
|
|
254
270
|
width: 2rem;
|
|
255
271
|
}
|
|
256
|
-
.w-\[
|
|
257
|
-
width:
|
|
272
|
+
.w-\[3rem\] {
|
|
273
|
+
width: 3rem;
|
|
258
274
|
}
|
|
259
275
|
.w-\[30rem\] {
|
|
260
276
|
width: 30rem;
|
|
261
277
|
}
|
|
278
|
+
.w-\[900px\] {
|
|
279
|
+
width: 900px;
|
|
280
|
+
}
|
|
262
281
|
.w-\[max-content\] {
|
|
282
|
+
width: -moz-max-content;
|
|
263
283
|
width: max-content;
|
|
264
284
|
}
|
|
265
285
|
.w-full {
|
|
@@ -315,20 +335,40 @@
|
|
|
315
335
|
.overflow-hidden {
|
|
316
336
|
overflow: hidden;
|
|
317
337
|
}
|
|
338
|
+
.\!rounded-\[0\] {
|
|
339
|
+
border-radius: 0 !important;
|
|
340
|
+
}
|
|
341
|
+
.rounded-\[0\.4rem\] {
|
|
342
|
+
border-radius: 0.4rem;
|
|
343
|
+
}
|
|
318
344
|
.border {
|
|
319
345
|
border-style: var(--tw-border-style);
|
|
320
346
|
border-width: 1px;
|
|
321
347
|
}
|
|
348
|
+
.border-\[0\] {
|
|
349
|
+
border-style: var(--tw-border-style);
|
|
350
|
+
border-width: 0;
|
|
351
|
+
}
|
|
322
352
|
.border-t {
|
|
323
353
|
border-top-style: var(--tw-border-style);
|
|
324
354
|
border-top-width: 1px;
|
|
325
355
|
}
|
|
356
|
+
.border-l {
|
|
357
|
+
border-left-style: var(--tw-border-style);
|
|
358
|
+
border-left-width: 1px;
|
|
359
|
+
}
|
|
326
360
|
.border-t-\[var\(--color-border\)\] {
|
|
327
361
|
border-top-color: var(--color-border);
|
|
328
362
|
}
|
|
363
|
+
.border-l-\[var\(--color-border\)\] {
|
|
364
|
+
border-left-color: var(--color-border);
|
|
365
|
+
}
|
|
329
366
|
.bg-\[var\(--color-background-icon\)\] {
|
|
330
367
|
background-color: var(--color-background-icon);
|
|
331
368
|
}
|
|
369
|
+
.bg-\[var\(--color-primary-soft\)\] {
|
|
370
|
+
background-color: var(--color-primary-soft);
|
|
371
|
+
}
|
|
332
372
|
.p-\[0\.5rem\] {
|
|
333
373
|
padding: 0.5rem;
|
|
334
374
|
}
|
|
@@ -341,18 +381,30 @@
|
|
|
341
381
|
.p-\[0\.75rem\] {
|
|
342
382
|
padding: 0.75rem;
|
|
343
383
|
}
|
|
384
|
+
.p-\[1\.5rem\] {
|
|
385
|
+
padding: 1.5rem;
|
|
386
|
+
}
|
|
344
387
|
.px-\[0\.7rem\] {
|
|
345
388
|
padding-inline: 0.7rem;
|
|
346
389
|
}
|
|
390
|
+
.px-\[1\.2rem\] {
|
|
391
|
+
padding-inline: 1.2rem;
|
|
392
|
+
}
|
|
347
393
|
.px-\[1rem\] {
|
|
348
394
|
padding-inline: 1rem;
|
|
349
395
|
}
|
|
350
396
|
.py-\[0\.84rem\] {
|
|
351
397
|
padding-block: 0.84rem;
|
|
352
398
|
}
|
|
399
|
+
.py-\[1rem\] {
|
|
400
|
+
padding-block: 1rem;
|
|
401
|
+
}
|
|
353
402
|
.pr-\[0\.7rem\] {
|
|
354
403
|
padding-right: 0.7rem;
|
|
355
404
|
}
|
|
405
|
+
.pb-\[1rem\] {
|
|
406
|
+
padding-bottom: 1rem;
|
|
407
|
+
}
|
|
356
408
|
.\!pl-\[0\.3rem\] {
|
|
357
409
|
padding-left: 0.3rem !important;
|
|
358
410
|
}
|
|
@@ -362,10 +414,20 @@
|
|
|
362
414
|
.text-\[1\.2rem\] {
|
|
363
415
|
font-size: 1.2rem;
|
|
364
416
|
}
|
|
417
|
+
.text-\[1\.3rem\] {
|
|
418
|
+
font-size: 1.3rem;
|
|
419
|
+
}
|
|
420
|
+
.text-\[1\.4rem\] {
|
|
421
|
+
font-size: 1.4rem;
|
|
422
|
+
}
|
|
365
423
|
.leading-\[1\] {
|
|
366
424
|
--tw-leading: 1;
|
|
367
425
|
line-height: 1;
|
|
368
426
|
}
|
|
427
|
+
.font-semibold {
|
|
428
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
429
|
+
font-weight: var(--font-weight-semibold);
|
|
430
|
+
}
|
|
369
431
|
.text-\[var\(--color-danger\)\] {
|
|
370
432
|
color: var(--color-danger);
|
|
371
433
|
}
|
|
@@ -375,15 +437,33 @@
|
|
|
375
437
|
.text-\[var\(--color-primary\)\] {
|
|
376
438
|
color: var(--color-primary);
|
|
377
439
|
}
|
|
440
|
+
.text-\[var\(--color-text-secondary\)\]\/70 {
|
|
441
|
+
color: var(--color-text-secondary);
|
|
442
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
443
|
+
color: color-mix(in oklab, var(--color-text-secondary) 70%, transparent);
|
|
444
|
+
}
|
|
445
|
+
}
|
|
378
446
|
.opacity-\[0\] {
|
|
379
447
|
opacity: 0;
|
|
380
448
|
}
|
|
449
|
+
.shadow-xs {
|
|
450
|
+
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
|
451
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
452
|
+
}
|
|
453
|
+
.transition-all {
|
|
454
|
+
transition-property: all;
|
|
455
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
456
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
457
|
+
}
|
|
381
458
|
.group-focus-within\:text-\[var\(--color-primary\)\] {
|
|
382
459
|
&:is(:where(.group):focus-within *) {
|
|
383
460
|
color: var(--color-primary);
|
|
384
461
|
}
|
|
385
462
|
}
|
|
386
463
|
.placeholder\:text-\[var\(--color-text-primary\)\] {
|
|
464
|
+
&::-moz-placeholder {
|
|
465
|
+
color: var(--color-text-primary);
|
|
466
|
+
}
|
|
387
467
|
&::placeholder {
|
|
388
468
|
color: var(--color-text-primary);
|
|
389
469
|
}
|
|
@@ -432,10 +512,23 @@
|
|
|
432
512
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
433
513
|
}
|
|
434
514
|
}
|
|
435
|
-
.hover\:bg-\[var\(--color-border\)\] {
|
|
515
|
+
.hover\:bg-\[var\(--color-border\)\]\/40 {
|
|
516
|
+
&:hover {
|
|
517
|
+
@media (hover: hover) {
|
|
518
|
+
background-color: var(--color-border);
|
|
519
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
520
|
+
background-color: color-mix(in oklab, var(--color-border) 40%, transparent);
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
.hover\:bg-\[var\(--color-border\)\]\/50 {
|
|
436
526
|
&:hover {
|
|
437
527
|
@media (hover: hover) {
|
|
438
528
|
background-color: var(--color-border);
|
|
529
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
530
|
+
background-color: color-mix(in oklab, var(--color-border) 50%, transparent);
|
|
531
|
+
}
|
|
439
532
|
}
|
|
440
533
|
}
|
|
441
534
|
}
|
|
@@ -507,12 +600,13 @@ html {
|
|
|
507
600
|
@layer components {
|
|
508
601
|
.btn__primary {
|
|
509
602
|
display: flex;
|
|
603
|
+
min-width: -moz-max-content;
|
|
510
604
|
min-width: max-content;
|
|
511
605
|
cursor: pointer;
|
|
512
606
|
align-items: center;
|
|
513
607
|
justify-content: center;
|
|
514
608
|
gap: 0.6rem;
|
|
515
|
-
border-radius: 0.
|
|
609
|
+
border-radius: 0.5rem;
|
|
516
610
|
border-style: var(--tw-border-style);
|
|
517
611
|
border-width: 1px;
|
|
518
612
|
border-color: var(--color-primary);
|
|
@@ -520,7 +614,6 @@ html {
|
|
|
520
614
|
--tw-gradient-position: to right in oklab;
|
|
521
615
|
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
522
616
|
--tw-gradient-from: var(--color-primary);
|
|
523
|
-
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
524
617
|
--tw-gradient-to: var(--color-primary-gradient);
|
|
525
618
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
526
619
|
padding: 0.84rem;
|
|
@@ -551,7 +644,6 @@ html {
|
|
|
551
644
|
.btn__secondary {
|
|
552
645
|
border-color: transparent;
|
|
553
646
|
--tw-gradient-from: var(--color-primary-soft);
|
|
554
|
-
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
555
647
|
--tw-gradient-to: var(--color-primary-soft);
|
|
556
648
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
557
649
|
color: var(--color-primary);
|
|
@@ -573,11 +665,45 @@ html {
|
|
|
573
665
|
}
|
|
574
666
|
}
|
|
575
667
|
}
|
|
668
|
+
.icon__button {
|
|
669
|
+
display: flex;
|
|
670
|
+
height: 2.5rem;
|
|
671
|
+
width: 2.5rem;
|
|
672
|
+
cursor: pointer;
|
|
673
|
+
align-items: center;
|
|
674
|
+
justify-content: center;
|
|
675
|
+
border-radius: 0.6rem;
|
|
676
|
+
border-style: var(--tw-border-style);
|
|
677
|
+
border-width: 1px;
|
|
678
|
+
border-color: var(--color-border);
|
|
679
|
+
background-color: var(--color-bg-surface);
|
|
680
|
+
font-size: 1rem;
|
|
681
|
+
color: var(--color-icon-input);
|
|
682
|
+
&:hover {
|
|
683
|
+
@media (hover: hover) {
|
|
684
|
+
background-color: var(--color-background-icon);
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
.icon__button_group {
|
|
689
|
+
display: flex;
|
|
690
|
+
:where(& > :not(:last-child)) {
|
|
691
|
+
--tw-divide-x-reverse: 0;
|
|
692
|
+
border-inline-style: var(--tw-border-style);
|
|
693
|
+
border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
|
|
694
|
+
border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
|
|
695
|
+
}
|
|
696
|
+
overflow: hidden;
|
|
697
|
+
border-radius: 0.5rem;
|
|
698
|
+
border-style: var(--tw-border-style);
|
|
699
|
+
border-width: 1px;
|
|
700
|
+
border-color: var(--color-border);
|
|
701
|
+
}
|
|
576
702
|
.text-input__wrapper {
|
|
577
703
|
display: flex;
|
|
578
704
|
width: 100%;
|
|
579
705
|
align-items: center;
|
|
580
|
-
border-radius: 0.
|
|
706
|
+
border-radius: 0.5rem;
|
|
581
707
|
border-style: var(--tw-border-style);
|
|
582
708
|
border-width: 1px;
|
|
583
709
|
border-color: var(--color-border);
|
|
@@ -606,8 +732,8 @@ html {
|
|
|
606
732
|
}
|
|
607
733
|
.slider__wrapper {
|
|
608
734
|
position: relative;
|
|
609
|
-
height:
|
|
610
|
-
width:
|
|
735
|
+
height: 1.6rem;
|
|
736
|
+
width: 3rem;
|
|
611
737
|
cursor: pointer;
|
|
612
738
|
border-radius: 2rem;
|
|
613
739
|
background-color: var(--color-icon-input);
|
|
@@ -619,24 +745,22 @@ html {
|
|
|
619
745
|
position: absolute;
|
|
620
746
|
top: calc(var(--spacing) * 0);
|
|
621
747
|
display: flex;
|
|
622
|
-
height: 1.
|
|
623
|
-
width: 1.
|
|
624
|
-
--tw-translate-
|
|
748
|
+
height: 1.3rem;
|
|
749
|
+
width: 1.3rem;
|
|
750
|
+
--tw-translate-x: 0.2rem;
|
|
751
|
+
--tw-translate-y: 0.15rem;
|
|
625
752
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
626
753
|
cursor: pointer;
|
|
627
754
|
align-items: center;
|
|
628
755
|
justify-content: center;
|
|
629
|
-
border-radius:
|
|
630
|
-
border-style: var(--tw-border-style);
|
|
631
|
-
border-width: 1.5px;
|
|
632
|
-
border-color: var(--color-border);
|
|
756
|
+
border-radius: 50%;
|
|
633
757
|
background-color: var(--color-bg-surface);
|
|
634
758
|
color: var(--color-border);
|
|
635
759
|
transition-property: all;
|
|
636
760
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
637
761
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
638
762
|
&:is(:where(.peer):checked ~ *) {
|
|
639
|
-
--tw-translate-x: 1.
|
|
763
|
+
--tw-translate-x: 1.5rem;
|
|
640
764
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
641
765
|
}
|
|
642
766
|
&:is(:where(.peer):checked ~ *) {
|
|
@@ -721,9 +845,6 @@ html {
|
|
|
721
845
|
line-height: 1.3;
|
|
722
846
|
color: var(--color-bg-surface);
|
|
723
847
|
opacity: 0.8;
|
|
724
|
-
transition-property: all;
|
|
725
|
-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
726
|
-
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
727
848
|
&:is(:where(.peer):hover ~ *) {
|
|
728
849
|
@media (hover: hover) {
|
|
729
850
|
visibility: visible;
|
|
@@ -751,11 +872,25 @@ html {
|
|
|
751
872
|
background-color: var(--color-text-primary);
|
|
752
873
|
}
|
|
753
874
|
&::after {
|
|
754
|
-
content: var(--tw-content);
|
|
755
875
|
--tw-content: '';
|
|
756
876
|
content: var(--tw-content);
|
|
757
877
|
}
|
|
758
878
|
}
|
|
879
|
+
.nav__wrapper {
|
|
880
|
+
display: flex;
|
|
881
|
+
width: -moz-max-content;
|
|
882
|
+
width: max-content;
|
|
883
|
+
gap: 0.2rem;
|
|
884
|
+
border-radius: 0.5rem;
|
|
885
|
+
border-style: var(--tw-border-style);
|
|
886
|
+
border-width: 1px;
|
|
887
|
+
border-color: var(--color-border);
|
|
888
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
889
|
+
border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
|
|
890
|
+
}
|
|
891
|
+
background-color: var(--color-bg-surface);
|
|
892
|
+
padding: 0.2rem;
|
|
893
|
+
}
|
|
759
894
|
.navtab__wrapper {
|
|
760
895
|
display: flex;
|
|
761
896
|
}
|
|
@@ -766,7 +901,7 @@ html {
|
|
|
766
901
|
border-bottom-style: var(--tw-border-style);
|
|
767
902
|
border-bottom-width: 3px;
|
|
768
903
|
border-bottom-color: transparent;
|
|
769
|
-
padding: 0.
|
|
904
|
+
padding: 0.7rem;
|
|
770
905
|
padding-inline: 1rem;
|
|
771
906
|
opacity: 0.5;
|
|
772
907
|
}
|
|
@@ -788,6 +923,7 @@ html {
|
|
|
788
923
|
right: 2rem;
|
|
789
924
|
bottom: 2rem;
|
|
790
925
|
z-index: 1000;
|
|
926
|
+
height: -moz-max-content;
|
|
791
927
|
height: max-content;
|
|
792
928
|
width: 23rem;
|
|
793
929
|
cursor: default;
|
|
@@ -870,7 +1006,8 @@ html {
|
|
|
870
1006
|
--tw-font-weight: var(--font-weight-semibold);
|
|
871
1007
|
font-weight: var(--font-weight-semibold);
|
|
872
1008
|
-webkit-user-select: none;
|
|
873
|
-
user-select: none;
|
|
1009
|
+
-moz-user-select: none;
|
|
1010
|
+
user-select: none;
|
|
874
1011
|
}
|
|
875
1012
|
.expandable__body {
|
|
876
1013
|
max-height: calc(var(--spacing) * 0);
|
|
@@ -1014,57 +1151,9 @@ html {
|
|
|
1014
1151
|
syntax: "*";
|
|
1015
1152
|
inherits: false;
|
|
1016
1153
|
}
|
|
1017
|
-
@property --tw-
|
|
1018
|
-
syntax: "*";
|
|
1019
|
-
initial-value: "";
|
|
1020
|
-
inherits: false;
|
|
1021
|
-
}
|
|
1022
|
-
@property --tw-gradient-position {
|
|
1023
|
-
syntax: "*";
|
|
1024
|
-
inherits: false;
|
|
1025
|
-
}
|
|
1026
|
-
@property --tw-gradient-from {
|
|
1027
|
-
syntax: "<color>";
|
|
1028
|
-
inherits: false;
|
|
1029
|
-
initial-value: #0000;
|
|
1030
|
-
}
|
|
1031
|
-
@property --tw-gradient-via {
|
|
1032
|
-
syntax: "<color>";
|
|
1033
|
-
inherits: false;
|
|
1034
|
-
initial-value: #0000;
|
|
1035
|
-
}
|
|
1036
|
-
@property --tw-gradient-to {
|
|
1037
|
-
syntax: "<color>";
|
|
1038
|
-
inherits: false;
|
|
1039
|
-
initial-value: #0000;
|
|
1040
|
-
}
|
|
1041
|
-
@property --tw-gradient-stops {
|
|
1042
|
-
syntax: "*";
|
|
1043
|
-
inherits: false;
|
|
1044
|
-
}
|
|
1045
|
-
@property --tw-gradient-via-stops {
|
|
1046
|
-
syntax: "*";
|
|
1047
|
-
inherits: false;
|
|
1048
|
-
}
|
|
1049
|
-
@property --tw-gradient-from-position {
|
|
1050
|
-
syntax: "<length-percentage>";
|
|
1051
|
-
inherits: false;
|
|
1052
|
-
initial-value: 0%;
|
|
1053
|
-
}
|
|
1054
|
-
@property --tw-gradient-via-position {
|
|
1055
|
-
syntax: "<length-percentage>";
|
|
1056
|
-
inherits: false;
|
|
1057
|
-
initial-value: 50%;
|
|
1058
|
-
}
|
|
1059
|
-
@property --tw-gradient-to-position {
|
|
1060
|
-
syntax: "<length-percentage>";
|
|
1061
|
-
inherits: false;
|
|
1062
|
-
initial-value: 100%;
|
|
1063
|
-
}
|
|
1064
|
-
@property --tw-outline-style {
|
|
1154
|
+
@property --tw-font-weight {
|
|
1065
1155
|
syntax: "*";
|
|
1066
1156
|
inherits: false;
|
|
1067
|
-
initial-value: solid;
|
|
1068
1157
|
}
|
|
1069
1158
|
@property --tw-shadow {
|
|
1070
1159
|
syntax: "*";
|
|
@@ -1131,9 +1220,62 @@ html {
|
|
|
1131
1220
|
inherits: false;
|
|
1132
1221
|
initial-value: 0 0 #0000;
|
|
1133
1222
|
}
|
|
1134
|
-
@property --tw-
|
|
1223
|
+
@property --tw-content {
|
|
1224
|
+
syntax: "*";
|
|
1225
|
+
initial-value: "";
|
|
1226
|
+
inherits: false;
|
|
1227
|
+
}
|
|
1228
|
+
@property --tw-gradient-position {
|
|
1229
|
+
syntax: "*";
|
|
1230
|
+
inherits: false;
|
|
1231
|
+
}
|
|
1232
|
+
@property --tw-gradient-from {
|
|
1233
|
+
syntax: "<color>";
|
|
1234
|
+
inherits: false;
|
|
1235
|
+
initial-value: #0000;
|
|
1236
|
+
}
|
|
1237
|
+
@property --tw-gradient-via {
|
|
1238
|
+
syntax: "<color>";
|
|
1239
|
+
inherits: false;
|
|
1240
|
+
initial-value: #0000;
|
|
1241
|
+
}
|
|
1242
|
+
@property --tw-gradient-to {
|
|
1243
|
+
syntax: "<color>";
|
|
1244
|
+
inherits: false;
|
|
1245
|
+
initial-value: #0000;
|
|
1246
|
+
}
|
|
1247
|
+
@property --tw-gradient-stops {
|
|
1248
|
+
syntax: "*";
|
|
1249
|
+
inherits: false;
|
|
1250
|
+
}
|
|
1251
|
+
@property --tw-gradient-via-stops {
|
|
1252
|
+
syntax: "*";
|
|
1253
|
+
inherits: false;
|
|
1254
|
+
}
|
|
1255
|
+
@property --tw-gradient-from-position {
|
|
1256
|
+
syntax: "<length-percentage>";
|
|
1257
|
+
inherits: false;
|
|
1258
|
+
initial-value: 0%;
|
|
1259
|
+
}
|
|
1260
|
+
@property --tw-gradient-via-position {
|
|
1261
|
+
syntax: "<length-percentage>";
|
|
1262
|
+
inherits: false;
|
|
1263
|
+
initial-value: 50%;
|
|
1264
|
+
}
|
|
1265
|
+
@property --tw-gradient-to-position {
|
|
1266
|
+
syntax: "<length-percentage>";
|
|
1267
|
+
inherits: false;
|
|
1268
|
+
initial-value: 100%;
|
|
1269
|
+
}
|
|
1270
|
+
@property --tw-divide-x-reverse {
|
|
1135
1271
|
syntax: "*";
|
|
1136
1272
|
inherits: false;
|
|
1273
|
+
initial-value: 0;
|
|
1274
|
+
}
|
|
1275
|
+
@property --tw-outline-style {
|
|
1276
|
+
syntax: "*";
|
|
1277
|
+
inherits: false;
|
|
1278
|
+
initial-value: solid;
|
|
1137
1279
|
}
|
|
1138
1280
|
@property --tw-duration {
|
|
1139
1281
|
syntax: "*";
|
|
@@ -1214,17 +1356,7 @@ html {
|
|
|
1214
1356
|
--tw-skew-y: initial;
|
|
1215
1357
|
--tw-border-style: solid;
|
|
1216
1358
|
--tw-leading: initial;
|
|
1217
|
-
--tw-
|
|
1218
|
-
--tw-gradient-position: initial;
|
|
1219
|
-
--tw-gradient-from: #0000;
|
|
1220
|
-
--tw-gradient-via: #0000;
|
|
1221
|
-
--tw-gradient-to: #0000;
|
|
1222
|
-
--tw-gradient-stops: initial;
|
|
1223
|
-
--tw-gradient-via-stops: initial;
|
|
1224
|
-
--tw-gradient-from-position: 0%;
|
|
1225
|
-
--tw-gradient-via-position: 50%;
|
|
1226
|
-
--tw-gradient-to-position: 100%;
|
|
1227
|
-
--tw-outline-style: solid;
|
|
1359
|
+
--tw-font-weight: initial;
|
|
1228
1360
|
--tw-shadow: 0 0 #0000;
|
|
1229
1361
|
--tw-shadow-color: initial;
|
|
1230
1362
|
--tw-shadow-alpha: 100%;
|
|
@@ -1239,7 +1371,18 @@ html {
|
|
|
1239
1371
|
--tw-ring-offset-width: 0px;
|
|
1240
1372
|
--tw-ring-offset-color: #fff;
|
|
1241
1373
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
1242
|
-
--tw-
|
|
1374
|
+
--tw-content: "";
|
|
1375
|
+
--tw-gradient-position: initial;
|
|
1376
|
+
--tw-gradient-from: #0000;
|
|
1377
|
+
--tw-gradient-via: #0000;
|
|
1378
|
+
--tw-gradient-to: #0000;
|
|
1379
|
+
--tw-gradient-stops: initial;
|
|
1380
|
+
--tw-gradient-via-stops: initial;
|
|
1381
|
+
--tw-gradient-from-position: 0%;
|
|
1382
|
+
--tw-gradient-via-position: 50%;
|
|
1383
|
+
--tw-gradient-to-position: 100%;
|
|
1384
|
+
--tw-divide-x-reverse: 0;
|
|
1385
|
+
--tw-outline-style: solid;
|
|
1243
1386
|
--tw-duration: initial;
|
|
1244
1387
|
--tw-ease: initial;
|
|
1245
1388
|
--tw-blur: initial;
|
package/package.json
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"autoprefixer": "^10.4.21",
|
|
20
20
|
"concurrently": "^9.2.0",
|
|
21
21
|
"postcss": "^8.5.6",
|
|
22
|
+
"postcss-cli": "^11.0.1",
|
|
22
23
|
"react": "^18.2.0 || ^19.0.0",
|
|
23
24
|
"react-dom": "^18.2.0 || ^19.0.0",
|
|
24
25
|
"rollup": "^4.46.2",
|
|
@@ -34,7 +35,7 @@
|
|
|
34
35
|
"react-dom": "^18.2.0 || ^19.0.0"
|
|
35
36
|
},
|
|
36
37
|
"name": "@safestrong/ppa-component-library",
|
|
37
|
-
"version": "1.4.
|
|
38
|
+
"version": "1.4.1",
|
|
38
39
|
"description": "Collection of reusable components for any PPA web applications",
|
|
39
40
|
"main": "dist/index.cjs",
|
|
40
41
|
"module": "dist/index.js",
|
|
@@ -48,11 +49,11 @@
|
|
|
48
49
|
"author": "SS6 Development",
|
|
49
50
|
"license": "MIT",
|
|
50
51
|
"scripts": {
|
|
51
|
-
"build": "tsup src/index.ts --dts --format esm,cjs --sourcemap",
|
|
52
|
+
"build": "npm run build:css && tsup src/index.ts --dts --format esm,cjs --sourcemap",
|
|
52
53
|
"storybook": "concurrently \"npm:dev:css\" \"storybook dev -p 6006\"",
|
|
53
54
|
"build-storybook": "storybook build",
|
|
54
|
-
"build:css": "
|
|
55
|
-
"dev:css": "
|
|
55
|
+
"build:css": "postcss ./src/styles.css -o ./dist/styles.css",
|
|
56
|
+
"dev:css": "postcss ./src/styles.css -o ./dist/styles.css --watch",
|
|
56
57
|
"rollup": "rollup -c --bundleConfigAsCjs"
|
|
57
58
|
},
|
|
58
59
|
"exports": {
|