@launchpad-ui/form 0.3.5 → 0.5.1-alpha.0

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 (61) hide show
  1. package/dist/Checkbox.d.ts +0 -36
  2. package/dist/Checkbox.d.ts.map +1 -1
  3. package/dist/CompactTextField.d.ts +0 -1
  4. package/dist/CompactTextField.d.ts.map +1 -1
  5. package/dist/FieldError.d.ts +3 -4
  6. package/dist/FieldError.d.ts.map +1 -1
  7. package/dist/FieldSet.d.ts +3 -6
  8. package/dist/FieldSet.d.ts.map +1 -1
  9. package/dist/Form.d.ts +2 -11
  10. package/dist/Form.d.ts.map +1 -1
  11. package/dist/FormField.d.ts +2 -1
  12. package/dist/FormField.d.ts.map +1 -1
  13. package/dist/FormGroup.d.ts +2 -6
  14. package/dist/FormGroup.d.ts.map +1 -1
  15. package/dist/FormHint.d.ts +2 -6
  16. package/dist/FormHint.d.ts.map +1 -1
  17. package/dist/IconField.d.ts +4 -4
  18. package/dist/IconField.d.ts.map +1 -1
  19. package/dist/Label.d.ts +3 -8
  20. package/dist/Label.d.ts.map +1 -1
  21. package/dist/Radio.d.ts +4 -50
  22. package/dist/Radio.d.ts.map +1 -1
  23. package/dist/RadioGroup.d.ts +3 -3
  24. package/dist/RadioGroup.d.ts.map +1 -1
  25. package/dist/RequiredAsterisk.d.ts +2 -4
  26. package/dist/RequiredAsterisk.d.ts.map +1 -1
  27. package/dist/Select.d.ts +3 -15
  28. package/dist/Select.d.ts.map +1 -1
  29. package/dist/TextArea.d.ts.map +1 -1
  30. package/dist/TextField.d.ts +0 -2
  31. package/dist/TextField.d.ts.map +1 -1
  32. package/dist/index.d.ts +0 -2
  33. package/dist/index.d.ts.map +1 -1
  34. package/dist/index.es.js +273 -372
  35. package/dist/index.es.js.map +1 -7
  36. package/dist/index.js +301 -443
  37. package/dist/index.js.map +1 -7
  38. package/dist/style.css +402 -0
  39. package/package.json +4 -4
  40. package/dist/InputGroup.d.ts +0 -7
  41. package/dist/InputGroup.d.ts.map +0 -1
  42. package/dist/styles/CompactTextField.css +0 -2
  43. package/dist/styles/CompactTextField.css.map +0 -1
  44. package/dist/styles/FieldSet.css +0 -2
  45. package/dist/styles/FieldSet.css.map +0 -1
  46. package/dist/styles/Form.css +0 -2
  47. package/dist/styles/Form.css.map +0 -1
  48. package/dist/styles/FormField.css +0 -2
  49. package/dist/styles/FormField.css.map +0 -1
  50. package/dist/styles/FormHint.css +0 -2
  51. package/dist/styles/FormHint.css.map +0 -1
  52. package/dist/styles/FormInput.css +0 -2
  53. package/dist/styles/FormInput.css.map +0 -1
  54. package/dist/styles/IconField.css +0 -2
  55. package/dist/styles/IconField.css.map +0 -1
  56. package/dist/styles/InputGroup.css +0 -2
  57. package/dist/styles/InputGroup.css.map +0 -1
  58. package/dist/styles/RequiredAsterisk.css +0 -2
  59. package/dist/styles/RequiredAsterisk.css.map +0 -1
  60. package/dist/styles/styles.css +0 -2
  61. package/dist/styles/styles.css.map +0 -1
package/dist/index.js CHANGED
@@ -1,337 +1,239 @@
1
+ require('./style.css');
1
2
  "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- Checkbox: () => Checkbox,
24
- CompactTextField: () => CompactTextField,
25
- FieldError: () => FieldError,
26
- FieldSet: () => FieldSet,
27
- Form: () => Form,
28
- FormField: () => FormField,
29
- FormGroup: () => FormGroup,
30
- FormHint: () => FormHint,
31
- IconField: () => IconField,
32
- InputGroup: () => InputGroup,
33
- Label: () => Label,
34
- Radio: () => Radio,
35
- RadioGroup: () => RadioGroup,
36
- RequiredAsterisk: () => RequiredAsterisk,
37
- Select: () => Select,
38
- TextArea: () => TextArea,
39
- TextField: () => TextField
40
- });
41
- module.exports = __toCommonJS(src_exports);
42
-
43
- // src/Checkbox.tsx
44
- var import_react = require("react");
45
-
46
- // src/Label.tsx
47
- var import_classix2 = require("classix");
48
-
49
- // src/RequiredAsterisk.tsx
50
- var import_classix = require("classix");
51
- var import_RequiredAsterisk = require("./styles/RequiredAsterisk.css");
52
- var import_jsx_runtime = require("react/jsx-runtime");
53
- var RequiredAsterisk = ({ className, testId, ...rest }) => {
54
- const classes = (0, import_classix.cx)("RequiredAsterisk");
55
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
56
- className: classes,
57
- "data-test-id": testId,
3
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
4
+ const react = require("react");
5
+ const classix = require("classix");
6
+ const jsxRuntime = require("react/jsx-runtime");
7
+ const icons = require("@launchpad-ui/icons");
8
+ const visuallyHidden = require("@react-aria/visually-hidden");
9
+ const RequiredAsterisk$1 = "";
10
+ const RequiredAsterisk = ({
11
+ className,
12
+ ...rest
13
+ }) => {
14
+ const classes = classix.cx("RequiredAsterisk", className);
15
+ return /* @__PURE__ */ jsxRuntime.jsx("span", {
58
16
  ...rest,
17
+ className: classes,
59
18
  children: "*"
60
19
  });
61
20
  };
62
-
63
- // src/Label.tsx
64
- var import_Form = require("./styles/Form.css");
65
- var import_jsx_runtime = require("react/jsx-runtime");
66
- var Label = ({
67
- htmlFor,
21
+ const Form$1 = "";
22
+ const Label = ({
68
23
  disabled,
69
24
  className,
70
25
  children,
71
26
  required = false,
72
27
  optional = false,
73
- ...other
28
+ ...rest
74
29
  }) => {
75
- const classes = (0, import_classix2.cx)("Form-label", className, disabled && "Form-label--disabled");
76
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
77
- ...other,
30
+ const classes = classix.cx("Form-label", className, disabled && "Form-label--disabled");
31
+ return /* @__PURE__ */ jsxRuntime.jsxs("label", {
32
+ ...rest,
78
33
  className: classes,
79
- htmlFor,
80
- children: [
81
- children,
82
- optional && !required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", {
83
- className: "Form-labelOptional",
84
- children: "(optional)"
85
- }),
86
- required && !optional && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
87
- ]
34
+ children: [children, optional && !required && /* @__PURE__ */ jsxRuntime.jsx("small", {
35
+ className: "Form-labelOptional",
36
+ children: "(optional)"
37
+ }), required && !optional && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})]
88
38
  });
89
39
  };
90
-
91
- // src/Checkbox.tsx
92
- var import_Form2 = require("./styles/Form.css");
93
- var import_jsx_runtime = require("react/jsx-runtime");
94
- var Checkbox = (0, import_react.forwardRef)(
95
- ({
96
- "aria-label": ariaLabel,
97
- "aria-labelledby": ariaLabelledby,
98
- children,
99
- disabled,
100
- testId,
101
- checked,
102
- labelClassName,
103
- ...other
104
- }, ref) => {
105
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
106
- if (!children && !hasAriaLabel) {
107
- console.warn(
108
- "If you do not provide children, you must specify an aria-label for accessibility"
109
- );
110
- }
111
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, {
112
- className: labelClassName,
113
- children: [
114
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
115
- ...other,
116
- ref,
117
- checked,
118
- "aria-checked": checked ? "true" : "false",
119
- "aria-label": ariaLabel,
120
- "aria-labelledby": ariaLabelledby,
121
- className: "Form-checkbox",
122
- disabled,
123
- "data-test-id": testId,
124
- type: "checkbox"
125
- }),
126
- " ",
127
- disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
128
- className: "Form-label--disabled",
129
- children
130
- }) : children
131
- ]
132
- });
40
+ const Checkbox = react.forwardRef(({
41
+ "aria-label": ariaLabel,
42
+ "aria-labelledby": ariaLabelledby,
43
+ children,
44
+ disabled,
45
+ checked,
46
+ labelClassName,
47
+ ...rest
48
+ }, ref) => {
49
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
50
+ if (!children && !hasAriaLabel) {
51
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
133
52
  }
134
- );
135
- Checkbox.displayName = "Checkbox";
136
-
137
- // src/CompactTextField.tsx
138
- var import_classix4 = require("classix");
139
- var import_react3 = require("react");
140
-
141
- // src/TextField.tsx
142
- var import_classix3 = require("classix");
143
- var import_react2 = require("react");
144
- var import_FormInput = require("./styles/FormInput.css");
145
-
146
- // src/utils/index.ts
147
- var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
148
-
149
- // src/TextField.tsx
150
- var import_jsx_runtime = require("react/jsx-runtime");
151
- var TextField = (0, import_react2.forwardRef)(
152
- ({
153
- className,
154
- type = "text",
155
- tiny = false,
156
- readOnly,
157
- tabIndex = 0,
158
- testId,
159
- suffix,
160
- overrideWidth,
161
- ...rest
162
- }, ref) => {
163
- const classes = overrideWidth ? className : (0, import_classix3.cx)("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
164
- if (suffix) {
165
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
166
- className: "FormInput-suffixContainer",
167
- children: [
168
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
169
- ...rest,
170
- type,
171
- className: (0, import_classix3.cx)(classes, "FormInput-suffix"),
172
- readOnly,
173
- ref,
174
- "data-test-id": testId,
175
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
176
- }),
177
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
178
- className: "FormInput-suffix",
179
- htmlFor: rest.id,
180
- children: suffix
181
- })
182
- ]
183
- });
184
- }
185
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
53
+ return /* @__PURE__ */ jsxRuntime.jsxs(Label, {
54
+ className: labelClassName,
55
+ children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
186
56
  ...rest,
187
- type,
188
- className: classes,
189
- readOnly,
190
- tabIndex,
191
57
  ref,
192
- "data-test-id": testId,
193
- style: overrideWidth ? {
194
- width: overrideWidth
195
- } : void 0,
196
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
58
+ checked,
59
+ "aria-checked": checked ? "true" : "false",
60
+ "aria-label": ariaLabel,
61
+ "aria-labelledby": ariaLabelledby,
62
+ className: "Form-checkbox",
63
+ disabled,
64
+ type: "checkbox"
65
+ }), " ", disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", {
66
+ className: "Form-label--disabled",
67
+ children
68
+ }) : children]
69
+ });
70
+ });
71
+ Checkbox.displayName = "Checkbox";
72
+ const FormInput = "";
73
+ const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
74
+ const TextField = react.forwardRef(({
75
+ className,
76
+ type = "text",
77
+ tiny = false,
78
+ readOnly,
79
+ tabIndex = 0,
80
+ suffix,
81
+ overrideWidth,
82
+ ...rest
83
+ }, ref) => {
84
+ const classes = overrideWidth ? className : classix.cx("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
85
+ if (suffix) {
86
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
87
+ className: "FormInput-suffixContainer",
88
+ children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
89
+ ...rest,
90
+ type,
91
+ className: classix.cx(classes, "FormInput-suffix"),
92
+ readOnly,
93
+ ref,
94
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
95
+ }), /* @__PURE__ */ jsxRuntime.jsx("label", {
96
+ className: "FormInput-suffix",
97
+ htmlFor: rest.id,
98
+ children: suffix
99
+ })]
197
100
  });
198
101
  }
199
- );
102
+ return /* @__PURE__ */ jsxRuntime.jsx("input", {
103
+ ...rest,
104
+ type,
105
+ className: classes,
106
+ readOnly,
107
+ tabIndex,
108
+ ref,
109
+ style: overrideWidth ? {
110
+ width: overrideWidth
111
+ } : void 0,
112
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
113
+ });
114
+ });
200
115
  TextField.displayName = "TextField";
201
-
202
- // src/CompactTextField.tsx
203
- var import_CompactTextField = require("./styles/CompactTextField.css");
204
- var import_FormInput2 = require("./styles/FormInput.css");
205
- var import_jsx_runtime = require("react/jsx-runtime");
206
- var CompactTextField = (0, import_react3.forwardRef)(
207
- ({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
208
- const [isActive, setIsActive] = (0, import_react3.useState)(
209
- (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
210
- );
211
- const isActiveState = isActive || needsErrorFeedback;
212
- const classes = (0, import_classix4.cx)("CompactTextField", className, isActiveState && "is-active");
213
- const placeholder = isActiveState ? "" : label;
214
- const handleFocus = (event) => {
215
- setIsActive(true);
216
- if (onFocus) {
217
- onFocus(event);
218
- }
219
- };
220
- const handleBlur = (event) => {
221
- const value2 = event.target.value || "";
222
- setIsActive(value2.trim().length !== 0);
223
- if (onBlur) {
224
- onBlur(event);
225
- }
226
- };
227
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
228
- className: classes,
229
- children: [
230
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
231
- htmlFor: id,
232
- children: label
233
- }),
234
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
235
- ...rest,
236
- id,
237
- name,
238
- type,
239
- placeholder,
240
- value,
241
- ref,
242
- onFocus: handleFocus,
243
- onBlur: handleBlur
244
- })
245
- ]
246
- });
247
- }
248
- );
116
+ const CompactTextField$1 = "";
117
+ const CompactTextField = react.forwardRef(({
118
+ className,
119
+ id,
120
+ label,
121
+ needsErrorFeedback,
122
+ value,
123
+ onFocus,
124
+ onBlur,
125
+ ...rest
126
+ }, ref) => {
127
+ const [isActive, setIsActive] = react.useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
128
+ const isActiveState = isActive || needsErrorFeedback;
129
+ const classes = classix.cx("CompactTextField", className, isActiveState && "is-active");
130
+ const placeholder = isActiveState ? "" : label;
131
+ const handleFocus = (event) => {
132
+ setIsActive(true);
133
+ if (onFocus) {
134
+ onFocus(event);
135
+ }
136
+ };
137
+ const handleBlur = (event) => {
138
+ const value2 = event.target.value || "";
139
+ setIsActive(value2.trim().length !== 0);
140
+ if (onBlur) {
141
+ onBlur(event);
142
+ }
143
+ };
144
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
145
+ className: classes,
146
+ children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
147
+ htmlFor: id,
148
+ children: label
149
+ }), /* @__PURE__ */ jsxRuntime.jsx(TextField, {
150
+ ...rest,
151
+ id,
152
+ placeholder,
153
+ value,
154
+ ref,
155
+ onFocus: handleFocus,
156
+ onBlur: handleBlur
157
+ })]
158
+ });
159
+ });
249
160
  CompactTextField.displayName = "CompactTextField";
250
-
251
- // src/FieldError.tsx
252
- var import_classix5 = require("classix");
253
- var import_Form3 = require("./styles/Form.css");
254
- var import_jsx_runtime = require("react/jsx-runtime");
255
- var FieldError = ({ name, errorMessage, className }) => {
161
+ const FieldError = ({
162
+ name,
163
+ errorMessage,
164
+ className,
165
+ ...rest
166
+ }) => {
256
167
  if (!errorMessage) {
257
168
  return null;
258
169
  }
259
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
260
- className: (0, import_classix5.cx)("Form-fieldError", className),
170
+ return /* @__PURE__ */ jsxRuntime.jsx("span", {
171
+ ...rest,
172
+ className: classix.cx("Form-fieldError", className),
261
173
  "aria-live": "polite",
262
174
  id: createFieldErrorId(name),
263
175
  children: `Error - ${errorMessage}`
264
176
  });
265
177
  };
266
-
267
- // src/FieldSet.tsx
268
- var import_FieldSet = require("./styles/FieldSet.css");
269
- var import_jsx_runtime = require("react/jsx-runtime");
270
- var FieldSet = ({ children, testId }) => {
271
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", {
272
- className: "FieldSet",
273
- "data-test-id": testId,
178
+ const FieldSet$1 = "";
179
+ const FieldSet = ({
180
+ children,
181
+ className,
182
+ ...rest
183
+ }) => {
184
+ const classes = classix.cx("FieldSet", className);
185
+ return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
186
+ className: classes,
187
+ ...rest,
274
188
  children
275
189
  });
276
190
  };
277
-
278
- // src/Form.tsx
279
- var import_classix6 = require("classix");
280
- var import_Form4 = require("./styles/Form.css");
281
- var import_jsx_runtime = require("react/jsx-runtime");
282
- var Form = (props) => {
283
- const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
284
- const classes = (0, import_classix6.cx)(
285
- "Form",
191
+ const Form = (props) => {
192
+ const {
286
193
  className,
287
- inline && "Form--inline",
288
- !!hasIncreasedErrorMargin && "Form--increasedErrorMargin"
289
- );
290
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
291
- id,
292
- name,
293
- "aria-label": ariaLabel,
194
+ inline,
195
+ children,
196
+ hasIncreasedErrorMargin,
197
+ ...rest
198
+ } = props;
199
+ const classes = classix.cx("Form", className, inline && "Form--inline", !!hasIncreasedErrorMargin && "Form--increasedErrorMargin");
200
+ return /* @__PURE__ */ jsxRuntime.jsx("form", {
294
201
  ...rest,
295
202
  className: classes,
296
203
  children
297
204
  });
298
205
  };
299
-
300
- // src/FormField.tsx
301
- var import_classix9 = require("classix");
302
-
303
- // src/FormGroup.tsx
304
- var import_classix7 = require("classix");
305
- var import_Form5 = require("./styles/Form.css");
306
- var import_jsx_runtime = require("react/jsx-runtime");
307
- var FormGroup = (props) => {
308
- const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
309
- const classes = (0, import_classix7.cx)("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
310
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
206
+ const FormGroup = (props) => {
207
+ const {
208
+ className,
209
+ name,
210
+ ignoreValidation,
211
+ isInvalid,
212
+ children,
213
+ ...rest
214
+ } = props;
215
+ const classes = classix.cx("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
216
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
311
217
  className: classes,
312
- "data-test-id": testId,
313
- ...other,
218
+ ...rest,
314
219
  children
315
220
  });
316
221
  };
317
-
318
- // src/FormHint.tsx
319
- var import_classix8 = require("classix");
320
- var import_FormHint = require("./styles/FormHint.css");
321
- var import_jsx_runtime = require("react/jsx-runtime");
322
- var FormHint = ({ className, children, ...rest }) => {
323
- const classes = (0, import_classix8.cx)("Form-hint", className);
324
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
222
+ const FormHint$1 = "";
223
+ const FormHint = ({
224
+ className,
225
+ children,
226
+ ...rest
227
+ }) => {
228
+ const classes = classix.cx("Form-hint", className);
229
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
325
230
  ...rest,
326
231
  className: classes,
327
232
  children
328
233
  });
329
234
  };
330
-
331
- // src/FormField.tsx
332
- var import_FormField = require("./styles/FormField.css");
333
- var import_jsx_runtime = require("react/jsx-runtime");
334
- var FormField = ({
235
+ const FormField$1 = "";
236
+ const FormField = ({
335
237
  isRequired,
336
238
  label,
337
239
  name,
@@ -342,74 +244,50 @@ var FormField = ({
342
244
  isInvalid,
343
245
  children,
344
246
  className,
345
- onBlur
247
+ onBlur,
248
+ "data-test-id": testId
346
249
  }) => {
347
250
  const handleBlur = () => {
348
251
  onBlur && onBlur(name);
349
252
  };
350
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
351
- className: (0, import_classix9.cx)("FormField", className),
253
+ return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, {
254
+ className: classix.cx("FormField", className),
352
255
  name,
353
256
  ignoreValidation,
354
257
  isInvalid,
355
258
  onBlur: handleBlur,
356
- children: [
357
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
358
- htmlFor,
359
- children: [
360
- label,
361
- isRequired && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
362
- ]
363
- }),
364
- hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormHint, {
365
- className: "FormField-hint",
366
- children: hint
367
- }),
368
- children,
369
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, {
370
- className: "FormField-errorMessage",
371
- name,
372
- errorMessage
373
- })
374
- ]
259
+ "data-test-id": testId,
260
+ children: [label && /* @__PURE__ */ jsxRuntime.jsxs("label", {
261
+ htmlFor,
262
+ children: [label, isRequired && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})]
263
+ }), hint && /* @__PURE__ */ jsxRuntime.jsx(FormHint, {
264
+ className: "FormField-hint",
265
+ children: hint
266
+ }), children, /* @__PURE__ */ jsxRuntime.jsx(FieldError, {
267
+ className: "FormField-errorMessage",
268
+ name,
269
+ errorMessage
270
+ })]
375
271
  });
376
272
  };
377
-
378
- // src/IconField.tsx
379
- var import_icons = require("@launchpad-ui/icons");
380
- var import_IconField = require("./styles/IconField.css");
381
- var import_jsx_runtime = require("react/jsx-runtime");
382
- var IconField = ({ icon, children }) => {
273
+ const IconField$1 = "";
274
+ const IconField = ({
275
+ icon,
276
+ children,
277
+ className,
278
+ ...rest
279
+ }) => {
383
280
  const Icon = icon;
384
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
385
- className: "IconField",
386
- children: [
387
- children,
388
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
389
- size: import_icons.IconSize.SMALL
390
- })
391
- ]
392
- });
393
- };
394
-
395
- // src/InputGroup.tsx
396
- var import_classix10 = require("classix");
397
- var import_InputGroup = require("./styles/InputGroup.css");
398
- var import_jsx_runtime = require("react/jsx-runtime");
399
- var InputGroup = ({ className, children, ...other }) => {
400
- const classes = (0, import_classix10.cx)("InputGroup", className);
401
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
402
- ...other,
281
+ const classes = classix.cx("IconField", className);
282
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
403
283
  className: classes,
404
- children
284
+ ...rest,
285
+ children: [children, /* @__PURE__ */ jsxRuntime.jsx(Icon, {
286
+ size: icons.IconSize.SMALL
287
+ })]
405
288
  });
406
289
  };
407
-
408
- // src/Radio.tsx
409
- var import_classix11 = require("classix");
410
- var import_Form6 = require("./styles/Form.css");
411
- var import_jsx_runtime = require("react/jsx-runtime");
412
- var Radio = ({
290
+ const Radio = ({
413
291
  "aria-label": ariaLabel,
414
292
  "aria-labelledby": ariaLabelledby,
415
293
  checked = false,
@@ -418,128 +296,112 @@ var Radio = ({
418
296
  disabled = false,
419
297
  id,
420
298
  labelClassName,
421
- name,
422
- onChange = () => void 0,
423
299
  labelStyle,
424
- value,
425
- ...props
300
+ ...rest
426
301
  }) => {
427
302
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
428
303
  if (!children && !hasAriaLabel) {
429
- console.warn(
430
- "If you do not provide children, you must specify an aria-label for accessibility"
431
- );
304
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
432
305
  }
433
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
434
- children: [
435
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
436
- "aria-label": ariaLabel,
437
- "aria-labelledby": ariaLabelledby,
438
- className: (0, import_classix11.cx)("Form-radio", className),
439
- checked,
440
- disabled,
441
- id,
442
- name,
443
- onChange,
444
- type: "radio",
445
- value,
446
- ...props
447
- }),
448
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
449
- className: labelClassName,
450
- htmlFor: id,
451
- style: labelStyle,
452
- children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
453
- className: "Form-label--disabled",
454
- children
455
- }) : children
456
- })
457
- ]
306
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
307
+ children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
308
+ ...rest,
309
+ "aria-label": ariaLabel,
310
+ "aria-labelledby": ariaLabelledby,
311
+ className: classix.cx("Form-radio", className),
312
+ checked,
313
+ disabled,
314
+ id,
315
+ type: "radio"
316
+ }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
317
+ className: labelClassName,
318
+ htmlFor: id,
319
+ style: labelStyle,
320
+ children: disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", {
321
+ className: "Form-label--disabled",
322
+ children
323
+ }) : children
324
+ })]
458
325
  });
459
326
  };
460
-
461
- // src/RadioGroup.tsx
462
- var import_visually_hidden = require("@react-aria/visually-hidden");
463
- var import_react4 = require("react");
464
- var import_Form7 = require("./styles/Form.css");
465
- var import_jsx_runtime = require("react/jsx-runtime");
466
- var RadioGroup = (props) => {
467
- const { name, value, onChange, children, disabled, legend, ...other } = props;
468
- const fieldsetRef = (0, import_react4.useRef)(null);
327
+ const RadioGroup = (props) => {
328
+ const {
329
+ name,
330
+ value,
331
+ onChange,
332
+ children,
333
+ disabled,
334
+ legend,
335
+ ...rest
336
+ } = props;
337
+ const fieldsetRef = react.useRef(null);
469
338
  function updateRadioElems(elem) {
470
- if (!(0, import_react4.isValidElement)(elem)) {
339
+ var _a, _b;
340
+ if (!react.isValidElement(elem)) {
471
341
  return elem;
472
342
  }
473
343
  const item = elem;
474
- if (item?.type && item.type === Radio) {
475
- return (0, import_react4.cloneElement)(item, {
344
+ if ((item == null ? void 0 : item.type) && item.type === Radio) {
345
+ return react.cloneElement(item, {
476
346
  ...item.props,
477
347
  name,
478
348
  checked: item.props.value === value,
479
349
  onChange,
480
- disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
350
+ disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
481
351
  });
482
352
  }
483
- if (item?.type && item.type === Label) {
484
- return (0, import_react4.cloneElement)(item, {
353
+ if ((item == null ? void 0 : item.type) && item.type === Label) {
354
+ return react.cloneElement(item, {
485
355
  ...item.props,
486
356
  onChange,
487
357
  disabled
488
358
  });
489
359
  }
490
- const elemChildren = item?.props?.children;
360
+ const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
491
361
  if (elemChildren) {
492
362
  if (Array.isArray(elemChildren)) {
493
- return (0, import_react4.cloneElement)(item, {
494
- children: import_react4.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
363
+ return react.cloneElement(item, {
364
+ children: react.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
495
365
  });
496
366
  }
497
- return (0, import_react4.cloneElement)(item, {
367
+ return react.cloneElement(item, {
498
368
  children: updateRadioElems(elemChildren)
499
369
  });
500
370
  }
501
- if (item?.type && item.type !== Radio && item.type !== Label) {
371
+ if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
502
372
  return item;
503
373
  }
504
374
  return null;
505
375
  }
506
- const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
507
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", {
376
+ const radios = react.Children.map(children, (child) => updateRadioElems(child));
377
+ return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", {
508
378
  ref: fieldsetRef,
509
- children: [
510
- legend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", {
511
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
512
- children: legend
513
- })
514
- }),
515
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
516
- ...other,
517
- children: radios
379
+ children: [legend && /* @__PURE__ */ jsxRuntime.jsx("legend", {
380
+ children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, {
381
+ children: legend
518
382
  })
519
- ]
383
+ }), /* @__PURE__ */ jsxRuntime.jsx("div", {
384
+ ...rest,
385
+ children: radios
386
+ })]
520
387
  });
521
388
  };
522
-
523
- // src/Select.tsx
524
- var import_classix12 = require("classix");
525
- var import_FormInput3 = require("./styles/FormInput.css");
526
- var import_jsx_runtime = require("react/jsx-runtime");
527
- var Select = ({ className, children, testId, ...rest }) => {
528
- const classes = (0, import_classix12.cx)("FormInput", "FormInput-select", className);
529
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
389
+ const Select = ({
390
+ className,
391
+ children,
392
+ ...rest
393
+ }) => {
394
+ const classes = classix.cx("FormInput", "FormInput-select", className);
395
+ return /* @__PURE__ */ jsxRuntime.jsx("select", {
530
396
  ...rest,
531
397
  className: classes,
532
- "data-test-id": testId,
533
398
  children
534
399
  });
535
400
  };
536
-
537
- // src/TextArea.tsx
538
- var import_classix13 = require("classix");
539
- var import_react5 = require("react");
540
- var import_FormInput4 = require("./styles/FormInput.css");
541
- var import_jsx_runtime = require("react/jsx-runtime");
542
- var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
401
+ const TextArea = react.forwardRef(({
402
+ className,
403
+ ...props
404
+ }, ref) => {
543
405
  const onKeyDown = (e) => {
544
406
  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
545
407
  e.stopPropagation();
@@ -548,33 +410,29 @@ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
548
410
  e.nativeEvent.stopImmediatePropagation();
549
411
  }
550
412
  };
551
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
413
+ return /* @__PURE__ */ jsxRuntime.jsx("textarea", {
552
414
  ...props,
553
- className: (0, import_classix13.cx)("FormInput", className),
415
+ className: classix.cx("FormInput", className),
554
416
  ref,
555
417
  "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
556
418
  onKeyDown
557
419
  });
558
420
  });
559
421
  TextArea.displayName = "TextArea";
560
- // Annotate the CommonJS export names for ESM import in node:
561
- 0 && (module.exports = {
562
- Checkbox,
563
- CompactTextField,
564
- FieldError,
565
- FieldSet,
566
- Form,
567
- FormField,
568
- FormGroup,
569
- FormHint,
570
- IconField,
571
- InputGroup,
572
- Label,
573
- Radio,
574
- RadioGroup,
575
- RequiredAsterisk,
576
- Select,
577
- TextArea,
578
- TextField
579
- });
422
+ exports.Checkbox = Checkbox;
423
+ exports.CompactTextField = CompactTextField;
424
+ exports.FieldError = FieldError;
425
+ exports.FieldSet = FieldSet;
426
+ exports.Form = Form;
427
+ exports.FormField = FormField;
428
+ exports.FormGroup = FormGroup;
429
+ exports.FormHint = FormHint;
430
+ exports.IconField = IconField;
431
+ exports.Label = Label;
432
+ exports.Radio = Radio;
433
+ exports.RadioGroup = RadioGroup;
434
+ exports.RequiredAsterisk = RequiredAsterisk;
435
+ exports.Select = Select;
436
+ exports.TextArea = TextArea;
437
+ exports.TextField = TextField;
580
438
  //# sourceMappingURL=index.js.map