@fluentui/react-input 9.0.0-beta.6 → 9.0.0-beta.9

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 (8) hide show
  1. package/CHANGELOG.json +87 -4
  2. package/CHANGELOG.md +81 -49
  3. package/dist/{react-input.d.ts → index.d.ts} +0 -0
  4. package/lib/components/Input/useInputStyles.js +54 -69
  5. package/lib/components/Input/useInputStyles.js.map +1 -1
  6. package/lib-commonjs/components/Input/useInputStyles.js +53 -68
  7. package/lib-commonjs/components/Input/useInputStyles.js.map +1 -1
  8. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,7 +2,90 @@
2
2
  "name": "@fluentui/react-input",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 19 Apr 2022 19:14:35 GMT",
5
+ "date": "Thu, 05 May 2022 18:24:30 GMT",
6
+ "tag": "@fluentui/react-input_v9.0.0-beta.9",
7
+ "version": "9.0.0-beta.9",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "gcox@microsoft.com",
12
+ "package": "@fluentui/react-input",
13
+ "commit": "7ba7e55a61136859e16222c67f82dd1f67da9af0",
14
+ "comment": "Updated to use new theme tokens"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-input",
19
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
20
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-input",
25
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
26
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-input",
31
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
32
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
33
+ }
34
+ ]
35
+ }
36
+ },
37
+ {
38
+ "date": "Wed, 04 May 2022 13:26:43 GMT",
39
+ "tag": "@fluentui/react-input_v9.0.0-beta.8",
40
+ "version": "9.0.0-beta.8",
41
+ "comments": {
42
+ "prerelease": [
43
+ {
44
+ "author": "seanmonahan@microsoft.com",
45
+ "package": "@fluentui/react-input",
46
+ "commit": "45d7e18b8dd8f9d5a69b2d62c3b5c716268622f2",
47
+ "comment": "update content before/after stories; label usage in stories"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-input",
52
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
53
+ "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-input",
58
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
59
+ "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
60
+ }
61
+ ],
62
+ "none": [
63
+ {
64
+ "author": "tristan.watanabe@gmail.com",
65
+ "package": "@fluentui/react-input",
66
+ "commit": "88fa8f279506c3cfbcc2facff95ecb5b420a217a",
67
+ "comment": "react-input: Move to new common folder."
68
+ }
69
+ ]
70
+ }
71
+ },
72
+ {
73
+ "date": "Mon, 25 Apr 2022 09:32:18 GMT",
74
+ "tag": "@fluentui/react-input_v9.0.0-beta.7",
75
+ "version": "9.0.0-beta.7",
76
+ "comments": {
77
+ "prerelease": [
78
+ {
79
+ "author": "seanmonahan@microsoft.com",
80
+ "package": "@fluentui/react-input",
81
+ "commit": "8dfec41a7126d9d1514d46d6ef15e9316e6b8ee1",
82
+ "comment": "use ::after pseudo element in styles"
83
+ }
84
+ ]
85
+ }
86
+ },
87
+ {
88
+ "date": "Tue, 19 Apr 2022 19:17:25 GMT",
6
89
  "tag": "@fluentui/react-input_v9.0.0-beta.6",
7
90
  "version": "9.0.0-beta.6",
8
91
  "comments": {
@@ -41,19 +124,19 @@
41
124
  "author": "beachball",
42
125
  "package": "@fluentui/react-input",
43
126
  "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
44
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
127
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
45
128
  },
46
129
  {
47
130
  "author": "beachball",
48
131
  "package": "@fluentui/react-input",
49
132
  "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
50
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
133
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
51
134
  },
52
135
  {
53
136
  "author": "beachball",
54
137
  "package": "@fluentui/react-input",
55
138
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
56
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
139
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
57
140
  }
58
141
  ],
59
142
  "none": [
package/CHANGELOG.md CHANGED
@@ -1,12 +1,44 @@
1
1
  # Change Log - @fluentui/react-input
2
2
 
3
- This log was last generated on Tue, 19 Apr 2022 19:14:35 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 05 May 2022 18:24:30 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.9)
8
+
9
+ Thu, 05 May 2022 18:24:30 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.8..@fluentui/react-input_v9.0.0-beta.9)
11
+
12
+ ### Changes
13
+
14
+ - Updated to use new theme tokens ([PR #22836](https://github.com/microsoft/fluentui/pull/22836) by gcox@microsoft.com)
15
+ - Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
17
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
18
+
19
+ ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.8)
20
+
21
+ Wed, 04 May 2022 13:26:43 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.7..@fluentui/react-input_v9.0.0-beta.8)
23
+
24
+ ### Changes
25
+
26
+ - update content before/after stories; label usage in stories ([PR #22731](https://github.com/microsoft/fluentui/pull/22731) by seanmonahan@microsoft.com)
27
+ - Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
29
+
30
+ ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.7)
31
+
32
+ Mon, 25 Apr 2022 09:32:18 GMT
33
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.6..@fluentui/react-input_v9.0.0-beta.7)
34
+
35
+ ### Changes
36
+
37
+ - use ::after pseudo element in styles ([PR #22591](https://github.com/microsoft/fluentui/pull/22591) by seanmonahan@microsoft.com)
38
+
7
39
  ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.6)
8
40
 
9
- Tue, 19 Apr 2022 19:14:35 GMT
41
+ Tue, 19 Apr 2022 19:17:25 GMT
10
42
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.5..@fluentui/react-input_v9.0.0-beta.6)
11
43
 
12
44
  ### Changes
@@ -16,13 +48,13 @@ Tue, 19 Apr 2022 19:14:35 GMT
16
48
  - BREAKING CHANGE: Remove `inline` prop and use `display: inline-flex` by default ([PR #21935](https://github.com/microsoft/fluentui/pull/21935) by elcraig@microsoft.com)
17
49
  - chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
18
50
  - Add static classnames to Input ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
19
- - Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
20
- - Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
21
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
51
+ - Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
52
+ - Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
53
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
22
54
 
23
55
  ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.5)
24
56
 
25
- Fri, 04 Mar 2022 05:17:37 GMT
57
+ Fri, 04 Mar 2022 05:17:37 GMT
26
58
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.4..@fluentui/react-input_v9.0.0-beta.5)
27
59
 
28
60
  ### Changes
@@ -33,7 +65,7 @@ Fri, 04 Mar 2022 05:17:37 GMT
33
65
 
34
66
  ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.4)
35
67
 
36
- Tue, 01 Mar 2022 02:17:36 GMT
68
+ Tue, 01 Mar 2022 02:17:36 GMT
37
69
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.3..@fluentui/react-input_v9.0.0-beta.4)
38
70
 
39
71
  ### Changes
@@ -43,7 +75,7 @@ Tue, 01 Mar 2022 02:17:36 GMT
43
75
 
44
76
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.3)
45
77
 
46
- Fri, 18 Feb 2022 13:35:32 GMT
78
+ Fri, 18 Feb 2022 13:35:32 GMT
47
79
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.1..@fluentui/react-input_v9.0.0-beta.3)
48
80
 
49
81
  ### Changes
@@ -54,12 +86,12 @@ Fri, 18 Feb 2022 13:35:32 GMT
54
86
 
55
87
  ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.1)
56
88
 
57
- Thu, 10 Feb 2022 08:51:17 GMT
89
+ Thu, 10 Feb 2022 08:51:17 GMT
58
90
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v9.0.0-beta.1)
59
91
 
60
92
  ### Changes
61
93
 
62
- - BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
94
+ - BREAKING: Rename component hooks add the suffix \_unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
63
95
  - Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
64
96
  - Fix styling issues found in accessibility review ([PR #21205](https://github.com/microsoft/fluentui/pull/21205) by elcraig@microsoft.com)
65
97
  - Bump Fluent UI dependencies to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
@@ -73,7 +105,7 @@ Thu, 10 Feb 2022 08:51:17 GMT
73
105
 
74
106
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.0)
75
107
 
76
- Thu, 25 Nov 2021 08:34:17 GMT
108
+ Thu, 25 Nov 2021 08:34:17 GMT
77
109
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v9.0.0-beta.0)
78
110
 
79
111
  ### Changes
@@ -86,7 +118,7 @@ Thu, 25 Nov 2021 08:34:17 GMT
86
118
 
87
119
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.0)
88
120
 
89
- Fri, 12 Nov 2021 13:25:34 GMT
121
+ Fri, 12 Nov 2021 13:25:34 GMT
90
122
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v9.0.0-beta.0)
91
123
 
92
124
  ### Changes
@@ -99,7 +131,7 @@ Fri, 12 Nov 2021 13:25:34 GMT
99
131
 
100
132
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.0)
101
133
 
102
- Wed, 27 Oct 2021 12:14:24 GMT
134
+ Wed, 27 Oct 2021 12:14:24 GMT
103
135
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v9.0.0-beta.0)
104
136
 
105
137
  ### Changes
@@ -111,7 +143,7 @@ Wed, 27 Oct 2021 12:14:24 GMT
111
143
 
112
144
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.0)
113
145
 
114
- Wed, 06 Oct 2021 10:37:22 GMT
146
+ Wed, 06 Oct 2021 10:37:22 GMT
115
147
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-beta.0)
116
148
 
117
149
  ### Changes
@@ -123,7 +155,7 @@ Wed, 06 Oct 2021 10:37:22 GMT
123
155
 
124
156
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
125
157
 
126
- Tue, 05 Oct 2021 12:47:58 GMT
158
+ Tue, 05 Oct 2021 12:47:58 GMT
127
159
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
128
160
 
129
161
  ### Changes
@@ -134,7 +166,7 @@ Tue, 05 Oct 2021 12:47:58 GMT
134
166
 
135
167
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
136
168
 
137
- Tue, 05 Oct 2021 09:28:07 GMT
169
+ Tue, 05 Oct 2021 09:28:07 GMT
138
170
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
139
171
 
140
172
  ### Changes
@@ -146,7 +178,7 @@ Tue, 05 Oct 2021 09:28:07 GMT
146
178
 
147
179
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
148
180
 
149
- Fri, 01 Oct 2021 14:13:08 GMT
181
+ Fri, 01 Oct 2021 14:13:08 GMT
150
182
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
151
183
 
152
184
  ### Changes
@@ -158,7 +190,7 @@ Fri, 01 Oct 2021 14:13:08 GMT
158
190
 
159
191
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
160
192
 
161
- Wed, 29 Sep 2021 08:06:11 GMT
193
+ Wed, 29 Sep 2021 08:06:11 GMT
162
194
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
163
195
 
164
196
  ### Changes
@@ -169,7 +201,7 @@ Wed, 29 Sep 2021 08:06:11 GMT
169
201
 
170
202
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
171
203
 
172
- Mon, 27 Sep 2021 08:06:00 GMT
204
+ Mon, 27 Sep 2021 08:06:00 GMT
173
205
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
174
206
 
175
207
  ### Changes
@@ -181,7 +213,7 @@ Mon, 27 Sep 2021 08:06:00 GMT
181
213
 
182
214
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
183
215
 
184
- Fri, 24 Sep 2021 09:17:17 GMT
216
+ Fri, 24 Sep 2021 09:17:17 GMT
185
217
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
186
218
 
187
219
  ### Changes
@@ -193,7 +225,7 @@ Fri, 24 Sep 2021 09:17:17 GMT
193
225
 
194
226
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
195
227
 
196
- Thu, 23 Sep 2021 08:21:34 GMT
228
+ Thu, 23 Sep 2021 08:21:34 GMT
197
229
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
198
230
 
199
231
  ### Changes
@@ -205,7 +237,7 @@ Thu, 23 Sep 2021 08:21:34 GMT
205
237
 
206
238
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
207
239
 
208
- Wed, 22 Sep 2021 10:10:07 GMT
240
+ Wed, 22 Sep 2021 10:10:07 GMT
209
241
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
210
242
 
211
243
  ### Changes
@@ -217,7 +249,7 @@ Wed, 22 Sep 2021 10:10:07 GMT
217
249
 
218
250
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
219
251
 
220
- Tue, 21 Sep 2021 07:42:34 GMT
252
+ Tue, 21 Sep 2021 07:42:34 GMT
221
253
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
222
254
 
223
255
  ### Changes
@@ -228,7 +260,7 @@ Tue, 21 Sep 2021 07:42:34 GMT
228
260
 
229
261
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
230
262
 
231
- Mon, 20 Sep 2021 07:36:26 GMT
263
+ Mon, 20 Sep 2021 07:36:26 GMT
232
264
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
233
265
 
234
266
  ### Changes
@@ -237,7 +269,7 @@ Mon, 20 Sep 2021 07:36:26 GMT
237
269
 
238
270
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
239
271
 
240
- Fri, 17 Sep 2021 07:35:26 GMT
272
+ Fri, 17 Sep 2021 07:35:26 GMT
241
273
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
242
274
 
243
275
  ### Changes
@@ -246,7 +278,7 @@ Fri, 17 Sep 2021 07:35:26 GMT
246
278
 
247
279
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
248
280
 
249
- Thu, 16 Sep 2021 07:38:39 GMT
281
+ Thu, 16 Sep 2021 07:38:39 GMT
250
282
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
251
283
 
252
284
  ### Changes
@@ -255,7 +287,7 @@ Thu, 16 Sep 2021 07:38:39 GMT
255
287
 
256
288
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
257
289
 
258
- Tue, 14 Sep 2021 20:09:02 GMT
290
+ Tue, 14 Sep 2021 20:09:02 GMT
259
291
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
260
292
 
261
293
  ### Changes
@@ -264,7 +296,7 @@ Tue, 14 Sep 2021 20:09:02 GMT
264
296
 
265
297
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
266
298
 
267
- Fri, 10 Sep 2021 16:31:53 GMT
299
+ Fri, 10 Sep 2021 16:31:53 GMT
268
300
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
269
301
 
270
302
  ### Changes
@@ -273,7 +305,7 @@ Fri, 10 Sep 2021 16:31:53 GMT
273
305
 
274
306
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
275
307
 
276
- Fri, 10 Sep 2021 07:39:51 GMT
308
+ Fri, 10 Sep 2021 07:39:51 GMT
277
309
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
278
310
 
279
311
  ### Changes
@@ -282,7 +314,7 @@ Fri, 10 Sep 2021 07:39:51 GMT
282
314
 
283
315
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
284
316
 
285
- Mon, 06 Sep 2021 07:34:53 GMT
317
+ Mon, 06 Sep 2021 07:34:53 GMT
286
318
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
287
319
 
288
320
  ### Changes
@@ -291,7 +323,7 @@ Mon, 06 Sep 2021 07:34:53 GMT
291
323
 
292
324
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
293
325
 
294
- Thu, 02 Sep 2021 07:36:46 GMT
326
+ Thu, 02 Sep 2021 07:36:46 GMT
295
327
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
296
328
 
297
329
  ### Patches
@@ -300,7 +332,7 @@ Thu, 02 Sep 2021 07:36:46 GMT
300
332
 
301
333
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
302
334
 
303
- Wed, 01 Sep 2021 07:39:56 GMT
335
+ Wed, 01 Sep 2021 07:39:56 GMT
304
336
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
305
337
 
306
338
  ### Changes
@@ -309,7 +341,7 @@ Wed, 01 Sep 2021 07:39:56 GMT
309
341
 
310
342
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
311
343
 
312
- Tue, 31 Aug 2021 07:37:47 GMT
344
+ Tue, 31 Aug 2021 07:37:47 GMT
313
345
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
314
346
 
315
347
  ### Changes
@@ -318,7 +350,7 @@ Tue, 31 Aug 2021 07:37:47 GMT
318
350
 
319
351
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
320
352
 
321
- Thu, 19 Aug 2021 07:41:35 GMT
353
+ Thu, 19 Aug 2021 07:41:35 GMT
322
354
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
323
355
 
324
356
  ### Changes
@@ -327,7 +359,7 @@ Thu, 19 Aug 2021 07:41:35 GMT
327
359
 
328
360
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
329
361
 
330
- Fri, 13 Aug 2021 07:36:34 GMT
362
+ Fri, 13 Aug 2021 07:36:34 GMT
331
363
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
332
364
 
333
365
  ### Changes
@@ -336,7 +368,7 @@ Fri, 13 Aug 2021 07:36:34 GMT
336
368
 
337
369
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
338
370
 
339
- Fri, 06 Aug 2021 07:35:14 GMT
371
+ Fri, 06 Aug 2021 07:35:14 GMT
340
372
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
341
373
 
342
374
  ### Changes
@@ -345,7 +377,7 @@ Fri, 06 Aug 2021 07:35:14 GMT
345
377
 
346
378
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
347
379
 
348
- Tue, 03 Aug 2021 07:39:30 GMT
380
+ Tue, 03 Aug 2021 07:39:30 GMT
349
381
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
350
382
 
351
383
  ### Patches
@@ -360,7 +392,7 @@ Tue, 03 Aug 2021 07:39:30 GMT
360
392
 
361
393
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
362
394
 
363
- Mon, 02 Aug 2021 07:36:20 GMT
395
+ Mon, 02 Aug 2021 07:36:20 GMT
364
396
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
365
397
 
366
398
  ### Changes
@@ -369,7 +401,7 @@ Mon, 02 Aug 2021 07:36:20 GMT
369
401
 
370
402
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
371
403
 
372
- Mon, 26 Jul 2021 07:37:30 GMT
404
+ Mon, 26 Jul 2021 07:37:30 GMT
373
405
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
374
406
 
375
407
  ### Changes
@@ -378,7 +410,7 @@ Mon, 26 Jul 2021 07:37:30 GMT
378
410
 
379
411
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
380
412
 
381
- Fri, 23 Jul 2021 07:38:19 GMT
413
+ Fri, 23 Jul 2021 07:38:19 GMT
382
414
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
383
415
 
384
416
  ### Changes
@@ -387,7 +419,7 @@ Fri, 23 Jul 2021 07:38:19 GMT
387
419
 
388
420
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
389
421
 
390
- Thu, 22 Jul 2021 07:36:55 GMT
422
+ Thu, 22 Jul 2021 07:36:55 GMT
391
423
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
392
424
 
393
425
  ### Changes
@@ -396,7 +428,7 @@ Thu, 22 Jul 2021 07:36:55 GMT
396
428
 
397
429
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
398
430
 
399
- Thu, 15 Jul 2021 07:36:18 GMT
431
+ Thu, 15 Jul 2021 07:36:18 GMT
400
432
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
401
433
 
402
434
  ### Changes
@@ -405,7 +437,7 @@ Thu, 15 Jul 2021 07:36:18 GMT
405
437
 
406
438
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
407
439
 
408
- Tue, 13 Jul 2021 22:32:58 GMT
440
+ Tue, 13 Jul 2021 22:32:58 GMT
409
441
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
410
442
 
411
443
  ### Patches
@@ -414,7 +446,7 @@ Tue, 13 Jul 2021 22:32:58 GMT
414
446
 
415
447
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
416
448
 
417
- Tue, 13 Jul 2021 07:35:36 GMT
449
+ Tue, 13 Jul 2021 07:35:36 GMT
418
450
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
419
451
 
420
452
  ### Changes
@@ -423,7 +455,7 @@ Tue, 13 Jul 2021 07:35:36 GMT
423
455
 
424
456
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
425
457
 
426
- Fri, 09 Jul 2021 07:39:31 GMT
458
+ Fri, 09 Jul 2021 07:39:31 GMT
427
459
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
428
460
 
429
461
  ### Patches
@@ -438,7 +470,7 @@ Fri, 09 Jul 2021 07:39:31 GMT
438
470
 
439
471
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
440
472
 
441
- Fri, 02 Jul 2021 23:15:55 GMT
473
+ Fri, 02 Jul 2021 23:15:55 GMT
442
474
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
443
475
 
444
476
  ### Changes
@@ -447,7 +479,7 @@ Fri, 02 Jul 2021 23:15:55 GMT
447
479
 
448
480
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
449
481
 
450
- Fri, 02 Jul 2021 07:37:06 GMT
482
+ Fri, 02 Jul 2021 07:37:06 GMT
451
483
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
452
484
 
453
485
  ### Changes
@@ -456,7 +488,7 @@ Fri, 02 Jul 2021 07:37:06 GMT
456
488
 
457
489
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
458
490
 
459
- Wed, 30 Jun 2021 07:38:35 GMT
491
+ Wed, 30 Jun 2021 07:38:35 GMT
460
492
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
461
493
 
462
494
  ### Changes
@@ -465,7 +497,7 @@ Wed, 30 Jun 2021 07:38:35 GMT
465
497
 
466
498
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-alpha.0)
467
499
 
468
- Tue, 29 Jun 2021 07:33:32 GMT
500
+ Tue, 29 Jun 2021 07:33:32 GMT
469
501
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-alpha.0..@fluentui/react-input_v9.0.0-alpha.0)
470
502
 
471
503
  ### Changes
package/dist/{react-input.d.ts → index.d.ts} RENAMED
File without changes
package/lib/components/Input/useInputStyles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
- import { tokens } from '@fluentui/react-theme';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
3
  /**
4
4
  * @deprecated Use `inputClassNames.root` instead.
5
5
  */
@@ -12,32 +12,9 @@ export const inputClassNames = {
12
12
  contentAfter: 'fui-Input__contentAfter'
13
13
  }; // TODO(sharing) use theme values once available
14
14
 
15
- const horizontalSpacing = {
16
- xxs: '2px',
17
- xs: '4px',
18
- sNudge: '6px',
19
- s: '8px',
20
- mNudge: '10px',
21
- m: '12px'
22
- };
23
- const motionDurations = {
24
- ultraFast: '0.05s',
25
- normal: '0.2s'
26
- };
27
- const motionCurves = {
28
- accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
29
- decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)'
30
- };
31
15
  const contentSizes = {
32
- // TODO(sharing) shouldn't these be in the theme?
33
- body1: {
34
- fontSize: tokens.fontSizeBase300,
35
- lineHeight: tokens.lineHeightBase300
36
- },
37
- caption1: {
38
- fontSize: tokens.fontSizeBase200,
39
- lineHeight: tokens.lineHeightBase200
40
- },
16
+ // TODO: This 400 style is not in the typography styles.
17
+ // May need a design change
41
18
  400: {
42
19
  fontSize: tokens.fontSizeBase400,
43
20
  lineHeight: tokens.lineHeightBase400
@@ -55,8 +32,8 @@ const useRootStyles = /*#__PURE__*/__styles({
55
32
  "mc9l5x": "ftuwxu6",
56
33
  "Bt984gj": "f122n59",
57
34
  "Eh141a": "flvyvdh",
58
- "i8kkvl": "f16mnhsx",
59
- "Belr9w4": "fbi42co",
35
+ "i8kkvl": "f14mj54c",
36
+ "Belr9w4": "fiut8dr",
60
37
  "Bahqtrf": "fk6fouc",
61
38
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
62
39
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -66,28 +43,28 @@ const useRootStyles = /*#__PURE__*/__styles({
66
43
  "B7ck84d": "f1ewtqcl"
67
44
  },
68
45
  "interactive": {
69
- "oqd9ik": "ffdc0f3",
70
- "Bs6t6z0": "fqc6z8f",
71
- "Hdbjpj": "f11ef69",
72
- "jc51t6": ["f383sj6", "fpmdmpy"],
73
- "Bj55yzk": "fqmzrrm",
74
- "cnmfks": ["fpmdmpy", "f383sj6"],
75
- "mpb1vu": "f1iv82i4",
76
- "B9nohqn": ["f1j2a01o", "fvxed1z"],
77
- "frdscb": ["fvxed1z", "f1j2a01o"],
78
- "B3zxwmv": "f1gw3il9",
79
- "J4s2b0": "fd0py6g",
80
- "Bk8j60v": "f1ta67ae",
81
- "B5pt6m4": "fabrkco",
82
- "xn0juu": "f1lmmjng",
83
- "wbfbqe": "fopw4to",
84
- "mafdb0": "f1dw3w9y",
85
- "s1xtto": "f1n2ytmg",
86
- "Hbcoss": "fnqdfvx",
87
- "lq1u8j": "fbqc2tv",
88
- "B37x0ls": "fvvig05",
89
- "H8rp7s": "f1nwpqpa",
90
- "uvoyur": "f1e6xsgv",
46
+ "li1rpt": "f1gw3sf2",
47
+ "Bsft5z2": "f13zj6fq",
48
+ "E3zdtr": "f1mdlcz9",
49
+ "Eqx8gd": ["f1a7op3", "f1cjjd47"],
50
+ "By385i5": "f1gboi2j",
51
+ "B1piin3": ["f1cjjd47", "f1a7op3"],
52
+ "Dlnsje": "f145g4dw",
53
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
54
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
55
+ "Bcgy8vk": "f1cb6c3",
56
+ "Bw17bha": "f1lh990p",
57
+ "B1q35kw": "f1jc6hxc",
58
+ "Gjdm7m": "f13evtba",
59
+ "b1kco5": "f1yk9hq",
60
+ "Ba2ppi3": "fhwpy7i",
61
+ "F2fol1": "f14ee0xe",
62
+ "lck23g": "f1xhbsuh",
63
+ "umuwi5": "fjw5xc1",
64
+ "Blcqepd": "f1xdyd5c",
65
+ "nplu4u": "fatpbeo",
66
+ "Bioka5o": "fb7uyps",
67
+ "Bercvud": "f1ibeo51",
91
68
  "Bbr2w1p": "f14a1fxs",
92
69
  "Bduesf4": "f3e99gv",
93
70
  "Bpq79vn": "fhljsf7"
@@ -95,31 +72,35 @@ const useRootStyles = /*#__PURE__*/__styles({
95
72
  "small": {
96
73
  "sshi5w": "f1pha7fy",
97
74
  "z8tnut": "f1g0x7ka",
98
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
75
+ "z189sj": ["fdw0yi8", "fk8j09s"],
99
76
  "Byoj8tv": "f1qch9an",
100
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
77
+ "uwmqm3": ["fk8j09s", "fdw0yi8"],
78
+ "Bahqtrf": "fk6fouc",
101
79
  "Be2twd7": "fy9rknc",
80
+ "Bhrd7zp": "figsok6",
102
81
  "Bg96gwp": "fwrc4pm"
103
82
  },
104
83
  "medium": {
105
84
  "sshi5w": "f1nxs5xn",
106
85
  "z8tnut": "f1g0x7ka",
107
- "z189sj": ["f81rol6", "frdkuqy"],
86
+ "z189sj": ["f11gcy0p", "f1ng84yb"],
108
87
  "Byoj8tv": "f1qch9an",
109
- "uwmqm3": ["frdkuqy", "f81rol6"],
88
+ "uwmqm3": ["f1ng84yb", "f11gcy0p"],
89
+ "Bahqtrf": "fk6fouc",
110
90
  "Be2twd7": "fkhj508",
91
+ "Bhrd7zp": "figsok6",
111
92
  "Bg96gwp": "f1i3iumi"
112
93
  },
113
94
  "large": {
114
95
  "sshi5w": "f1w5jphr",
115
96
  "z8tnut": "f1g0x7ka",
116
- "z189sj": ["f11qrl6u", "fjlbh76"],
97
+ "z189sj": ["fw5db7e", "f1uw59to"],
117
98
  "Byoj8tv": "f1qch9an",
118
- "uwmqm3": ["fjlbh76", "f11qrl6u"],
99
+ "uwmqm3": ["f1uw59to", "fw5db7e"],
119
100
  "Be2twd7": "fod5ikn",
120
101
  "Bg96gwp": "faaz57k",
121
- "i8kkvl": "fgfbwa2",
122
- "Belr9w4": "f1y3hx6l"
102
+ "i8kkvl": "f1rjii52",
103
+ "Belr9w4": "f1r7g2jn"
123
104
  },
124
105
  "outline": {
125
106
  "De3pzq": "fxugw4r",
@@ -159,10 +140,10 @@ const useRootStyles = /*#__PURE__*/__styles({
159
140
  "underlineInteractive": {
160
141
  "oetu4i": "f1l4zc64",
161
142
  "Be8ivqh": "f1klwx88",
162
- "frdscb": ["fqvcdsd", "f9cg6ix"],
163
- "B9nohqn": ["f9cg6ix", "fqvcdsd"],
164
- "B1dhsta": ["f1pvm60u", "f179ivkp"],
165
- "Bjdmjzx": ["f179ivkp", "f1pvm60u"]
143
+ "B3778ie": ["f1nf3wye", "feulmo5"],
144
+ "d9w3h3": ["feulmo5", "f1nf3wye"],
145
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
146
+ "B4j8arr": ["f53nyzz", "f18vqdqu"]
166
147
  },
167
148
  "filled": {
168
149
  "E5pizo": "fyed02w",
@@ -216,8 +197,8 @@ const useRootStyles = /*#__PURE__*/__styles({
216
197
  "n51gp8": ["f14g86mu", "f1rvyvqg"]
217
198
  }
218
199
  }, {
219
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
220
- "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv:focus-within:active:after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
200
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
201
+ "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
221
202
  "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}"],
222
203
  "a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}"],
223
204
  "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
@@ -233,9 +214,9 @@ const useInputElementStyles = /*#__PURE__*/__styles({
233
214
  "oivjwe": "f1h8hb77",
234
215
  "wvpqe5": ["f1deefiw", "f1n71otn"],
235
216
  "z8tnut": "f1g0x7ka",
236
- "z189sj": ["f12huiiw", "f161knb0"],
217
+ "z189sj": ["ffczdla", "fgiv446"],
237
218
  "Byoj8tv": "f1qch9an",
238
- "uwmqm3": ["f161knb0", "f12huiiw"],
219
+ "uwmqm3": ["fgiv446", "ffczdla"],
239
220
  "sj55zd": "f19n0e5",
240
221
  "De3pzq": "f3rmtva",
241
222
  "yvdlaj": "fwyc1cq",
@@ -243,20 +224,24 @@ const useInputElementStyles = /*#__PURE__*/__styles({
243
224
  "B486eqv": "f2hkw1w"
244
225
  },
245
226
  "small": {
227
+ "Bahqtrf": "fk6fouc",
246
228
  "Be2twd7": "fy9rknc",
229
+ "Bhrd7zp": "figsok6",
247
230
  "Bg96gwp": "fwrc4pm"
248
231
  },
249
232
  "medium": {
233
+ "Bahqtrf": "fk6fouc",
250
234
  "Be2twd7": "fkhj508",
235
+ "Bhrd7zp": "figsok6",
251
236
  "Bg96gwp": "f1i3iumi"
252
237
  },
253
238
  "large": {
254
239
  "Be2twd7": "fod5ikn",
255
240
  "Bg96gwp": "faaz57k",
256
241
  "z8tnut": "f1g0x7ka",
257
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
242
+ "z189sj": ["fdw0yi8", "fk8j09s"],
258
243
  "Byoj8tv": "f1qch9an",
259
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"]
244
+ "uwmqm3": ["fk8j09s", "fdw0yi8"]
260
245
  },
261
246
  "disabled": {
262
247
  "sj55zd": "f1s2aq7o",
@@ -265,7 +250,7 @@ const useInputElementStyles = /*#__PURE__*/__styles({
265
250
  "yvdlaj": "fahhnxm"
266
251
  }
267
252
  }, {
268
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fy77jfu{min-width:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".f12huiiw{padding-right:2px;}", ".f161knb0{padding-left:2px;}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
253
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fy77jfu{min-width:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
269
254
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
270
255
  });
271
256
 
package/lib/components/Input/useInputStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n ':after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within:after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\n },\n ':focus-within:active:after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n ':after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n '> svg': { fontSize: '20px' },\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst contentSizes = {\n // TODO: This 400 style is not in the typography styles.\n // May need a design change\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(tokens.spacingHorizontalXXS),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', tokens.spacingHorizontalXXS),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...typographyStyles.caption1,\n },\n medium: {\n ...typographyStyles.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n '> svg': { fontSize: '20px' },\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Input/useInputStyles.js CHANGED
@@ -21,32 +21,9 @@ exports.inputClassNames = {
21
21
  contentAfter: 'fui-Input__contentAfter'
22
22
  }; // TODO(sharing) use theme values once available
23
23
 
24
- const horizontalSpacing = {
25
- xxs: '2px',
26
- xs: '4px',
27
- sNudge: '6px',
28
- s: '8px',
29
- mNudge: '10px',
30
- m: '12px'
31
- };
32
- const motionDurations = {
33
- ultraFast: '0.05s',
34
- normal: '0.2s'
35
- };
36
- const motionCurves = {
37
- accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
38
- decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)'
39
- };
40
24
  const contentSizes = {
41
- // TODO(sharing) shouldn't these be in the theme?
42
- body1: {
43
- fontSize: react_theme_1.tokens.fontSizeBase300,
44
- lineHeight: react_theme_1.tokens.lineHeightBase300
45
- },
46
- caption1: {
47
- fontSize: react_theme_1.tokens.fontSizeBase200,
48
- lineHeight: react_theme_1.tokens.lineHeightBase200
49
- },
25
+ // TODO: This 400 style is not in the typography styles.
26
+ // May need a design change
50
27
  400: {
51
28
  fontSize: react_theme_1.tokens.fontSizeBase400,
52
29
  lineHeight: react_theme_1.tokens.lineHeightBase400
@@ -64,8 +41,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
64
41
  "mc9l5x": "ftuwxu6",
65
42
  "Bt984gj": "f122n59",
66
43
  "Eh141a": "flvyvdh",
67
- "i8kkvl": "f16mnhsx",
68
- "Belr9w4": "fbi42co",
44
+ "i8kkvl": "f14mj54c",
45
+ "Belr9w4": "fiut8dr",
69
46
  "Bahqtrf": "fk6fouc",
70
47
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
71
48
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -75,28 +52,28 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
75
52
  "B7ck84d": "f1ewtqcl"
76
53
  },
77
54
  "interactive": {
78
- "oqd9ik": "ffdc0f3",
79
- "Bs6t6z0": "fqc6z8f",
80
- "Hdbjpj": "f11ef69",
81
- "jc51t6": ["f383sj6", "fpmdmpy"],
82
- "Bj55yzk": "fqmzrrm",
83
- "cnmfks": ["fpmdmpy", "f383sj6"],
84
- "mpb1vu": "f1iv82i4",
85
- "B9nohqn": ["f1j2a01o", "fvxed1z"],
86
- "frdscb": ["fvxed1z", "f1j2a01o"],
87
- "B3zxwmv": "f1gw3il9",
88
- "J4s2b0": "fd0py6g",
89
- "Bk8j60v": "f1ta67ae",
90
- "B5pt6m4": "fabrkco",
91
- "xn0juu": "f1lmmjng",
92
- "wbfbqe": "fopw4to",
93
- "mafdb0": "f1dw3w9y",
94
- "s1xtto": "f1n2ytmg",
95
- "Hbcoss": "fnqdfvx",
96
- "lq1u8j": "fbqc2tv",
97
- "B37x0ls": "fvvig05",
98
- "H8rp7s": "f1nwpqpa",
99
- "uvoyur": "f1e6xsgv",
55
+ "li1rpt": "f1gw3sf2",
56
+ "Bsft5z2": "f13zj6fq",
57
+ "E3zdtr": "f1mdlcz9",
58
+ "Eqx8gd": ["f1a7op3", "f1cjjd47"],
59
+ "By385i5": "f1gboi2j",
60
+ "B1piin3": ["f1cjjd47", "f1a7op3"],
61
+ "Dlnsje": "f145g4dw",
62
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
63
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
64
+ "Bcgy8vk": "f1cb6c3",
65
+ "Bw17bha": "f1lh990p",
66
+ "B1q35kw": "f1jc6hxc",
67
+ "Gjdm7m": "f13evtba",
68
+ "b1kco5": "f1yk9hq",
69
+ "Ba2ppi3": "fhwpy7i",
70
+ "F2fol1": "f14ee0xe",
71
+ "lck23g": "f1xhbsuh",
72
+ "umuwi5": "fjw5xc1",
73
+ "Blcqepd": "f1xdyd5c",
74
+ "nplu4u": "fatpbeo",
75
+ "Bioka5o": "fb7uyps",
76
+ "Bercvud": "f1ibeo51",
100
77
  "Bbr2w1p": "f14a1fxs",
101
78
  "Bduesf4": "f3e99gv",
102
79
  "Bpq79vn": "fhljsf7"
@@ -104,31 +81,35 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
104
81
  "small": {
105
82
  "sshi5w": "f1pha7fy",
106
83
  "z8tnut": "f1g0x7ka",
107
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
84
+ "z189sj": ["fdw0yi8", "fk8j09s"],
108
85
  "Byoj8tv": "f1qch9an",
109
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
86
+ "uwmqm3": ["fk8j09s", "fdw0yi8"],
87
+ "Bahqtrf": "fk6fouc",
110
88
  "Be2twd7": "fy9rknc",
89
+ "Bhrd7zp": "figsok6",
111
90
  "Bg96gwp": "fwrc4pm"
112
91
  },
113
92
  "medium": {
114
93
  "sshi5w": "f1nxs5xn",
115
94
  "z8tnut": "f1g0x7ka",
116
- "z189sj": ["f81rol6", "frdkuqy"],
95
+ "z189sj": ["f11gcy0p", "f1ng84yb"],
117
96
  "Byoj8tv": "f1qch9an",
118
- "uwmqm3": ["frdkuqy", "f81rol6"],
97
+ "uwmqm3": ["f1ng84yb", "f11gcy0p"],
98
+ "Bahqtrf": "fk6fouc",
119
99
  "Be2twd7": "fkhj508",
100
+ "Bhrd7zp": "figsok6",
120
101
  "Bg96gwp": "f1i3iumi"
121
102
  },
122
103
  "large": {
123
104
  "sshi5w": "f1w5jphr",
124
105
  "z8tnut": "f1g0x7ka",
125
- "z189sj": ["f11qrl6u", "fjlbh76"],
106
+ "z189sj": ["fw5db7e", "f1uw59to"],
126
107
  "Byoj8tv": "f1qch9an",
127
- "uwmqm3": ["fjlbh76", "f11qrl6u"],
108
+ "uwmqm3": ["f1uw59to", "fw5db7e"],
128
109
  "Be2twd7": "fod5ikn",
129
110
  "Bg96gwp": "faaz57k",
130
- "i8kkvl": "fgfbwa2",
131
- "Belr9w4": "f1y3hx6l"
111
+ "i8kkvl": "f1rjii52",
112
+ "Belr9w4": "f1r7g2jn"
132
113
  },
133
114
  "outline": {
134
115
  "De3pzq": "fxugw4r",
@@ -168,10 +149,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
168
149
  "underlineInteractive": {
169
150
  "oetu4i": "f1l4zc64",
170
151
  "Be8ivqh": "f1klwx88",
171
- "frdscb": ["fqvcdsd", "f9cg6ix"],
172
- "B9nohqn": ["f9cg6ix", "fqvcdsd"],
173
- "B1dhsta": ["f1pvm60u", "f179ivkp"],
174
- "Bjdmjzx": ["f179ivkp", "f1pvm60u"]
152
+ "B3778ie": ["f1nf3wye", "feulmo5"],
153
+ "d9w3h3": ["feulmo5", "f1nf3wye"],
154
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
155
+ "B4j8arr": ["f53nyzz", "f18vqdqu"]
175
156
  },
176
157
  "filled": {
177
158
  "E5pizo": "fyed02w",
@@ -225,8 +206,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
225
206
  "n51gp8": ["f14g86mu", "f1rvyvqg"]
226
207
  }
227
208
  }, {
228
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
229
- "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv:focus-within:active:after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
209
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
210
+ "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
230
211
  "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}"],
231
212
  "a": [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}"],
232
213
  "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
@@ -242,9 +223,9 @@ const useInputElementStyles = /*#__PURE__*/react_1.__styles({
242
223
  "oivjwe": "f1h8hb77",
243
224
  "wvpqe5": ["f1deefiw", "f1n71otn"],
244
225
  "z8tnut": "f1g0x7ka",
245
- "z189sj": ["f12huiiw", "f161knb0"],
226
+ "z189sj": ["ffczdla", "fgiv446"],
246
227
  "Byoj8tv": "f1qch9an",
247
- "uwmqm3": ["f161knb0", "f12huiiw"],
228
+ "uwmqm3": ["fgiv446", "ffczdla"],
248
229
  "sj55zd": "f19n0e5",
249
230
  "De3pzq": "f3rmtva",
250
231
  "yvdlaj": "fwyc1cq",
@@ -252,20 +233,24 @@ const useInputElementStyles = /*#__PURE__*/react_1.__styles({
252
233
  "B486eqv": "f2hkw1w"
253
234
  },
254
235
  "small": {
236
+ "Bahqtrf": "fk6fouc",
255
237
  "Be2twd7": "fy9rknc",
238
+ "Bhrd7zp": "figsok6",
256
239
  "Bg96gwp": "fwrc4pm"
257
240
  },
258
241
  "medium": {
242
+ "Bahqtrf": "fk6fouc",
259
243
  "Be2twd7": "fkhj508",
244
+ "Bhrd7zp": "figsok6",
260
245
  "Bg96gwp": "f1i3iumi"
261
246
  },
262
247
  "large": {
263
248
  "Be2twd7": "fod5ikn",
264
249
  "Bg96gwp": "faaz57k",
265
250
  "z8tnut": "f1g0x7ka",
266
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
251
+ "z189sj": ["fdw0yi8", "fk8j09s"],
267
252
  "Byoj8tv": "f1qch9an",
268
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"]
253
+ "uwmqm3": ["fk8j09s", "fdw0yi8"]
269
254
  },
270
255
  "disabled": {
271
256
  "sj55zd": "f1s2aq7o",
@@ -274,7 +259,7 @@ const useInputElementStyles = /*#__PURE__*/react_1.__styles({
274
259
  "yvdlaj": "fahhnxm"
275
260
  }
276
261
  }, {
277
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fy77jfu{min-width:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".f12huiiw{padding-right:2px;}", ".f161knb0{padding-left:2px;}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
262
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fy77jfu{min-width:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
278
263
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
279
264
  });
280
265
 
package/lib-commonjs/components/Input/useInputStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n // TODO(sharing) shouldn't these be in the theme?\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(horizontalSpacing.xxs),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n ':after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within:after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\n },\n ':focus-within:active:after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n ...contentSizes.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', horizontalSpacing.mNudge),\n ...contentSizes.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', horizontalSpacing.m),\n ...contentSizes[400],\n ...shorthands.gap(horizontalSpacing.sNudge),\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n ':after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', horizontalSpacing.xxs),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...contentSizes.caption1,\n },\n medium: {\n ...contentSizes.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', horizontalSpacing.sNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n '> svg': { fontSize: '20px' },\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst contentSizes = {\n // TODO: This 400 style is not in the typography styles.\n // May need a design change\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n ...shorthands.gap(tokens.spacingHorizontalXXS),\n fontFamily: tokens.fontFamilyBase,\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n small: {\n minHeight: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n minHeight: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n ...shorthands.gap(tokens.spacingHorizontalSNudge),\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n },\n filled: {\n boxShadow: tokens.shadow2, // optional shadow for filled appearances\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n filledLighter: {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputElementStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n ...shorthands.padding('0', tokens.spacingHorizontalXXS),\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n small: {\n // This is set on root but doesn't inherit\n ...typographyStyles.caption1,\n },\n medium: {\n ...typographyStyles.body1,\n },\n large: {\n ...contentSizes[400],\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n // special case styling for icons (most common case) to ensure they're centered vertically\n '> svg': { display: 'block' },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n '> svg': { fontSize: '20px' },\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n rootStyles.base,\n rootStyles[size],\n rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n inputStyles.base,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-input",
3
- "version": "9.0.0-beta.6",
3
+ "version": "9.0.0-beta.9",
4
4
  "description": "Fluent UI React Input component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,19 +21,19 @@
21
21
  "start": "yarn storybook",
22
22
  "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-input/src && yarn docs",
25
- "storybook": "node ../../scripts/storybook/runner",
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-input/src && yarn docs",
25
+ "storybook": "node ../../../scripts/storybook/runner",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.5",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-theme": "9.0.0-rc.5",
36
- "@fluentui/react-utilities": "9.0.0-rc.6",
35
+ "@fluentui/react-theme": "9.0.0-rc.7",
36
+ "@fluentui/react-utilities": "9.0.0-rc.8",
37
37
  "@griffel/react": "1.0.3",
38
38
  "tslib": "^2.1.0"
39
39
  },