@launchpad-ui/form 0.6.14 → 0.6.16

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.
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_1cqcq_1";
7
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1cqcq_9";
8
- const formInline = "_formInline_1cqcq_13";
9
- const form = "_form_1cqcq_1";
10
- const formInput = "_formInput_1cqcq_27";
11
- const isFocused = "_isFocused_1cqcq_47";
12
- const iconField = "_iconField_1cqcq_64";
13
- const suffixContainer = "_suffixContainer_1cqcq_68";
14
- const inlineForm = "_inlineForm_1cqcq_77";
15
- const label = "_label_1cqcq_82";
16
- const labelDisabled = "_labelDisabled_1cqcq_88";
17
- const labelOptional = "_labelOptional_1cqcq_92";
18
- const compactTextField = "_compactTextField_1cqcq_98";
19
- const fieldError = "_fieldError_1cqcq_122";
20
- const isInvalid = "_isInvalid_1cqcq_148";
21
- const hint = "_hint_1cqcq_170";
22
- const field = "_field_1cqcq_122";
23
- const fieldErrorMessage = "_fieldErrorMessage_1cqcq_190";
24
- const isDisabled = "_isDisabled_1cqcq_203";
25
- const checkbox = "_checkbox_1cqcq_264";
26
- const radio = "_radio_1cqcq_271";
27
- const number = "_number_1cqcq_275";
28
- const suffix = "_suffix_1cqcq_68";
29
- const iconFieldIcon = "_iconFieldIcon_1cqcq_313";
30
- const formInputTiny = "_formInputTiny_1cqcq_321";
31
- const requiredAsterisk = "_requiredAsterisk_1cqcq_330";
32
- const fieldSet = "_fieldSet_1cqcq_334";
33
- const isActive = "_isActive_1cqcq_345";
6
+ const formGroup = "_formGroup_12e89_1";
7
+ const formIncreasedErrorMargin = "_formIncreasedErrorMargin_12e89_9";
8
+ const formInline = "_formInline_12e89_13";
9
+ const form = "_form_12e89_1";
10
+ const formInput = "_formInput_12e89_27";
11
+ const isFocused = "_isFocused_12e89_47";
12
+ const iconField = "_iconField_12e89_64";
13
+ const suffixContainer = "_suffixContainer_12e89_68";
14
+ const inlineForm = "_inlineForm_12e89_77";
15
+ const label = "_label_12e89_82";
16
+ const labelDisabled = "_labelDisabled_12e89_88";
17
+ const labelOptional = "_labelOptional_12e89_92";
18
+ const compactTextField = "_compactTextField_12e89_98";
19
+ const fieldError = "_fieldError_12e89_122";
20
+ const isInvalid = "_isInvalid_12e89_148";
21
+ const hint = "_hint_12e89_170";
22
+ const field = "_field_12e89_122";
23
+ const fieldErrorMessage = "_fieldErrorMessage_12e89_190";
24
+ const isDisabled = "_isDisabled_12e89_203";
25
+ const checkbox = "_checkbox_12e89_265";
26
+ const radio = "_radio_12e89_272";
27
+ const number = "_number_12e89_276";
28
+ const suffix = "_suffix_12e89_68";
29
+ const iconFieldIcon = "_iconFieldIcon_12e89_314";
30
+ const formInputTiny = "_formInputTiny_12e89_322";
31
+ const requiredAsterisk = "_requiredAsterisk_12e89_331";
32
+ const fieldSet = "_fieldSet_12e89_335";
33
+ const isActive = "_isActive_12e89_346";
34
34
  const styles = {
35
35
  formGroup,
36
36
  formIncreasedErrorMargin,
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_1cqcq_1";
9
- const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1cqcq_9";
10
- const formInline = "_formInline_1cqcq_13";
11
- const form = "_form_1cqcq_1";
12
- const formInput = "_formInput_1cqcq_27";
13
- const isFocused = "_isFocused_1cqcq_47";
14
- const iconField = "_iconField_1cqcq_64";
15
- const suffixContainer = "_suffixContainer_1cqcq_68";
16
- const inlineForm = "_inlineForm_1cqcq_77";
17
- const label = "_label_1cqcq_82";
18
- const labelDisabled = "_labelDisabled_1cqcq_88";
19
- const labelOptional = "_labelOptional_1cqcq_92";
20
- const compactTextField = "_compactTextField_1cqcq_98";
21
- const fieldError = "_fieldError_1cqcq_122";
22
- const isInvalid = "_isInvalid_1cqcq_148";
23
- const hint = "_hint_1cqcq_170";
24
- const field = "_field_1cqcq_122";
25
- const fieldErrorMessage = "_fieldErrorMessage_1cqcq_190";
26
- const isDisabled = "_isDisabled_1cqcq_203";
27
- const checkbox = "_checkbox_1cqcq_264";
28
- const radio = "_radio_1cqcq_271";
29
- const number = "_number_1cqcq_275";
30
- const suffix = "_suffix_1cqcq_68";
31
- const iconFieldIcon = "_iconFieldIcon_1cqcq_313";
32
- const formInputTiny = "_formInputTiny_1cqcq_321";
33
- const requiredAsterisk = "_requiredAsterisk_1cqcq_330";
34
- const fieldSet = "_fieldSet_1cqcq_334";
35
- const isActive = "_isActive_1cqcq_345";
8
+ const formGroup = "_formGroup_12e89_1";
9
+ const formIncreasedErrorMargin = "_formIncreasedErrorMargin_12e89_9";
10
+ const formInline = "_formInline_12e89_13";
11
+ const form = "_form_12e89_1";
12
+ const formInput = "_formInput_12e89_27";
13
+ const isFocused = "_isFocused_12e89_47";
14
+ const iconField = "_iconField_12e89_64";
15
+ const suffixContainer = "_suffixContainer_12e89_68";
16
+ const inlineForm = "_inlineForm_12e89_77";
17
+ const label = "_label_12e89_82";
18
+ const labelDisabled = "_labelDisabled_12e89_88";
19
+ const labelOptional = "_labelOptional_12e89_92";
20
+ const compactTextField = "_compactTextField_12e89_98";
21
+ const fieldError = "_fieldError_12e89_122";
22
+ const isInvalid = "_isInvalid_12e89_148";
23
+ const hint = "_hint_12e89_170";
24
+ const field = "_field_12e89_122";
25
+ const fieldErrorMessage = "_fieldErrorMessage_12e89_190";
26
+ const isDisabled = "_isDisabled_12e89_203";
27
+ const checkbox = "_checkbox_12e89_265";
28
+ const radio = "_radio_12e89_272";
29
+ const number = "_number_12e89_276";
30
+ const suffix = "_suffix_12e89_68";
31
+ const iconFieldIcon = "_iconFieldIcon_12e89_314";
32
+ const formInputTiny = "_formInputTiny_12e89_322";
33
+ const requiredAsterisk = "_requiredAsterisk_12e89_331";
34
+ const fieldSet = "_fieldSet_12e89_335";
35
+ const isActive = "_isActive_12e89_346";
36
36
  const styles = {
37
37
  formGroup,
38
38
  formIncreasedErrorMargin,
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
- ._formGroup_1cqcq_1 {
1
+ ._formGroup_12e89_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_1cqcq_9 ._formGroup_1cqcq_1 {
10
+ ._formIncreasedErrorMargin_12e89_9 ._formGroup_12e89_1 {
11
11
  margin: 2.8rem 0;
12
12
  }
13
13
 
14
- ._formInline_1cqcq_13 ._formGroup_1cqcq_1 {
14
+ ._formInline_12e89_13 ._formGroup_12e89_1 {
15
15
  display: inline-block;
16
16
  vertical-align: middle;
17
17
  margin: 0;
18
18
  }
19
19
 
20
- ._form_1cqcq_1 ._formGroup_1cqcq_1:first-child {
20
+ ._form_12e89_1 ._formGroup_12e89_1:first-child {
21
21
  margin-top: 0;
22
22
  }
23
23
 
24
- ._form_1cqcq_1 ._formGroup_1cqcq_1:last-child {
24
+ ._form_12e89_1 ._formGroup_12e89_1:last-child {
25
25
  margin-bottom: 0;
26
26
  }
27
27
 
28
- ._formInput_1cqcq_27 {
28
+ ._formInput_12e89_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-background-field);
36
- color: var(--lp-color-text);
37
- border: 1px solid var(--lp-color-gray-500);
35
+ background-color: var(--lp-color-bg-interactive-secondary);
36
+ color: var(--lp-color-text-ui-primary);
37
+ border: 1px solid var(--lp-color-border-interactive-secondary);
38
38
  border-radius: var(--lp-border-radius);
39
39
  transition: all 100ms linear;
40
40
  height: 3.2rem;
41
41
  }
42
42
 
43
- ._formInput_1cqcq_27:-moz-placeholder-shown {
43
+ ._formInput_12e89_27:-moz-placeholder-shown {
44
44
  overflow: hidden;
45
45
  text-overflow: ellipsis;
46
46
  }
47
47
 
48
- ._formInput_1cqcq_27:placeholder-shown {
48
+ ._formInput_12e89_27:placeholder-shown {
49
49
  overflow: hidden;
50
50
  text-overflow: ellipsis;
51
51
  }
52
52
 
53
- ._formInput_1cqcq_27._isFocused_1cqcq_47,
54
- ._formInput_1cqcq_27:focus {
53
+ ._formInput_12e89_27._isFocused_12e89_47,
54
+ ._formInput_12e89_27:focus {
55
55
  outline: 0;
56
- border-color: var(--lp-color-focus);
56
+ border-color: var(--lp-color-border-interactive-focus);
57
57
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
58
58
  }
59
59
 
60
- select._formInput_1cqcq_27 {
60
+ select._formInput_12e89_27 {
61
61
  -webkit-appearance: none;
62
62
  -moz-appearance: none;
63
63
  appearance: none;
@@ -69,93 +69,93 @@ select._formInput_1cqcq_27 {
69
69
  padding-right: 2rem;
70
70
  }
71
71
 
72
- ._iconField_1cqcq_64 ._formInput_1cqcq_27 {
72
+ ._iconField_12e89_64 ._formInput_12e89_27 {
73
73
  padding-left: 3rem;
74
74
  }
75
75
 
76
- ._suffixContainer_1cqcq_68 ._formInput_1cqcq_27 {
76
+ ._suffixContainer_12e89_68 ._formInput_12e89_27 {
77
77
  border: none;
78
78
  border-radius: var(--lp-border-radius) 0 0 var(--lp-border-radius);
79
79
  }
80
80
 
81
- ._suffixContainer_1cqcq_68 ._formInput_1cqcq_27:focus {
81
+ ._suffixContainer_12e89_68 ._formInput_12e89_27:focus {
82
82
  box-shadow: none;
83
83
  }
84
84
 
85
- ._inlineForm_1cqcq_77 ._formGroup_1cqcq_1 + ._formGroup_1cqcq_1,
86
- ._inlineForm_1cqcq_77 ._formGroup_1cqcq_1 + .Button {
85
+ ._inlineForm_12e89_77 ._formGroup_12e89_1 + ._formGroup_12e89_1,
86
+ ._inlineForm_12e89_77 ._formGroup_12e89_1 + .Button {
87
87
  margin-left: 1rem;
88
88
  }
89
89
 
90
- ._label_1cqcq_82 {
90
+ ._label_12e89_82 {
91
91
  font-size: 1.3rem;
92
92
  font-family: var(--lp-font-family-base);
93
93
  word-break: break-word;
94
94
  }
95
95
 
96
- ._labelDisabled_1cqcq_88 {
96
+ ._labelDisabled_12e89_88 {
97
97
  color: var(--lp-color-gray-800);
98
98
  }
99
99
 
100
- ._labelOptional_1cqcq_92 {
100
+ ._labelOptional_12e89_92 {
101
101
  margin-left: 0.4em;
102
- color: var(--lp-color-text-subtle-primary);
103
- fill: var(--lp-color-text-subtle-primary);
102
+ color: var(--lp-color-text-ui-secondary);
103
+ fill: var(--lp-color-text-ui-secondary);
104
104
  }
105
105
 
106
- ._compactTextField_1cqcq_98 ._label_1cqcq_82 {
106
+ ._compactTextField_12e89_98 ._label_12e89_82 {
107
107
  position: absolute;
108
108
  top: -2px;
109
109
  left: 10px;
110
110
  padding: 0 3px;
111
- color: var(--lp-color-text);
111
+ color: var(--lp-color-text-ui-primary);
112
112
  opacity: 0;
113
113
  pointer-events: none;
114
- background-color: var(--lp-color-background);
114
+ background-color: var(--lp-color-bg-ui-primary);
115
115
  transform-origin: 0 0; /* preserve left alignment after scaling */
116
116
  transition: all 100ms ease-in-out;
117
117
  z-index: 1; /* Fixes layout issue in Firefox */
118
118
  }
119
119
 
120
- ._formGroup_1cqcq_1 ._label_1cqcq_82 {
120
+ ._formGroup_12e89_1 ._label_12e89_82 {
121
121
  display: flex;
122
122
  align-items: center;
123
123
  margin-bottom: 0.2rem;
124
124
  }
125
125
 
126
- ._formGroup_1cqcq_1 ._label_1cqcq_82 + ._label_1cqcq_82 {
126
+ ._formGroup_12e89_1 ._label_12e89_82 + ._label_12e89_82 {
127
127
  margin-top: 0.5rem;
128
128
  }
129
129
 
130
- ._fieldError_1cqcq_122 {
131
- color: var(--lp-color-system-red-600);
130
+ ._fieldError_12e89_122 {
131
+ color: var(--lp-color-text-feedback-error);
132
132
  font-size: 1.3rem;
133
133
  }
134
134
 
135
135
  /* The margin for .formGroup and the min-height of .form-fieldError
136
136
  should be equal to avoid content shift when errors are shown */
137
137
 
138
- ._formIncreasedErrorMargin_1cqcq_9 ._fieldError_1cqcq_122 {
138
+ ._formIncreasedErrorMargin_12e89_9 ._fieldError_12e89_122 {
139
139
  min-height: 2.8rem;
140
140
  }
141
141
 
142
- ._label_1cqcq_82 ._fieldError_1cqcq_122 {
142
+ ._label_12e89_82 ._fieldError_12e89_122 {
143
143
  float: right;
144
144
  }
145
145
 
146
- ._form_1cqcq_1:not(._inlineForm_1cqcq_77) ._fieldError_1cqcq_122 {
146
+ ._form_12e89_1:not(._inlineForm_12e89_77) ._fieldError_12e89_122 {
147
147
  display: block;
148
148
  padding-top: 0.5rem;
149
149
  text-align: left;
150
150
  }
151
151
 
152
- ._formIncreasedErrorMargin_1cqcq_9:not(._inlineForm_1cqcq_77) ._fieldError_1cqcq_122 {
152
+ ._formIncreasedErrorMargin_12e89_9:not(._inlineForm_12e89_77) ._fieldError_12e89_122 {
153
153
  padding-top: 0.1rem;
154
154
  padding-bottom: 0.5rem;
155
155
  }
156
156
 
157
- ._form_1cqcq_1 ._isInvalid_1cqcq_148 ._label_1cqcq_82 {
158
- color: var(--lp-color-system-red-600);
157
+ ._form_12e89_1 ._isInvalid_12e89_148 ._label_12e89_82 {
158
+ color: var(--lp-color-text-feedback-error);
159
159
  }
160
160
 
161
161
  ::-moz-placeholder {
@@ -166,86 +166,88 @@ select._formInput_1cqcq_27 {
166
166
  color: var(--lp-color-gray-600);
167
167
  }
168
168
 
169
- ._form_1cqcq_1 ._isInvalid_1cqcq_148 .Select-control,
170
- ._form_1cqcq_1 ._isInvalid_1cqcq_148 .CustomSelect > div,
171
- ._form_1cqcq_1 ._isInvalid_1cqcq_148 ._formInput_1cqcq_27 {
169
+ ._form_12e89_1 ._isInvalid_12e89_148 .Select-control,
170
+ ._form_12e89_1 ._isInvalid_12e89_148 .CustomSelect > div,
171
+ ._form_12e89_1 ._isInvalid_12e89_148 ._formInput_12e89_27 {
172
172
  border-color: var(--lp-color-system-red-600);
173
173
  }
174
174
 
175
- ._formIncreasedErrorMargin_1cqcq_9 ._formGroup_1cqcq_1._isInvalid_1cqcq_148 {
175
+ ._formIncreasedErrorMargin_12e89_9 ._formGroup_12e89_1._isInvalid_12e89_148 {
176
176
  margin-bottom: 0;
177
177
  }
178
178
 
179
- ._formIncreasedErrorMargin_1cqcq_9 ._formGroup_1cqcq_1._isInvalid_1cqcq_148 + ._formGroup_1cqcq_1 {
179
+ ._formIncreasedErrorMargin_12e89_9 ._formGroup_12e89_1._isInvalid_12e89_148 + ._formGroup_12e89_1 {
180
180
  margin-top: 0;
181
181
  }
182
182
 
183
- ._hint_1cqcq_170 {
183
+ ._hint_12e89_170 {
184
184
  display: block;
185
185
  margin-top: 0.3rem;
186
186
  font-size: 1.3rem;
187
187
  font-weight: var(--lp-font-weight-regular);
188
- color: var(--lp-color-text-subtle-primary);
188
+ color: var(--lp-color-text-ui-secondary);
189
189
  }
190
190
 
191
- ._field_1cqcq_122 ._hint_1cqcq_170 {
191
+ ._field_12e89_122 ._hint_12e89_170 {
192
192
  margin: 0;
193
193
  font-size: 1.3rem;
194
- color: var(--lp-color-text-subtle-primary);
195
- fill: var(--lp-color-text-subtle-primary);
194
+ color: var(--lp-color-text-ui-secondary);
195
+ fill: var(--lp-color-text-ui-secondary);
196
196
  }
197
197
 
198
- ._form_1cqcq_1 ._field_1cqcq_122 label,
199
- ._form_1cqcq_1 ._field_1cqcq_122 ._isInvalid_1cqcq_148 label {
200
- color: var(--lp-color-text);
198
+ ._form_12e89_1 ._field_12e89_122 label,
199
+ ._form_12e89_1 ._field_12e89_122 ._isInvalid_12e89_148 label {
200
+ color: var(--lp-color-text-ui-primary);
201
201
  }
202
202
 
203
- ._fieldErrorMessage_1cqcq_190 {
204
- color: var(--lp-color-system-red-600);
203
+ ._fieldErrorMessage_12e89_190 {
204
+ color: var(--lp-color-text-feedback-error);
205
205
  font-size: 1.3rem;
206
206
  }
207
207
 
208
- ._field_1cqcq_122._formGroup_1cqcq_1 {
208
+ ._field_12e89_122._formGroup_12e89_1 {
209
209
  margin: 1rem 0;
210
210
  }
211
211
 
212
- ._field_1cqcq_122._formGroup_1cqcq_1:first-child {
212
+ ._field_12e89_122._formGroup_12e89_1:first-child {
213
213
  margin-top: 0;
214
214
  }
215
215
 
216
- input._formInput_1cqcq_27:-moz-read-only {
217
- background-color: var(--lp-color-white-100);
216
+ input._formInput_12e89_27:-moz-read-only {
217
+ background-color: var(--lp-color-bg-interactive-disabled);
218
+ color: var(--lp-color-text-interactive-disabled);
218
219
  }
219
220
 
220
- ._formInput_1cqcq_27._isDisabled_1cqcq_203,
221
- input._formInput_1cqcq_27:disabled,
222
- select._formInput_1cqcq_27:disabled,
223
- input._formInput_1cqcq_27:read-only {
224
- background-color: var(--lp-color-white-100);
221
+ ._formInput_12e89_27._isDisabled_12e89_203,
222
+ input._formInput_12e89_27:disabled,
223
+ select._formInput_12e89_27:disabled,
224
+ input._formInput_12e89_27:read-only {
225
+ background-color: var(--lp-color-bg-interactive-disabled);
226
+ color: var(--lp-color-text-interactive-disabled);
225
227
  }
226
228
 
227
- ._formInput_1cqcq_27._isDisabled_1cqcq_203:hover,
228
- ._formInput_1cqcq_27:disabled:hover {
229
+ ._formInput_12e89_27._isDisabled_12e89_203:hover,
230
+ ._formInput_12e89_27:disabled:hover {
229
231
  cursor: not-allowed;
230
232
  }
231
233
 
232
- textarea._formInput_1cqcq_27 {
234
+ textarea._formInput_12e89_27 {
233
235
  min-height: 2.5em;
234
236
  height: auto;
235
237
  resize: none;
236
238
  }
237
239
 
238
- textarea._formInput_1cqcq_27:-moz-read-only {
239
- background-color: var(--lp-color-white-100);
240
+ textarea._formInput_12e89_27:-moz-read-only {
241
+ background-color: var(--lp-color-bg-interactive-disabled);
240
242
  }
241
243
 
242
- textarea._formInput_1cqcq_27:disabled,
243
- textarea._formInput_1cqcq_27:read-only {
244
- background-color: var(--lp-color-white-100);
244
+ textarea._formInput_12e89_27:disabled,
245
+ textarea._formInput_12e89_27:read-only {
246
+ background-color: var(--lp-color-bg-interactive-disabled);
245
247
  }
246
248
 
247
- input._formInput_1cqcq_27::-webkit-autofill {
248
- box-shadow: 0 0 0 50px var(--lp-color-background-field) inset;
249
+ input._formInput_12e89_27::-webkit-autofill {
250
+ box-shadow: 0 0 0 50px var(--lp-color-bg-interactive-secondary) inset;
249
251
  }
250
252
 
251
253
  /* Hide the type=search cancel button in Webkit for consistency */
@@ -277,29 +279,29 @@ input[type='checkbox']:disabled {
277
279
  pointer-events: none;
278
280
  }
279
281
 
280
- ._formInput_1cqcq_27[readonly],
281
- ._formInput_1cqcq_27[readonly]:focus {
282
- color: var(--lp-color-text-subtle-primary);
282
+ ._formInput_12e89_27[readonly],
283
+ ._formInput_12e89_27[readonly]:focus {
284
+ color: var(--lp-color-text-ui-secondary);
283
285
  border-color: var(--lp-color-gray-500);
284
286
  box-shadow: none;
285
287
  }
286
288
 
287
- ._checkbox_1cqcq_264 {
289
+ ._checkbox_12e89_265 {
288
290
  align-self: flex-start; /* Default for .label is center, but this looks bad on multi-line checkbox labels */
289
291
  flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
290
292
  margin-right: 0.5rem;
291
293
  margin-top: 0.4rem;
292
294
  }
293
295
 
294
- ._radio_1cqcq_271 {
296
+ ._radio_12e89_272 {
295
297
  margin-right: 0.5rem;
296
298
  }
297
299
 
298
- ._number_1cqcq_275 {
300
+ ._number_12e89_276 {
299
301
  min-width: 4.5rem;
300
302
  }
301
303
 
302
- ._suffixContainer_1cqcq_68 {
304
+ ._suffixContainer_12e89_68 {
303
305
  display: inline-flex;
304
306
  border: 1px solid var(--lp-color-gray-500);
305
307
  border-radius: var(--lp-border-radius);
@@ -307,22 +309,22 @@ input[type='checkbox']:disabled {
307
309
  transition: all 0.1s linear;
308
310
  }
309
311
 
310
- ._suffixContainer_1cqcq_68[focus-within] {
311
- border-color: var(--lp-color-focus);
312
+ ._suffixContainer_12e89_68[focus-within] {
313
+ border-color: var(--lp-color-border-interactive-focus);
312
314
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
313
315
  }
314
316
 
315
- ._suffixContainer_1cqcq_68[focus-within] {
316
- border-color: var(--lp-color-focus);
317
+ ._suffixContainer_12e89_68[focus-within] {
318
+ border-color: var(--lp-color-border-interactive-focus);
317
319
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
318
320
  }
319
321
 
320
- ._suffixContainer_1cqcq_68:focus-within {
321
- border-color: var(--lp-color-focus);
322
+ ._suffixContainer_12e89_68:focus-within {
323
+ border-color: var(--lp-color-border-interactive-focus);
322
324
  box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
323
325
  }
324
326
 
325
- ._suffixContainer_1cqcq_68 ._suffix_1cqcq_68 {
327
+ ._suffixContainer_12e89_68 ._suffix_12e89_68 {
326
328
  padding: 0 2px;
327
329
  background-color: var(--lp-color-gray-100);
328
330
  color: var(--lp-color-gray-500);
@@ -333,8 +335,8 @@ input[type='checkbox']:disabled {
333
335
  position: initial;
334
336
  }
335
337
 
336
- ._suffix_1cqcq_68::-webkit-outer-spin-button,
337
- ._suffix_1cqcq_68::-webkit-inner-spin-button {
338
+ ._suffix_12e89_68::-webkit-outer-spin-button,
339
+ ._suffix_12e89_68::-webkit-inner-spin-button {
338
340
  -webkit-appearance: none;
339
341
  appearance: none;
340
342
  margin: 0;
@@ -342,13 +344,13 @@ input[type='checkbox']:disabled {
342
344
 
343
345
  /* Firefox */
344
346
 
345
- ._suffix_1cqcq_68[type='number'] {
347
+ ._suffix_12e89_68[type='number'] {
346
348
  -webkit-appearance: textfield;
347
349
  -moz-appearance: textfield;
348
350
  appearance: textfield;
349
351
  }
350
352
 
351
- ._iconFieldIcon_1cqcq_313 {
353
+ ._iconFieldIcon_12e89_314 {
352
354
  position: absolute;
353
355
  fill: var(--lp-color-gray-600);
354
356
  top: 50%;
@@ -356,31 +358,31 @@ input[type='checkbox']:disabled {
356
358
  left: 1rem;
357
359
  }
358
360
 
359
- ._formInputTiny_1cqcq_321 {
361
+ ._formInputTiny_12e89_322 {
360
362
  padding: 0.1rem 0.6rem;
361
363
  height: 2.4rem;
362
364
  }
363
365
 
364
- ._iconField_1cqcq_64 {
366
+ ._iconField_12e89_64 {
365
367
  position: relative;
366
368
  }
367
369
 
368
- ._requiredAsterisk_1cqcq_330 {
369
- color: var(--lp-color-system-red-700);
370
+ ._requiredAsterisk_12e89_331 {
371
+ color: var(--lp-color-text-feedback-error);
370
372
  }
371
373
 
372
- ._fieldSet_1cqcq_334 {
374
+ ._fieldSet_12e89_335 {
373
375
  border: none;
374
376
  margin: 2rem 0;
375
377
  padding: 0;
376
378
  }
377
379
 
378
- ._compactTextField_1cqcq_98 {
380
+ ._compactTextField_12e89_98 {
379
381
  position: relative;
380
382
  width: 100%;
381
383
  }
382
384
 
383
- ._compactTextField_1cqcq_98._isActive_1cqcq_345 ._label_1cqcq_82 {
385
+ ._compactTextField_12e89_98._isActive_12e89_346 ._label_12e89_82 {
384
386
  border-radius: var(--lp-border-radius);
385
387
  opacity: 1;
386
388
  pointer-events: auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/form",
3
- "version": "0.6.14",
3
+ "version": "0.6.16",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,8 +26,8 @@
26
26
  },
27
27
  "source": "src/index.ts",
28
28
  "dependencies": {
29
- "@launchpad-ui/icons": "~0.6.0",
30
- "@launchpad-ui/tokens": "~0.2.0",
29
+ "@launchpad-ui/icons": "~0.6.2",
30
+ "@launchpad-ui/tokens": "~0.3.1",
31
31
  "@react-aria/visually-hidden": "^3.5.0",
32
32
  "classix": "^2.1.13"
33
33
  },