@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.
- package/dist/index.es.js +32 -32
- package/dist/index.js +32 -32
- package/dist/style.css +120 -124
- 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 = "
|
7
|
-
const formIncreasedErrorMargin = "
|
8
|
-
const formInline = "
|
9
|
-
const form = "
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
const
|
16
|
-
const
|
17
|
-
const
|
18
|
-
const
|
19
|
-
const
|
20
|
-
const
|
21
|
-
const
|
22
|
-
const
|
23
|
-
const
|
24
|
-
const
|
25
|
-
const
|
26
|
-
const
|
27
|
-
const
|
28
|
-
const suffix = "
|
29
|
-
const iconFieldIcon = "
|
30
|
-
const formInputTiny = "
|
31
|
-
const requiredAsterisk = "
|
32
|
-
const fieldSet = "
|
33
|
-
const isActive = "
|
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 = "
|
9
|
-
const formIncreasedErrorMargin = "
|
10
|
-
const formInline = "
|
11
|
-
const form = "
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
const
|
16
|
-
const
|
17
|
-
const
|
18
|
-
const
|
19
|
-
const
|
20
|
-
const
|
21
|
-
const
|
22
|
-
const
|
23
|
-
const
|
24
|
-
const
|
25
|
-
const
|
26
|
-
const
|
27
|
-
const
|
28
|
-
const
|
29
|
-
const
|
30
|
-
const suffix = "
|
31
|
-
const iconFieldIcon = "
|
32
|
-
const formInputTiny = "
|
33
|
-
const requiredAsterisk = "
|
34
|
-
const fieldSet = "
|
35
|
-
const isActive = "
|
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
|
-
.
|
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
|
-
.
|
10
|
+
._formIncreasedErrorMargin_1lvq8_9 ._formGroup_1lvq8_1 {
|
11
11
|
margin: 2.8rem 0;
|
12
12
|
}
|
13
13
|
|
14
|
-
.
|
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
|
-
.
|
20
|
+
._form_1lvq8_1 ._formGroup_1lvq8_1:first-child {
|
21
21
|
margin-top: 0;
|
22
22
|
}
|
23
23
|
|
24
|
-
.
|
24
|
+
._form_1lvq8_1 ._formGroup_1lvq8_1:last-child {
|
25
25
|
margin-bottom: 0;
|
26
26
|
}
|
27
27
|
|
28
|
-
.
|
29
|
-
|
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
|
-
.
|
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
|
-
.
|
96
|
+
._labelDisabled_1lvq8_88 {
|
40
97
|
color: var(--color-gray-800);
|
41
98
|
}
|
42
99
|
|
43
|
-
.
|
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
|
-
.
|
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
|
-
.
|
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
|
-
.
|
126
|
+
._formGroup_1lvq8_1 ._label_1lvq8_82 + ._label_1lvq8_82 {
|
70
127
|
margin-top: 0.5rem;
|
71
128
|
}
|
72
129
|
|
73
|
-
.
|
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
|
-
.
|
138
|
+
._formIncreasedErrorMargin_1lvq8_9 ._fieldError_1lvq8_122 {
|
82
139
|
min-height: 2.8rem;
|
83
140
|
}
|
84
141
|
|
85
|
-
.
|
142
|
+
._label_1lvq8_82 ._fieldError_1lvq8_122 {
|
86
143
|
float: right;
|
87
144
|
}
|
88
145
|
|
89
|
-
.
|
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
|
-
.
|
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
|
-
.
|
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
|
-
.
|
117
|
-
.
|
118
|
-
.
|
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
|
-
.
|
175
|
+
._formIncreasedErrorMargin_1lvq8_9 ._formGroup_1lvq8_1._isInvalid_1lvq8_148 {
|
123
176
|
margin-bottom: 0;
|
124
177
|
}
|
125
178
|
|
126
|
-
.
|
179
|
+
._formIncreasedErrorMargin_1lvq8_9 ._formGroup_1lvq8_1._isInvalid_1lvq8_148 + ._formGroup_1lvq8_1 {
|
127
180
|
margin-top: 0;
|
128
181
|
}
|
129
182
|
|
130
|
-
.
|
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
|
-
.
|
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
|
-
.
|
146
|
-
.
|
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
|
-
.
|
203
|
+
._fieldErrorMessage_1lvq8_190 {
|
151
204
|
color: var(--color-system-red-600);
|
152
205
|
font-size: 1.3rem;
|
153
206
|
}
|
154
207
|
|
155
|
-
.
|
208
|
+
._field_1lvq8_122._formGroup_1lvq8_1 {
|
156
209
|
margin: 1rem 0;
|
157
210
|
}
|
158
211
|
|
159
|
-
.
|
212
|
+
._field_1lvq8_122._formGroup_1lvq8_1:first-child {
|
160
213
|
margin-top: 0;
|
161
214
|
}
|
162
215
|
|
163
|
-
|
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
|
-
.
|
195
|
-
input.
|
196
|
-
select.
|
197
|
-
input.
|
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
|
-
.
|
202
|
-
.
|
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.
|
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.
|
238
|
+
textarea._formInput_1lvq8_27:-moz-read-only {
|
213
239
|
background-color: var(--color-white-100);
|
214
240
|
}
|
215
241
|
|
216
|
-
textarea.
|
217
|
-
textarea.
|
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.
|
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
|
-
.
|
255
|
-
.
|
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
|
-
.
|
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
|
-
.
|
294
|
+
._radio_1lvq8_271 {
|
276
295
|
margin-right: 0.5rem;
|
277
296
|
}
|
278
297
|
|
279
|
-
|
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
|
-
.
|
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
|
-
.
|
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
|
-
.
|
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
|
-
.
|
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
|
-
.
|
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
|
-
.
|
339
|
-
.
|
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
|
-
.
|
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
|
-
|
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
|
-
.
|
359
|
+
._formInputTiny_1lvq8_321 {
|
364
360
|
padding: 0.1rem 0.6rem;
|
365
361
|
height: 2.4rem;
|
366
362
|
}
|
367
363
|
|
368
|
-
.
|
364
|
+
._iconField_1lvq8_64 {
|
369
365
|
position: relative;
|
370
366
|
}
|
371
367
|
|
372
|
-
.
|
368
|
+
._requiredAsterisk_1lvq8_330 {
|
373
369
|
color: var(--color-system-red-700);
|
374
370
|
}
|
375
371
|
|
376
|
-
.
|
372
|
+
._fieldSet_1lvq8_334 {
|
377
373
|
border: none;
|
378
374
|
margin: 2rem 0;
|
379
375
|
padding: 0;
|
380
376
|
}
|
381
377
|
|
382
|
-
.
|
378
|
+
._compactTextField_1lvq8_98 {
|
383
379
|
position: relative;
|
384
380
|
width: 100%;
|
385
381
|
}
|
386
382
|
|
387
|
-
.
|
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.
|
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.
|
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"
|