@launchpad-ui/form 0.3.5 → 0.4.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.es.js CHANGED
@@ -1,14 +1,15 @@
1
- // src/Checkbox.tsx
2
- import { forwardRef } from "react";
3
-
4
- // src/Label.tsx
5
- import { cx as cx2 } from "classix";
6
-
7
- // src/RequiredAsterisk.tsx
1
+ import './style.css';
2
+ import { forwardRef, useState, useRef, Children, isValidElement, cloneElement } from "react";
8
3
  import { cx } from "classix";
9
- import "./styles/RequiredAsterisk.css";
10
- import { jsx } from "react/jsx-runtime";
11
- var RequiredAsterisk = ({ className, testId, ...rest }) => {
4
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
5
+ import { IconSize } from "@launchpad-ui/icons";
6
+ import { VisuallyHidden } from "@react-aria/visually-hidden";
7
+ const RequiredAsterisk$1 = "";
8
+ const RequiredAsterisk = ({
9
+ className,
10
+ testId,
11
+ ...rest
12
+ }) => {
12
13
  const classes = cx("RequiredAsterisk");
13
14
  return /* @__PURE__ */ jsx("span", {
14
15
  className: classes,
@@ -17,11 +18,8 @@ var RequiredAsterisk = ({ className, testId, ...rest }) => {
17
18
  children: "*"
18
19
  });
19
20
  };
20
-
21
- // src/Label.tsx
22
- import "./styles/Form.css";
23
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
24
- var Label = ({
21
+ const Form$1 = "";
22
+ const Label = ({
25
23
  htmlFor,
26
24
  disabled,
27
25
  className,
@@ -30,222 +28,186 @@ var Label = ({
30
28
  optional = false,
31
29
  ...other
32
30
  }) => {
33
- const classes = cx2("Form-label", className, disabled && "Form-label--disabled");
31
+ const classes = cx("Form-label", className, disabled && "Form-label--disabled");
34
32
  return /* @__PURE__ */ jsxs("label", {
35
33
  ...other,
36
34
  className: classes,
37
35
  htmlFor,
38
- children: [
39
- children,
40
- optional && !required && /* @__PURE__ */ jsx2("small", {
41
- className: "Form-labelOptional",
42
- children: "(optional)"
43
- }),
44
- required && !optional && /* @__PURE__ */ jsx2(RequiredAsterisk, {})
45
- ]
36
+ children: [children, optional && !required && /* @__PURE__ */ jsx("small", {
37
+ className: "Form-labelOptional",
38
+ children: "(optional)"
39
+ }), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
46
40
  });
47
41
  };
48
-
49
- // src/Checkbox.tsx
50
- import "./styles/Form.css";
51
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
52
- var Checkbox = forwardRef(
53
- ({
54
- "aria-label": ariaLabel,
55
- "aria-labelledby": ariaLabelledby,
56
- children,
57
- disabled,
58
- testId,
59
- checked,
60
- labelClassName,
61
- ...other
62
- }, ref) => {
63
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
64
- if (!children && !hasAriaLabel) {
65
- console.warn(
66
- "If you do not provide children, you must specify an aria-label for accessibility"
67
- );
68
- }
69
- return /* @__PURE__ */ jsxs2(Label, {
70
- className: labelClassName,
71
- children: [
72
- /* @__PURE__ */ jsx3("input", {
73
- ...other,
74
- ref,
75
- checked,
76
- "aria-checked": checked ? "true" : "false",
77
- "aria-label": ariaLabel,
78
- "aria-labelledby": ariaLabelledby,
79
- className: "Form-checkbox",
80
- disabled,
81
- "data-test-id": testId,
82
- type: "checkbox"
83
- }),
84
- " ",
85
- disabled ? /* @__PURE__ */ jsx3("span", {
86
- className: "Form-label--disabled",
87
- children
88
- }) : children
89
- ]
90
- });
42
+ const Checkbox = forwardRef(({
43
+ "aria-label": ariaLabel,
44
+ "aria-labelledby": ariaLabelledby,
45
+ children,
46
+ disabled,
47
+ testId,
48
+ checked,
49
+ labelClassName,
50
+ ...other
51
+ }, ref) => {
52
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
53
+ if (!children && !hasAriaLabel) {
54
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
91
55
  }
92
- );
56
+ return /* @__PURE__ */ jsxs(Label, {
57
+ className: labelClassName,
58
+ children: [/* @__PURE__ */ jsx("input", {
59
+ ...other,
60
+ ref,
61
+ checked,
62
+ "aria-checked": checked ? "true" : "false",
63
+ "aria-label": ariaLabel,
64
+ "aria-labelledby": ariaLabelledby,
65
+ className: "Form-checkbox",
66
+ disabled,
67
+ "data-test-id": testId,
68
+ type: "checkbox"
69
+ }), " ", disabled ? /* @__PURE__ */ jsx("span", {
70
+ className: "Form-label--disabled",
71
+ children
72
+ }) : children]
73
+ });
74
+ });
93
75
  Checkbox.displayName = "Checkbox";
94
-
95
- // src/CompactTextField.tsx
96
- import { cx as cx4 } from "classix";
97
- import { forwardRef as forwardRef3, useState } from "react";
98
-
99
- // src/TextField.tsx
100
- import { cx as cx3 } from "classix";
101
- import { forwardRef as forwardRef2 } from "react";
102
- import "./styles/FormInput.css";
103
-
104
- // src/utils/index.ts
105
- var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
106
-
107
- // src/TextField.tsx
108
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
109
- var TextField = forwardRef2(
110
- ({
111
- className,
112
- type = "text",
113
- tiny = false,
76
+ const FormInput = "";
77
+ const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
78
+ const TextField = forwardRef(({
79
+ className,
80
+ type = "text",
81
+ tiny = false,
82
+ readOnly,
83
+ tabIndex = 0,
84
+ testId,
85
+ suffix,
86
+ overrideWidth,
87
+ ...rest
88
+ }, ref) => {
89
+ const classes = overrideWidth ? className : cx("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
90
+ if (suffix) {
91
+ return /* @__PURE__ */ jsxs("div", {
92
+ className: "FormInput-suffixContainer",
93
+ children: [/* @__PURE__ */ jsx("input", {
94
+ ...rest,
95
+ type,
96
+ className: cx(classes, "FormInput-suffix"),
97
+ readOnly,
98
+ ref,
99
+ "data-test-id": testId,
100
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
101
+ }), /* @__PURE__ */ jsx("label", {
102
+ className: "FormInput-suffix",
103
+ htmlFor: rest.id,
104
+ children: suffix
105
+ })]
106
+ });
107
+ }
108
+ return /* @__PURE__ */ jsx("input", {
109
+ ...rest,
110
+ type,
111
+ className: classes,
114
112
  readOnly,
115
- tabIndex = 0,
116
- testId,
117
- suffix,
118
- overrideWidth,
119
- ...rest
120
- }, ref) => {
121
- const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
122
- if (suffix) {
123
- return /* @__PURE__ */ jsxs3("div", {
124
- className: "FormInput-suffixContainer",
125
- children: [
126
- /* @__PURE__ */ jsx4("input", {
127
- ...rest,
128
- type,
129
- className: cx3(classes, "FormInput-suffix"),
130
- readOnly,
131
- ref,
132
- "data-test-id": testId,
133
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
134
- }),
135
- /* @__PURE__ */ jsx4("label", {
136
- className: "FormInput-suffix",
137
- htmlFor: rest.id,
138
- children: suffix
139
- })
140
- ]
141
- });
113
+ tabIndex,
114
+ ref,
115
+ "data-test-id": testId,
116
+ style: overrideWidth ? {
117
+ width: overrideWidth
118
+ } : void 0,
119
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
120
+ });
121
+ });
122
+ TextField.displayName = "TextField";
123
+ const CompactTextField$1 = "";
124
+ const CompactTextField = forwardRef(({
125
+ className,
126
+ id,
127
+ name,
128
+ label,
129
+ type,
130
+ needsErrorFeedback,
131
+ value,
132
+ onFocus,
133
+ onBlur,
134
+ ...rest
135
+ }, ref) => {
136
+ const [isActive, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
137
+ const isActiveState = isActive || needsErrorFeedback;
138
+ const classes = cx("CompactTextField", className, isActiveState && "is-active");
139
+ const placeholder = isActiveState ? "" : label;
140
+ const handleFocus = (event) => {
141
+ setIsActive(true);
142
+ if (onFocus) {
143
+ onFocus(event);
144
+ }
145
+ };
146
+ const handleBlur = (event) => {
147
+ const value2 = event.target.value || "";
148
+ setIsActive(value2.trim().length !== 0);
149
+ if (onBlur) {
150
+ onBlur(event);
142
151
  }
143
- return /* @__PURE__ */ jsx4("input", {
152
+ };
153
+ return /* @__PURE__ */ jsxs("div", {
154
+ className: classes,
155
+ children: [/* @__PURE__ */ jsx(Label, {
156
+ htmlFor: id,
157
+ children: label
158
+ }), /* @__PURE__ */ jsx(TextField, {
144
159
  ...rest,
160
+ id,
161
+ name,
145
162
  type,
146
- className: classes,
147
- readOnly,
148
- tabIndex,
163
+ placeholder,
164
+ value,
149
165
  ref,
150
- "data-test-id": testId,
151
- style: overrideWidth ? {
152
- width: overrideWidth
153
- } : void 0,
154
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
155
- });
156
- }
157
- );
158
- TextField.displayName = "TextField";
159
-
160
- // src/CompactTextField.tsx
161
- import "./styles/CompactTextField.css";
162
- import "./styles/FormInput.css";
163
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
164
- var CompactTextField = forwardRef3(
165
- ({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
166
- const [isActive, setIsActive] = useState(
167
- (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
168
- );
169
- const isActiveState = isActive || needsErrorFeedback;
170
- const classes = cx4("CompactTextField", className, isActiveState && "is-active");
171
- const placeholder = isActiveState ? "" : label;
172
- const handleFocus = (event) => {
173
- setIsActive(true);
174
- if (onFocus) {
175
- onFocus(event);
176
- }
177
- };
178
- const handleBlur = (event) => {
179
- const value2 = event.target.value || "";
180
- setIsActive(value2.trim().length !== 0);
181
- if (onBlur) {
182
- onBlur(event);
183
- }
184
- };
185
- return /* @__PURE__ */ jsxs4("div", {
186
- className: classes,
187
- children: [
188
- /* @__PURE__ */ jsx5(Label, {
189
- htmlFor: id,
190
- children: label
191
- }),
192
- /* @__PURE__ */ jsx5(TextField, {
193
- ...rest,
194
- id,
195
- name,
196
- type,
197
- placeholder,
198
- value,
199
- ref,
200
- onFocus: handleFocus,
201
- onBlur: handleBlur
202
- })
203
- ]
204
- });
205
- }
206
- );
166
+ onFocus: handleFocus,
167
+ onBlur: handleBlur
168
+ })]
169
+ });
170
+ });
207
171
  CompactTextField.displayName = "CompactTextField";
208
-
209
- // src/FieldError.tsx
210
- import { cx as cx5 } from "classix";
211
- import "./styles/Form.css";
212
- import { jsx as jsx6 } from "react/jsx-runtime";
213
- var FieldError = ({ name, errorMessage, className }) => {
172
+ const FieldError = ({
173
+ name,
174
+ errorMessage,
175
+ className
176
+ }) => {
214
177
  if (!errorMessage) {
215
178
  return null;
216
179
  }
217
- return /* @__PURE__ */ jsx6("span", {
218
- className: cx5("Form-fieldError", className),
180
+ return /* @__PURE__ */ jsx("span", {
181
+ className: cx("Form-fieldError", className),
219
182
  "aria-live": "polite",
220
183
  id: createFieldErrorId(name),
221
184
  children: `Error - ${errorMessage}`
222
185
  });
223
186
  };
224
-
225
- // src/FieldSet.tsx
226
- import "./styles/FieldSet.css";
227
- import { jsx as jsx7 } from "react/jsx-runtime";
228
- var FieldSet = ({ children, testId }) => {
229
- return /* @__PURE__ */ jsx7("fieldset", {
187
+ const FieldSet$1 = "";
188
+ const FieldSet = ({
189
+ children,
190
+ testId
191
+ }) => {
192
+ return /* @__PURE__ */ jsx("fieldset", {
230
193
  className: "FieldSet",
231
194
  "data-test-id": testId,
232
195
  children
233
196
  });
234
197
  };
235
-
236
- // src/Form.tsx
237
- import { cx as cx6 } from "classix";
238
- import "./styles/Form.css";
239
- import { jsx as jsx8 } from "react/jsx-runtime";
240
- var Form = (props) => {
241
- const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
242
- const classes = cx6(
243
- "Form",
198
+ const Form = (props) => {
199
+ const {
200
+ id,
201
+ name,
244
202
  className,
245
- inline && "Form--inline",
246
- !!hasIncreasedErrorMargin && "Form--increasedErrorMargin"
247
- );
248
- return /* @__PURE__ */ jsx8("form", {
203
+ inline,
204
+ children,
205
+ ariaLabel,
206
+ hasIncreasedErrorMargin,
207
+ ...rest
208
+ } = props;
209
+ const classes = cx("Form", className, inline && "Form--inline", !!hasIncreasedErrorMargin && "Form--increasedErrorMargin");
210
+ return /* @__PURE__ */ jsx("form", {
249
211
  id,
250
212
  name,
251
213
  "aria-label": ariaLabel,
@@ -254,42 +216,39 @@ var Form = (props) => {
254
216
  children
255
217
  });
256
218
  };
257
-
258
- // src/FormField.tsx
259
- import { cx as cx9 } from "classix";
260
-
261
- // src/FormGroup.tsx
262
- import { cx as cx7 } from "classix";
263
- import "./styles/Form.css";
264
- import { jsx as jsx9 } from "react/jsx-runtime";
265
- var FormGroup = (props) => {
266
- const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
267
- const classes = cx7("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
268
- return /* @__PURE__ */ jsx9("div", {
219
+ const FormGroup = (props) => {
220
+ const {
221
+ className,
222
+ name,
223
+ ignoreValidation,
224
+ isInvalid,
225
+ children,
226
+ testId,
227
+ ...other
228
+ } = props;
229
+ const classes = cx("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
230
+ return /* @__PURE__ */ jsx("div", {
269
231
  className: classes,
270
232
  "data-test-id": testId,
271
233
  ...other,
272
234
  children
273
235
  });
274
236
  };
275
-
276
- // src/FormHint.tsx
277
- import { cx as cx8 } from "classix";
278
- import "./styles/FormHint.css";
279
- import { jsx as jsx10 } from "react/jsx-runtime";
280
- var FormHint = ({ className, children, ...rest }) => {
281
- const classes = cx8("Form-hint", className);
282
- return /* @__PURE__ */ jsx10("div", {
237
+ const FormHint$1 = "";
238
+ const FormHint = ({
239
+ className,
240
+ children,
241
+ ...rest
242
+ }) => {
243
+ const classes = cx("Form-hint", className);
244
+ return /* @__PURE__ */ jsx("div", {
283
245
  ...rest,
284
246
  className: classes,
285
247
  children
286
248
  });
287
249
  };
288
-
289
- // src/FormField.tsx
290
- import "./styles/FormField.css";
291
- import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
292
- var FormField = ({
250
+ const FormField$1 = "";
251
+ const FormField = ({
293
252
  isRequired,
294
253
  label,
295
254
  name,
@@ -305,69 +264,52 @@ var FormField = ({
305
264
  const handleBlur = () => {
306
265
  onBlur && onBlur(name);
307
266
  };
308
- return /* @__PURE__ */ jsxs5(FormGroup, {
309
- className: cx9("FormField", className),
267
+ return /* @__PURE__ */ jsxs(FormGroup, {
268
+ className: cx("FormField", className),
310
269
  name,
311
270
  ignoreValidation,
312
271
  isInvalid,
313
272
  onBlur: handleBlur,
314
- children: [
315
- label && /* @__PURE__ */ jsxs5("label", {
316
- htmlFor,
317
- children: [
318
- label,
319
- isRequired && /* @__PURE__ */ jsx11(RequiredAsterisk, {})
320
- ]
321
- }),
322
- hint && /* @__PURE__ */ jsx11(FormHint, {
323
- className: "FormField-hint",
324
- children: hint
325
- }),
326
- children,
327
- /* @__PURE__ */ jsx11(FieldError, {
328
- className: "FormField-errorMessage",
329
- name,
330
- errorMessage
331
- })
332
- ]
273
+ children: [label && /* @__PURE__ */ jsxs("label", {
274
+ htmlFor,
275
+ children: [label, isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
276
+ }), hint && /* @__PURE__ */ jsx(FormHint, {
277
+ className: "FormField-hint",
278
+ children: hint
279
+ }), children, /* @__PURE__ */ jsx(FieldError, {
280
+ className: "FormField-errorMessage",
281
+ name,
282
+ errorMessage
283
+ })]
333
284
  });
334
285
  };
335
-
336
- // src/IconField.tsx
337
- import { IconSize } from "@launchpad-ui/icons";
338
- import "./styles/IconField.css";
339
- import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
340
- var IconField = ({ icon, children }) => {
286
+ const IconField$1 = "";
287
+ const IconField = ({
288
+ icon,
289
+ children
290
+ }) => {
341
291
  const Icon = icon;
342
- return /* @__PURE__ */ jsxs6("div", {
292
+ return /* @__PURE__ */ jsxs("div", {
343
293
  className: "IconField",
344
- children: [
345
- children,
346
- /* @__PURE__ */ jsx12(Icon, {
347
- size: IconSize.SMALL
348
- })
349
- ]
294
+ children: [children, /* @__PURE__ */ jsx(Icon, {
295
+ size: IconSize.SMALL
296
+ })]
350
297
  });
351
298
  };
352
-
353
- // src/InputGroup.tsx
354
- import { cx as cx10 } from "classix";
355
- import "./styles/InputGroup.css";
356
- import { jsx as jsx13 } from "react/jsx-runtime";
357
- var InputGroup = ({ className, children, ...other }) => {
358
- const classes = cx10("InputGroup", className);
359
- return /* @__PURE__ */ jsx13("div", {
299
+ const InputGroup$1 = "";
300
+ const InputGroup = ({
301
+ className,
302
+ children,
303
+ ...other
304
+ }) => {
305
+ const classes = cx("InputGroup", className);
306
+ return /* @__PURE__ */ jsx("div", {
360
307
  ...other,
361
308
  className: classes,
362
309
  children
363
310
  });
364
311
  };
365
-
366
- // src/Radio.tsx
367
- import { cx as cx11 } from "classix";
368
- import "./styles/Form.css";
369
- import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
370
- var Radio = ({
312
+ const Radio = ({
371
313
  "aria-label": ariaLabel,
372
314
  "aria-labelledby": ariaLabelledby,
373
315
  checked = false,
@@ -384,68 +326,66 @@ var Radio = ({
384
326
  }) => {
385
327
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
386
328
  if (!children && !hasAriaLabel) {
387
- console.warn(
388
- "If you do not provide children, you must specify an aria-label for accessibility"
389
- );
329
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
390
330
  }
391
- return /* @__PURE__ */ jsxs7(Fragment, {
392
- children: [
393
- /* @__PURE__ */ jsx14("input", {
394
- "aria-label": ariaLabel,
395
- "aria-labelledby": ariaLabelledby,
396
- className: cx11("Form-radio", className),
397
- checked,
398
- disabled,
399
- id,
400
- name,
401
- onChange,
402
- type: "radio",
403
- value,
404
- ...props
405
- }),
406
- /* @__PURE__ */ jsx14(Label, {
407
- className: labelClassName,
408
- htmlFor: id,
409
- style: labelStyle,
410
- children: disabled ? /* @__PURE__ */ jsx14("span", {
411
- className: "Form-label--disabled",
412
- children
413
- }) : children
414
- })
415
- ]
331
+ return /* @__PURE__ */ jsxs(Fragment, {
332
+ children: [/* @__PURE__ */ jsx("input", {
333
+ "aria-label": ariaLabel,
334
+ "aria-labelledby": ariaLabelledby,
335
+ className: cx("Form-radio", className),
336
+ checked,
337
+ disabled,
338
+ id,
339
+ name,
340
+ onChange,
341
+ type: "radio",
342
+ value,
343
+ ...props
344
+ }), /* @__PURE__ */ jsx(Label, {
345
+ className: labelClassName,
346
+ htmlFor: id,
347
+ style: labelStyle,
348
+ children: disabled ? /* @__PURE__ */ jsx("span", {
349
+ className: "Form-label--disabled",
350
+ children
351
+ }) : children
352
+ })]
416
353
  });
417
354
  };
418
-
419
- // src/RadioGroup.tsx
420
- import { VisuallyHidden } from "@react-aria/visually-hidden";
421
- import { Children, cloneElement, isValidElement, useRef } from "react";
422
- import "./styles/Form.css";
423
- import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
424
- var RadioGroup = (props) => {
425
- const { name, value, onChange, children, disabled, legend, ...other } = props;
355
+ const RadioGroup = (props) => {
356
+ const {
357
+ name,
358
+ value,
359
+ onChange,
360
+ children,
361
+ disabled,
362
+ legend,
363
+ ...other
364
+ } = props;
426
365
  const fieldsetRef = useRef(null);
427
366
  function updateRadioElems(elem) {
367
+ var _a, _b;
428
368
  if (!isValidElement(elem)) {
429
369
  return elem;
430
370
  }
431
371
  const item = elem;
432
- if (item?.type && item.type === Radio) {
372
+ if ((item == null ? void 0 : item.type) && item.type === Radio) {
433
373
  return cloneElement(item, {
434
374
  ...item.props,
435
375
  name,
436
376
  checked: item.props.value === value,
437
377
  onChange,
438
- disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
378
+ disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
439
379
  });
440
380
  }
441
- if (item?.type && item.type === Label) {
381
+ if ((item == null ? void 0 : item.type) && item.type === Label) {
442
382
  return cloneElement(item, {
443
383
  ...item.props,
444
384
  onChange,
445
385
  disabled
446
386
  });
447
387
  }
448
- const elemChildren = item?.props?.children;
388
+ const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
449
389
  if (elemChildren) {
450
390
  if (Array.isArray(elemChildren)) {
451
391
  return cloneElement(item, {
@@ -456,48 +396,42 @@ var RadioGroup = (props) => {
456
396
  children: updateRadioElems(elemChildren)
457
397
  });
458
398
  }
459
- if (item?.type && item.type !== Radio && item.type !== Label) {
399
+ if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
460
400
  return item;
461
401
  }
462
402
  return null;
463
403
  }
464
404
  const radios = Children.map(children, (child) => updateRadioElems(child));
465
- return /* @__PURE__ */ jsxs8("fieldset", {
405
+ return /* @__PURE__ */ jsxs("fieldset", {
466
406
  ref: fieldsetRef,
467
- children: [
468
- legend && /* @__PURE__ */ jsx15("legend", {
469
- children: /* @__PURE__ */ jsx15(VisuallyHidden, {
470
- children: legend
471
- })
472
- }),
473
- /* @__PURE__ */ jsx15("div", {
474
- ...other,
475
- children: radios
407
+ children: [legend && /* @__PURE__ */ jsx("legend", {
408
+ children: /* @__PURE__ */ jsx(VisuallyHidden, {
409
+ children: legend
476
410
  })
477
- ]
411
+ }), /* @__PURE__ */ jsx("div", {
412
+ ...other,
413
+ children: radios
414
+ })]
478
415
  });
479
416
  };
480
-
481
- // src/Select.tsx
482
- import { cx as cx12 } from "classix";
483
- import "./styles/FormInput.css";
484
- import { jsx as jsx16 } from "react/jsx-runtime";
485
- var Select = ({ className, children, testId, ...rest }) => {
486
- const classes = cx12("FormInput", "FormInput-select", className);
487
- return /* @__PURE__ */ jsx16("select", {
417
+ const Select = ({
418
+ className,
419
+ children,
420
+ testId,
421
+ ...rest
422
+ }) => {
423
+ const classes = cx("FormInput", "FormInput-select", className);
424
+ return /* @__PURE__ */ jsx("select", {
488
425
  ...rest,
489
426
  className: classes,
490
427
  "data-test-id": testId,
491
428
  children
492
429
  });
493
430
  };
494
-
495
- // src/TextArea.tsx
496
- import { cx as cx13 } from "classix";
497
- import { forwardRef as forwardRef4 } from "react";
498
- import "./styles/FormInput.css";
499
- import { jsx as jsx17 } from "react/jsx-runtime";
500
- var TextArea = forwardRef4(({ className, ...props }, ref) => {
431
+ const TextArea = forwardRef(({
432
+ className,
433
+ ...props
434
+ }, ref) => {
501
435
  const onKeyDown = (e) => {
502
436
  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
503
437
  e.stopPropagation();
@@ -506,9 +440,9 @@ var TextArea = forwardRef4(({ className, ...props }, ref) => {
506
440
  e.nativeEvent.stopImmediatePropagation();
507
441
  }
508
442
  };
509
- return /* @__PURE__ */ jsx17("textarea", {
443
+ return /* @__PURE__ */ jsx("textarea", {
510
444
  ...props,
511
- className: cx13("FormInput", className),
445
+ className: cx("FormInput", className),
512
446
  ref,
513
447
  "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
514
448
  onKeyDown