optimized-react-component-library-xyz123 2.9.3 → 2.9.4

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "optimized-react-component-library-xyz123",
3
- "version": "2.9.3",
3
+ "version": "2.9.4",
4
4
  "description": "A modern React component library using TypeScript with React 19 support.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
@@ -372,16 +372,6 @@
372
372
  color: var(--dark-info);
373
373
  }
374
374
 
375
-
376
- /* ---------- DROPDOWN ---------- */
377
- .pts-dropdown-container select {
378
- border-color: var(--dark-info);
379
- background-color: var(--dark-main);
380
- color: var(--dark-text);
381
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7073 15.7069C12.5198 15.8943 12.2655 15.9996 12.0003 15.9996C11.7352 15.9996 11.4809 15.8943 11.2933 15.7069L5.63634 10.0499C5.54083 9.95761 5.46465 9.84726 5.41224 9.72526C5.35983 9.60326 5.33225 9.47204 5.33109 9.33926C5.32994 9.20648 5.35524 9.0748 5.40552 8.9519C5.4558 8.829 5.53006 8.71735 5.62395 8.62346C5.71784 8.52957 5.82949 8.45531 5.95239 8.40503C6.07529 8.35475 6.20696 8.32945 6.33974 8.3306C6.47252 8.33176 6.60374 8.35934 6.72575 8.41175C6.84775 8.46416 6.9581 8.54034 7.05034 8.63585L12.0003 13.5859L16.9503 8.63585C17.1389 8.4537 17.3915 8.3529 17.6537 8.35518C17.9159 8.35746 18.1668 8.46263 18.3522 8.64804C18.5376 8.83344 18.6427 9.08426 18.645 9.34645C18.6473 9.60865 18.5465 9.86125 18.3643 10.0499L12.7073 15.7069Z' fill='%23ffffff'/%3E%3C/svg%3E");
382
- }
383
-
384
-
385
375
  /* ---------- ADD FILE QUESTION ---------- */
386
376
  .filePickText {
387
377
  color: var(--dark-text) !important;
@@ -463,8 +453,7 @@
463
453
  color: var(--dark-main);
464
454
  }
465
455
 
466
- .pts-open-close-icon svg path,
467
- .pts-collapse-open-close-icon svg path{
456
+ .pts-open-close-icon svg path {
468
457
  fill: var(--dark-main);
469
458
  }
470
459
 
@@ -517,7 +506,7 @@
517
506
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%23B07CBF' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
518
507
  }
519
508
 
520
- .pts-modal-overlay, .pts-navigation-overlay {
509
+ .pts-modal-overlay {
521
510
  background-color: rgba(255, 255, 255, 0.5);
522
511
  }
523
512
 
@@ -528,14 +517,17 @@
528
517
  background-color: var(--dark-alertintext);
529
518
  }
530
519
  .pts-alertInText-left svg circle {
531
- fill: var(--dark-background);
520
+ fill: var(--dark-main);
532
521
  }
522
+
533
523
  .pts-alertInText-left svg rect {
534
524
  fill: var(--dark-alertintext);
535
525
  }
526
+
536
527
  .pts-alertInText-left svg .pts-alertInText-icon-dot-over-i {
537
528
  fill: var(--dark-alertintext);
538
529
  }
530
+
539
531
  .pts-alertInText-right {
540
532
  border: 1px solid var(--dark-alertintext);
541
533
  color: var(--dark-alertintext-text);
@@ -58,8 +58,7 @@ h2:focus:focus-visible,
58
58
  }
59
59
 
60
60
  h1,
61
- h2,
62
- h3 {
61
+ h2 {
63
62
  margin: 0;
64
63
  margin-bottom: 3.6rem;
65
64
  }
@@ -75,6 +74,7 @@ h2 {
75
74
 
76
75
  h3 {
77
76
  font-size: 1.6rem;
77
+ margin-bottom: 1.6rem;
78
78
  }
79
79
 
80
80
  h4 {
@@ -57,7 +57,6 @@ div.pts-root-question:last-child {
57
57
  margin-bottom: 0.4rem;
58
58
  }
59
59
 
60
- .pts-root-question select,
61
60
  .pts-root-question input[type='text']:focus,
62
61
  .pts-root-question input[type='email']:focus,
63
62
  .pts-root-question input[type='tel']:focus {
@@ -112,8 +111,6 @@ div.pts-root-question:last-child {
112
111
  margin: 0;
113
112
  }
114
113
 
115
-
116
- .pts-root-question select,
117
114
  .pts-root-question input[type='text'],
118
115
  .pts-root-question input[type='email'],
119
116
  .pts-root-question input[type='tel'] {
@@ -154,6 +151,10 @@ div.pts-root-question:last-child {
154
151
  background-color: var(--action);
155
152
  }
156
153
 
154
+ .pts-radioMultipleWithInfo2-container input[type='radio'] {
155
+ margin: auto;
156
+ }
157
+
157
158
  .pts-radioMultiple-container label,
158
159
  .pts-radioMultipleWithInfo2-container label {
159
160
  position: relative;
@@ -163,15 +164,25 @@ div.pts-root-question:last-child {
163
164
 
164
165
  /****RADIO MULTIPLE WITH INFO*/
165
166
 
167
+ .pts-radioMultipleWithInfo2-container legend {
168
+ margin-bottom: 16px;
169
+ font-weight: 600;
170
+ margin-top: 10px;
171
+ }
172
+
173
+ .pts-radioMultipleWithInfo2-container p {
174
+ margin-bottom: 0px;
175
+ margin-top: 16px;
176
+ }
177
+
166
178
  .pts-radioWithInfo-sub-headline {
167
- margin-block-start: 3.6rem;
168
179
  margin-block-end: 1.6rem;
169
- font-size: 18px;
180
+ font-size: 1.6rem;
170
181
  font-weight: 700;
171
182
  }
172
183
 
173
184
  .pts-radioMultipleWithInfo2-container label {
174
- padding-top: 2px;
185
+ padding-top: 0.2rem;
175
186
  }
176
187
 
177
188
  .pts-radio-collapse {
@@ -192,11 +203,11 @@ div.pts-root-question:last-child {
192
203
  display: grid;
193
204
  text-align: left;
194
205
  grid-template-columns: 5% 90% 5%;
195
- align-items: center;
206
+ align-items: flex-start;
196
207
  }
197
208
 
198
209
  .pts-radio-collapse-button-container.open {
199
- border-radius: 8px 8px 0 0;
210
+ border-radius: 0.8rem 0.8rem 0 0;
200
211
  }
201
212
 
202
213
  .pts-radio-collapse-button-container input {
@@ -234,42 +245,6 @@ div.pts-root-question:last-child {
234
245
  overflow: hidden;
235
246
  }
236
247
 
237
- /* ---------- DROPDOWN ---------- */
238
-
239
- /* För inspiration */
240
-
241
- .pts-dropdown-container {
242
- margin-bottom: 1.5rem;
243
- }
244
-
245
- .pts-dropdown-container label {
246
- display: block;
247
- margin-bottom: 0.5rem;
248
- font-weight: 500;
249
- }
250
-
251
- .pts-dropdown-container select {
252
- cursor: pointer;
253
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7073 15.7069C12.5198 15.8943 12.2655 15.9996 12.0003 15.9996C11.7352 15.9996 11.4809 15.8943 11.2933 15.7069L5.63634 10.0499C5.54083 9.95761 5.46465 9.84726 5.41224 9.72526C5.35983 9.60326 5.33225 9.47204 5.33109 9.33926C5.32994 9.20648 5.35524 9.0748 5.40552 8.9519C5.4558 8.829 5.53006 8.71735 5.62395 8.62346C5.71784 8.52957 5.82949 8.45531 5.95239 8.40503C6.07529 8.35475 6.20696 8.32945 6.33974 8.3306C6.47252 8.33176 6.60374 8.35934 6.72575 8.41175C6.84775 8.46416 6.9581 8.54034 7.05034 8.63585L12.0003 13.5859L16.9503 8.63585C17.1389 8.4537 17.3915 8.3529 17.6537 8.35518C17.9159 8.35746 18.1668 8.46263 18.3522 8.64804C18.5376 8.83344 18.6427 9.08426 18.645 9.34645C18.6473 9.60865 18.5465 9.86125 18.3643 10.0499L12.7073 15.7069Z' fill='%23141414'/%3E%3C/svg%3E");
254
- background-repeat: no-repeat;
255
- background-position: right 14px center;
256
- background-size: 2.4rem;;
257
-
258
- -webkit-appearance: none;
259
- -moz-appearance: none;
260
- appearance: none;
261
-
262
- transition:
263
- border-color 0.15s ease-in-out,
264
- box-shadow 0.15s ease-in-out;
265
- }
266
-
267
- .pts-dropdown-container select:focus {
268
- outline: none;
269
- border-width: 2px;
270
- border-color: var(--action);
271
- }
272
-
273
248
  /* ---------- SINGLE CHECKBOX ---------- */
274
249
 
275
250
  .pts-singleCheckbox-row {
@@ -308,6 +283,13 @@ div.pts-root-question:last-child {
308
283
  margin-top: 0.2rem;
309
284
  }
310
285
 
286
+
287
+ /*-------- INFO ONLY-------- */
288
+ .pts-root-question:has(.pts-textbody-createspace){
289
+ max-width: 100%;
290
+ }
291
+
292
+
311
293
  /*-------- CHECKBOX GROUP-------- */
312
294
 
313
295
  .pts-checkboxGroup-options {
@@ -64,8 +64,6 @@
64
64
  border: 0;
65
65
  }
66
66
 
67
-
68
- select:focus-visible,
69
67
  button:focus-visible,
70
68
  a:focus-visible,
71
69
  input:focus-visible,
@@ -104,7 +102,6 @@ input:focus-visible:-webkit-autofill {
104
102
  0 0 0 4px #000 !important;
105
103
  }
106
104
 
107
- .using-mouse select:focus-visible,
108
105
  .using-mouse input:focus-visible,
109
106
  .using-mouse button:focus-visible,
110
107
  .using-mouse textarea:focus-visible,
@@ -354,7 +351,7 @@ input:focus-visible:-webkit-autofill {
354
351
  transform: translateX(100%);
355
352
  transition:
356
353
  transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
357
- opacity 0.1s;
354
+ opacity 1s;
358
355
  }
359
356
 
360
357
  .pts-navigation-menu-container.open {
@@ -387,7 +384,6 @@ input:focus-visible:-webkit-autofill {
387
384
  }
388
385
 
389
386
  .pts-navigation-link-expand-button {
390
- all:unset;
391
387
  border: none;
392
388
  padding: 0;
393
389
  cursor: pointer;
@@ -527,6 +523,7 @@ input:focus-visible:-webkit-autofill {
527
523
  flex-shrink: 0;
528
524
  margin-right: 1.6rem;
529
525
  }
526
+
530
527
  .pts-textbody-alerttext {
531
528
  margin-top: 0;
532
529
  }
@@ -534,6 +531,7 @@ input:focus-visible:-webkit-autofill {
534
531
  margin-bottom: 3.6rem;
535
532
  }
536
533
 
534
+
537
535
  /* ---------- TEXT HEADLINE AND BODY ---------- */
538
536
 
539
537
  .pts-textHeadlineAndBody-container .notFirstInList {
@@ -548,12 +546,6 @@ input:focus-visible:-webkit-autofill {
548
546
  margin-top: 1.6rem;
549
547
  }
550
548
 
551
- /* ---------- OptionTextBody ---------- */
552
-
553
- .pts-optionTextBody-container{
554
- margin-top: 1.6rem;
555
- }
556
-
557
549
  /* ---------- STEPPER ---------- */
558
550
 
559
551
  .pts-stepper-container {
@@ -668,23 +660,13 @@ input:focus-visible:-webkit-autofill {
668
660
  font-size: 1.6rem;
669
661
  }
670
662
 
671
- .pts-collapse-open-close-icon.open {
663
+ .pts-collapse-button.open {
672
664
  border-radius: 8px 8px 0 0;
673
665
  }
674
666
 
675
- .pts-collapse-open-close-icon svg{
676
- width: 2.4rem;
677
- height: 2.4rem;
678
- position: relative;
679
- top: 3px;
680
- }
681
-
682
-
683
667
  .pts-collapse-button .pts-open-close-icon svg {
684
668
  width: 2.4rem;
685
669
  height: 2.4rem;
686
- position: relative;
687
- top: 3px;
688
670
  }
689
671
 
690
672
  .pts-collapse-body {
@@ -700,7 +682,6 @@ input:focus-visible:-webkit-autofill {
700
682
  border: 2px solid var(--background);
701
683
  border-top: none;
702
684
  border-radius: 0 0 8px 8px;
703
- margin-top: -5px;
704
685
  }
705
686
 
706
687
  .pts-collapse-content {
@@ -748,14 +729,10 @@ input:focus-visible:-webkit-autofill {
748
729
  padding: 0;
749
730
  }
750
731
  .pts-linkList-container li {
751
- padding-bottom: 16px;
732
+ padding: 6px;
752
733
  list-style: none;
753
734
  }
754
735
 
755
- .pts-linkList-container li:last-child{
756
- padding-bottom:0 ;
757
- }
758
-
759
736
  /* ---------- GRANSKA-Sidan ---------- */
760
737
  .pts-editPreviewLink-container {
761
738
  display: flex;
@@ -1056,28 +1033,37 @@ input:focus-visible:-webkit-autofill {
1056
1033
  transform: rotate(360deg);
1057
1034
  }
1058
1035
  }
1036
+
1059
1037
  /* ---------- ALERT IN TEXT ---------- */
1038
+
1060
1039
  .pts-alertInText-container {
1061
1040
  display: flex;
1062
1041
  width: 100%;
1063
1042
  justify-content: flex-start;
1064
1043
  }
1044
+
1065
1045
  .pts-alertInText-left {
1066
1046
  display: flex;
1067
1047
  justify-content: flex-start;
1068
1048
  align-items: flex-start;
1069
- gap: 10px;
1049
+ gap: 10rem;
1070
1050
  align-self: stretch;
1071
1051
  border-top-left-radius: 8px;
1072
1052
  border-bottom-left-radius: 8px;
1073
1053
  border: 1px solid var(--alertintext);
1074
1054
  background-color: var(--alertintext);
1075
- padding: 8px;
1076
- padding-top: 16px;
1055
+ padding: 0.8rem;
1056
+ padding-top: 1.2rem;
1077
1057
  }
1058
+
1059
+ .pts-alertInText-left svg {
1060
+ height: 1.6rem;
1061
+ width: 1.8rem;
1062
+ }
1063
+
1078
1064
  .pts-alertInText-right {
1079
1065
  display: flex;
1080
- padding: 0 1.6rem;
1066
+ padding: 1.6rem 1.6rem 0 1.6rem;
1081
1067
  justify-content: flex-start;
1082
1068
  align-items: flex-start;
1083
1069
  width: 100%;