@launchpad-ui/form 0.6.24 → 0.6.26

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 +29 -29
  2. package/dist/index.js +29 -29
  3. package/dist/style.css +99 -94
  4. package/package.json +3 -3
package/dist/index.es.js CHANGED
@@ -3,34 +3,34 @@ 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_bwb37_1";
7
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_bwb37_9";
8
- const formInline = "_formInline_bwb37_13";
9
- const form = "_form_bwb37_1";
10
- const formInput = "_formInput_bwb37_27";
11
- const isFocused = "_isFocused_bwb37_47";
12
- const iconField = "_iconField_bwb37_64";
13
- const suffixContainer = "_suffixContainer_bwb37_68";
14
- const inlineForm = "_inlineForm_bwb37_77";
15
- const label = "_label_bwb37_82";
16
- const labelDisabled = "_labelDisabled_bwb37_88";
17
- const labelOptional = "_labelOptional_bwb37_92";
18
- const compactTextField = "_compactTextField_bwb37_98";
19
- const fieldError = "_fieldError_bwb37_122";
20
- const isInvalid = "_isInvalid_bwb37_148";
21
- const hint = "_hint_bwb37_170";
22
- const field = "_field_bwb37_122";
23
- const fieldErrorMessage = "_fieldErrorMessage_bwb37_190";
24
- const isDisabled = "_isDisabled_bwb37_203";
25
- const checkbox = "_checkbox_bwb37_265";
26
- const radio = "_radio_bwb37_272";
27
- const number = "_number_bwb37_276";
28
- const suffix = "_suffix_bwb37_68";
29
- const iconFieldIcon = "_iconFieldIcon_bwb37_314";
30
- const formInputTiny = "_formInputTiny_bwb37_322";
31
- const requiredAsterisk = "_requiredAsterisk_bwb37_331";
32
- const fieldSet = "_fieldSet_bwb37_335";
33
- const isActive = "_isActive_bwb37_346";
6
+ const formGroup = "_formGroup_1wcaw_1";
7
+ const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1wcaw_9";
8
+ const formInline = "_formInline_1wcaw_13";
9
+ const form = "_form_1wcaw_1";
10
+ const formInput = "_formInput_1wcaw_27";
11
+ const isFocused = "_isFocused_1wcaw_47";
12
+ const iconField = "_iconField_1wcaw_64";
13
+ const suffixContainer = "_suffixContainer_1wcaw_68";
14
+ const isInvalid = "_isInvalid_1wcaw_73";
15
+ const inlineForm = "_inlineForm_1wcaw_84";
16
+ const label = "_label_1wcaw_89";
17
+ const labelDisabled = "_labelDisabled_1wcaw_95";
18
+ const labelOptional = "_labelOptional_1wcaw_103";
19
+ const compactTextField = "_compactTextField_1wcaw_109";
20
+ const fieldError = "_fieldError_1wcaw_133";
21
+ const hint = "_hint_1wcaw_175";
22
+ const field = "_field_1wcaw_133";
23
+ const fieldErrorMessage = "_fieldErrorMessage_1wcaw_195";
24
+ const isDisabled = "_isDisabled_1wcaw_208";
25
+ const checkbox = "_checkbox_1wcaw_270";
26
+ const radio = "_radio_1wcaw_277";
27
+ const number = "_number_1wcaw_281";
28
+ const suffix = "_suffix_1wcaw_68";
29
+ const iconFieldIcon = "_iconFieldIcon_1wcaw_319";
30
+ const formInputTiny = "_formInputTiny_1wcaw_327";
31
+ const requiredAsterisk = "_requiredAsterisk_1wcaw_336";
32
+ const fieldSet = "_fieldSet_1wcaw_340";
33
+ const isActive = "_isActive_1wcaw_351";
34
34
  const styles = {
35
35
  formGroup,
36
36
  formIncreasedErrorMargin,
@@ -40,13 +40,13 @@ const styles = {
40
40
  isFocused,
41
41
  iconField,
42
42
  suffixContainer,
43
+ isInvalid,
43
44
  inlineForm,
44
45
  label,
45
46
  labelDisabled,
46
47
  labelOptional,
47
48
  compactTextField,
48
49
  fieldError,
49
- isInvalid,
50
50
  hint,
51
51
  field,
52
52
  fieldErrorMessage,
package/dist/index.js CHANGED
@@ -5,34 +5,34 @@ 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_bwb37_1";
9
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_bwb37_9";
10
- const formInline = "_formInline_bwb37_13";
11
- const form = "_form_bwb37_1";
12
- const formInput = "_formInput_bwb37_27";
13
- const isFocused = "_isFocused_bwb37_47";
14
- const iconField = "_iconField_bwb37_64";
15
- const suffixContainer = "_suffixContainer_bwb37_68";
16
- const inlineForm = "_inlineForm_bwb37_77";
17
- const label = "_label_bwb37_82";
18
- const labelDisabled = "_labelDisabled_bwb37_88";
19
- const labelOptional = "_labelOptional_bwb37_92";
20
- const compactTextField = "_compactTextField_bwb37_98";
21
- const fieldError = "_fieldError_bwb37_122";
22
- const isInvalid = "_isInvalid_bwb37_148";
23
- const hint = "_hint_bwb37_170";
24
- const field = "_field_bwb37_122";
25
- const fieldErrorMessage = "_fieldErrorMessage_bwb37_190";
26
- const isDisabled = "_isDisabled_bwb37_203";
27
- const checkbox = "_checkbox_bwb37_265";
28
- const radio = "_radio_bwb37_272";
29
- const number = "_number_bwb37_276";
30
- const suffix = "_suffix_bwb37_68";
31
- const iconFieldIcon = "_iconFieldIcon_bwb37_314";
32
- const formInputTiny = "_formInputTiny_bwb37_322";
33
- const requiredAsterisk = "_requiredAsterisk_bwb37_331";
34
- const fieldSet = "_fieldSet_bwb37_335";
35
- const isActive = "_isActive_bwb37_346";
8
+ const formGroup = "_formGroup_1wcaw_1";
9
+ const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1wcaw_9";
10
+ const formInline = "_formInline_1wcaw_13";
11
+ const form = "_form_1wcaw_1";
12
+ const formInput = "_formInput_1wcaw_27";
13
+ const isFocused = "_isFocused_1wcaw_47";
14
+ const iconField = "_iconField_1wcaw_64";
15
+ const suffixContainer = "_suffixContainer_1wcaw_68";
16
+ const isInvalid = "_isInvalid_1wcaw_73";
17
+ const inlineForm = "_inlineForm_1wcaw_84";
18
+ const label = "_label_1wcaw_89";
19
+ const labelDisabled = "_labelDisabled_1wcaw_95";
20
+ const labelOptional = "_labelOptional_1wcaw_103";
21
+ const compactTextField = "_compactTextField_1wcaw_109";
22
+ const fieldError = "_fieldError_1wcaw_133";
23
+ const hint = "_hint_1wcaw_175";
24
+ const field = "_field_1wcaw_133";
25
+ const fieldErrorMessage = "_fieldErrorMessage_1wcaw_195";
26
+ const isDisabled = "_isDisabled_1wcaw_208";
27
+ const checkbox = "_checkbox_1wcaw_270";
28
+ const radio = "_radio_1wcaw_277";
29
+ const number = "_number_1wcaw_281";
30
+ const suffix = "_suffix_1wcaw_68";
31
+ const iconFieldIcon = "_iconFieldIcon_1wcaw_319";
32
+ const formInputTiny = "_formInputTiny_1wcaw_327";
33
+ const requiredAsterisk = "_requiredAsterisk_1wcaw_336";
34
+ const fieldSet = "_fieldSet_1wcaw_340";
35
+ const isActive = "_isActive_1wcaw_351";
36
36
  const styles = {
37
37
  formGroup,
38
38
  formIncreasedErrorMargin,
@@ -42,13 +42,13 @@ const styles = {
42
42
  isFocused,
43
43
  iconField,
44
44
  suffixContainer,
45
+ isInvalid,
45
46
  inlineForm,
46
47
  label,
47
48
  labelDisabled,
48
49
  labelOptional,
49
50
  compactTextField,
50
51
  fieldError,
51
- isInvalid,
52
52
  hint,
53
53
  field,
54
54
  fieldErrorMessage,
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
- ._formGroup_bwb37_1 {
1
+ ._formGroup_1wcaw_1 {
2
2
  margin: 2rem 0;
3
3
  padding: 0;
4
4
  border: none;
@@ -7,57 +7,57 @@
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_bwb37_9 ._formGroup_bwb37_1 {
10
+ ._formIncreasedErrorMargin_1wcaw_9 ._formGroup_1wcaw_1 {
11
11
  margin: 2.8rem 0;
12
12
  }
13
13
 
14
- ._formInline_bwb37_13 ._formGroup_bwb37_1 {
14
+ ._formInline_1wcaw_13 ._formGroup_1wcaw_1 {
15
15
  display: inline-block;
16
16
  vertical-align: middle;
17
17
  margin: 0;
18
18
  }
19
19
 
20
- ._form_bwb37_1 ._formGroup_bwb37_1:first-child {
20
+ ._form_1wcaw_1 ._formGroup_1wcaw_1:first-child {
21
21
  margin-top: 0;
22
22
  }
23
23
 
24
- ._form_bwb37_1 ._formGroup_bwb37_1:last-child {
24
+ ._form_1wcaw_1 ._formGroup_1wcaw_1:last-child {
25
25
  margin-bottom: 0;
26
26
  }
27
27
 
28
- ._formInput_bwb37_27 {
28
+ ._formInput_1wcaw_27 {
29
29
  display: block;
30
30
  width: 100%;
31
31
  padding: 0.6rem 1rem;
32
32
  font-size: 1.3rem;
33
33
  font-family: var(--lp-font-family-base);
34
34
  line-height: var(--lp-line-height-300);
35
- background-color: var(--lp-color-bg-interactive-secondary);
35
+ background-color: var(--lp-color-bg-field);
36
36
  color: var(--lp-color-text-ui-primary);
37
- border: 1px solid var(--lp-color-border-interactive-secondary);
37
+ border: 1px solid var(--lp-color-border-field);
38
38
  border-radius: var(--lp-border-radius-regular);
39
39
  transition: all var(--lp-duration-100) linear;
40
40
  height: 3.2rem;
41
41
  }
42
42
 
43
- ._formInput_bwb37_27:-moz-placeholder-shown {
43
+ ._formInput_1wcaw_27:-moz-placeholder-shown {
44
44
  overflow: hidden;
45
45
  text-overflow: ellipsis;
46
46
  }
47
47
 
48
- ._formInput_bwb37_27:placeholder-shown {
48
+ ._formInput_1wcaw_27:placeholder-shown {
49
49
  overflow: hidden;
50
50
  text-overflow: ellipsis;
51
51
  }
52
52
 
53
- ._formInput_bwb37_27._isFocused_bwb37_47,
54
- ._formInput_bwb37_27:focus {
53
+ ._formInput_1wcaw_27._isFocused_1wcaw_47,
54
+ ._formInput_1wcaw_27:focus {
55
55
  outline: 0;
56
- border-color: var(--lp-color-border-interactive-focus);
56
+ border-color: var(--lp-color-border-field-focus);
57
57
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
58
58
  }
59
59
 
60
- select._formInput_bwb37_27 {
60
+ select._formInput_1wcaw_27 {
61
61
  -webkit-appearance: none;
62
62
  -moz-appearance: none;
63
63
  appearance: none;
@@ -69,41 +69,52 @@ select._formInput_bwb37_27 {
69
69
  padding-right: 2rem;
70
70
  }
71
71
 
72
- ._iconField_bwb37_64 ._formInput_bwb37_27 {
72
+ ._iconField_1wcaw_64 ._formInput_1wcaw_27 {
73
73
  padding-left: 3rem;
74
74
  }
75
75
 
76
- ._suffixContainer_bwb37_68 ._formInput_bwb37_27 {
76
+ ._suffixContainer_1wcaw_68 ._formInput_1wcaw_27 {
77
77
  border: none;
78
78
  border-radius: var(--lp-border-radius-regular) 0 0 var(--lp-border-radius-regular);
79
79
  }
80
80
 
81
- ._suffixContainer_bwb37_68 ._formInput_bwb37_27:focus {
81
+ ._isInvalid_1wcaw_73 ._formInput_1wcaw_27,
82
+ ._form_1wcaw_1 ._isInvalid_1wcaw_73 .Select-control,
83
+ ._form_1wcaw_1 ._isInvalid_1wcaw_73 .CustomSelect > div,
84
+ ._form_1wcaw_1 ._isInvalid_1wcaw_73 ._formInput_1wcaw_27 {
85
+ border-color: var(--lp-color-border-field-error);
86
+ }
87
+
88
+ ._suffixContainer_1wcaw_68 ._formInput_1wcaw_27:focus {
82
89
  box-shadow: none;
83
90
  }
84
91
 
85
- ._inlineForm_bwb37_77 ._formGroup_bwb37_1 + ._formGroup_bwb37_1,
86
- ._inlineForm_bwb37_77 ._formGroup_bwb37_1 + .Button {
92
+ ._inlineForm_1wcaw_84 ._formGroup_1wcaw_1 + ._formGroup_1wcaw_1,
93
+ ._inlineForm_1wcaw_84 ._formGroup_1wcaw_1 + .Button {
87
94
  margin-left: 1rem;
88
95
  }
89
96
 
90
- ._label_bwb37_82 {
97
+ ._label_1wcaw_89 {
91
98
  font-size: 1.3rem;
92
99
  font-family: var(--lp-font-family-base);
93
100
  word-break: break-word;
94
101
  }
95
102
 
96
- ._labelDisabled_bwb37_88 {
103
+ ._labelDisabled_1wcaw_95 {
97
104
  color: var(--lp-color-gray-800);
98
105
  }
99
106
 
100
- ._labelOptional_bwb37_92 {
107
+ ._labelDisabled_1wcaw_95 :root[data-theme='dark'] {
108
+ color: var(--lp-color-gray-400);
109
+ }
110
+
111
+ ._labelOptional_1wcaw_103 {
101
112
  margin-left: 0.4em;
102
113
  color: var(--lp-color-text-ui-secondary);
103
114
  fill: var(--lp-color-text-ui-secondary);
104
115
  }
105
116
 
106
- ._compactTextField_bwb37_98 ._label_bwb37_82 {
117
+ ._compactTextField_1wcaw_109 ._label_1wcaw_89 {
107
118
  position: absolute;
108
119
  top: -2px;
109
120
  left: 10px;
@@ -117,17 +128,17 @@ select._formInput_bwb37_27 {
117
128
  z-index: 1; /* Fixes layout issue in Firefox */
118
129
  }
119
130
 
120
- ._formGroup_bwb37_1 ._label_bwb37_82 {
131
+ ._formGroup_1wcaw_1 ._label_1wcaw_89 {
121
132
  display: flex;
122
133
  align-items: center;
123
134
  margin-bottom: 0.2rem;
124
135
  }
125
136
 
126
- ._formGroup_bwb37_1 ._label_bwb37_82 + ._label_bwb37_82 {
137
+ ._formGroup_1wcaw_1 ._label_1wcaw_89 + ._label_1wcaw_89 {
127
138
  margin-top: 0.5rem;
128
139
  }
129
140
 
130
- ._fieldError_bwb37_122 {
141
+ ._fieldError_1wcaw_133 {
131
142
  color: var(--lp-color-text-feedback-error);
132
143
  font-size: 1.3rem;
133
144
  }
@@ -135,52 +146,46 @@ select._formInput_bwb37_27 {
135
146
  /* The margin for .formGroup and the min-height of .form-fieldError
136
147
  should be equal to avoid content shift when errors are shown */
137
148
 
138
- ._formIncreasedErrorMargin_bwb37_9 ._fieldError_bwb37_122 {
149
+ ._formIncreasedErrorMargin_1wcaw_9 ._fieldError_1wcaw_133 {
139
150
  min-height: 2.8rem;
140
151
  }
141
152
 
142
- ._label_bwb37_82 ._fieldError_bwb37_122 {
153
+ ._label_1wcaw_89 ._fieldError_1wcaw_133 {
143
154
  float: right;
144
155
  }
145
156
 
146
- ._form_bwb37_1:not(._inlineForm_bwb37_77) ._fieldError_bwb37_122 {
157
+ ._form_1wcaw_1:not(._inlineForm_1wcaw_84) ._fieldError_1wcaw_133 {
147
158
  display: block;
148
159
  padding-top: 0.5rem;
149
160
  text-align: left;
150
161
  }
151
162
 
152
- ._formIncreasedErrorMargin_bwb37_9:not(._inlineForm_bwb37_77) ._fieldError_bwb37_122 {
163
+ ._formIncreasedErrorMargin_1wcaw_9:not(._inlineForm_1wcaw_84) ._fieldError_1wcaw_133 {
153
164
  padding-top: 0.1rem;
154
165
  padding-bottom: 0.5rem;
155
166
  }
156
167
 
157
- ._form_bwb37_1 ._isInvalid_bwb37_148 ._label_bwb37_82 {
168
+ ._form_1wcaw_1 ._isInvalid_1wcaw_73 ._label_1wcaw_89 {
158
169
  color: var(--lp-color-text-feedback-error);
159
170
  }
160
171
 
161
172
  ::-moz-placeholder {
162
- color: var(--lp-color-gray-600);
173
+ color: var(--lp-color-text-field-placeholder);
163
174
  }
164
175
 
165
176
  ::placeholder {
166
- color: var(--lp-color-gray-600);
177
+ color: var(--lp-color-text-field-placeholder);
167
178
  }
168
179
 
169
- ._form_bwb37_1 ._isInvalid_bwb37_148 .Select-control,
170
- ._form_bwb37_1 ._isInvalid_bwb37_148 .CustomSelect > div,
171
- ._form_bwb37_1 ._isInvalid_bwb37_148 ._formInput_bwb37_27 {
172
- border-color: var(--lp-color-system-red-600);
173
- }
174
-
175
- ._formIncreasedErrorMargin_bwb37_9 ._formGroup_bwb37_1._isInvalid_bwb37_148 {
180
+ ._formIncreasedErrorMargin_1wcaw_9 ._formGroup_1wcaw_1._isInvalid_1wcaw_73 {
176
181
  margin-bottom: 0;
177
182
  }
178
183
 
179
- ._formIncreasedErrorMargin_bwb37_9 ._formGroup_bwb37_1._isInvalid_bwb37_148 + ._formGroup_bwb37_1 {
184
+ ._formIncreasedErrorMargin_1wcaw_9 ._formGroup_1wcaw_1._isInvalid_1wcaw_73 + ._formGroup_1wcaw_1 {
180
185
  margin-top: 0;
181
186
  }
182
187
 
183
- ._hint_bwb37_170 {
188
+ ._hint_1wcaw_175 {
184
189
  display: block;
185
190
  margin-top: 0.3rem;
186
191
  font-size: 1.3rem;
@@ -188,66 +193,66 @@ select._formInput_bwb37_27 {
188
193
  color: var(--lp-color-text-ui-secondary);
189
194
  }
190
195
 
191
- ._field_bwb37_122 ._hint_bwb37_170 {
196
+ ._field_1wcaw_133 ._hint_1wcaw_175 {
192
197
  margin: 0;
193
198
  font-size: 1.3rem;
194
199
  color: var(--lp-color-text-ui-secondary);
195
200
  fill: var(--lp-color-text-ui-secondary);
196
201
  }
197
202
 
198
- ._form_bwb37_1 ._field_bwb37_122 label,
199
- ._form_bwb37_1 ._field_bwb37_122 ._isInvalid_bwb37_148 label {
203
+ ._form_1wcaw_1 ._field_1wcaw_133 label,
204
+ ._form_1wcaw_1 ._field_1wcaw_133 ._isInvalid_1wcaw_73 label {
200
205
  color: var(--lp-color-text-ui-primary);
201
206
  }
202
207
 
203
- ._fieldErrorMessage_bwb37_190 {
208
+ ._fieldErrorMessage_1wcaw_195 {
204
209
  color: var(--lp-color-text-feedback-error);
205
210
  font-size: 1.3rem;
206
211
  }
207
212
 
208
- ._field_bwb37_122._formGroup_bwb37_1 {
213
+ ._field_1wcaw_133._formGroup_1wcaw_1 {
209
214
  margin: 1rem 0;
210
215
  }
211
216
 
212
- ._field_bwb37_122._formGroup_bwb37_1:first-child {
217
+ ._field_1wcaw_133._formGroup_1wcaw_1:first-child {
213
218
  margin-top: 0;
214
219
  }
215
220
 
216
- input._formInput_bwb37_27:-moz-read-only {
217
- background-color: var(--lp-color-bg-interactive-disabled);
218
- color: var(--lp-color-text-interactive-disabled);
221
+ input._formInput_1wcaw_27:-moz-read-only {
222
+ background-color: var(--lp-color-bg-field-disabled);
223
+ color: var(--lp-color-text-field-disabled);
219
224
  }
220
225
 
221
- ._formInput_bwb37_27._isDisabled_bwb37_203,
222
- input._formInput_bwb37_27:disabled,
223
- select._formInput_bwb37_27:disabled,
224
- input._formInput_bwb37_27:read-only {
225
- background-color: var(--lp-color-bg-interactive-disabled);
226
- color: var(--lp-color-text-interactive-disabled);
226
+ ._formInput_1wcaw_27._isDisabled_1wcaw_208,
227
+ input._formInput_1wcaw_27:disabled,
228
+ select._formInput_1wcaw_27:disabled,
229
+ input._formInput_1wcaw_27:read-only {
230
+ background-color: var(--lp-color-bg-field-disabled);
231
+ color: var(--lp-color-text-field-disabled);
227
232
  }
228
233
 
229
- ._formInput_bwb37_27._isDisabled_bwb37_203:hover,
230
- ._formInput_bwb37_27:disabled:hover {
234
+ ._formInput_1wcaw_27._isDisabled_1wcaw_208:hover,
235
+ ._formInput_1wcaw_27:disabled:hover {
231
236
  cursor: not-allowed;
232
237
  }
233
238
 
234
- textarea._formInput_bwb37_27 {
239
+ textarea._formInput_1wcaw_27 {
235
240
  min-height: 2.5em;
236
241
  height: auto;
237
242
  resize: none;
238
243
  }
239
244
 
240
- textarea._formInput_bwb37_27:-moz-read-only {
241
- background-color: var(--lp-color-bg-interactive-disabled);
245
+ textarea._formInput_1wcaw_27:-moz-read-only {
246
+ background-color: var(--lp-color-bg-field-disabled);
242
247
  }
243
248
 
244
- textarea._formInput_bwb37_27:disabled,
245
- textarea._formInput_bwb37_27:read-only {
246
- background-color: var(--lp-color-bg-interactive-disabled);
249
+ textarea._formInput_1wcaw_27:disabled,
250
+ textarea._formInput_1wcaw_27:read-only {
251
+ background-color: var(--lp-color-bg-field-disabled);
247
252
  }
248
253
 
249
- input._formInput_bwb37_27::-webkit-autofill {
250
- box-shadow: 0 0 0 50px var(--lp-color-bg-interactive-secondary) inset;
254
+ input._formInput_1wcaw_27::-webkit-autofill {
255
+ box-shadow: 0 0 0 50px var(--lp-color-bg-field) inset;
251
256
  }
252
257
 
253
258
  /* Hide the type=search cancel button in Webkit for consistency */
@@ -279,55 +284,55 @@ input[type='checkbox']:disabled {
279
284
  pointer-events: none;
280
285
  }
281
286
 
282
- ._formInput_bwb37_27[readonly],
283
- ._formInput_bwb37_27[readonly]:focus {
287
+ ._formInput_1wcaw_27[readonly],
288
+ ._formInput_1wcaw_27[readonly]:focus {
284
289
  color: var(--lp-color-text-ui-secondary);
285
290
  border-color: var(--lp-color-gray-500);
286
291
  box-shadow: none;
287
292
  }
288
293
 
289
- ._checkbox_bwb37_265 {
294
+ ._checkbox_1wcaw_270 {
290
295
  align-self: flex-start; /* Default for .label is center, but this looks bad on multi-line checkbox labels */
291
296
  flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
292
297
  margin-right: 0.5rem;
293
298
  margin-top: 0.4rem;
294
299
  }
295
300
 
296
- ._radio_bwb37_272 {
301
+ ._radio_1wcaw_277 {
297
302
  margin-right: 0.5rem;
298
303
  }
299
304
 
300
- ._number_bwb37_276 {
305
+ ._number_1wcaw_281 {
301
306
  min-width: 4.5rem;
302
307
  }
303
308
 
304
- ._suffixContainer_bwb37_68 {
309
+ ._suffixContainer_1wcaw_68 {
305
310
  display: inline-flex;
306
- border: 1px solid var(--lp-color-gray-500);
311
+ border: 1px solid var(--lp-color-border-field);
307
312
  border-radius: var(--lp-border-radius-regular);
308
313
  overflow: hidden;
309
314
  transition: all 0.1s linear;
310
315
  }
311
316
 
312
- ._suffixContainer_bwb37_68[focus-within] {
313
- border-color: var(--lp-color-border-interactive-focus);
317
+ ._suffixContainer_1wcaw_68[focus-within] {
318
+ border-color: var(--lp-color-border-field-focus);
314
319
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
315
320
  }
316
321
 
317
- ._suffixContainer_bwb37_68[focus-within] {
318
- border-color: var(--lp-color-border-interactive-focus);
322
+ ._suffixContainer_1wcaw_68[focus-within] {
323
+ border-color: var(--lp-color-border-field-focus);
319
324
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
320
325
  }
321
326
 
322
- ._suffixContainer_bwb37_68:focus-within {
323
- border-color: var(--lp-color-border-interactive-focus);
327
+ ._suffixContainer_1wcaw_68:focus-within {
328
+ border-color: var(--lp-color-border-field-focus);
324
329
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
325
330
  }
326
331
 
327
- ._suffixContainer_bwb37_68 ._suffix_bwb37_68 {
332
+ ._suffixContainer_1wcaw_68 ._suffix_1wcaw_68 {
328
333
  padding: 0 2px;
329
- background-color: var(--lp-color-gray-100);
330
- color: var(--lp-color-gray-500);
334
+ background-color: var(--lp-color-bg-field-aside);
335
+ color: var(--lp-color-text-ui-secondary);
331
336
  cursor: text;
332
337
  display: inline-flex;
333
338
  align-items: center;
@@ -335,8 +340,8 @@ input[type='checkbox']:disabled {
335
340
  position: initial;
336
341
  }
337
342
 
338
- ._suffix_bwb37_68::-webkit-outer-spin-button,
339
- ._suffix_bwb37_68::-webkit-inner-spin-button {
343
+ ._suffix_1wcaw_68::-webkit-outer-spin-button,
344
+ ._suffix_1wcaw_68::-webkit-inner-spin-button {
340
345
  -webkit-appearance: none;
341
346
  appearance: none;
342
347
  margin: 0;
@@ -344,45 +349,45 @@ input[type='checkbox']:disabled {
344
349
 
345
350
  /* Firefox */
346
351
 
347
- ._suffix_bwb37_68[type='number'] {
352
+ ._suffix_1wcaw_68[type='number'] {
348
353
  -webkit-appearance: textfield;
349
354
  -moz-appearance: textfield;
350
355
  appearance: textfield;
351
356
  }
352
357
 
353
- ._iconFieldIcon_bwb37_314 {
358
+ ._iconFieldIcon_1wcaw_319 {
354
359
  position: absolute;
355
- fill: var(--lp-color-gray-600);
360
+ fill: var(--lp-color-fill-field);
356
361
  top: 50%;
357
362
  transform: translateY(-50%);
358
363
  left: 1rem;
359
364
  }
360
365
 
361
- ._formInputTiny_bwb37_322 {
366
+ ._formInputTiny_1wcaw_327 {
362
367
  padding: 0.1rem 0.6rem;
363
368
  height: 2.4rem;
364
369
  }
365
370
 
366
- ._iconField_bwb37_64 {
371
+ ._iconField_1wcaw_64 {
367
372
  position: relative;
368
373
  }
369
374
 
370
- ._requiredAsterisk_bwb37_331 {
375
+ ._requiredAsterisk_1wcaw_336 {
371
376
  color: var(--lp-color-text-feedback-error);
372
377
  }
373
378
 
374
- ._fieldSet_bwb37_335 {
379
+ ._fieldSet_1wcaw_340 {
375
380
  border: none;
376
381
  margin: 2rem 0;
377
382
  padding: 0;
378
383
  }
379
384
 
380
- ._compactTextField_bwb37_98 {
385
+ ._compactTextField_1wcaw_109 {
381
386
  position: relative;
382
387
  width: 100%;
383
388
  }
384
389
 
385
- ._compactTextField_bwb37_98._isActive_bwb37_346 ._label_bwb37_82 {
390
+ ._compactTextField_1wcaw_109._isActive_1wcaw_351 ._label_1wcaw_89 {
386
391
  border-radius: var(--lp-border-radius-regular);
387
392
  opacity: 1;
388
393
  pointer-events: auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/form",
3
- "version": "0.6.24",
3
+ "version": "0.6.26",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -28,8 +28,8 @@
28
28
  "dependencies": {
29
29
  "@react-aria/visually-hidden": "^3.6.0",
30
30
  "classix": "^2.1.13",
31
- "@launchpad-ui/icons": "~0.6.9",
32
- "@launchpad-ui/tokens": "~0.4.3"
31
+ "@launchpad-ui/icons": "~0.6.11",
32
+ "@launchpad-ui/tokens": "~0.4.5"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": "^18.0.0",