@capra/core 1.14.1 → 1.15.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.
package/dist/style.css CHANGED
@@ -342,14 +342,13 @@
342
342
  position: absolute;
343
343
  overflow: hidden;
344
344
  }
345
- .capra-TextInput-module--5NVeG-wrapper {
345
+ .capra-TextInput-module-bNpXFG-wrapper {
346
346
  border: var(--cds2-border-default);
347
- border-color: var(--cds2-temporary-input-border-primary);
348
347
  border-radius: var(--cds2-radius-md);
349
- background-color: var(--cds2-temporary-input-background-primary);
348
+ background-color: var(--cds2-color-background-neutral-surface);
350
349
  width: 100%;
351
350
  min-width: 0;
352
- color: var(--cds2-temporary-input-foreground-primary);
351
+ color: var(--cds2-color-foreground-neutral-default);
353
352
  font: var(--cds2-typography-body-md-normal);
354
353
  transition: border-color var(--cds2-motion-duration-short) ease,
355
354
  box-shadow var(--cds2-motion-duration-short) ease;
@@ -357,29 +356,29 @@
357
356
  display: inline-flex;
358
357
 
359
358
  &:hover:not(:has( > input:disabled)):not(:has( > input:read-only)) {
360
- border-color: var(--cds2-temporary-input-border-highlight);
359
+ border-color: var(--cds2-color-border-accent-hover);
361
360
  }
362
361
 
363
362
  &:has( > input:focus-visible):not(:has( > input:disabled)):not(:has( > input:read-only)) {
364
363
  outline: var(--cds2-border-focus);
365
364
  outline-offset: var(--cds2-spacing-xs);
366
- border-color: var(--cds2-temporary-input-border-highlight);
365
+ border-color: var(--cds2-color-border-accent-hover);
367
366
  }
368
367
 
369
368
  &:has( > input:disabled), &:has( > input:read-only) {
370
- background-color: var(--cds2-temporary-input-background-disabled);
371
- border-color: var(--cds2-temporary-input-border-disabled);
372
- color: var(--cds2-temporary-input-foreground-disabled);
369
+ background-color: var(--cds2-color-background-disabled);
370
+ border-color: var(--cds2-color-border-disabled);
371
+ color: var(--cds2-color-foreground-on-disabled);
373
372
 
374
- & .capra-TextInput-module--5NVeG-leadingSlot, & .capra-TextInput-module--5NVeG-trailingSlot {
375
- color: var(--cds2-temporary-input-foreground-disabled);
373
+ & .capra-TextInput-module-bNpXFG-leadingSlot, & .capra-TextInput-module-bNpXFG-trailingSlot {
374
+ color: var(--cds2-color-foreground-on-disabled);
376
375
  }
377
376
  }
378
377
 
379
378
  &:has( > input:read-only) {
380
379
  cursor: default;
381
380
 
382
- & .capra-TextInput-module--5NVeG-input {
381
+ & .capra-TextInput-module-bNpXFG-input {
383
382
  cursor: default;
384
383
  }
385
384
  }
@@ -387,12 +386,12 @@
387
386
  &:has( > input:disabled) {
388
387
  cursor: not-allowed;
389
388
 
390
- & .capra-TextInput-module--5NVeG-input {
389
+ & .capra-TextInput-module-bNpXFG-input {
391
390
  cursor: not-allowed;
392
391
  }
393
392
  }
394
393
 
395
- & .capra-TextInput-module--5NVeG-input {
394
+ & .capra-TextInput-module-bNpXFG-input {
396
395
  min-width: 0;
397
396
  color: inherit;
398
397
  font: inherit;
@@ -410,24 +409,24 @@
410
409
  &[data-size="sm"] {
411
410
  gap: var(--cds2-spacing-sm);
412
411
 
413
- &:not(:has(.capra-TextInput-module--5NVeG-leadingSlot)) .capra-TextInput-module--5NVeG-input {
412
+ &:not(:has(.capra-TextInput-module-bNpXFG-leadingSlot)) .capra-TextInput-module-bNpXFG-input {
414
413
  padding-inline-start: var(--cds2-spacing-md);
415
414
  }
416
415
 
417
- &:not(:has(.capra-TextInput-module--5NVeG-trailingSlot)) .capra-TextInput-module--5NVeG-input {
416
+ &:not(:has(.capra-TextInput-module-bNpXFG-trailingSlot)) .capra-TextInput-module-bNpXFG-input {
418
417
  padding-inline-end: var(--cds2-spacing-md);
419
418
  }
420
419
 
421
- & .capra-TextInput-module--5NVeG-input {
420
+ & .capra-TextInput-module-bNpXFG-input {
422
421
  height: calc(var(--cds2-dimension-component-sm) - 2px);
423
422
  font: var(--cds2-typography-body-sm-normal);
424
423
  }
425
424
 
426
- & .capra-TextInput-module--5NVeG-leadingSlot {
425
+ & .capra-TextInput-module-bNpXFG-leadingSlot {
427
426
  padding-inline-start: var(--cds2-spacing-md);
428
427
  }
429
428
 
430
- & .capra-TextInput-module--5NVeG-trailingSlot {
429
+ & .capra-TextInput-module-bNpXFG-trailingSlot {
431
430
  padding-inline-end: var(--cds2-spacing-md);
432
431
  }
433
432
  }
@@ -435,29 +434,29 @@
435
434
  &[data-size="md"] {
436
435
  gap: var(--cds2-spacing-md);
437
436
 
438
- &:not(:has(.capra-TextInput-module--5NVeG-leadingSlot)) .capra-TextInput-module--5NVeG-input {
437
+ &:not(:has(.capra-TextInput-module-bNpXFG-leadingSlot)) .capra-TextInput-module-bNpXFG-input {
439
438
  padding-inline-start: var(--cds2-spacing-md);
440
439
  }
441
440
 
442
- &:not(:has(.capra-TextInput-module--5NVeG-trailingSlot)) .capra-TextInput-module--5NVeG-input {
441
+ &:not(:has(.capra-TextInput-module-bNpXFG-trailingSlot)) .capra-TextInput-module-bNpXFG-input {
443
442
  padding-inline-end: var(--cds2-spacing-md);
444
443
  }
445
444
 
446
- & .capra-TextInput-module--5NVeG-input {
445
+ & .capra-TextInput-module-bNpXFG-input {
447
446
  height: calc(var(--cds2-dimension-component-md) - 2px);
448
447
  font: var(--cds2-typography-body-md-normal);
449
448
  }
450
449
 
451
- & .capra-TextInput-module--5NVeG-leadingSlot {
450
+ & .capra-TextInput-module-bNpXFG-leadingSlot {
452
451
  padding-inline-start: var(--cds2-spacing-md);
453
452
  }
454
453
 
455
- & .capra-TextInput-module--5NVeG-trailingSlot {
454
+ & .capra-TextInput-module-bNpXFG-trailingSlot {
456
455
  padding-inline-end: var(--cds2-spacing-md);
457
456
  }
458
457
  }
459
458
 
460
- & .capra-TextInput-module--5NVeG-leadingSlot, & .capra-TextInput-module--5NVeG-trailingSlot {
459
+ & .capra-TextInput-module-bNpXFG-leadingSlot, & .capra-TextInput-module-bNpXFG-trailingSlot {
461
460
  align-items: center;
462
461
  gap: var(--cds2-spacing-xs);
463
462
  color: var(--cds2-color-foreground-subtle);
@@ -465,7 +464,7 @@
465
464
  display: inline-flex;
466
465
  }
467
466
 
468
- & .capra-TextInput-module--5NVeG-errorIndicator {
467
+ & .capra-TextInput-module-bNpXFG-errorIndicator {
469
468
  color: var(--cds2-color-foreground-danger-default);
470
469
  flex-shrink: 0;
471
470
  justify-content: center;
@@ -473,7 +472,7 @@
473
472
  display: inline-flex;
474
473
  }
475
474
 
476
- & .capra-TextInput-module--5NVeG-warningIndicator {
475
+ & .capra-TextInput-module-bNpXFG-warningIndicator {
477
476
  color: var(--cds2-color-foreground-warning-default);
478
477
  flex-shrink: 0;
479
478
  justify-content: center;
@@ -481,13 +480,13 @@
481
480
  display: inline-flex;
482
481
  }
483
482
  }
484
- .capra-HelperText-module-0SVw3W-layout {
483
+ .capra-HelperText-module-ofZKJW-layout {
485
484
  align-items: center;
486
485
  gap: var(--cds2-spacing-sm);
487
486
  display: flex;
488
487
  }
489
488
 
490
- .capra-HelperText-module-0SVw3W-helper {
489
+ .capra-HelperText-module-ofZKJW-helper {
491
490
  align-items: center;
492
491
  gap: var(--cds2-spacing-xs);
493
492
  color: var(--cds2-color-foreground-subtle);
@@ -503,24 +502,24 @@
503
502
  color: var(--cds2-color-foreground-warning-default);
504
503
  }
505
504
 
506
- .capra-HelperText-module-0SVw3W-layout[data-disabled="true"] & {
507
- color: var(--cds2-temporary-input-foreground-disabled);
505
+ .capra-HelperText-module-ofZKJW-layout[data-disabled="true"] & {
506
+ color: var(--cds2-color-foreground-on-disabled);
508
507
  }
509
508
  }
510
509
 
511
- .capra-HelperText-module-0SVw3W-icon {
510
+ .capra-HelperText-module-ofZKJW-icon {
512
511
  color: inherit;
513
512
  flex-shrink: 0;
514
513
  display: inline-flex;
515
514
  }
516
515
 
517
- .capra-HelperText-module-0SVw3W-count {
516
+ .capra-HelperText-module-ofZKJW-count {
518
517
  font: var(--cds2-typography-body-sm-normal);
519
518
  color: var(--cds2-color-foreground-subtle);
520
519
  white-space: nowrap;
521
520
 
522
- .capra-HelperText-module-0SVw3W-layout[data-disabled="true"] & {
523
- color: var(--cds2-temporary-input-foreground-disabled);
521
+ .capra-HelperText-module-ofZKJW-layout[data-disabled="true"] & {
522
+ color: var(--cds2-color-foreground-on-disabled);
524
523
  }
525
524
  }
526
525
  .capra-fieldLayout-module-0mM4jW-field {
@@ -628,9 +627,7 @@
628
627
  align-items: center;
629
628
  display: flex;
630
629
  }
631
- .capra-Badge-module-_3WihW-badge {
632
- border: var(--cds2-border-badge);
633
- border-color: var(--cds2-color-background-application);
630
+ .capra-Badge-module-rSl34a-badge {
634
631
  border-radius: var(--cds2-radius-full);
635
632
  font: var(--cds2-typography-body-xs-semibold);
636
633
  justify-content: center;
@@ -683,14 +680,14 @@
683
680
  }
684
681
  }
685
682
 
686
- .capra-Badge-module-_3WihW-base {
683
+ .capra-Badge-module-rSl34a-base {
687
684
  --_badge-offset-x: 0px;
688
685
  --_badge-offset-y: 0px;
689
686
  width: fit-content;
690
687
  display: inline-block;
691
688
  position: relative;
692
689
 
693
- & .capra-Badge-module-_3WihW-badge {
690
+ & .capra-Badge-module-rSl34a-badge {
694
691
  top: var(--_badge-offset-y);
695
692
  right: var(--_badge-offset-x);
696
693
  position: absolute;
@@ -1572,7 +1569,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1572
1569
  transition: none;
1573
1570
  }
1574
1571
  }
1575
- .capra-InputRow-module-hUHSXW-row {
1572
+ .capra-InputRow-module-hu7l6q-row {
1576
1573
  flex-direction: row;
1577
1574
  align-items: stretch;
1578
1575
  width: 100%;
@@ -1611,15 +1608,14 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1611
1608
  }
1612
1609
  }
1613
1610
 
1614
- .capra-InputRow-module-hUHSXW-addon {
1611
+ .capra-InputRow-module-hu7l6q-addon {
1615
1612
  box-sizing: border-box;
1616
1613
  align-items: center;
1617
1614
  gap: var(--cds2-spacing-md);
1618
1615
  padding-inline: var(--cds2-spacing-md);
1619
1616
  border: var(--cds2-border-default);
1620
- border-color: var(--cds2-temporary-input-border-primary);
1621
1617
  background-color: var(--cds2-brand-core-gray-25);
1622
- color: var(--cds2-temporary-input-foreground-primary);
1618
+ color: var(--cds2-color-foreground-neutral-default);
1623
1619
  white-space: nowrap;
1624
1620
  display: inline-flex;
1625
1621
 
@@ -1634,20 +1630,20 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1634
1630
  }
1635
1631
  }
1636
1632
 
1637
- .capra-InputRow-module-hUHSXW-row > [data-capra-input-row-addon]:first-child:not(:only-child) {
1633
+ .capra-InputRow-module-hu7l6q-row > [data-capra-input-row-addon]:first-child:not(:only-child) {
1638
1634
  border-top-left-radius: var(--cds2-radius-md);
1639
1635
  border-bottom-left-radius: var(--cds2-radius-md);
1640
1636
  }
1641
1637
 
1642
- .capra-InputRow-module-hUHSXW-row > [data-capra-input-row-addon]:last-child:not(:only-child) {
1638
+ .capra-InputRow-module-hu7l6q-row > [data-capra-input-row-addon]:last-child:not(:only-child) {
1643
1639
  border-top-right-radius: var(--cds2-radius-md);
1644
1640
  border-bottom-right-radius: var(--cds2-radius-md);
1645
1641
  }
1646
1642
 
1647
- .capra-InputRow-module-hUHSXW-row > [data-capra-input-row-addon]:only-child {
1643
+ .capra-InputRow-module-hu7l6q-row > [data-capra-input-row-addon]:only-child {
1648
1644
  border-radius: var(--cds2-radius-md);
1649
1645
  }
1650
- .capra-NumberField-module-IscOzq-withStepper {
1646
+ .capra-NumberField-module-9EHhwq-withStepper {
1651
1647
  align-items: stretch;
1652
1648
 
1653
1649
  & input {
@@ -1661,13 +1657,12 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1661
1657
  }
1662
1658
  }
1663
1659
 
1664
- .capra-NumberField-module-IscOzq-slotAlign {
1660
+ .capra-NumberField-module-9EHhwq-slotAlign {
1665
1661
  align-self: center;
1666
1662
  }
1667
1663
 
1668
- .capra-NumberField-module-IscOzq-withStepper .capra-NumberField-module-IscOzq-stepper {
1664
+ .capra-NumberField-module-9EHhwq-withStepper .capra-NumberField-module-9EHhwq-stepper {
1669
1665
  border-left: var(--cds2-border-default);
1670
- border-color: var(--cds2-temporary-input-border-primary);
1671
1666
  border-radius: 0 var(--cds2-radius-md) var(--cds2-radius-md) 0;
1672
1667
  width: 28px;
1673
1668
  min-width: 28px;
@@ -1679,8 +1674,8 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1679
1674
  overflow: hidden;
1680
1675
  }
1681
1676
 
1682
- .capra-NumberField-module-IscOzq-withStepper .capra-NumberField-module-IscOzq-stepButton {
1683
- background: var(--cds2-temporary-input-background-primary);
1677
+ .capra-NumberField-module-9EHhwq-withStepper .capra-NumberField-module-9EHhwq-stepButton {
1678
+ background: var(--cds2-color-background-neutral-surface);
1684
1679
  min-height: 0;
1685
1680
  color: var(--cds2-color-foreground-subtle);
1686
1681
  cursor: pointer;
@@ -1693,7 +1688,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1693
1688
 
1694
1689
  &:disabled {
1695
1690
  cursor: not-allowed;
1696
- color: var(--cds2-temporary-input-foreground-disabled);
1691
+ color: var(--cds2-color-foreground-on-disabled);
1697
1692
  }
1698
1693
 
1699
1694
  &:focus-visible {
@@ -1703,70 +1698,69 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1703
1698
  }
1704
1699
  }
1705
1700
 
1706
- .capra-NumberField-module-IscOzq-withStepper:has(input:disabled) .capra-NumberField-module-IscOzq-stepper, .capra-NumberField-module-IscOzq-withStepper:has(input:read-only) .capra-NumberField-module-IscOzq-stepper {
1701
+ .capra-NumberField-module-9EHhwq-withStepper:has(input:disabled) .capra-NumberField-module-9EHhwq-stepper, .capra-NumberField-module-9EHhwq-withStepper:has(input:read-only) .capra-NumberField-module-9EHhwq-stepper {
1707
1702
  display: none;
1708
1703
  }
1709
1704
 
1710
- .capra-NumberField-module-IscOzq-withStepper .capra-NumberField-module-IscOzq-stepDivider {
1705
+ .capra-NumberField-module-9EHhwq-withStepper .capra-NumberField-module-9EHhwq-stepDivider {
1711
1706
  border-top: var(--cds2-border-default);
1712
- border-color: var(--cds2-temporary-input-border-primary);
1713
1707
  flex-shrink: 0;
1714
1708
  height: 0;
1715
1709
  }
1716
1710
 
1717
- .capra-NumberField-module-IscOzq-withStepper .capra-NumberField-module-IscOzq-stepIcon {
1711
+ .capra-NumberField-module-9EHhwq-withStepper .capra-NumberField-module-9EHhwq-stepIcon {
1718
1712
  line-height: 0;
1719
1713
  display: inline-flex;
1720
1714
  }
1721
- .capra-DatePickerField-module-F3cFEa-datePickerField[data-open="true"] [data-capra-text-input] {
1715
+ .capra-DatePickerField-module-QiJSbG-datePickerField[data-open="true"] [data-capra-text-input] {
1722
1716
  border-color: var(--cds2-color-background-accent-solid-active);
1723
1717
  }
1724
1718
 
1725
- .capra-DatePickerField-module-F3cFEa-datePickerShell {
1719
+ .capra-DatePickerField-module-QiJSbG-datePickerShell {
1726
1720
  box-sizing: border-box;
1727
1721
  gap: var(--cds2-spacing-md);
1728
1722
  padding-inline: var(--cds2-spacing-md);
1729
1723
  border-radius: var(--cds2-radius-md);
1730
1724
  }
1731
1725
 
1732
- .capra-DatePickerField-module-F3cFEa-datePickerField:not([data-disabled="true"], [data-readonly="true"]) .capra-DatePickerField-module-F3cFEa-datePickerShell:hover {
1733
- border-color: var(--cds2-temporary-input-border-highlight);
1726
+ .capra-DatePickerField-module-QiJSbG-datePickerField:not([data-disabled="true"], [data-readonly="true"]) .capra-DatePickerField-module-QiJSbG-datePickerShell:hover {
1727
+ border-color: var(--cds2-color-border-accent-hover);
1734
1728
  }
1735
1729
 
1736
- .capra-DatePickerField-module-F3cFEa-datePickerField:not([data-disabled="true"], [data-readonly="true"]) .capra-DatePickerField-module-F3cFEa-datePickerShell:has([data-focused="true"]) {
1730
+ .capra-DatePickerField-module-QiJSbG-datePickerField:not([data-disabled="true"], [data-readonly="true"]) .capra-DatePickerField-module-QiJSbG-datePickerShell:has([data-focused="true"]) {
1737
1731
  outline: var(--cds2-border-focus);
1738
1732
  outline-offset: var(--cds2-spacing-xs);
1739
- border-color: var(--cds2-temporary-input-border-highlight);
1733
+ border-color: var(--cds2-color-border-accent-hover);
1740
1734
  }
1741
1735
 
1742
- .capra-DatePickerField-module-F3cFEa-datePickerField[data-disabled="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell, .capra-DatePickerField-module-F3cFEa-datePickerField[data-readonly="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell {
1743
- background-color: var(--cds2-temporary-input-background-disabled);
1744
- border-color: var(--cds2-temporary-input-border-disabled);
1745
- color: var(--cds2-temporary-input-foreground-disabled);
1736
+ .capra-DatePickerField-module-QiJSbG-datePickerField[data-disabled="true"] .capra-DatePickerField-module-QiJSbG-datePickerShell, .capra-DatePickerField-module-QiJSbG-datePickerField[data-readonly="true"] .capra-DatePickerField-module-QiJSbG-datePickerShell {
1737
+ background-color: var(--cds2-color-background-disabled);
1738
+ border-color: var(--cds2-color-border-disabled);
1739
+ color: var(--cds2-color-foreground-on-disabled);
1746
1740
  }
1747
1741
 
1748
- .capra-DatePickerField-module-F3cFEa-datePickerField[data-readonly="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell {
1742
+ .capra-DatePickerField-module-QiJSbG-datePickerField[data-readonly="true"] .capra-DatePickerField-module-QiJSbG-datePickerShell {
1749
1743
  cursor: default;
1750
1744
  }
1751
1745
 
1752
- .capra-DatePickerField-module-F3cFEa-datePickerField[data-disabled="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell {
1746
+ .capra-DatePickerField-module-QiJSbG-datePickerField[data-disabled="true"] .capra-DatePickerField-module-QiJSbG-datePickerShell {
1753
1747
  cursor: not-allowed;
1754
1748
  }
1755
1749
 
1756
- .capra-DatePickerField-module-F3cFEa-dateInputShell {
1750
+ .capra-DatePickerField-module-QiJSbG-dateInputShell {
1757
1751
  flex: auto;
1758
1752
  min-width: 0;
1759
1753
  position: relative;
1760
1754
  }
1761
1755
 
1762
- .capra-DatePickerField-module-F3cFEa-dateInputShell[data-show-string-placeholder="true"] .capra-DatePickerField-module-F3cFEa-dateInput {
1756
+ .capra-DatePickerField-module-QiJSbG-dateInputShell[data-show-string-placeholder="true"] .capra-DatePickerField-module-QiJSbG-dateInput {
1763
1757
  opacity: 0;
1764
1758
  }
1765
1759
 
1766
- .capra-DatePickerField-module-F3cFEa-stringPlaceholder {
1760
+ .capra-DatePickerField-module-QiJSbG-stringPlaceholder {
1767
1761
  max-width: 100%;
1768
1762
  font: inherit;
1769
- color: var(--cds2-temporary-input-foreground-placeholder);
1763
+ color: var(--cds2-color-foreground-placeholder);
1770
1764
  white-space: nowrap;
1771
1765
  text-overflow: ellipsis;
1772
1766
  pointer-events: none;
@@ -1778,11 +1772,11 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1778
1772
  overflow: hidden;
1779
1773
  }
1780
1774
 
1781
- .capra-DatePickerField-module-F3cFEa-datePickerField[data-disabled="true"] .capra-DatePickerField-module-F3cFEa-stringPlaceholder, .capra-DatePickerField-module-F3cFEa-datePickerField[data-readonly="true"] .capra-DatePickerField-module-F3cFEa-stringPlaceholder {
1782
- color: var(--cds2-temporary-input-foreground-disabled);
1775
+ .capra-DatePickerField-module-QiJSbG-datePickerField[data-disabled="true"] .capra-DatePickerField-module-QiJSbG-stringPlaceholder, .capra-DatePickerField-module-QiJSbG-datePickerField[data-readonly="true"] .capra-DatePickerField-module-QiJSbG-stringPlaceholder {
1776
+ color: var(--cds2-color-foreground-on-disabled);
1783
1777
  }
1784
1778
 
1785
- .capra-DatePickerField-module-F3cFEa-dateInput {
1779
+ .capra-DatePickerField-module-QiJSbG-dateInput {
1786
1780
  min-width: 0;
1787
1781
  color: var(--cds2-color-foreground-default);
1788
1782
  align-items: center;
@@ -1799,7 +1793,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1799
1793
  }
1800
1794
  }
1801
1795
 
1802
- .capra-DatePickerField-module-F3cFEa-segment {
1796
+ .capra-DatePickerField-module-QiJSbG-segment {
1803
1797
  padding: 0 var(--cds2-spacing-xs);
1804
1798
  border-radius: var(--cds2-radius-md);
1805
1799
  font: inherit;
@@ -1814,12 +1808,12 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1814
1808
  }
1815
1809
 
1816
1810
  &[data-placeholder="true"] {
1817
- color: var(--cds2-temporary-input-foreground-placeholder);
1811
+ color: var(--cds2-color-foreground-placeholder);
1818
1812
  }
1819
1813
 
1820
1814
  &[data-readonly="true"], &[data-disabled="true"] {
1821
1815
  cursor: not-allowed;
1822
- color: var(--cds2-temporary-input-foreground-disabled);
1816
+ color: var(--cds2-color-foreground-on-disabled);
1823
1817
  }
1824
1818
 
1825
1819
  &[data-focused="true"] {
@@ -1828,7 +1822,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1828
1822
  }
1829
1823
  }
1830
1824
 
1831
- .capra-DatePickerField-module-F3cFEa-calendarButton {
1825
+ .capra-DatePickerField-module-QiJSbG-calendarButton {
1832
1826
  box-sizing: border-box;
1833
1827
  min-width: var(--cds2-dimension-component-sm);
1834
1828
  min-height: var(--cds2-dimension-component-sm);
@@ -1845,7 +1839,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1845
1839
 
1846
1840
  &[data-disabled="true"] {
1847
1841
  cursor: not-allowed;
1848
- color: var(--cds2-temporary-input-foreground-disabled);
1842
+ color: var(--cds2-color-foreground-on-disabled);
1849
1843
  }
1850
1844
 
1851
1845
  &[data-focus-visible="true"] {
@@ -1855,20 +1849,19 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1855
1849
  }
1856
1850
  }
1857
1851
 
1858
- .capra-DatePickerField-module-F3cFEa-popover {
1852
+ .capra-DatePickerField-module-QiJSbG-popover {
1859
1853
  padding: calc(var(--cds2-spacing-md) + var(--cds2-spacing-sm));
1860
1854
  border-radius: var(--cds2-radius-md);
1861
1855
  border: var(--cds2-border-default);
1862
- border-color: var(--cds2-temporary-input-border-primary);
1863
- background: var(--cds2-temporary-input-background-primary);
1856
+ background: var(--cds2-color-background-neutral-surface);
1864
1857
  box-shadow: var(--cds2-shadow-medium-down);
1865
1858
  }
1866
1859
 
1867
- .capra-DatePickerField-module-F3cFEa-dialog {
1860
+ .capra-DatePickerField-module-QiJSbG-dialog {
1868
1861
  outline: none;
1869
1862
  }
1870
1863
 
1871
- .capra-DatePickerField-module-F3cFEa-calendar {
1864
+ .capra-DatePickerField-module-QiJSbG-calendar {
1872
1865
  gap: var(--cds2-spacing-md);
1873
1866
  border-radius: var(--cds2-radius-md);
1874
1867
  flex-direction: column;
@@ -1877,7 +1870,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1877
1870
  display: flex;
1878
1871
  }
1879
1872
 
1880
- .capra-DatePickerField-module-F3cFEa-calendarHeader {
1873
+ .capra-DatePickerField-module-QiJSbG-calendarHeader {
1881
1874
  justify-content: space-between;
1882
1875
  align-items: center;
1883
1876
  gap: var(--cds2-spacing-md);
@@ -1887,7 +1880,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1887
1880
  display: flex;
1888
1881
  }
1889
1882
 
1890
- .capra-DatePickerField-module-F3cFEa-calendarHeaderLeading, .capra-DatePickerField-module-F3cFEa-calendarHeaderTrailing {
1883
+ .capra-DatePickerField-module-QiJSbG-calendarHeaderLeading, .capra-DatePickerField-module-QiJSbG-calendarHeaderTrailing {
1891
1884
  align-items: center;
1892
1885
  gap: var(--cds2-spacing-sm);
1893
1886
  flex-shrink: 0;
@@ -1895,11 +1888,11 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1895
1888
  display: flex;
1896
1889
  }
1897
1890
 
1898
- .capra-DatePickerField-module-F3cFEa-calendarHeaderTrailing {
1891
+ .capra-DatePickerField-module-QiJSbG-calendarHeaderTrailing {
1899
1892
  justify-content: flex-end;
1900
1893
  }
1901
1894
 
1902
- .capra-DatePickerField-module-F3cFEa-navButton {
1895
+ .capra-DatePickerField-module-QiJSbG-navButton {
1903
1896
  box-sizing: border-box;
1904
1897
  width: var(--cds2-dimension-component-sm);
1905
1898
  height: var(--cds2-dimension-component-sm);
@@ -1916,7 +1909,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1916
1909
 
1917
1910
  &[data-disabled="true"] {
1918
1911
  cursor: not-allowed;
1919
- color: var(--cds2-temporary-input-foreground-disabled);
1912
+ color: var(--cds2-color-foreground-on-disabled);
1920
1913
  }
1921
1914
 
1922
1915
  &[data-focus-visible="true"] {
@@ -1925,7 +1918,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1925
1918
  }
1926
1919
  }
1927
1920
 
1928
- .capra-DatePickerField-module-F3cFEa-calendarTitle {
1921
+ .capra-DatePickerField-module-QiJSbG-calendarTitle {
1929
1922
  text-align: center;
1930
1923
  min-width: 0;
1931
1924
  font: var(--cds2-typography-body-md-semibold);
@@ -1934,7 +1927,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1934
1927
  margin: 0;
1935
1928
  }
1936
1929
 
1937
- .capra-DatePickerField-module-F3cFEa-grid {
1930
+ .capra-DatePickerField-module-QiJSbG-grid {
1938
1931
  table-layout: fixed;
1939
1932
  border-collapse: collapse;
1940
1933
  width: 224px;
@@ -1967,7 +1960,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1967
1960
  }
1968
1961
  }
1969
1962
 
1970
- .capra-DatePickerField-module-F3cFEa-cell {
1963
+ .capra-DatePickerField-module-QiJSbG-cell {
1971
1964
  box-sizing: border-box;
1972
1965
  width: var(--cds2-dimension-component-sm);
1973
1966
  height: var(--cds2-dimension-component-sm);
@@ -1986,12 +1979,12 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
1986
1979
  display: flex;
1987
1980
 
1988
1981
  &[data-outside-month="true"] {
1989
- color: var(--cds2-temporary-input-foreground-placeholder);
1982
+ color: var(--cds2-color-foreground-placeholder);
1990
1983
  }
1991
1984
 
1992
1985
  &[data-disabled="true"] {
1993
1986
  cursor: not-allowed;
1994
- color: var(--cds2-temporary-input-foreground-disabled);
1987
+ color: var(--cds2-color-foreground-on-disabled);
1995
1988
  }
1996
1989
 
1997
1990
  &[data-unavailable="true"] {
@@ -2016,25 +2009,25 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2016
2009
  }
2017
2010
  }
2018
2011
 
2019
- .capra-DatePickerField-module-F3cFEa-fieldError {
2012
+ .capra-DatePickerField-module-QiJSbG-fieldError {
2020
2013
  font: var(--cds2-typography-body-sm-normal);
2021
2014
  color: var(--cds2-color-foreground-danger-default);
2022
2015
  margin-block-start: var(--cds2-spacing-xs);
2023
2016
  }
2024
- .capra-SelectField-module-0VcKhq-triggerShell {
2017
+ .capra-SelectField-module-oGbaGG-triggerShell {
2025
2018
  border: var(--cds2-border-default);
2026
2019
  border-radius: var(--cds2-radius-md);
2027
- background-color: var(--cds2-temporary-input-background-primary);
2020
+ background-color: var(--cds2-color-background-neutral-surface);
2028
2021
  width: 100%;
2029
2022
  min-width: 0;
2030
- color: var(--cds2-temporary-input-foreground-primary);
2023
+ color: var(--cds2-color-foreground-neutral-default);
2031
2024
  transition: border-color var(--cds2-motion-duration-short) ease,
2032
2025
  box-shadow var(--cds2-motion-duration-short) ease;
2033
2026
  align-items: center;
2034
2027
  display: inline-flex;
2035
2028
 
2036
2029
  &:not([data-disabled="true"]):hover {
2037
- border-color: var(--cds2-temporary-input-border-highlight);
2030
+ border-color: var(--cds2-color-border-accent-hover);
2038
2031
  }
2039
2032
 
2040
2033
  &[data-size="sm"] {
@@ -2051,28 +2044,28 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2051
2044
  }
2052
2045
 
2053
2046
  &[data-disabled="true"] {
2054
- background-color: var(--cds2-temporary-input-background-disabled);
2055
- border-color: var(--cds2-temporary-input-border-disabled);
2056
- color: var(--cds2-temporary-input-foreground-disabled);
2047
+ background-color: var(--cds2-color-background-disabled);
2048
+ border-color: var(--cds2-color-border-disabled);
2049
+ color: var(--cds2-color-foreground-on-disabled);
2057
2050
  cursor: not-allowed;
2058
2051
 
2059
- & .capra-SelectField-module-0VcKhq-leadingSlot, & .capra-SelectField-module-0VcKhq-trailingSlot, & .capra-SelectField-module-0VcKhq-valueText, & .capra-SelectField-module-0VcKhq-tag {
2060
- color: var(--cds2-temporary-input-foreground-disabled);
2052
+ & .capra-SelectField-module-oGbaGG-leadingSlot, & .capra-SelectField-module-oGbaGG-trailingSlot, & .capra-SelectField-module-oGbaGG-valueText, & .capra-SelectField-module-oGbaGG-tag {
2053
+ color: var(--cds2-color-foreground-on-disabled);
2061
2054
  }
2062
2055
  }
2063
2056
  }
2064
2057
 
2065
- .capra-SelectField-module-0VcKhq-singleTrigger {
2058
+ .capra-SelectField-module-oGbaGG-singleTrigger {
2066
2059
  &:focus-visible {
2067
2060
  outline: var(--cds2-border-focus);
2068
2061
  outline-offset: var(--cds2-spacing-xs);
2069
2062
  }
2070
2063
  }
2071
2064
 
2072
- .capra-SelectField-module-0VcKhq-multipleTrigger {
2065
+ .capra-SelectField-module-oGbaGG-multipleTrigger {
2073
2066
  overflow: hidden;
2074
2067
 
2075
- &:has(.capra-SelectField-module-0VcKhq-multipleOpenButton:focus-visible) {
2068
+ &:has(.capra-SelectField-module-oGbaGG-multipleOpenButton:focus-visible) {
2076
2069
  outline: var(--cds2-border-focus);
2077
2070
  outline-offset: var(--cds2-spacing-xs);
2078
2071
  }
@@ -2082,7 +2075,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2082
2075
  }
2083
2076
  }
2084
2077
 
2085
- .capra-SelectField-module-0VcKhq-multipleOpenButton {
2078
+ .capra-SelectField-module-oGbaGG-multipleOpenButton {
2086
2079
  color: inherit;
2087
2080
  cursor: pointer;
2088
2081
  background: none;
@@ -2102,7 +2095,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2102
2095
  }
2103
2096
  }
2104
2097
 
2105
- .capra-SelectField-module-0VcKhq-leadingSlot, .capra-SelectField-module-0VcKhq-trailingSlot {
2098
+ .capra-SelectField-module-oGbaGG-leadingSlot, .capra-SelectField-module-oGbaGG-trailingSlot {
2106
2099
  align-items: center;
2107
2100
  gap: var(--cds2-spacing-md);
2108
2101
  color: var(--cds2-color-foreground-subtle);
@@ -2110,7 +2103,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2110
2103
  display: inline-flex;
2111
2104
  }
2112
2105
 
2113
- .capra-SelectField-module-0VcKhq-value {
2106
+ .capra-SelectField-module-oGbaGG-value {
2114
2107
  align-items: center;
2115
2108
  gap: var(--cds2-spacing-sm);
2116
2109
  flex: auto;
@@ -2118,31 +2111,31 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2118
2111
  display: flex;
2119
2112
  }
2120
2113
 
2121
- .capra-SelectField-module-0VcKhq-valueIcon {
2114
+ .capra-SelectField-module-oGbaGG-valueIcon {
2122
2115
  color: var(--cds2-color-foreground-subtle);
2123
2116
  flex-shrink: 0;
2124
2117
  align-items: center;
2125
2118
  display: inline-flex;
2126
2119
  }
2127
2120
 
2128
- .capra-SelectField-module-0VcKhq-valueText {
2121
+ .capra-SelectField-module-oGbaGG-valueText {
2129
2122
  text-overflow: ellipsis;
2130
2123
  white-space: nowrap;
2131
2124
  min-width: 0;
2132
2125
  overflow: hidden;
2133
2126
 
2134
2127
  &[data-placeholder] {
2135
- color: var(--cds2-temporary-input-foreground-placeholder);
2128
+ color: var(--cds2-color-foreground-placeholder);
2136
2129
  }
2137
2130
  }
2138
2131
 
2139
- .capra-SelectField-module-0VcKhq-tagGroup {
2132
+ .capra-SelectField-module-oGbaGG-tagGroup {
2140
2133
  flex: auto;
2141
2134
  min-width: 0;
2142
2135
  display: flex;
2143
2136
  }
2144
2137
 
2145
- .capra-SelectField-module-0VcKhq-tagList {
2138
+ .capra-SelectField-module-oGbaGG-tagList {
2146
2139
  gap: var(--cds2-spacing-xs);
2147
2140
  min-width: 0;
2148
2141
  padding-block: var(--cds2-spacing-xs);
@@ -2160,7 +2153,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2160
2153
  }
2161
2154
  }
2162
2155
 
2163
- .capra-SelectField-module-0VcKhq-tag {
2156
+ .capra-SelectField-module-oGbaGG-tag {
2164
2157
  justify-content: space-between;
2165
2158
  align-items: center;
2166
2159
  gap: var(--cds2-spacing-sm);
@@ -2196,21 +2189,21 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2196
2189
  }
2197
2190
  }
2198
2191
 
2199
- .capra-SelectField-module-0VcKhq-tagIcon {
2192
+ .capra-SelectField-module-oGbaGG-tagIcon {
2200
2193
  color: var(--cds2-color-foreground-subtle);
2201
2194
  flex-shrink: 0;
2202
2195
  align-items: center;
2203
2196
  display: inline-flex;
2204
2197
  }
2205
2198
 
2206
- .capra-SelectField-module-0VcKhq-tagLabel {
2199
+ .capra-SelectField-module-oGbaGG-tagLabel {
2207
2200
  text-overflow: ellipsis;
2208
2201
  white-space: nowrap;
2209
2202
  min-width: 0;
2210
2203
  overflow: hidden;
2211
2204
  }
2212
2205
 
2213
- .capra-SelectField-module-0VcKhq-tagRemove {
2206
+ .capra-SelectField-module-oGbaGG-tagRemove {
2214
2207
  width: var(--cds2-dimension-component-xs);
2215
2208
  height: var(--cds2-dimension-component-xs);
2216
2209
  border-radius: var(--cds2-radius-md);
@@ -2235,21 +2228,21 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2235
2228
  }
2236
2229
  }
2237
2230
 
2238
- .capra-SelectField-module-0VcKhq-chevron, .capra-SelectField-module-0VcKhq-warningIndicator, .capra-SelectField-module-0VcKhq-errorIndicator {
2231
+ .capra-SelectField-module-oGbaGG-chevron, .capra-SelectField-module-oGbaGG-warningIndicator, .capra-SelectField-module-oGbaGG-errorIndicator {
2239
2232
  justify-content: center;
2240
2233
  align-items: center;
2241
2234
  display: inline-flex;
2242
2235
  }
2243
2236
 
2244
- .capra-SelectField-module-0VcKhq-warningIndicator {
2237
+ .capra-SelectField-module-oGbaGG-warningIndicator {
2245
2238
  color: var(--cds2-color-foreground-warning-default);
2246
2239
  }
2247
2240
 
2248
- .capra-SelectField-module-0VcKhq-errorIndicator {
2241
+ .capra-SelectField-module-oGbaGG-errorIndicator {
2249
2242
  color: var(--cds2-color-foreground-danger-default);
2250
2243
  }
2251
2244
 
2252
- .capra-SelectField-module-0VcKhq-dropdownPanel {
2245
+ .capra-SelectField-module-oGbaGG-dropdownPanel {
2253
2246
  gap: var(--cds2-spacing-sm);
2254
2247
  padding: var(--cds2-spacing-sm);
2255
2248
  border: var(--cds2-border-default);
@@ -2261,11 +2254,11 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2261
2254
  display: flex;
2262
2255
  }
2263
2256
 
2264
- .capra-SelectField-module-0VcKhq-search {
2257
+ .capra-SelectField-module-oGbaGG-search {
2265
2258
  width: 100%;
2266
2259
  }
2267
2260
 
2268
- .capra-SelectField-module-0VcKhq-listbox {
2261
+ .capra-SelectField-module-oGbaGG-listbox {
2269
2262
  gap: var(--cds2-spacing-xs);
2270
2263
  flex-direction: column;
2271
2264
  max-height: 320px;
@@ -2273,17 +2266,17 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2273
2266
  overflow-y: auto;
2274
2267
  }
2275
2268
 
2276
- .capra-SelectField-module-0VcKhq-emptyState {
2269
+ .capra-SelectField-module-oGbaGG-emptyState {
2277
2270
  padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
2278
2271
  color: var(--cds2-color-foreground-subtle);
2279
2272
  font: var(--cds2-typography-body-md-normal);
2280
2273
  }
2281
2274
 
2282
- .capra-SelectField-module-0VcKhq-section {
2275
+ .capra-SelectField-module-oGbaGG-section {
2283
2276
  display: contents;
2284
2277
  }
2285
2278
 
2286
- .capra-SelectField-module-0VcKhq-header {
2279
+ .capra-SelectField-module-oGbaGG-header {
2287
2280
  box-sizing: border-box;
2288
2281
  color: var(--cds2-color-foreground-default);
2289
2282
  font: var(--cds2-typography-body-md-semibold);
@@ -2293,11 +2286,11 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2293
2286
  display: flex;
2294
2287
  }
2295
2288
 
2296
- .capra-SelectField-module-0VcKhq-dropdownPanel:focus-visible, .capra-SelectField-module-0VcKhq-listbox:focus-visible {
2289
+ .capra-SelectField-module-oGbaGG-dropdownPanel:focus-visible, .capra-SelectField-module-oGbaGG-listbox:focus-visible {
2297
2290
  outline: none;
2298
2291
  }
2299
2292
 
2300
- .capra-SelectField-module-0VcKhq-item {
2293
+ .capra-SelectField-module-oGbaGG-item {
2301
2294
  border-radius: var(--cds2-radius-md);
2302
2295
  outline: none;
2303
2296
 
@@ -2320,21 +2313,21 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2320
2313
  }
2321
2314
  }
2322
2315
 
2323
- .capra-SelectField-module-0VcKhq-itemContent {
2316
+ .capra-SelectField-module-oGbaGG-itemContent {
2324
2317
  align-items: center;
2325
2318
  gap: var(--cds2-spacing-sm);
2326
2319
  padding: var(--cds2-spacing-sm) var(--cds2-spacing-md) var(--cds2-spacing-sm) var(--cds2-spacing-sm);
2327
2320
  display: flex;
2328
2321
  }
2329
2322
 
2330
- .capra-SelectField-module-0VcKhq-itemBody {
2323
+ .capra-SelectField-module-oGbaGG-itemBody {
2331
2324
  align-items: center;
2332
2325
  gap: var(--cds2-spacing-md);
2333
2326
  min-width: 0;
2334
2327
  display: inline-flex;
2335
2328
  }
2336
2329
 
2337
- .capra-SelectField-module-0VcKhq-itemCheck {
2330
+ .capra-SelectField-module-oGbaGG-itemCheck {
2338
2331
  width: var(--cds2-dimension-icon-sm);
2339
2332
  min-width: var(--cds2-dimension-icon-sm);
2340
2333
  height: var(--cds2-dimension-icon-sm);
@@ -2343,15 +2336,15 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2343
2336
  align-items: center;
2344
2337
  display: inline-flex;
2345
2338
 
2346
- .capra-SelectField-module-0VcKhq-item[data-disabled="true"] & {
2339
+ .capra-SelectField-module-oGbaGG-item[data-disabled="true"] & {
2347
2340
  color: var(--cds2-color-foreground-on-disabled);
2348
2341
  }
2349
2342
  }
2350
- .capra-DateRangePickerField-module-QpPhpG-dateRangeInputShell[data-show-string-placeholder="true"] .capra-DateRangePickerField-module-QpPhpG-dateInputsRow {
2343
+ .capra-DateRangePickerField-module-2--cmG-dateRangeInputShell[data-show-string-placeholder="true"] .capra-DateRangePickerField-module-2--cmG-dateInputsRow {
2351
2344
  opacity: 0;
2352
2345
  }
2353
2346
 
2354
- .capra-DateRangePickerField-module-QpPhpG-dateInputsRow {
2347
+ .capra-DateRangePickerField-module-2--cmG-dateInputsRow {
2355
2348
  align-items: center;
2356
2349
  gap: var(--cds2-spacing-xs);
2357
2350
  flex: auto;
@@ -2359,7 +2352,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2359
2352
  display: flex;
2360
2353
  }
2361
2354
 
2362
- .capra-DateRangePickerField-module-QpPhpG-stringPlaceholderRange {
2355
+ .capra-DateRangePickerField-module-2--cmG-stringPlaceholderRange {
2363
2356
  gap: var(--cds2-spacing-xs);
2364
2357
  white-space: normal;
2365
2358
  width: 100%;
@@ -2368,7 +2361,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2368
2361
  overflow: hidden;
2369
2362
  }
2370
2363
 
2371
- .capra-DateRangePickerField-module-QpPhpG-stringPlaceholderText {
2364
+ .capra-DateRangePickerField-module-2--cmG-stringPlaceholderText {
2372
2365
  white-space: nowrap;
2373
2366
  text-overflow: ellipsis;
2374
2367
  flex: 1 1 0;
@@ -2376,14 +2369,14 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2376
2369
  overflow: hidden;
2377
2370
  }
2378
2371
 
2379
- .capra-DateRangePickerField-module-QpPhpG-stringPlaceholderSwap {
2372
+ .capra-DateRangePickerField-module-2--cmG-stringPlaceholderSwap {
2380
2373
  color: inherit;
2381
2374
  flex-shrink: 0;
2382
2375
  align-items: center;
2383
2376
  display: inline-flex;
2384
2377
  }
2385
2378
 
2386
- .capra-DateRangePickerField-module-QpPhpG-grid {
2379
+ .capra-DateRangePickerField-module-2--cmG-grid {
2387
2380
  table-layout: fixed;
2388
2381
  border-collapse: collapse;
2389
2382
  width: 224px;
@@ -2434,7 +2427,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2434
2427
  }
2435
2428
  }
2436
2429
 
2437
- .capra-DateRangePickerField-module-QpPhpG-cell {
2430
+ .capra-DateRangePickerField-module-2--cmG-cell {
2438
2431
  box-sizing: border-box;
2439
2432
  width: var(--cds2-dimension-component-sm);
2440
2433
  height: var(--cds2-dimension-component-sm);
@@ -2451,12 +2444,12 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2451
2444
  display: flex;
2452
2445
 
2453
2446
  &[data-outside-month="true"] {
2454
- color: var(--cds2-temporary-input-foreground-placeholder);
2447
+ color: var(--cds2-color-foreground-placeholder);
2455
2448
  }
2456
2449
 
2457
2450
  &[data-disabled="true"] {
2458
2451
  cursor: not-allowed;
2459
- color: var(--cds2-temporary-input-foreground-disabled);
2452
+ color: var(--cds2-color-foreground-on-disabled);
2460
2453
  }
2461
2454
 
2462
2455
  &[data-unavailable="true"] {
@@ -2471,7 +2464,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2471
2464
  }
2472
2465
 
2473
2466
  &[data-capra-range-track]:not([data-selection-start="true"]):not([data-selection-end="true"])[data-outside-month="true"] {
2474
- color: var(--cds2-temporary-input-foreground-placeholder);
2467
+ color: var(--cds2-color-foreground-placeholder);
2475
2468
  }
2476
2469
 
2477
2470
  &[data-selected="true"][data-selection-start="true"], &[data-selected="true"][data-selection-end="true"], &[data-capra-range-track][data-selection-start="true"], &[data-capra-range-track][data-selection-end="true"] {
@@ -2489,12 +2482,11 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2489
2482
  outline-offset: 2px;
2490
2483
  }
2491
2484
  }
2492
- .capra-TextArea-module-mXpaDq-wrapper {
2493
- background-color: var(--cds2-temporary-input-background-primary);
2494
- border-color: var(--cds2-temporary-input-border-primary);
2485
+ .capra-TextArea-module-R8TFDG-wrapper {
2486
+ background-color: var(--cds2-color-background-neutral-surface);
2495
2487
  border-radius: var(--cds2-radius-md);
2496
2488
  border: var(--cds2-border-default);
2497
- color: var(--cds2-temporary-input-foreground-primary);
2489
+ color: var(--cds2-color-foreground-neutral-default);
2498
2490
  font: var(--cds2-typography-body-md-normal);
2499
2491
  width: 100%;
2500
2492
  min-width: 0;
@@ -2505,12 +2497,12 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2505
2497
  display: flex;
2506
2498
  position: relative;
2507
2499
 
2508
- &[data-has-indicator="true"] .capra-TextArea-module-mXpaDq-textarea {
2500
+ &[data-has-indicator="true"] .capra-TextArea-module-R8TFDG-textarea {
2509
2501
  padding-inline-end: var(--cds2-spacing-xl);
2510
2502
  }
2511
2503
 
2512
2504
  &:hover:not([data-disabled="true"]):not([data-read-only="true"]) {
2513
- border-color: var(--cds2-temporary-input-border-highlight);
2505
+ border-color: var(--cds2-color-border-accent-hover);
2514
2506
  }
2515
2507
 
2516
2508
  &:has(textarea:focus-visible):not([data-disabled="true"]):not([data-read-only="true"]) {
@@ -2519,19 +2511,19 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2519
2511
  }
2520
2512
 
2521
2513
  &[data-disabled="true"], &[data-read-only="true"] {
2522
- background-color: var(--cds2-temporary-input-background-disabled);
2523
- border-color: var(--cds2-temporary-input-border-disabled);
2524
- color: var(--cds2-temporary-input-foreground-disabled);
2514
+ background-color: var(--cds2-color-background-disabled);
2515
+ border-color: var(--cds2-color-border-disabled);
2516
+ color: var(--cds2-color-foreground-on-disabled);
2525
2517
 
2526
- & .capra-TextArea-module-mXpaDq-trailingRow {
2527
- color: var(--cds2-temporary-input-foreground-disabled);
2518
+ & .capra-TextArea-module-R8TFDG-trailingRow {
2519
+ color: var(--cds2-color-foreground-on-disabled);
2528
2520
  }
2529
2521
  }
2530
2522
 
2531
2523
  &[data-read-only="true"] {
2532
2524
  cursor: default;
2533
2525
 
2534
- & .capra-TextArea-module-mXpaDq-textarea {
2526
+ & .capra-TextArea-module-R8TFDG-textarea {
2535
2527
  cursor: default;
2536
2528
  }
2537
2529
  }
@@ -2539,12 +2531,12 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2539
2531
  &[data-disabled="true"] {
2540
2532
  cursor: not-allowed;
2541
2533
 
2542
- & .capra-TextArea-module-mXpaDq-textarea {
2534
+ & .capra-TextArea-module-R8TFDG-textarea {
2543
2535
  cursor: not-allowed;
2544
2536
  }
2545
2537
  }
2546
2538
 
2547
- & .capra-TextArea-module-mXpaDq-textarea {
2539
+ & .capra-TextArea-module-R8TFDG-textarea {
2548
2540
  color: inherit;
2549
2541
  font: inherit;
2550
2542
  min-width: 0;
@@ -2560,20 +2552,20 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2560
2552
  width: 100%;
2561
2553
 
2562
2554
  &::placeholder {
2563
- color: var(--cds2-temporary-input-foreground-placeholder);
2555
+ color: var(--cds2-color-foreground-placeholder);
2564
2556
  }
2565
2557
  }
2566
2558
 
2567
- &[data-resizable="false"] .capra-TextArea-module-mXpaDq-textarea {
2559
+ &[data-resizable="false"] .capra-TextArea-module-R8TFDG-textarea {
2568
2560
  resize: none;
2569
2561
  }
2570
2562
 
2571
- &[data-autosize="true"] .capra-TextArea-module-mXpaDq-textarea {
2563
+ &[data-autosize="true"] .capra-TextArea-module-R8TFDG-textarea {
2572
2564
  resize: none;
2573
2565
  overflow-x: hidden;
2574
2566
  }
2575
2567
 
2576
- & .capra-TextArea-module-mXpaDq-indicators {
2568
+ & .capra-TextArea-module-R8TFDG-indicators {
2577
2569
  align-items: center;
2578
2570
  gap: var(--cds2-spacing-xs);
2579
2571
  right: var(--cds2-spacing-sm);
@@ -2582,18 +2574,18 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
2582
2574
  position: absolute;
2583
2575
  }
2584
2576
 
2585
- & .capra-TextArea-module-mXpaDq-errorIndicator, & .capra-TextArea-module-mXpaDq-warningIndicator {
2577
+ & .capra-TextArea-module-R8TFDG-errorIndicator, & .capra-TextArea-module-R8TFDG-warningIndicator {
2586
2578
  flex-shrink: 0;
2587
2579
  justify-content: center;
2588
2580
  align-items: center;
2589
2581
  display: inline-flex;
2590
2582
  }
2591
2583
 
2592
- & .capra-TextArea-module-mXpaDq-errorIndicator {
2584
+ & .capra-TextArea-module-R8TFDG-errorIndicator {
2593
2585
  color: var(--cds2-color-foreground-danger-default);
2594
2586
  }
2595
2587
 
2596
- & .capra-TextArea-module-mXpaDq-warningIndicator {
2588
+ & .capra-TextArea-module-R8TFDG-warningIndicator {
2597
2589
  color: var(--cds2-color-foreground-warning-default);
2598
2590
  }
2599
2591
  }