@launchpad-ui/form 0.2.9 → 0.3.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.
package/dist/index.js CHANGED
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
 
23
26
  // src/index.ts
@@ -55,17 +58,20 @@ var import_clsx2 = __toESM(require("clsx"));
55
58
  // src/RequiredAsterisk.tsx
56
59
  var import_clsx = __toESM(require("clsx"));
57
60
  var import_RequiredAsterisk = require("./styles/RequiredAsterisk.css");
61
+ var import_jsx_runtime = require("react/jsx-runtime");
58
62
  var RequiredAsterisk = ({ className, testId, ...rest }) => {
59
63
  const classes = (0, import_clsx.default)("RequiredAsterisk");
60
- return /* @__PURE__ */ React.createElement("span", {
64
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
61
65
  className: classes,
62
66
  "data-test-id": testId,
63
- ...rest
64
- }, "*");
67
+ ...rest,
68
+ children: "*"
69
+ });
65
70
  };
66
71
 
67
72
  // src/Label.tsx
68
73
  var import_Form = require("./styles/Form.css");
74
+ var import_jsx_runtime = require("react/jsx-runtime");
69
75
  var Label = ({
70
76
  htmlFor,
71
77
  disabled,
@@ -76,48 +82,65 @@ var Label = ({
76
82
  ...other
77
83
  }) => {
78
84
  const classes = (0, import_clsx2.default)("Form-label", className, { "Form-label--disabled": disabled });
79
- return /* @__PURE__ */ React.createElement("label", {
85
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
80
86
  ...other,
81
87
  className: classes,
82
- htmlFor
83
- }, children, optional && !required && /* @__PURE__ */ React.createElement("small", {
84
- className: "Form-labelOptional"
85
- }, "(optional)"), required && !optional && /* @__PURE__ */ React.createElement(RequiredAsterisk, null));
88
+ htmlFor,
89
+ children: [
90
+ children,
91
+ optional && !required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", {
92
+ className: "Form-labelOptional",
93
+ children: "(optional)"
94
+ }),
95
+ required && !optional && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
96
+ ]
97
+ });
86
98
  };
87
99
 
88
100
  // src/Checkbox.tsx
89
101
  var import_Form2 = require("./styles/Form.css");
90
- var Checkbox = (0, import_react.forwardRef)(({
91
- "aria-label": ariaLabel,
92
- "aria-labelledby": ariaLabelledby,
93
- children,
94
- disabled,
95
- testId,
96
- checked,
97
- labelClassName,
98
- ...other
99
- }, ref) => {
100
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
101
- if (!children && !hasAriaLabel) {
102
- console.warn("If you do not provide children, you must specify an aria-label for accessibility");
103
- }
104
- return /* @__PURE__ */ React.createElement(Label, {
105
- className: labelClassName
106
- }, /* @__PURE__ */ React.createElement("input", {
107
- ...other,
108
- ref,
109
- checked,
110
- "aria-checked": checked ? "true" : "false",
102
+ var import_jsx_runtime = require("react/jsx-runtime");
103
+ var Checkbox = (0, import_react.forwardRef)(
104
+ ({
111
105
  "aria-label": ariaLabel,
112
106
  "aria-labelledby": ariaLabelledby,
113
- className: "Form-checkbox",
107
+ children,
114
108
  disabled,
115
- "data-test-id": testId,
116
- type: "checkbox"
117
- }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
118
- className: "Form-label--disabled"
119
- }, children) : children);
120
- });
109
+ testId,
110
+ checked,
111
+ labelClassName,
112
+ ...other
113
+ }, ref) => {
114
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
115
+ if (!children && !hasAriaLabel) {
116
+ console.warn(
117
+ "If you do not provide children, you must specify an aria-label for accessibility"
118
+ );
119
+ }
120
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, {
121
+ className: labelClassName,
122
+ children: [
123
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
124
+ ...other,
125
+ ref,
126
+ checked,
127
+ "aria-checked": checked ? "true" : "false",
128
+ "aria-label": ariaLabel,
129
+ "aria-labelledby": ariaLabelledby,
130
+ className: "Form-checkbox",
131
+ disabled,
132
+ "data-test-id": testId,
133
+ type: "checkbox"
134
+ }),
135
+ " ",
136
+ disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
137
+ className: "Form-label--disabled",
138
+ children
139
+ }) : children
140
+ ]
141
+ });
142
+ }
143
+ );
121
144
  Checkbox.displayName = "Checkbox";
122
145
 
123
146
  // src/CompactTextField.tsx
@@ -133,132 +156,156 @@ var import_FormInput = require("./styles/FormInput.css");
133
156
  var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
134
157
 
135
158
  // src/TextField.tsx
136
- var TextField = (0, import_react2.forwardRef)(({
137
- className,
138
- type = "text",
139
- tiny = false,
140
- readOnly,
141
- tabIndex = 0,
142
- testId,
143
- suffix,
144
- overrideWidth,
145
- ...rest
146
- }, ref) => {
147
- const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
148
- "FormInput--tiny": tiny
149
- });
150
- if (suffix) {
151
- return /* @__PURE__ */ React.createElement("div", {
152
- className: "FormInput-suffixContainer"
153
- }, /* @__PURE__ */ React.createElement("input", {
159
+ var import_jsx_runtime = require("react/jsx-runtime");
160
+ var TextField = (0, import_react2.forwardRef)(
161
+ ({
162
+ className,
163
+ type = "text",
164
+ tiny = false,
165
+ readOnly,
166
+ tabIndex = 0,
167
+ testId,
168
+ suffix,
169
+ overrideWidth,
170
+ ...rest
171
+ }, ref) => {
172
+ const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
173
+ "FormInput--tiny": tiny
174
+ });
175
+ if (suffix) {
176
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
177
+ className: "FormInput-suffixContainer",
178
+ children: [
179
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
180
+ ...rest,
181
+ type,
182
+ className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
183
+ readOnly,
184
+ ref,
185
+ "data-test-id": testId,
186
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
187
+ }),
188
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
189
+ className: "FormInput-suffix",
190
+ htmlFor: rest.id,
191
+ children: suffix
192
+ })
193
+ ]
194
+ });
195
+ }
196
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
154
197
  ...rest,
155
198
  type,
156
- className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
199
+ className: classes,
157
200
  readOnly,
201
+ tabIndex,
158
202
  ref,
159
203
  "data-test-id": testId,
204
+ style: overrideWidth ? {
205
+ width: overrideWidth
206
+ } : void 0,
160
207
  "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
161
- }), /* @__PURE__ */ React.createElement("label", {
162
- className: "FormInput-suffix",
163
- htmlFor: rest.id
164
- }, suffix));
208
+ });
165
209
  }
166
- return /* @__PURE__ */ React.createElement("input", {
167
- ...rest,
168
- type,
169
- className: classes,
170
- readOnly,
171
- tabIndex,
172
- ref,
173
- "data-test-id": testId,
174
- style: overrideWidth ? {
175
- width: overrideWidth
176
- } : void 0,
177
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
178
- });
179
- });
210
+ );
180
211
  TextField.displayName = "TextField";
181
212
 
182
213
  // src/CompactTextField.tsx
183
214
  var import_CompactTextField = require("./styles/CompactTextField.css");
184
215
  var import_FormInput2 = require("./styles/FormInput.css");
185
- var CompactTextField = (0, import_react3.forwardRef)(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
186
- const [isActive, setIsActive] = (0, import_react3.useState)((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
187
- const isActiveState = isActive || needsErrorFeedback;
188
- const classes = (0, import_clsx4.default)("CompactTextField", className, {
189
- "is-active": isActiveState
190
- });
191
- const placeholder = isActiveState ? "" : label;
192
- const handleFocus = (event) => {
193
- setIsActive(true);
194
- if (onFocus) {
195
- onFocus(event);
196
- }
197
- };
198
- const handleBlur = (event) => {
199
- const value2 = event.target.value || "";
200
- setIsActive(value2.trim().length !== 0);
201
- if (onBlur) {
202
- onBlur(event);
203
- }
204
- };
205
- return /* @__PURE__ */ React.createElement("div", {
206
- className: classes
207
- }, /* @__PURE__ */ React.createElement(Label, {
208
- htmlFor: id
209
- }, label), /* @__PURE__ */ React.createElement(TextField, {
210
- ...rest,
211
- id,
212
- name,
213
- type,
214
- placeholder,
215
- value,
216
- ref,
217
- onFocus: handleFocus,
218
- onBlur: handleBlur
219
- }));
220
- });
216
+ var import_jsx_runtime = require("react/jsx-runtime");
217
+ var CompactTextField = (0, import_react3.forwardRef)(
218
+ ({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
219
+ const [isActive, setIsActive] = (0, import_react3.useState)(
220
+ (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
221
+ );
222
+ const isActiveState = isActive || needsErrorFeedback;
223
+ const classes = (0, import_clsx4.default)("CompactTextField", className, {
224
+ "is-active": isActiveState
225
+ });
226
+ const placeholder = isActiveState ? "" : label;
227
+ const handleFocus = (event) => {
228
+ setIsActive(true);
229
+ if (onFocus) {
230
+ onFocus(event);
231
+ }
232
+ };
233
+ const handleBlur = (event) => {
234
+ const value2 = event.target.value || "";
235
+ setIsActive(value2.trim().length !== 0);
236
+ if (onBlur) {
237
+ onBlur(event);
238
+ }
239
+ };
240
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
241
+ className: classes,
242
+ children: [
243
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
244
+ htmlFor: id,
245
+ children: label
246
+ }),
247
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
248
+ ...rest,
249
+ id,
250
+ name,
251
+ type,
252
+ placeholder,
253
+ value,
254
+ ref,
255
+ onFocus: handleFocus,
256
+ onBlur: handleBlur
257
+ })
258
+ ]
259
+ });
260
+ }
261
+ );
221
262
  CompactTextField.displayName = "CompactTextField";
222
263
 
223
264
  // src/FieldError.tsx
224
265
  var import_clsx5 = __toESM(require("clsx"));
225
266
  var import_Form3 = require("./styles/Form.css");
267
+ var import_jsx_runtime = require("react/jsx-runtime");
226
268
  var FieldError = ({ name, errorMessage, className }) => {
227
269
  if (!errorMessage) {
228
270
  return null;
229
271
  }
230
- return /* @__PURE__ */ React.createElement("span", {
272
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
231
273
  className: (0, import_clsx5.default)("Form-fieldError", className),
232
274
  "aria-live": "polite",
233
- id: createFieldErrorId(name)
234
- }, `Error - ${errorMessage}`);
275
+ id: createFieldErrorId(name),
276
+ children: `Error - ${errorMessage}`
277
+ });
235
278
  };
236
279
 
237
280
  // src/FieldSet.tsx
238
281
  var import_FieldSet = require("./styles/FieldSet.css");
282
+ var import_jsx_runtime = require("react/jsx-runtime");
239
283
  var FieldSet = ({ children, testId }) => {
240
- return /* @__PURE__ */ React.createElement("fieldset", {
284
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", {
241
285
  className: "FieldSet",
242
- "data-test-id": testId
243
- }, children);
286
+ "data-test-id": testId,
287
+ children
288
+ });
244
289
  };
245
290
 
246
291
  // src/Form.tsx
247
292
  var import_clsx6 = __toESM(require("clsx"));
248
293
  var import_Form4 = require("./styles/Form.css");
294
+ var import_jsx_runtime = require("react/jsx-runtime");
249
295
  var Form = (props) => {
250
296
  const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
251
297
  const classes = (0, import_clsx6.default)("Form", className, {
252
298
  "Form--inline": inline,
253
299
  "Form--increasedErrorMargin": !!hasIncreasedErrorMargin
254
300
  });
255
- return /* @__PURE__ */ React.createElement("form", {
301
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
256
302
  id,
257
303
  name,
258
304
  "aria-label": ariaLabel,
259
305
  ...rest,
260
- className: classes
261
- }, children);
306
+ className: classes,
307
+ children
308
+ });
262
309
  };
263
310
 
264
311
  // src/FormField.tsx
@@ -267,31 +314,36 @@ var import_clsx9 = __toESM(require("clsx"));
267
314
  // src/FormGroup.tsx
268
315
  var import_clsx7 = __toESM(require("clsx"));
269
316
  var import_Form5 = require("./styles/Form.css");
317
+ var import_jsx_runtime = require("react/jsx-runtime");
270
318
  var FormGroup = (props) => {
271
319
  const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
272
320
  const classes = (0, import_clsx7.default)("Form-group", className, {
273
321
  "is-invalid": !ignoreValidation && isInvalid
274
322
  });
275
- return /* @__PURE__ */ React.createElement("div", {
323
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
276
324
  className: classes,
277
325
  "data-test-id": testId,
278
- ...other
279
- }, children);
326
+ ...other,
327
+ children
328
+ });
280
329
  };
281
330
 
282
331
  // src/FormHint.tsx
283
332
  var import_clsx8 = __toESM(require("clsx"));
284
333
  var import_FormHint = require("./styles/FormHint.css");
334
+ var import_jsx_runtime = require("react/jsx-runtime");
285
335
  var FormHint = ({ className, children, ...rest }) => {
286
336
  const classes = (0, import_clsx8.default)("Form-hint", className);
287
- return /* @__PURE__ */ React.createElement("div", {
337
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
288
338
  ...rest,
289
- className: classes
290
- }, children);
339
+ className: classes,
340
+ children
341
+ });
291
342
  };
292
343
 
293
344
  // src/FormField.tsx
294
345
  var import_FormField = require("./styles/FormField.css");
346
+ var import_jsx_runtime = require("react/jsx-runtime");
295
347
  var FormField = ({
296
348
  isRequired,
297
349
  label,
@@ -308,49 +360,68 @@ var FormField = ({
308
360
  const handleBlur = () => {
309
361
  onBlur && onBlur(name);
310
362
  };
311
- return /* @__PURE__ */ React.createElement(FormGroup, {
363
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
312
364
  className: (0, import_clsx9.default)("FormField", className),
313
365
  name,
314
366
  ignoreValidation,
315
367
  isInvalid,
316
- onBlur: handleBlur
317
- }, label && /* @__PURE__ */ React.createElement("label", {
318
- htmlFor
319
- }, label, isRequired && /* @__PURE__ */ React.createElement(RequiredAsterisk, null)), hint && /* @__PURE__ */ React.createElement(FormHint, {
320
- className: "FormField-hint"
321
- }, hint), children, /* @__PURE__ */ React.createElement(FieldError, {
322
- className: "FormField-errorMessage",
323
- name,
324
- errorMessage
325
- }));
368
+ onBlur: handleBlur,
369
+ children: [
370
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
371
+ htmlFor,
372
+ children: [
373
+ label,
374
+ isRequired && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
375
+ ]
376
+ }),
377
+ hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormHint, {
378
+ className: "FormField-hint",
379
+ children: hint
380
+ }),
381
+ children,
382
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, {
383
+ className: "FormField-errorMessage",
384
+ name,
385
+ errorMessage
386
+ })
387
+ ]
388
+ });
326
389
  };
327
390
 
328
391
  // src/IconField.tsx
329
392
  var import_icons = require("@launchpad-ui/icons");
330
393
  var import_IconField = require("./styles/IconField.css");
394
+ var import_jsx_runtime = require("react/jsx-runtime");
331
395
  var IconField = ({ icon, children }) => {
332
396
  const Icon = icon;
333
- return /* @__PURE__ */ React.createElement("div", {
334
- className: "IconField"
335
- }, children, /* @__PURE__ */ React.createElement(Icon, {
336
- size: import_icons.IconSize.SMALL
337
- }));
397
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
398
+ className: "IconField",
399
+ children: [
400
+ children,
401
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
402
+ size: import_icons.IconSize.SMALL
403
+ })
404
+ ]
405
+ });
338
406
  };
339
407
 
340
408
  // src/InputGroup.tsx
341
409
  var import_clsx10 = __toESM(require("clsx"));
342
410
  var import_InputGroup = require("./styles/InputGroup.css");
411
+ var import_jsx_runtime = require("react/jsx-runtime");
343
412
  var InputGroup = ({ className, children, ...other }) => {
344
413
  const classes = (0, import_clsx10.default)("InputGroup", className);
345
- return /* @__PURE__ */ React.createElement("div", {
414
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
346
415
  ...other,
347
- className: classes
348
- }, children);
416
+ className: classes,
417
+ children
418
+ });
349
419
  };
350
420
 
351
421
  // src/Radio.tsx
352
422
  var import_clsx11 = __toESM(require("clsx"));
353
423
  var import_Form6 = require("./styles/Form.css");
424
+ var import_jsx_runtime = require("react/jsx-runtime");
354
425
  var Radio = ({
355
426
  "aria-label": ariaLabel,
356
427
  "aria-labelledby": ariaLabelledby,
@@ -368,33 +439,43 @@ var Radio = ({
368
439
  }) => {
369
440
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
370
441
  if (!children && !hasAriaLabel) {
371
- console.warn("If you do not provide children, you must specify an aria-label for accessibility");
442
+ console.warn(
443
+ "If you do not provide children, you must specify an aria-label for accessibility"
444
+ );
372
445
  }
373
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", {
374
- "aria-label": ariaLabel,
375
- "aria-labelledby": ariaLabelledby,
376
- className: (0, import_clsx11.default)("Form-radio", className),
377
- checked,
378
- disabled,
379
- id,
380
- name,
381
- onChange,
382
- type: "radio",
383
- value,
384
- ...props
385
- }), /* @__PURE__ */ React.createElement(Label, {
386
- className: labelClassName,
387
- htmlFor: id,
388
- style: labelStyle
389
- }, disabled ? /* @__PURE__ */ React.createElement("span", {
390
- className: "Form-label--disabled"
391
- }, children) : children));
446
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
447
+ children: [
448
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
449
+ "aria-label": ariaLabel,
450
+ "aria-labelledby": ariaLabelledby,
451
+ className: (0, import_clsx11.default)("Form-radio", className),
452
+ checked,
453
+ disabled,
454
+ id,
455
+ name,
456
+ onChange,
457
+ type: "radio",
458
+ value,
459
+ ...props
460
+ }),
461
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
462
+ className: labelClassName,
463
+ htmlFor: id,
464
+ style: labelStyle,
465
+ children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
466
+ className: "Form-label--disabled",
467
+ children
468
+ }) : children
469
+ })
470
+ ]
471
+ });
392
472
  };
393
473
 
394
474
  // src/RadioGroup.tsx
395
475
  var import_visually_hidden = require("@react-aria/visually-hidden");
396
476
  var import_react4 = require("react");
397
477
  var import_Form7 = require("./styles/Form.css");
478
+ var import_jsx_runtime = require("react/jsx-runtime");
398
479
  var RadioGroup = (props) => {
399
480
  const { name, value, onChange, children, disabled, legend, ...other } = props;
400
481
  const fieldsetRef = (0, import_react4.useRef)(null);
@@ -435,29 +516,41 @@ var RadioGroup = (props) => {
435
516
  return null;
436
517
  }
437
518
  const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
438
- return /* @__PURE__ */ React.createElement("fieldset", {
439
- ref: fieldsetRef
440
- }, legend && /* @__PURE__ */ React.createElement("legend", null, /* @__PURE__ */ React.createElement(import_visually_hidden.VisuallyHidden, null, legend)), /* @__PURE__ */ React.createElement("div", {
441
- ...other
442
- }, radios));
519
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", {
520
+ ref: fieldsetRef,
521
+ children: [
522
+ legend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", {
523
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
524
+ children: legend
525
+ })
526
+ }),
527
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
528
+ ...other,
529
+ children: radios
530
+ })
531
+ ]
532
+ });
443
533
  };
444
534
 
445
535
  // src/Select.tsx
446
536
  var import_clsx12 = __toESM(require("clsx"));
447
537
  var import_FormInput3 = require("./styles/FormInput.css");
538
+ var import_jsx_runtime = require("react/jsx-runtime");
448
539
  var Select = ({ className, children, testId, ...rest }) => {
449
540
  const classes = (0, import_clsx12.default)("FormInput", "FormInput-select", className);
450
- return /* @__PURE__ */ React.createElement("select", {
541
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
451
542
  ...rest,
452
543
  className: classes,
453
- "data-test-id": testId
454
- }, children);
544
+ "data-test-id": testId,
545
+ children
546
+ });
455
547
  };
456
548
 
457
549
  // src/TextArea.tsx
458
550
  var import_clsx13 = __toESM(require("clsx"));
459
551
  var import_react5 = require("react");
460
552
  var import_FormInput4 = require("./styles/FormInput.css");
553
+ var import_jsx_runtime = require("react/jsx-runtime");
461
554
  var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
462
555
  const onKeyDown = (e) => {
463
556
  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
@@ -467,7 +560,7 @@ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
467
560
  e.nativeEvent.stopImmediatePropagation();
468
561
  }
469
562
  };
470
- return /* @__PURE__ */ React.createElement("textarea", {
563
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
471
564
  ...props,
472
565
  className: (0, import_clsx13.default)("FormInput", className),
473
566
  ref,