optimized-react-component-library-xyz123 2.8.14 → 2.8.16

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.8.14",
3
+ "version": "2.8.16",
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;
@@ -527,14 +517,17 @@
527
517
  background-color: var(--dark-alertintext);
528
518
  }
529
519
  .pts-alertInText-left svg circle {
530
- fill: var(--dark-background);
520
+ fill: var(--dark-main);
531
521
  }
522
+
532
523
  .pts-alertInText-left svg rect {
533
524
  fill: var(--dark-alertintext);
534
525
  }
526
+
535
527
  .pts-alertInText-left svg .pts-alertInText-icon-dot-over-i {
536
528
  fill: var(--dark-alertintext);
537
529
  }
530
+
538
531
  .pts-alertInText-right {
539
532
  border: 1px solid var(--dark-alertintext);
540
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,19 @@ div.pts-root-question:last-child {
163
164
 
164
165
  /****RADIO MULTIPLE WITH INFO*/
165
166
 
167
+ .pts-radioMultipleWithInfo2-container p {
168
+ margin-bottom: 0px;
169
+ margin-top: 16px;
170
+ }
171
+
166
172
  .pts-radioWithInfo-sub-headline {
167
- margin-block-start: 3.6rem;
168
173
  margin-block-end: 1.6rem;
169
- font-size: 18px;
174
+ font-size: 1.6rem;
170
175
  font-weight: 700;
171
176
  }
172
177
 
173
178
  .pts-radioMultipleWithInfo2-container label {
174
- padding-top: 2px;
179
+ padding-top: 0.2rem;
175
180
  }
176
181
 
177
182
  .pts-radio-collapse {
@@ -192,11 +197,11 @@ div.pts-root-question:last-child {
192
197
  display: grid;
193
198
  text-align: left;
194
199
  grid-template-columns: 5% 90% 5%;
195
- align-items: center;
200
+ align-items: flex-start;
196
201
  }
197
202
 
198
203
  .pts-radio-collapse-button-container.open {
199
- border-radius: 8px 8px 0 0;
204
+ border-radius: 0.8rem 0.8rem 0 0;
200
205
  }
201
206
 
202
207
  .pts-radio-collapse-button-container input {
@@ -234,43 +239,6 @@ div.pts-root-question:last-child {
234
239
  overflow: hidden;
235
240
  }
236
241
 
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
-
274
242
  /* ---------- SINGLE CHECKBOX ---------- */
275
243
 
276
244
  .pts-singleCheckbox-row {
@@ -309,6 +277,13 @@ div.pts-root-question:last-child {
309
277
  margin-top: 0.2rem;
310
278
  }
311
279
 
280
+
281
+ /*-------- INFO ONLY-------- */
282
+ .pts-root-question:has(.pts-textbody-createspace){
283
+ max-width: 100%;
284
+ }
285
+
286
+
312
287
  /*-------- CHECKBOX GROUP-------- */
313
288
 
314
289
  .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,
@@ -526,6 +523,7 @@ input:focus-visible:-webkit-autofill {
526
523
  flex-shrink: 0;
527
524
  margin-right: 1.6rem;
528
525
  }
526
+
529
527
  .pts-textbody-alerttext {
530
528
  margin-top: 0;
531
529
  }
@@ -533,6 +531,7 @@ input:focus-visible:-webkit-autofill {
533
531
  margin-bottom: 3.6rem;
534
532
  }
535
533
 
534
+
536
535
  /* ---------- TEXT HEADLINE AND BODY ---------- */
537
536
 
538
537
  .pts-textHeadlineAndBody-container .notFirstInList {
@@ -1034,28 +1033,37 @@ input:focus-visible:-webkit-autofill {
1034
1033
  transform: rotate(360deg);
1035
1034
  }
1036
1035
  }
1036
+
1037
1037
  /* ---------- ALERT IN TEXT ---------- */
1038
+
1038
1039
  .pts-alertInText-container {
1039
1040
  display: flex;
1040
1041
  width: 100%;
1041
1042
  justify-content: flex-start;
1042
1043
  }
1044
+
1043
1045
  .pts-alertInText-left {
1044
1046
  display: flex;
1045
1047
  justify-content: flex-start;
1046
1048
  align-items: flex-start;
1047
- gap: 10px;
1049
+ gap: 10rem;
1048
1050
  align-self: stretch;
1049
1051
  border-top-left-radius: 8px;
1050
1052
  border-bottom-left-radius: 8px;
1051
1053
  border: 1px solid var(--alertintext);
1052
1054
  background-color: var(--alertintext);
1053
- padding: 8px;
1054
- padding-top: 16px;
1055
+ padding: 0.8rem;
1056
+ padding-top: 1.2rem;
1055
1057
  }
1058
+
1059
+ .pts-alertInText-left svg {
1060
+ height: 1.6rem;
1061
+ width: 1.8rem;
1062
+ }
1063
+
1056
1064
  .pts-alertInText-right {
1057
1065
  display: flex;
1058
- padding: 0 1.6rem;
1066
+ padding: 1.6rem 1.6rem 0 1.6rem;
1059
1067
  justify-content: flex-start;
1060
1068
  align-items: flex-start;
1061
1069
  width: 100%;