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