@m3-baseui/react-vanilla-extract 3.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 (14) 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/slider/index.css +58 -36
  7. package/dist/components/slider/index.css.map +1 -1
  8. package/dist/components/slider/index.js.map +1 -1
  9. package/dist/index.css +299 -110
  10. package/dist/index.css.map +1 -1
  11. package/dist/index.d.ts +1 -1
  12. package/dist/index.js +5 -3
  13. package/dist/index.js.map +1 -1
  14. 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);