@react-ui-org/react-ui 0.57.0 → 0.58.0

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 (80) hide show
  1. package/.nvmrc +1 -1
  2. package/dist/react-ui.css +14 -14
  3. package/dist/react-ui.development.css +225 -14
  4. package/dist/react-ui.development.js +102 -62
  5. package/dist/react-ui.js +1 -1
  6. package/package.json +12 -1
  7. package/src/components/Alert/Alert.jsx +3 -5
  8. package/src/components/Alert/Alert.module.scss +3 -3
  9. package/src/components/Alert/README.md +22 -10
  10. package/src/components/Badge/Badge.jsx +1 -1
  11. package/src/components/Button/Button.jsx +1 -1
  12. package/src/components/ButtonGroup/ButtonGroup.jsx +1 -1
  13. package/src/components/Card/Card.jsx +1 -1
  14. package/src/components/Card/Card.module.scss +6 -5
  15. package/src/components/Card/CardBody.jsx +1 -1
  16. package/src/components/Card/CardFooter.jsx +1 -1
  17. package/src/components/Card/README.md +22 -0
  18. package/src/components/CheckboxField/CheckboxField.jsx +9 -3
  19. package/src/components/CheckboxField/README.md +110 -5
  20. package/src/components/FileInputField/FileInputField.jsx +1 -1
  21. package/src/components/FormLayout/FormLayout.jsx +1 -1
  22. package/src/components/FormLayout/FormLayoutCustomField.jsx +1 -1
  23. package/src/components/Grid/Grid.jsx +1 -1
  24. package/src/components/Grid/GridSpan.jsx +1 -1
  25. package/src/components/InputGroup/InputGroup.jsx +2 -2
  26. package/src/components/InputGroup/InputGroup.module.scss +9 -5
  27. package/src/components/Modal/Modal.jsx +1 -1
  28. package/src/components/Modal/ModalBody.jsx +1 -1
  29. package/src/components/Modal/ModalCloseButton.jsx +3 -5
  30. package/src/components/Modal/ModalContent.jsx +1 -1
  31. package/src/components/Modal/ModalFooter.jsx +1 -1
  32. package/src/components/Modal/ModalHeader.jsx +1 -1
  33. package/src/components/Modal/ModalTitle.jsx +1 -1
  34. package/src/components/Modal/README.md +18 -18
  35. package/src/components/Paper/Paper.jsx +1 -1
  36. package/src/components/Popover/Popover.jsx +58 -13
  37. package/src/components/Popover/Popover.module.scss +37 -9
  38. package/src/components/Popover/PopoverWrapper.jsx +1 -1
  39. package/src/components/Popover/README.md +60 -3
  40. package/src/components/Popover/_helpers/cleanPlacementStyle.js +20 -0
  41. package/src/components/Radio/README.md +103 -0
  42. package/src/components/Radio/Radio.jsx +9 -3
  43. package/src/components/Radio/Radio.module.scss +4 -0
  44. package/src/components/ScrollView/ScrollView.jsx +3 -5
  45. package/src/components/SelectField/README.md +103 -0
  46. package/src/components/SelectField/SelectField.jsx +9 -3
  47. package/src/components/Table/Table.jsx +1 -1
  48. package/src/components/Tabs/Tabs.jsx +1 -1
  49. package/src/components/Tabs/TabsItem.jsx +1 -1
  50. package/src/components/Text/Text.jsx +1 -1
  51. package/src/components/TextArea/TextArea.jsx +1 -1
  52. package/src/components/TextField/README.md +14 -2
  53. package/src/components/TextField/TextField.jsx +1 -1
  54. package/src/components/TextLink/README.md +10 -3
  55. package/src/components/TextLink/TextLink.jsx +1 -1
  56. package/src/components/TextLink/_theme.scss +3 -3
  57. package/src/components/Toggle/README.md +83 -1
  58. package/src/components/Toggle/Toggle.jsx +9 -3
  59. package/src/components/Toolbar/Toolbar.jsx +1 -1
  60. package/src/components/Toolbar/ToolbarGroup.jsx +1 -1
  61. package/src/components/Toolbar/ToolbarItem.jsx +1 -1
  62. package/src/components/_helpers/resolveContextOrProp.js +6 -3
  63. package/src/index.js +3 -2
  64. package/src/providers/globalProps/GlobalPropsContext.jsx +5 -0
  65. package/src/providers/globalProps/GlobalPropsProvider.jsx +33 -0
  66. package/src/providers/globalProps/index.js +3 -0
  67. package/src/{provider → providers/globalProps}/withGlobalProps.jsx +16 -16
  68. package/src/providers/translations/TranslationsContext.jsx +6 -0
  69. package/src/providers/translations/TranslationsProvider.jsx +33 -0
  70. package/src/providers/translations/index.js +2 -0
  71. package/src/styles/elements/_links.scss +7 -2
  72. package/src/styles/theme/_form-fields.scss +19 -0
  73. package/src/styles/theme/_links.scss +4 -3
  74. package/src/styles/tools/_collections.scss +79 -5
  75. package/src/styles/tools/form-fields/_foundation.scss +6 -4
  76. package/src/styles/tools/form-fields/_variants.scss +5 -1
  77. package/src/theme.scss +2 -1
  78. package/src/provider/RUIContext.jsx +0 -9
  79. package/src/provider/RUIProvider.jsx +0 -42
  80. package/src/provider/index.js +0 -3
@@ -51,7 +51,8 @@
51
51
  --rui-font-size-6: 1.802rem;
52
52
  --rui-line-height-base: 1.5;
53
53
  --rui-line-height-small: 1.25;
54
- --rui-text-decoration-link: none;
54
+ --rui-underline-offset-link: 0.1875em;
55
+ --rui-text-decoration-link: underline;
55
56
  --rui-text-decoration-link-hover: underline;
56
57
  --rui-text-decoration-link-active: underline;
57
58
  --rui-list-style-unordered: square;
@@ -1096,12 +1097,18 @@
1096
1097
  a {
1097
1098
  -webkit-text-decoration: var(--rui-text-decoration-link);
1098
1099
  text-decoration: var(--rui-text-decoration-link);
1099
- color: var(--rui-color-text-link);
1100
+ text-underline-offset: var(--rui-underline-offset-link);
1101
+ color: var(--rui-local-link-color, var(--rui-color-text-link));
1100
1102
  }
1101
- a:hover, a:focus {
1103
+ a:hover {
1102
1104
  -webkit-text-decoration: var(--rui-text-decoration-link-hover);
1103
1105
  text-decoration: var(--rui-text-decoration-link-hover);
1104
- color: var(--rui-color-text-link-hover);
1106
+ color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
1107
+ }
1108
+ a:active {
1109
+ -webkit-text-decoration: var(--rui-text-decoration-link-active);
1110
+ text-decoration: var(--rui-text-decoration-link-active);
1111
+ color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
1105
1112
  }
1106
1113
  ol,
1107
1114
  ul {
@@ -3447,8 +3454,8 @@
3447
3454
  .Alert-module__message__oZQVuqmd {
3448
3455
  padding: var(--rui-Alert__padding);
3449
3456
  }
3450
- .Alert-module__close__zxS8ZLxY,
3451
- .Alert-module__icon__THa5zFHI {
3457
+ .Alert-module__icon__THa5zFHI,
3458
+ .Alert-module__close__zxS8ZLxY {
3452
3459
  height: calc(var(--rui-font-size-1) * var(--rui-line-height-base) + 2 * var(--rui-Alert__padding));
3453
3460
  color: var(--rui-local-foreground-color);
3454
3461
  }
@@ -3465,7 +3472,6 @@
3465
3472
  font-size: var(--rui-font-size-1);
3466
3473
  line-height: var(--rui-line-height-base);
3467
3474
  }
3468
- .Alert-module__message__oZQVuqmd a,
3469
3475
  .Alert-module__message__oZQVuqmd strong {
3470
3476
  font-weight: var(--rui-Alert__emphasis__font-weight);
3471
3477
  color: var(--rui-local-foreground-color);
@@ -3516,6 +3522,9 @@
3516
3522
  --rui-Alert--success__background-color
3517
3523
 
3518
3524
  );
3525
+ --rui-local-link-color: var(--rui-color-feedback-success);
3526
+ --rui-local-link-color-hover: var(--rui-color-feedback-success-hover);
3527
+ --rui-local-link-color-active: var(--rui-color-feedback-success-active);
3519
3528
  }
3520
3529
  .Alert-module__isRootColorWarning__Tv1F5qUb {
3521
3530
  --rui-local-color:
@@ -3533,6 +3542,9 @@
3533
3542
  --rui-Alert--warning__background-color
3534
3543
 
3535
3544
  );
3545
+ --rui-local-link-color: var(--rui-color-feedback-warning);
3546
+ --rui-local-link-color-hover: var(--rui-color-feedback-warning-hover);
3547
+ --rui-local-link-color-active: var(--rui-color-feedback-warning-active);
3536
3548
  }
3537
3549
  .Alert-module__isRootColorDanger__vSuahf3N {
3538
3550
  --rui-local-color:
@@ -3550,6 +3562,9 @@
3550
3562
  --rui-Alert--danger__background-color
3551
3563
 
3552
3564
  );
3565
+ --rui-local-link-color: var(--rui-color-feedback-danger);
3566
+ --rui-local-link-color-hover: var(--rui-color-feedback-danger-hover);
3567
+ --rui-local-link-color-active: var(--rui-color-feedback-danger-active);
3553
3568
  }
3554
3569
  .Alert-module__isRootColorInfo__CydUTawd {
3555
3570
  --rui-local-color:
@@ -3567,6 +3582,9 @@
3567
3582
  --rui-Alert--info__background-color
3568
3583
 
3569
3584
  );
3585
+ --rui-local-link-color: var(--rui-color-feedback-info);
3586
+ --rui-local-link-color-hover: var(--rui-color-feedback-info-hover);
3587
+ --rui-local-link-color-active: var(--rui-color-feedback-info-active);
3570
3588
  }
3571
3589
  .Alert-module__isRootColorHelp__ftSYT6_4 {
3572
3590
  --rui-local-color:
@@ -3584,6 +3602,9 @@
3584
3602
  --rui-Alert--help__background-color
3585
3603
 
3586
3604
  );
3605
+ --rui-local-link-color: var(--rui-color-feedback-help);
3606
+ --rui-local-link-color-hover: var(--rui-color-feedback-help-hover);
3607
+ --rui-local-link-color-active: var(--rui-color-feedback-help-active);
3587
3608
  }
3588
3609
  .Alert-module__isRootColorNote__tl_nYMy0 {
3589
3610
  --rui-local-color:
@@ -3601,6 +3622,9 @@
3601
3622
  --rui-Alert--note__background-color
3602
3623
 
3603
3624
  );
3625
+ --rui-local-link-color: var(--rui-color-feedback-note);
3626
+ --rui-local-link-color-hover: var(--rui-color-feedback-note-hover);
3627
+ --rui-local-link-color-active: var(--rui-color-feedback-note-active);
3604
3628
  }
3605
3629
  .Alert-module__isRootColorLight__LBWCo24o {
3606
3630
  --rui-local-color:
@@ -3618,6 +3642,9 @@
3618
3642
  --rui-Alert--light__background-color
3619
3643
 
3620
3644
  );
3645
+ --rui-local-link-color: var(--rui-color-neutral-dark);
3646
+ --rui-local-link-color-hover: var(--rui-color-neutral-dark-hover);
3647
+ --rui-local-link-color-active: var(--rui-color-neutral-dark-active);
3621
3648
  }
3622
3649
  .Alert-module__isRootColorDark__ro4AYKc8 {
3623
3650
  --rui-local-color:
@@ -3635,6 +3662,9 @@
3635
3662
  --rui-Alert--dark__background-color
3636
3663
 
3637
3664
  );
3665
+ --rui-local-link-color: var(--rui-color-neutral-light);
3666
+ --rui-local-link-color-hover: var(--rui-color-neutral-light-hover);
3667
+ --rui-local-link-color-active: var(--rui-color-neutral-light-active);
3638
3668
  }
3639
3669
  }
3640
3670
  /*!***********************************************************************************************************************************************************************************************************************************!*\
@@ -6374,6 +6404,10 @@
6374
6404
  .Card-module__isRootRaised__mrD5KMAs {
6375
6405
  box-shadow: var(--rui-Card--raised__box-shadow);
6376
6406
  }
6407
+ .Card-module__isRootDisabled__Wm_9A4kS {
6408
+ background-color: var(--rui-Card--disabled__background-color);
6409
+ opacity: var(--rui-Card--disabled__opacity);
6410
+ }
6377
6411
  .Card-module__isRootColorSuccess__yi_tFR5R {
6378
6412
  --rui-local-color:
6379
6413
  var(
@@ -6390,6 +6424,9 @@
6390
6424
  --rui-Card--success__background-color
6391
6425
 
6392
6426
  );
6427
+ --rui-local-link-color: var(--rui-color-feedback-success);
6428
+ --rui-local-link-color-hover: var(--rui-color-feedback-success-hover);
6429
+ --rui-local-link-color-active: var(--rui-color-feedback-success-active);
6393
6430
  }
6394
6431
  .Card-module__isRootColorWarning__Dqf8jQFM {
6395
6432
  --rui-local-color:
@@ -6407,6 +6444,9 @@
6407
6444
  --rui-Card--warning__background-color
6408
6445
 
6409
6446
  );
6447
+ --rui-local-link-color: var(--rui-color-feedback-warning);
6448
+ --rui-local-link-color-hover: var(--rui-color-feedback-warning-hover);
6449
+ --rui-local-link-color-active: var(--rui-color-feedback-warning-active);
6410
6450
  }
6411
6451
  .Card-module__isRootColorDanger__NJZCO0YY {
6412
6452
  --rui-local-color:
@@ -6424,6 +6464,9 @@
6424
6464
  --rui-Card--danger__background-color
6425
6465
 
6426
6466
  );
6467
+ --rui-local-link-color: var(--rui-color-feedback-danger);
6468
+ --rui-local-link-color-hover: var(--rui-color-feedback-danger-hover);
6469
+ --rui-local-link-color-active: var(--rui-color-feedback-danger-active);
6427
6470
  }
6428
6471
  .Card-module__isRootColorInfo__xdYwYAWt {
6429
6472
  --rui-local-color:
@@ -6441,6 +6484,9 @@
6441
6484
  --rui-Card--info__background-color
6442
6485
 
6443
6486
  );
6487
+ --rui-local-link-color: var(--rui-color-feedback-info);
6488
+ --rui-local-link-color-hover: var(--rui-color-feedback-info-hover);
6489
+ --rui-local-link-color-active: var(--rui-color-feedback-info-active);
6444
6490
  }
6445
6491
  .Card-module__isRootColorHelp__lc5Omloh {
6446
6492
  --rui-local-color:
@@ -6458,6 +6504,9 @@
6458
6504
  --rui-Card--help__background-color
6459
6505
 
6460
6506
  );
6507
+ --rui-local-link-color: var(--rui-color-feedback-help);
6508
+ --rui-local-link-color-hover: var(--rui-color-feedback-help-hover);
6509
+ --rui-local-link-color-active: var(--rui-color-feedback-help-active);
6461
6510
  }
6462
6511
  .Card-module__isRootColorNote__Jd0fjU8q {
6463
6512
  --rui-local-color:
@@ -6475,6 +6524,9 @@
6475
6524
  --rui-Card--note__background-color
6476
6525
 
6477
6526
  );
6527
+ --rui-local-link-color: var(--rui-color-feedback-note);
6528
+ --rui-local-link-color-hover: var(--rui-color-feedback-note-hover);
6529
+ --rui-local-link-color-active: var(--rui-color-feedback-note-active);
6478
6530
  }
6479
6531
  .Card-module__isRootColorLight__iCf72IJr {
6480
6532
  --rui-local-color:
@@ -6492,6 +6544,9 @@
6492
6544
  --rui-Card--light__background-color
6493
6545
 
6494
6546
  );
6547
+ --rui-local-link-color: var(--rui-color-neutral-dark);
6548
+ --rui-local-link-color-hover: var(--rui-color-neutral-dark-hover);
6549
+ --rui-local-link-color-active: var(--rui-color-neutral-dark-active);
6495
6550
  }
6496
6551
  .Card-module__isRootColorDark__qqlYTf5V {
6497
6552
  --rui-local-color:
@@ -6509,10 +6564,9 @@
6509
6564
  --rui-Card--dark__background-color
6510
6565
 
6511
6566
  );
6512
- }
6513
- .Card-module__isRootDisabled__Wm_9A4kS {
6514
- background-color: var(--rui-Card--disabled__background-color);
6515
- opacity: var(--rui-Card--disabled__opacity);
6567
+ --rui-local-link-color: var(--rui-color-neutral-light);
6568
+ --rui-local-link-color-hover: var(--rui-color-neutral-light-hover);
6569
+ --rui-local-link-color-active: var(--rui-color-neutral-light-active);
6516
6570
  }
6517
6571
  }
6518
6572
  /*!*********************************************************************************************************************************************************************************************************************************************!*\
@@ -6643,6 +6697,11 @@
6643
6697
  content: var(--rui-FormField--required__sign);
6644
6698
  color: var(--rui-FormField--required__sign__color);
6645
6699
  }
6700
+ .FormLayoutCustomField-module__isRootStateInvalid__OhuSVPjE {
6701
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
6702
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
6703
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
6704
+ }
6646
6705
  .FormLayoutCustomField-module__isRootStateInvalid__OhuSVPjE, .FormLayoutCustomField-module__isRootStateInvalid__OhuSVPjE:hover {
6647
6706
  --rui-local-color: var(--rui-FormField--invalid--default__color);
6648
6707
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -6707,6 +6766,11 @@
6707
6766
  var(--rui-FormField--invalid--checked__check-background-color)
6708
6767
  );
6709
6768
  }
6769
+ .FormLayoutCustomField-module__isRootStateValid__ROOaFW0P {
6770
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
6771
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
6772
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
6773
+ }
6710
6774
  .FormLayoutCustomField-module__isRootStateValid__ROOaFW0P, .FormLayoutCustomField-module__isRootStateValid__ROOaFW0P:hover {
6711
6775
  --rui-local-color: var(--rui-FormField--valid--default__color);
6712
6776
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -6771,6 +6835,11 @@
6771
6835
  var(--rui-FormField--valid--checked__check-background-color)
6772
6836
  );
6773
6837
  }
6838
+ .FormLayoutCustomField-module__isRootStateWarning__HG_NKMXd {
6839
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
6840
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
6841
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
6842
+ }
6774
6843
  .FormLayoutCustomField-module__isRootStateWarning__HG_NKMXd, .FormLayoutCustomField-module__isRootStateWarning__HG_NKMXd:hover {
6775
6844
  --rui-local-color: var(--rui-FormField--warning--default__color);
6776
6845
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -7098,6 +7167,11 @@
7098
7167
  content: var(--rui-FormField--required__sign);
7099
7168
  color: var(--rui-FormField--required__sign__color);
7100
7169
  }
7170
+ .CheckboxField-module__isRootStateInvalid__vPPd19_Y {
7171
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
7172
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
7173
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
7174
+ }
7101
7175
  .CheckboxField-module__isRootStateInvalid__vPPd19_Y, .CheckboxField-module__isRootStateInvalid__vPPd19_Y:hover {
7102
7176
  --rui-local-color: var(--rui-FormField--invalid--default__color);
7103
7177
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -7162,6 +7236,11 @@
7162
7236
  var(--rui-FormField--invalid--checked__check-background-color)
7163
7237
  );
7164
7238
  }
7239
+ .CheckboxField-module__isRootStateValid__r8FOGTne {
7240
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
7241
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
7242
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
7243
+ }
7165
7244
  .CheckboxField-module__isRootStateValid__r8FOGTne, .CheckboxField-module__isRootStateValid__r8FOGTne:hover {
7166
7245
  --rui-local-color: var(--rui-FormField--valid--default__color);
7167
7246
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -7226,6 +7305,11 @@
7226
7305
  var(--rui-FormField--valid--checked__check-background-color)
7227
7306
  );
7228
7307
  }
7308
+ .CheckboxField-module__isRootStateWarning__evYzQZrD {
7309
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
7310
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
7311
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
7312
+ }
7229
7313
  .CheckboxField-module__isRootStateWarning__evYzQZrD, .CheckboxField-module__isRootStateWarning__evYzQZrD:hover {
7230
7314
  --rui-local-color: var(--rui-FormField--warning--default__color);
7231
7315
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -7382,6 +7466,11 @@
7382
7466
  content: var(--rui-FormField--required__sign);
7383
7467
  color: var(--rui-FormField--required__sign__color);
7384
7468
  }
7469
+ .FileInputField-module__isRootStateInvalid__qpLo9mVU {
7470
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
7471
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
7472
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
7473
+ }
7385
7474
  .FileInputField-module__isRootStateInvalid__qpLo9mVU, .FileInputField-module__isRootStateInvalid__qpLo9mVU:hover {
7386
7475
  --rui-local-color: var(--rui-FormField--invalid--default__color);
7387
7476
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -7446,6 +7535,11 @@
7446
7535
  var(--rui-FormField--invalid--checked__check-background-color)
7447
7536
  );
7448
7537
  }
7538
+ .FileInputField-module__isRootStateValid__kd8G0bYh {
7539
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
7540
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
7541
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
7542
+ }
7449
7543
  .FileInputField-module__isRootStateValid__kd8G0bYh, .FileInputField-module__isRootStateValid__kd8G0bYh:hover {
7450
7544
  --rui-local-color: var(--rui-FormField--valid--default__color);
7451
7545
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -7510,6 +7604,11 @@
7510
7604
  var(--rui-FormField--valid--checked__check-background-color)
7511
7605
  );
7512
7606
  }
7607
+ .FileInputField-module__isRootStateWarning__jnC_TrpN {
7608
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
7609
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
7610
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
7611
+ }
7513
7612
  .FileInputField-module__isRootStateWarning__jnC_TrpN, .FileInputField-module__isRootStateWarning__jnC_TrpN:hover {
7514
7613
  --rui-local-color: var(--rui-FormField--warning--default__color);
7515
7614
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -8234,6 +8333,11 @@
8234
8333
  content: var(--rui-FormField--required__sign);
8235
8334
  color: var(--rui-FormField--required__sign__color);
8236
8335
  }
8336
+ .InputGroup-module__isRootStateInvalid__Atu0FWW_ {
8337
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
8338
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
8339
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
8340
+ }
8237
8341
  .InputGroup-module__isRootStateInvalid__Atu0FWW_, .InputGroup-module__isRootStateInvalid__Atu0FWW_:hover {
8238
8342
  --rui-local-color: var(--rui-FormField--invalid--default__color);
8239
8343
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -8298,6 +8402,11 @@
8298
8402
  var(--rui-FormField--invalid--checked__check-background-color)
8299
8403
  );
8300
8404
  }
8405
+ .InputGroup-module__isRootStateValid__ykb1SzPU {
8406
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
8407
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
8408
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
8409
+ }
8301
8410
  .InputGroup-module__isRootStateValid__ykb1SzPU, .InputGroup-module__isRootStateValid__ykb1SzPU:hover {
8302
8411
  --rui-local-color: var(--rui-FormField--valid--default__color);
8303
8412
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -8362,6 +8471,11 @@
8362
8471
  var(--rui-FormField--valid--checked__check-background-color)
8363
8472
  );
8364
8473
  }
8474
+ .InputGroup-module__isRootStateWarning__wK1Lp0ri {
8475
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
8476
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
8477
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
8478
+ }
8365
8479
  .InputGroup-module__isRootStateWarning__wK1Lp0ri, .InputGroup-module__isRootStateWarning__wK1Lp0ri:hover {
8366
8480
  --rui-local-color: var(--rui-FormField--warning--default__color);
8367
8481
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -8432,6 +8546,7 @@
8432
8546
  flex-direction: column;
8433
8547
  min-width: 0;
8434
8548
  max-width: 100%;
8549
+ max-width: none;
8435
8550
  }
8436
8551
  .InputGroup-module__isRootLayoutVertical__Kh7ukFER .InputGroup-module__label__KUZV3N9L,
8437
8552
  .InputGroup-module__isRootLayoutHorizontal__E9aM__PG .InputGroup-module__label__KUZV3N9L {
@@ -8779,6 +8894,24 @@
8779
8894
  border-width: calc((1rem + 2px) / 2) calc((1rem + 2px) / 2) 0;
8780
8895
  border-top-color: var(--rui-Popover__background-color);
8781
8896
  }
8897
+ .Popover-module__controlledPopover__bAdOI7sf {
8898
+ display: none;
8899
+ }
8900
+ .Popover-module__helper__qu_fiEGq {
8901
+ position: fixed;
8902
+ inset: unset;
8903
+ top: 0;
8904
+ right: 0;
8905
+ width: auto;
8906
+ height: auto;
8907
+ padding: 0;
8908
+ border: none;
8909
+ background: transparent;
8910
+ pointer-events: none;
8911
+ }
8912
+ .Popover-module__helper__qu_fiEGq:popover-open ~ .Popover-module__controlledPopover__bAdOI7sf {
8913
+ display: block;
8914
+ }
8782
8915
  .Popover-module__isRootAtTop__GHVVe2Fu {
8783
8916
  bottom: calc(100% + 1px - 1px);
8784
8917
  }
@@ -9098,6 +9231,14 @@
9098
9231
  content: var(--rui-FormField--required__sign);
9099
9232
  color: var(--rui-FormField--required__sign__color);
9100
9233
  }
9234
+ .Radio-module__isRootRequired__pIsCmVdz .Radio-module__optionLabel__D7ODZEbC {
9235
+ color: var(--rui-local-surrounding-text-color, var(--rui-FormField--required__label__color));
9236
+ }
9237
+ .Radio-module__isRootStateInvalid__zn0zdKi2 {
9238
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
9239
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
9240
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
9241
+ }
9101
9242
  .Radio-module__isRootStateInvalid__zn0zdKi2, .Radio-module__isRootStateInvalid__zn0zdKi2:hover {
9102
9243
  --rui-local-color: var(--rui-FormField--invalid--default__color);
9103
9244
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -9162,6 +9303,11 @@
9162
9303
  var(--rui-FormField--invalid--checked__check-background-color)
9163
9304
  );
9164
9305
  }
9306
+ .Radio-module__isRootStateValid__uliUzaIp {
9307
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
9308
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
9309
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
9310
+ }
9165
9311
  .Radio-module__isRootStateValid__uliUzaIp, .Radio-module__isRootStateValid__uliUzaIp:hover {
9166
9312
  --rui-local-color: var(--rui-FormField--valid--default__color);
9167
9313
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -9226,6 +9372,11 @@
9226
9372
  var(--rui-FormField--valid--checked__check-background-color)
9227
9373
  );
9228
9374
  }
9375
+ .Radio-module__isRootStateWarning__t9RqjOJP {
9376
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
9377
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
9378
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
9379
+ }
9229
9380
  .Radio-module__isRootStateWarning__t9RqjOJP, .Radio-module__isRootStateWarning__t9RqjOJP:hover {
9230
9381
  --rui-local-color: var(--rui-FormField--warning--default__color);
9231
9382
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -9923,6 +10074,11 @@
9923
10074
  opacity: var(--rui-FormField--disabled__opacity);
9924
10075
  cursor: var(--rui-FormField--disabled__cursor);
9925
10076
  }
10077
+ .SelectField-module__isRootStateInvalid__ygifhBAb {
10078
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
10079
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
10080
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
10081
+ }
9926
10082
  .SelectField-module__isRootStateInvalid__ygifhBAb, .SelectField-module__isRootStateInvalid__ygifhBAb:hover {
9927
10083
  --rui-local-color: var(--rui-FormField--invalid--default__color);
9928
10084
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -9987,6 +10143,11 @@
9987
10143
  var(--rui-FormField--invalid--checked__check-background-color)
9988
10144
  );
9989
10145
  }
10146
+ .SelectField-module__isRootStateValid__LD4mrVeo {
10147
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
10148
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
10149
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
10150
+ }
9990
10151
  .SelectField-module__isRootStateValid__LD4mrVeo, .SelectField-module__isRootStateValid__LD4mrVeo:hover {
9991
10152
  --rui-local-color: var(--rui-FormField--valid--default__color);
9992
10153
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -10051,6 +10212,11 @@
10051
10212
  var(--rui-FormField--valid--checked__check-background-color)
10052
10213
  );
10053
10214
  }
10215
+ .SelectField-module__isRootStateWarning__fE5GNhNK {
10216
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
10217
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
10218
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
10219
+ }
10054
10220
  .SelectField-module__isRootStateWarning__fE5GNhNK, .SelectField-module__isRootStateWarning__fE5GNhNK:hover {
10055
10221
  --rui-local-color: var(--rui-FormField--warning--default__color);
10056
10222
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -10751,6 +10917,11 @@
10751
10917
  opacity: var(--rui-FormField--disabled__opacity);
10752
10918
  cursor: var(--rui-FormField--disabled__cursor);
10753
10919
  }
10920
+ .TextArea-module__isRootStateInvalid__5juQGER0 {
10921
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
10922
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
10923
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
10924
+ }
10754
10925
  .TextArea-module__isRootStateInvalid__5juQGER0, .TextArea-module__isRootStateInvalid__5juQGER0:hover {
10755
10926
  --rui-local-color: var(--rui-FormField--invalid--default__color);
10756
10927
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -10815,6 +10986,11 @@
10815
10986
  var(--rui-FormField--invalid--checked__check-background-color)
10816
10987
  );
10817
10988
  }
10989
+ .TextArea-module__isRootStateValid__Ih6AFuas {
10990
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
10991
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
10992
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
10993
+ }
10818
10994
  .TextArea-module__isRootStateValid__Ih6AFuas, .TextArea-module__isRootStateValid__Ih6AFuas:hover {
10819
10995
  --rui-local-color: var(--rui-FormField--valid--default__color);
10820
10996
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -10879,6 +11055,11 @@
10879
11055
  var(--rui-FormField--valid--checked__check-background-color)
10880
11056
  );
10881
11057
  }
11058
+ .TextArea-module__isRootStateWarning__T_TCx1R_ {
11059
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
11060
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
11061
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
11062
+ }
10882
11063
  .TextArea-module__isRootStateWarning__T_TCx1R_, .TextArea-module__isRootStateWarning__T_TCx1R_:hover {
10883
11064
  --rui-local-color: var(--rui-FormField--warning--default__color);
10884
11065
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -11372,6 +11553,11 @@
11372
11553
  opacity: var(--rui-FormField--disabled__opacity);
11373
11554
  cursor: var(--rui-FormField--disabled__cursor);
11374
11555
  }
11556
+ .TextField-module__isRootStateInvalid__bxsnTMJY {
11557
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
11558
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
11559
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
11560
+ }
11375
11561
  .TextField-module__isRootStateInvalid__bxsnTMJY, .TextField-module__isRootStateInvalid__bxsnTMJY:hover {
11376
11562
  --rui-local-color: var(--rui-FormField--invalid--default__color);
11377
11563
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -11436,6 +11622,11 @@
11436
11622
  var(--rui-FormField--invalid--checked__check-background-color)
11437
11623
  );
11438
11624
  }
11625
+ .TextField-module__isRootStateValid__IEIWMvE8 {
11626
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
11627
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
11628
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
11629
+ }
11439
11630
  .TextField-module__isRootStateValid__IEIWMvE8, .TextField-module__isRootStateValid__IEIWMvE8:hover {
11440
11631
  --rui-local-color: var(--rui-FormField--valid--default__color);
11441
11632
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -11500,6 +11691,11 @@
11500
11691
  var(--rui-FormField--valid--checked__check-background-color)
11501
11692
  );
11502
11693
  }
11694
+ .TextField-module__isRootStateWarning__OI5XUWPf {
11695
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
11696
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
11697
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
11698
+ }
11503
11699
  .TextField-module__isRootStateWarning__OI5XUWPf, .TextField-module__isRootStateWarning__OI5XUWPf:hover {
11504
11700
  --rui-local-color: var(--rui-FormField--warning--default__color);
11505
11701
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);
@@ -11770,17 +11966,17 @@
11770
11966
  .TextLink-module__root__yRDpdHz1 {
11771
11967
  -webkit-text-decoration: var(--rui-TextLink__text-decoration);
11772
11968
  text-decoration: var(--rui-TextLink__text-decoration);
11773
- color: var(--rui-TextLink__color);
11969
+ color: var(--rui-local-link-color, var(--rui-TextLink__color));
11774
11970
  }
11775
11971
  .TextLink-module__root__yRDpdHz1:hover {
11776
11972
  -webkit-text-decoration: var(--rui-TextLink--hover__text-decoration);
11777
11973
  text-decoration: var(--rui-TextLink--hover__text-decoration);
11778
- color: var(--rui-TextLink--hover__color);
11974
+ color: var(--rui-local-link-color-hover, var(--rui-TextLink--hover__color));
11779
11975
  }
11780
11976
  .TextLink-module__root__yRDpdHz1:active {
11781
11977
  -webkit-text-decoration: var(--rui-TextLink--active__text-decoration);
11782
11978
  text-decoration: var(--rui-TextLink--active__text-decoration);
11783
- color: var(--rui-TextLink--active__color);
11979
+ color: var(--rui-local-link-color-active, var(--rui-TextLink--active__color));
11784
11980
  }
11785
11981
  }
11786
11982
  /*!*************************************************************************************************************************************************************************************************************************************!*\
@@ -11965,6 +12161,11 @@
11965
12161
  content: var(--rui-FormField--required__sign);
11966
12162
  color: var(--rui-FormField--required__sign__color);
11967
12163
  }
12164
+ .Toggle-module__isRootStateInvalid__YeydgHoH {
12165
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
12166
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
12167
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
12168
+ }
11968
12169
  .Toggle-module__isRootStateInvalid__YeydgHoH, .Toggle-module__isRootStateInvalid__YeydgHoH:hover {
11969
12170
  --rui-local-color: var(--rui-FormField--invalid--default__color);
11970
12171
  --rui-local-border-color: var(--rui-FormField--invalid--default__border-color);
@@ -12029,6 +12230,11 @@
12029
12230
  var(--rui-FormField--invalid--checked__check-background-color)
12030
12231
  );
12031
12232
  }
12233
+ .Toggle-module__isRootStateValid__YjDzLP2F {
12234
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
12235
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
12236
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
12237
+ }
12032
12238
  .Toggle-module__isRootStateValid__YjDzLP2F, .Toggle-module__isRootStateValid__YjDzLP2F:hover {
12033
12239
  --rui-local-color: var(--rui-FormField--valid--default__color);
12034
12240
  --rui-local-border-color: var(--rui-FormField--valid--default__border-color);
@@ -12093,6 +12299,11 @@
12093
12299
  var(--rui-FormField--valid--checked__check-background-color)
12094
12300
  );
12095
12301
  }
12302
+ .Toggle-module__isRootStateWarning__vhYc4kYJ {
12303
+ --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
12304
+ --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
12305
+ --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
12306
+ }
12096
12307
  .Toggle-module__isRootStateWarning__vhYc4kYJ, .Toggle-module__isRootStateWarning__vhYc4kYJ:hover {
12097
12308
  --rui-local-color: var(--rui-FormField--warning--default__color);
12098
12309
  --rui-local-border-color: var(--rui-FormField--warning--default__border-color);