@launchpad-ui/form 0.2.7 → 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,53 +82,69 @@ 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
124
147
  var import_clsx4 = __toESM(require("clsx"));
125
- var import_lodash_es = require("lodash-es");
126
148
  var import_react3 = require("react");
127
149
 
128
150
  // src/TextField.tsx
@@ -134,132 +156,156 @@ var import_FormInput = require("./styles/FormInput.css");
134
156
  var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
135
157
 
136
158
  // src/TextField.tsx
137
- var TextField = (0, import_react2.forwardRef)(({
138
- className,
139
- type = "text",
140
- tiny = false,
141
- readOnly,
142
- tabIndex = 0,
143
- testId,
144
- suffix,
145
- overrideWidth,
146
- ...rest
147
- }, ref) => {
148
- const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
149
- "FormInput--tiny": tiny
150
- });
151
- if (suffix) {
152
- return /* @__PURE__ */ React.createElement("div", {
153
- className: "FormInput-suffixContainer"
154
- }, /* @__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", {
155
197
  ...rest,
156
198
  type,
157
- className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
199
+ className: classes,
158
200
  readOnly,
201
+ tabIndex,
159
202
  ref,
160
203
  "data-test-id": testId,
204
+ style: overrideWidth ? {
205
+ width: overrideWidth
206
+ } : void 0,
161
207
  "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
162
- }), /* @__PURE__ */ React.createElement("label", {
163
- className: "FormInput-suffix",
164
- htmlFor: rest.id
165
- }, suffix));
208
+ });
166
209
  }
167
- return /* @__PURE__ */ React.createElement("input", {
168
- ...rest,
169
- type,
170
- className: classes,
171
- readOnly,
172
- tabIndex,
173
- ref,
174
- "data-test-id": testId,
175
- style: overrideWidth ? {
176
- width: overrideWidth
177
- } : void 0,
178
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
179
- });
180
- });
210
+ );
181
211
  TextField.displayName = "TextField";
182
212
 
183
213
  // src/CompactTextField.tsx
184
214
  var import_CompactTextField = require("./styles/CompactTextField.css");
185
215
  var import_FormInput2 = require("./styles/FormInput.css");
186
- var CompactTextField = (0, import_react3.forwardRef)(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
187
- const [isActive, setIsActive] = (0, import_react3.useState)(((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0);
188
- const isActiveState = isActive || needsErrorFeedback;
189
- const classes = (0, import_clsx4.default)("CompactTextField", className, {
190
- "is-active": isActiveState
191
- });
192
- const placeholder = isActiveState ? "" : label;
193
- const handleFocus = (event) => {
194
- setIsActive(true);
195
- if (onFocus) {
196
- onFocus(event);
197
- }
198
- };
199
- const handleBlur = (event) => {
200
- const value2 = event.target.value || "";
201
- setIsActive(value2.trim().length !== 0);
202
- if (onBlur) {
203
- onBlur(event);
204
- }
205
- };
206
- return /* @__PURE__ */ React.createElement("div", {
207
- className: classes
208
- }, /* @__PURE__ */ React.createElement(Label, {
209
- htmlFor: id
210
- }, label), /* @__PURE__ */ React.createElement(TextField, {
211
- ...rest,
212
- id,
213
- name,
214
- type,
215
- placeholder,
216
- value,
217
- ref,
218
- onFocus: handleFocus,
219
- onBlur: handleBlur
220
- }));
221
- });
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
+ );
222
262
  CompactTextField.displayName = "CompactTextField";
223
263
 
224
264
  // src/FieldError.tsx
225
265
  var import_clsx5 = __toESM(require("clsx"));
226
266
  var import_Form3 = require("./styles/Form.css");
267
+ var import_jsx_runtime = require("react/jsx-runtime");
227
268
  var FieldError = ({ name, errorMessage, className }) => {
228
269
  if (!errorMessage) {
229
270
  return null;
230
271
  }
231
- return /* @__PURE__ */ React.createElement("span", {
272
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
232
273
  className: (0, import_clsx5.default)("Form-fieldError", className),
233
274
  "aria-live": "polite",
234
- id: createFieldErrorId(name)
235
- }, `Error - ${errorMessage}`);
275
+ id: createFieldErrorId(name),
276
+ children: `Error - ${errorMessage}`
277
+ });
236
278
  };
237
279
 
238
280
  // src/FieldSet.tsx
239
281
  var import_FieldSet = require("./styles/FieldSet.css");
282
+ var import_jsx_runtime = require("react/jsx-runtime");
240
283
  var FieldSet = ({ children, testId }) => {
241
- return /* @__PURE__ */ React.createElement("fieldset", {
284
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", {
242
285
  className: "FieldSet",
243
- "data-test-id": testId
244
- }, children);
286
+ "data-test-id": testId,
287
+ children
288
+ });
245
289
  };
246
290
 
247
291
  // src/Form.tsx
248
292
  var import_clsx6 = __toESM(require("clsx"));
249
293
  var import_Form4 = require("./styles/Form.css");
294
+ var import_jsx_runtime = require("react/jsx-runtime");
250
295
  var Form = (props) => {
251
296
  const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
252
297
  const classes = (0, import_clsx6.default)("Form", className, {
253
298
  "Form--inline": inline,
254
299
  "Form--increasedErrorMargin": !!hasIncreasedErrorMargin
255
300
  });
256
- return /* @__PURE__ */ React.createElement("form", {
301
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
257
302
  id,
258
303
  name,
259
304
  "aria-label": ariaLabel,
260
305
  ...rest,
261
- className: classes
262
- }, children);
306
+ className: classes,
307
+ children
308
+ });
263
309
  };
264
310
 
265
311
  // src/FormField.tsx
@@ -268,31 +314,36 @@ var import_clsx9 = __toESM(require("clsx"));
268
314
  // src/FormGroup.tsx
269
315
  var import_clsx7 = __toESM(require("clsx"));
270
316
  var import_Form5 = require("./styles/Form.css");
317
+ var import_jsx_runtime = require("react/jsx-runtime");
271
318
  var FormGroup = (props) => {
272
319
  const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
273
320
  const classes = (0, import_clsx7.default)("Form-group", className, {
274
321
  "is-invalid": !ignoreValidation && isInvalid
275
322
  });
276
- return /* @__PURE__ */ React.createElement("div", {
323
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
277
324
  className: classes,
278
325
  "data-test-id": testId,
279
- ...other
280
- }, children);
326
+ ...other,
327
+ children
328
+ });
281
329
  };
282
330
 
283
331
  // src/FormHint.tsx
284
332
  var import_clsx8 = __toESM(require("clsx"));
285
333
  var import_FormHint = require("./styles/FormHint.css");
334
+ var import_jsx_runtime = require("react/jsx-runtime");
286
335
  var FormHint = ({ className, children, ...rest }) => {
287
336
  const classes = (0, import_clsx8.default)("Form-hint", className);
288
- return /* @__PURE__ */ React.createElement("div", {
337
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
289
338
  ...rest,
290
- className: classes
291
- }, children);
339
+ className: classes,
340
+ children
341
+ });
292
342
  };
293
343
 
294
344
  // src/FormField.tsx
295
345
  var import_FormField = require("./styles/FormField.css");
346
+ var import_jsx_runtime = require("react/jsx-runtime");
296
347
  var FormField = ({
297
348
  isRequired,
298
349
  label,
@@ -309,49 +360,68 @@ var FormField = ({
309
360
  const handleBlur = () => {
310
361
  onBlur && onBlur(name);
311
362
  };
312
- return /* @__PURE__ */ React.createElement(FormGroup, {
363
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
313
364
  className: (0, import_clsx9.default)("FormField", className),
314
365
  name,
315
366
  ignoreValidation,
316
367
  isInvalid,
317
- onBlur: handleBlur
318
- }, label && /* @__PURE__ */ React.createElement("label", {
319
- htmlFor
320
- }, label, isRequired && /* @__PURE__ */ React.createElement(RequiredAsterisk, null)), hint && /* @__PURE__ */ React.createElement(FormHint, {
321
- className: "FormField-hint"
322
- }, hint), children, /* @__PURE__ */ React.createElement(FieldError, {
323
- className: "FormField-errorMessage",
324
- name,
325
- errorMessage
326
- }));
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
+ });
327
389
  };
328
390
 
329
391
  // src/IconField.tsx
330
392
  var import_icons = require("@launchpad-ui/icons");
331
393
  var import_IconField = require("./styles/IconField.css");
394
+ var import_jsx_runtime = require("react/jsx-runtime");
332
395
  var IconField = ({ icon, children }) => {
333
396
  const Icon = icon;
334
- return /* @__PURE__ */ React.createElement("div", {
335
- className: "IconField"
336
- }, children, /* @__PURE__ */ React.createElement(Icon, {
337
- size: import_icons.IconSize.SMALL
338
- }));
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
+ });
339
406
  };
340
407
 
341
408
  // src/InputGroup.tsx
342
409
  var import_clsx10 = __toESM(require("clsx"));
343
410
  var import_InputGroup = require("./styles/InputGroup.css");
411
+ var import_jsx_runtime = require("react/jsx-runtime");
344
412
  var InputGroup = ({ className, children, ...other }) => {
345
413
  const classes = (0, import_clsx10.default)("InputGroup", className);
346
- return /* @__PURE__ */ React.createElement("div", {
414
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
347
415
  ...other,
348
- className: classes
349
- }, children);
416
+ className: classes,
417
+ children
418
+ });
350
419
  };
351
420
 
352
421
  // src/Radio.tsx
353
422
  var import_clsx11 = __toESM(require("clsx"));
354
423
  var import_Form6 = require("./styles/Form.css");
424
+ var import_jsx_runtime = require("react/jsx-runtime");
355
425
  var Radio = ({
356
426
  "aria-label": ariaLabel,
357
427
  "aria-labelledby": ariaLabelledby,
@@ -369,33 +439,43 @@ var Radio = ({
369
439
  }) => {
370
440
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
371
441
  if (!children && !hasAriaLabel) {
372
- 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
+ );
373
445
  }
374
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", {
375
- "aria-label": ariaLabel,
376
- "aria-labelledby": ariaLabelledby,
377
- className: (0, import_clsx11.default)("Form-radio", className),
378
- checked,
379
- disabled,
380
- id,
381
- name,
382
- onChange,
383
- type: "radio",
384
- value,
385
- ...props
386
- }), /* @__PURE__ */ React.createElement(Label, {
387
- className: labelClassName,
388
- htmlFor: id,
389
- style: labelStyle
390
- }, disabled ? /* @__PURE__ */ React.createElement("span", {
391
- className: "Form-label--disabled"
392
- }, 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
+ });
393
472
  };
394
473
 
395
474
  // src/RadioGroup.tsx
396
475
  var import_visually_hidden = require("@react-aria/visually-hidden");
397
476
  var import_react4 = require("react");
398
477
  var import_Form7 = require("./styles/Form.css");
478
+ var import_jsx_runtime = require("react/jsx-runtime");
399
479
  var RadioGroup = (props) => {
400
480
  const { name, value, onChange, children, disabled, legend, ...other } = props;
401
481
  const fieldsetRef = (0, import_react4.useRef)(null);
@@ -436,29 +516,41 @@ var RadioGroup = (props) => {
436
516
  return null;
437
517
  }
438
518
  const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
439
- return /* @__PURE__ */ React.createElement("fieldset", {
440
- ref: fieldsetRef
441
- }, legend && /* @__PURE__ */ React.createElement("legend", null, /* @__PURE__ */ React.createElement(import_visually_hidden.VisuallyHidden, null, legend)), /* @__PURE__ */ React.createElement("div", {
442
- ...other
443
- }, 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
+ });
444
533
  };
445
534
 
446
535
  // src/Select.tsx
447
536
  var import_clsx12 = __toESM(require("clsx"));
448
537
  var import_FormInput3 = require("./styles/FormInput.css");
538
+ var import_jsx_runtime = require("react/jsx-runtime");
449
539
  var Select = ({ className, children, testId, ...rest }) => {
450
540
  const classes = (0, import_clsx12.default)("FormInput", "FormInput-select", className);
451
- return /* @__PURE__ */ React.createElement("select", {
541
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
452
542
  ...rest,
453
543
  className: classes,
454
- "data-test-id": testId
455
- }, children);
544
+ "data-test-id": testId,
545
+ children
546
+ });
456
547
  };
457
548
 
458
549
  // src/TextArea.tsx
459
550
  var import_clsx13 = __toESM(require("clsx"));
460
551
  var import_react5 = require("react");
461
552
  var import_FormInput4 = require("./styles/FormInput.css");
553
+ var import_jsx_runtime = require("react/jsx-runtime");
462
554
  var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
463
555
  const onKeyDown = (e) => {
464
556
  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
@@ -468,7 +560,7 @@ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
468
560
  e.nativeEvent.stopImmediatePropagation();
469
561
  }
470
562
  };
471
- return /* @__PURE__ */ React.createElement("textarea", {
563
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
472
564
  ...props,
473
565
  className: (0, import_clsx13.default)("FormInput", className),
474
566
  ref,