@launchpad-ui/form 0.6.10 → 0.6.12

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 (4) hide show
  1. package/dist/index.es.js +32 -32
  2. package/dist/index.js +32 -32
  3. package/dist/style.css +120 -124
  4. package/package.json +2 -2
package/dist/index.es.js CHANGED
@@ -3,57 +3,57 @@ import { forwardRef, useState, useRef, Children, isValidElement, cloneElement }
3
3
  import { cx } from "classix";
4
4
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
5
5
  import { VisuallyHidden } from "@react-aria/visually-hidden";
6
- const formGroup = "_formGroup_1w090_1";
7
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1w090_9";
8
- const formInline = "_formInline_1w090_13";
9
- const form = "_form_1w090_1";
10
- const inlineForm = "_inlineForm_1w090_27";
11
- const label = "_label_1w090_32";
12
- const labelDisabled = "_labelDisabled_1w090_38";
13
- const labelOptional = "_labelOptional_1w090_42";
14
- const compactTextField = "_compactTextField_1w090_48";
15
- const fieldError = "_fieldError_1w090_72";
16
- const iconField = "_iconField_1w090_98";
17
- const formInput = "_formInput_1w090_98";
18
- const isInvalid = "_isInvalid_1w090_102";
19
- const hint = "_hint_1w090_124";
20
- const field = "_field_1w090_72";
21
- const fieldErrorMessage = "_fieldErrorMessage_1w090_144";
22
- const isDisabled = "_isDisabled_1w090_179";
23
- const isFocused = "_isFocused_1w090_233";
24
- const checkbox = "_checkbox_1w090_247";
25
- const radio = "_radio_1w090_254";
26
- const number = "_number_1w090_268";
27
- const suffixContainer = "_suffixContainer_1w090_272";
28
- const suffix = "_suffix_1w090_272";
29
- const iconFieldIcon = "_iconFieldIcon_1w090_317";
30
- const formInputTiny = "_formInputTiny_1w090_325";
31
- const requiredAsterisk = "_requiredAsterisk_1w090_334";
32
- const fieldSet = "_fieldSet_1w090_338";
33
- const isActive = "_isActive_1w090_349";
6
+ const formGroup = "_formGroup_1lvq8_1";
7
+ const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1lvq8_9";
8
+ const formInline = "_formInline_1lvq8_13";
9
+ const form = "_form_1lvq8_1";
10
+ const formInput = "_formInput_1lvq8_27";
11
+ const isFocused = "_isFocused_1lvq8_47";
12
+ const iconField = "_iconField_1lvq8_64";
13
+ const suffixContainer = "_suffixContainer_1lvq8_68";
14
+ const inlineForm = "_inlineForm_1lvq8_77";
15
+ const label = "_label_1lvq8_82";
16
+ const labelDisabled = "_labelDisabled_1lvq8_88";
17
+ const labelOptional = "_labelOptional_1lvq8_92";
18
+ const compactTextField = "_compactTextField_1lvq8_98";
19
+ const fieldError = "_fieldError_1lvq8_122";
20
+ const isInvalid = "_isInvalid_1lvq8_148";
21
+ const hint = "_hint_1lvq8_170";
22
+ const field = "_field_1lvq8_122";
23
+ const fieldErrorMessage = "_fieldErrorMessage_1lvq8_190";
24
+ const isDisabled = "_isDisabled_1lvq8_203";
25
+ const checkbox = "_checkbox_1lvq8_264";
26
+ const radio = "_radio_1lvq8_271";
27
+ const number = "_number_1lvq8_275";
28
+ const suffix = "_suffix_1lvq8_68";
29
+ const iconFieldIcon = "_iconFieldIcon_1lvq8_313";
30
+ const formInputTiny = "_formInputTiny_1lvq8_321";
31
+ const requiredAsterisk = "_requiredAsterisk_1lvq8_330";
32
+ const fieldSet = "_fieldSet_1lvq8_334";
33
+ const isActive = "_isActive_1lvq8_345";
34
34
  const styles = {
35
35
  formGroup,
36
36
  formIncreasedErrorMargin,
37
37
  formInline,
38
38
  form,
39
+ formInput,
40
+ isFocused,
41
+ iconField,
42
+ suffixContainer,
39
43
  inlineForm,
40
44
  label,
41
45
  labelDisabled,
42
46
  labelOptional,
43
47
  compactTextField,
44
48
  fieldError,
45
- iconField,
46
- formInput,
47
49
  isInvalid,
48
50
  hint,
49
51
  field,
50
52
  fieldErrorMessage,
51
53
  isDisabled,
52
- isFocused,
53
54
  checkbox,
54
55
  radio,
55
56
  number,
56
- suffixContainer,
57
57
  suffix,
58
58
  iconFieldIcon,
59
59
  formInputTiny,
package/dist/index.js CHANGED
@@ -5,57 +5,57 @@ const react = require("react");
5
5
  const classix = require("classix");
6
6
  const jsxRuntime = require("react/jsx-runtime");
7
7
  const visuallyHidden = require("@react-aria/visually-hidden");
8
- const formGroup = "_formGroup_1w090_1";
9
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1w090_9";
10
- const formInline = "_formInline_1w090_13";
11
- const form = "_form_1w090_1";
12
- const inlineForm = "_inlineForm_1w090_27";
13
- const label = "_label_1w090_32";
14
- const labelDisabled = "_labelDisabled_1w090_38";
15
- const labelOptional = "_labelOptional_1w090_42";
16
- const compactTextField = "_compactTextField_1w090_48";
17
- const fieldError = "_fieldError_1w090_72";
18
- const iconField = "_iconField_1w090_98";
19
- const formInput = "_formInput_1w090_98";
20
- const isInvalid = "_isInvalid_1w090_102";
21
- const hint = "_hint_1w090_124";
22
- const field = "_field_1w090_72";
23
- const fieldErrorMessage = "_fieldErrorMessage_1w090_144";
24
- const isDisabled = "_isDisabled_1w090_179";
25
- const isFocused = "_isFocused_1w090_233";
26
- const checkbox = "_checkbox_1w090_247";
27
- const radio = "_radio_1w090_254";
28
- const number = "_number_1w090_268";
29
- const suffixContainer = "_suffixContainer_1w090_272";
30
- const suffix = "_suffix_1w090_272";
31
- const iconFieldIcon = "_iconFieldIcon_1w090_317";
32
- const formInputTiny = "_formInputTiny_1w090_325";
33
- const requiredAsterisk = "_requiredAsterisk_1w090_334";
34
- const fieldSet = "_fieldSet_1w090_338";
35
- const isActive = "_isActive_1w090_349";
8
+ const formGroup = "_formGroup_1lvq8_1";
9
+ const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1lvq8_9";
10
+ const formInline = "_formInline_1lvq8_13";
11
+ const form = "_form_1lvq8_1";
12
+ const formInput = "_formInput_1lvq8_27";
13
+ const isFocused = "_isFocused_1lvq8_47";
14
+ const iconField = "_iconField_1lvq8_64";
15
+ const suffixContainer = "_suffixContainer_1lvq8_68";
16
+ const inlineForm = "_inlineForm_1lvq8_77";
17
+ const label = "_label_1lvq8_82";
18
+ const labelDisabled = "_labelDisabled_1lvq8_88";
19
+ const labelOptional = "_labelOptional_1lvq8_92";
20
+ const compactTextField = "_compactTextField_1lvq8_98";
21
+ const fieldError = "_fieldError_1lvq8_122";
22
+ const isInvalid = "_isInvalid_1lvq8_148";
23
+ const hint = "_hint_1lvq8_170";
24
+ const field = "_field_1lvq8_122";
25
+ const fieldErrorMessage = "_fieldErrorMessage_1lvq8_190";
26
+ const isDisabled = "_isDisabled_1lvq8_203";
27
+ const checkbox = "_checkbox_1lvq8_264";
28
+ const radio = "_radio_1lvq8_271";
29
+ const number = "_number_1lvq8_275";
30
+ const suffix = "_suffix_1lvq8_68";
31
+ const iconFieldIcon = "_iconFieldIcon_1lvq8_313";
32
+ const formInputTiny = "_formInputTiny_1lvq8_321";
33
+ const requiredAsterisk = "_requiredAsterisk_1lvq8_330";
34
+ const fieldSet = "_fieldSet_1lvq8_334";
35
+ const isActive = "_isActive_1lvq8_345";
36
36
  const styles = {
37
37
  formGroup,
38
38
  formIncreasedErrorMargin,
39
39
  formInline,
40
40
  form,
41
+ formInput,
42
+ isFocused,
43
+ iconField,
44
+ suffixContainer,
41
45
  inlineForm,
42
46
  label,
43
47
  labelDisabled,
44
48
  labelOptional,
45
49
  compactTextField,
46
50
  fieldError,
47
- iconField,
48
- formInput,
49
51
  isInvalid,
50
52
  hint,
51
53
  field,
52
54
  fieldErrorMessage,
53
55
  isDisabled,
54
- isFocused,
55
56
  checkbox,
56
57
  radio,
57
58
  number,
58
- suffixContainer,
59
59
  suffix,
60
60
  iconFieldIcon,
61
61
  formInputTiny,
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
- ._formGroup_1w090_1 {
1
+ ._formGroup_1lvq8_1 {
2
2
  margin: 2rem 0;
3
3
  padding: 0;
4
4
  border: none;
@@ -7,46 +7,103 @@
7
7
  /* The margin for .formGroup and the min-height of .form-fieldError
8
8
  should be equal to avoid content shift when errors are shown */
9
9
 
10
- ._formIncreasedErrorMargin_1w090_9 ._formGroup_1w090_1 {
10
+ ._formIncreasedErrorMargin_1lvq8_9 ._formGroup_1lvq8_1 {
11
11
  margin: 2.8rem 0;
12
12
  }
13
13
 
14
- ._formInline_1w090_13 ._formGroup_1w090_1 {
14
+ ._formInline_1lvq8_13 ._formGroup_1lvq8_1 {
15
15
  display: inline-block;
16
16
  vertical-align: middle;
17
17
  margin: 0;
18
18
  }
19
19
 
20
- ._form_1w090_1 ._formGroup_1w090_1:first-child {
20
+ ._form_1lvq8_1 ._formGroup_1lvq8_1:first-child {
21
21
  margin-top: 0;
22
22
  }
23
23
 
24
- ._form_1w090_1 ._formGroup_1w090_1:last-child {
24
+ ._form_1lvq8_1 ._formGroup_1lvq8_1:last-child {
25
25
  margin-bottom: 0;
26
26
  }
27
27
 
28
- ._inlineForm_1w090_27 ._formGroup_1w090_1 + ._formGroup_1w090_1,
29
- ._inlineForm_1w090_27 ._formGroup_1w090_1 + .Button {
28
+ ._formInput_1lvq8_27 {
29
+ display: block;
30
+ width: 100%;
31
+ padding: 0.6rem 1rem;
32
+ font-size: 1.3rem;
33
+ font-family: var(--font-family-base);
34
+ line-height: var(--line-height-base);
35
+ background-color: var(--color-background-field);
36
+ color: var(--color-text);
37
+ border: 1px solid var(--color-gray-500);
38
+ border-radius: var(--border-radius);
39
+ transition: all 100ms linear;
40
+ height: 3.2rem;
41
+ }
42
+
43
+ ._formInput_1lvq8_27:-moz-placeholder-shown {
44
+ overflow: hidden;
45
+ text-overflow: ellipsis;
46
+ }
47
+
48
+ ._formInput_1lvq8_27:placeholder-shown {
49
+ overflow: hidden;
50
+ text-overflow: ellipsis;
51
+ }
52
+
53
+ ._formInput_1lvq8_27._isFocused_1lvq8_47,
54
+ ._formInput_1lvq8_27:focus {
55
+ outline: 0;
56
+ border-color: var(--color-focus);
57
+ box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
58
+ }
59
+
60
+ select._formInput_1lvq8_27 {
61
+ -webkit-appearance: none;
62
+ -moz-appearance: none;
63
+ appearance: none;
64
+ background: transparent;
65
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z" fill="%23646f7a"/></svg>');
66
+ background-size: 2rem;
67
+ background-repeat: no-repeat;
68
+ background-position: right 0.4em top 50%, 0 0;
69
+ padding-right: 2rem;
70
+ }
71
+
72
+ ._iconField_1lvq8_64 ._formInput_1lvq8_27 {
73
+ padding-left: 3rem;
74
+ }
75
+
76
+ ._suffixContainer_1lvq8_68 ._formInput_1lvq8_27 {
77
+ border: none;
78
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
79
+ }
80
+
81
+ ._suffixContainer_1lvq8_68 ._formInput_1lvq8_27:focus {
82
+ box-shadow: none;
83
+ }
84
+
85
+ ._inlineForm_1lvq8_77 ._formGroup_1lvq8_1 + ._formGroup_1lvq8_1,
86
+ ._inlineForm_1lvq8_77 ._formGroup_1lvq8_1 + .Button {
30
87
  margin-left: 1rem;
31
88
  }
32
89
 
33
- ._label_1w090_32 {
90
+ ._label_1lvq8_82 {
34
91
  font-size: 1.3rem;
35
92
  font-family: var(--font-family-base);
36
93
  word-break: break-word;
37
94
  }
38
95
 
39
- ._labelDisabled_1w090_38 {
96
+ ._labelDisabled_1lvq8_88 {
40
97
  color: var(--color-gray-800);
41
98
  }
42
99
 
43
- ._labelOptional_1w090_42 {
100
+ ._labelOptional_1lvq8_92 {
44
101
  margin-left: 0.4em;
45
102
  color: var(--color-text-subtle-primary);
46
103
  fill: var(--color-text-subtle-primary);
47
104
  }
48
105
 
49
- ._compactTextField_1w090_48 ._label_1w090_32 {
106
+ ._compactTextField_1lvq8_98 ._label_1lvq8_82 {
50
107
  position: absolute;
51
108
  top: -2px;
52
109
  left: 10px;
@@ -60,17 +117,17 @@
60
117
  z-index: 1; /* Fixes layout issue in Firefox */
61
118
  }
62
119
 
63
- ._formGroup_1w090_1 ._label_1w090_32 {
120
+ ._formGroup_1lvq8_1 ._label_1lvq8_82 {
64
121
  display: flex;
65
122
  align-items: center;
66
123
  margin-bottom: 0.2rem;
67
124
  }
68
125
 
69
- ._formGroup_1w090_1 ._label_1w090_32 + ._label_1w090_32 {
126
+ ._formGroup_1lvq8_1 ._label_1lvq8_82 + ._label_1lvq8_82 {
70
127
  margin-top: 0.5rem;
71
128
  }
72
129
 
73
- ._fieldError_1w090_72 {
130
+ ._fieldError_1lvq8_122 {
74
131
  color: var(--color-system-red-600);
75
132
  font-size: 1.3rem;
76
133
  }
@@ -78,30 +135,26 @@
78
135
  /* The margin for .formGroup and the min-height of .form-fieldError
79
136
  should be equal to avoid content shift when errors are shown */
80
137
 
81
- ._formIncreasedErrorMargin_1w090_9 ._fieldError_1w090_72 {
138
+ ._formIncreasedErrorMargin_1lvq8_9 ._fieldError_1lvq8_122 {
82
139
  min-height: 2.8rem;
83
140
  }
84
141
 
85
- ._label_1w090_32 ._fieldError_1w090_72 {
142
+ ._label_1lvq8_82 ._fieldError_1lvq8_122 {
86
143
  float: right;
87
144
  }
88
145
 
89
- ._form_1w090_1:not(._inlineForm_1w090_27) ._fieldError_1w090_72 {
146
+ ._form_1lvq8_1:not(._inlineForm_1lvq8_77) ._fieldError_1lvq8_122 {
90
147
  display: block;
91
148
  padding-top: 0.5rem;
92
149
  text-align: left;
93
150
  }
94
151
 
95
- ._formIncreasedErrorMargin_1w090_9:not(._inlineForm_1w090_27) ._fieldError_1w090_72 {
152
+ ._formIncreasedErrorMargin_1lvq8_9:not(._inlineForm_1lvq8_77) ._fieldError_1lvq8_122 {
96
153
  padding-top: 0.1rem;
97
154
  padding-bottom: 0.5rem;
98
155
  }
99
156
 
100
- ._iconField_1w090_98 ._formInput_1w090_98 {
101
- padding-left: 3rem;
102
- }
103
-
104
- ._form_1w090_1 ._isInvalid_1w090_102 ._label_1w090_32 {
157
+ ._form_1lvq8_1 ._isInvalid_1lvq8_148 ._label_1lvq8_82 {
105
158
  color: var(--color-system-red-600);
106
159
  }
107
160
 
@@ -113,21 +166,21 @@
113
166
  color: var(--color-gray-600);
114
167
  }
115
168
 
116
- ._form_1w090_1 ._isInvalid_1w090_102 .Select-control,
117
- ._form_1w090_1 ._isInvalid_1w090_102 .CustomSelect > div,
118
- ._form_1w090_1 ._isInvalid_1w090_102 ._formInput_1w090_98 {
169
+ ._form_1lvq8_1 ._isInvalid_1lvq8_148 .Select-control,
170
+ ._form_1lvq8_1 ._isInvalid_1lvq8_148 .CustomSelect > div,
171
+ ._form_1lvq8_1 ._isInvalid_1lvq8_148 ._formInput_1lvq8_27 {
119
172
  border-color: var(--color-system-red-600);
120
173
  }
121
174
 
122
- ._formIncreasedErrorMargin_1w090_9 ._formGroup_1w090_1._isInvalid_1w090_102 {
175
+ ._formIncreasedErrorMargin_1lvq8_9 ._formGroup_1lvq8_1._isInvalid_1lvq8_148 {
123
176
  margin-bottom: 0;
124
177
  }
125
178
 
126
- ._formIncreasedErrorMargin_1w090_9 ._formGroup_1w090_1._isInvalid_1w090_102 + ._formGroup_1w090_1 {
179
+ ._formIncreasedErrorMargin_1lvq8_9 ._formGroup_1lvq8_1._isInvalid_1lvq8_148 + ._formGroup_1lvq8_1 {
127
180
  margin-top: 0;
128
181
  }
129
182
 
130
- ._hint_1w090_124 {
183
+ ._hint_1lvq8_170 {
131
184
  display: block;
132
185
  margin-top: 0.3rem;
133
186
  font-size: 1.3rem;
@@ -135,90 +188,63 @@
135
188
  color: var(--color-text-subtle-primary);
136
189
  }
137
190
 
138
- ._field_1w090_72 ._hint_1w090_124 {
191
+ ._field_1lvq8_122 ._hint_1lvq8_170 {
139
192
  margin: 0;
140
193
  font-size: 1.3rem;
141
194
  color: var(--color-text-subtle-primary);
142
195
  fill: var(--color-text-subtle-primary);
143
196
  }
144
197
 
145
- ._form_1w090_1 ._field_1w090_72 label,
146
- ._form_1w090_1 ._field_1w090_72 ._isInvalid_1w090_102 label {
198
+ ._form_1lvq8_1 ._field_1lvq8_122 label,
199
+ ._form_1lvq8_1 ._field_1lvq8_122 ._isInvalid_1lvq8_148 label {
147
200
  color: var(--color-text);
148
201
  }
149
202
 
150
- ._fieldErrorMessage_1w090_144 {
203
+ ._fieldErrorMessage_1lvq8_190 {
151
204
  color: var(--color-system-red-600);
152
205
  font-size: 1.3rem;
153
206
  }
154
207
 
155
- ._field_1w090_72._formGroup_1w090_1 {
208
+ ._field_1lvq8_122._formGroup_1lvq8_1 {
156
209
  margin: 1rem 0;
157
210
  }
158
211
 
159
- ._field_1w090_72._formGroup_1w090_1:first-child {
212
+ ._field_1lvq8_122._formGroup_1lvq8_1:first-child {
160
213
  margin-top: 0;
161
214
  }
162
215
 
163
- /* stylelint-disable no-descending-specificity */
164
-
165
- ._formInput_1w090_98 {
166
- display: block;
167
- width: 100%;
168
- padding: 0.6rem 1rem;
169
- font-size: 1.3rem;
170
- font-family: var(--font-family-base);
171
- line-height: var(--line-height-base);
172
- background-color: var(--color-background-field);
173
- color: var(--color-text);
174
- border: 1px solid var(--color-gray-500);
175
- border-radius: var(--border-radius);
176
- transition: all 100ms linear;
177
- height: 3.2rem;
178
- }
179
-
180
- ._formInput_1w090_98:-moz-placeholder-shown {
181
- overflow: hidden;
182
- text-overflow: ellipsis;
183
- }
184
-
185
- ._formInput_1w090_98:placeholder-shown {
186
- overflow: hidden;
187
- text-overflow: ellipsis;
188
- }
189
-
190
- input._formInput_1w090_98:-moz-read-only {
216
+ input._formInput_1lvq8_27:-moz-read-only {
191
217
  background-color: var(--color-white-100);
192
218
  }
193
219
 
194
- ._formInput_1w090_98._isDisabled_1w090_179,
195
- input._formInput_1w090_98:disabled,
196
- select._formInput_1w090_98:disabled,
197
- input._formInput_1w090_98:read-only {
220
+ ._formInput_1lvq8_27._isDisabled_1lvq8_203,
221
+ input._formInput_1lvq8_27:disabled,
222
+ select._formInput_1lvq8_27:disabled,
223
+ input._formInput_1lvq8_27:read-only {
198
224
  background-color: var(--color-white-100);
199
225
  }
200
226
 
201
- ._formInput_1w090_98._isDisabled_1w090_179:hover,
202
- ._formInput_1w090_98:disabled:hover {
227
+ ._formInput_1lvq8_27._isDisabled_1lvq8_203:hover,
228
+ ._formInput_1lvq8_27:disabled:hover {
203
229
  cursor: not-allowed;
204
230
  }
205
231
 
206
- textarea._formInput_1w090_98 {
232
+ textarea._formInput_1lvq8_27 {
207
233
  min-height: 2.5em;
208
234
  height: auto;
209
235
  resize: none;
210
236
  }
211
237
 
212
- textarea._formInput_1w090_98:-moz-read-only {
238
+ textarea._formInput_1lvq8_27:-moz-read-only {
213
239
  background-color: var(--color-white-100);
214
240
  }
215
241
 
216
- textarea._formInput_1w090_98:disabled,
217
- textarea._formInput_1w090_98:read-only {
242
+ textarea._formInput_1lvq8_27:disabled,
243
+ textarea._formInput_1lvq8_27:read-only {
218
244
  background-color: var(--color-white-100);
219
245
  }
220
246
 
221
- input._formInput_1w090_98::-webkit-autofill {
247
+ input._formInput_1lvq8_27::-webkit-autofill {
222
248
  box-shadow: 0 0 0 50px var(--color-background-field) inset;
223
249
  }
224
250
 
@@ -251,48 +277,29 @@ input[type='checkbox']:disabled {
251
277
  pointer-events: none;
252
278
  }
253
279
 
254
- ._formInput_1w090_98._isFocused_1w090_233,
255
- ._formInput_1w090_98:focus {
256
- outline: 0;
257
- border-color: var(--color-focus);
258
- box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
259
- }
260
-
261
- ._formInput_1w090_98[readonly],
262
- ._formInput_1w090_98[readonly]:focus {
280
+ ._formInput_1lvq8_27[readonly],
281
+ ._formInput_1lvq8_27[readonly]:focus {
263
282
  color: var(--color-text-subtle-primary);
264
283
  border-color: var(--color-gray-500);
265
284
  box-shadow: none;
266
285
  }
267
286
 
268
- ._checkbox_1w090_247 {
287
+ ._checkbox_1lvq8_264 {
269
288
  align-self: flex-start; /* Default for .label is center, but this looks bad on multi-line checkbox labels */
270
289
  flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
271
290
  margin-right: 0.5rem;
272
291
  margin-top: 0.4rem;
273
292
  }
274
293
 
275
- ._radio_1w090_254 {
294
+ ._radio_1lvq8_271 {
276
295
  margin-right: 0.5rem;
277
296
  }
278
297
 
279
- select._formInput_1w090_98 {
280
- -webkit-appearance: none;
281
- -moz-appearance: none;
282
- appearance: none;
283
- background: transparent;
284
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z" fill="%23646f7a"/></svg>');
285
- background-size: 2rem;
286
- background-repeat: no-repeat;
287
- background-position: right 0.4em top 50%, 0 0;
288
- padding-right: 2rem;
289
- }
290
-
291
- ._number_1w090_268 {
298
+ ._number_1lvq8_275 {
292
299
  min-width: 4.5rem;
293
300
  }
294
301
 
295
- ._suffixContainer_1w090_272 {
302
+ ._suffixContainer_1lvq8_68 {
296
303
  display: inline-flex;
297
304
  border: 1px solid var(--color-gray-500);
298
305
  border-radius: var(--border-radius);
@@ -300,31 +307,22 @@ select._formInput_1w090_98 {
300
307
  transition: all 0.1s linear;
301
308
  }
302
309
 
303
- ._suffixContainer_1w090_272[focus-within] {
310
+ ._suffixContainer_1lvq8_68[focus-within] {
304
311
  border-color: var(--color-focus);
305
312
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
306
313
  }
307
314
 
308
- ._suffixContainer_1w090_272[focus-within] {
315
+ ._suffixContainer_1lvq8_68[focus-within] {
309
316
  border-color: var(--color-focus);
310
317
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
311
318
  }
312
319
 
313
- ._suffixContainer_1w090_272:focus-within {
320
+ ._suffixContainer_1lvq8_68:focus-within {
314
321
  border-color: var(--color-focus);
315
322
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
316
323
  }
317
324
 
318
- ._suffixContainer_1w090_272 ._formInput_1w090_98 {
319
- border: none;
320
- border-radius: var(--border-radius) 0 0 var(--border-radius);
321
- }
322
-
323
- ._suffixContainer_1w090_272 ._formInput_1w090_98:focus {
324
- box-shadow: none;
325
- }
326
-
327
- ._suffixContainer_1w090_272 ._suffix_1w090_272 {
325
+ ._suffixContainer_1lvq8_68 ._suffix_1lvq8_68 {
328
326
  padding: 0 2px;
329
327
  background-color: var(--color-gray-100);
330
328
  color: var(--color-gray-500);
@@ -335,8 +333,8 @@ select._formInput_1w090_98 {
335
333
  position: initial;
336
334
  }
337
335
 
338
- ._suffix_1w090_272::-webkit-outer-spin-button,
339
- ._suffix_1w090_272::-webkit-inner-spin-button {
336
+ ._suffix_1lvq8_68::-webkit-outer-spin-button,
337
+ ._suffix_1lvq8_68::-webkit-inner-spin-button {
340
338
  -webkit-appearance: none;
341
339
  appearance: none;
342
340
  margin: 0;
@@ -344,15 +342,13 @@ select._formInput_1w090_98 {
344
342
 
345
343
  /* Firefox */
346
344
 
347
- ._suffix_1w090_272[type='number'] {
345
+ ._suffix_1lvq8_68[type='number'] {
348
346
  -webkit-appearance: textfield;
349
347
  -moz-appearance: textfield;
350
348
  appearance: textfield;
351
349
  }
352
350
 
353
- /* stylelint-enable no-descending-specificity */
354
-
355
- ._iconFieldIcon_1w090_317 {
351
+ ._iconFieldIcon_1lvq8_313 {
356
352
  position: absolute;
357
353
  fill: var(--color-gray-600);
358
354
  top: 50%;
@@ -360,31 +356,31 @@ select._formInput_1w090_98 {
360
356
  left: 1rem;
361
357
  }
362
358
 
363
- ._formInputTiny_1w090_325 {
359
+ ._formInputTiny_1lvq8_321 {
364
360
  padding: 0.1rem 0.6rem;
365
361
  height: 2.4rem;
366
362
  }
367
363
 
368
- ._iconField_1w090_98 {
364
+ ._iconField_1lvq8_64 {
369
365
  position: relative;
370
366
  }
371
367
 
372
- ._requiredAsterisk_1w090_334 {
368
+ ._requiredAsterisk_1lvq8_330 {
373
369
  color: var(--color-system-red-700);
374
370
  }
375
371
 
376
- ._fieldSet_1w090_338 {
372
+ ._fieldSet_1lvq8_334 {
377
373
  border: none;
378
374
  margin: 2rem 0;
379
375
  padding: 0;
380
376
  }
381
377
 
382
- ._compactTextField_1w090_48 {
378
+ ._compactTextField_1lvq8_98 {
383
379
  position: relative;
384
380
  width: 100%;
385
381
  }
386
382
 
387
- ._compactTextField_1w090_48._isActive_1w090_349 ._label_1w090_32 {
383
+ ._compactTextField_1lvq8_98._isActive_1lvq8_345 ._label_1lvq8_82 {
388
384
  border-radius: var(--border-radius);
389
385
  opacity: 1;
390
386
  pointer-events: auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/form",
3
- "version": "0.6.10",
3
+ "version": "0.6.12",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "source": "src/index.ts",
28
28
  "dependencies": {
29
- "@launchpad-ui/icons": "~0.5.7",
29
+ "@launchpad-ui/icons": "~0.5.8",
30
30
  "@launchpad-ui/tokens": "~0.1.5",
31
31
  "@react-aria/visually-hidden": "^3.5.0",
32
32
  "classix": "^2.1.13"