@dev-blinq/ui-systems 1.0.62 → 1.0.65

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.
Files changed (5) hide show
  1. package/dist/components/CustomInput/CustomInputProps.d.ts +0 -2
  2. package/dist/index.js +8 -8
  3. package/dist/index.mjs +51 -53
  4. package/dist/style.css +1 -747
  5. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -1,747 +1 @@
1
- .button {
2
- display: inline-flex;
3
- justify-content: center;
4
- align-items: center;
5
- font-size: 14px;
6
- font-weight: 700;
7
- cursor: pointer;
8
- transition: all 0.3s ease;
9
- border: none;
10
- font-family: var(--font-family, "Plus Jakarta Sans", sans-serif);
11
- }
12
- .button[data-size="sm"] {
13
- padding: 8px 12px;
14
- gap: 8px;
15
- border-radius: 12px;
16
- }
17
- .button[data-size="md"] {
18
- padding: 10px 14px;
19
- gap: 8px;
20
- border-radius: 12px;
21
- }
22
- .button[data-size="lg"] {
23
- padding: 12px 16px;
24
- gap: 10px;
25
- border-radius: 12px;
26
- }
27
- .button[data-size="xl"] {
28
- padding: 16px 24px;
29
- gap: 12px;
30
- border-radius: 16px;
31
- }
32
- .buttonText[data-size="sm"] {
33
- width: 24px;
34
- height: 24px;
35
- padding: 16px;
36
- gap: 10px;
37
- flex-shrink: 0;
38
- }
39
- .buttonText[data-size="md"] {
40
- width: 40px;
41
- height: 40px;
42
- padding: 16px;
43
- gap: 10px;
44
- flex-shrink: 0;
45
- }
46
- .buttonText[data-size="lg"] {
47
- width: 48px;
48
- height: 48px;
49
- padding: 16px;
50
- gap: 10px;
51
- flex-shrink: 0;
52
- }
53
- .buttonText[data-size="xl"] {
54
- width: 56px;
55
- height: 56px;
56
- padding: 16px;
57
- gap: 10px;
58
- flex-shrink: 0;
59
- }
60
- .button[data-colorHierarchy="brand/primary"] {
61
- background-color: var(--primary-main);
62
- }
63
- .button .input-typography {
64
- font-weight: 700;
65
- }
66
- .button[data-colorHierarchy="brand/primary"] .input-typography,
67
- .button[data-colorHierarchy="brand/primary"] span svg path {
68
- color: #fff;
69
- stroke: #fff;
70
- }
71
- .button[data-colorHierarchy="brand/secondary"] {
72
- background-color: var(--surface-brand-secondary-default, #ff974a);
73
- }
74
- .button[data-colorHierarchy="brand/secondary"] .input-typography,
75
- .button[data-colorHierarchy="brand/secondary"] span svg path {
76
- color: #fff;
77
- stroke: #fff;
78
- }
79
- .button[data-colorHierarchy="gray/secondary"] {
80
- background-color: #f1f1f1;
81
- }
82
- .button[data-colorHierarchy="gray/secondary"] .input-typography,
83
- .button[data-colorHierarchy="gray/secondary"] span svg path {
84
- color: #080808;
85
- stroke: #080808;
86
- }
87
- .button[data-colorHierarchy="white/secondary"] {
88
- background-color: #fff;
89
- box-shadow: 0 1px 2px #1717170d;
90
- border: var(--border-radius-radius-none, 1px) solid
91
- var(--border-default, #e6e6e6);
92
- }
93
- .button[data-colorHierarchy="white/secondary"] .input-typography,
94
- .button[data-colorHierarchy="white/secondary"] span svg path {
95
- color: #080808;
96
- stroke: #080808;
97
- }
98
- .button[data-colorHierarchy="gray/linkContainer"] {
99
- background-color: #fff;
100
- }
101
- .button[data-colorHierarchy="gray/linkContainer"] .input-typography,
102
- .button[data-colorHierarchy="gray/linkContainer"] span svg path {
103
- color: #080808;
104
- stroke: #080808;
105
- }
106
- .button[data-colorHierarchy="gray/link"] {
107
- background-color: #fff;
108
- padding: 0 8px;
109
- }
110
- .button[data-colorHierarchy="gray/link"] .input-typography,
111
- .button[data-colorHierarchy="gray/link"] span svg path {
112
- color: #080808;
113
- stroke: #080808;
114
- }
115
- .button[data-colorHierarchy="brand/link"] {
116
- background-color: #fff;
117
- padding: 0 8px;
118
- }
119
- .button[data-colorHierarchy="brand/link"] .input-typography,
120
- .button[data-colorHierarchy="brand/link"] span svg path {
121
- color: var(--primary-main);
122
- stroke: var(--primary-main);
123
- }
124
- .button[data-colorHierarchy="destructive/primary"] {
125
- background: var(--surface-error, #ea4621);
126
- }
127
- .button[data-colorHierarchy="destructive/primary"] .input-typography,
128
- .button[data-colorHierarchy="destructive/primary"] span svg path {
129
- color: #fff;
130
- stroke: #fff;
131
- }
132
- .button[data-colorHierarchy="destructive/secondary"] {
133
- background: var(--surface-error-secondary, #fdece9);
134
- }
135
- .button[data-colorHierarchy="destructive/secondary"] .input-typography,
136
- .button[data-colorHierarchy="destructive/secondary"] span svg path {
137
- color: var(--text-error, #ea4621);
138
- stroke: var(--text-error, #ea4621);
139
- }
140
- .button[data-colorHierarchy="destructive/linkContainer"] {
141
- background-color: #fff;
142
- }
143
- .button[data-colorHierarchy="destructive/linkContainer"] .input-typography,
144
- .button[data-colorHierarchy="destructive/linkContainer"] span svg path {
145
- color: var(--text-error, #ea4621);
146
- stroke: var(--text-error, #ea4621);
147
- }
148
- .button[data-colorHierarchy=""] {
149
- background-color: #fff;
150
- padding: 0;
151
- }
152
- .button[data-colorHierarchy=""] .input-typography,
153
- .button[data-colorHierarchy=""] span svg path {
154
- color: var(--text-error, #ea4621);
155
- stroke: var(--text-error, #ea4621);
156
- }
157
- .button[data-colorHierarchy="brand/primary"]:hover {
158
- background: var(--surface-primary-hover, #08379e);
159
- }
160
- .button[data-colorHierarchy="brand/secondary"]:hover {
161
- background: var(--surface-brand-secondary-hover, #e58843);
162
- }
163
- .button[data-colorHierarchy="gray/secondary"]:hover {
164
- background: var(--surface-secondary-hover, #ececed);
165
- }
166
- .button[data-colorHierarchy="white/secondary"]:hover {
167
- background: var(--surface-white---hover, #f9f9f9);
168
- }
169
- .button[data-colorHierarchy="gray/linkContainer"]:hover {
170
- background: var(--surface-secondary, #f1f1f1);
171
- }
172
- .button[data-colorHierarchy="gray/link"]:hover,
173
- .button[data-colorHierarchy="brand/link"]:hover {
174
- background-color: #fff;
175
- }
176
- .button[data-colorHierarchy="destructive/primary"]:hover {
177
- background: var(--surface-error-hover, #d33f1e);
178
- }
179
- .button[data-colorHierarchy="destructive/secondary"]:hover {
180
- background: var(--surface-error-secondary-hover, #fbdad3);
181
- }
182
- .button[data-colorHierarchy="destructive/linkContainer"]:hover {
183
- background: var(--colors-red-5, #fef6f4);
184
- }
185
- .button[data-colorHierarchy=""]:hover {
186
- background-color: #fff;
187
- }
188
- .button[data-colorHierarchy="brand/primary"]:focus {
189
- box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
190
- }
191
- .button[data-colorHierarchy="brand/secondary"]:focus {
192
- box-shadow: 0 0 0 4px #ffbd1a40;
193
- }
194
- .button[data-colorHierarchy="gray/secondary"]:focus {
195
- box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
196
- }
197
- .button[data-colorHierarchy="white/secondary"]:focus {
198
- box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
199
- }
200
- .button[data-colorHierarchy="gray/linkContainer"]:focus {
201
- box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
202
- }
203
- .button[data-colorHierarchy="gray/link"]:focus {
204
- box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
205
- }
206
- .button[data-colorHierarchy="brand/link"]:focus {
207
- box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
208
- }
209
- .button[data-colorHierarchy="destructive/primary"]:focus {
210
- box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
211
- }
212
- .button[data-colorHierarchy="destructive/secondary"]:focus {
213
- box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
214
- }
215
- .button[data-colorHierarchy="destructive/linkContainer"]:focus {
216
- box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
217
- }
218
- .button[data-colorHierarchy=""]:focus {
219
- box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
220
- }
221
- .button[data-colorHierarchy="brand/primary"]:disabled {
222
- background: var(--surface-disabled, #f1f1f1);
223
- }
224
- .button:disabled .input-typography {
225
- color: var(--text-disabled, #939197);
226
- }
227
- .button:disabled span svg path {
228
- stroke: var(--text-disabled, #939197);
229
- }
230
- .button[data-colorHierarchy="brand/secondary"]:disabled {
231
- background: var(--surface-error-disabled, #fdece9);
232
- }
233
- .button[data-colorHierarchy="brand/secondary"]:disabled .input-typography,
234
- .button[data-colorHierarchy="brand/secondary"]:disabled span svg path {
235
- color: var(--text-brand-secondary-disabled, #ffc192);
236
- stroke: var(--text-brand-secondary-disabled, #ffc192);
237
- }
238
- .button[data-colorHierarchy="gray/secondary"]:disabled {
239
- background: var(--surface-disabled, #f1f1f1);
240
- }
241
- .button[data-colorHierarchy="white/secondary"]:disabled {
242
- background: var(--surface-white---disabled, #fdfdfd);
243
- }
244
- .button[data-colorHierarchy="brand/link"]:disabled .input-typography,
245
- .button[data-colorHierarchy="brand/link"]:disabled span svg path {
246
- color: var(--text-action-disabled, #849ed7);
247
- stroke: var(--text-action-disabled, #849ed7);
248
- }
249
- .button[data-colorHierarchy="destructive/primary"]:disabled {
250
- background: var(--surface-error-disabled, #fdece9);
251
- }
252
- .button[data-colorHierarchy="destructive/primary"]:disabled .input-typography,
253
- .button[data-colorHierarchy="destructive/primary"]:disabled span svg path {
254
- color: var(--text-error-disabled, #f5a290);
255
- stroke: var(--text-error-disabled, #f5a290);
256
- }
257
- .button[data-colorHierarchy="destructive/secondary"]:disabled {
258
- background: var(--surface-error-disabled, #fdece9);
259
- }
260
- .button[data-colorHierarchy="destructive/secondary"]:disabled .input-typography,
261
- .button[data-colorHierarchy="destructive/secondary"]:disabled span svg path {
262
- color: var(--text-error-disabled, #f5a290);
263
- stroke: var(--text-error-disabled, #f5a290);
264
- }
265
- .button[data-colorHierarchy="destructive/linkContainer"]:disabled
266
- .input-typography,
267
- .button[data-colorHierarchy="destructive/linkContainer"]:disabled
268
- span
269
- svg
270
- path {
271
- color: var(--text-error-disabled, #f5a290);
272
- stroke: var(--text-error-disabled, #f5a290);
273
- }
274
- .button[data-colorHierarchy="destructive/link"]:disabled .input-typography,
275
- .button[data-colorHierarchy="destructive/link"]:disabled span svg path {
276
- color: var(--text-error-disabled, #f5a290);
277
- stroke: var(--text-error-disabled, #f5a290);
278
- }
279
- .TypographyCustom {
280
- color: #000;
281
- }
282
- .TypographyCustom[data-bold="extrabold"] {
283
- font-weight: 800;
284
- }
285
- .TypographyCustom[data-bold="bold"] {
286
- font-weight: 700;
287
- }
288
- .TypographyCustom[data-bold="semibold"] {
289
- font-weight: 600;
290
- }
291
- .TypographyCustom[data-bold="medium"] {
292
- font-weight: 500;
293
- }
294
- .TypographyCustom[data-category="display"][data-size="lg"] {
295
- font-size: 180px;
296
- font-style: normal;
297
- line-height: 188px;
298
- letter-spacing: -9px;
299
- }
300
- .TypographyCustom[data-category="display"][data-size="md"] {
301
- font-size: 128px;
302
- font-style: normal;
303
- line-height: 136px;
304
- letter-spacing: -5.12px;
305
- }
306
- .TypographyCustom[data-category="display"][data-size="sm"] {
307
- font-size: 96px;
308
- font-style: normal;
309
- line-height: 104px;
310
- letter-spacing: -2.88px;
311
- }
312
- .TypographyCustom[data-category="heading"][data-size="xxl"] {
313
- font-size: 72px;
314
- font-style: normal;
315
- line-height: 80px;
316
- letter-spacing: -1.44px;
317
- }
318
- .TypographyCustom[data-category="heading"][data-size="xl"] {
319
- font-size: 60px;
320
- font-style: normal;
321
- line-height: 68px;
322
- letter-spacing: -1.08px;
323
- }
324
- .TypographyCustom[data-category="heading"][data-size="lg"] {
325
- font-size: 48px;
326
- font-style: normal;
327
- line-height: 56px;
328
- letter-spacing: -0.768px;
329
- }
330
- .TypographyCustom[data-category="heading"][data-size="md"] {
331
- font-size: 36px;
332
- font-style: normal;
333
- line-height: 44px;
334
- letter-spacing: -0.504px;
335
- }
336
- .TypographyCustom[data-category="heading"][data-size="sm"] {
337
- font-size: 30px;
338
- font-style: normal;
339
- line-height: 38px;
340
- letter-spacing: -0.39px;
341
- }
342
- .TypographyCustom[data-category="heading"][data-size="xs"],
343
- .TypographyCustom[data-category="text"][data-size="xxl"] {
344
- font-size: 24px;
345
- font-style: normal;
346
- line-height: 32px;
347
- letter-spacing: -0.288px;
348
- }
349
- .TypographyCustom[data-category="text"][data-size="xl"] {
350
- font-size: 20px;
351
- font-style: normal;
352
- line-height: 28px;
353
- letter-spacing: -0.2px;
354
- }
355
- .TypographyCustom[data-category="text"][data-size="lg"] {
356
- font-size: 18px;
357
- font-style: normal;
358
- line-height: 24px;
359
- letter-spacing: -0.144px;
360
- }
361
- .TypographyCustom[data-category="text"][data-size="md"] {
362
- font-size: 16px;
363
- font-style: normal;
364
- line-height: 22px;
365
- letter-spacing: -0.112px;
366
- }
367
- .TypographyCustom[data-category="text"][data-size="sm"] {
368
- font-size: 14px;
369
- font-style: normal;
370
- line-height: 20px;
371
- letter-spacing: -0.084px;
372
- }
373
- .TypographyCustom[data-category="text"][data-size="xs"] {
374
- font-size: 12px;
375
- font-style: normal;
376
- line-height: 16px;
377
- letter-spacing: -0.06px;
378
- }
379
- .TypographyCustom[data-category="text"][data-size="xxs"] {
380
- font-size: 10px;
381
- font-style: normal;
382
- line-height: 14px;
383
- letter-spacing: -0.04px;
384
- }
385
- .custom-input {
386
- display: flex;
387
- flex-direction: row;
388
- padding: 12px;
389
- align-items: center;
390
- gap: 12px;
391
- width: 100%;
392
- align-self: stretch;
393
- border-radius: var(--border-radius-radius-pre-lg, 12px);
394
- margin-top: 8px;
395
- border: 1px solid var(--border-default, #e6e6e6);
396
- background: var(--surface-white, #fff);
397
- box-shadow: 0 1px 2px #1717170d;
398
- }
399
- .custom-input input {
400
- width: 100%;
401
- border: none;
402
- }
403
- .custom-input input::placeholder {
404
- color: var(--text-disabled, #939197);
405
- font-weight: 500;
406
- }
407
- .custom-input input:hover,
408
- .custom-input input:focus,
409
- .custom-input input:active {
410
- border: none;
411
- outline: none;
412
- }
413
- .custom-input .left-icon,
414
- .custom-input .right-icon {
415
- display: flex;
416
- align-items: center;
417
- justify-content: center;
418
- }
419
- .custom-input .left-icon svg path,
420
- .custom-input .right-icon svg path {
421
- stroke: #939197;
422
- }
423
- .custom-input:focus-within .left-icon svg path,
424
- .custom-input:focus-within .right-icon svg path {
425
- stroke: #000;
426
- }
427
- .custom-input input {
428
- font-family: var(--font-family);
429
- color: var(--text-primary, #080808);
430
- font-weight: 600;
431
- font-size: 14px;
432
- font-style: normal;
433
- }
434
- .custom-input .grey-box {
435
- margin: -12px;
436
- padding: 12px;
437
- gap: 6px;
438
- display: flex;
439
- flex-direction: row;
440
- background: #f9f9f9;
441
- }
442
- .custom-input .grey-right-box {
443
- padding: 12px;
444
- border-top-right-radius: 12px;
445
- border-bottom-right-radius: 12px;
446
- border-left: 1px solid #e6e6e6;
447
- }
448
- .custom-input .grey-left-box {
449
- padding: 12px 14px;
450
- border-top-left-radius: 12px;
451
- border-bottom-left-radius: 12px;
452
- border-right: 1px solid #e6e6e6;
453
- }
454
- .custom-input select:focus {
455
- border: none;
456
- outline: none;
457
- }
458
- .text-area-container {
459
- margin-top: 8px;
460
- display: flex;
461
- padding: 12px;
462
- flex-direction: column;
463
- gap: 10px;
464
- flex: 1 0 0;
465
- align-self: stretch;
466
- border-radius: 16px;
467
- border: var(--border-radius-radius-3xs, 1px) solid
468
- var(--border-default, #e6e6e6);
469
- box-shadow: 0 1px 2px #1717170d;
470
- }
471
- .text-area-container:focus-within {
472
- border: var(--border-radius-radius-3xs, 1px) solid
473
- var(--primary-main, #0070f3);
474
- box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
475
- }
476
- .text-area-container:has(textarea:disabled) {
477
- background: var(--surface-disabled, #f1f1f1);
478
- }
479
- .text-area-container:hover {
480
- border: var(--border-radius-radius-3xs, 1px) solid
481
- var(--border-hover, #c9c9cc);
482
- }
483
- .text-area-container[data-error="true"] {
484
- border: var(--border-radius-radius-3xs, 1px) solid
485
- var(--border-error, #ea4621);
486
- box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
487
- }
488
- .custom-input:hover {
489
- border: var(--border-radius-radius-none, 1px) solid
490
- var(--border-hover, #c9c9cc);
491
- box-shadow: 0 1px 2px #1717170d;
492
- }
493
- .custom-input:focus-within {
494
- border: var(--border-radius-radius-none, 1px) solid
495
- var(--border-default, #e6e6e6);
496
- background: var(--surface-white, #fff);
497
- box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
498
- }
499
- .custom-input:has(input:disabled) {
500
- border-radius: var(--border-radius-radius-pre-lg, 12px);
501
- border: var(--border-radius-radius-none, 1px) solid
502
- var(--border-default, #e6e6e6);
503
- background: var(--surface-disabled, #f1f1f1);
504
- }
505
- .custom-input:has(input:disabled) input {
506
- color: var(--text-disabled, #939197) !important;
507
- }
508
- .custom-input[data-error="true"] {
509
- border: var(--border-radius-radius-none, 1px) solid
510
- var(--border-error, #ea4621);
511
- box-shadow: none;
512
- }
513
- .blinq-checkbox input[data-size="sm"] + .checkmark {
514
- width: 16px;
515
- height: 16px;
516
- border-radius: var(--border-radius-radius-sm, 6px);
517
- }
518
- .blinq-checkbox input[data-size="md"] + .checkmark {
519
- width: 20px;
520
- height: 20px;
521
- border-radius: var(--border-radius-radius-md, 8px);
522
- }
523
- .blinq-checkbox input[data-size="lg"] + .checkmark {
524
- width: 24px;
525
- height: 24px;
526
- border-radius: var(--border-radius-radius-md, 8px);
527
- }
528
- .blinq-checkbox .checkmark {
529
- position: absolute;
530
- top: 4px;
531
- left: 0;
532
- background-color: var(--surface-primary-lightest, #f3f5fb);
533
- border-radius: 8px;
534
- }
535
- .blinq-checkbox input:checked ~ .checkmark {
536
- background: var(--surface-primary, #093db0);
537
- }
538
- .blinq-checkbox .checkmark:after {
539
- border: solid white;
540
- border-width: 0 2.7px 2.7px 0;
541
- -webkit-transform: rotate(45deg);
542
- -ms-transform: rotate(45deg);
543
- transform: rotate(45deg);
544
- border-radius: 1px;
545
- }
546
- .blinq-checkbox input[data-size="lg"] + .checkmark:after {
547
- left: 8.5px;
548
- top: 4px;
549
- width: 5px;
550
- height: 11px;
551
- }
552
- .blinq-checkbox input[data-size="md"] + .checkmark:after {
553
- left: 7px;
554
- top: 4px;
555
- width: 4px;
556
- height: 8px;
557
- }
558
- .blinq-checkbox input[data-size="sm"] + .checkmark:after {
559
- left: 5px;
560
- top: 3px;
561
- width: 3px;
562
- height: 6px;
563
- }
564
- .blinq-checkbox:hover input:checked ~ .checkmark {
565
- background: var(--surface-primary-hover, #08379e);
566
- }
567
- .blinq-checkbox input:focus ~ .checkmark {
568
- box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
569
- }
570
- .blinq-checkbox input:disabled ~ .checkmark {
571
- background: var(--surface-disabled, #f1f1f1);
572
- cursor: not-allowed;
573
- border: 1px solid var(--border-default, #e6e6e6);
574
- box-shadow: none;
575
- }
576
- .blinq-checkbox input ~ .checkmark {
577
- border: 1px solid var(--border-brand, #093db0);
578
- }
579
- .blinq-checkbox input:disabled ~ .checkmark:after {
580
- border: solid #939197;
581
- border-width: 0 2.7px 2.7px 0;
582
- -webkit-transform: rotate(45deg);
583
- -ms-transform: rotate(45deg);
584
- transform: rotate(45deg);
585
- border-radius: 1px;
586
- }
587
- .blinq-checkbox {
588
- display: block;
589
- position: relative;
590
- padding-left: 35px;
591
- margin-bottom: 12px;
592
- cursor: pointer;
593
- font-size: 22px;
594
- -webkit-user-select: none;
595
- -moz-user-select: none;
596
- -ms-user-select: none;
597
- user-select: none;
598
- }
599
- .blinq-checkbox input {
600
- position: absolute;
601
- opacity: 0;
602
- cursor: pointer;
603
- height: 0;
604
- width: 0;
605
- }
606
- .blinq-checkbox .checkmark:after {
607
- content: "";
608
- position: absolute;
609
- display: none;
610
- }
611
- .blinq-checkbox input:checked ~ .checkmark:after {
612
- display: block;
613
- }
614
- .blinq-radio-button input[data-size="sm"] + .checkmark {
615
- width: 16px;
616
- height: 16px;
617
- border-radius: 50%;
618
- }
619
- .blinq-radio-button input[data-size="md"] + .checkmark {
620
- width: 20px;
621
- height: 20px;
622
- border-radius: 50%;
623
- }
624
- .blinq-radio-button input[data-size="lg"] + .checkmark {
625
- width: 24px;
626
- height: 24px;
627
- border-radius: 50%;
628
- }
629
- .blinq-radio-button .checkmark {
630
- position: absolute;
631
- top: 4px;
632
- left: 0;
633
- background-color: var(--surface-primary-lightest, #f3f5fb);
634
- border-radius: 8px;
635
- }
636
- .blinq-radio-button .checkmark:after {
637
- display: inline-block;
638
- border-radius: 50%;
639
- left: 50%;
640
- top: 50%;
641
- background: var(--surface-primary, #093db0);
642
- transform: translate(-50%, -50%);
643
- position: absolute;
644
- }
645
- .blinq-radio-button input[data-size="lg"] + .checkmark:after {
646
- width: 12px;
647
- height: 12px;
648
- }
649
- .blinq-radio-button input[data-size="md"] + .checkmark:after {
650
- width: 10px;
651
- height: 10px;
652
- }
653
- .blinq-radio-button input[data-size="sm"] + .checkmark:after {
654
- width: 8px;
655
- height: 8px;
656
- }
657
- .blinq-radio-button:hover .checkmark:after {
658
- background: var(--surface-primary-hover, #08379e);
659
- }
660
- .blinq-radio-button input:focus ~ .checkmark {
661
- box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
662
- }
663
- .blinq-radio-button input:disabled ~ .checkmark {
664
- background: var(--surface-disabled, #f1f1f1);
665
- cursor: not-allowed;
666
- border: 1px solid var(--border-default, #e6e6e6);
667
- box-shadow: none;
668
- }
669
- .blinq-radio-button input ~ .checkmark {
670
- border: 1px solid var(--border-brand, #093db0);
671
- }
672
- .blinq-radio-button input:disabled .checkmark:after {
673
- display: inline-block;
674
- border-radius: 50%;
675
- left: 50%;
676
- top: 50%;
677
- background: #939197;
678
- transform: translate(-50%, -50%);
679
- position: absolute;
680
- }
681
- .blinq-radio-button {
682
- display: block;
683
- position: relative;
684
- padding-left: 35px;
685
- margin-bottom: 12px;
686
- cursor: pointer;
687
- font-size: 22px;
688
- -webkit-user-select: none;
689
- -moz-user-select: none;
690
- -ms-user-select: none;
691
- user-select: none;
692
- }
693
- .blinq-radio-button input {
694
- position: absolute;
695
- opacity: 0;
696
- cursor: pointer;
697
- height: 0;
698
- width: 0;
699
- }
700
- .blinq-radio-button .checkmark:after {
701
- content: "";
702
- position: absolute;
703
- display: none;
704
- }
705
- .blinq-radio-button input:checked ~ .checkmark:after {
706
- display: block;
707
- }
708
- .toggle-switch {
709
- display: inline-flex;
710
- background-color: #f5f5f5;
711
- border-radius: 20px;
712
- padding: 5px;
713
- cursor: pointer;
714
- transition: background-color 1s ease;
715
- }
716
- .toggle-option {
717
- padding: 10px 20px;
718
- border-radius: 15px;
719
- font-weight: 500;
720
- font-size: 14px;
721
- color: #b9b9b9;
722
- transition:
723
- background-color 0.3s ease,
724
- color 0.3s ease,
725
- box-shadow 0.3s ease;
726
- }
727
- .toggle-option p {
728
- color: var(--text-secondary, #717076);
729
- }
730
- .toggle-option.active {
731
- background-color: #fff;
732
- color: #000;
733
- box-shadow: 0 2px 8px #0000001a;
734
- }
735
- .toggle-option.active p {
736
- color: var(--text-primary, #080808);
737
- }
738
- .error-message-input {
739
- color: #ea4621;
740
- font-size: 14px;
741
- margin: 8px 0px 0px 0px;
742
- line-height: 20px;
743
- font-weight: 500;
744
- }
745
- .custom-input[data-error="true"]:hover {
746
- box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
747
- }
1
+ .button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;border:none;font-family:var(--font-family, "Plus Jakarta Sans", sans-serif)}.button[data-size=sm]{padding:8px 12px;gap:8px;border-radius:12px}.button[data-size=md]{padding:10px 14px;gap:8px;border-radius:12px}.button[data-size=lg]{padding:12px 16px;gap:10px;border-radius:12px}.button[data-size=xl]{padding:16px 24px;gap:12px;border-radius:16px}.buttonText[data-size=sm]{width:24px;height:24px;padding:16px;gap:10px;flex-shrink:0}.buttonText[data-size=md]{width:40px;height:40px;padding:16px;gap:10px;flex-shrink:0}.buttonText[data-size=lg]{width:48px;height:48px;padding:16px;gap:10px;flex-shrink:0}.buttonText[data-size=xl]{width:56px;height:56px;padding:16px;gap:10px;flex-shrink:0}.button[data-colorHierarchy="brand/primary"]{background-color:var(--primary-main)}.button .input-typography{font-weight:700}.button[data-colorHierarchy="brand/primary"] .input-typography,.button[data-colorHierarchy="brand/primary"] span svg path{color:#fff;stroke:#fff}.button[data-colorHierarchy="gray/secondary"]{background-color:#f1f1f1}.button[data-colorHierarchy="gray/secondary"] .input-typography,.button[data-colorHierarchy="gray/secondary"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="white/secondary"]{background-color:#fff;box-shadow:0 1px 2px #1717170d;border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6)}.button[data-colorHierarchy="white/secondary"] .input-typography,.button[data-colorHierarchy="white/secondary"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="gray/linkContainer"]{background-color:#fff}.button[data-colorHierarchy="gray/linkContainer"] .input-typography,.button[data-colorHierarchy="gray/linkContainer"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="gray/link"]{background-color:#fff;padding:0 8px}.button[data-colorHierarchy="gray/link"] .input-typography,.button[data-colorHierarchy="gray/link"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="brand/link"]{background-color:#fff;padding:0 8px}.button[data-colorHierarchy="brand/link"] .input-typography,.button[data-colorHierarchy="brand/link"] span svg path{color:var(--primary-main);stroke:var(--primary-main)}.button[data-colorHierarchy="destructive/primary"]{background:var(--surface-error, #ea4621)}.button[data-colorHierarchy="destructive/primary"] .input-typography,.button[data-colorHierarchy="destructive/primary"] span svg path{color:#fff;stroke:#fff}.button[data-colorHierarchy="destructive/secondary"]{background:var(--surface-error-secondary, #fdece9)}.button[data-colorHierarchy="destructive/secondary"] .input-typography,.button[data-colorHierarchy="destructive/secondary"] span svg path{color:var(--text-error, #ea4621);stroke:var(--text-error, #ea4621)}.button[data-colorHierarchy="destructive/linkContainer"]{background-color:#fff}.button[data-colorHierarchy="destructive/linkContainer"] .input-typography,.button[data-colorHierarchy="destructive/linkContainer"] span svg path{color:var(--text-error, #ea4621);stroke:var(--text-error, #ea4621)}.button[data-colorHierarchy=""]{background-color:#fff;padding:0}.button[data-colorHierarchy=""] .input-typography,.button[data-colorHierarchy=""] span svg path{color:var(--text-error, #ea4621);stroke:var(--text-error, #ea4621)}.button[data-colorHierarchy="brand/primary"]:hover{background:var(--surface-primary-hover, #08379e)}.button[data-colorHierarchy="gray/secondary"]:hover{background:var(--surface-secondary-hover, #ececed)}.button[data-colorHierarchy="white/secondary"]:hover{background:var(--surface-white---hover, #f9f9f9)}.button[data-colorHierarchy="gray/linkContainer"]:hover{background:var(--surface-secondary, #f1f1f1)}.button[data-colorHierarchy="gray/link"]:hover,.button[data-colorHierarchy="brand/link"]:hover{background-color:#fff}.button[data-colorHierarchy="destructive/primary"]:hover{background:var(--surface-error-hover, #d33f1e)}.button[data-colorHierarchy="destructive/secondary"]:hover{background:var(--surface-error-secondary-hover, #fbdad3)}.button[data-colorHierarchy="destructive/linkContainer"]:hover{background:var(--colors-red-5, #fef6f4)}.button[data-colorHierarchy=""]:hover{background-color:#fff}.button[data-colorHierarchy="brand/primary"]:focus{box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.button[data-colorHierarchy="gray/secondary"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="white/secondary"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="gray/linkContainer"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="gray/link"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="brand/link"]:focus{box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.button[data-colorHierarchy="destructive/primary"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="destructive/secondary"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="destructive/linkContainer"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy=""]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="brand/primary"]:disabled{background:var(--surface-disabled, #f1f1f1)}.button:disabled .input-typography{color:var(--text-disabled, #939197)}.button:disabled span svg path{stroke:var(--text-disabled, #939197)}.button[data-colorHierarchy="gray/secondary"]:disabled{background:var(--surface-disabled, #f1f1f1)}.button[data-colorHierarchy="white/secondary"]:disabled{background:var(--surface-white---disabled, #fdfdfd)}.button[data-colorHierarchy="brand/link"]:disabled .input-typography,.button[data-colorHierarchy="brand/link"]:disabled span svg path{color:var(--text-action-disabled, #849ed7);stroke:var(--text-action-disabled, #849ed7)}.button[data-colorHierarchy="destructive/primary"]:disabled{background:var(--surface-error-disabled, #fdece9)}.button[data-colorHierarchy="destructive/primary"]:disabled .input-typography,.button[data-colorHierarchy="destructive/primary"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/secondary"]:disabled{background:var(--surface-error-disabled, #fdece9)}.button[data-colorHierarchy="destructive/secondary"]:disabled .input-typography,.button[data-colorHierarchy="destructive/secondary"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/linkContainer"]:disabled .input-typography,.button[data-colorHierarchy="destructive/linkContainer"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/link"]:disabled .input-typography,.button[data-colorHierarchy="destructive/link"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.TypographyCustom{color:#000}.TypographyCustom[data-bold=extrabold]{font-weight:800}.TypographyCustom[data-bold=bold]{font-weight:700}.TypographyCustom[data-bold=semibold]{font-weight:600}.TypographyCustom[data-bold=medium]{font-weight:500}.TypographyCustom[data-category=display][data-size=lg]{font-size:180px;font-style:normal;line-height:188px;letter-spacing:-9px}.TypographyCustom[data-category=display][data-size=md]{font-size:128px;font-style:normal;line-height:136px;letter-spacing:-5.12px}.TypographyCustom[data-category=display][data-size=sm]{font-size:96px;font-style:normal;line-height:104px;letter-spacing:-2.88px}.TypographyCustom[data-category=heading][data-size=xxl]{font-size:72px;font-style:normal;line-height:80px;letter-spacing:-1.44px}.TypographyCustom[data-category=heading][data-size=xl]{font-size:60px;font-style:normal;line-height:68px;letter-spacing:-1.08px}.TypographyCustom[data-category=heading][data-size=lg]{font-size:48px;font-style:normal;line-height:56px;letter-spacing:-.768px}.TypographyCustom[data-category=heading][data-size=md]{font-size:36px;font-style:normal;line-height:44px;letter-spacing:-.504px}.TypographyCustom[data-category=heading][data-size=sm]{font-size:30px;font-style:normal;line-height:38px;letter-spacing:-.39px}.TypographyCustom[data-category=heading][data-size=xs],.TypographyCustom[data-category=text][data-size=xxl]{font-size:24px;font-style:normal;line-height:32px;letter-spacing:-.288px}.TypographyCustom[data-category=text][data-size=xl]{font-size:20px;font-style:normal;line-height:28px;letter-spacing:-.2px}.TypographyCustom[data-category=text][data-size=lg]{font-size:18px;font-style:normal;line-height:24px;letter-spacing:-.144px}.TypographyCustom[data-category=text][data-size=md]{font-size:16px;font-style:normal;line-height:22px;letter-spacing:-.112px}.TypographyCustom[data-category=text][data-size=sm]{font-size:14px;font-style:normal;line-height:20px;letter-spacing:-.084px}.TypographyCustom[data-category=text][data-size=xs]{font-size:12px;font-style:normal;line-height:16px;letter-spacing:-.06px}.TypographyCustom[data-category=text][data-size=xxs]{font-size:10px;font-style:normal;line-height:14px;letter-spacing:-.04px}.custom-input{display:flex;flex-direction:row;padding:12px;align-items:center;gap:12px;width:100%;align-self:stretch;border-radius:var(--border-radius-radius-pre-lg, 12px);margin-top:8px;border:1px solid var(--border-default, #e6e6e6);background:var(--surface-white, #fff);box-shadow:0 1px 2px #1717170d}.custom-input input{width:100%;border:none}.custom-input input::placeholder{color:var(--text-disabled, #939197);font-weight:500}.custom-input input:hover,.custom-input input:focus,.custom-input input:active{border:none;outline:none}.custom-input .left-icon,.custom-input .right-icon{display:flex;align-items:center;justify-content:center}.custom-input .left-icon svg path,.custom-input .right-icon svg path{stroke:#939197}.custom-input:focus-within .left-icon svg path,.custom-input:focus-within .right-icon svg path{stroke:#000}.custom-input input{font-family:var(--font-family);color:var(--text-primary, #080808);font-weight:600;font-size:14px;font-style:normal}.custom-input .grey-box{margin:-12px;padding:12px;gap:6px;display:flex;flex-direction:row;background:#f9f9f9}.custom-input .grey-right-box{padding:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-left:1px solid #e6e6e6}.custom-input .grey-left-box{padding:12px 14px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-right:1px solid #e6e6e6}.custom-input select:focus{border:none;outline:none}.text-area-container{margin-top:8px;display:flex;padding:12px;flex-direction:column;gap:10px;flex:1 0 0;align-self:stretch;border-radius:16px;border:var(--border-radius-radius-3xs, 1px) solid var(--border-default, #e6e6e6);box-shadow:0 1px 2px #1717170d}.text-area-container:focus-within{border:var(--border-radius-radius-3xs, 1px) solid var(--primary-main, #0070f3);box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.text-area-container:has(textarea:disabled){background:var(--surface-disabled, #f1f1f1)}.text-area-container:hover{border:var(--border-radius-radius-3xs, 1px) solid var(--border-hover, #c9c9cc)}.text-area-container[data-error=true]{border:var(--border-radius-radius-3xs, 1px) solid var(--border-error, #ea4621);box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.custom-input:hover{border:var(--border-radius-radius-none, 1px) solid var(--border-hover, #c9c9cc);box-shadow:0 1px 2px #1717170d}.custom-input:focus-within{border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);background:var(--surface-white, #fff);box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.custom-input:has(input:disabled){border-radius:var(--border-radius-radius-pre-lg, 12px);border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);background:var(--surface-disabled, #f1f1f1)}.custom-input:has(input:disabled) input{color:var(--text-disabled, #939197)!important}.custom-input[data-error=true]{border:var(--border-radius-radius-none, 1px) solid var(--border-error, #ea4621);box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.blinq-checkbox input[data-size=sm]+.checkmark{width:16px;height:16px;border-radius:var(--border-radius-radius-sm, 6px);margin-bottom:6px}.blinq-checkbox input[data-size=md]+.checkmark{width:20px;height:20px;border-radius:var(--border-radius-radius-md, 8px);margin-bottom:6px}.blinq-checkbox input[data-size=lg]+.checkmark{width:24px;height:24px;border-radius:var(--border-radius-radius-md, 8px);margin-bottom:8px}.blinq-checkbox .checkmark{position:relative;top:4px;left:0;background-color:#fff;border-radius:8px}.blinq-checkbox input:checked~.checkmark{background:var(--surface-primary, #093DB0)}.blinq-checkbox .checkmark:after{border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-radius:1px}.blinq-checkbox input[data-size=lg]+.checkmark:after{left:8.5px;top:3.5px;width:6px;height:12px}.blinq-checkbox input[data-size=md]+.checkmark:after{left:6.5px;top:3.5px;width:5px;height:9px}.blinq-checkbox input[data-size=sm]+.checkmark:after{left:5px;top:3px;width:4px;height:7px}.blinq-checkbox:hover input:checked~.checkmark{background:var(--surface-primary-hover, #08379E)}.blinq-checkbox:hover input:not(:checked)~.checkmark{background-color:var(--surface-primary-lightest, #F3F5FB);border:1px solid var(--border-brand, #093DB0)}.blinq-checkbox input:focus~.checkmark{box-shadow:0 0 0 4px var(--primary-30, #B5C5E7)}.blinq-checkbox input:disabled~.checkmark{background:var(--surface-disabled, #F1F1F1);cursor:not-allowed;border:1px solid var(--border-default, #E6E6E6);box-shadow:none}.blinq-checkbox input~.checkmark{border:1px solid var(--border-default, #E6E6E6)}.blinq-checkbox input:disabled~.checkmark:after{border:solid #939197;border-width:0 2.7px 2.7px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-radius:1px}.blinq-checkbox{display:block;position:relative;margin-bottom:12px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.blinq-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.blinq-checkbox .checkmark:after{content:"";position:absolute;display:none}.blinq-checkbox input:checked~.checkmark:after{display:block}.blinq-radio-button input[data-size=sm]+.checkmark{width:16px;height:16px;border-radius:50%}.blinq-radio-button input[data-size=md]+.checkmark{width:20px;height:20px;border-radius:50%}.blinq-radio-button input[data-size=lg]+.checkmark{width:24px;height:24px;border-radius:50%}.blinq-radio-button .checkmark{position:absolute;top:4px;left:0;background-color:var(--surface-primary-lightest, #F3F5FB);border-radius:8px}.blinq-radio-button .checkmark:after{display:inline-block;border-radius:50%;left:50%;top:50%;background:var(--surface-primary, #093DB0);transform:translate(-50%,-50%);position:absolute}.blinq-radio-button input[data-size=lg]+.checkmark:after{width:12px;height:12px}.blinq-radio-button input[data-size=md]+.checkmark:after{width:10px;height:10px}.blinq-radio-button input[data-size=sm]+.checkmark:after{width:8px;height:8px}.blinq-radio-button:hover .checkmark:after{background:var(--surface-primary-hover, #08379E)}.blinq-radio-button input:focus~.checkmark{box-shadow:0 0 0 4px var(--primary-30, #B5C5E7)}.blinq-radio-button input:disabled~.checkmark{background:var(--surface-disabled, #F1F1F1);cursor:not-allowed;border:1px solid var(--border-default, #E6E6E6);box-shadow:none}.blinq-radio-button input~.checkmark{border:1px solid var(--border-brand, #093DB0)}.blinq-radio-button input:disabled .checkmark:after{display:inline-block;border-radius:50%;left:50%;top:50%;background:#939197;transform:translate(-50%,-50%);position:absolute}.blinq-radio-button{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.blinq-radio-button input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.blinq-radio-button .checkmark:after{content:"";position:absolute;display:none}.blinq-radio-button input:checked~.checkmark:after{display:block}.toggle-switch{display:inline-flex;background-color:#f5f5f5;border-radius:20px;padding:5px;cursor:pointer;transition:background-color 1s ease}.toggle-option{padding:10px 20px;border-radius:15px;font-weight:500;font-size:14px;color:#b9b9b9;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}.toggle-option.active{background-color:#fff;color:#000;box-shadow:0 2px 8px #0000001a}