optimized-react-component-library-xyz123 0.1.81 → 0.1.82

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/index.css CHANGED
@@ -2,856 +2,14 @@
2
2
  /* src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.css */
3
3
  /* src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.css */
4
4
  /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
5
- .files-upload {
6
- width: 100%;
7
- max-width: 800px;
8
- margin: 0 auto;
9
- font-family:
10
- "Segoe UI",
11
- Tahoma,
12
- Geneva,
13
- Verdana,
14
- sans-serif;
15
- }
16
- .files-drop-zone {
17
- border: 2px dashed #6e3282;
18
- border-radius: 12px;
19
- padding: 3rem 2rem;
20
- text-align: center;
21
- transition: all 0.3s ease;
22
- background-color: #fafafa;
23
- cursor: pointer;
24
- position: relative;
25
- overflow: hidden;
26
- }
27
- .files-drop-zone:hover {
28
- border-color: #6e3282;
29
- background-color: #f5ebf8;
30
- transform: translateY(-2px);
31
- box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
32
- }
33
- .files-drop-zone.drag-active {
34
- border-color: #6e3282;
35
- background-color: #f5ebf8;
36
- transform: scale(1.02);
37
- box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
38
- }
39
- .files-drop-zone:focus {
40
- border: 0.2rem solid #6e3282;
41
- }
42
- .files-drop-zone:focus-visible {
43
- outline-offset: 0 !important;
44
- outline-style: solid !important;
45
- outline-color: #fff !important;
46
- outline-width: 2px !important;
47
- box-shadow: 0 0 0 4px #000 !important;
48
- }
49
- .files-drop-content {
50
- pointer-events: none;
51
- }
52
- .files-icon {
53
- font-size: 4rem;
54
- margin-bottom: 1rem;
55
- opacity: 0.7;
56
- animation: float 3s ease-in-out infinite;
57
- }
58
- @keyframes float {
59
- 0%, 100% {
60
- transform: translateY(0px);
61
- }
62
- 50% {
63
- transform: translateY(-10px);
64
- }
65
- }
66
- .files-drop-text {
67
- font-size: 1.2rem;
68
- margin-bottom: 0.5rem;
69
- color: #333;
70
- font-weight: 500;
71
- }
72
- .files-drop-info {
73
- font-size: 0.9rem;
74
- color: #666;
75
- margin: 0;
76
- }
77
- .files-allowed-types {
78
- font-size: 0.85rem;
79
- color: #555;
80
- margin: 0.75rem 0 0 0;
81
- padding: 0.5rem;
82
- background-color: rgba(146, 64, 252, 0.1);
83
- border-radius: 6px;
84
- border-left: 3px solid #ce95e0;
85
- }
86
- .files-allowed-types strong {
87
- color: #6e3282;
88
- }
89
- .files-input-hidden {
90
- display: none;
91
- }
92
- .files-summary {
93
- margin: 1.5rem 0;
94
- padding: 1rem;
95
- background-color: #f8f9fa;
96
- border-radius: 8px;
97
- border: 1px solid #e9ecef;
98
- }
99
- .files-summary-stats {
100
- display: flex;
101
- gap: 1rem;
102
- margin-bottom: 1rem;
103
- flex-wrap: wrap;
104
- }
105
- .stat {
106
- padding: 0.5rem 1rem;
107
- border-radius: 20px;
108
- background-color: #e9ecef;
109
- font-size: 0.9rem;
110
- display: flex;
111
- align-items: center;
112
- gap: 0.5rem;
113
- }
114
- .stat.pending {
115
- background-color: #fff3cd;
116
- color: #856404;
117
- }
118
- .stat.completed {
119
- background-color: #d1e7dd;
120
- color: #0a3622;
121
- }
122
- .stat.error {
123
- background-color: #f8d7da;
124
- color: #721c24;
125
- }
126
- .files-summary-actions {
127
- display: flex;
128
- gap: 0.5rem;
129
- flex-wrap: wrap;
130
- }
131
- .action-button {
132
- padding: 0.75rem 1.5rem;
133
- border: none;
134
- border-radius: 6px;
135
- cursor: pointer;
136
- font-weight: 500;
137
- transition: all 0.2s ease;
138
- display: flex;
139
- align-items: center;
140
- gap: 0.5rem;
141
- }
142
- .action-button.primary {
143
- background-color: #1ea7fd;
144
- color: white;
145
- }
146
- .action-button.primary:hover {
147
- background-color: #1890ff;
148
- transform: translateY(-1px);
149
- }
150
- .action-button.secondary {
151
- background-color: #6c757d;
152
- color: white;
153
- }
154
- .action-button.secondary:hover {
155
- background-color: #5a6268;
156
- transform: translateY(-1px);
157
- }
158
- .files-list {
159
- margin-top: 1.5rem;
160
- }
161
- .files-list h4 {
162
- margin-bottom: 1rem;
163
- color: #333;
164
- font-size: 1.1rem;
165
- font-weight: 600;
166
- }
167
- .files-items {
168
- list-style: none;
169
- padding: 0;
170
- margin: 0;
171
- }
172
- .file-item {
173
- display: flex;
174
- align-items: center;
175
- gap: 1rem;
176
- padding: 1rem;
177
- border: 1px solid #e9ecef;
178
- border-radius: 8px;
179
- margin-bottom: 0.75rem;
180
- background-color: white;
181
- transition: all 0.2s ease;
182
- position: relative;
183
- }
184
- .file-item:hover {
185
- background-color: #f8f9fa;
186
- border-color: #dee2e6;
187
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
188
- }
189
- .file-item.uploading {
190
- background-color: #e6f7ff;
191
- border-color: #91d5ff;
192
- }
193
- .file-item.completed {
194
- background-color: #f6ffed;
195
- border-color: #b7eb8f;
196
- }
197
- .file-item.error {
198
- background-color: #fff2f0;
199
- border-color: #ffccc7;
200
- }
201
- .file-icon-status {
202
- font-size: 1.5rem;
203
- min-width: 2rem;
204
- text-align: center;
205
- }
206
- .file-info {
207
- flex: 1;
208
- min-width: 0;
209
- }
210
- .file-name {
211
- font-weight: 500;
212
- color: #333;
213
- margin-bottom: 0.5rem;
214
- word-break: break-word;
215
- }
216
- .file-details {
217
- display: flex;
218
- gap: 1rem;
219
- font-size: 0.85rem;
220
- color: #666;
221
- flex-wrap: wrap;
222
- }
223
- .file-size {
224
- color: #666;
225
- }
226
- .file-status {
227
- color: #1ea7fd;
228
- font-weight: 500;
229
- }
230
- .file-error {
231
- color: #dc3545;
232
- font-weight: 500;
233
- }
234
- .progress-bar {
235
- width: 100%;
236
- height: 4px;
237
- background-color: #e9ecef;
238
- border-radius: 2px;
239
- margin-top: 0.5rem;
240
- overflow: hidden;
241
- }
242
- .progress-fill {
243
- height: 100%;
244
- background-color: #1ea7fd;
245
- transition: width 0.3s ease;
246
- border-radius: 2px;
247
- }
248
- .file-actions {
249
- display: flex;
250
- gap: 0.5rem;
251
- }
252
- .action-btn {
253
- background: none;
254
- border: 1px solid transparent;
255
- padding: 0.5rem;
256
- border-radius: 6px;
257
- cursor: pointer;
258
- font-size: 1rem;
259
- transition: all 0.2s ease;
260
- min-width: 2.5rem;
261
- height: 2.5rem;
262
- display: flex;
263
- align-items: center;
264
- justify-content: center;
265
- }
266
- .action-btn.upload {
267
- color: #1ea7fd;
268
- border-color: #1ea7fd;
269
- }
270
- .action-btn.upload:hover {
271
- background-color: #1ea7fd;
272
- color: white;
273
- }
274
- .action-btn.retry {
275
- color: #fd7e14;
276
- border-color: #fd7e14;
277
- }
278
- .action-btn.retry:hover {
279
- background-color: #fd7e14;
280
- color: white;
281
- }
282
- .action-btn.remove {
283
- color: #6e3282;
284
- border-color: #6e3282;
285
- }
286
- .action-btn.remove:hover {
287
- background-color: #6e3282;
288
- color: white;
289
- }
290
- @media (max-width: 768px) {
291
- .files-drop-zone {
292
- padding: 2rem 1rem;
293
- }
294
- .files-icon {
295
- font-size: 3rem;
296
- }
297
- .files-drop-text {
298
- font-size: 1rem;
299
- }
300
- .files-summary-stats {
301
- flex-direction: column;
302
- gap: 0.5rem;
303
- }
304
- .files-summary-actions {
305
- flex-direction: column;
306
- }
307
- .action-button {
308
- justify-content: center;
309
- }
310
- .file-item {
311
- flex-direction: column;
312
- align-items: flex-start;
313
- gap: 0.75rem;
314
- }
315
- .file-details {
316
- flex-direction: column;
317
- gap: 0.25rem;
318
- }
319
- .file-actions {
320
- align-self: flex-end;
321
- }
322
- }
323
- @media (max-width: 480px) {
324
- .files-upload {
325
- padding: 0 0.5rem;
326
- }
327
- .files-drop-zone {
328
- padding: 1.5rem 1rem;
329
- }
330
- .file-item {
331
- padding: 0.75rem;
332
- }
333
- }
334
-
335
5
  /* src/NewInputComponentStandard/AddFilesStandard/AddFilesStandard.css */
336
- .invisible {
337
- display: none;
338
- width: 1px;
339
- }
340
- .filePickLabel {
341
- display: flex;
342
- align-items: center;
343
- justify-content: flex-start;
344
- width: 100%;
345
- margin: 0;
346
- padding: 0;
347
- height: 48px;
348
- border: 1px solid #747474;
349
- border-radius: var(--bs-border-radius);
350
- }
351
- .filePickLabel:focus {
352
- border: #000000 2px solid;
353
- box-shadow: none;
354
- }
355
- .filePickLabel .filePickButton {
356
- cursor: pointer;
357
- padding: 16px;
358
- height: 100%;
359
- background: #747474;
360
- border-top-left-radius: 4px;
361
- border-bottom-left-radius: 4px;
362
- display: flex;
363
- align-items: center;
364
- flex-direction: column;
365
- justify-content: center;
366
- align-self: stretch;
367
- color: #ffff;
368
- font-family: Arial;
369
- font-size: 16px;
370
- font-style: normal;
371
- font-weight: 400;
372
- line-height: 24px;
373
- }
374
- .filePickButton {
375
- width: auto !important;
376
- border: none;
377
- margin-left: 0px !important;
378
- }
379
- .filePickButton.error {
380
- background: #8e0039 !important;
381
- color: #fff !important;
382
- }
383
- @media (max-width: 990px) {
384
- .filePickLabel .filePickButton {
385
- font-size: 14px;
386
- line-height: 14px;
387
- text-align: center;
388
- }
389
- }
390
- .filePickLabel .filePickText {
391
- padding-left: 16px;
392
- color: #000;
393
- font-family: Arial;
394
- font-size: 16px;
395
- font-style: normal;
396
- font-weight: 400;
397
- line-height: 24px;
398
- }
399
- .inputContainer {
400
- display: flex;
401
- align-items: center;
402
- justify-content: center;
403
- width: 100%;
404
- height: 100%;
405
- }
406
- @media (max-width: 768px) {
407
- .inputContainer {
408
- margin-bottom: 16px;
409
- }
410
- }
411
- .inputContainer button {
412
- margin: 0;
413
- padding: 8px 24px;
414
- margin-left: 16px;
415
- height: 50px;
416
- width: 200px;
417
- }
418
- .inputContainer input[type=text] {
419
- font-size: 16px;
420
- }
421
- .custom-file-button input[type=file] {
422
- margin-left: -2px !important;
423
- }
424
- .custom-file-button input[type=file]::-webkit-file-upload-button {
425
- display: none;
426
- }
427
- .custom-file-button input[type=file]::file-selector-button {
428
- display: none;
429
- }
430
- .custom-file-button:hover label {
431
- background-color: #dde0e3;
432
- cursor: pointer;
433
- }
434
- @media (max-width: 768px) {
435
- .DropZoneContainer {
436
- display: none;
437
- }
438
- }
439
- .DropZone {
440
- color: #000;
441
- margin-top: 20px;
442
- margin-bottom: 16px;
443
- font-family: Arial;
444
- font-size: 20px;
445
- font-style: normal;
446
- font-weight: 400;
447
- line-height: 24px;
448
- display: inline-flex;
449
- width: 100%;
450
- height: 180px;
451
- position: relative;
452
- clip-path: inset(0 round 8px 8px 8px 8px);
453
- background: var(--neutral-350, #f7f7f7);
454
- align-items: center;
455
- justify-content: center;
456
- text-align: center;
457
- gap: 10px;
458
- flex-direction: column;
459
- cursor: pointer;
460
- }
461
- .DropZone::before {
462
- content: "";
463
- position: absolute;
464
- left: -7px;
465
- top: -7px;
466
- right: -7px;
467
- bottom: -7px;
468
- border: 9px dashed rgba(0, 0, 0, 0.6);
469
- border-radius: 15px 15px 15px 15px;
470
- box-sizing: border-box;
471
- }
472
- .DropZone:hover {
473
- background: var(--neutral-350, #f7f7f7);
474
- opacity: 0.9;
475
- cursor: copy;
476
- }
477
- .ClipboardLink {
478
- display: block;
479
- position: relative;
480
- z-index: 2000;
481
- cursor: pointer;
482
- font-size: "12px";
483
- text-decoration: "underline";
484
- color: black;
485
- }
486
- .ClipboardLink:hover {
487
- cursor: pointer;
488
- }
489
- .makeTopSpace {
490
- margin-top: 12px;
491
- }
492
- .UploadedFile {
493
- margin-top: 24px;
494
- }
495
- .uploadFileRow {
496
- max-width: 555px;
497
- }
498
- @media (max-width: 768px) {
499
- .uploadFileRow {
500
- margin-left: 0px;
501
- }
502
- }
503
- .uploadedFileName {
504
- color: #000000;
505
- position: relative;
506
- border: 0px solid red;
507
- width: 76%;
508
- top: -21px;
509
- left: 24px;
510
- }
511
- .desktopFileName {
512
- display: block;
513
- }
514
- .mobileFirstFileName {
515
- display: block;
516
- }
517
- .uploadedDot.mobileVersion {
518
- display: none;
519
- }
520
- @media (max-width: 768px) {
521
- svg.uploadFileIcon {
522
- display: none;
523
- }
524
- .uploadedDot.mobileVersion {
525
- display: flex;
526
- }
527
- }
528
- .lastCol {
529
- display: flex;
530
- justify-content: flex-end;
531
- max-width: 62px;
532
- padding: 0;
533
- margin: 0;
534
- }
535
- .fileInListContainer {
536
- max-width: 624px;
537
- }
538
- .fileListUnorderedList {
539
- list-style: none !important;
540
- padding: 0;
541
- margin: 0;
542
- }
543
- .fileInList {
544
- width: 100%;
545
- }
546
- .fileInList .row {
547
- display: flex;
548
- justify-content: space-between;
549
- align-items: center;
550
- max-width: 100% !important;
551
- border: 0px solid black;
552
- padding: 0px 0px;
553
- --bs-gutter-x: 0px !important;
554
- }
555
- .fileInList .row .col {
556
- padding: 0;
557
- margin: 0;
558
- }
559
- .fileInList .row .lastCol {
560
- display: flex;
561
- justify-content: flex-end;
562
- }
563
- .fileInList .makeSpace {
564
- border-bottom: 1px solid #747474;
565
- }
566
- .fileInfo {
567
- display: flex;
568
- flex-direction: column;
569
- align-items: flex-start;
570
- gap: 13px;
571
- }
572
- .uploadedPercentage {
573
- font-family: Arial;
574
- font-size: 13px;
575
- font-style: normal;
576
- font-weight: 400;
577
- line-height: 16px;
578
- margin-top: 2px;
579
- }
580
- @media (max-width: 768px) {
581
- .uploadedPercentage {
582
- display: none;
583
- }
584
- }
585
- .trashCan {
586
- width: 57px;
587
- display: flex;
588
- flex-direction: column;
589
- flex-shrink: 0;
590
- justify-content: start;
591
- align-items: center;
592
- padding: 0;
593
- }
594
- .trashCan a {
595
- cursor: pointer;
596
- display: flex;
597
- flex-direction: column;
598
- flex-shrink: 0;
599
- justify-content: center;
600
- align-items: center;
601
- padding: 0;
602
- }
603
- .trashCan svg {
604
- width: 24px;
605
- height: 27px;
606
- stroke-width: 2px;
607
- stroke: var(--purple-900-primary, #6e3282);
608
- }
609
- .trashCanPositioning {
610
- display: flex;
611
- align-items: flex-start;
612
- justify-content: flex-end;
613
- gap: 4px;
614
- flex-shrink: 0;
615
- padding: 0;
616
- position: relative;
617
- border: 0px solid red;
618
- max-width: 70px;
619
- top: -6px;
620
- left: 12px;
621
- }
622
- .trashCanText {
623
- color: #6e3282;
624
- font-family: Arial;
625
- font-size: 10px;
626
- font-style: normal;
627
- font-weight: 400;
628
- line-height: normal;
629
- }
630
- .removeError {
631
- width: 57px;
632
- display: flex;
633
- flex-direction: column;
634
- flex-shrink: 0;
635
- justify-content: start;
636
- align-items: center;
637
- padding: 0;
638
- }
639
- .removeError svg {
640
- width: 16px;
641
- height: 18px;
642
- stroke-width: 2px;
643
- stroke: var(--purple-900-primary, #6e3282);
644
- }
645
- .removeError a {
646
- cursor: pointer;
647
- }
648
- .uploadedDot {
649
- border-radius: 17px;
650
- background: var(--red-green-green, #008e55);
651
- display: flex;
652
- width: 16px;
653
- height: 16px;
654
- padding: 10px;
655
- flex-direction: column;
656
- justify-content: center;
657
- align-items: center;
658
- gap: 10px;
659
- flex-shrink: 0;
660
- }
661
- .uploadedDot.uploadFailed {
662
- background: var(--red-green-red, #8e0039);
663
- color: var(--neutral-300, #fff);
664
- font-family: Arial;
665
- font-size: 13px;
666
- font-style: normal;
667
- font-weight: 700;
668
- line-height: 16px;
669
- }
670
- .uploadedDot svg {
671
- stroke-width: 1.5px;
672
- stroke: var(--neutral-300, #fff);
673
- flex-shrink: 0;
674
- }
675
- .uploadStatus {
676
- display: flex;
677
- align-items: flex-start;
678
- justify-content: flex-end;
679
- gap: 8px;
680
- flex-shrink: 0;
681
- padding: 0;
682
- position: relative;
683
- border: 0px solid red;
684
- max-width: 70px;
685
- top: 0;
686
- right: 0;
687
- }
688
- @media (max-width: 768px) {
689
- .uploadStatus {
690
- display: none;
691
- }
692
- }
693
- .uploadFileIcon {
694
- display: flex;
695
- align-items: flex-start;
696
- justify-content: flex-end;
697
- gap: 8px;
698
- flex-shrink: 0;
699
- padding: 0;
700
- position: relative;
701
- border: 0px solid red;
702
- max-width: 70px;
703
- top: 0;
704
- left: 0;
705
- }
706
- .uploadFileName {
707
- display: flex;
708
- align-items: normal;
709
- justify-content: flex-start;
710
- gap: 8px;
711
- flex-shrink: 0;
712
- padding: 0;
713
- color: #000;
714
- font-family: Arial;
715
- font-size: 16px;
716
- font-style: normal;
717
- font-weight: 400;
718
- line-height: 24px;
719
- }
720
- .uploadFileName.uploadFailed {
721
- color: var(--red-green-red, #8e0039);
722
- }
723
- .errorMessageAddingFile {
724
- color: var(--red-green-red, #8e0039);
725
- font-family: Arial;
726
- font-size: 13px;
727
- font-style: normal;
728
- font-weight: 400;
729
- line-height: 16px;
730
- }
731
- @media (max-width: 768px) {
732
- .errorMessageAddingFile {
733
- margin-left: 12px;
734
- }
735
- }
736
- .selectedFilesLinkButton {
737
- display: flex;
738
- align-items: center;
739
- padding-bottom: 16px;
740
- padding-left: 0;
741
- gap: 8px;
742
- flex-shrink: 0;
743
- stroke-width: 2px;
744
- stroke: var(--purple-900-primary, #6e3282);
745
- color: var(--purple-900-primary, #6e3282);
746
- font-family: Arial;
747
- font-size: 16px;
748
- font-style: normal;
749
- font-weight: 400;
750
- line-height: 24px;
751
- text-decoration: none;
752
- cursor: pointer;
753
- background-color: transparent;
754
- border: 0px;
755
- }
756
- .selectedFilesLinkButton:hover {
757
- color: var(--purple-900-primary, #6e3282);
758
- text-decoration: underline;
759
- }
760
- .uploadFileRow_x {
761
- max-width: 630px;
762
- }
763
- .uploadIndicator {
764
- height: 6px;
765
- flex-shrink: 0;
766
- margin-top: 0px;
767
- border-radius: 8px 8px 8px 8px;
768
- }
769
- @media (max-width: 768px) {
770
- .uploadIndicator {
771
- display: none;
772
- }
773
- }
774
- .uploadIndicator.uploadDone {
775
- width: 100%;
776
- background: var(--red-green-green, #008e55);
777
- }
778
- .uploadIndicator.uploadFailed {
779
- width: 10%;
780
- background: var(--red-green-red, #8e0039);
781
- }
782
- .uploadIndicator.uploadLoading {
783
- width: 50%;
784
- background: var(--red-green-red, rgb(211, 165, 0));
785
- }
786
- .UploadedFile .divider {
787
- border: 1px solid #747474;
788
- margin-top: 24px;
789
- }
790
- @media (max-width: 768px) {
791
- .UploadedFile .divider {
792
- margin-top: 0px;
793
- }
794
- }
795
- .ClipboardFiles {
796
- display: flex;
797
- flex-direction: column;
798
- align-items: center;
799
- gap: 16px;
800
- padding: 16px;
801
- margin-top: 32px;
802
- background-color: #222;
803
- animation-name: color;
804
- animation-duration: 1s;
805
- animation-iteration-count: infinite;
806
- border-radius: 8px;
807
- cursor: pointer;
808
- }
809
- .ClipboardFiles.clicked {
810
- background-color: #ccc;
811
- animation-name: none;
812
- cursor: copy;
813
- }
814
- @keyframes color {
815
- 0% {
816
- background-color: #ddd;
817
- }
818
- 25% {
819
- background-color: #ccc;
820
- }
821
- 50% {
822
- background-color: #bbb;
823
- }
824
- 75% {
825
- background-color: #ccc;
826
- }
827
- 100% {
828
- background-color: #ddd;
829
- }
830
- }
831
- .addFilesMandatory {
832
- margin-bottom: 16px;
833
- }
834
- .addFilesMandatory.error {
835
- display: inline;
836
- margin-bottom: 0px;
837
- }
838
-
839
6
  /* src/NewTextComponentStandard/EditPreviewLinkStandard/EditPreviewLinkStandard.css */
840
-
841
7
  /* src/NewTextComponentStandard/FooterStandard/FooterStandard.css */
842
-
843
8
  /* src/NewTextComponentStandard/HeaderStandard/HeaderStandard.css */
844
-
845
9
  /* src/NewTextComponentStandard/InfoOnlyStandard/InfoOnlyStandard.css */
846
-
847
10
  /* src/NewTextComponentStandard/ModalStandard/ModalStandard.css */
848
-
849
11
  /* src/NewTextComponentStandard/TextHeadlineAndBodyStandard/TextHeadlineAndBodyStandard.css */
850
-
851
12
  /* src/NewTextComponentStandard/ServiceHeadlineAndBodyStandard/ServiceHeadlineAndBodyStandard.css */
852
-
853
13
  /* src/NewTextComponentStandard/SkipLinkStandard/SkipLinkStandard.css */
854
-
855
14
  /* src/NewTextComponentStandard/StepperButtonsStandard/StepperButtonsStandard.css */
856
-
857
15
  /* src/NewTextComponentStandard/StepperStandard/StepperStandard.css */