@empathyco/x-components 6.0.0-alpha.81 → 6.0.0-alpha.83

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.
@@ -15,6 +15,25 @@
15
15
  .x-normal-case {
16
16
  text-transform: none;
17
17
  }
18
+ .x-underline {
19
+ -webkit-text-decoration-line: underline;
20
+ text-decoration-line: underline;
21
+ }
22
+
23
+ .x-overline {
24
+ -webkit-text-decoration-line: overline;
25
+ text-decoration-line: overline;
26
+ }
27
+
28
+ .x-line-through {
29
+ -webkit-text-decoration-line: line-through;
30
+ text-decoration-line: line-through;
31
+ }
32
+
33
+ .x-no-underline {
34
+ -webkit-text-decoration-line: none;
35
+ text-decoration-line: none;
36
+ }
18
37
  .x-static {
19
38
  position: static !important;
20
39
  }
@@ -937,25 +956,6 @@
937
956
  [dir="rtl"] .x-margin--left-20 {
938
957
  margin-right: var(--x-size-base-20) !important;
939
958
  }
940
- .x-underline {
941
- -webkit-text-decoration-line: underline;
942
- text-decoration-line: underline;
943
- }
944
-
945
- .x-overline {
946
- -webkit-text-decoration-line: overline;
947
- text-decoration-line: overline;
948
- }
949
-
950
- .x-line-through {
951
- -webkit-text-decoration-line: line-through;
952
- text-decoration-line: line-through;
953
- }
954
-
955
- .x-no-underline {
956
- -webkit-text-decoration-line: none;
957
- text-decoration-line: none;
958
- }
959
959
  .x-line-height--none {
960
960
  line-height: 1 !important;
961
961
  }
@@ -1806,49 +1806,6 @@
1806
1806
  .x-border-width--left-10 {
1807
1807
  border-style: solid !important;
1808
1808
  }
1809
- .x-border-color--lead {
1810
- border-color: var(--x-color-base-lead) !important;
1811
- }
1812
-
1813
- .x-border-color--auxiliary {
1814
- border-color: var(--x-color-base-auxiliary) !important;
1815
- }
1816
-
1817
- .x-border-color--neutral-10 {
1818
- border-color: var(--x-color-base-neutral-10) !important;
1819
- }
1820
-
1821
- .x-border-color--neutral-35 {
1822
- border-color: var(--x-color-base-neutral-35) !important;
1823
- }
1824
-
1825
- .x-border-color--neutral-70 {
1826
- border-color: var(--x-color-base-neutral-70) !important;
1827
- }
1828
-
1829
- .x-border-color--neutral-95 {
1830
- border-color: var(--x-color-base-neutral-95) !important;
1831
- }
1832
-
1833
- .x-border-color--neutral-100 {
1834
- border-color: var(--x-color-base-neutral-100) !important;
1835
- }
1836
-
1837
- .x-border-color--accent {
1838
- border-color: var(--x-color-base-accent) !important;
1839
- }
1840
-
1841
- .x-border-color--enable {
1842
- border-color: var(--x-color-base-enable) !important;
1843
- }
1844
-
1845
- .x-border-color--disable {
1846
- border-color: var(--x-color-base-disable) !important;
1847
- }
1848
-
1849
- .x-border-color--transparent {
1850
- border-color: var(--x-color-base-transparent) !important;
1851
- }
1852
1809
  .x-border-radius--00 {
1853
1810
  border-radius: 0 !important;
1854
1811
  }
@@ -3357,20 +3314,48 @@
3357
3314
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3358
3315
  border-bottom-left-radius: var(--x-size-base-20) !important;
3359
3316
  }
3360
- .x-text--stroke.x-text {
3361
- --x-string-text-decoration: line-through;
3317
+ .x-border-color--lead {
3318
+ border-color: var(--x-color-base-lead) !important;
3362
3319
  }
3363
- .x-text--stroke.x-title1 {
3364
- --x-string-text-decoration-title1: line-through;
3320
+
3321
+ .x-border-color--auxiliary {
3322
+ border-color: var(--x-color-base-auxiliary) !important;
3365
3323
  }
3366
- .x-text--stroke.x-title2 {
3367
- --x-string-text-decoration-title2: line-through;
3324
+
3325
+ .x-border-color--neutral-10 {
3326
+ border-color: var(--x-color-base-neutral-10) !important;
3368
3327
  }
3369
- .x-text--stroke.x-title3 {
3370
- --x-string-text-decoration-title3: line-through;
3328
+
3329
+ .x-border-color--neutral-35 {
3330
+ border-color: var(--x-color-base-neutral-35) !important;
3371
3331
  }
3372
- .x-text--stroke.x-small {
3373
- --x-string-text-decoration-small: line-through;
3332
+
3333
+ .x-border-color--neutral-70 {
3334
+ border-color: var(--x-color-base-neutral-70) !important;
3335
+ }
3336
+
3337
+ .x-border-color--neutral-95 {
3338
+ border-color: var(--x-color-base-neutral-95) !important;
3339
+ }
3340
+
3341
+ .x-border-color--neutral-100 {
3342
+ border-color: var(--x-color-base-neutral-100) !important;
3343
+ }
3344
+
3345
+ .x-border-color--accent {
3346
+ border-color: var(--x-color-base-accent) !important;
3347
+ }
3348
+
3349
+ .x-border-color--enable {
3350
+ border-color: var(--x-color-base-enable) !important;
3351
+ }
3352
+
3353
+ .x-border-color--disable {
3354
+ border-color: var(--x-color-base-disable) !important;
3355
+ }
3356
+
3357
+ .x-border-color--transparent {
3358
+ border-color: var(--x-color-base-transparent) !important;
3374
3359
  }
3375
3360
  .x-background--lead {
3376
3361
  background-color: var(--x-color-base-lead) !important;
@@ -3415,6 +3400,21 @@
3415
3400
  .x-background--transparent {
3416
3401
  background-color: var(--x-color-base-transparent) !important;
3417
3402
  }
3403
+ .x-text--stroke.x-text {
3404
+ --x-string-text-decoration: line-through;
3405
+ }
3406
+ .x-text--stroke.x-title1 {
3407
+ --x-string-text-decoration-title1: line-through;
3408
+ }
3409
+ .x-text--stroke.x-title2 {
3410
+ --x-string-text-decoration-title2: line-through;
3411
+ }
3412
+ .x-text--stroke.x-title3 {
3413
+ --x-string-text-decoration-title3: line-through;
3414
+ }
3415
+ .x-text--stroke.x-small {
3416
+ --x-string-text-decoration-small: line-through;
3417
+ }
3418
3418
  :root {
3419
3419
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3420
3420
  }
@@ -3940,6 +3940,13 @@
3940
3940
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3941
3941
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3942
3942
  }
3943
+ :root {
3944
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3945
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3946
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3947
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3948
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3949
+ }
3943
3950
 
3944
3951
  .x-tag--card.x-tag,
3945
3952
  .x-tag--card .x-tag {
@@ -3951,13 +3958,6 @@
3951
3958
  );
3952
3959
  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3953
3960
  }
3954
- :root {
3955
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3956
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3957
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3958
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3959
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3960
- }
3961
3961
  :root {
3962
3962
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3963
3963
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -4433,6 +4433,51 @@
4433
4433
  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4434
4434
  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4435
4435
  }
4436
+ :root {
4437
+ --x-string-overflow-scroll: auto;
4438
+ --x-color-background-scroll-bar: transparent;
4439
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4440
+ --x-color-background-scroll-bar-hover: transparent;
4441
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4442
+ }
4443
+ :root {
4444
+ --x-string-overflow-scroll: auto;
4445
+ --x-color-background-scroll-bar: transparent;
4446
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4447
+ --x-color-background-scroll-bar-hover: transparent;
4448
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4449
+ }
4450
+
4451
+ .x-scroll {
4452
+ overflow-y: var(--x-string-overflow-scroll);
4453
+ }
4454
+ @media (hover: hover) {
4455
+ .x-scroll {
4456
+ scrollbar-width: auto;
4457
+ scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4458
+ }
4459
+ .x-scroll::-webkit-scrollbar {
4460
+ width: 17px;
4461
+ }
4462
+ .x-scroll::-webkit-scrollbar-track {
4463
+ background: var(--x-color-background-scroll-bar);
4464
+ }
4465
+ .x-scroll::-webkit-scrollbar-thumb {
4466
+ width: 5px;
4467
+ border-radius: 15px;
4468
+ background: var(--x-color-thumb-scroll-bar);
4469
+ background-clip: content-box;
4470
+ border: solid 4px rgba(0, 0, 0, 0.00001);
4471
+ }
4472
+ .x-scroll:hover {
4473
+ --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4474
+ --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4475
+ }
4476
+ }
4477
+
4478
+ .x-base-scroll {
4479
+ overflow-y: var(--x-string-overflow-scroll, auto);
4480
+ }
4436
4481
  .x-sliding-panel {
4437
4482
  z-index: 0;
4438
4483
  background-color: var(--x-color-background-sliding-panel);
@@ -4487,51 +4532,6 @@
4487
4532
  opacity: 1;
4488
4533
  pointer-events: all;
4489
4534
  }
4490
- :root {
4491
- --x-string-overflow-scroll: auto;
4492
- --x-color-background-scroll-bar: transparent;
4493
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4494
- --x-color-background-scroll-bar-hover: transparent;
4495
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4496
- }
4497
- :root {
4498
- --x-string-overflow-scroll: auto;
4499
- --x-color-background-scroll-bar: transparent;
4500
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4501
- --x-color-background-scroll-bar-hover: transparent;
4502
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4503
- }
4504
-
4505
- .x-scroll {
4506
- overflow-y: var(--x-string-overflow-scroll);
4507
- }
4508
- @media (hover: hover) {
4509
- .x-scroll {
4510
- scrollbar-width: auto;
4511
- scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4512
- }
4513
- .x-scroll::-webkit-scrollbar {
4514
- width: 17px;
4515
- }
4516
- .x-scroll::-webkit-scrollbar-track {
4517
- background: var(--x-color-background-scroll-bar);
4518
- }
4519
- .x-scroll::-webkit-scrollbar-thumb {
4520
- width: 5px;
4521
- border-radius: 15px;
4522
- background: var(--x-color-thumb-scroll-bar);
4523
- background-clip: content-box;
4524
- border: solid 4px rgba(0, 0, 0, 0.00001);
4525
- }
4526
- .x-scroll:hover {
4527
- --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4528
- --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4529
- }
4530
- }
4531
-
4532
- .x-base-scroll {
4533
- overflow-y: var(--x-string-overflow-scroll, auto);
4534
- }
4535
4535
  /* @deprecated */
4536
4536
  :root {
4537
4537
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4846,14 +4846,31 @@
4846
4846
  --x-size-border-width-result-description-default: 0;
4847
4847
  --x-size-border-width-result-picture-default: 0;
4848
4848
  }
4849
-
4850
- .x-result {
4851
- display: grid;
4852
- grid-template-columns: [result-start] 1fr [result-end];
4853
- grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
4854
- box-sizing: border-box;
4855
- background-color: var(--x-color-background-result-default);
4856
- border-color: var(--x-color-border-result-default);
4849
+ :root {
4850
+ --x-color-border-result-default: var(--x-color-base-lead);
4851
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4852
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4853
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4854
+ --x-color-background-result-default: transparent;
4855
+ --x-size-padding-result-default: 0;
4856
+ --x-size-padding-result-overlay-default: 0;
4857
+ --x-size-padding-result-description-default: 0;
4858
+ --x-size-gap-result-default: var(--x-size-base-03);
4859
+ --x-size-padding-result-picture-default: 0;
4860
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4861
+ --x-size-border-width-result-default: 0;
4862
+ --x-size-border-width-result-overlay-default: 0;
4863
+ --x-size-border-width-result-description-default: 0;
4864
+ --x-size-border-width-result-picture-default: 0;
4865
+ }
4866
+
4867
+ .x-result {
4868
+ display: grid;
4869
+ grid-template-columns: [result-start] 1fr [result-end];
4870
+ grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
4871
+ box-sizing: border-box;
4872
+ background-color: var(--x-color-background-result-default);
4873
+ border-color: var(--x-color-border-result-default);
4857
4874
  padding: var(--x-size-padding-result-default);
4858
4875
  gap: var(--x-size-gap-result-default);
4859
4876
  border-style: solid;
@@ -4899,23 +4916,6 @@
4899
4916
  opacity: 1;
4900
4917
  }
4901
4918
  }
4902
- :root {
4903
- --x-color-border-result-default: var(--x-color-base-lead);
4904
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4905
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4906
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4907
- --x-color-background-result-default: transparent;
4908
- --x-size-padding-result-default: 0;
4909
- --x-size-padding-result-overlay-default: 0;
4910
- --x-size-padding-result-description-default: 0;
4911
- --x-size-gap-result-default: var(--x-size-base-03);
4912
- --x-size-padding-result-picture-default: 0;
4913
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4914
- --x-size-border-width-result-default: 0;
4915
- --x-size-border-width-result-overlay-default: 0;
4916
- --x-size-border-width-result-description-default: 0;
4917
- --x-size-border-width-result-picture-default: 0;
4918
- }
4919
4919
  :root {
4920
4920
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4921
4921
  }
@@ -4965,10 +4965,6 @@
4965
4965
  --x-number-zoom-scale-picture: 1.1;
4966
4966
  --x-number-zoom-duration-picture: 0.3s;
4967
4967
  }
4968
- :root {
4969
- --x-number-zoom-scale-picture: 1.1;
4970
- --x-number-zoom-duration-picture: 0.3s;
4971
- }
4972
4968
 
4973
4969
  .x-picture--zoom .x-picture-image {
4974
4970
  transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4979,14 +4975,18 @@
4979
4975
  :root {
4980
4976
  --x-number-aspect-ratio-picture: 1;
4981
4977
  }
4978
+ :root {
4979
+ --x-number-zoom-scale-picture: 1.1;
4980
+ --x-number-zoom-duration-picture: 0.3s;
4981
+ }
4982
+ :root {
4983
+ --x-number-aspect-ratio-picture: 1;
4984
+ }
4982
4985
 
4983
4986
  .x-picture--fixed-ratio.x-picture {
4984
4987
  aspect-ratio: var(--x-number-aspect-ratio-picture);
4985
4988
  width: 100%;
4986
4989
  }
4987
- :root {
4988
- --x-number-aspect-ratio-picture: 1;
4989
- }
4990
4990
  :root {
4991
4991
  --x-size-border-radius-picture-default: 0;
4992
4992
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5091,6 +5091,12 @@
5091
5091
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5092
5092
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5093
5093
  }
5094
+ :root {
5095
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5096
+ --x-mix-blend-mode-picture-colored: multiply;
5097
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5098
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5099
+ }
5094
5100
 
5095
5101
  .x-picture--colored.x-picture {
5096
5102
  --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -5104,12 +5110,6 @@
5104
5110
  .x-picture--colored.x-picture .x-picture--placeholder {
5105
5111
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5106
5112
  }
5107
- :root {
5108
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5109
- --x-mix-blend-mode-picture-colored: multiply;
5110
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5111
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5112
- }
5113
5113
  :root {
5114
5114
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5115
5115
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5449,6 +5449,51 @@
5449
5449
  --x-number-font-weight-base-regular
5450
5450
  );
5451
5451
  }
5452
+ :root {
5453
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5454
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5455
+ --x-color-text-option-list-button-bottom-selected
5456
+ );
5457
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5458
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5459
+ --x-color-border-option-list-item-bottom: transparent;
5460
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5461
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5462
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5463
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5464
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5465
+ --x-color-border-top-option-list-item-bottom-selected: var(
5466
+ --x-color-border-option-list-item-bottom
5467
+ );
5468
+ --x-color-border-right-option-list-item-bottom-selected: var(
5469
+ --x-color-border-option-list-item-bottom
5470
+ );
5471
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5472
+ --x-color-border-option-list-item-bottom-selected
5473
+ );
5474
+ --x-color-border-left-option-list-item-bottom-selected: var(
5475
+ --x-color-border-option-list-item-bottom
5476
+ );
5477
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5478
+ --x-size-border-width-top-option-list-item-bottom: 0;
5479
+ --x-size-border-width-right-option-list-item-bottom: 0;
5480
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5481
+ --x-size-border-width-option-list-item-bottom
5482
+ );
5483
+ --x-size-border-width-left-option-list-item-bottom: 0;
5484
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5485
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5486
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5487
+ --x-size-border-width-option-list-item-bottom
5488
+ );
5489
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5490
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5491
+ --x-font-decoration-option-list-button-bottom-hover: none;
5492
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5493
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5494
+ --x-number-font-weight-base-regular
5495
+ );
5496
+ }
5452
5497
 
5453
5498
  .x-option-list--bottom.x-option-list,
5454
5499
  .x-option-list--bottom .x-option-list {
@@ -5535,51 +5580,6 @@
5535
5580
  --x-size-border-width-bottom-option-list-item-default: inherit;
5536
5581
  --x-size-border-width-left-option-list-item-default: inherit;
5537
5582
  }
5538
- :root {
5539
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5540
- --x-color-text-option-list-button-bottom-selected-hover: var(
5541
- --x-color-text-option-list-button-bottom-selected
5542
- );
5543
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5544
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5545
- --x-color-border-option-list-item-bottom: transparent;
5546
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5547
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5548
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5549
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5550
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5551
- --x-color-border-top-option-list-item-bottom-selected: var(
5552
- --x-color-border-option-list-item-bottom
5553
- );
5554
- --x-color-border-right-option-list-item-bottom-selected: var(
5555
- --x-color-border-option-list-item-bottom
5556
- );
5557
- --x-color-border-bottom-option-list-item-bottom-selected: var(
5558
- --x-color-border-option-list-item-bottom-selected
5559
- );
5560
- --x-color-border-left-option-list-item-bottom-selected: var(
5561
- --x-color-border-option-list-item-bottom
5562
- );
5563
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5564
- --x-size-border-width-top-option-list-item-bottom: 0;
5565
- --x-size-border-width-right-option-list-item-bottom: 0;
5566
- --x-size-border-width-bottom-option-list-item-bottom: var(
5567
- --x-size-border-width-option-list-item-bottom
5568
- );
5569
- --x-size-border-width-left-option-list-item-bottom: 0;
5570
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5571
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5572
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5573
- --x-size-border-width-option-list-item-bottom
5574
- );
5575
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5576
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5577
- --x-font-decoration-option-list-button-bottom-hover: none;
5578
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5579
- --x-number-font-weight-option-list-button-bottom-selected: var(
5580
- --x-number-font-weight-base-regular
5581
- );
5582
- }
5583
5583
  :root {
5584
5584
  --x-modal-overlay-color: rgb(0, 0, 0);
5585
5585
  --x-modal-overlay-opacity: 0.7;
@@ -6063,6 +6063,28 @@
6063
6063
  --x-size-gap-list-19: var(--x-size-base-19);
6064
6064
  --x-size-gap-list-20: var(--x-size-base-20);
6065
6065
  }
6066
+ :root {
6067
+ --x-size-gap-list-01: var(--x-size-base-01);
6068
+ --x-size-gap-list-02: var(--x-size-base-02);
6069
+ --x-size-gap-list-03: var(--x-size-base-03);
6070
+ --x-size-gap-list-04: var(--x-size-base-04);
6071
+ --x-size-gap-list-05: var(--x-size-base-05);
6072
+ --x-size-gap-list-06: var(--x-size-base-06);
6073
+ --x-size-gap-list-07: var(--x-size-base-07);
6074
+ --x-size-gap-list-08: var(--x-size-base-08);
6075
+ --x-size-gap-list-09: var(--x-size-base-09);
6076
+ --x-size-gap-list-10: var(--x-size-base-10);
6077
+ --x-size-gap-list-11: var(--x-size-base-11);
6078
+ --x-size-gap-list-12: var(--x-size-base-12);
6079
+ --x-size-gap-list-13: var(--x-size-base-13);
6080
+ --x-size-gap-list-14: var(--x-size-base-14);
6081
+ --x-size-gap-list-15: var(--x-size-base-15);
6082
+ --x-size-gap-list-16: var(--x-size-base-16);
6083
+ --x-size-gap-list-17: var(--x-size-base-17);
6084
+ --x-size-gap-list-18: var(--x-size-base-18);
6085
+ --x-size-gap-list-19: var(--x-size-base-19);
6086
+ --x-size-gap-list-20: var(--x-size-base-20);
6087
+ }
6066
6088
 
6067
6089
  .x-list--gap-01.x-list {
6068
6090
  gap: var(--x-size-gap-list-01);
@@ -6564,26 +6586,56 @@
6564
6586
  }
6565
6587
  }
6566
6588
  :root {
6567
- --x-size-gap-list-01: var(--x-size-base-01);
6568
- --x-size-gap-list-02: var(--x-size-base-02);
6569
- --x-size-gap-list-03: var(--x-size-base-03);
6570
- --x-size-gap-list-04: var(--x-size-base-04);
6571
- --x-size-gap-list-05: var(--x-size-base-05);
6572
- --x-size-gap-list-06: var(--x-size-base-06);
6573
- --x-size-gap-list-07: var(--x-size-base-07);
6574
- --x-size-gap-list-08: var(--x-size-base-08);
6575
- --x-size-gap-list-09: var(--x-size-base-09);
6576
- --x-size-gap-list-10: var(--x-size-base-10);
6577
- --x-size-gap-list-11: var(--x-size-base-11);
6578
- --x-size-gap-list-12: var(--x-size-base-12);
6579
- --x-size-gap-list-13: var(--x-size-base-13);
6580
- --x-size-gap-list-14: var(--x-size-base-14);
6581
- --x-size-gap-list-15: var(--x-size-base-15);
6582
- --x-size-gap-list-16: var(--x-size-base-16);
6583
- --x-size-gap-list-17: var(--x-size-base-17);
6584
- --x-size-gap-list-18: var(--x-size-base-18);
6585
- --x-size-gap-list-19: var(--x-size-base-19);
6586
- --x-size-gap-list-20: var(--x-size-base-20);
6589
+ --x-string-flow-list: column nowrap;
6590
+ --x-size-padding-list: 0;
6591
+ --x-size-gap-list: 0;
6592
+ --x-size-justify-list: stretch;
6593
+ --x-size-align-list: stretch;
6594
+ --x-size-align-list-stretch: stretch;
6595
+ }
6596
+ :root {
6597
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6598
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6599
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6600
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6601
+ --x-size-border-radius-input-group-pill
6602
+ );
6603
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6604
+ }
6605
+ :root {
6606
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6607
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6608
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6609
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6610
+ --x-size-border-radius-input-group-pill
6611
+ );
6612
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6613
+ }
6614
+
6615
+ .x-input-group--pill.x-input-group,
6616
+ .x-input-group--pill .x-input-group {
6617
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6618
+ --x-size-border-radius-top-left-input-group-default: var(
6619
+ --x-size-border-radius-top-left-input-group-pill
6620
+ );
6621
+ --x-size-border-radius-top-right-input-group-default: var(
6622
+ --x-size-border-radius-top-right-input-group-pill
6623
+ );
6624
+ --x-size-border-radius-bottom-right-input-group-default: var(
6625
+ --x-size-border-radius-bottom-right-input-group-pill
6626
+ );
6627
+ --x-size-border-radius-bottom-left-input-group-default: var(
6628
+ --x-size-border-radius-bottom-left-input-group-pill
6629
+ );
6630
+ }
6631
+ :root {
6632
+ --x-size-padding-left-input-group-line: 0;
6633
+ --x-size-padding-right-input-group-line: 0;
6634
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6635
+ --x-size-border-width-top-input-group-line: 0;
6636
+ --x-size-border-width-right-input-group-line: 0;
6637
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6638
+ --x-size-border-width-left-input-group-line: 0;
6587
6639
  }
6588
6640
  :root {
6589
6641
  --x-string-flow-list: column nowrap;
@@ -6733,105 +6785,6 @@
6733
6785
  .x-list > .x-list__item--12 {
6734
6786
  flex: 12 1 auto;
6735
6787
  }
6736
- :root {
6737
- --x-string-flow-list: column nowrap;
6738
- --x-size-padding-list: 0;
6739
- --x-size-gap-list: 0;
6740
- --x-size-justify-list: stretch;
6741
- --x-size-align-list: stretch;
6742
- --x-size-align-list-stretch: stretch;
6743
- }
6744
- :root {
6745
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6746
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6747
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6748
- --x-size-border-radius-bottom-right-input-group-pill: var(
6749
- --x-size-border-radius-input-group-pill
6750
- );
6751
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6752
- }
6753
-
6754
- .x-input-group--pill.x-input-group,
6755
- .x-input-group--pill .x-input-group {
6756
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6757
- --x-size-border-radius-top-left-input-group-default: var(
6758
- --x-size-border-radius-top-left-input-group-pill
6759
- );
6760
- --x-size-border-radius-top-right-input-group-default: var(
6761
- --x-size-border-radius-top-right-input-group-pill
6762
- );
6763
- --x-size-border-radius-bottom-right-input-group-default: var(
6764
- --x-size-border-radius-bottom-right-input-group-pill
6765
- );
6766
- --x-size-border-radius-bottom-left-input-group-default: var(
6767
- --x-size-border-radius-bottom-left-input-group-pill
6768
- );
6769
- }
6770
- :root {
6771
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6772
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6773
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6774
- --x-size-border-radius-bottom-right-input-group-pill: var(
6775
- --x-size-border-radius-input-group-pill
6776
- );
6777
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6778
- }
6779
- :root {
6780
- --x-size-padding-left-input-group-line: 0;
6781
- --x-size-padding-right-input-group-line: 0;
6782
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6783
- --x-size-border-width-top-input-group-line: 0;
6784
- --x-size-border-width-right-input-group-line: 0;
6785
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6786
- --x-size-border-width-left-input-group-line: 0;
6787
- }
6788
-
6789
- .x-input-group--line .x-input-group,
6790
- .x-input-group--line.x-input-group {
6791
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
6792
- --x-size-border-width-right-input-group-default: var(
6793
- --x-size-border-width-right-input-group-line
6794
- );
6795
- --x-size-border-width-bottom-input-group-default: var(
6796
- --x-size-border-width-bottom-input-group-line
6797
- );
6798
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
6799
- }
6800
- .x-input-group--line .x-input-group > *:not(.x-input-group__action),
6801
- .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
6802
- --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
6803
- --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
6804
- }
6805
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6806
- .x-input-group--line.x-input-group > .x-input-group__action {
6807
- margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6808
- }
6809
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6810
- .x-input-group--line.x-input-group > .x-input-group__action {
6811
- margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6812
- }
6813
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6814
- .x-input-group--line.x-input-group > .x-input-group__action {
6815
- margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6816
- }
6817
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6818
- .x-input-group--line.x-input-group > .x-input-group__action {
6819
- margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6820
- }
6821
- .x-input-group--line .x-input-group > .x-input-group__action,
6822
- .x-input-group--line.x-input-group > .x-input-group__action {
6823
- margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6824
- margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6825
- }
6826
- :root {
6827
- --x-size-padding-left-input-group-line: 0;
6828
- --x-size-padding-right-input-group-line: 0;
6829
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6830
- --x-size-border-width-top-input-group-line: 0;
6831
- --x-size-border-width-right-input-group-line: 0;
6832
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6833
- --x-size-border-width-left-input-group-line: 0;
6834
- }
6835
6788
  :root {
6836
6789
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6837
6790
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7061,6 +7014,53 @@
7061
7014
  );
7062
7015
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7063
7016
  }
7017
+ :root {
7018
+ --x-size-padding-left-input-group-line: 0;
7019
+ --x-size-padding-right-input-group-line: 0;
7020
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
7021
+ --x-size-border-width-top-input-group-line: 0;
7022
+ --x-size-border-width-right-input-group-line: 0;
7023
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
7024
+ --x-size-border-width-left-input-group-line: 0;
7025
+ }
7026
+
7027
+ .x-input-group--line .x-input-group,
7028
+ .x-input-group--line.x-input-group {
7029
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
7030
+ --x-size-border-width-right-input-group-default: var(
7031
+ --x-size-border-width-right-input-group-line
7032
+ );
7033
+ --x-size-border-width-bottom-input-group-default: var(
7034
+ --x-size-border-width-bottom-input-group-line
7035
+ );
7036
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
7037
+ }
7038
+ .x-input-group--line .x-input-group > *:not(.x-input-group__action),
7039
+ .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
7040
+ --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
7041
+ --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
7042
+ }
7043
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
7044
+ .x-input-group--line.x-input-group > .x-input-group__action {
7045
+ margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
7046
+ }
7047
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
7048
+ .x-input-group--line.x-input-group > .x-input-group__action {
7049
+ margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
7050
+ }
7051
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
7052
+ .x-input-group--line.x-input-group > .x-input-group__action {
7053
+ margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
7054
+ }
7055
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
7056
+ .x-input-group--line.x-input-group > .x-input-group__action {
7057
+ margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
7058
+ }
7059
+ .x-input-group--line .x-input-group > .x-input-group__action,
7060
+ .x-input-group--line.x-input-group > .x-input-group__action {
7061
+ margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
7062
+ margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
7063
+ }
7064
7064
  :root {
7065
7065
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7066
7066
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7130,6 +7130,16 @@
7130
7130
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7131
7131
  --x-size-border-width-left-input-line: 0;
7132
7132
  }
7133
+ :root {
7134
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7135
+ --x-size-padding-right-input-line: 0;
7136
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7137
+ --x-size-padding-left-input-line: 0;
7138
+ --x-size-border-width-top-input-line: 0;
7139
+ --x-size-border-width-right-input-line: 0;
7140
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7141
+ --x-size-border-width-left-input-line: 0;
7142
+ }
7133
7143
 
7134
7144
  .x-input--line .x-input,
7135
7145
  .x-input--line.x-input {
@@ -7142,16 +7152,6 @@
7142
7152
  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7143
7153
  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7144
7154
  }
7145
- :root {
7146
- --x-size-padding-top-input-line: var(--x-size-base-03);
7147
- --x-size-padding-right-input-line: 0;
7148
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7149
- --x-size-padding-left-input-line: 0;
7150
- --x-size-border-width-top-input-line: 0;
7151
- --x-size-border-width-right-input-line: 0;
7152
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7153
- --x-size-border-width-left-input-line: 0;
7154
- }
7155
7155
  :root {
7156
7156
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7157
7157
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7180,33 +7180,6 @@
7180
7180
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7181
7181
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7182
7182
  }
7183
- :root {
7184
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7185
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7186
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7187
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7188
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7189
- }
7190
- :root {
7191
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7192
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7193
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7194
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7195
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7196
- }
7197
-
7198
- .x-input--card.x-input,
7199
- .x-input--card .x-input {
7200
- --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
7201
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
7202
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
7203
- --x-size-border-radius-bottom-right-input-default: var(
7204
- --x-size-border-radius-bottom-right-input-card
7205
- );
7206
- --x-size-border-radius-bottom-left-input-default: var(
7207
- --x-size-border-radius-bottom-left-input-card
7208
- );
7209
- }
7210
7183
  :root {
7211
7184
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7212
7185
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7315,6 +7288,37 @@
7315
7288
  font-weight: var(--x-number-font-weight-input-placeholder-default);
7316
7289
  line-height: var(--x-size-line-height-input-placeholder-default);
7317
7290
  }
7291
+ :root {
7292
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7293
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7294
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7295
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7296
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7297
+ }
7298
+ :root {
7299
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7300
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7301
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7302
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7303
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7304
+ }
7305
+
7306
+ .x-input--card.x-input,
7307
+ .x-input--card .x-input {
7308
+ --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
7309
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
7310
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
7311
+ --x-size-border-radius-bottom-right-input-default: var(
7312
+ --x-size-border-radius-bottom-right-input-card
7313
+ );
7314
+ --x-size-border-radius-bottom-left-input-default: var(
7315
+ --x-size-border-radius-bottom-left-input-card
7316
+ );
7317
+ }
7318
+ :root {
7319
+ --x-size-width-icon-xl: var(--x-size-base-07);
7320
+ --x-size-height-icon-xl: var(--x-size-base-07);
7321
+ }
7318
7322
  :root {
7319
7323
  --x-size-width-icon-xl: var(--x-size-base-07);
7320
7324
  --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7325,8 +7329,8 @@
7325
7329
  --x-size-height-icon-default: var(--x-size-height-icon-xl);
7326
7330
  }
7327
7331
  :root {
7328
- --x-size-width-icon-xl: var(--x-size-base-07);
7329
- --x-size-height-icon-xl: var(--x-size-base-07);
7332
+ --x-size-width-icon-s: var(--x-size-base-03);
7333
+ --x-size-height-icon-s: var(--x-size-base-03);
7330
7334
  }
7331
7335
  :root {
7332
7336
  --x-size-width-icon-s: var(--x-size-base-03);
@@ -7337,14 +7341,6 @@
7337
7341
  --x-size-width-icon-default: var(--x-size-width-icon-s);
7338
7342
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7339
7343
  }
7340
- :root {
7341
- --x-size-width-icon-s: var(--x-size-base-03);
7342
- --x-size-height-icon-s: var(--x-size-base-03);
7343
- }
7344
- :root {
7345
- --x-size-width-icon-m: var(--x-size-base-05);
7346
- --x-size-height-icon-m: var(--x-size-base-05);
7347
- }
7348
7344
  :root {
7349
7345
  --x-size-width-icon-m: var(--x-size-base-05);
7350
7346
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7358,6 +7354,10 @@
7358
7354
  --x-size-width-icon-l: var(--x-size-base-06);
7359
7355
  --x-size-height-icon-l: var(--x-size-base-06);
7360
7356
  }
7357
+ :root {
7358
+ --x-size-width-icon-m: var(--x-size-base-05);
7359
+ --x-size-height-icon-m: var(--x-size-base-05);
7360
+ }
7361
7361
  :root {
7362
7362
  --x-size-width-icon-l: var(--x-size-base-06);
7363
7363
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -7450,38 +7450,6 @@
7450
7450
  --x-size-padding-bottom-filter-children: 0;
7451
7451
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7452
7452
  }
7453
- :root {
7454
- --x-color-background-filter-default: transparent;
7455
- --x-color-border-filter-default: var(--x-color-background-filter-default);
7456
- --x-color-text-filter-default: var(--x-color-text-default);
7457
- --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7458
- --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7459
- --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7460
- --x-size-border-width-filter-default: var(--x-size-border-width-base);
7461
- --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7462
- --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7463
- --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7464
- --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7465
- --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7466
- --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7467
- --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7468
- --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7469
- --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7470
- --x-size-padding-top-filter-default: var(--x-size-base-03);
7471
- --x-size-padding-right-filter-default: 0;
7472
- --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7473
- --x-size-padding-left-filter-default: 0;
7474
- --x-size-gap-filter-default: var(--x-size-base-03);
7475
- --x-font-family-filter-default: var(--x-font-family-text);
7476
- --x-size-font-filter-default: var(--x-size-font-text);
7477
- --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7478
- --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7479
- --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7480
- --x-number-font-weight-filter-count-default-selected: var(
7481
- --x-number-font-weight-filter-count-default
7482
- );
7483
- --x-size-line-height-filter-default: var(--x-size-line-height-text);
7484
- }
7485
7453
  :root {
7486
7454
  --x-size-margin-filter-children: 0;
7487
7455
  --x-size-padding-top-filter-children: 0;
@@ -7547,6 +7515,38 @@
7547
7515
  );
7548
7516
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7549
7517
  }
7518
+ :root {
7519
+ --x-color-background-filter-default: transparent;
7520
+ --x-color-border-filter-default: var(--x-color-background-filter-default);
7521
+ --x-color-text-filter-default: var(--x-color-text-default);
7522
+ --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7523
+ --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7524
+ --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7525
+ --x-size-border-width-filter-default: var(--x-size-border-width-base);
7526
+ --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7527
+ --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7528
+ --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7529
+ --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7530
+ --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7531
+ --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7532
+ --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7533
+ --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7534
+ --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7535
+ --x-size-padding-top-filter-default: var(--x-size-base-03);
7536
+ --x-size-padding-right-filter-default: 0;
7537
+ --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7538
+ --x-size-padding-left-filter-default: 0;
7539
+ --x-size-gap-filter-default: var(--x-size-base-03);
7540
+ --x-font-family-filter-default: var(--x-font-family-text);
7541
+ --x-size-font-filter-default: var(--x-size-font-text);
7542
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7543
+ --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7544
+ --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7545
+ --x-number-font-weight-filter-count-default-selected: var(
7546
+ --x-number-font-weight-filter-count-default
7547
+ );
7548
+ --x-size-line-height-filter-default: var(--x-size-line-height-text);
7549
+ }
7550
7550
 
7551
7551
  [dir="ltr"] .x-filter,[dir="ltr"]
7552
7552
  .x-facet-filter {
@@ -7693,6 +7693,30 @@
7693
7693
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7694
7694
  --x-size-border-width-left-facet-header-line: 0;
7695
7695
  }
7696
+ :root {
7697
+ --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7698
+ --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7699
+ --x-size-border-width-top-facet-header-line: 0;
7700
+ --x-size-border-width-right-facet-header-line: 0;
7701
+ --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7702
+ --x-size-border-width-left-facet-header-line: 0;
7703
+ }
7704
+
7705
+ .x-facet--line.x-facet,
7706
+ .x-facet--line .x-facet {
7707
+ --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7708
+ --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7709
+ --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7710
+ --x-size-border-width-right-facet-header-default: var(
7711
+ --x-size-border-width-right-facet-header-line
7712
+ );
7713
+ --x-size-border-width-bottom-facet-header-default: var(
7714
+ --x-size-border-width-bottom-facet-header-line
7715
+ );
7716
+ --x-size-border-width-left-facet-header-default: var(
7717
+ --x-size-border-width-left-facet-header-line
7718
+ );
7719
+ }
7696
7720
  :root {
7697
7721
  --x-color-background-facet-default: transparent;
7698
7722
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7726,30 +7750,6 @@
7726
7750
  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7727
7751
  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7728
7752
  }
7729
- :root {
7730
- --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7731
- --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7732
- --x-size-border-width-top-facet-header-line: 0;
7733
- --x-size-border-width-right-facet-header-line: 0;
7734
- --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7735
- --x-size-border-width-left-facet-header-line: 0;
7736
- }
7737
-
7738
- .x-facet--line.x-facet,
7739
- .x-facet--line .x-facet {
7740
- --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7741
- --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7742
- --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7743
- --x-size-border-width-right-facet-header-default: var(
7744
- --x-size-border-width-right-facet-header-line
7745
- );
7746
- --x-size-border-width-bottom-facet-header-default: var(
7747
- --x-size-border-width-bottom-facet-header-line
7748
- );
7749
- --x-size-border-width-left-facet-header-default: var(
7750
- --x-size-border-width-left-facet-header-line
7751
- );
7752
- }
7753
7753
  :root {
7754
7754
  --x-color-background-facet-default: transparent;
7755
7755
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7918,13 +7918,13 @@
7918
7918
  :root {
7919
7919
  --x-size-width-dropdown-xl: 282px;
7920
7920
  }
7921
+ :root {
7922
+ --x-size-width-dropdown-xl: 282px;
7923
+ }
7921
7924
 
7922
7925
  .x-dropdown.x-dropdown--xl {
7923
7926
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7924
7927
  }
7925
- :root {
7926
- --x-size-width-dropdown-xl: 282px;
7927
- }
7928
7928
  :root {
7929
7929
  --x-size-width-dropdown-s: 74px;
7930
7930
  }
@@ -8423,19 +8423,6 @@
8423
8423
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8424
8424
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8425
8425
  }
8426
- :root {
8427
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8428
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8429
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8430
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8431
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8432
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8433
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8434
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8435
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8436
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8437
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8438
- }
8439
8426
 
8440
8427
  .x-dropdown--card {
8441
8428
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8466,6 +8453,29 @@
8466
8453
  --x-size-border-width-left-dropdown-list-card
8467
8454
  );
8468
8455
  }
8456
+ :root {
8457
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8458
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8459
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8460
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8461
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8462
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8463
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8464
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8465
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8466
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8467
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8468
+ }
8469
+ :root {
8470
+ --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8471
+ --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8472
+ --x-color-text-button-tertiary: var(--x-color-text-default);
8473
+ --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8474
+ --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8475
+ --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8476
+ --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8477
+ --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8478
+ }
8469
8479
  :root {
8470
8480
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8471
8481
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8487,16 +8497,6 @@
8487
8497
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8488
8498
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8489
8499
  }
8490
- :root {
8491
- --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8492
- --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8493
- --x-color-text-button-tertiary: var(--x-color-text-default);
8494
- --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8495
- --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8496
- --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8497
- --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8498
- --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8499
- }
8500
8500
  :root {
8501
8501
  --x-color-background-button-secondary: transparent;
8502
8502
  --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8536,11 +8536,29 @@
8536
8536
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8537
8537
  }
8538
8538
  :root {
8539
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8540
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8541
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8542
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8543
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8539
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8540
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8541
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8542
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8543
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8544
+ }
8545
+
8546
+ .x-button--round.x-button,
8547
+ .x-button--round .x-button {
8548
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
8549
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
8550
+ --x-size-border-radius-top-right-button-default: var(
8551
+ --x-size-border-radius-top-right-button-round
8552
+ );
8553
+ --x-size-border-radius-bottom-right-button-default: var(
8554
+ --x-size-border-radius-bottom-right-button-round
8555
+ );
8556
+ --x-size-border-radius-bottom-left-button-default: var(
8557
+ --x-size-border-radius-bottom-left-button-round
8558
+ );
8559
+ min-width: var(--x-size-height-button-default);
8560
+ --x-size-padding-left-button-default: 0;
8561
+ --x-size-padding-right-button-default: 0;
8544
8562
  }
8545
8563
  :root {
8546
8564
  --x-color-background-button-primary: var(--x-color-background-button-default);
@@ -8580,6 +8598,13 @@
8580
8598
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8581
8599
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8582
8600
  }
8601
+ :root {
8602
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8603
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8604
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8605
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8606
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8607
+ }
8583
8608
 
8584
8609
  .x-button--pill.x-button,
8585
8610
  .x-button--pill .x-button {
@@ -8737,28 +8762,6 @@
8737
8762
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8738
8763
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8739
8764
  }
8740
- :root {
8741
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8742
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8743
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8744
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8745
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8746
- }
8747
-
8748
- .x-button--card.x-button,
8749
- .x-button--card .x-button {
8750
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8751
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8752
- --x-size-border-radius-top-right-button-default: var(
8753
- --x-size-border-radius-top-right-button-card
8754
- );
8755
- --x-size-border-radius-bottom-right-button-default: var(
8756
- --x-size-border-radius-bottom-right-button-card
8757
- );
8758
- --x-size-border-radius-bottom-left-button-default: var(
8759
- --x-size-border-radius-bottom-left-button-card
8760
- );
8761
- }
8762
8765
  :root {
8763
8766
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8764
8767
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8861,27 +8864,24 @@
8861
8864
  --x-size-border-width-base: 1px;
8862
8865
  }
8863
8866
  :root {
8864
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8865
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8866
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8867
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8868
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8867
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8868
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8869
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8870
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8871
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8869
8872
  }
8870
8873
 
8871
- .x-button--round.x-button,
8872
- .x-button--round .x-button {
8873
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
8874
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
8874
+ .x-button--card.x-button,
8875
+ .x-button--card .x-button {
8876
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8877
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8875
8878
  --x-size-border-radius-top-right-button-default: var(
8876
- --x-size-border-radius-top-right-button-round
8879
+ --x-size-border-radius-top-right-button-card
8877
8880
  );
8878
8881
  --x-size-border-radius-bottom-right-button-default: var(
8879
- --x-size-border-radius-bottom-right-button-round
8882
+ --x-size-border-radius-bottom-right-button-card
8880
8883
  );
8881
8884
  --x-size-border-radius-bottom-left-button-default: var(
8882
- --x-size-border-radius-bottom-left-button-round
8885
+ --x-size-border-radius-bottom-left-button-card
8883
8886
  );
8884
- min-width: var(--x-size-height-button-default);
8885
- --x-size-padding-left-button-default: 0;
8886
- --x-size-padding-right-button-default: 0;
8887
8887
  }