@m3-baseui/react-vanilla-extract 2.0.0 → 4.0.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 (23) hide show
  1. package/dist/components/button/index.css +241 -74
  2. package/dist/components/button/index.css.map +1 -1
  3. package/dist/components/button/index.d.ts +1 -1
  4. package/dist/components/button/index.js +5 -3
  5. package/dist/components/button/index.js.map +1 -1
  6. package/dist/components/carousel/index.css +20 -6
  7. package/dist/components/carousel/index.css.map +1 -1
  8. package/dist/components/carousel/index.js +2 -2
  9. package/dist/components/carousel/index.js.map +1 -1
  10. package/dist/components/select/index.css +38 -70
  11. package/dist/components/select/index.css.map +1 -1
  12. package/dist/components/select/index.d.ts +0 -2
  13. package/dist/components/select/index.js +13 -17
  14. package/dist/components/select/index.js.map +1 -1
  15. package/dist/components/slider/index.css +58 -36
  16. package/dist/components/slider/index.css.map +1 -1
  17. package/dist/components/slider/index.js.map +1 -1
  18. package/dist/index.css +357 -186
  19. package/dist/index.css.map +1 -1
  20. package/dist/index.d.ts +1 -1
  21. package/dist/index.js +20 -22
  22. package/dist/index.js.map +1 -1
  23. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,31 +1,123 @@
1
- /* vanilla-extract-css-ns:src/components/button/button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA81YXW_aMBR951dYPBWp7pKUTZWr7WU_Y6omJ75JvBo7sm-gbOp_n2zzlQBtCkjlCcW599yvcw-Gu9_ps0hnLknIvxEhjXESpdGMWFAc5RweR4QI6RrFl4xIraQGWip48edcyUpTiTBzjBSgEaw__tM6lOWSFkYjaNx9VfGGkYcmeNcgqxoZmSbxueFCSF3RGISRbBrPc2MFWEa00bB9ppYL2TpG5tzeUDoT1C0ddTVvgJatUhNvauZgS2UWjNRSCND-rGitM5aRxsh1Vq0DSx0oKHAbpjQaaclnUi17QXDZgCu4Aqp4Dooqbiug3n6ycVysihvgGE23rk7-hUGO3jC4haHUwyPu2Ed_QPQdaHghdTUIAi0vnqWugj9ariNvaGNNAxaXjOTmxY9DmMUtyXnxXFnTakELo4y9JauP1SzDUw9JtJZHKnbSmZnOW-pqY3HaTwPlzFOpbHVxHAO480YOuRbcisnj6HV0t9kHxnIojYWwFxsqj8ePnTXhuTOqxcAYqR0gI8kBkkpdg5UY3mx6wTwXLWj8uS7f-An45iUxSmAohTlodFtmbutka48BPcompzSh9ivUacUmx-7iIUegwboPUZqidXQuncwVDIYKXj2oX4Ijp40F50A8DYZaOfTz4oXXtzNRYkpCOp4rEE8rET08t-1GrM86-axBzsDoZXO4tuRI3GHWnWlG0xajYN83L8QZJQWxVX7TaWFYcOqgMJ5ly0lU5-hITVmGxcm83u-Xs5BY-xlYpLIwetXj1ZeFghIZSb-94QpaHHC0US33PNNgtbukR4pprJxtSglHR02DLm6sd4PF_YohdybbwQAF87jHCuag0j5E5PGHMJIeRnexzoLq0nhAH70-tbbkBUzIF5Lcpdmwjnac7h8OVtTdy89KJhsafbMf4erEpQY7kF5HPHeTOJ9q2QWoll2Oatl1UC27Jqrd70UPl4WG-2vG-_AdTVvfu9P3ZH2l4z3C3XfHc0JdpHM9_FgjdxM5NKDPS2c6WA0iynajqTKLIXrQm-JJuz49QS76hZ4iF_00zpCLvYquQi6m1yQXXy8oF_2f72n_Ovf1bEHYBbvQUr-OIpBTBr-P8xbR6HBbHEfIS_318VacH8TNqxBtIQXWjKS9f0ji8-t_2Tsh26wRAAA */
1
+ /* vanilla-extract-css-ns:src/components/button/button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA-2Z33KbOBTG7_MUmlzVM1XW2OQfmd2bfYydzo4MB6xGSKwkcNxO330HMAQpkApBt73YqyRY36ejo5_OkcnN38FzEuRqu0VfrxA6As2OOkL7XfHydIVQQZKE8gxTziiHCAWX5xkpIhS2v6eCa5ySnLJzhCoiP2CcJ1idFdbnAlRMGGBGDsAwIzIDXI_f9MLTZUYHYTv0VaroF3AS1gMbWb0IfHSfcTC-1YPWILEqSEx55mShJYmfKc82T1ffrm76bP-VEE1wIUEpSD41uT8ImYDEkiS0VJa3OpICsMoJY5ZRRGJNK1jggNpYFBP69-tDqbXgmMaCX39CfyBVZY31iSb6GKHdtt3zLoft3wO3wMAo3E5gdDfA6OF_jHwxCtbCKFiMUbAqRjsDo9u7cYx2oR9GmmoGOIeElvk8jgzlLJAM5SySDKUnSobHOEs7L5ZaS8tpHkyjFrNoCi2aQoumvUHT4wRN4cOApq7RueB0BJI0-9Ici3lAWdpZSFnaWVBZWk-sLJdxsPZeYDVlzzKax9WYwxysujuQeScauIUGVsF-gqu7YZXqOt8srjwanqX148qj7VnapVy91_zCtbgKF3MVzuEqtJpfaDe_22Z0IRTVVPAISWCkjq8WJVQVjJwj1NKFUwaNGWE045hqyFWEYuAaZP34c6k0Tc84FlwD18OP2oVGiAveOIsKZMrEKUJHmiTA62dxKZWQESoE7WSlqvcPGMT6Vasl4W20uJCiAKnPETqIlzpjiTh9RAcSP2dSlDzBsWBCfkSXH5d0m3-1ybeMk1KSNh_GnuTC-BSro5A63FhiTfP6SKYlj6c9gKh6kCpk_QPSFGKtcAIpKZk2N_w2ig6QCtky02f3-vrJ2DlyUIKVuskR5Qp0hLZPbyGj_AiS6uaTPlFRnX0JXP9Z56bZofrU1JndtrM0e4KhAq7V2F5EncIhY7vNuynRhCdEJnYSjjU0Rir6GM2Do4kG3Iy2LVIRlwpXVNEDA2erRmVZmeXA2eoisONqS8JClzakhCpyYF2Jmtq31-PSPTPi6UwWeFjRjK9tOzGv22hjN9uhpW7b4L54QUowmiCZHT4YKWxOP1YQi5qy86Y5vRchFmnaHBy7-9615XpwXiZ8C0nz3rV5NDm0qV_96OFkLeqXDvGaZMMDGFTtkWJQAQtsC6PLuHlsLY_RludnZRLlkMe6VJQyJTFs0G9oexO4JfSiwRWRlHDdavcPowszT8pPjuneNYge3KbNEspBOsI2oRwGsRy8-xXAu18PvPvl4O1m7fLE7q5F3BrBPLyZveniBan7vxfRm-EVL_he6e1q7UA9jM7csQWnCxn3vWkPK5z-aA-DGtu_XyO0R-fCcYmmP_yYiZNL6TBammdZePSoLDvbwqOy2GEsqCxvVvQrtbTHX7ClkR9RZ4b-q1WKoenKJ31gnTl-5U9L-3X384KXm2yBNvd_ScEdpfCiJRkzEEsNigUL_2eBVvonTS1ds15qUHozWnkrT97KF2_l2Vv5Zajs_idg_19yOzJobw8KvDu364X_3fIZ7H7y_Pv_8jt1EP7we9L3V3zrGgPlFUgFfW92mL2TDDr6yEXT6MBGaCtdZ1ynW_W-4jjpnUMzN-iZfs_-dcW349_-BQXr8DkXIwAA */
2
2
  ._1kd1ms00 {
3
+ height: 32px;
4
+ padding-inline: 12px;
5
+ gap: 4px;
6
+ font-family: var(--md-sys-typescale-label-large-font);
7
+ font-weight: var(--md-sys-typescale-label-large-weight);
8
+ font-size: var(--md-sys-typescale-label-large-size);
9
+ line-height: var(--md-sys-typescale-label-large-line-height);
10
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
11
+ }
12
+ ._1kd1ms00[data-pressed] {
13
+ border-radius: var(--md-sys-shape-small);
14
+ }
15
+ ._1kd1ms00:active {
16
+ border-radius: var(--md-sys-shape-small);
17
+ }
18
+ ._1kd1ms00 [data-slot=button-icon] > svg {
19
+ width: 20px;
20
+ height: 20px;
21
+ }
22
+ ._1kd1ms01 {
23
+ height: 40px;
24
+ padding-inline: 16px;
25
+ gap: 8px;
26
+ font-family: var(--md-sys-typescale-label-large-font);
27
+ font-weight: var(--md-sys-typescale-label-large-weight);
28
+ font-size: var(--md-sys-typescale-label-large-size);
29
+ line-height: var(--md-sys-typescale-label-large-line-height);
30
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
31
+ }
32
+ ._1kd1ms01[data-pressed] {
33
+ border-radius: var(--md-sys-shape-small);
34
+ }
35
+ ._1kd1ms01:active {
36
+ border-radius: var(--md-sys-shape-small);
37
+ }
38
+ ._1kd1ms01 [data-slot=button-icon] > svg {
39
+ width: 20px;
40
+ height: 20px;
41
+ }
42
+ ._1kd1ms02 {
43
+ height: 56px;
44
+ padding-inline: 24px;
45
+ gap: 8px;
46
+ font-family: var(--md-sys-typescale-title-medium-font);
47
+ font-weight: var(--md-sys-typescale-title-medium-weight);
48
+ font-size: var(--md-sys-typescale-title-medium-size);
49
+ line-height: var(--md-sys-typescale-title-medium-line-height);
50
+ letter-spacing: var(--md-sys-typescale-title-medium-tracking);
51
+ }
52
+ ._1kd1ms02[data-pressed] {
53
+ border-radius: var(--md-sys-shape-medium);
54
+ }
55
+ ._1kd1ms02:active {
56
+ border-radius: var(--md-sys-shape-medium);
57
+ }
58
+ ._1kd1ms02 [data-slot=button-icon] > svg {
59
+ width: 24px;
60
+ height: 24px;
61
+ }
62
+ ._1kd1ms03 {
63
+ height: 96px;
64
+ padding-inline: 48px;
65
+ gap: 12px;
66
+ font-family: var(--md-sys-typescale-headline-small-font);
67
+ font-weight: var(--md-sys-typescale-headline-small-weight);
68
+ font-size: var(--md-sys-typescale-headline-small-size);
69
+ line-height: var(--md-sys-typescale-headline-small-line-height);
70
+ letter-spacing: var(--md-sys-typescale-headline-small-tracking);
71
+ }
72
+ ._1kd1ms03[data-pressed] {
73
+ border-radius: var(--md-sys-shape-large);
74
+ }
75
+ ._1kd1ms03:active {
76
+ border-radius: var(--md-sys-shape-large);
77
+ }
78
+ ._1kd1ms03 [data-slot=button-icon] > svg {
79
+ width: 32px;
80
+ height: 32px;
81
+ }
82
+ ._1kd1ms04 {
83
+ height: 136px;
84
+ padding-inline: 64px;
85
+ gap: 16px;
86
+ font-family: var(--md-sys-typescale-headline-large-font);
87
+ font-weight: var(--md-sys-typescale-headline-large-weight);
88
+ font-size: var(--md-sys-typescale-headline-large-size);
89
+ line-height: var(--md-sys-typescale-headline-large-line-height);
90
+ letter-spacing: var(--md-sys-typescale-headline-large-tracking);
91
+ }
92
+ ._1kd1ms04[data-pressed] {
93
+ border-radius: var(--md-sys-shape-large);
94
+ }
95
+ ._1kd1ms04:active {
96
+ border-radius: var(--md-sys-shape-large);
97
+ }
98
+ ._1kd1ms04 [data-slot=button-icon] > svg {
99
+ width: 40px;
100
+ height: 40px;
101
+ }
102
+ ._1kd1ms05 {
3
103
  position: relative;
4
104
  display: inline-flex;
5
105
  align-items: center;
6
106
  justify-content: center;
7
- gap: 8px;
8
- height: 40px;
9
- padding-inline: 24px;
10
107
  border: none;
11
- border-radius: var(--md-sys-shape-full);
12
108
  overflow: hidden;
13
109
  cursor: pointer;
14
110
  user-select: none;
15
- font-family: var(--md-sys-typescale-label-large-font);
16
- font-weight: var(--md-sys-typescale-label-large-weight);
17
- font-size: var(--md-sys-typescale-label-large-size);
18
- line-height: var(--md-sys-typescale-label-large-line-height);
19
- letter-spacing: var(--md-sys-typescale-label-large-tracking);
20
111
  transition-property:
21
112
  box-shadow,
22
113
  background-color,
23
114
  color,
24
- border-color;
115
+ border-color,
116
+ border-radius;
25
117
  transition-duration: var(--md-sys-motion-duration-short4);
26
- transition-timing-function: var(--md-sys-motion-easing-standard);
118
+ transition-timing-function: var(--md-sys-motion-easing-spring-effects-default);
27
119
  }
28
- ._1kd1ms00::before {
120
+ ._1kd1ms05::before {
29
121
  content: "";
30
122
  position: absolute;
31
123
  inset: 0;
@@ -35,139 +127,214 @@
35
127
  pointer-events: none;
36
128
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
37
129
  }
38
- ._1kd1ms00:hover::before {
130
+ ._1kd1ms05:hover::before {
39
131
  opacity: var(--md-sys-state-hover);
40
132
  }
41
- ._1kd1ms00:focus-visible::before {
133
+ ._1kd1ms05:focus-visible::before {
42
134
  opacity: var(--md-sys-state-focus);
43
135
  }
44
- ._1kd1ms00[data-pressed]::before {
136
+ ._1kd1ms05[data-pressed]::before {
45
137
  opacity: var(--md-sys-state-pressed);
46
138
  }
47
- ._1kd1ms00:active::before {
139
+ ._1kd1ms05:active::before {
48
140
  opacity: var(--md-sys-state-pressed);
49
141
  }
50
- ._1kd1ms00[data-disabled] {
142
+ ._1kd1ms05[data-disabled] {
51
143
  pointer-events: none;
52
144
  box-shadow: none;
53
145
  }
54
- ._1kd1ms00:disabled {
146
+ ._1kd1ms05:disabled {
55
147
  pointer-events: none;
56
148
  box-shadow: none;
57
149
  }
58
- ._1kd1ms00[data-disabled]::before {
150
+ ._1kd1ms05[data-disabled]::before {
59
151
  opacity: 0;
60
152
  }
61
- ._1kd1ms00:disabled::before {
153
+ ._1kd1ms05:disabled::before {
62
154
  opacity: 0;
63
155
  }
64
- ._1kd1ms00:focus-visible {
156
+ ._1kd1ms05:focus-visible {
65
157
  outline: 3px solid rgb(var(--md-sys-color-secondary));
66
158
  outline-offset: 2px;
67
159
  }
68
- ._1kd1ms00[data-with-start-icon] {
69
- padding-left: 16px;
70
- }
71
- ._1kd1ms00[data-with-end-icon] {
72
- padding-right: 16px;
73
- }
74
- ._1kd1ms01 {
160
+ ._1kd1ms06 {
75
161
  background: rgb(var(--md-sys-color-primary));
76
162
  color: rgb(var(--md-sys-color-on-primary));
77
163
  }
78
- ._1kd1ms01:hover {
164
+ ._1kd1ms06:hover {
79
165
  box-shadow: var(--md-sys-elevation-level1);
80
166
  }
81
- ._1kd1ms01:active {
167
+ ._1kd1ms06:active {
82
168
  box-shadow: var(--md-sys-elevation-level0);
83
169
  }
84
- ._1kd1ms01[data-pressed] {
170
+ ._1kd1ms06[data-pressed] {
85
171
  box-shadow: var(--md-sys-elevation-level0);
86
172
  }
87
- ._1kd1ms01:disabled {
88
- background: rgb(var(--md-sys-color-on-surface) / 0.12);
89
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
173
+ ._1kd1ms06:disabled {
174
+ background: rgb(var(--md-sys-color-on-surface) / 0.1);
175
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
90
176
  }
91
- ._1kd1ms01[data-disabled] {
92
- background: rgb(var(--md-sys-color-on-surface) / 0.12);
93
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
177
+ ._1kd1ms06[data-disabled] {
178
+ background: rgb(var(--md-sys-color-on-surface) / 0.1);
179
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
94
180
  }
95
- ._1kd1ms02 {
181
+ ._1kd1ms07 {
96
182
  background: rgb(var(--md-sys-color-secondary-container));
97
183
  color: rgb(var(--md-sys-color-on-secondary-container));
98
184
  }
99
- ._1kd1ms02:hover {
185
+ ._1kd1ms07:hover {
100
186
  box-shadow: var(--md-sys-elevation-level1);
101
187
  }
102
- ._1kd1ms02:active {
188
+ ._1kd1ms07:active {
103
189
  box-shadow: var(--md-sys-elevation-level0);
104
190
  }
105
- ._1kd1ms02[data-pressed] {
191
+ ._1kd1ms07[data-pressed] {
106
192
  box-shadow: var(--md-sys-elevation-level0);
107
193
  }
108
- ._1kd1ms02:disabled {
194
+ ._1kd1ms07:disabled {
109
195
  background: rgb(var(--md-sys-color-on-surface) / 0.12);
110
196
  color: rgb(var(--md-sys-color-on-surface) / 0.38);
111
197
  }
112
- ._1kd1ms02[data-disabled] {
198
+ ._1kd1ms07[data-disabled] {
113
199
  background: rgb(var(--md-sys-color-on-surface) / 0.12);
114
200
  color: rgb(var(--md-sys-color-on-surface) / 0.38);
115
201
  }
116
- ._1kd1ms03 {
202
+ ._1kd1ms08 {
117
203
  background: transparent;
118
- color: rgb(var(--md-sys-color-primary));
119
- border: 1px solid rgb(var(--md-sys-color-outline));
204
+ color: rgb(var(--md-sys-color-on-surface-variant));
205
+ border: 1px solid rgb(var(--md-sys-color-outline-variant));
120
206
  }
121
- ._1kd1ms03:disabled {
122
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
123
- border-color: rgb(var(--md-sys-color-on-surface) / 0.12);
207
+ ._1kd1ms08:disabled {
208
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
209
+ border-color: rgb(var(--md-sys-color-outline-variant) / 0.1);
124
210
  }
125
- ._1kd1ms03[data-disabled] {
126
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
127
- border-color: rgb(var(--md-sys-color-on-surface) / 0.12);
211
+ ._1kd1ms08[data-disabled] {
212
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
213
+ border-color: rgb(var(--md-sys-color-outline-variant) / 0.1);
128
214
  }
129
- ._1kd1ms04 {
215
+ ._1kd1ms09 {
130
216
  background: rgb(var(--md-sys-color-surface-container-low));
131
217
  color: rgb(var(--md-sys-color-primary));
132
218
  box-shadow: var(--md-sys-elevation-level1);
133
219
  }
134
- ._1kd1ms04:hover {
220
+ ._1kd1ms09:hover {
135
221
  box-shadow: var(--md-sys-elevation-level2);
136
222
  }
137
- ._1kd1ms04:active {
223
+ ._1kd1ms09:active {
138
224
  box-shadow: var(--md-sys-elevation-level1);
139
225
  }
140
- ._1kd1ms04[data-pressed] {
226
+ ._1kd1ms09[data-pressed] {
141
227
  box-shadow: var(--md-sys-elevation-level1);
142
228
  }
143
- ._1kd1ms04:disabled {
144
- background: rgb(var(--md-sys-color-on-surface) / 0.12);
145
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
229
+ ._1kd1ms09:disabled {
230
+ background: rgb(var(--md-sys-color-on-surface) / 0.1);
231
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
146
232
  }
147
- ._1kd1ms04[data-disabled] {
148
- background: rgb(var(--md-sys-color-on-surface) / 0.12);
149
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
233
+ ._1kd1ms09[data-disabled] {
234
+ background: rgb(var(--md-sys-color-on-surface) / 0.1);
235
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
150
236
  }
151
- ._1kd1ms05 {
237
+ ._1kd1ms0a {
152
238
  background: transparent;
153
- color: rgb(var(--md-sys-color-primary));
154
- padding-inline: 12px;
239
+ color: rgb(var(--md-sys-color-on-surface-variant));
155
240
  }
156
- ._1kd1ms05:disabled {
157
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
241
+ ._1kd1ms0a:disabled {
242
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
158
243
  }
159
- ._1kd1ms05[data-disabled] {
160
- color: rgb(var(--md-sys-color-on-surface) / 0.38);
244
+ ._1kd1ms0a[data-disabled] {
245
+ color: rgb(var(--md-sys-color-on-surface-variant) / 0.38);
246
+ }
247
+ ._1kd1ms0g {
248
+ border-radius: var(--md-sys-shape-full);
249
+ }
250
+ ._1kd1ms0k {
251
+ border-radius: var(--md-sys-shape-medium);
252
+ }
253
+ ._1kd1ms0l {
254
+ border-radius: var(--md-sys-shape-medium);
255
+ }
256
+ ._1kd1ms0m {
257
+ border-radius: var(--md-sys-shape-large);
258
+ }
259
+ ._1kd1ms0n {
260
+ border-radius: var(--md-sys-shape-extra-large);
261
+ }
262
+ ._1kd1ms0o {
263
+ border-radius: var(--md-sys-shape-extra-large);
264
+ }
265
+ ._1kd1ms0p {
266
+ border-radius: var(--md-sys-shape-medium);
267
+ }
268
+ ._1kd1ms0q {
269
+ border-radius: var(--md-sys-shape-medium);
270
+ }
271
+ ._1kd1ms0r {
272
+ border-radius: var(--md-sys-shape-large);
273
+ }
274
+ ._1kd1ms0s {
275
+ border-radius: var(--md-sys-shape-extra-large);
276
+ }
277
+ ._1kd1ms0t {
278
+ border-radius: var(--md-sys-shape-extra-large);
279
+ }
280
+ ._1kd1ms0u {
281
+ border-radius: var(--md-sys-shape-full);
282
+ }
283
+ ._1kd1ms0v {
284
+ border-radius: var(--md-sys-shape-full);
285
+ }
286
+ ._1kd1ms0w {
287
+ border-radius: var(--md-sys-shape-full);
288
+ }
289
+ ._1kd1ms0x {
290
+ border-radius: var(--md-sys-shape-full);
291
+ }
292
+ ._1kd1ms0y {
293
+ border-radius: var(--md-sys-shape-full);
294
+ }
295
+ ._1kd1ms0z {
296
+ border-width: 2px;
297
+ }
298
+ ._1kd1ms010 {
299
+ border-width: 3px;
300
+ }
301
+ ._1kd1ms011 {
302
+ background: rgb(var(--md-sys-color-surface-container));
303
+ color: rgb(var(--md-sys-color-on-surface-variant));
304
+ }
305
+ ._1kd1ms012 {
306
+ background: rgb(var(--md-sys-color-surface-container));
307
+ color: rgb(var(--md-sys-color-on-surface-variant));
308
+ }
309
+ ._1kd1ms013 {
310
+ background: rgb(var(--md-sys-color-primary));
311
+ color: rgb(var(--md-sys-color-on-primary));
312
+ }
313
+ ._1kd1ms014 {
314
+ background: rgb(var(--md-sys-color-surface-container-low));
315
+ color: rgb(var(--md-sys-color-on-surface-variant));
316
+ }
317
+ ._1kd1ms015 {
318
+ background: rgb(var(--md-sys-color-inverse-surface));
319
+ color: rgb(var(--md-sys-color-inverse-on-surface));
320
+ border-color: transparent;
321
+ }
322
+ ._1kd1ms015:disabled {
323
+ background: rgb(var(--md-sys-color-on-surface) / 0.1);
324
+ border-color: transparent;
325
+ }
326
+ ._1kd1ms015[data-disabled] {
327
+ background: rgb(var(--md-sys-color-on-surface) / 0.1);
328
+ border-color: transparent;
329
+ }
330
+ ._1kd1ms016 {
331
+ color: rgb(var(--md-sys-color-primary));
161
332
  }
162
333
  [data-slot=button-icon] {
163
334
  display: inline-flex;
164
335
  align-items: center;
165
336
  justify-content: center;
166
337
  }
167
- [data-slot=button-icon] > svg {
168
- width: 18px;
169
- height: 18px;
170
- }
171
338
 
172
339
  /* vanilla-extract-css-ns:src/components/icon-button/icon-button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA81X227bMAx971cIfWqAqrNzaVMX2Ms-YygG2aZjrY7kibLbbNi_D5YTR5KTVF2DrY82ec6hSJGSbr7FT4sG9CIivy4IKYGvSp2Q2bR-ebj4fXGzN38m2K6M0zPPdZmQadT57DH9t4WJHcr52DymnHuUcw8zdSgXtyPz2ylnDuW9TzkbU_bJOZGsuUMZz3zO-Zhz7iVzlK2F8a4lcs2lSIiCimneQgfKOdYV2ySEi4oLoEUFhoxVfCUo17DGhGQgNKju9_cGNS82NJNCg9C2qUNSLBUXTwmJuj-pVDmohAgpjFbKsqeVko3IE6IVE1gzBULvXaliOW8wIS1TV5Suc4obpFiyGmjRVNWkc80ahVIlpJZ8J90gKIpQQab3apmsOje1Sq8cOvOfSkGxUQXLgLZMcSb0xLCbuEyeaK1kDUpvEpLKbmUsl8_X1iJ6puteyMPmjWJ9sh3ttXSsFEup9NwX1nzNxYoWjciOcwDDzgk1EzlT-cSteJKkUEgFpvJDsS4vH5yNwFKUVaNNurhA0E7hhmpwUYLi2i9h1qiufF92y5c1y3iXrqhXMeWh0ILQuC_Lfp3JDhGQo-nkb5JQyhaUk4ohRneHaaaBGm-fopBZg7TlyNMKgqkMyqP6mjPNaK0AEfLHYKotwI-LZV0Hv5OlDynnyNIK8sftmDhUN0d7Bwj091QOxxwd0QjzdqrUuza6m2cJmdUvBGXF82OTACGT3e7Z9ANgC6SyKExD-AP6dttSbx8uNombw1C2CflEopvZ0iM7VMb3Ud4ZDrvZjxDViq-H1L2qaXnbYm4yAlT98ONpmP7pNR9K4_8KZhmqPuxecyQzLkAFFuMI0g7iYxRm-ZEKc9-rb2828WvDZTtNQktycmjcv3toDCf727AmcXYgZxo4ZwrnybmzL715XY2v35Z1Pb5IW1ZxEitPYmvbuvCxPxysH7NysP4TAG3rnc-sbeut_2JpbOvowdLa1niUymfHHPncL4559HLZOOalj_4ZsIsOnx9xFDwst_01DDxa8lUJqEP684h4_E_EXx0O8TQ0Di5aUAhDTwWo7yBWJx5oX-dJ54R2rnMkVO-8B8Yp1T-XMR-gBBEAAA */
173
340
  ._1k5uet50 {
@@ -1597,7 +1764,7 @@ button:disabled ._1140318,
1597
1764
  height: 24px;
1598
1765
  }
1599
1766
 
1600
- /* vanilla-extract-css-ns:src/components/slider/slider.css.ts.vanilla.css?source=#H4sIAAAAAAAAA-1W227bMAx9z1cIAwokwNQ5abIF6o8MGPJA27QsVJYMic5lQ_99kGwncZY2btG-7cWwBR5Sh5dD38uV1_N1wv5MGKutV6SsEcyhBlJbfJwwlitfazgIVmjchwPQShquCCsvWIaG0IXjxqPjHjVmJJixJoJ3KqdSsHmS3IVPsk1WcsjaKK3R8-S-vcT8Ay5xEa9EJUsSbJnU-7NIi1civeShjmFT63J03EGuGi_YFtyU8yrn_uC5L6FGXjRaz6IpZE_S2cbkgjmZTge2mdXWcd-4AjLkmTUEyqDjpZIleprNzm6b_MqBgOfKQ6ox37ABixFhrOkjzdg3ltzPF-fuHy6SAam3uiH8dPa1UxW4wyiuD-_l-rA-d7-8XfhF0nLtqfffn8adMduQVgb_GYilECkW1mG8dWgSNCTYly-PLxZMY0GCrfppq4_vHbvlBbvldXYd6M1EasgUHQRLYngHxhfWVaJ91UA45avk7isLz9nRpuPRocPoVX6Y4MoGE47glZHcE5gcXD6orCjtFt0gY8frDItFQMij9dBBYbPG863yKtU42lFEDRx1LexASmXkZrSniMB8zDgsP2YcVtFNYQ3xAiqlL-9Fhxp9Bhq5hhQ11-BkYGwoFi8Cd10njQC2pieoV79xFDAYRlgYE16Oj3hm3-KRKGypUAUjR7kgB9mTMjLiY1JHJJtvwSkwNDuR7U64aSp0KhOMIG00uHDgz2ryvZMoFVYaxy0a8qd9en3qlfFIceqObn68ouq9FlxIwWfo3Espua0NJybtDISfhi1u3tD4vTRdafz1O5KcWiJbnf4MBlJbgZPK8N5m3ebyGsuf06P43U417skB9xV0Ga8hz2PjLup9H-StIn2zhwfW_8VhtDiMGXPGdqUijEHiwt85qC9X56lN29bvVtJmuEHmj5Pnv2bsOG6_CwAA */
1767
+ /* vanilla-extract-css-ns:src/components/slider/slider.css.ts.vanilla.css?source=#H4sIAAAAAAAAA-1W227bMAx9z1cIAwokWNUlbdoG6o8MGPrA2LQjVJYMik6TDf33QZKTOGnSupcNGLAXJ5bIQ_ocUtRFee3NZDYWvwZC1M5r1s4qQWiA9RLvBkLk2tcG1koUBldhAYwurdSMlVciQ8tIYbnxSNKjwYyVsM5G50ed80KJyXh8Fl7ZNdlCQpaiJKOnwUVKYvIJSRzEW6AuF6zEdFqvOpEuX4h0AmFys4-g1BwLRxiRMmcZLSvx5cvdHjDMvTMNY_r2Wolx-Dd3zK5qX7T1yFJboy1KtPmxZc9ArEQGJhsugYZSVlfSG50jBZdzMT4bia9iVq9GER-yh5JcE8ConG9ccunXXmbOuKBT5mwOtJYhd9AWaZR8HQXUGLF9EuS68Upc1quOBdr8xf20F6w2-3tp-AXUKIvGmNEBaD-XrhJQMNLnCtEyfkKhKESoECHFoR7R8y8p0pPRNzs91-659s92t4qMf-TAIHPtYW4wvxdHe6YHJc5K31ABGY7ENzG-mFyO-oXZFcSHo1z1halJV0Drf1szAlvilsn22z94IrwqWG-KD5W6mnWVmr5-qE9TvvtTYZt_L7LfWAiu4XBs7AYiE9iUoazJ1Ui8Vim9g13WlbalLBrbTsu9UJWLRgg-GPma0g-wBiML8Dw6gMsbgtM4m90TSDuOVeGyxsul9npuUiO33O5rPW21JihLbcv705anqmL6OVVxHWEKZ1kWUGmzPiCA1zX6DAxKA3M00gCVKIN9ZDA6Prb10sMxme5cvf6JvRyDYXSLU2bRP2LHPvkjc2jXGjJty14QTJA9aFtG_0hqD7LlEkiD5dHuY9sVaZsKSWdKMMwbAxQWfEeTm7ZTdbi1SVyiZb_rkONDOw7hOJC3MLcHDd81P9Hwf7zfY8cVjiqV_hpgHMrr8dm5CM9uZd6mwg-X4SXe9632E9eEV9vp9h3t1MWdvUOzzfVqc5c2WLAS1-mlAiq1lVubdpYcI_D7sOWuj3S4YgLpK2gVrCHPYyNc1qtwH-upqrZLJI9dLl7rjY3LPoP_D583HD59jhEhHheaMQaJg_WRoI6zNkQN47R7SMxSP7QDK7XZ1nByN3j6DUpU8ncCDwAA */
1601
1768
  .g5sl180 {
1602
1769
  position: relative;
1603
1770
  display: flex;
@@ -1611,56 +1778,75 @@ button:disabled ._1140318,
1611
1778
  display: flex;
1612
1779
  align-items: center;
1613
1780
  width: 100%;
1614
- height: 40px;
1781
+ height: 44px;
1615
1782
  }
1616
1783
  .g5sl182 {
1617
1784
  position: relative;
1618
1785
  width: 100%;
1619
- height: 4px;
1620
- border-radius: var(--md-sys-shape-full);
1621
- background: rgb(var(--md-sys-color-surface-container-highest));
1786
+ height: 16px;
1787
+ }
1788
+ .g5sl182::before {
1789
+ content: "";
1790
+ position: absolute;
1791
+ top: 0;
1792
+ bottom: 0;
1793
+ inset-inline-end: 0;
1794
+ inset-inline-start: calc(var(--m3-slider-end, 0%) + 8px);
1795
+ background: rgb(var(--md-sys-color-secondary-container));
1796
+ border-start-start-radius: 2px;
1797
+ border-end-start-radius: 2px;
1798
+ border-start-end-radius: var(--md-sys-shape-full);
1799
+ border-end-end-radius: var(--md-sys-shape-full);
1800
+ }
1801
+ .g5sl182::after {
1802
+ content: "";
1803
+ position: absolute;
1804
+ top: 0;
1805
+ bottom: 0;
1806
+ inset-inline-start: 0;
1807
+ inset-inline-end: calc(100% - var(--m3-slider-start, 0%) + 8px);
1808
+ background: rgb(var(--md-sys-color-secondary-container));
1809
+ border-start-start-radius: var(--md-sys-shape-full);
1810
+ border-end-start-radius: var(--md-sys-shape-full);
1811
+ border-start-end-radius: 2px;
1812
+ border-end-end-radius: 2px;
1622
1813
  }
1623
- .g5sl180[data-disabled] .g5sl182 {
1814
+ .g5sl180[data-disabled] .g5sl182::before {
1815
+ background: rgb(var(--md-sys-color-on-surface) / 0.12);
1816
+ }
1817
+ .g5sl180[data-disabled] .g5sl182::after {
1624
1818
  background: rgb(var(--md-sys-color-on-surface) / 0.12);
1625
1819
  }
1626
1820
  .g5sl183 {
1627
- position: absolute;
1628
- height: 4px;
1629
- border-radius: var(--md-sys-shape-full);
1630
1821
  background: rgb(var(--md-sys-color-primary));
1822
+ border-start-start-radius: var(--md-sys-shape-full);
1823
+ border-end-start-radius: var(--md-sys-shape-full);
1824
+ border-start-end-radius: 2px;
1825
+ border-end-end-radius: 2px;
1826
+ }
1827
+ .g5sl180[data-range] .g5sl183 {
1828
+ border-start-start-radius: 2px;
1829
+ border-end-start-radius: 2px;
1631
1830
  }
1632
1831
  .g5sl180[data-disabled] .g5sl183 {
1633
1832
  background: rgb(var(--md-sys-color-on-surface) / 0.38);
1634
1833
  }
1635
1834
  .g5sl184 {
1636
1835
  position: relative;
1637
- width: 20px;
1638
- height: 20px;
1836
+ width: 4px;
1837
+ height: 44px;
1639
1838
  border-radius: var(--md-sys-shape-full);
1640
1839
  background: rgb(var(--md-sys-color-primary));
1641
1840
  outline: none;
1841
+ transition-property: width;
1842
+ transition-timing-function: var(--md-sys-motion-easing-spring-spatial-fast);
1843
+ transition-duration: var(--md-sys-motion-duration-spring-spatial-fast);
1642
1844
  }
1643
- .g5sl184::before {
1644
- content: "";
1645
- position: absolute;
1646
- left: 50%;
1647
- top: 50%;
1648
- width: 40px;
1649
- height: 40px;
1650
- border-radius: 50%;
1651
- background: rgb(var(--md-sys-color-primary));
1652
- opacity: 0;
1653
- transform: translate(-50%, -50%);
1654
- transition: opacity 100ms var(--md-sys-motion-easing-standard);
1655
- }
1656
- .g5sl184:hover::before {
1657
- opacity: var(--md-sys-state-hover);
1658
- }
1659
- .g5sl184:focus-visible::before {
1660
- opacity: var(--md-sys-state-focus);
1845
+ .g5sl184:focus-visible {
1846
+ width: 2px;
1661
1847
  }
1662
- .g5sl184[data-dragging]::before {
1663
- opacity: var(--md-sys-state-dragged);
1848
+ .g5sl184[data-dragging] {
1849
+ width: 2px;
1664
1850
  }
1665
1851
  .g5sl180[data-disabled] .g5sl184 {
1666
1852
  background: rgb(var(--md-sys-color-on-surface) / 0.38);
@@ -1684,23 +1870,26 @@ button:disabled ._1140318,
1684
1870
  width: 4px;
1685
1871
  height: 4px;
1686
1872
  border-radius: var(--md-sys-shape-full);
1687
- background: rgb(var(--md-sys-color-on-surface-variant));
1873
+ background: rgb(var(--md-sys-color-primary));
1688
1874
  transform: translate(-50%, -50%);
1689
1875
  }
1690
1876
  .g5sl187[data-active] {
1691
- background: rgb(var(--md-sys-color-on-primary) / 0.38);
1877
+ background: rgb(var(--md-sys-color-secondary-container));
1878
+ }
1879
+ .g5sl180[data-disabled] .g5sl187 {
1880
+ background: rgb(var(--md-sys-color-on-surface));
1692
1881
  }
1693
1882
  .g5sl188 {
1694
1883
  pointer-events: none;
1695
1884
  position: absolute;
1696
1885
  bottom: 100%;
1697
1886
  left: 50%;
1698
- margin-bottom: 8px;
1887
+ margin-bottom: 12px;
1699
1888
  transform: translateX(-50%);
1700
1889
  border-radius: var(--md-sys-shape-extra-small);
1701
1890
  padding: 2px 8px;
1702
- background: rgb(var(--md-sys-color-primary));
1703
- color: rgb(var(--md-sys-color-on-primary));
1891
+ background: rgb(var(--md-sys-color-inverse-surface));
1892
+ color: rgb(var(--md-sys-color-inverse-on-surface));
1704
1893
  font-family: var(--md-sys-typescale-label-large-font);
1705
1894
  font-weight: var(--md-sys-typescale-label-large-weight);
1706
1895
  font-size: var(--md-sys-typescale-label-large-size);
@@ -1714,7 +1903,7 @@ button:disabled ._1140318,
1714
1903
  opacity: 1;
1715
1904
  }
1716
1905
 
1717
- /* vanilla-extract-css-ns:src/components/select/select.css.ts.vanilla.css?source=#H4sIAAAAAAAAA-1a227jNhB9z1cQCywQA8tUduLElYG-9CuKYlFQ4kjihiJVkrLjFPvvBUnZ1jWWvEmwwfopjsUZjuYczhySvvln_u9jvgxkgP67QqiQmhkmRYgUcGLYBtZXCFGmC052IWKCMwE44fBkvyecpQIzA7kOUQzCgLJffyu1YckOx1IYECZEuiAx4AjMFkDYESkpQrQqnJNIPmHNnplIQxRJRUHhSLonGbA0MyFa3vuRORN4y6jJQrQIAv9dQShlIsU-shDN7_denSdFKCt1iDZEXWOcU6x3GuuMFIDhySiCdU44nx0tQjQvnpCWnFGk0ui6YRhLLhWWpbFzzbwViR9TJUtBQ2QUEbogCoSxj9zocNCLwLpUCYkrRwaeDHYJDRGHxHsolbYuCsn2ua0mD5GQwmGTSGFwQnLGd63XNLsCdEw44EjSHeZEpYDt8NnBbltl-LSdH3m01OwZxtjZcc7KEScbPV9tuDcHY0BhyyTHlNMejCLxIxOpz66FpmJ2RQ0HA5ovg1w3veXSjsNAtCWWNkRQouhsffX96uawWv6mxBBcyKIssCxAfP2Cjg_DRMalxhumWcTBLaw9u25PsatQLCdq50nRYfedZXc3Dso0iTjQr7W58Gj-od9QcDNfzCaR1hndrnyYnp8YNiCM3nOzFubcxWXLRojmjsYbUAmX2xBljFJfFNwKOD4AzlmhmbaPthkz4MB3zN8qUjT8L5z_Q5na16exL4M3RDEizKzDFfc5kSp_PaKgVtSHKUKkpCEGruergELa6-cIdMvLGbjVvN-2ir82LH7c2WQ8YyboAbZOhsd2gOOjfQlY3PlCva9xFBJSctOuqQMvtAfOTkCYADWbxN4W4LIIUdBIyN0vnZBIGiPzdk5u0R9Ib1KXmUMbLhqd2v_fyON0m2X_YrZ_MWUKYg9JLHmZH9XEXVcjzNue78donF4ktVFg4uww23xR9EqUaup5EHx-WZ0MaZ6LnvhV9MSXPTvObS33fb1f2hcyu9AV-VG9-cHb9TTk6sWMLLBl0HQx7UyVzfkk2zOqHc5YmoE-1K9qSfkydlrR99bBeo7CMIJEKqh6bVXEP31aN-oJibTkpXHriAkNxpXQzmaEiQwU61T2uFR2qf9pQ1o3oBzGscnEyqKXSrRUxH3QmVRmMZvOt4cwsyxppOIQYxNXK2OwG91y0aJsv6-gb9q6svXAjhe4vUE4jQ60LtwfumKtO2tV4m8b-8xREdWkfTccJjaEM9o348teQSmpWj5XrTVd7UTeb2Ncj6WL35nArQaBW70E3KtvulbDiE2H6vcXNMlBawbr5vZprOysqaFg3c-IWijkLXZpU3XLRX-c1h81zCJPn4qybifjtWltDG1RrN6mbGOvyOGMl1641jal7iMnBv66xsvg86zxGEvFUlaTmENt6ryNyIUMU8Uo4fwH9eS-vKIWf87pbfetSjnJZV-1HIzRSwhH4WqP1U_hYBqvXBc8g1febjqvvN10Xnm7H-GV99BfZPZZZ5xfkv7OSe89Obwk_u0TnxGNC05iyCSnoC7Zf99a06nwyTHrQfcg9oRgGX-m0L8HqE4XL1i-St-4QPlRoeztRhc4Pyqcwz3ugumHwzTtvzcbOBr6Ce7GX6op6YS78bTnkvGudcnYPsPLmsk684dNx0fudlJnionHasWck-BGgNNfivUzYOTvsfaXk0OXlm98hHNZxO7ye-jEhJ15YvLN2TUPgr__D9GFGDv2JwAA */
1906
+ /* vanilla-extract-css-ns:src/components/select/select.css.ts.vanilla.css?source=#H4sIAAAAAAAAA-1aUW-jOBB-76-wVlqpkdY9SJNcz5Hu5X7F6bQ6GTwBX43N2SZpetr_frIhCRBIIdtWWy1PQdgzHma-mfls5-7v8N_HbBmoAP13g1CuDLdcSYI0CGr5FtY3CDFuckH3BHEpuAS8EfDk3lPBE4m5hcwQFIO0oN3rfwpj-WaPYyUtSEuQyWkMOAK7A5BuRkJzgh5yryRST9jwZy4TgiKlGWgcKT-SAk9SS9ByVc7MuMQ7zmxK0DwIync5ZYzLBJeWERSuDlq9Jk0ZLwxBW6pvMc4YNnuDTUpzwPBkNcUmo0LMThIEhfkTMkpwhnQS3TYEYyWUxqqwbq1ZKUXjx0SrQjKCrKbS5FSDtG7Izya9WiQ2hd7QuFJk4cli71CCBGxKDYU2TkWu-MG31eIESSV9bDZKWryhGRf71mfafQ4mpgJwpNgeC6oTwG767Ci3qzz8slw58yRp-DMMkXPzvJQHTjp4vdr0UhysBY0dkjxSXtZgNY0fuUxK77rQVMiuoOHDgMJlkJmmtky5eRioccAylkpGNZutb77d3B2z5S9GLcW5yoscqxzk1y_oNEg2Ki4M3nLDIwE-sQ7oun8JXbnmGdX7EhRn6F44dJ_bwbihkQD2tbYWHow_9AsK7sL5bBRovdD9Q2lmiU8MW5DWHLBZMzP0drmyQVDoYbwFvRFqR1DKGSuLgs-A0wAIwXPDjRvapdyCD75H_k7TvKF_7vUfy9ShPg39GLylmlNpZ2dY8c8bpbPXAwpqWX1cgiCtLLVwGz4EDJJOPadAt7RcEbea9vtu_7lfzLiGuPRGrESRnQr44rwsh0ELoIshbaWznxirwcbpcbVwnnd2hWrpMAg-X24IfW1mKuE_Swn_ckDHtdm86Cq3yn2Q3ROfV4PK4bKU66iB1YdZlWOHoPH8xYtq5_NRsrUU6AH7oVQ6Uke5BI1TnqRgqqJ5TClrVTaERHUW37qPCIlgozRU5a2ikp8-rRv1hEZGicL6POLSgCUo6OB_XKaguW1_a1xol-p_OJPWjVD2x7GJxEqiE0qs0NQ_mFRpO5-Nx9uSpA4lDVccbWzG1XUO7Ge3VLQg260r6Fq2TibKwA7nFJ1GeFoErM6Vluf98XzVqsTfN6j9IItqbOrcHC63VHDWteJlraC10i2dq1ZOV-Tv_fYidVvO43dl4Fa9gVtdCtyr89xVf8TGh-rXC5zkGXPJHE0N1k3GepmsnDa_NTYUrLsRUTPl4S2I8VjeMvGPl_lHLWa_lfCpIGvVkZvW5kQtiNXblGvsFTi88LIkrrV9gH8U1MKft3gZfJ41hrHSPOE1itnXpq7b_UxgGEtGqRDfyScP5RW18HNNb1u0KuUolV3VstfGuNy-OghXe6xuCAfjcOW74BW4KuXG46qUG4-rUu57cFVq6C4yB69zISanv7PTOw9rJse_veNTanAuaAypEgz05P33rTVnFZ6dvB40yHE4gLAMP1Po3gNUp4tTLF-lb0yh_Kih7OxGUzg_ajj7e9wU0w8XU-i-N-s5GvoBriMv1RQYcR0J6HdktomXONz9LZr3c_P2Gd6m6awr_0tyGvK3kybVXD5WGXONgxsGjv-opBsBA_8Cc7ic7Lu0fOMjnCmJ_eV334lJcuWJSerlmgfB3_4HnHzAMWklAAA */
1718
1907
  ._1qkm50o0 {
1719
1908
  position: relative;
1720
1909
  display: inline-flex;
@@ -1767,44 +1956,12 @@ button:disabled ._1140318,
1767
1956
  color: rgb(var(--md-sys-color-on-surface) / 0.38);
1768
1957
  }
1769
1958
  ._1qkm50o3 {
1770
- position: sticky;
1771
- z-index: 1;
1772
- display: flex;
1773
- align-items: center;
1774
- justify-content: center;
1775
- height: 24px;
1776
- cursor: default;
1777
- background: rgb(var(--md-sys-color-surface-container));
1778
- color: rgb(var(--md-sys-color-on-surface-variant));
1779
- top: 0;
1780
- }
1781
- ._1qkm50o4 {
1782
- position: sticky;
1783
- z-index: 1;
1784
- display: flex;
1785
- align-items: center;
1786
- justify-content: center;
1787
- height: 24px;
1788
- cursor: default;
1789
- background: rgb(var(--md-sys-color-surface-container));
1790
- color: rgb(var(--md-sys-color-on-surface-variant));
1791
- bottom: 0;
1792
- }
1793
- ._1qkm50o3 > svg {
1794
- width: 20px;
1795
- height: 20px;
1796
- }
1797
- ._1qkm50o4 > svg {
1798
- width: 20px;
1799
- height: 20px;
1800
- }
1801
- ._1qkm50o5 {
1802
1959
  display: flex;
1803
1960
  flex-direction: column;
1804
1961
  gap: 4px;
1805
1962
  min-width: 210px;
1806
1963
  }
1807
- ._1qkm50o6 {
1964
+ ._1qkm50o4 {
1808
1965
  position: relative;
1809
1966
  display: flex;
1810
1967
  align-items: stretch;
@@ -1825,18 +1982,18 @@ button:disabled ._1140318,
1825
1982
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
1826
1983
  transition: border-color 150ms var(--md-sys-motion-easing-standard), padding 150ms var(--md-sys-motion-easing-standard);
1827
1984
  }
1828
- ._1qkm50o6[data-disabled] {
1985
+ ._1qkm50o4[data-disabled] {
1829
1986
  opacity: 0.38;
1830
1987
  pointer-events: none;
1831
1988
  }
1832
- ._1qkm50o7 {
1989
+ ._1qkm50o5 {
1833
1990
  overflow: hidden;
1834
1991
  border-top-left-radius: var(--md-sys-shape-extra-small);
1835
1992
  border-top-right-radius: var(--md-sys-shape-extra-small);
1836
1993
  background: rgb(var(--md-sys-color-surface-container-highest));
1837
1994
  border-bottom: 1px solid rgb(var(--md-sys-color-on-surface-variant));
1838
1995
  }
1839
- ._1qkm50o7::before {
1996
+ ._1qkm50o5::before {
1840
1997
  content: "";
1841
1998
  position: absolute;
1842
1999
  inset: 0;
@@ -1846,40 +2003,40 @@ button:disabled ._1140318,
1846
2003
  pointer-events: none;
1847
2004
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
1848
2005
  }
1849
- ._1qkm50o7:hover::before {
2006
+ ._1qkm50o5:hover::before {
1850
2007
  opacity: var(--md-sys-state-hover);
1851
2008
  }
1852
- ._1qkm50o7[data-disabled]::before {
2009
+ ._1qkm50o5[data-disabled]::before {
1853
2010
  opacity: 0;
1854
2011
  }
1855
- ._1qkm50o7:hover {
2012
+ ._1qkm50o5:hover {
1856
2013
  border-bottom-color: rgb(var(--md-sys-color-on-surface));
1857
2014
  }
1858
- ._1qkm50o7[data-focused],
1859
- ._1qkm50o7[data-popup-open] {
2015
+ ._1qkm50o5[data-focused],
2016
+ ._1qkm50o5[data-popup-open] {
1860
2017
  border-bottom-width: 3px;
1861
2018
  border-bottom-color: rgb(var(--md-sys-color-primary));
1862
2019
  }
1863
- ._1qkm50o7[data-invalid] {
2020
+ ._1qkm50o5[data-invalid] {
1864
2021
  border-bottom-color: rgb(var(--md-sys-color-error));
1865
2022
  }
1866
- ._1qkm50o8 {
2023
+ ._1qkm50o6 {
1867
2024
  overflow: visible;
1868
2025
  border-radius: var(--md-sys-shape-extra-small);
1869
2026
  border: 1px solid rgb(var(--md-sys-color-outline));
1870
2027
  }
1871
- ._1qkm50o8:hover {
2028
+ ._1qkm50o6:hover {
1872
2029
  border-color: rgb(var(--md-sys-color-on-surface));
1873
2030
  }
1874
- ._1qkm50o8[data-focused],
1875
- ._1qkm50o8[data-popup-open] {
2031
+ ._1qkm50o6[data-focused],
2032
+ ._1qkm50o6[data-popup-open] {
1876
2033
  border: 3px solid rgb(var(--md-sys-color-primary));
1877
2034
  padding-inline: 14px;
1878
2035
  }
1879
- ._1qkm50o8[data-invalid] {
2036
+ ._1qkm50o6[data-invalid] {
1880
2037
  border-color: rgb(var(--md-sys-color-error));
1881
2038
  }
1882
- ._1qkm50o9 {
2039
+ ._1qkm50o7 {
1883
2040
  position: relative;
1884
2041
  z-index: 0;
1885
2042
  flex: 1;
@@ -1888,7 +2045,7 @@ button:disabled ._1140318,
1888
2045
  min-width: 0;
1889
2046
  overflow: visible;
1890
2047
  }
1891
- ._1qkm50oa {
2048
+ ._1qkm50o8 {
1892
2049
  flex: 1;
1893
2050
  overflow: hidden;
1894
2051
  text-overflow: ellipsis;
@@ -1900,10 +2057,10 @@ button:disabled ._1140318,
1900
2057
  line-height: var(--md-sys-typescale-body-large-line-height);
1901
2058
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
1902
2059
  }
1903
- ._1qkm50ob {
2060
+ ._1qkm50o9 {
1904
2061
  padding-top: 12px;
1905
2062
  }
1906
- ._1qkm50od {
2063
+ ._1qkm50ob {
1907
2064
  position: absolute;
1908
2065
  left: 0;
1909
2066
  top: 50%;
@@ -1918,13 +2075,13 @@ button:disabled ._1140318,
1918
2075
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
1919
2076
  transition: all 150ms var(--md-sys-motion-easing-standard);
1920
2077
  }
1921
- ._1qkm50o6[data-focused] ._1qkm50od {
2078
+ ._1qkm50o4[data-focused] ._1qkm50ob {
1922
2079
  color: rgb(var(--md-sys-color-primary));
1923
2080
  }
1924
- ._1qkm50o6[data-invalid] ._1qkm50od {
2081
+ ._1qkm50o4[data-invalid] ._1qkm50ob {
1925
2082
  color: rgb(var(--md-sys-color-error));
1926
2083
  }
1927
- ._1qkm50o6[data-focused] ._1qkm50oe {
2084
+ ._1qkm50o4[data-focused] ._1qkm50oc {
1928
2085
  top: 6px;
1929
2086
  transform: translateY(0);
1930
2087
  font-family: var(--md-sys-typescale-body-small-font);
@@ -1933,7 +2090,7 @@ button:disabled ._1140318,
1933
2090
  line-height: var(--md-sys-typescale-body-small-line-height);
1934
2091
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
1935
2092
  }
1936
- ._1qkm50o6[data-filled] ._1qkm50oe {
2093
+ ._1qkm50o4[data-filled] ._1qkm50oc {
1937
2094
  top: 6px;
1938
2095
  transform: translateY(0);
1939
2096
  font-family: var(--md-sys-typescale-body-small-font);
@@ -1942,7 +2099,7 @@ button:disabled ._1140318,
1942
2099
  line-height: var(--md-sys-typescale-body-small-line-height);
1943
2100
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
1944
2101
  }
1945
- ._1qkm50o6[data-popup-open] ._1qkm50oe {
2102
+ ._1qkm50o4[data-popup-open] ._1qkm50oc {
1946
2103
  top: 6px;
1947
2104
  transform: translateY(0);
1948
2105
  font-family: var(--md-sys-typescale-body-small-font);
@@ -1951,7 +2108,7 @@ button:disabled ._1140318,
1951
2108
  line-height: var(--md-sys-typescale-body-small-line-height);
1952
2109
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
1953
2110
  }
1954
- ._1qkm50o6[data-has-placeholder] ._1qkm50oe {
2111
+ ._1qkm50o4[data-has-placeholder] ._1qkm50oc {
1955
2112
  top: 6px;
1956
2113
  transform: translateY(0);
1957
2114
  font-family: var(--md-sys-typescale-body-small-font);
@@ -1960,7 +2117,7 @@ button:disabled ._1140318,
1960
2117
  line-height: var(--md-sys-typescale-body-small-line-height);
1961
2118
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
1962
2119
  }
1963
- ._1qkm50o6[data-focused] ._1qkm50of {
2120
+ ._1qkm50o4[data-focused] ._1qkm50od {
1964
2121
  top: 0;
1965
2122
  z-index: 1;
1966
2123
  transform: translateY(-50%);
@@ -1972,7 +2129,7 @@ button:disabled ._1140318,
1972
2129
  line-height: var(--md-sys-typescale-body-small-line-height);
1973
2130
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
1974
2131
  }
1975
- ._1qkm50o6[data-filled] ._1qkm50of {
2132
+ ._1qkm50o4[data-filled] ._1qkm50od {
1976
2133
  top: 0;
1977
2134
  z-index: 1;
1978
2135
  transform: translateY(-50%);
@@ -1984,7 +2141,7 @@ button:disabled ._1140318,
1984
2141
  line-height: var(--md-sys-typescale-body-small-line-height);
1985
2142
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
1986
2143
  }
1987
- ._1qkm50o6[data-popup-open] ._1qkm50of {
2144
+ ._1qkm50o4[data-popup-open] ._1qkm50od {
1988
2145
  top: 0;
1989
2146
  z-index: 1;
1990
2147
  transform: translateY(-50%);
@@ -1996,7 +2153,7 @@ button:disabled ._1140318,
1996
2153
  line-height: var(--md-sys-typescale-body-small-line-height);
1997
2154
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
1998
2155
  }
1999
- ._1qkm50o6[data-has-placeholder] ._1qkm50of {
2156
+ ._1qkm50o4[data-has-placeholder] ._1qkm50od {
2000
2157
  top: 0;
2001
2158
  z-index: 1;
2002
2159
  transform: translateY(-50%);
@@ -2008,31 +2165,31 @@ button:disabled ._1140318,
2008
2165
  line-height: var(--md-sys-typescale-body-small-line-height);
2009
2166
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
2010
2167
  }
2011
- ._1qkm50og {
2168
+ ._1qkm50oe {
2012
2169
  display: flex;
2013
2170
  align-items: center;
2014
2171
  color: rgb(var(--md-sys-color-on-surface-variant));
2015
2172
  transition: transform 150ms var(--md-sys-motion-easing-standard);
2016
2173
  }
2017
- ._1qkm50o6[data-popup-open] ._1qkm50og {
2174
+ ._1qkm50o4[data-popup-open] ._1qkm50oe {
2018
2175
  transform: rotate(180deg);
2019
2176
  }
2020
- ._1qkm50og > svg {
2177
+ ._1qkm50oe > svg {
2021
2178
  width: 24px;
2022
2179
  height: 24px;
2023
2180
  }
2024
- ._1qkm50oh {
2181
+ ._1qkm50of {
2025
2182
  display: inline-flex;
2026
2183
  align-items: center;
2027
2184
  justify-content: center;
2028
2185
  flex-shrink: 0;
2029
2186
  color: rgb(var(--md-sys-color-on-surface-variant));
2030
2187
  }
2031
- ._1qkm50oh > svg {
2188
+ ._1qkm50of > svg {
2032
2189
  width: 24px;
2033
2190
  height: 24px;
2034
2191
  }
2035
- ._1qkm50oi {
2192
+ ._1qkm50og {
2036
2193
  display: flex;
2037
2194
  justify-content: space-between;
2038
2195
  gap: 16px;
@@ -2044,10 +2201,10 @@ button:disabled ._1140318,
2044
2201
  line-height: var(--md-sys-typescale-body-small-line-height);
2045
2202
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
2046
2203
  }
2047
- ._1qkm50o5[data-invalid] ._1qkm50oi {
2204
+ ._1qkm50o3[data-invalid] ._1qkm50og {
2048
2205
  color: rgb(var(--md-sys-color-error));
2049
2206
  }
2050
- ._1qkm50oj {
2207
+ ._1qkm50oh {
2051
2208
  min-width: 0;
2052
2209
  }
2053
2210
 
@@ -5190,7 +5347,7 @@ button:disabled ._1140318,
5190
5347
  color: rgb(var(--md-sys-color-on-primary-container));
5191
5348
  }
5192
5349
 
5193
- /* vanilla-extract-css-ns:src/components/carousel/carousel.css.ts.vanilla.css?source=LmlhbzM5ZTAgewogIGRpc3BsYXk6IGZsZXg7CiAgZ2FwOiA4cHg7CiAgb3ZlcmZsb3cteDogYXV0bzsKICBzY3JvbGwtc25hcC10eXBlOiB4IG1hbmRhdG9yeTsKICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDsKICBzY3JvbGxiYXItd2lkdGg6IG5vbmU7Cn0KLmlhbzM5ZTMgewogIGdhcDogMDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIG92ZXJmbG93LXg6IGhpZGRlbjsKICBvdmVyZmxvdy15OiBhdXRvOwogIHNjcm9sbC1zbmFwLXR5cGU6IHkgbWFuZGF0b3J5OwogIGhlaWdodDogMTAwJTsKfQouaWFvMzllNCB7CiAgc2Nyb2xsLXNuYXAtYWxpZ246IHN0YXJ0OwogIGZsZXgtc2hyaW5rOiAwOwogIG92ZXJmbG93OiBoaWRkZW47CiAgYm9yZGVyLXJhZGl1czogdmFyKC0tbWQtc3lzLXNoYXBlLWxhcmdlKTsKfQouaWFvMzllNSB7CiAgd2lkdGg6IDE2MHB4OwogIGhlaWdodDogMjI0cHg7Cn0KLmlhbzM5ZTYgewogIHdpZHRoOiAyODhweDsKICBoZWlnaHQ6IDIyNHB4OwogIHNjcm9sbC1zbmFwLWFsaWduOiBjZW50ZXI7Cn0KLmlhbzM5ZTcgewogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogMTAwJTsKICBzY3JvbGwtc25hcC1hbGlnbjogY2VudGVyOwp9ClthcmlhLXJvbGVkZXNjcmlwdGlvbj0iY2Fyb3VzZWwiXTo6LXdlYmtpdC1zY3JvbGxiYXIgewogIGRpc3BsYXk6IG5vbmU7Cn0 */
5350
+ /* vanilla-extract-css-ns:src/components/carousel/carousel.css.ts.vanilla.css?source=LmlhbzM5ZTAgewogIGRpc3BsYXk6IGZsZXg7CiAgZ2FwOiA4cHg7CiAgb3ZlcmZsb3cteDogYXV0bzsKICBzY3JvbGwtc25hcC10eXBlOiB4IG1hbmRhdG9yeTsKICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDsKICBzY3JvbGxiYXItd2lkdGg6IG5vbmU7CiAgb3V0bGluZTogbm9uZTsKfQouaWFvMzllMDpmb2N1cy12aXNpYmxlIHsKICBvdXRsaW5lOiAzcHggc29saWQgcmdiKHZhcigtLW1kLXN5cy1jb2xvci1zZWNvbmRhcnkpKTsKICBvdXRsaW5lLW9mZnNldDogMnB4Owp9Ci5pYW8zOWU0IHsKICBnYXA6IDA7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBvdmVyZmxvdy14OiBoaWRkZW47CiAgb3ZlcmZsb3cteTogYXV0bzsKICBzY3JvbGwtc25hcC10eXBlOiB5IG1hbmRhdG9yeTsKICBoZWlnaHQ6IDEwMCU7Cn0KLmlhbzM5ZTUgewogIHNjcm9sbC1zbmFwLWFsaWduOiBzdGFydDsKICBmbGV4LXNocmluazogMDsKICBvdmVyZmxvdzogaGlkZGVuOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLW1kLXN5cy1zaGFwZS1sYXJnZSk7Cn0KLmlhbzM5ZTYgewogIHdpZHRoOiAxNjBweDsKICBoZWlnaHQ6IDIyNHB4Owp9Ci5pYW8zOWU3IHsKICB3aWR0aDogMjI0cHg7CiAgaGVpZ2h0OiAyMjRweDsKfQouaWFvMzllOCB7CiAgd2lkdGg6IDI4OHB4OwogIGhlaWdodDogMjI0cHg7CiAgc2Nyb2xsLXNuYXAtYWxpZ246IGNlbnRlcjsKfQouaWFvMzllOSB7CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiAxMDAlOwogIHNjcm9sbC1zbmFwLWFsaWduOiBjZW50ZXI7Cn0KW2FyaWEtcm9sZWRlc2NyaXB0aW9uPSJjYXJvdXNlbCJdOjotd2Via2l0LXNjcm9sbGJhciB7CiAgZGlzcGxheTogbm9uZTsKfQpAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkgewogIC5pYW8zOWUwIHsKICAgIHNjcm9sbC1iZWhhdmlvcjogYXV0bzsKICB9Cn0 */
5194
5351
  .iao39e0 {
5195
5352
  display: flex;
5196
5353
  gap: 8px;
@@ -5198,8 +5355,13 @@ button:disabled ._1140318,
5198
5355
  scroll-snap-type: x mandatory;
5199
5356
  scroll-behavior: smooth;
5200
5357
  scrollbar-width: none;
5358
+ outline: none;
5359
+ }
5360
+ .iao39e0:focus-visible {
5361
+ outline: 3px solid rgb(var(--md-sys-color-secondary));
5362
+ outline-offset: 2px;
5201
5363
  }
5202
- .iao39e3 {
5364
+ .iao39e4 {
5203
5365
  gap: 0;
5204
5366
  flex-direction: column;
5205
5367
  overflow-x: hidden;
@@ -5207,22 +5369,26 @@ button:disabled ._1140318,
5207
5369
  scroll-snap-type: y mandatory;
5208
5370
  height: 100%;
5209
5371
  }
5210
- .iao39e4 {
5372
+ .iao39e5 {
5211
5373
  scroll-snap-align: start;
5212
5374
  flex-shrink: 0;
5213
5375
  overflow: hidden;
5214
5376
  border-radius: var(--md-sys-shape-large);
5215
5377
  }
5216
- .iao39e5 {
5378
+ .iao39e6 {
5217
5379
  width: 160px;
5218
5380
  height: 224px;
5219
5381
  }
5220
- .iao39e6 {
5382
+ .iao39e7 {
5383
+ width: 224px;
5384
+ height: 224px;
5385
+ }
5386
+ .iao39e8 {
5221
5387
  width: 288px;
5222
5388
  height: 224px;
5223
5389
  scroll-snap-align: center;
5224
5390
  }
5225
- .iao39e7 {
5391
+ .iao39e9 {
5226
5392
  width: 100%;
5227
5393
  height: 100%;
5228
5394
  scroll-snap-align: center;
@@ -5230,4 +5396,9 @@ button:disabled ._1140318,
5230
5396
  [aria-roledescription=carousel]::-webkit-scrollbar {
5231
5397
  display: none;
5232
5398
  }
5399
+ @media (prefers-reduced-motion: reduce) {
5400
+ .iao39e0 {
5401
+ scroll-behavior: auto;
5402
+ }
5403
+ }
5233
5404
  /*# sourceMappingURL=index.css.map */