@seed-design/lynx-css 0.9.2 → 0.10.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 (53) hide show
  1. package/all.css +881 -84
  2. package/all.min.css +1 -1
  3. package/base.css +2 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/manner-temp-badge.css +78 -0
  7. package/recipes/manner-temp-badge.d.ts +24 -0
  8. package/recipes/manner-temp-badge.mjs +51 -0
  9. package/recipes/manner-temp.css +52 -0
  10. package/recipes/manner-temp.d.ts +24 -0
  11. package/recipes/manner-temp.mjs +55 -0
  12. package/recipes/notification-badge-positioner.css +29 -0
  13. package/recipes/notification-badge-positioner.d.ts +26 -0
  14. package/recipes/notification-badge-positioner.mjs +51 -0
  15. package/recipes/notification-badge.css +33 -0
  16. package/recipes/notification-badge.d.ts +27 -0
  17. package/recipes/notification-badge.mjs +43 -0
  18. package/recipes/page-banner.css +357 -0
  19. package/recipes/page-banner.d.ts +36 -0
  20. package/recipes/page-banner.mjs +194 -0
  21. package/recipes/radio.css +12 -6
  22. package/recipes/radio.d.ts +1 -1
  23. package/recipes/radio.mjs +4 -0
  24. package/recipes/radiomark.css +0 -1
  25. package/recipes/segmented-control.css +91 -0
  26. package/recipes/segmented-control.d.ts +36 -0
  27. package/recipes/segmented-control.mjs +75 -0
  28. package/recipes/select-box-checkmark.css +33 -0
  29. package/recipes/select-box-checkmark.d.ts +32 -0
  30. package/recipes/select-box-checkmark.mjs +63 -0
  31. package/recipes/select-box-group.css +10 -0
  32. package/recipes/select-box-group.d.ts +22 -0
  33. package/recipes/select-box-group.mjs +29 -0
  34. package/recipes/select-box.css +145 -0
  35. package/recipes/select-box.d.ts +40 -0
  36. package/recipes/select-box.mjs +108 -0
  37. package/recipes/tabs.css +10 -1
  38. package/recipes/tabs.d.ts +4 -0
  39. package/recipes/tabs.mjs +6 -1
  40. package/vars/component/callout.d.ts +6 -2
  41. package/vars/component/callout.mjs +6 -2
  42. package/vars/component/image-frame-reaction-button.d.ts +26 -2
  43. package/vars/component/image-frame-reaction-button.mjs +26 -2
  44. package/vars/component/page-banner.d.ts +6 -2
  45. package/vars/component/page-banner.mjs +6 -2
  46. package/vars/component/scroll-fog.d.ts +69 -2
  47. package/vars/component/scroll-fog.mjs +69 -2
  48. package/vars/component/skeleton.d.ts +6 -2
  49. package/vars/component/skeleton.mjs +6 -2
  50. package/vars/component/top-navigation.d.ts +13 -1
  51. package/vars/component/top-navigation.mjs +13 -1
  52. package/vars/gradient.d.ts +2 -0
  53. package/vars/gradient.mjs +1 -0
package/all.css CHANGED
@@ -352,6 +352,7 @@ text {
352
352
  --seed-color-banner-teal: #e6faf6;
353
353
  --seed-color-banner-warm-gray: #f2f0ee;
354
354
  --seed-color-banner-yellow: #fffae1;
355
+ --seed-gradient-fade-mask: #0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;
355
356
  --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
356
357
  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
357
358
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
@@ -563,6 +564,7 @@ text {
563
564
  --seed-color-banner-teal: #143633;
564
565
  --seed-color-banner-warm-gray: #2f2b27;
565
566
  --seed-color-banner-yellow: #3e2b00;
567
+ --seed-gradient-fade-mask: #0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;
566
568
  --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
567
569
  --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
568
570
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
@@ -2439,6 +2441,406 @@ text {
2439
2441
  font-weight: var(--seed-font-weight-bold);
2440
2442
  }
2441
2443
 
2444
+ .seed-manner-temp__root {
2445
+ justify-content: flex-start;
2446
+ align-items: center;
2447
+ gap: var(--seed-dimension-x1);
2448
+ flex-direction: row;
2449
+ flex-shrink: 0;
2450
+ display: flex;
2451
+ }
2452
+
2453
+ .seed-manner-temp__label {
2454
+ font-size: var(--seed-font-size-t5);
2455
+ line-height: var(--seed-line-height-t5);
2456
+ font-weight: var(--seed-font-weight-bold);
2457
+ }
2458
+
2459
+ .seed-manner-temp__emote {
2460
+ width: var(--seed-dimension-x8);
2461
+ height: var(--seed-dimension-x8);
2462
+ margin-left: calc(var(--seed-dimension-x1) * -1);
2463
+ margin-right: calc(var(--seed-dimension-x1) * -1);
2464
+ margin-top: calc(var(--seed-dimension-x1) * -1);
2465
+ margin-bottom: calc(var(--seed-dimension-x1) * -1);
2466
+ flex-shrink: 0;
2467
+ }
2468
+
2469
+ .seed-manner-temp__label--level_l1 {
2470
+ color: var(--seed-color-manner-temp-l1-text);
2471
+ }
2472
+
2473
+ .seed-manner-temp__label--level_l2 {
2474
+ color: var(--seed-color-manner-temp-l2-text);
2475
+ }
2476
+
2477
+ .seed-manner-temp__label--level_l3 {
2478
+ color: var(--seed-color-manner-temp-l3-text);
2479
+ }
2480
+
2481
+ .seed-manner-temp__label--level_l4 {
2482
+ color: var(--seed-color-manner-temp-l4-text);
2483
+ }
2484
+
2485
+ .seed-manner-temp__label--level_l5 {
2486
+ color: var(--seed-color-manner-temp-l5-text);
2487
+ }
2488
+
2489
+ .seed-manner-temp__label--level_l6 {
2490
+ color: var(--seed-color-manner-temp-l6-text);
2491
+ }
2492
+
2493
+ .seed-manner-temp__label--level_l7 {
2494
+ color: var(--seed-color-manner-temp-l7-text);
2495
+ }
2496
+
2497
+ .seed-manner-temp__label--level_l8 {
2498
+ color: var(--seed-color-manner-temp-l8-text);
2499
+ }
2500
+
2501
+ .seed-manner-temp__label--level_l9 {
2502
+ color: var(--seed-color-manner-temp-l9-text);
2503
+ }
2504
+
2505
+ .seed-manner-temp__label--level_l10 {
2506
+ color: var(--seed-color-manner-temp-l10-text);
2507
+ }
2508
+
2509
+ .seed-manner-temp-badge__root {
2510
+ min-height: var(--seed-dimension-x5);
2511
+ padding-left: var(--seed-dimension-x1_5);
2512
+ padding-right: var(--seed-dimension-x1_5);
2513
+ padding-top: var(--seed-dimension-x0_5);
2514
+ padding-bottom: var(--seed-dimension-x0_5);
2515
+ border-radius: var(--seed-radius-full);
2516
+ flex-direction: row;
2517
+ flex-shrink: 0;
2518
+ justify-content: center;
2519
+ align-items: center;
2520
+ display: flex;
2521
+ }
2522
+
2523
+ .seed-manner-temp-badge__label {
2524
+ font-size: var(--seed-font-size-t1);
2525
+ line-height: var(--seed-line-height-t1);
2526
+ font-weight: var(--seed-font-weight-bold);
2527
+ }
2528
+
2529
+ .seed-manner-temp-badge__root--level_l1 {
2530
+ background-color: var(--seed-color-manner-temp-l1-bg);
2531
+ }
2532
+
2533
+ .seed-manner-temp-badge__label--level_l1 {
2534
+ color: var(--seed-color-manner-temp-l1-text);
2535
+ }
2536
+
2537
+ .seed-manner-temp-badge__root--level_l2 {
2538
+ background-color: var(--seed-color-manner-temp-l2-bg);
2539
+ }
2540
+
2541
+ .seed-manner-temp-badge__label--level_l2 {
2542
+ color: var(--seed-color-manner-temp-l2-text);
2543
+ }
2544
+
2545
+ .seed-manner-temp-badge__root--level_l3 {
2546
+ background-color: var(--seed-color-manner-temp-l3-bg);
2547
+ }
2548
+
2549
+ .seed-manner-temp-badge__label--level_l3 {
2550
+ color: var(--seed-color-manner-temp-l3-text);
2551
+ }
2552
+
2553
+ .seed-manner-temp-badge__root--level_l4 {
2554
+ background-color: var(--seed-color-manner-temp-l4-bg);
2555
+ }
2556
+
2557
+ .seed-manner-temp-badge__label--level_l4 {
2558
+ color: var(--seed-color-manner-temp-l4-text);
2559
+ }
2560
+
2561
+ .seed-manner-temp-badge__root--level_l5 {
2562
+ background-color: var(--seed-color-manner-temp-l5-bg);
2563
+ }
2564
+
2565
+ .seed-manner-temp-badge__label--level_l5 {
2566
+ color: var(--seed-color-manner-temp-l5-text);
2567
+ }
2568
+
2569
+ .seed-manner-temp-badge__root--level_l6 {
2570
+ background-color: var(--seed-color-manner-temp-l6-bg);
2571
+ }
2572
+
2573
+ .seed-manner-temp-badge__label--level_l6 {
2574
+ color: var(--seed-color-manner-temp-l6-text);
2575
+ }
2576
+
2577
+ .seed-manner-temp-badge__root--level_l7 {
2578
+ background-color: var(--seed-color-manner-temp-l7-bg);
2579
+ }
2580
+
2581
+ .seed-manner-temp-badge__label--level_l7 {
2582
+ color: var(--seed-color-manner-temp-l7-text);
2583
+ }
2584
+
2585
+ .seed-manner-temp-badge__root--level_l8 {
2586
+ background-color: var(--seed-color-manner-temp-l8-bg);
2587
+ }
2588
+
2589
+ .seed-manner-temp-badge__label--level_l8 {
2590
+ color: var(--seed-color-manner-temp-l8-text);
2591
+ }
2592
+
2593
+ .seed-manner-temp-badge__root--level_l9 {
2594
+ background-color: var(--seed-color-manner-temp-l9-bg);
2595
+ }
2596
+
2597
+ .seed-manner-temp-badge__label--level_l9 {
2598
+ color: var(--seed-color-manner-temp-l9-text);
2599
+ }
2600
+
2601
+ .seed-manner-temp-badge__root--level_l10 {
2602
+ background-color: var(--seed-color-manner-temp-l10-bg);
2603
+ }
2604
+
2605
+ .seed-manner-temp-badge__label--level_l10 {
2606
+ color: var(--seed-color-manner-temp-l10-text);
2607
+ }
2608
+
2609
+ .seed-page-banner__root {
2610
+ width: 100%;
2611
+ min-height: var(--seed-dimension-x10);
2612
+ padding-left: var(--seed-dimension-x4);
2613
+ padding-right: var(--seed-dimension-x4);
2614
+ padding-top: var(--seed-dimension-x2_5);
2615
+ padding-bottom: var(--seed-dimension-x2_5);
2616
+ flex-direction: row;
2617
+ align-items: flex-start;
2618
+ display: flex;
2619
+ }
2620
+
2621
+ .seed-page-banner__content {
2622
+ justify-content: space-between;
2623
+ align-items: center;
2624
+ gap: var(--seed-dimension-x1_5);
2625
+ flex-flow: wrap;
2626
+ flex-grow: 1;
2627
+ flex-shrink: 1;
2628
+ display: flex;
2629
+ }
2630
+
2631
+ .seed-page-banner__body {
2632
+ line-height: var(--seed-line-height-t4);
2633
+ flex-grow: 1;
2634
+ flex-shrink: 1;
2635
+ }
2636
+
2637
+ .seed-page-banner__title {
2638
+ font-size: var(--seed-font-size-t4);
2639
+ line-height: var(--seed-line-height-t4);
2640
+ font-weight: var(--seed-font-weight-bold);
2641
+ flex-shrink: 0;
2642
+ }
2643
+
2644
+ .seed-page-banner__description {
2645
+ font-size: var(--seed-font-size-t4);
2646
+ line-height: var(--seed-line-height-t4);
2647
+ font-weight: var(--seed-font-weight-medium);
2648
+ }
2649
+
2650
+ .seed-page-banner__button {
2651
+ margin-top: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
2652
+ margin-right: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
2653
+ margin-bottom: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
2654
+ margin-left: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
2655
+ padding-top: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
2656
+ padding-right: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
2657
+ padding-bottom: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
2658
+ padding-left: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
2659
+ font-size: var(--seed-font-size-t3);
2660
+ line-height: var(--seed-line-height-t3);
2661
+ font-weight: var(--seed-font-weight-bold);
2662
+ border-radius: var(--seed-radius-r1);
2663
+ flex-direction: row;
2664
+ align-items: center;
2665
+ display: flex;
2666
+ }
2667
+
2668
+ .seed-page-banner__closeButton {
2669
+ width: var(--seed-dimension-x10);
2670
+ height: var(--seed-dimension-x10);
2671
+ margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
2672
+ margin-right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
2673
+ margin-bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
2674
+ margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
2675
+ border-radius: var(--seed-radius-r2);
2676
+ background-color: var(--seed-color-bg-transparent);
2677
+ flex-direction: row;
2678
+ flex-grow: 0;
2679
+ flex-shrink: 0;
2680
+ justify-content: center;
2681
+ align-self: center;
2682
+ align-items: center;
2683
+ display: flex;
2684
+ }
2685
+
2686
+ .seed-page-banner__prefixIcon {
2687
+ width: var(--seed-dimension-x4);
2688
+ height: var(--seed-dimension-x4);
2689
+ margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
2690
+ margin-right: var(--seed-dimension-x2);
2691
+ flex-shrink: 0;
2692
+ }
2693
+
2694
+ .seed-page-banner__suffixIcon {
2695
+ width: var(--seed-dimension-x4);
2696
+ height: var(--seed-dimension-x4);
2697
+ margin-left: var(--seed-dimension-x2);
2698
+ flex-shrink: 0;
2699
+ align-self: center;
2700
+ }
2701
+
2702
+ .seed-page-banner__closeButtonIcon {
2703
+ width: var(--seed-dimension-x4);
2704
+ height: var(--seed-dimension-x4);
2705
+ flex-shrink: 0;
2706
+ }
2707
+
2708
+ .seed-page-banner__closeButton--closeButtonPressed_true {
2709
+ background-color: var(--seed-color-bg-transparent-pressed);
2710
+ }
2711
+
2712
+ .seed-page-banner__root--tone_neutral-variant_weak {
2713
+ background-color: var(--seed-color-bg-neutral-weak);
2714
+ }
2715
+
2716
+ .seed-page-banner__title--tone_neutral-variant_weak, .seed-page-banner__description--tone_neutral-variant_weak, .seed-page-banner__button--tone_neutral-variant_weak, .seed-page-banner__prefixIcon--tone_neutral-variant_weak, .seed-page-banner__suffixIcon--tone_neutral-variant_weak, .seed-page-banner__closeButtonIcon--tone_neutral-variant_weak {
2717
+ color: var(--seed-color-fg-neutral);
2718
+ }
2719
+
2720
+ .seed-page-banner__root--tone_neutral-variant_solid {
2721
+ background-color: var(--seed-color-bg-neutral-inverted);
2722
+ }
2723
+
2724
+ .seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid, .seed-page-banner__prefixIcon--tone_neutral-variant_solid, .seed-page-banner__suffixIcon--tone_neutral-variant_solid, .seed-page-banner__closeButtonIcon--tone_neutral-variant_solid {
2725
+ color: var(--seed-color-fg-neutral-inverted);
2726
+ }
2727
+
2728
+ .seed-page-banner__root--tone_informative-variant_weak {
2729
+ background-color: var(--seed-color-bg-informative-weak);
2730
+ }
2731
+
2732
+ .seed-page-banner__title--tone_informative-variant_weak, .seed-page-banner__description--tone_informative-variant_weak, .seed-page-banner__button--tone_informative-variant_weak, .seed-page-banner__prefixIcon--tone_informative-variant_weak, .seed-page-banner__suffixIcon--tone_informative-variant_weak, .seed-page-banner__closeButtonIcon--tone_informative-variant_weak {
2733
+ color: var(--seed-color-fg-informative-contrast);
2734
+ }
2735
+
2736
+ .seed-page-banner__root--tone_informative-variant_solid {
2737
+ background-color: var(--seed-color-bg-informative-solid);
2738
+ }
2739
+
2740
+ .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid, .seed-page-banner__prefixIcon--tone_informative-variant_solid, .seed-page-banner__suffixIcon--tone_informative-variant_solid, .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
2741
+ color: var(--seed-color-palette-static-white);
2742
+ }
2743
+
2744
+ .seed-page-banner__root--tone_positive-variant_weak {
2745
+ background-color: var(--seed-color-bg-positive-weak);
2746
+ }
2747
+
2748
+ .seed-page-banner__title--tone_positive-variant_weak, .seed-page-banner__description--tone_positive-variant_weak, .seed-page-banner__button--tone_positive-variant_weak, .seed-page-banner__prefixIcon--tone_positive-variant_weak, .seed-page-banner__suffixIcon--tone_positive-variant_weak, .seed-page-banner__closeButtonIcon--tone_positive-variant_weak {
2749
+ color: var(--seed-color-fg-positive-contrast);
2750
+ }
2751
+
2752
+ .seed-page-banner__root--tone_positive-variant_solid {
2753
+ background-color: var(--seed-color-bg-positive-solid);
2754
+ }
2755
+
2756
+ .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid, .seed-page-banner__prefixIcon--tone_positive-variant_solid, .seed-page-banner__suffixIcon--tone_positive-variant_solid, .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
2757
+ color: var(--seed-color-palette-static-white);
2758
+ }
2759
+
2760
+ .seed-page-banner__root--tone_warning-variant_weak {
2761
+ background-color: var(--seed-color-bg-warning-weak);
2762
+ }
2763
+
2764
+ .seed-page-banner__title--tone_warning-variant_weak, .seed-page-banner__description--tone_warning-variant_weak, .seed-page-banner__button--tone_warning-variant_weak, .seed-page-banner__prefixIcon--tone_warning-variant_weak, .seed-page-banner__suffixIcon--tone_warning-variant_weak, .seed-page-banner__closeButtonIcon--tone_warning-variant_weak {
2765
+ color: var(--seed-color-fg-warning-contrast);
2766
+ }
2767
+
2768
+ .seed-page-banner__root--tone_warning-variant_solid {
2769
+ background-color: var(--seed-color-bg-warning-solid);
2770
+ }
2771
+
2772
+ .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid, .seed-page-banner__prefixIcon--tone_warning-variant_solid, .seed-page-banner__suffixIcon--tone_warning-variant_solid, .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
2773
+ color: var(--seed-color-palette-static-black-alpha-900);
2774
+ }
2775
+
2776
+ .seed-page-banner__root--tone_critical-variant_weak {
2777
+ background-color: var(--seed-color-bg-critical-weak);
2778
+ }
2779
+
2780
+ .seed-page-banner__title--tone_critical-variant_weak, .seed-page-banner__description--tone_critical-variant_weak, .seed-page-banner__button--tone_critical-variant_weak, .seed-page-banner__prefixIcon--tone_critical-variant_weak, .seed-page-banner__suffixIcon--tone_critical-variant_weak, .seed-page-banner__closeButtonIcon--tone_critical-variant_weak {
2781
+ color: var(--seed-color-fg-critical-contrast);
2782
+ }
2783
+
2784
+ .seed-page-banner__root--tone_critical-variant_solid {
2785
+ background-color: var(--seed-color-bg-critical-solid);
2786
+ }
2787
+
2788
+ .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid, .seed-page-banner__prefixIcon--tone_critical-variant_solid, .seed-page-banner__suffixIcon--tone_critical-variant_solid, .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
2789
+ color: var(--seed-color-palette-static-white);
2790
+ }
2791
+
2792
+ .seed-page-banner__root--tone_magic-variant_weak {
2793
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
2794
+ }
2795
+
2796
+ .seed-page-banner__title--tone_magic-variant_weak, .seed-page-banner__description--tone_magic-variant_weak, .seed-page-banner__button--tone_magic-variant_weak, .seed-page-banner__prefixIcon--tone_magic-variant_weak, .seed-page-banner__suffixIcon--tone_magic-variant_weak, .seed-page-banner__closeButtonIcon--tone_magic-variant_weak {
2797
+ color: var(--seed-color-fg-neutral);
2798
+ }
2799
+
2800
+ .seed-page-banner__root--tone_neutral-variant_weak-pressed_true {
2801
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
2802
+ }
2803
+
2804
+ .seed-page-banner__root--tone_neutral-variant_solid-pressed_true {
2805
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
2806
+ }
2807
+
2808
+ .seed-page-banner__root--tone_informative-variant_weak-pressed_true {
2809
+ background-color: var(--seed-color-bg-informative-weak-pressed);
2810
+ }
2811
+
2812
+ .seed-page-banner__root--tone_informative-variant_solid-pressed_true {
2813
+ background-color: var(--seed-color-bg-informative-solid-pressed);
2814
+ }
2815
+
2816
+ .seed-page-banner__root--tone_positive-variant_weak-pressed_true {
2817
+ background-color: var(--seed-color-bg-positive-weak-pressed);
2818
+ }
2819
+
2820
+ .seed-page-banner__root--tone_positive-variant_solid-pressed_true {
2821
+ background-color: var(--seed-color-bg-positive-solid-pressed);
2822
+ }
2823
+
2824
+ .seed-page-banner__root--tone_warning-variant_weak-pressed_true {
2825
+ background-color: var(--seed-color-bg-warning-weak-pressed);
2826
+ }
2827
+
2828
+ .seed-page-banner__root--tone_warning-variant_solid-pressed_true {
2829
+ background-color: var(--seed-color-bg-warning-solid-pressed);
2830
+ }
2831
+
2832
+ .seed-page-banner__root--tone_critical-variant_weak-pressed_true {
2833
+ background-color: var(--seed-color-bg-critical-weak-pressed);
2834
+ }
2835
+
2836
+ .seed-page-banner__root--tone_critical-variant_solid-pressed_true {
2837
+ background-color: var(--seed-color-bg-critical-solid-pressed);
2838
+ }
2839
+
2840
+ .seed-page-banner__root--tone_magic-variant_weak-pressed_true {
2841
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
2842
+ }
2843
+
2442
2844
  .seed-radio__root {
2443
2845
  align-items: flex-start;
2444
2846
  gap: var(--seed-dimension-x2);
@@ -2446,158 +2848,546 @@ text {
2446
2848
  position: relative;
2447
2849
  }
2448
2850
 
2449
- .seed-radio__label {
2450
- color: var(--seed-color-fg-neutral);
2851
+ .seed-radio__label {
2852
+ color: var(--seed-color-fg-neutral);
2853
+ }
2854
+
2855
+ .seed-radio__label--weight_regular {
2856
+ font-weight: var(--seed-font-weight-regular);
2857
+ }
2858
+
2859
+ .seed-radio__label--weight_bold {
2860
+ font-weight: var(--seed-font-weight-bold);
2861
+ }
2862
+
2863
+ .seed-radio__root--size_medium {
2864
+ min-height: var(--seed-dimension-x8);
2865
+ }
2866
+
2867
+ .seed-radio__control--size_medium {
2868
+ margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-dimension-x5) / 2);
2869
+ }
2870
+
2871
+ .seed-radio__label--size_medium {
2872
+ font-size: var(--seed-font-size-t4);
2873
+ line-height: var(--seed-line-height-t4);
2874
+ margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
2875
+ }
2876
+
2877
+ .seed-radio__root--size_large {
2878
+ min-height: var(--seed-dimension-x9);
2879
+ }
2880
+
2881
+ .seed-radio__control--size_large {
2882
+ margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-dimension-x6) / 2);
2883
+ }
2884
+
2885
+ .seed-radio__label--size_large {
2886
+ font-size: var(--seed-font-size-t5);
2887
+ line-height: var(--seed-line-height-t5);
2888
+ margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
2889
+ }
2890
+
2891
+ .seed-radio__label--disabled_true {
2892
+ color: var(--seed-color-fg-disabled);
2893
+ }
2894
+
2895
+ .seed-radio-group__root {
2896
+ gap: var(--seed-dimension-x1);
2897
+ flex-direction: column;
2898
+ display: flex;
2899
+ }
2900
+
2901
+ .seed-radiomark__root {
2902
+ border-style: solid;
2903
+ border-width: 1px;
2904
+ border-color: var(--seed-color-stroke-neutral-weak);
2905
+ border-radius: var(--seed-radius-full);
2906
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
2907
+ flex: none;
2908
+ justify-content: center;
2909
+ align-items: center;
2910
+ display: flex;
2911
+ position: relative;
2912
+ }
2913
+
2914
+ .seed-radiomark__icon {
2915
+ border-radius: var(--seed-radius-full);
2916
+ }
2917
+
2918
+ .seed-radiomark__root--size_medium {
2919
+ width: var(--seed-dimension-x5);
2920
+ height: var(--seed-dimension-x5);
2921
+ }
2922
+
2923
+ .seed-radiomark__icon--size_medium {
2924
+ width: var(--seed-dimension-x2);
2925
+ height: var(--seed-dimension-x2);
2926
+ }
2927
+
2928
+ .seed-radiomark__root--size_large {
2929
+ width: var(--seed-dimension-x6);
2930
+ height: var(--seed-dimension-x6);
2931
+ }
2932
+
2933
+ .seed-radiomark__icon--size_large {
2934
+ width: var(--seed-dimension-x2_5);
2935
+ height: var(--seed-dimension-x2_5);
2936
+ }
2937
+
2938
+ .seed-radiomark__icon--checked_false {
2939
+ opacity: 0;
2940
+ }
2941
+
2942
+ .seed-radiomark__root--tone_brand-checked_true-disabled_false {
2943
+ background-color: var(--seed-color-bg-brand-solid);
2944
+ border-width: 0;
2945
+ border-color: #0000;
2946
+ }
2947
+
2948
+ .seed-radiomark__icon--tone_brand-checked_true-disabled_false {
2949
+ color: var(--seed-color-palette-static-white);
2950
+ background-color: var(--seed-color-palette-static-white);
2951
+ }
2952
+
2953
+ .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
2954
+ background-color: var(--seed-color-bg-neutral-inverted);
2955
+ border-width: 0;
2956
+ border-color: #0000;
2957
+ }
2958
+
2959
+ .seed-radiomark__icon--tone_neutral-checked_true-disabled_false {
2960
+ color: var(--seed-color-fg-neutral-inverted);
2961
+ background-color: var(--seed-color-fg-neutral-inverted);
2962
+ }
2963
+
2964
+ .seed-radiomark__root--tone_brand-checked_false-disabled_true, .seed-radiomark__root--tone_neutral-checked_false-disabled_true {
2965
+ background-color: var(--seed-color-palette-gray-300);
2966
+ }
2967
+
2968
+ .seed-radiomark__root--tone_brand-checked_true-disabled_true {
2969
+ background-color: var(--seed-color-bg-transparent);
2970
+ border-width: 1px;
2971
+ border-color: var(--seed-color-palette-gray-300);
2972
+ }
2973
+
2974
+ .seed-radiomark__icon--tone_brand-checked_true-disabled_true {
2975
+ color: var(--seed-color-palette-gray-300);
2976
+ background-color: var(--seed-color-palette-gray-300);
2977
+ }
2978
+
2979
+ .seed-radiomark__root--tone_neutral-checked_true-disabled_true {
2980
+ background-color: var(--seed-color-bg-transparent);
2981
+ border-width: 1px;
2982
+ border-color: var(--seed-color-palette-gray-300);
2983
+ }
2984
+
2985
+ .seed-radiomark__icon--tone_neutral-checked_true-disabled_true {
2986
+ color: var(--seed-color-palette-gray-300);
2987
+ background-color: var(--seed-color-palette-gray-300);
2988
+ }
2989
+
2990
+ .seed-radiomark__icon--size_medium-checked_true-disabled_true {
2991
+ width: var(--seed-dimension-x2_5);
2992
+ height: var(--seed-dimension-x2_5);
2993
+ }
2994
+
2995
+ .seed-radiomark__icon--size_large-checked_true-disabled_true {
2996
+ width: var(--seed-dimension-x3);
2997
+ height: var(--seed-dimension-x3);
2998
+ }
2999
+
3000
+ .seed-radiomark__root--pressed_true-checked_false-disabled_false {
3001
+ background-color: var(--seed-color-bg-transparent-pressed);
3002
+ }
3003
+
3004
+ .seed-radiomark__root--tone_brand-pressed_true-checked_true-disabled_false {
3005
+ background-color: var(--seed-color-bg-brand-solid-pressed);
3006
+ }
3007
+
3008
+ .seed-radiomark__root--tone_neutral-pressed_true-checked_true-disabled_false {
3009
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
3010
+ }
3011
+
3012
+ .seed-notification-badge__root {
3013
+ background-color: var(--seed-color-bg-brand-solid);
3014
+ flex-shrink: 0;
3015
+ justify-content: center;
3016
+ align-items: center;
3017
+ display: flex;
3018
+ }
3019
+
3020
+ .seed-notification-badge__label {
3021
+ text-align: center;
3022
+ color: var(--seed-color-palette-static-white);
3023
+ white-space: nowrap;
3024
+ flex-shrink: 0;
3025
+ }
3026
+
3027
+ .seed-notification-badge__root--size_small {
3028
+ border-radius: var(--seed-radius-full);
3029
+ width: 6px;
3030
+ height: 6px;
3031
+ }
3032
+
3033
+ .seed-notification-badge__root--size_large {
3034
+ width: max-content;
3035
+ min-width: 18px;
3036
+ min-height: 18px;
3037
+ padding-left: var(--seed-dimension-x1);
3038
+ padding-right: var(--seed-dimension-x1);
3039
+ border-radius: var(--seed-radius-full);
3040
+ padding-top: 0;
3041
+ padding-bottom: 0;
3042
+ }
3043
+
3044
+ .seed-notification-badge__label--size_large {
3045
+ font-size: var(--seed-font-size-t1-static);
3046
+ line-height: var(--seed-line-height-t1-static);
3047
+ font-weight: var(--seed-font-weight-bold);
3048
+ }
3049
+
3050
+ .seed-notification-badge-positioner {
3051
+ justify-content: center;
3052
+ align-items: center;
3053
+ width: max-content;
3054
+ display: flex;
3055
+ position: absolute;
3056
+ }
3057
+
3058
+ .seed-notification-badge-positioner--attach_icon {
3059
+ transform: translate(100%, -100%);
3060
+ }
3061
+
3062
+ .seed-notification-badge-positioner--attach_text {
3063
+ transform: translate(100%);
3064
+ }
3065
+
3066
+ .seed-notification-badge-positioner--size_large-attach_icon {
3067
+ top: 14px;
3068
+ right: 8px;
2451
3069
  }
2452
3070
 
2453
- .seed-radio__label--weight_regular {
2454
- font-weight: var(--seed-font-weight-regular);
3071
+ .seed-notification-badge-positioner--size_small-attach_icon {
3072
+ top: 7px;
3073
+ right: 7px;
2455
3074
  }
2456
3075
 
2457
- .seed-radio__label--weight_bold {
2458
- font-weight: var(--seed-font-weight-bold);
3076
+ .seed-notification-badge-positioner--size_large-attach_text, .seed-notification-badge-positioner--size_small-attach_text {
3077
+ right: -2px;
2459
3078
  }
2460
3079
 
2461
- .seed-radio__root--size_medium {
2462
- min-height: var(--seed-dimension-x8);
2463
- --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
3080
+ .seed-segmented-control__root {
3081
+ width: max-content;
3082
+ max-width: 100%;
3083
+ padding: var(--seed-dimension-x1);
3084
+ border-radius: var(--seed-radius-full);
3085
+ background-color: var(--seed-color-bg-neutral-weak-alpha);
3086
+ grid-auto-rows: 1fr;
3087
+ grid-auto-columns: 1fr;
3088
+ grid-auto-flow: column;
3089
+ align-items: stretch;
3090
+ display: grid;
3091
+ position: relative;
2464
3092
  }
2465
3093
 
2466
- .seed-radio__label--size_medium {
2467
- font-size: var(--seed-font-size-t4);
2468
- line-height: var(--seed-line-height-t4);
3094
+ .seed-segmented-control__indicator {
3095
+ top: var(--seed-dimension-x1);
3096
+ bottom: var(--seed-dimension-x1);
3097
+ left: var(--seed-dimension-x1);
3098
+ z-index: 0;
3099
+ width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count, 1));
3100
+ border-radius: var(--seed-radius-full);
3101
+ background-color: var(--seed-color-palette-gray-00);
3102
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3103
+ transform: translateX(calc(var(--segment-index, 0) * 100%));
3104
+ transition-property: transform, opacity;
3105
+ transition-duration: var(--seed-duration-d4);
3106
+ transition-timing-function: var(--seed-timing-function-easing);
3107
+ position: absolute;
2469
3108
  }
2470
3109
 
2471
- .seed-radio__root--size_large {
2472
- min-height: var(--seed-dimension-x9);
2473
- --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
3110
+ .seed-segmented-control__item {
3111
+ z-index: 1;
3112
+ justify-content: center;
3113
+ align-items: center;
3114
+ gap: var(--seed-dimension-x1_5);
3115
+ min-width: 86px;
3116
+ height: 100%;
3117
+ min-height: 34px;
3118
+ padding-left: var(--seed-dimension-x6);
3119
+ padding-right: var(--seed-dimension-x6);
3120
+ padding-top: var(--seed-dimension-x1_5);
3121
+ padding-bottom: var(--seed-dimension-x1_5);
3122
+ border-radius: var(--seed-radius-full);
3123
+ flex-direction: row;
3124
+ display: flex;
3125
+ position: relative;
2474
3126
  }
2475
3127
 
2476
- .seed-radio__label--size_large {
3128
+ .seed-segmented-control__itemBackground {
3129
+ border-radius: var(--seed-radius-full);
3130
+ opacity: 0;
3131
+ transition-property: opacity;
3132
+ transition-duration: var(--seed-duration-color-transition);
3133
+ transition-timing-function: var(--seed-timing-function-easing);
3134
+ position: absolute;
3135
+ top: 0;
3136
+ bottom: 0;
3137
+ left: 0;
3138
+ right: 0;
3139
+ }
3140
+
3141
+ .seed-segmented-control__label {
3142
+ color: var(--seed-color-fg-neutral-subtle);
3143
+ font-weight: var(--seed-font-weight-bold);
2477
3144
  font-size: var(--seed-font-size-t5);
2478
3145
  line-height: var(--seed-line-height-t5);
3146
+ text-align: center;
3147
+ transition-property: color;
3148
+ transition-duration: var(--seed-duration-color-transition);
3149
+ transition-timing-function: var(--seed-timing-function-easing);
2479
3150
  }
2480
3151
 
2481
- .seed-radio__label--disabled_true {
3152
+ .seed-segmented-control__itemBackground--selected_true {
3153
+ background-color: var(--seed-color-palette-gray-100);
3154
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3155
+ }
3156
+
3157
+ .seed-segmented-control__label--selected_true {
3158
+ color: var(--seed-color-fg-neutral);
3159
+ }
3160
+
3161
+ .seed-segmented-control__itemBackground--selected_false {
3162
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
3163
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3164
+ }
3165
+
3166
+ .seed-segmented-control__label--disabled_true {
2482
3167
  color: var(--seed-color-fg-disabled);
2483
3168
  }
2484
3169
 
2485
- .seed-radio-group__root {
2486
- gap: var(--seed-dimension-x1);
3170
+ .seed-segmented-control__itemBackground--pressed_true {
3171
+ opacity: 1;
3172
+ }
3173
+
3174
+ .seed-segmented-control__indicator--hasSelection_false {
3175
+ opacity: 0;
3176
+ }
3177
+
3178
+ .seed-segmented-control__item--selected_true-disabled_true {
3179
+ background-color: var(--seed-color-bg-disabled);
3180
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3181
+ }
3182
+
3183
+ .seed-select-box__interactionRoot {
2487
3184
  flex-direction: column;
3185
+ align-items: stretch;
3186
+ gap: 0;
3187
+ width: 100%;
3188
+ height: 100%;
3189
+ min-height: 0;
2488
3190
  display: flex;
2489
3191
  }
2490
3192
 
2491
- .seed-radiomark__root {
2492
- margin-top: var(--radiomark-margin-top, 0);
2493
- border-style: solid;
2494
- border-width: 1px;
2495
- border-color: var(--seed-color-stroke-neutral-weak);
2496
- border-radius: var(--seed-radius-full);
3193
+ .seed-select-box__root {
3194
+ border-radius: var(--seed-radius-r3);
3195
+ background-color: var(--seed-color-bg-transparent);
3196
+ width: 100%;
3197
+ height: 100%;
3198
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
2497
3199
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
2498
- flex: none;
2499
- justify-content: center;
2500
- align-items: center;
3200
+ flex-direction: column;
3201
+ align-items: stretch;
2501
3202
  display: flex;
2502
3203
  position: relative;
3204
+ overflow: hidden;
2503
3205
  }
2504
3206
 
2505
- .seed-radiomark__icon {
2506
- border-radius: var(--seed-radius-full);
3207
+ .seed-select-box__selectedStroke {
3208
+ border-radius: var(--seed-radius-r3);
3209
+ transition: border-color .1s var(--seed-timing-function-easing);
3210
+ border: 2px solid #0000;
3211
+ position: absolute;
3212
+ top: 0;
3213
+ bottom: 0;
3214
+ left: 0;
3215
+ right: 0;
2507
3216
  }
2508
3217
 
2509
- .seed-radiomark__root--size_medium {
2510
- width: var(--seed-dimension-x5);
2511
- height: var(--seed-dimension-x5);
3218
+ .seed-select-box__trigger {
3219
+ justify-content: space-between;
3220
+ gap: var(--seed-dimension-x1_5);
3221
+ flex-direction: row;
3222
+ flex-grow: 1;
3223
+ width: 100%;
3224
+ display: flex;
2512
3225
  }
2513
3226
 
2514
- .seed-radiomark__icon--size_medium {
2515
- width: var(--seed-dimension-x2);
2516
- height: var(--seed-dimension-x2);
3227
+ .seed-select-box__content {
3228
+ flex-direction: row;
3229
+ min-width: 0;
3230
+ display: flex;
2517
3231
  }
2518
3232
 
2519
- .seed-radiomark__root--size_large {
2520
- width: var(--seed-dimension-x6);
2521
- height: var(--seed-dimension-x6);
3233
+ .seed-select-box__prefixIcon {
3234
+ width: 22px;
3235
+ height: 22px;
3236
+ color: var(--seed-color-fg-neutral);
3237
+ flex-direction: row;
3238
+ flex-shrink: 0;
3239
+ align-items: center;
3240
+ display: flex;
2522
3241
  }
2523
3242
 
2524
- .seed-radiomark__icon--size_large {
2525
- width: var(--seed-dimension-x2_5);
2526
- height: var(--seed-dimension-x2_5);
3243
+ .seed-select-box__body {
3244
+ gap: var(--seed-dimension-x0_5);
3245
+ flex-direction: column;
3246
+ min-width: 0;
3247
+ margin-right: auto;
3248
+ display: flex;
2527
3249
  }
2528
3250
 
2529
- .seed-radiomark__icon--checked_false {
3251
+ .seed-select-box__label {
3252
+ justify-content: flex-start;
3253
+ align-items: center;
3254
+ gap: var(--seed-dimension-x1);
3255
+ color: var(--seed-color-fg-neutral);
3256
+ font-size: var(--seed-font-size-t5);
3257
+ line-height: var(--seed-line-height-t5);
3258
+ font-weight: var(--seed-font-weight-medium);
3259
+ flex-direction: row;
3260
+ display: flex;
3261
+ }
3262
+
3263
+ .seed-select-box__description {
3264
+ color: var(--seed-color-fg-neutral-muted);
3265
+ font-size: var(--seed-font-size-t3);
3266
+ line-height: var(--seed-line-height-t3);
3267
+ font-weight: var(--seed-font-weight-regular);
3268
+ }
3269
+
3270
+ .seed-select-box__footer {
2530
3271
  opacity: 0;
3272
+ width: 100%;
3273
+ height: 0;
3274
+ transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity .4s var(--seed-timing-function-easing);
3275
+ flex-direction: column;
3276
+ display: flex;
3277
+ overflow: hidden;
2531
3278
  }
2532
3279
 
2533
- .seed-radiomark__root--tone_brand-checked_true-disabled_false {
2534
- background-color: var(--seed-color-bg-brand-solid);
2535
- border-width: 0;
2536
- border-color: #0000;
3280
+ .seed-select-box__footerInner {
3281
+ flex-direction: column;
3282
+ flex-shrink: 0;
3283
+ width: 100%;
3284
+ height: max-content;
3285
+ display: flex;
2537
3286
  }
2538
3287
 
2539
- .seed-radiomark__icon--tone_brand-checked_true-disabled_false {
2540
- color: var(--seed-color-palette-static-white);
2541
- background-color: var(--seed-color-palette-static-white);
3288
+ .seed-select-box__trigger--layout_horizontal {
3289
+ padding-left: var(--seed-dimension-x5);
3290
+ padding-right: var(--seed-dimension-x4);
3291
+ padding-top: var(--seed-dimension-x4);
3292
+ padding-bottom: var(--seed-dimension-x4);
3293
+ align-items: center;
2542
3294
  }
2543
3295
 
2544
- .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
2545
- background-color: var(--seed-color-bg-neutral-inverted);
2546
- border-width: 0;
2547
- border-color: #0000;
3296
+ .seed-select-box__content--layout_horizontal {
3297
+ align-items: center;
3298
+ gap: var(--seed-dimension-x3);
2548
3299
  }
2549
3300
 
2550
- .seed-radiomark__icon--tone_neutral-checked_true-disabled_false {
2551
- color: var(--seed-color-fg-neutral-inverted);
2552
- background-color: var(--seed-color-fg-neutral-inverted);
3301
+ .seed-select-box__trigger--layout_vertical {
3302
+ padding-left: var(--seed-dimension-x4);
3303
+ padding-right: var(--seed-dimension-x4);
3304
+ padding-top: var(--seed-dimension-x5);
3305
+ padding-bottom: var(--seed-dimension-x5);
2553
3306
  }
2554
3307
 
2555
- .seed-radiomark__root--tone_brand-checked_false-disabled_true, .seed-radiomark__root--tone_neutral-checked_false-disabled_true {
2556
- background-color: var(--seed-color-palette-gray-300);
3308
+ .seed-select-box__content--layout_vertical {
3309
+ gap: var(--seed-dimension-x2_5);
3310
+ flex-direction: column;
2557
3311
  }
2558
3312
 
2559
- .seed-radiomark__root--tone_brand-checked_true-disabled_true {
2560
- background-color: var(--seed-color-bg-transparent);
2561
- border-width: 1px;
2562
- border-color: var(--seed-color-palette-gray-300);
3313
+ .seed-select-box__selectedStroke--selected_true {
3314
+ border-color: var(--seed-color-stroke-neutral-contrast);
2563
3315
  }
2564
3316
 
2565
- .seed-radiomark__icon--tone_brand-checked_true-disabled_true {
2566
- color: var(--seed-color-palette-gray-300);
2567
- background-color: var(--seed-color-palette-gray-300);
3317
+ .seed-select-box__root--pressed_true {
3318
+ background-color: var(--seed-color-bg-transparent-pressed);
2568
3319
  }
2569
3320
 
2570
- .seed-radiomark__root--tone_neutral-checked_true-disabled_true {
3321
+ .seed-select-box__root--disabled_true {
3322
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
3323
+ }
3324
+
3325
+ .seed-select-box__prefixIcon--disabled_true, .seed-select-box__label--disabled_true, .seed-select-box__description--disabled_true {
3326
+ color: var(--seed-color-fg-disabled);
3327
+ }
3328
+
3329
+ .seed-select-box__footer--footerOpen_true {
3330
+ opacity: 1;
3331
+ transition: height .4s var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
3332
+ }
3333
+
3334
+ .seed-select-box__selectedStroke--selected_true-disabled_true {
3335
+ border-color: var(--seed-color-stroke-neutral-weak);
3336
+ }
3337
+
3338
+ .seed-select-box__root--pressed_true-disabled_true {
2571
3339
  background-color: var(--seed-color-bg-transparent);
2572
- border-width: 1px;
2573
- border-color: var(--seed-color-palette-gray-300);
2574
3340
  }
2575
3341
 
2576
- .seed-radiomark__icon--tone_neutral-checked_true-disabled_true {
2577
- color: var(--seed-color-palette-gray-300);
2578
- background-color: var(--seed-color-palette-gray-300);
3342
+ .seed-select-box-checkmark__root {
3343
+ width: var(--seed-dimension-x5);
3344
+ height: var(--seed-dimension-x5);
3345
+ flex-shrink: 0;
3346
+ position: relative;
2579
3347
  }
2580
3348
 
2581
- .seed-radiomark__icon--size_medium-checked_true-disabled_true {
2582
- width: var(--seed-dimension-x2_5);
2583
- height: var(--seed-dimension-x2_5);
3349
+ .seed-select-box-checkmark__icon {
3350
+ width: 15px;
3351
+ height: 15px;
3352
+ color: var(--seed-color-fg-placeholder);
3353
+ margin: auto;
3354
+ display: flex;
3355
+ position: absolute;
3356
+ top: 0;
3357
+ bottom: 0;
3358
+ left: 0;
3359
+ right: 0;
2584
3360
  }
2585
3361
 
2586
- .seed-radiomark__icon--size_large-checked_true-disabled_true {
2587
- width: var(--seed-dimension-x3);
2588
- height: var(--seed-dimension-x3);
3362
+ .seed-select-box-checkmark__icon--selected_true {
3363
+ color: var(--seed-color-fg-neutral);
2589
3364
  }
2590
3365
 
2591
- .seed-radiomark__root--pressed_true-checked_false-disabled_false {
2592
- background-color: var(--seed-color-bg-transparent-pressed);
3366
+ .seed-select-box-checkmark__icon--pressed_true {
3367
+ color: var(--seed-color-fg-neutral-subtle);
2593
3368
  }
2594
3369
 
2595
- .seed-radiomark__root--tone_brand-pressed_true-checked_true-disabled_false {
2596
- background-color: var(--seed-color-bg-brand-solid-pressed);
3370
+ .seed-select-box-checkmark__icon--disabled_true {
3371
+ color: var(--seed-color-fg-disabled);
2597
3372
  }
2598
3373
 
2599
- .seed-radiomark__root--tone_neutral-pressed_true-checked_true-disabled_false {
2600
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
3374
+ .seed-select-box-checkmark__icon--selected_true-pressed_true-disabled_false {
3375
+ color: var(--seed-color-fg-neutral);
3376
+ }
3377
+
3378
+ .seed-select-box-checkmark__icon--selected_true-disabled_true {
3379
+ color: var(--seed-color-fg-disabled);
3380
+ }
3381
+
3382
+ .seed-select-box-group {
3383
+ row-gap: var(--seed-dimension-spacing-y-component-default);
3384
+ column-gap: var(--seed-dimension-x3);
3385
+ width: 100%;
3386
+ display: grid;
3387
+ }
3388
+
3389
+ .seed-select-box-group--multiColumn_true {
3390
+ grid-auto-rows: 1fr;
2601
3391
  }
2602
3392
 
2603
3393
  .seed-switch__root {
@@ -2882,6 +3672,9 @@ text {
2882
3672
  .seed-tabs__triggerLabel {
2883
3673
  white-space: nowrap;
2884
3674
  color: var(--seed-color-fg-neutral-subtle);
3675
+ transition-property: color;
3676
+ transition-duration: var(--seed-duration-d4);
3677
+ transition-timing-function: var(--seed-timing-function-easing);
2885
3678
  }
2886
3679
 
2887
3680
  .seed-tabs__listContent--triggerLayout_fill {
@@ -2965,6 +3758,10 @@ text {
2965
3758
  top: 0;
2966
3759
  }
2967
3760
 
3761
+ .seed-tabs__indicator--transitionEnabled_false, .seed-tabs__triggerLabel--transitionEnabled_false {
3762
+ transition-duration: 0s;
3763
+ }
3764
+
2968
3765
  .seed-tabs__triggerLabel--selected_true {
2969
3766
  color: var(--seed-color-fg-neutral);
2970
3767
  }