@metropolle/design-system 1.0.0-beta.2026.1.24.924.ea29e2a → 1.0.0-beta.2026.1.25.110.a191d53

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.
@@ -3814,21 +3814,21 @@ html[data-theme="light"] .mds-profile-card__verified-trigger {
3814
3814
  right: calc(100% + 12px);
3815
3815
  transform: translateY(-50%);
3816
3816
  padding: 32px 40px;
3817
- /* Liquid Glass popup */
3818
- background: rgba(20, 20, 30, 0.9);
3819
- backdrop-filter: blur(24px) saturate(160%);
3820
- -webkit-backdrop-filter: blur(24px) saturate(160%);
3817
+ /* Same style as hamburger menu - frosted glass effect */
3818
+ background: rgba(28, 28, 30, 0.95);
3819
+ backdrop-filter: blur(20px) saturate(180%);
3820
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
3821
3821
  border-radius: 20px;
3822
- border: 1px solid rgba(255, 255, 255, 0.15);
3822
+ border: 1px solid rgba(255, 255, 255, 0.1);
3823
3823
  box-shadow:
3824
3824
  0 16px 48px rgba(0, 0, 0, 0.4),
3825
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
3825
+ inset 0 1px 0 rgba(255, 255, 255, 0.08);
3826
3826
  min-width: 320px;
3827
3827
  z-index: 100;
3828
3828
  }
3829
3829
 
3830
3830
  html[data-theme="light"] .mds-profile-card__verified-popup {
3831
- background: rgba(255, 255, 255, 0.92);
3831
+ background: rgba(255, 255, 255, 0.96);
3832
3832
  border: 1px solid rgba(255, 255, 255, 0.98);
3833
3833
  box-shadow:
3834
3834
  0 16px 48px rgba(0, 0, 0, 0.15),
@@ -3896,6 +3896,60 @@ html[data-theme="light"] .mds-profile-card__verified-popup {
3896
3896
  color: #00d4aa;
3897
3897
  }
3898
3898
 
3899
+ /* FEAT-090: Verification Score Checks */
3900
+ .mds-profile-card__verified-checks {
3901
+ display: flex;
3902
+ flex-direction: column;
3903
+ gap: 10px;
3904
+ margin: 16px 0;
3905
+ }
3906
+
3907
+ .mds-profile-card__check-item {
3908
+ display: flex;
3909
+ align-items: center;
3910
+ gap: 10px;
3911
+ font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
3912
+ font-size: 12px;
3913
+ letter-spacing: 0.04em;
3914
+ }
3915
+
3916
+ .mds-profile-card__check-icon {
3917
+ width: 18px;
3918
+ height: 18px;
3919
+ display: flex;
3920
+ align-items: center;
3921
+ justify-content: center;
3922
+ border-radius: 50%;
3923
+ font-size: 11px;
3924
+ font-weight: bold;
3925
+ background: rgba(255, 255, 255, 0.05);
3926
+ color: rgba(255, 255, 255, 0.3);
3927
+ flex-shrink: 0;
3928
+ }
3929
+
3930
+ .mds-profile-card__check-icon--passed {
3931
+ background: rgba(0, 212, 170, 0.15);
3932
+ color: #00d4aa;
3933
+ }
3934
+
3935
+ html[data-theme="light"] .mds-profile-card__check-icon {
3936
+ background: rgba(0, 0, 0, 0.05);
3937
+ color: rgba(0, 0, 0, 0.3);
3938
+ }
3939
+
3940
+ html[data-theme="light"] .mds-profile-card__check-icon--passed {
3941
+ background: rgba(0, 180, 140, 0.15);
3942
+ color: #00b48c;
3943
+ }
3944
+
3945
+ .mds-profile-card__check-label {
3946
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
3947
+ }
3948
+
3949
+ html[data-theme="light"] .mds-profile-card__check-label {
3950
+ color: rgba(0, 0, 0, 0.7);
3951
+ }
3952
+
3899
3953
  .mds-profile-card__verified-footer {
3900
3954
  display: flex;
3901
3955
  justify-content: space-between;
@@ -3987,6 +4041,16 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
3987
4041
  transform: none;
3988
4042
  justify-content: center;
3989
4043
  margin-top: 16px;
4044
+ flex-direction: column;
4045
+ align-items: center;
4046
+ gap: 12px;
4047
+ }
4048
+
4049
+ /* Info dots: horizontal on mobile */
4050
+ .mds-profile-card__info-dots {
4051
+ flex-direction: row;
4052
+ gap: 8px;
4053
+ margin-top: 8px;
3990
4054
  }
3991
4055
 
3992
4056
  .mds-profile-card__social {
@@ -4033,11 +4097,11 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
4033
4097
  .mds-profile-card__photo-modal {
4034
4098
  position: fixed;
4035
4099
  inset: 0;
4036
- z-index: 9999;
4100
+ z-index: 99999; /* Higher z-index to cover everything including header */
4037
4101
  display: flex;
4038
4102
  align-items: center;
4039
4103
  justify-content: center;
4040
- padding: 24px;
4104
+ padding: 16px;
4041
4105
  cursor: pointer;
4042
4106
  animation: mds-photo-modal-fade-in 0.25s ease-out;
4043
4107
  }
@@ -4052,17 +4116,18 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
4052
4116
  }
4053
4117
 
4054
4118
  .mds-profile-card__photo-modal-backdrop {
4055
- position: absolute;
4119
+ position: fixed;
4056
4120
  inset: 0;
4057
- background: rgba(10, 10, 15, 0.6);
4058
- backdrop-filter: blur(20px) saturate(120%);
4059
- -webkit-backdrop-filter: blur(20px) saturate(120%);
4121
+ /* Stronger blur to cover entire page including header */
4122
+ background: rgba(0, 0, 0, 0.75);
4123
+ backdrop-filter: blur(30px) saturate(100%);
4124
+ -webkit-backdrop-filter: blur(30px) saturate(100%);
4060
4125
  }
4061
4126
 
4062
4127
  html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
4063
- background: rgba(255, 255, 255, 0.5);
4064
- backdrop-filter: blur(20px) saturate(140%);
4065
- -webkit-backdrop-filter: blur(20px) saturate(140%);
4128
+ background: rgba(255, 255, 255, 0.7);
4129
+ backdrop-filter: blur(30px) saturate(120%);
4130
+ -webkit-backdrop-filter: blur(30px) saturate(120%);
4066
4131
  }
4067
4132
 
4068
4133
  .mds-profile-card__photo-modal-content {
@@ -4070,8 +4135,11 @@ html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
4070
4135
  display: flex;
4071
4136
  align-items: center;
4072
4137
  justify-content: center;
4138
+ /* Desktop: 90% of viewport */
4073
4139
  max-width: 90vw;
4074
4140
  max-height: 90vh;
4141
+ width: auto;
4142
+ height: auto;
4075
4143
  animation: mds-photo-modal-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
4076
4144
  }
4077
4145
 
@@ -4087,25 +4155,518 @@ html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
4087
4155
  }
4088
4156
 
4089
4157
  .mds-profile-card__photo-modal-image {
4090
- max-width: 100%;
4091
- max-height: 90vh;
4158
+ /* Fill available space while maintaining aspect ratio */
4159
+ width: auto;
4160
+ height: auto;
4161
+ max-width: 90vw;
4162
+ max-height: 85vh;
4092
4163
  -o-object-fit: contain;
4093
4164
  object-fit: contain;
4094
- border-radius: 20px;
4165
+ border-radius: 16px;
4095
4166
  /* Liquid Glass frame */
4096
4167
  background: rgba(255, 255, 255, 0.03);
4097
- border: 1px solid rgba(255, 255, 255, 0.1);
4168
+ border: 1px solid rgba(255, 255, 255, 0.15);
4098
4169
  box-shadow:
4099
- 0 25px 80px rgba(0, 0, 0, 0.4),
4100
- 0 10px 30px rgba(0, 0, 0, 0.2),
4170
+ 0 25px 80px rgba(0, 0, 0, 0.5),
4171
+ 0 10px 30px rgba(0, 0, 0, 0.3),
4101
4172
  inset 0 1px 0 rgba(255, 255, 255, 0.1);
4102
4173
  }
4103
4174
 
4104
4175
  html[data-theme="light"] .mds-profile-card__photo-modal-image {
4105
4176
  background: rgba(255, 255, 255, 0.1);
4106
- border-color: rgba(255, 255, 255, 0.8);
4177
+ border-color: rgba(0, 0, 0, 0.1);
4107
4178
  box-shadow:
4108
- 0 25px 80px rgba(0, 0, 0, 0.15),
4109
- 0 10px 30px rgba(0, 0, 0, 0.08),
4179
+ 0 25px 80px rgba(0, 0, 0, 0.2),
4180
+ 0 10px 30px rgba(0, 0, 0, 0.1),
4110
4181
  inset 0 1px 0 rgba(255, 255, 255, 1);
4111
4182
  }
4183
+
4184
+ /* Mobile: Photo expands to fill screen width */
4185
+ @media (max-width: 700px) {
4186
+ .mds-profile-card__photo-modal {
4187
+ padding: 12px;
4188
+ }
4189
+
4190
+ .mds-profile-card__photo-modal-content {
4191
+ max-width: 96vw;
4192
+ max-height: 85vh;
4193
+ }
4194
+
4195
+ .mds-profile-card__photo-modal-image {
4196
+ max-width: 96vw;
4197
+ max-height: 80vh;
4198
+ border-radius: 12px;
4199
+ }
4200
+ }
4201
+
4202
+ /* =============================================================================
4203
+ FEAT-090: Verification Score Components (Settings Page)
4204
+ ============================================================================= */
4205
+
4206
+ .mds-verification-score-display {
4207
+ display: flex;
4208
+ flex-direction: column;
4209
+ align-items: center;
4210
+ gap: 8px;
4211
+ padding: 24px 40px;
4212
+ border-radius: 16px;
4213
+ background: rgba(255, 255, 255, 0.05);
4214
+ border: 1px solid rgba(255, 255, 255, 0.1);
4215
+ }
4216
+
4217
+ html[data-theme="light"] .mds-verification-score-display {
4218
+ background: rgba(0, 0, 0, 0.02);
4219
+ border-color: rgba(0, 0, 0, 0.1);
4220
+ }
4221
+
4222
+ .mds-verification-score-number {
4223
+ font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
4224
+ font-size: 4rem;
4225
+ font-weight: bold;
4226
+ line-height: 1;
4227
+ color: #00d4aa;
4228
+ }
4229
+
4230
+ html[data-theme="light"] .mds-verification-score-number {
4231
+ color: #00b48c;
4232
+ }
4233
+
4234
+ .mds-verification-score-label {
4235
+ font-size: 0.875rem;
4236
+ text-transform: uppercase;
4237
+ letter-spacing: 0.1em;
4238
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
4239
+ }
4240
+
4241
+ .mds-verification-checks-grid {
4242
+ display: flex;
4243
+ flex-direction: column;
4244
+ gap: 12px;
4245
+ }
4246
+
4247
+ .mds-verification-check-card {
4248
+ display: flex;
4249
+ align-items: center;
4250
+ gap: 16px;
4251
+ padding: 16px 20px;
4252
+ border-radius: 12px;
4253
+ background: rgba(255, 255, 255, 0.03);
4254
+ border: 1px solid rgba(255, 255, 255, 0.08);
4255
+ transition: all 0.2s ease;
4256
+ }
4257
+
4258
+ html[data-theme="light"] .mds-verification-check-card {
4259
+ background: rgba(0, 0, 0, 0.02);
4260
+ border-color: rgba(0, 0, 0, 0.06);
4261
+ }
4262
+
4263
+ .mds-verification-check-card--passed {
4264
+ background: rgba(0, 212, 170, 0.05);
4265
+ border-color: rgba(0, 212, 170, 0.2);
4266
+ }
4267
+
4268
+ html[data-theme="light"] .mds-verification-check-card--passed {
4269
+ background: rgba(0, 180, 140, 0.05);
4270
+ border-color: rgba(0, 180, 140, 0.2);
4271
+ }
4272
+
4273
+ .mds-verification-check-icon {
4274
+ width: 32px;
4275
+ height: 32px;
4276
+ display: flex;
4277
+ align-items: center;
4278
+ justify-content: center;
4279
+ border-radius: 50%;
4280
+ font-size: 16px;
4281
+ font-weight: bold;
4282
+ background: rgba(255, 255, 255, 0.05);
4283
+ color: rgba(255, 255, 255, 0.3);
4284
+ flex-shrink: 0;
4285
+ }
4286
+
4287
+ .mds-verification-check-card--passed .mds-verification-check-icon {
4288
+ background: rgba(0, 212, 170, 0.15);
4289
+ color: #00d4aa;
4290
+ }
4291
+
4292
+ html[data-theme="light"] .mds-verification-check-icon {
4293
+ background: rgba(0, 0, 0, 0.05);
4294
+ color: rgba(0, 0, 0, 0.3);
4295
+ }
4296
+
4297
+ html[data-theme="light"] .mds-verification-check-card--passed .mds-verification-check-icon {
4298
+ background: rgba(0, 180, 140, 0.15);
4299
+ color: #00b48c;
4300
+ }
4301
+
4302
+ .mds-verification-check-content {
4303
+ flex: 1;
4304
+ min-width: 0;
4305
+ }
4306
+
4307
+ .mds-verification-check-action {
4308
+ flex-shrink: 0;
4309
+ }
4310
+
4311
+ /* =============================================================================
4312
+ FEAT-090: Verification Tab (Modal/Backoffice)
4313
+ ============================================================================= */
4314
+
4315
+ .mds-verification-tab {
4316
+ display: flex;
4317
+ flex-direction: column;
4318
+ gap: 20px;
4319
+ padding: 8px 0;
4320
+ }
4321
+
4322
+ .mds-verification-score-header {
4323
+ display: flex;
4324
+ align-items: center;
4325
+ gap: 20px;
4326
+ padding: 20px;
4327
+ background: rgba(0, 212, 170, 0.05);
4328
+ border: 1px solid rgba(0, 212, 170, 0.15);
4329
+ border-radius: 12px;
4330
+ }
4331
+
4332
+ .mds-verification-score-badge {
4333
+ display: flex;
4334
+ flex-direction: column;
4335
+ align-items: center;
4336
+ gap: 4px;
4337
+ padding: 16px 24px;
4338
+ background: rgba(0, 212, 170, 0.1);
4339
+ border-radius: 10px;
4340
+ }
4341
+
4342
+ .mds-verification-score-badge .mds-verification-score-number {
4343
+ display: block;
4344
+ font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
4345
+ font-size: 2.5rem;
4346
+ font-weight: bold;
4347
+ line-height: 1;
4348
+ color: #00d4aa;
4349
+ text-align: center;
4350
+ }
4351
+
4352
+ .mds-verification-score-badge .mds-verification-score-label {
4353
+ display: block;
4354
+ font-size: 0.75rem;
4355
+ text-transform: uppercase;
4356
+ letter-spacing: 0.1em;
4357
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
4358
+ text-align: center;
4359
+ margin-top: 4px;
4360
+ }
4361
+
4362
+ .mds-verification-score-info {
4363
+ flex: 1;
4364
+ }
4365
+
4366
+ .mds-verification-checks-list {
4367
+ display: flex;
4368
+ flex-direction: column;
4369
+ gap: 10px;
4370
+ }
4371
+
4372
+ .mds-verification-check-item {
4373
+ display: flex;
4374
+ align-items: center;
4375
+ gap: 14px;
4376
+ padding: 14px 16px;
4377
+ background: rgba(255, 255, 255, 0.03);
4378
+ border: 1px solid rgba(255, 255, 255, 0.08);
4379
+ border-radius: 10px;
4380
+ transition: all 0.2s ease;
4381
+ }
4382
+
4383
+ .mds-verification-check-item--passed {
4384
+ background: rgba(0, 212, 170, 0.05);
4385
+ border-color: rgba(0, 212, 170, 0.2);
4386
+ }
4387
+
4388
+ .mds-verification-check-status {
4389
+ display: flex;
4390
+ align-items: center;
4391
+ justify-content: center;
4392
+ width: 28px;
4393
+ height: 28px;
4394
+ border-radius: 50%;
4395
+ background: rgba(255, 255, 255, 0.05);
4396
+ color: rgba(255, 255, 255, 0.3);
4397
+ flex-shrink: 0;
4398
+ }
4399
+
4400
+ .mds-verification-check-item--passed .mds-verification-check-status {
4401
+ background: rgba(0, 212, 170, 0.15);
4402
+ color: #00d4aa;
4403
+ }
4404
+
4405
+ .mds-verification-check-content {
4406
+ flex: 1;
4407
+ min-width: 0;
4408
+ }
4409
+
4410
+ .mds-verification-check-item .mds-btn {
4411
+ flex-shrink: 0;
4412
+ margin-left: auto;
4413
+ }
4414
+
4415
+ .mds-verification-check-item .mds-btn--sm {
4416
+ padding: 6px 12px;
4417
+ font-size: 0.75rem;
4418
+ }
4419
+
4420
+ html[data-theme="light"] .mds-verification-score-header {
4421
+ background: rgba(0, 180, 140, 0.05);
4422
+ border-color: rgba(0, 180, 140, 0.15);
4423
+ }
4424
+
4425
+ html[data-theme="light"] .mds-verification-score-badge {
4426
+ background: rgba(0, 180, 140, 0.1);
4427
+ }
4428
+
4429
+ html[data-theme="light"] .mds-verification-score-badge .mds-verification-score-number {
4430
+ color: #00b48c;
4431
+ }
4432
+
4433
+ html[data-theme="light"] .mds-verification-check-item {
4434
+ background: rgba(0, 0, 0, 0.02);
4435
+ border-color: rgba(0, 0, 0, 0.06);
4436
+ }
4437
+
4438
+ html[data-theme="light"] .mds-verification-check-item--passed {
4439
+ background: rgba(0, 180, 140, 0.05);
4440
+ border-color: rgba(0, 180, 140, 0.15);
4441
+ }
4442
+
4443
+ html[data-theme="light"] .mds-verification-check-status {
4444
+ background: rgba(0, 0, 0, 0.05);
4445
+ color: rgba(0, 0, 0, 0.3);
4446
+ }
4447
+
4448
+ html[data-theme="light"] .mds-verification-check-item--passed .mds-verification-check-status {
4449
+ background: rgba(0, 180, 140, 0.15);
4450
+ color: #00b48c;
4451
+ }
4452
+
4453
+ /* =============================================================================
4454
+ FEAT-090: VerificationScoreCard Component (Unified)
4455
+ Used by ProfileCard popup, @front settings, @back UserIdentityModal
4456
+ ============================================================================= */
4457
+
4458
+ /* Compact Popup Variant (ProfileCard) */
4459
+ .mds-verification-popup {
4460
+ min-width: 200px;
4461
+ }
4462
+
4463
+ .mds-verification-popup__header {
4464
+ font-size: 0.875rem;
4465
+ font-weight: 600;
4466
+ color: var(--mds-color-text-primary, #fff);
4467
+ padding-bottom: 12px;
4468
+ margin-bottom: 12px;
4469
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
4470
+ }
4471
+
4472
+ html[data-theme="light"] .mds-verification-popup__header {
4473
+ color: var(--mds-color-text-primary, #1f2937);
4474
+ border-bottom-color: rgba(0, 0, 0, 0.1);
4475
+ }
4476
+
4477
+ .mds-verification-popup__checks {
4478
+ display: flex;
4479
+ flex-direction: column;
4480
+ gap: 8px;
4481
+ }
4482
+
4483
+ .mds-verification-popup__footer {
4484
+ display: flex;
4485
+ justify-content: space-between;
4486
+ align-items: center;
4487
+ padding-top: 12px;
4488
+ margin-top: 12px;
4489
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
4490
+ font-size: 0.75rem;
4491
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
4492
+ }
4493
+
4494
+ html[data-theme="light"] .mds-verification-popup__footer {
4495
+ border-top-color: rgba(0, 0, 0, 0.1);
4496
+ color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
4497
+ }
4498
+
4499
+ .mds-verification-popup__sequence,
4500
+ .mds-verification-popup__date {
4501
+ font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
4502
+ }
4503
+
4504
+ /* Compact Check Item (for popup) */
4505
+ .mds-verification-check-item--compact {
4506
+ display: flex;
4507
+ align-items: center;
4508
+ gap: 8px;
4509
+ padding: 4px 0;
4510
+ }
4511
+
4512
+ .mds-verification-check-icon {
4513
+ width: 18px;
4514
+ height: 18px;
4515
+ display: flex;
4516
+ align-items: center;
4517
+ justify-content: center;
4518
+ font-size: 12px;
4519
+ font-weight: bold;
4520
+ color: rgba(255, 255, 255, 0.3);
4521
+ }
4522
+
4523
+ .mds-verification-check-icon--passed {
4524
+ color: #00d4aa;
4525
+ }
4526
+
4527
+ html[data-theme="light"] .mds-verification-check-icon {
4528
+ color: rgba(0, 0, 0, 0.3);
4529
+ }
4530
+
4531
+ html[data-theme="light"] .mds-verification-check-icon--passed {
4532
+ color: #00b48c;
4533
+ }
4534
+
4535
+ .mds-verification-check-label {
4536
+ font-size: 0.8125rem;
4537
+ color: var(--mds-color-text-primary, #fff);
4538
+ }
4539
+
4540
+ html[data-theme="light"] .mds-verification-check-label {
4541
+ color: var(--mds-color-text-primary, #1f2937);
4542
+ }
4543
+
4544
+ /* Full Card Variant */
4545
+ .mds-verification-card {
4546
+ display: flex;
4547
+ flex-direction: column;
4548
+ gap: 20px;
4549
+ }
4550
+
4551
+ .mds-verification-card__header {
4552
+ display: flex;
4553
+ align-items: center;
4554
+ gap: 20px;
4555
+ padding: 20px;
4556
+ background: rgba(0, 212, 170, 0.05);
4557
+ border: 1px solid rgba(0, 212, 170, 0.15);
4558
+ border-radius: 12px;
4559
+ }
4560
+
4561
+ html[data-theme="light"] .mds-verification-card__header {
4562
+ background: rgba(0, 180, 140, 0.05);
4563
+ border-color: rgba(0, 180, 140, 0.15);
4564
+ }
4565
+
4566
+ .mds-verification-card__badge {
4567
+ display: flex;
4568
+ flex-direction: column;
4569
+ align-items: center;
4570
+ gap: 4px;
4571
+ padding: 16px 24px;
4572
+ background: rgba(0, 212, 170, 0.1);
4573
+ border-radius: 10px;
4574
+ }
4575
+
4576
+ html[data-theme="light"] .mds-verification-card__badge {
4577
+ background: rgba(0, 180, 140, 0.1);
4578
+ }
4579
+
4580
+ .mds-verification-card__badge-label {
4581
+ font-size: 0.75rem;
4582
+ text-transform: uppercase;
4583
+ letter-spacing: 0.1em;
4584
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
4585
+ }
4586
+
4587
+ .mds-verification-card__badge-score {
4588
+ font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
4589
+ font-size: 2.5rem;
4590
+ font-weight: bold;
4591
+ line-height: 1;
4592
+ color: #00d4aa;
4593
+ }
4594
+
4595
+ html[data-theme="light"] .mds-verification-card__badge-score {
4596
+ color: #00b48c;
4597
+ }
4598
+
4599
+ .mds-verification-card__title {
4600
+ flex: 1;
4601
+ }
4602
+
4603
+ .mds-verification-card__heading {
4604
+ margin: 0 0 4px 0;
4605
+ font-size: 1.125rem;
4606
+ font-weight: 600;
4607
+ color: var(--mds-color-text-primary, #fff);
4608
+ }
4609
+
4610
+ html[data-theme="light"] .mds-verification-card__heading {
4611
+ color: var(--mds-color-text-primary, #1f2937);
4612
+ }
4613
+
4614
+ .mds-verification-card__subtitle {
4615
+ margin: 0;
4616
+ font-size: 0.875rem;
4617
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
4618
+ }
4619
+
4620
+ html[data-theme="light"] .mds-verification-card__subtitle {
4621
+ color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
4622
+ }
4623
+
4624
+ .mds-verification-card__error {
4625
+ padding: 12px 16px;
4626
+ background: rgba(220, 38, 38, 0.1);
4627
+ border: 1px solid rgba(220, 38, 38, 0.2);
4628
+ border-radius: 8px;
4629
+ color: #ef4444;
4630
+ font-size: 0.875rem;
4631
+ }
4632
+
4633
+ .mds-verification-card__checks {
4634
+ display: flex;
4635
+ flex-direction: column;
4636
+ gap: 10px;
4637
+ }
4638
+
4639
+ .mds-verification-check-description {
4640
+ display: block;
4641
+ font-size: 0.9375rem;
4642
+ color: var(--mds-color-text-primary, #fff);
4643
+ }
4644
+
4645
+ html[data-theme="light"] .mds-verification-check-description {
4646
+ color: var(--mds-color-text-primary, #1f2937);
4647
+ }
4648
+
4649
+ .mds-verification-check-points {
4650
+ display: block;
4651
+ font-size: 0.8125rem;
4652
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
4653
+ margin-top: 2px;
4654
+ }
4655
+
4656
+ html[data-theme="light"] .mds-verification-check-points {
4657
+ color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
4658
+ }
4659
+
4660
+ .mds-verification-card__info {
4661
+ margin: 0;
4662
+ padding: 16px;
4663
+ background: rgba(255, 255, 255, 0.03);
4664
+ border-radius: 8px;
4665
+ font-size: 0.875rem;
4666
+ color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
4667
+ }
4668
+
4669
+ html[data-theme="light"] .mds-verification-card__info {
4670
+ background: rgba(0, 0, 0, 0.02);
4671
+ color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
4672
+ }
@@ -6,6 +6,7 @@
6
6
  * @package @metropolle/design-system
7
7
  */
8
8
  import React from 'react';
9
+ import { VerificationCheck } from '../VerificationScore';
9
10
  export interface ProfileCardUser {
10
11
  identity_id: string;
11
12
  full_name: string;
@@ -26,6 +27,14 @@ export interface ProfileCardUser {
26
27
  photo_url_full?: string;
27
28
  registration_sequence?: number;
28
29
  mfa_enabled?: boolean;
30
+ verification_score?: VerificationScore;
31
+ }
32
+ export type { VerificationCheck } from '../VerificationScore';
33
+ export interface VerificationScore {
34
+ score: number;
35
+ max_score: number;
36
+ breakdown: Record<string, boolean>;
37
+ checks: VerificationCheck[];
29
38
  }
30
39
  export interface ProfileCardProps {
31
40
  /** User data to display */
@@ -1 +1 @@
1
- {"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ProfileCard/ProfileCard.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,eAAe;IAE9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,eAAe,CAAC;IAEtB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAwID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CA6QlB;AAED,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ProfileCard/ProfileCard.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOhF,MAAM,WAAW,eAAe;IAE9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;CACxC;AAGD,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,eAAe,CAAC;IAEtB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAyID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CA4TlB;AAED,eAAe,WAAW,CAAC"}