@seed-design/lynx-css 0.11.1 → 0.12.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 (82) hide show
  1. package/all.css +3257 -1214
  2. package/all.min.css +1 -1
  3. package/base.css +12 -2
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/alert-dialog.css +114 -0
  7. package/recipes/alert-dialog.d.ts +24 -0
  8. package/recipes/alert-dialog.mjs +67 -0
  9. package/recipes/app-bar.css +27 -21
  10. package/recipes/attachment-input-item.css +276 -0
  11. package/recipes/attachment-input-item.d.ts +40 -0
  12. package/recipes/attachment-input-item.mjs +128 -0
  13. package/recipes/attachment-input-trigger.css +53 -0
  14. package/recipes/attachment-input-trigger.d.ts +28 -0
  15. package/recipes/attachment-input-trigger.mjs +60 -0
  16. package/recipes/attachment-input.css +31 -0
  17. package/recipes/attachment-input.d.ts +21 -0
  18. package/recipes/attachment-input.mjs +44 -0
  19. package/recipes/callout.css +61 -56
  20. package/recipes/chip-tabs.css +136 -0
  21. package/recipes/chip-tabs.d.ts +52 -0
  22. package/recipes/chip-tabs.mjs +147 -0
  23. package/recipes/contextual-floating-button.css +131 -0
  24. package/recipes/contextual-floating-button.d.ts +40 -0
  25. package/recipes/contextual-floating-button.mjs +104 -0
  26. package/recipes/dialog.css +130 -0
  27. package/recipes/dialog.d.ts +28 -0
  28. package/recipes/dialog.mjs +76 -0
  29. package/recipes/floating-action-button.css +61 -0
  30. package/recipes/floating-action-button.d.ts +36 -0
  31. package/recipes/floating-action-button.mjs +67 -0
  32. package/recipes/help-bubble.css +112 -0
  33. package/recipes/help-bubble.d.ts +36 -0
  34. package/recipes/help-bubble.mjs +96 -0
  35. package/recipes/identity-placeholder.css +11 -0
  36. package/recipes/identity-placeholder.d.ts +24 -0
  37. package/recipes/identity-placeholder.mjs +43 -0
  38. package/recipes/input-button.css +20 -1
  39. package/recipes/input-button.d.ts +1 -1
  40. package/recipes/input-button.mjs +10 -1
  41. package/recipes/list-item.css +8 -9
  42. package/recipes/list-item.d.ts +4 -0
  43. package/recipes/list-item.mjs +11 -1
  44. package/recipes/menu-item.css +16 -2
  45. package/recipes/menu-item.d.ts +1 -1
  46. package/recipes/menu-item.mjs +4 -0
  47. package/recipes/menu-sheet-item.css +26 -15
  48. package/recipes/menu-sheet-item.d.ts +1 -1
  49. package/recipes/menu-sheet-item.mjs +4 -0
  50. package/recipes/menu-sheet.css +18 -13
  51. package/recipes/page-banner.css +8 -0
  52. package/recipes/page-banner.d.ts +1 -1
  53. package/recipes/page-banner.mjs +4 -0
  54. package/recipes/quantity-picker.css +213 -0
  55. package/recipes/quantity-picker.d.ts +44 -0
  56. package/recipes/quantity-picker.mjs +102 -0
  57. package/recipes/reaction-button.css +7 -12
  58. package/recipes/reaction-button.mjs +7 -8
  59. package/recipes/scroll-fog.css +66 -0
  60. package/recipes/scroll-fog.d.ts +36 -0
  61. package/recipes/scroll-fog.mjs +78 -0
  62. package/recipes/select-item.css +105 -0
  63. package/recipes/select-item.d.ts +36 -0
  64. package/recipes/select-item.mjs +83 -0
  65. package/recipes/select-trigger.css +147 -0
  66. package/recipes/select-trigger.d.ts +44 -0
  67. package/recipes/select-trigger.mjs +90 -0
  68. package/recipes/select.css +88 -0
  69. package/recipes/select.d.ts +32 -0
  70. package/recipes/select.mjs +81 -0
  71. package/recipes/skeleton.css +41 -0
  72. package/recipes/skeleton.d.ts +36 -0
  73. package/recipes/skeleton.mjs +50 -0
  74. package/recipes/slider-marker.css +44 -0
  75. package/recipes/slider-marker.d.ts +30 -0
  76. package/recipes/slider-marker.mjs +65 -0
  77. package/recipes/slider-tick.css +14 -0
  78. package/recipes/slider-tick.d.ts +22 -0
  79. package/recipes/slider-tick.mjs +29 -0
  80. package/recipes/slider.css +140 -0
  81. package/recipes/slider.d.ts +40 -0
  82. package/recipes/slider.mjs +99 -0
package/base.css CHANGED
@@ -586,16 +586,26 @@ text {
586
586
  from {
587
587
  opacity: var(--seed-enter-opacity, 1);
588
588
  transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0)
589
- scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1))
589
+ scale(var(--seed-enter-scale, 1))
590
590
  rotate(var(--seed-enter-rotate, 0));
591
591
  }
592
+
593
+ to {
594
+ opacity: 1;
595
+ transform: translate3d(0, 0, 0) scale(1) rotate(0);
596
+ }
592
597
  }
593
598
 
594
599
  @keyframes seed-exit {
600
+ from {
601
+ opacity: 1;
602
+ transform: translate3d(0, 0, 0) scale(1) rotate(0);
603
+ }
604
+
595
605
  to {
596
606
  opacity: var(--seed-exit-opacity, 1);
597
607
  transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0)
598
- scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1))
608
+ scale(var(--seed-exit-scale, 1))
599
609
  rotate(var(--seed-exit-rotate, 0));
600
610
  }
601
611
  }
package/base.min.css CHANGED
@@ -1 +1 @@
1
- text{background-color:var(--seed-color-bg-transparent)}.seed-icon,.seed-prefix-icon,.seed-suffix-icon,.seed-icon-slot,.seed-prefix-icon-slot,.seed-suffix-icon-slot{flex-shrink:0;justify-content:center;align-items:center;display:flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size);color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);color:var(--seed-prefix-icon-color,currentColor);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);color:var(--seed-suffix-icon-color,currentColor);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:8px;--seed-dimension-spacing-x-global-gutter:16px;--seed-dimension-spacing-y-component-default:12px;--seed-dimension-spacing-y-nav-to-title:20px;--seed-dimension-spacing-y-screen-bottom:56px;--seed-dimension-spacing-y-between-text:6px;--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:.15s;--seed-duration-pressed-scale:.15s;--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t11:28sp;--seed-font-size-t12:32sp;--seed-font-size-t13:40sp;--seed-font-size-t14:48sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-size-t11-static:28px;--seed-font-size-t12-static:32px;--seed-font-size-t13-static:40px;--seed-font-size-t14-static:48px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t11:38sp;--seed-line-height-t12:42sp;--seed-line-height-t13:52sp;--seed-line-height-t14:60sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-line-height-t11-static:38px;--seed-line-height-t12-static:42px;--seed-line-height-t13-static:52px;--seed-line-height-t14-static:60px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55);--seed-timing-function-pressed-scale:cubic-bezier(0, 0, .15, 1)}:root,:root.seed-user-color-scheme-light,:root.seed-color-mode-light-only,.seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#e14d00;--seed-color-fg-critical:#fa342c;--seed-color-fg-critical-contrast:#921708;--seed-color-fg-disabled:#d1d3d8;--seed-color-fg-informative:#217cf9;--seed-color-fg-informative-contrast:#0b4596;--seed-color-fg-neutral:#1a1c20;--seed-color-fg-neutral-inverted:#fff;--seed-color-fg-neutral-muted:#555d6d;--seed-color-fg-neutral-subtle:#868b94;--seed-color-fg-placeholder:#b0b3ba;--seed-color-fg-positive:#079171;--seed-color-fg-positive-contrast:#075445;--seed-color-fg-warning:#9b7821;--seed-color-fg-warning-contrast:#4f3e1f;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#e14d00;--seed-color-bg-brand-weak:#fff2ec;--seed-color-bg-brand-weak-pressed:#ffe8db;--seed-color-bg-critical-solid:#fa342c;--seed-color-bg-critical-solid-pressed:#ca1d13;--seed-color-bg-critical-weak:#fdf0f0;--seed-color-bg-critical-weak-pressed:#fde7e7;--seed-color-bg-disabled:#f3f4f5;--seed-color-bg-informative-solid:#217cf9;--seed-color-bg-informative-solid-pressed:#135fcd;--seed-color-bg-informative-weak:#eff6ff;--seed-color-bg-informative-weak-pressed:#e2edfc;--seed-color-bg-layer-basement:#f3f4f5;--seed-color-bg-layer-default:#fff;--seed-color-bg-layer-default-pressed:#f7f8f9;--seed-color-bg-layer-fill:#f7f8f9;--seed-color-bg-layer-floating:#fff;--seed-color-bg-layer-floating-pressed:#f7f8f9;--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:#2a3038;--seed-color-bg-neutral-inverted-pressed:#555d6d;--seed-color-bg-neutral-solid:#1a1c20;--seed-color-bg-neutral-solid-muted:#555d6d;--seed-color-bg-neutral-solid-muted-pressed:#2a3038;--seed-color-bg-neutral-weak:#f3f4f5;--seed-color-bg-neutral-weak-alpha:#0000000c;--seed-color-bg-neutral-weak-alpha-pressed:#00000010;--seed-color-bg-neutral-weak-pressed:#eeeff1;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#079171;--seed-color-bg-positive-solid-pressed:#00745f;--seed-color-bg-positive-weak:#edfaf6;--seed-color-bg-positive-weak-pressed:#d9f6e9;--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:#00000007;--seed-color-bg-transparent-selected:#0000000c;--seed-color-bg-transparent-selected-pressed:#00000010;--seed-color-bg-warning-solid:#fbdc65;--seed-color-bg-warning-solid-pressed:#e9c647;--seed-color-bg-warning-weak:#fff7de;--seed-color-bg-warning-weak-pressed:#fdefb9;--seed-color-stroke-brand-solid:#e14d00;--seed-color-stroke-brand-weak:#ffd5c0;--seed-color-stroke-critical-solid:#fa342c;--seed-color-stroke-critical-weak:#fed4d2;--seed-color-stroke-focus-ring:#5e98fe;--seed-color-stroke-informative-solid:#217cf9;--seed-color-stroke-informative-weak:#cbdffa;--seed-color-stroke-neutral-contrast:#1a1c20;--seed-color-stroke-neutral-muted:#00000010;--seed-color-stroke-neutral-solid:#555d6d;--seed-color-stroke-neutral-subtle:#0000000c;--seed-color-stroke-neutral-weak:#dcdee3;--seed-color-stroke-positive-solid:#079171;--seed-color-stroke-positive-weak:#b9e9d2;--seed-color-stroke-warning-solid:#9b7821;--seed-color-stroke-warning-weak:#fbdc65;--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--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%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root.seed-user-color-scheme-dark,:root.seed-color-mode-dark-only,.seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#f60;--seed-color-fg-critical:#ff6e60;--seed-color-fg-critical-contrast:#f8c5c3;--seed-color-fg-disabled:#5b606a;--seed-color-fg-informative:#41a2f9;--seed-color-fg-informative-contrast:#b9d7fb;--seed-color-fg-neutral:#f3f4f5;--seed-color-fg-neutral-inverted:#16171b;--seed-color-fg-neutral-muted:#dcdee3;--seed-color-fg-neutral-subtle:#b0b3ba;--seed-color-fg-placeholder:#868b94;--seed-color-fg-positive:#22b27f;--seed-color-fg-positive-contrast:#93e5c0;--seed-color-fg-warning:#ca901c;--seed-color-fg-warning-contrast:#e5d49b;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#ff9e65;--seed-color-bg-brand-weak:#31241f;--seed-color-bg-brand-weak-pressed:#4b291c;--seed-color-bg-critical-solid:#f73526;--seed-color-bg-critical-solid-pressed:#ff6e60;--seed-color-bg-critical-weak:#322323;--seed-color-bg-critical-weak-pressed:#4f2624;--seed-color-bg-disabled:#2b2e35;--seed-color-bg-informative-solid:#1e82eb;--seed-color-bg-informative-solid-pressed:#41a2f9;--seed-color-bg-informative-weak:#202742;--seed-color-bg-informative-weak-pressed:#1e3352;--seed-color-bg-layer-basement:#000;--seed-color-bg-layer-default:#16171b;--seed-color-bg-layer-default-pressed:#2b2e35;--seed-color-bg-layer-fill:#1d2025;--seed-color-bg-layer-floating:#1d2025;--seed-color-bg-layer-floating-pressed:#2b2e35;--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:#f3f4f5;--seed-color-bg-neutral-inverted-pressed:#dcdee3;--seed-color-bg-neutral-solid:#2b2e35;--seed-color-bg-neutral-solid-muted:#393d46;--seed-color-bg-neutral-solid-muted-pressed:#5b606a;--seed-color-bg-neutral-weak:#2b2e35;--seed-color-bg-neutral-weak-alpha:#ffffff20;--seed-color-bg-neutral-weak-alpha-pressed:#ffffff2e;--seed-color-bg-neutral-weak-pressed:#393d46;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#117956;--seed-color-bg-positive-solid-pressed:#1b946d;--seed-color-bg-positive-weak:#202926;--seed-color-bg-positive-weak-pressed:#20362e;--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:#ffffff0d;--seed-color-bg-transparent-selected:#ffffff17;--seed-color-bg-transparent-selected-pressed:#ffffff20;--seed-color-bg-warning-solid:#dab156;--seed-color-bg-warning-solid-pressed:#e5d49b;--seed-color-bg-warning-weak:#302819;--seed-color-bg-warning-weak-pressed:#413218;--seed-color-stroke-brand-solid:#f60;--seed-color-stroke-brand-weak:#6b311c;--seed-color-stroke-critical-solid:#ff6e60;--seed-color-stroke-critical-weak:#742826;--seed-color-stroke-focus-ring:#1e82eb;--seed-color-stroke-informative-solid:#41a2f9;--seed-color-stroke-informative-weak:#1a4275;--seed-color-stroke-neutral-contrast:#f3f4f5;--seed-color-stroke-neutral-muted:#ffffff17;--seed-color-stroke-neutral-solid:#dcdee3;--seed-color-stroke-neutral-subtle:#ffffff0d;--seed-color-stroke-neutral-weak:#393d46;--seed-color-stroke-positive-solid:#22b27f;--seed-color-stroke-positive-weak:#20493b;--seed-color-stroke-warning-solid:#ca901c;--seed-color-stroke-warning-weak:#543e15;--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--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%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}:root{--seed-scale-s95:.95;--seed-scale-s97:.97;--seed-scale-s98:.98}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale3d(var(--seed-enter-scale,1), var(--seed-enter-scale,1), var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale3d(var(--seed-exit-scale,1), var(--seed-exit-scale,1), var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}}
1
+ text{background-color:var(--seed-color-bg-transparent)}.seed-icon,.seed-prefix-icon,.seed-suffix-icon,.seed-icon-slot,.seed-prefix-icon-slot,.seed-suffix-icon-slot{flex-shrink:0;justify-content:center;align-items:center;display:flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size);color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);color:var(--seed-prefix-icon-color,currentColor);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);color:var(--seed-suffix-icon-color,currentColor);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:8px;--seed-dimension-spacing-x-global-gutter:16px;--seed-dimension-spacing-y-component-default:12px;--seed-dimension-spacing-y-nav-to-title:20px;--seed-dimension-spacing-y-screen-bottom:56px;--seed-dimension-spacing-y-between-text:6px;--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:.15s;--seed-duration-pressed-scale:.15s;--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t11:28sp;--seed-font-size-t12:32sp;--seed-font-size-t13:40sp;--seed-font-size-t14:48sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-size-t11-static:28px;--seed-font-size-t12-static:32px;--seed-font-size-t13-static:40px;--seed-font-size-t14-static:48px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t11:38sp;--seed-line-height-t12:42sp;--seed-line-height-t13:52sp;--seed-line-height-t14:60sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-line-height-t11-static:38px;--seed-line-height-t12-static:42px;--seed-line-height-t13-static:52px;--seed-line-height-t14-static:60px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55);--seed-timing-function-pressed-scale:cubic-bezier(0, 0, .15, 1)}:root,:root.seed-user-color-scheme-light,:root.seed-color-mode-light-only,.seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#e14d00;--seed-color-fg-critical:#fa342c;--seed-color-fg-critical-contrast:#921708;--seed-color-fg-disabled:#d1d3d8;--seed-color-fg-informative:#217cf9;--seed-color-fg-informative-contrast:#0b4596;--seed-color-fg-neutral:#1a1c20;--seed-color-fg-neutral-inverted:#fff;--seed-color-fg-neutral-muted:#555d6d;--seed-color-fg-neutral-subtle:#868b94;--seed-color-fg-placeholder:#b0b3ba;--seed-color-fg-positive:#079171;--seed-color-fg-positive-contrast:#075445;--seed-color-fg-warning:#9b7821;--seed-color-fg-warning-contrast:#4f3e1f;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#e14d00;--seed-color-bg-brand-weak:#fff2ec;--seed-color-bg-brand-weak-pressed:#ffe8db;--seed-color-bg-critical-solid:#fa342c;--seed-color-bg-critical-solid-pressed:#ca1d13;--seed-color-bg-critical-weak:#fdf0f0;--seed-color-bg-critical-weak-pressed:#fde7e7;--seed-color-bg-disabled:#f3f4f5;--seed-color-bg-informative-solid:#217cf9;--seed-color-bg-informative-solid-pressed:#135fcd;--seed-color-bg-informative-weak:#eff6ff;--seed-color-bg-informative-weak-pressed:#e2edfc;--seed-color-bg-layer-basement:#f3f4f5;--seed-color-bg-layer-default:#fff;--seed-color-bg-layer-default-pressed:#f7f8f9;--seed-color-bg-layer-fill:#f7f8f9;--seed-color-bg-layer-floating:#fff;--seed-color-bg-layer-floating-pressed:#f7f8f9;--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:#2a3038;--seed-color-bg-neutral-inverted-pressed:#555d6d;--seed-color-bg-neutral-solid:#1a1c20;--seed-color-bg-neutral-solid-muted:#555d6d;--seed-color-bg-neutral-solid-muted-pressed:#2a3038;--seed-color-bg-neutral-weak:#f3f4f5;--seed-color-bg-neutral-weak-alpha:#0000000c;--seed-color-bg-neutral-weak-alpha-pressed:#00000010;--seed-color-bg-neutral-weak-pressed:#eeeff1;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#079171;--seed-color-bg-positive-solid-pressed:#00745f;--seed-color-bg-positive-weak:#edfaf6;--seed-color-bg-positive-weak-pressed:#d9f6e9;--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:#00000007;--seed-color-bg-transparent-selected:#0000000c;--seed-color-bg-transparent-selected-pressed:#00000010;--seed-color-bg-warning-solid:#fbdc65;--seed-color-bg-warning-solid-pressed:#e9c647;--seed-color-bg-warning-weak:#fff7de;--seed-color-bg-warning-weak-pressed:#fdefb9;--seed-color-stroke-brand-solid:#e14d00;--seed-color-stroke-brand-weak:#ffd5c0;--seed-color-stroke-critical-solid:#fa342c;--seed-color-stroke-critical-weak:#fed4d2;--seed-color-stroke-focus-ring:#5e98fe;--seed-color-stroke-informative-solid:#217cf9;--seed-color-stroke-informative-weak:#cbdffa;--seed-color-stroke-neutral-contrast:#1a1c20;--seed-color-stroke-neutral-muted:#00000010;--seed-color-stroke-neutral-solid:#555d6d;--seed-color-stroke-neutral-subtle:#0000000c;--seed-color-stroke-neutral-weak:#dcdee3;--seed-color-stroke-positive-solid:#079171;--seed-color-stroke-positive-weak:#b9e9d2;--seed-color-stroke-warning-solid:#9b7821;--seed-color-stroke-warning-weak:#fbdc65;--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--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%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root.seed-user-color-scheme-dark,:root.seed-color-mode-dark-only,.seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#f60;--seed-color-fg-critical:#ff6e60;--seed-color-fg-critical-contrast:#f8c5c3;--seed-color-fg-disabled:#5b606a;--seed-color-fg-informative:#41a2f9;--seed-color-fg-informative-contrast:#b9d7fb;--seed-color-fg-neutral:#f3f4f5;--seed-color-fg-neutral-inverted:#16171b;--seed-color-fg-neutral-muted:#dcdee3;--seed-color-fg-neutral-subtle:#b0b3ba;--seed-color-fg-placeholder:#868b94;--seed-color-fg-positive:#22b27f;--seed-color-fg-positive-contrast:#93e5c0;--seed-color-fg-warning:#ca901c;--seed-color-fg-warning-contrast:#e5d49b;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#ff9e65;--seed-color-bg-brand-weak:#31241f;--seed-color-bg-brand-weak-pressed:#4b291c;--seed-color-bg-critical-solid:#f73526;--seed-color-bg-critical-solid-pressed:#ff6e60;--seed-color-bg-critical-weak:#322323;--seed-color-bg-critical-weak-pressed:#4f2624;--seed-color-bg-disabled:#2b2e35;--seed-color-bg-informative-solid:#1e82eb;--seed-color-bg-informative-solid-pressed:#41a2f9;--seed-color-bg-informative-weak:#202742;--seed-color-bg-informative-weak-pressed:#1e3352;--seed-color-bg-layer-basement:#000;--seed-color-bg-layer-default:#16171b;--seed-color-bg-layer-default-pressed:#2b2e35;--seed-color-bg-layer-fill:#1d2025;--seed-color-bg-layer-floating:#1d2025;--seed-color-bg-layer-floating-pressed:#2b2e35;--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:#f3f4f5;--seed-color-bg-neutral-inverted-pressed:#dcdee3;--seed-color-bg-neutral-solid:#2b2e35;--seed-color-bg-neutral-solid-muted:#393d46;--seed-color-bg-neutral-solid-muted-pressed:#5b606a;--seed-color-bg-neutral-weak:#2b2e35;--seed-color-bg-neutral-weak-alpha:#ffffff20;--seed-color-bg-neutral-weak-alpha-pressed:#ffffff2e;--seed-color-bg-neutral-weak-pressed:#393d46;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#117956;--seed-color-bg-positive-solid-pressed:#1b946d;--seed-color-bg-positive-weak:#202926;--seed-color-bg-positive-weak-pressed:#20362e;--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:#ffffff0d;--seed-color-bg-transparent-selected:#ffffff17;--seed-color-bg-transparent-selected-pressed:#ffffff20;--seed-color-bg-warning-solid:#dab156;--seed-color-bg-warning-solid-pressed:#e5d49b;--seed-color-bg-warning-weak:#302819;--seed-color-bg-warning-weak-pressed:#413218;--seed-color-stroke-brand-solid:#f60;--seed-color-stroke-brand-weak:#6b311c;--seed-color-stroke-critical-solid:#ff6e60;--seed-color-stroke-critical-weak:#742826;--seed-color-stroke-focus-ring:#1e82eb;--seed-color-stroke-informative-solid:#41a2f9;--seed-color-stroke-informative-weak:#1a4275;--seed-color-stroke-neutral-contrast:#f3f4f5;--seed-color-stroke-neutral-muted:#ffffff17;--seed-color-stroke-neutral-solid:#dcdee3;--seed-color-stroke-neutral-subtle:#ffffff0d;--seed-color-stroke-neutral-weak:#393d46;--seed-color-stroke-positive-solid:#22b27f;--seed-color-stroke-positive-weak:#20493b;--seed-color-stroke-warning-solid:#ca901c;--seed-color-stroke-warning-weak:#543e15;--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--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%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}:root{--seed-scale-s95:.95;--seed-scale-s97:.97;--seed-scale-s98:.98}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale(var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}to{opacity:1;transform:translate(0,0)scale(1)rotate(0)}}@keyframes seed-exit{0%{opacity:1;transform:translate(0,0)scale(1)rotate(0)}to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale(var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/lynx-css",
3
- "version": "0.11.1",
3
+ "version": "0.12.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/alert-dialog.css ADDED
@@ -0,0 +1,114 @@
1
+ .seed-alert-dialog__positioner {
2
+ position: fixed;
3
+ display: flex;
4
+ justify-content: center;
5
+ align-items: center;
6
+ top: 0;
7
+ right: 0;
8
+ bottom: 0;
9
+ left: 0;
10
+ --dialog-z-index: 2;
11
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
12
+ }
13
+ .seed-alert-dialog__backdrop {
14
+ position: fixed;
15
+ top: 0;
16
+ right: 0;
17
+ bottom: 0;
18
+ left: 0;
19
+ opacity: 0;
20
+ background-color: var(--seed-color-bg-overlay);
21
+ transition-property: opacity;
22
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
23
+ }
24
+ .seed-alert-dialog__backdrop.ui-open {
25
+ opacity: 1;
26
+ transition-duration: var(--seed-duration-d2);
27
+ transition-timing-function: var(--seed-timing-function-enter);
28
+ }
29
+ .seed-alert-dialog__backdrop.ui-closed {
30
+ opacity: 0;
31
+ transition-duration: var(--seed-duration-d2);
32
+ transition-timing-function: var(--seed-timing-function-exit);
33
+ }
34
+ .seed-alert-dialog__content {
35
+ position: relative;
36
+ display: flex;
37
+ flex: 1;
38
+ flex-direction: column;
39
+ opacity: 0;
40
+ transform: scale(1.3);
41
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
42
+ background-color: var(--seed-color-bg-layer-floating);
43
+ max-width: 272px;
44
+ margin-top: var(--seed-dimension-x16);
45
+ margin-right: var(--seed-dimension-x8);
46
+ margin-bottom: var(--seed-dimension-x16);
47
+ margin-left: var(--seed-dimension-x8);
48
+ border-radius: var(--seed-radius-r5);
49
+ transition-property: opacity, transform;
50
+ }
51
+ .seed-alert-dialog__content.ui-open {
52
+ opacity: 1;
53
+ transform: scale(1);
54
+ transition-duration: var(--seed-duration-d4);
55
+ transition-timing-function: var(--seed-timing-function-enter-expressive);
56
+ }
57
+ .seed-alert-dialog__content.ui-entering {
58
+ animation: seed-enter var(--seed-duration-d4) var(--seed-timing-function-enter-expressive) forwards;
59
+ --seed-enter-opacity: 0;
60
+ --seed-enter-scale: 1.3;
61
+ }
62
+ .seed-alert-dialog__content.ui-closed {
63
+ opacity: 0;
64
+ transform: scale(1);
65
+ transition-duration: var(--seed-duration-d2);
66
+ transition-timing-function: var(--seed-timing-function-exit);
67
+ }
68
+ .seed-alert-dialog__header {
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: var(--seed-dimension-x1_5);
72
+ padding-top: var(--seed-dimension-x5);
73
+ padding-left: var(--seed-dimension-x5);
74
+ padding-right: var(--seed-dimension-x5);
75
+ }
76
+ .seed-alert-dialog__title {
77
+ color: var(--seed-color-fg-neutral);
78
+ font-size: var(--seed-font-size-t7);
79
+ line-height: var(--seed-line-height-t7);
80
+ font-weight: var(--seed-font-weight-bold);
81
+ margin: 0;
82
+ }
83
+ .seed-alert-dialog__description {
84
+ color: var(--seed-color-fg-neutral);
85
+ font-size: var(--seed-font-size-t5);
86
+ line-height: var(--seed-line-height-t5);
87
+ font-weight: var(--seed-font-weight-regular);
88
+ margin: 0;
89
+ }
90
+ .seed-alert-dialog__footer {
91
+ display: flex;
92
+ flex-direction: column;
93
+ align-items: stretch;
94
+ gap: var(--seed-dimension-x2);
95
+ padding-top: var(--seed-dimension-x4);
96
+ padding-right: var(--seed-dimension-x5);
97
+ padding-bottom: var(--seed-dimension-x5);
98
+ padding-left: var(--seed-dimension-x5);
99
+ }
100
+ .seed-alert-dialog__backdrop--skipAnimation_true.ui-open {
101
+ transition-duration: 0s;
102
+ }
103
+ .seed-alert-dialog__backdrop--skipAnimation_true.ui-closed {
104
+ transition-duration: 0s;
105
+ }
106
+ .seed-alert-dialog__content--skipAnimation_true.ui-open {
107
+ transition-duration: 0s;
108
+ }
109
+ .seed-alert-dialog__content--skipAnimation_true.ui-entering {
110
+ animation-duration: 0s;
111
+ }
112
+ .seed-alert-dialog__content--skipAnimation_true.ui-closed {
113
+ transition-duration: 0s;
114
+ }
package/recipes/alert-dialog.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ declare interface AlertDialogVariant {
2
+ /**
3
+ * @default false
4
+ */
5
+ skipAnimation: boolean;
6
+ }
7
+
8
+ declare type AlertDialogVariantMap = {
9
+ [key in keyof AlertDialogVariant]: Array<AlertDialogVariant[key]>;
10
+ };
11
+
12
+ export declare type AlertDialogVariantProps = Partial<AlertDialogVariant>;
13
+
14
+ export declare type AlertDialogSlotName = "positioner" | "backdrop" | "content" | "header" | "footer" | "action" | "title" | "description";
15
+
16
+ export declare const alertDialogVariantMap: AlertDialogVariantMap;
17
+
18
+ export declare const alertDialog: ((
19
+ props?: AlertDialogVariantProps,
20
+ ) => Record<AlertDialogSlotName, string>) & {
21
+ splitVariantProps: <T extends AlertDialogVariantProps>(
22
+ props: T,
23
+ ) => [AlertDialogVariantProps, Omit<T, keyof AlertDialogVariantProps>];
24
+ }
package/recipes/alert-dialog.mjs ADDED
@@ -0,0 +1,67 @@
1
+ import './alert-dialog.css';
2
+ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
+
4
+ const alertDialogSlotNames = [
5
+ [
6
+ "positioner",
7
+ "seed-alert-dialog__positioner"
8
+ ],
9
+ [
10
+ "backdrop",
11
+ "seed-alert-dialog__backdrop"
12
+ ],
13
+ [
14
+ "content",
15
+ "seed-alert-dialog__content"
16
+ ],
17
+ [
18
+ "header",
19
+ "seed-alert-dialog__header"
20
+ ],
21
+ [
22
+ "footer",
23
+ "seed-alert-dialog__footer"
24
+ ],
25
+ [
26
+ "action",
27
+ "seed-alert-dialog__action"
28
+ ],
29
+ [
30
+ "title",
31
+ "seed-alert-dialog__title"
32
+ ],
33
+ [
34
+ "description",
35
+ "seed-alert-dialog__description"
36
+ ]
37
+ ];
38
+
39
+ const defaultVariant = {
40
+ "skipAnimation": false
41
+ };
42
+
43
+ const compoundVariants = [];
44
+
45
+ export const alertDialogVariantMap = {
46
+ "skipAnimation": [
47
+ true,
48
+ false
49
+ ]
50
+ };
51
+
52
+ export const alertDialogVariantKeys = Object.keys(alertDialogVariantMap);
53
+
54
+ export function alertDialog(props) {
55
+ return Object.fromEntries(
56
+ alertDialogSlotNames.map(([slot, className]) => {
57
+ return [
58
+ slot,
59
+ createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
60
+ ];
61
+ }),
62
+ );
63
+ }
64
+
65
+ Object.assign(alertDialog, { splitVariantProps: (props) => splitVariantProps(props, alertDialogVariantMap) });
66
+
67
+ // @recipe(seed): alert-dialog
package/recipes/app-bar.css CHANGED
@@ -4,7 +4,7 @@
4
4
  width: 100%;
5
5
  display: flex;
6
6
  flex-direction: row;
7
- align-items: flex-end
7
+ align-items: flex-end;
8
8
  }
9
9
  .seed-app-bar__background {
10
10
  position: absolute;
@@ -12,14 +12,14 @@
12
12
  right: 0;
13
13
  bottom: 0;
14
14
  left: 0;
15
- z-index: -1
15
+ z-index: -1;
16
16
  }
17
17
  .seed-app-bar__left {
18
18
  display: flex;
19
19
  flex-direction: row;
20
20
  align-items: center;
21
21
  height: 100%;
22
- z-index: 1
22
+ z-index: 1;
23
23
  }
24
24
  .seed-app-bar__right {
25
25
  display: flex;
@@ -27,7 +27,7 @@
27
27
  align-items: center;
28
28
  height: 100%;
29
29
  margin-left: auto;
30
- z-index: 1
30
+ z-index: 1;
31
31
  }
32
32
  .seed-app-bar__iconButton {
33
33
  display: flex;
@@ -36,66 +36,72 @@
36
36
  border-width: 0;
37
37
  background: #00000000;
38
38
  padding: 0;
39
- border-radius: var(--seed-radius-r1)
39
+ border-radius: var(--seed-radius-r1);
40
+ }
41
+ .seed-app-bar__iconButton.seed-app-bar__icon-button-edge-leading {
42
+ margin-left: calc(-1 * (44px - 24px) / 2);
43
+ }
44
+ .seed-app-bar__iconButton.seed-app-bar__icon-button-edge-trailing {
45
+ margin-right: calc(-1 * (44px - 24px) / 2);
40
46
  }
41
47
  .seed-app-bar__icon {
42
- flex-shrink: 0
48
+ flex-shrink: 0;
43
49
  }
44
50
  .seed-app-bar__custom {
45
51
  display: flex;
46
52
  flex-direction: row;
47
- align-items: center
53
+ align-items: center;
48
54
  }
49
55
  .seed-app-bar__root--theme_cupertino {
50
56
  height: calc(44px + var(--seed-safe-area-top));
51
57
  padding-left: var(--seed-dimension-x4);
52
58
  padding-right: var(--seed-dimension-x4);
53
- padding-top: var(--seed-safe-area-top)
59
+ padding-top: var(--seed-safe-area-top);
54
60
  }
55
61
  .seed-app-bar__left--theme_cupertino {
56
- height: 44px
62
+ height: 44px;
57
63
  }
58
64
  .seed-app-bar__right--theme_cupertino {
59
- height: 44px
65
+ height: 44px;
60
66
  }
61
67
  .seed-app-bar__iconButton--theme_cupertino {
62
68
  width: 44px;
63
- height: 44px
69
+ height: 44px;
64
70
  }
65
71
  .seed-app-bar__icon--theme_cupertino {
66
72
  width: 24px;
67
- height: 24px
73
+ height: 24px;
68
74
  }
69
75
  .seed-app-bar__root--theme_android {
70
76
  height: calc(56px + var(--seed-safe-area-top));
71
77
  padding-left: var(--seed-dimension-x4);
72
78
  padding-right: var(--seed-dimension-x4);
73
- padding-top: var(--seed-safe-area-top)
79
+ padding-top: var(--seed-safe-area-top);
74
80
  }
75
81
  .seed-app-bar__left--theme_android {
76
82
  height: 56px;
77
- padding-right: 16px
83
+ padding-right: 16px;
78
84
  }
79
85
  .seed-app-bar__right--theme_android {
80
- height: 56px
86
+ height: 56px;
81
87
  }
82
88
  .seed-app-bar__iconButton--theme_android {
83
89
  width: 44px;
84
- height: 44px
90
+ height: 44px;
85
91
  }
86
92
  .seed-app-bar__icon--theme_android {
87
93
  width: 24px;
88
- height: 24px
94
+ height: 24px;
89
95
  }
90
96
  .seed-app-bar__background--tone_layer {
91
- background: var(--seed-color-bg-layer-default)
97
+ background: var(--seed-color-bg-layer-default);
92
98
  }
93
99
  .seed-app-bar__icon--tone_layer {
94
- color: var(--seed-color-fg-neutral)
100
+ color: var(--seed-color-fg-neutral);
95
101
  }
96
102
  .seed-app-bar__background--tone_transparent {
97
- background: #00000000
103
+ background: #00000000;
98
104
  }
99
105
  .seed-app-bar__icon--tone_transparent {
100
- color: var(--seed-color-palette-static-white)
106
+ color: var(--seed-color-palette-static-white);
101
107
  }