@launchpad-ui/form 0.3.3 → 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,119 +326,112 @@ 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
- if (elem?.type && elem.type === Radio) {
432
- return cloneElement(elem, {
433
- ...elem.props,
371
+ const item = elem;
372
+ if ((item == null ? void 0 : item.type) && item.type === Radio) {
373
+ return cloneElement(item, {
374
+ ...item.props,
434
375
  name,
435
- checked: elem.props.value === value,
376
+ checked: item.props.value === value,
436
377
  onChange,
437
- disabled: typeof elem.props?.disabled !== "undefined" ? elem.props.disabled : disabled
378
+ disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
438
379
  });
439
380
  }
440
- if (elem?.type && elem.type === Label) {
441
- return cloneElement(elem, {
442
- ...elem.props,
381
+ if ((item == null ? void 0 : item.type) && item.type === Label) {
382
+ return cloneElement(item, {
383
+ ...item.props,
443
384
  onChange,
444
385
  disabled
445
386
  });
446
387
  }
447
- const elemChildren = elem?.props?.children;
388
+ const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
448
389
  if (elemChildren) {
449
390
  if (Array.isArray(elemChildren)) {
450
- return cloneElement(elem, {
391
+ return cloneElement(item, {
451
392
  children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
452
393
  });
453
394
  }
454
- return cloneElement(elem, {
395
+ return cloneElement(item, {
455
396
  children: updateRadioElems(elemChildren)
456
397
  });
457
398
  }
458
- if (elem?.type && elem.type !== Radio && elem.type !== Label) {
459
- return elem;
399
+ if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
400
+ return item;
460
401
  }
461
402
  return null;
462
403
  }
463
404
  const radios = Children.map(children, (child) => updateRadioElems(child));
464
- return /* @__PURE__ */ jsxs8("fieldset", {
405
+ return /* @__PURE__ */ jsxs("fieldset", {
465
406
  ref: fieldsetRef,
466
- children: [
467
- legend && /* @__PURE__ */ jsx15("legend", {
468
- children: /* @__PURE__ */ jsx15(VisuallyHidden, {
469
- children: legend
470
- })
471
- }),
472
- /* @__PURE__ */ jsx15("div", {
473
- ...other,
474
- children: radios
407
+ children: [legend && /* @__PURE__ */ jsx("legend", {
408
+ children: /* @__PURE__ */ jsx(VisuallyHidden, {
409
+ children: legend
475
410
  })
476
- ]
411
+ }), /* @__PURE__ */ jsx("div", {
412
+ ...other,
413
+ children: radios
414
+ })]
477
415
  });
478
416
  };
479
-
480
- // src/Select.tsx
481
- import { cx as cx12 } from "classix";
482
- import "./styles/FormInput.css";
483
- import { jsx as jsx16 } from "react/jsx-runtime";
484
- var Select = ({ className, children, testId, ...rest }) => {
485
- const classes = cx12("FormInput", "FormInput-select", className);
486
- 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", {
487
425
  ...rest,
488
426
  className: classes,
489
427
  "data-test-id": testId,
490
428
  children
491
429
  });
492
430
  };
493
-
494
- // src/TextArea.tsx
495
- import { cx as cx13 } from "classix";
496
- import { forwardRef as forwardRef4 } from "react";
497
- import "./styles/FormInput.css";
498
- import { jsx as jsx17 } from "react/jsx-runtime";
499
- var TextArea = forwardRef4(({ className, ...props }, ref) => {
431
+ const TextArea = forwardRef(({
432
+ className,
433
+ ...props
434
+ }, ref) => {
500
435
  const onKeyDown = (e) => {
501
436
  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
502
437
  e.stopPropagation();
@@ -505,9 +440,9 @@ var TextArea = forwardRef4(({ className, ...props }, ref) => {
505
440
  e.nativeEvent.stopImmediatePropagation();
506
441
  }
507
442
  };
508
- return /* @__PURE__ */ jsx17("textarea", {
443
+ return /* @__PURE__ */ jsx("textarea", {
509
444
  ...props,
510
- className: cx13("FormInput", className),
445
+ className: cx("FormInput", className),
511
446
  ref,
512
447
  "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
513
448
  onKeyDown