@launchpad-ui/form 0.1.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.
Files changed (64) hide show
  1. package/README.md +14 -0
  2. package/dist/Checkbox.d.ts +36 -0
  3. package/dist/Checkbox.d.ts.map +1 -0
  4. package/dist/CompactTextField.d.ts +22 -0
  5. package/dist/CompactTextField.d.ts.map +1 -0
  6. package/dist/FieldError.d.ts +12 -0
  7. package/dist/FieldError.d.ts.map +1 -0
  8. package/dist/FieldSet.d.ts +10 -0
  9. package/dist/FieldSet.d.ts.map +1 -0
  10. package/dist/Form.d.ts +19 -0
  11. package/dist/Form.d.ts.map +1 -0
  12. package/dist/FormField.d.ts +19 -0
  13. package/dist/FormField.d.ts.map +1 -0
  14. package/dist/FormGroup.d.ts +15 -0
  15. package/dist/FormGroup.d.ts.map +1 -0
  16. package/dist/FormHint.d.ts +11 -0
  17. package/dist/FormHint.d.ts.map +1 -0
  18. package/dist/IconField.d.ts +11 -0
  19. package/dist/IconField.d.ts.map +1 -0
  20. package/dist/InputGroup.d.ts +6 -0
  21. package/dist/InputGroup.d.ts.map +1 -0
  22. package/dist/Label.d.ts +14 -0
  23. package/dist/Label.d.ts.map +1 -0
  24. package/dist/Radio.d.ts +56 -0
  25. package/dist/Radio.d.ts.map +1 -0
  26. package/dist/RadioGroup.d.ts +41 -0
  27. package/dist/RadioGroup.d.ts.map +1 -0
  28. package/dist/RequiredAsterisk.d.ts +8 -0
  29. package/dist/RequiredAsterisk.d.ts.map +1 -0
  30. package/dist/Select.d.ts +17 -0
  31. package/dist/Select.d.ts.map +1 -0
  32. package/dist/TextArea.d.ts +12 -0
  33. package/dist/TextArea.d.ts.map +1 -0
  34. package/dist/TextField.d.ts +21 -0
  35. package/dist/TextField.d.ts.map +1 -0
  36. package/dist/index.d.ts +29 -0
  37. package/dist/index.d.ts.map +1 -0
  38. package/dist/index.es.js +511 -0
  39. package/dist/index.es.js.map +7 -0
  40. package/dist/index.js +556 -0
  41. package/dist/index.js.map +7 -0
  42. package/dist/styles/CompactTextField.css +2 -0
  43. package/dist/styles/CompactTextField.css.map +1 -0
  44. package/dist/styles/FieldSet.css +2 -0
  45. package/dist/styles/FieldSet.css.map +1 -0
  46. package/dist/styles/Form.css +2 -0
  47. package/dist/styles/Form.css.map +1 -0
  48. package/dist/styles/FormField.css +2 -0
  49. package/dist/styles/FormField.css.map +1 -0
  50. package/dist/styles/FormHint.css +2 -0
  51. package/dist/styles/FormHint.css.map +1 -0
  52. package/dist/styles/FormInput.css +2 -0
  53. package/dist/styles/FormInput.css.map +1 -0
  54. package/dist/styles/IconField.css +2 -0
  55. package/dist/styles/IconField.css.map +1 -0
  56. package/dist/styles/InputGroup.css +2 -0
  57. package/dist/styles/InputGroup.css.map +1 -0
  58. package/dist/styles/RequiredAsterisk.css +2 -0
  59. package/dist/styles/RequiredAsterisk.css.map +1 -0
  60. package/dist/styles/styles.css +2 -0
  61. package/dist/styles/styles.css.map +1 -0
  62. package/dist/utils/index.d.ts +5 -0
  63. package/dist/utils/index.d.ts.map +1 -0
  64. package/package.json +50 -0
package/dist/index.js ADDED
@@ -0,0 +1,556 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ 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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
+
22
+ // src/index.ts
23
+ var src_exports = {};
24
+ __export(src_exports, {
25
+ Checkbox: () => Checkbox,
26
+ CompactTextField: () => CompactTextField,
27
+ FieldError: () => FieldError,
28
+ FieldSet: () => FieldSet,
29
+ Form: () => Form,
30
+ FormField: () => FormField,
31
+ FormGroup: () => FormGroup,
32
+ FormHint: () => FormHint,
33
+ IconField: () => IconField,
34
+ InputGroup: () => InputGroup,
35
+ Label: () => Label,
36
+ Radio: () => Radio,
37
+ RadioGroup: () => RadioGroup,
38
+ RequiredAsterisk: () => RequiredAsterisk,
39
+ Select: () => Select,
40
+ TextArea: () => TextArea,
41
+ TextField: () => TextField
42
+ });
43
+ module.exports = __toCommonJS(src_exports);
44
+
45
+ // ../../scripts/react-shim.js
46
+ var React = __toESM(require("react"));
47
+
48
+ // src/Checkbox.tsx
49
+ var import_react = require("react");
50
+
51
+ // src/Label.tsx
52
+ var import_clsx2 = __toESM(require("clsx"));
53
+
54
+ // src/RequiredAsterisk.tsx
55
+ var import_clsx = __toESM(require("clsx"));
56
+ var import_RequiredAsterisk = require("./styles/RequiredAsterisk.css");
57
+ var RequiredAsterisk = ({ className, testId, ...rest }) => {
58
+ const classes = (0, import_clsx.default)("RequiredAsterisk");
59
+ return /* @__PURE__ */ React.createElement("span", {
60
+ className: classes,
61
+ "data-test-id": testId,
62
+ ...rest
63
+ }, "*");
64
+ };
65
+
66
+ // src/Label.tsx
67
+ var import_Form = require("./styles/Form.css");
68
+ var Label = ({
69
+ htmlFor,
70
+ disabled,
71
+ className,
72
+ children,
73
+ required = false,
74
+ optional = false,
75
+ ...other
76
+ }) => {
77
+ const classes = (0, import_clsx2.default)("Form-label", className, { "Form-label--disabled": disabled });
78
+ return /* @__PURE__ */ React.createElement("label", {
79
+ ...other,
80
+ className: classes,
81
+ htmlFor
82
+ }, children, optional && !required && /* @__PURE__ */ React.createElement("small", {
83
+ className: "Form-labelOptional u-subtle"
84
+ }, "(optional)"), required && !optional && /* @__PURE__ */ React.createElement(RequiredAsterisk, null));
85
+ };
86
+
87
+ // src/Checkbox.tsx
88
+ var import_Form2 = require("./styles/Form.css");
89
+ var Checkbox = class extends import_react.Component {
90
+ constructor(props) {
91
+ super(props);
92
+ this.inputRef = (0, import_react.createRef)();
93
+ }
94
+ value() {
95
+ return this.inputRef.current?.value;
96
+ }
97
+ checked() {
98
+ return this.inputRef.current?.checked;
99
+ }
100
+ render() {
101
+ const {
102
+ "aria-label": ariaLabel,
103
+ "aria-labelledby": ariaLabelledby,
104
+ children,
105
+ disabled,
106
+ testId,
107
+ checked,
108
+ labelClassName,
109
+ ...other
110
+ } = this.props;
111
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
112
+ if (!children && !hasAriaLabel) {
113
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
114
+ }
115
+ return /* @__PURE__ */ React.createElement(Label, {
116
+ className: labelClassName
117
+ }, /* @__PURE__ */ React.createElement("input", {
118
+ ...other,
119
+ ref: this.inputRef,
120
+ checked,
121
+ "aria-checked": checked ? "true" : "false",
122
+ "aria-label": ariaLabel,
123
+ "aria-labelledby": ariaLabelledby,
124
+ className: "Form-checkbox",
125
+ disabled,
126
+ "data-test-id": testId,
127
+ type: "checkbox"
128
+ }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
129
+ className: "Form-label--disabled"
130
+ }, children) : children);
131
+ }
132
+ };
133
+
134
+ // src/CompactTextField.tsx
135
+ var import_clsx4 = __toESM(require("clsx"));
136
+ var import_lodash_es = require("lodash-es");
137
+ var import_react3 = require("react");
138
+
139
+ // src/TextField.tsx
140
+ var import_clsx3 = __toESM(require("clsx"));
141
+ var import_react2 = require("react");
142
+ var import_FormInput = require("./styles/FormInput.css");
143
+
144
+ // src/utils/index.ts
145
+ var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
146
+
147
+ // src/TextField.tsx
148
+ var TextField = class extends import_react2.Component {
149
+ constructor(props) {
150
+ super(props);
151
+ this.inputRef = (0, import_react2.createRef)();
152
+ }
153
+ render() {
154
+ const {
155
+ className,
156
+ type = "text",
157
+ tiny = false,
158
+ readOnly,
159
+ tabIndex = 0,
160
+ testId,
161
+ suffix,
162
+ overrideWidth,
163
+ ...rest
164
+ } = this.props;
165
+ const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
166
+ "FormInput--tiny": tiny
167
+ });
168
+ if (suffix) {
169
+ return /* @__PURE__ */ React.createElement("div", {
170
+ className: "FormInput-suffixContainer"
171
+ }, /* @__PURE__ */ React.createElement("input", {
172
+ ...rest,
173
+ type,
174
+ className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
175
+ readOnly,
176
+ ref: this.inputRef,
177
+ "data-test-id": testId,
178
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
179
+ }), /* @__PURE__ */ React.createElement("label", {
180
+ className: "FormInput-suffix",
181
+ htmlFor: rest.id
182
+ }, suffix));
183
+ }
184
+ return /* @__PURE__ */ React.createElement("input", {
185
+ ...rest,
186
+ type,
187
+ className: classes,
188
+ readOnly,
189
+ tabIndex,
190
+ ref: this.inputRef,
191
+ "data-test-id": testId,
192
+ style: overrideWidth ? {
193
+ width: overrideWidth
194
+ } : void 0,
195
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
196
+ });
197
+ }
198
+ getElement() {
199
+ return this.inputRef.current;
200
+ }
201
+ value() {
202
+ return this.inputRef.current?.value;
203
+ }
204
+ focus() {
205
+ this.inputRef.current?.focus();
206
+ }
207
+ blur() {
208
+ this.inputRef.current?.blur();
209
+ }
210
+ select() {
211
+ this.inputRef.current?.focus();
212
+ }
213
+ };
214
+
215
+ // src/CompactTextField.tsx
216
+ var import_CompactTextField = require("./styles/CompactTextField.css");
217
+ var import_FormInput2 = require("./styles/FormInput.css");
218
+ var CompactTextField = class extends import_react3.Component {
219
+ constructor(props) {
220
+ super(props);
221
+ this.handleFocus = (event) => {
222
+ this.setState({ isActive: true });
223
+ if (this.props.onFocus) {
224
+ this.props.onFocus(event);
225
+ }
226
+ };
227
+ this.handleBlur = (event) => {
228
+ const value = event.target.value || "";
229
+ this.setState({ isActive: value.trim().length !== 0 });
230
+ if (this.props.onBlur) {
231
+ this.props.onBlur(event);
232
+ }
233
+ };
234
+ this.value = () => this.textField ? this.textField.value() : "";
235
+ this.focus = () => {
236
+ if (this.textField) {
237
+ this.textField.focus();
238
+ }
239
+ };
240
+ const value = props.value;
241
+ this.state = {
242
+ isActive: ((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0
243
+ };
244
+ }
245
+ render() {
246
+ const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;
247
+ const isActive = this.state.isActive || needsErrorFeedback;
248
+ const classes = (0, import_clsx4.default)("CompactTextField", className, {
249
+ "is-active": isActive
250
+ });
251
+ const placeholder = isActive ? "" : label;
252
+ return /* @__PURE__ */ React.createElement("div", {
253
+ className: classes
254
+ }, /* @__PURE__ */ React.createElement(Label, {
255
+ htmlFor: id
256
+ }, label), /* @__PURE__ */ React.createElement(TextField, {
257
+ ...rest,
258
+ id,
259
+ name,
260
+ type,
261
+ placeholder,
262
+ ref: (textField) => {
263
+ this.textField = textField;
264
+ },
265
+ onFocus: this.handleFocus,
266
+ onBlur: this.handleBlur
267
+ }));
268
+ }
269
+ };
270
+
271
+ // src/FieldError.tsx
272
+ var import_clsx5 = __toESM(require("clsx"));
273
+ var import_Form3 = require("./styles/Form.css");
274
+ var FieldError = ({ name, errorMessage, className }) => {
275
+ if (!errorMessage) {
276
+ return null;
277
+ }
278
+ return /* @__PURE__ */ React.createElement("span", {
279
+ className: (0, import_clsx5.default)("Form-fieldError", className),
280
+ "aria-live": "polite",
281
+ id: createFieldErrorId(name)
282
+ }, `Error - ${errorMessage}`);
283
+ };
284
+
285
+ // src/FieldSet.tsx
286
+ var import_FieldSet = require("./styles/FieldSet.css");
287
+ var FieldSet = ({ children, testId }) => {
288
+ return /* @__PURE__ */ React.createElement("fieldset", {
289
+ className: "FieldSet",
290
+ "data-test-id": testId
291
+ }, children);
292
+ };
293
+
294
+ // src/Form.tsx
295
+ var import_clsx6 = __toESM(require("clsx"));
296
+ var import_Form4 = require("./styles/Form.css");
297
+ var Form = (props) => {
298
+ const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
299
+ const classes = (0, import_clsx6.default)("Form", className, {
300
+ "Form--inline": inline,
301
+ "Form--increasedErrorMargin": !!hasIncreasedErrorMargin
302
+ });
303
+ return /* @__PURE__ */ React.createElement("form", {
304
+ id,
305
+ name,
306
+ "aria-label": ariaLabel,
307
+ ...rest,
308
+ className: classes
309
+ }, children);
310
+ };
311
+
312
+ // src/FormField.tsx
313
+ var import_clsx9 = __toESM(require("clsx"));
314
+
315
+ // src/FormGroup.tsx
316
+ var import_clsx7 = __toESM(require("clsx"));
317
+ var import_Form5 = require("./styles/Form.css");
318
+ var FormGroup = (props) => {
319
+ const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
320
+ const classes = (0, import_clsx7.default)("Form-group", className, {
321
+ "is-invalid": !ignoreValidation && isInvalid
322
+ });
323
+ return /* @__PURE__ */ React.createElement("div", {
324
+ className: classes,
325
+ "data-test-id": testId,
326
+ ...other
327
+ }, children);
328
+ };
329
+
330
+ // src/FormHint.tsx
331
+ var import_clsx8 = __toESM(require("clsx"));
332
+ var import_FormHint = require("./styles/FormHint.css");
333
+ var FormHint = ({ className, children, ...rest }) => {
334
+ const classes = (0, import_clsx8.default)("Form-hint", className);
335
+ return /* @__PURE__ */ React.createElement("div", {
336
+ ...rest,
337
+ className: classes
338
+ }, children);
339
+ };
340
+
341
+ // src/FormField.tsx
342
+ var import_FormField = require("./styles/FormField.css");
343
+ var FormField = ({
344
+ isRequired,
345
+ label,
346
+ name,
347
+ htmlFor,
348
+ hint,
349
+ errorMessage,
350
+ ignoreValidation,
351
+ isInvalid,
352
+ children,
353
+ className,
354
+ onBlur
355
+ }) => {
356
+ const handleBlur = () => {
357
+ onBlur && onBlur(name);
358
+ };
359
+ return /* @__PURE__ */ React.createElement(FormGroup, {
360
+ className: (0, import_clsx9.default)("FormField", className),
361
+ name,
362
+ ignoreValidation,
363
+ isInvalid,
364
+ onBlur: handleBlur
365
+ }, label && /* @__PURE__ */ React.createElement("label", {
366
+ htmlFor
367
+ }, label, isRequired && /* @__PURE__ */ React.createElement(RequiredAsterisk, null)), hint && /* @__PURE__ */ React.createElement(FormHint, {
368
+ className: "FormField-hint u-subtle"
369
+ }, hint), children, /* @__PURE__ */ React.createElement(FieldError, {
370
+ className: "FormField-errorMessage",
371
+ name,
372
+ errorMessage
373
+ }));
374
+ };
375
+
376
+ // src/IconField.tsx
377
+ var import_icons = require("@launchpad-ui/icons");
378
+ var import_IconField = require("./styles/IconField.css");
379
+ var IconField = ({ icon, children }) => {
380
+ const Icon = icon;
381
+ return /* @__PURE__ */ React.createElement("div", {
382
+ className: "IconField"
383
+ }, children, /* @__PURE__ */ React.createElement(Icon, {
384
+ size: import_icons.IconSize.SMALL
385
+ }));
386
+ };
387
+
388
+ // src/InputGroup.tsx
389
+ var import_clsx10 = __toESM(require("clsx"));
390
+ var import_InputGroup = require("./styles/InputGroup.css");
391
+ var InputGroup = ({ className, children, ...other }) => {
392
+ const classes = (0, import_clsx10.default)("InputGroup", className);
393
+ return /* @__PURE__ */ React.createElement("div", {
394
+ ...other,
395
+ className: classes
396
+ }, children);
397
+ };
398
+
399
+ // src/Radio.tsx
400
+ var import_clsx11 = __toESM(require("clsx"));
401
+ var import_Form6 = require("./styles/Form.css");
402
+ var Radio = ({
403
+ "aria-label": ariaLabel,
404
+ "aria-labelledby": ariaLabelledby,
405
+ checked = false,
406
+ children,
407
+ className,
408
+ disabled = false,
409
+ id,
410
+ labelClassName,
411
+ name,
412
+ onChange = () => void 0,
413
+ labelStyle,
414
+ value,
415
+ ...props
416
+ }) => {
417
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
418
+ if (!children && !hasAriaLabel) {
419
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
420
+ }
421
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", {
422
+ "aria-label": ariaLabel,
423
+ "aria-labelledby": ariaLabelledby,
424
+ className: (0, import_clsx11.default)("Form-radio", className),
425
+ checked,
426
+ disabled,
427
+ id,
428
+ name,
429
+ onChange,
430
+ type: "radio",
431
+ value,
432
+ ...props
433
+ }), /* @__PURE__ */ React.createElement(Label, {
434
+ className: labelClassName,
435
+ htmlFor: id,
436
+ style: labelStyle
437
+ }, disabled ? /* @__PURE__ */ React.createElement("span", {
438
+ className: "Form-label--disabled"
439
+ }, children) : children));
440
+ };
441
+
442
+ // src/RadioGroup.tsx
443
+ var import_visually_hidden = require("@react-aria/visually-hidden");
444
+ var import_react4 = require("react");
445
+ var import_Form7 = require("./styles/Form.css");
446
+ var RadioGroup = (props) => {
447
+ const { name, value, onChange, children, disabled, legend, ...other } = props;
448
+ const fieldsetRef = (0, import_react4.useRef)(null);
449
+ function updateRadioElems(elem) {
450
+ if (!(0, import_react4.isValidElement)(elem)) {
451
+ return elem;
452
+ }
453
+ if (elem?.type && elem.type === Radio) {
454
+ return (0, import_react4.cloneElement)(elem, {
455
+ ...elem.props,
456
+ name,
457
+ checked: elem.props.value === value,
458
+ onChange,
459
+ disabled: typeof elem.props?.disabled !== "undefined" ? elem.props.disabled : disabled
460
+ });
461
+ }
462
+ if (elem?.type && elem.type === Label) {
463
+ return (0, import_react4.cloneElement)(elem, {
464
+ ...elem.props,
465
+ onChange,
466
+ disabled
467
+ });
468
+ }
469
+ const elemChildren = elem?.props?.children;
470
+ if (elemChildren) {
471
+ if (Array.isArray(elemChildren)) {
472
+ return (0, import_react4.cloneElement)(elem, {
473
+ children: import_react4.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
474
+ });
475
+ }
476
+ return (0, import_react4.cloneElement)(elem, {
477
+ children: updateRadioElems(elemChildren)
478
+ });
479
+ }
480
+ if (elem?.type && elem.type !== Radio && elem.type !== Label) {
481
+ return elem;
482
+ }
483
+ return null;
484
+ }
485
+ const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
486
+ return /* @__PURE__ */ React.createElement("fieldset", {
487
+ ref: fieldsetRef
488
+ }, legend && /* @__PURE__ */ React.createElement("legend", null, /* @__PURE__ */ React.createElement(import_visually_hidden.VisuallyHidden, null, legend)), /* @__PURE__ */ React.createElement("div", {
489
+ ...other
490
+ }, radios));
491
+ };
492
+
493
+ // src/Select.tsx
494
+ var import_clsx12 = __toESM(require("clsx"));
495
+ var import_FormInput3 = require("./styles/FormInput.css");
496
+ var Select = ({ className, children, testId, ...rest }) => {
497
+ const classes = (0, import_clsx12.default)("FormInput", "FormInput-select", className);
498
+ return /* @__PURE__ */ React.createElement("select", {
499
+ ...rest,
500
+ className: classes,
501
+ "data-test-id": testId
502
+ }, children);
503
+ };
504
+
505
+ // src/TextArea.tsx
506
+ var import_clsx13 = __toESM(require("clsx"));
507
+ var import_react5 = require("react");
508
+ var import_FormInput4 = require("./styles/FormInput.css");
509
+ var TextArea = class extends import_react5.Component {
510
+ constructor(props) {
511
+ super(props);
512
+ this.textareaRef = (0, import_react5.createRef)();
513
+ }
514
+ render() {
515
+ const { className, ...props } = this.props;
516
+ return /* @__PURE__ */ React.createElement("textarea", {
517
+ ...props,
518
+ className: (0, import_clsx13.default)("FormInput", className),
519
+ ref: this.textareaRef,
520
+ "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
521
+ onKeyDown
522
+ });
523
+ }
524
+ focus() {
525
+ this.textareaRef.current?.focus();
526
+ }
527
+ };
528
+ function onKeyDown(e) {
529
+ if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
530
+ e.stopPropagation();
531
+ }
532
+ if (e.key === "Escape") {
533
+ e.nativeEvent.stopImmediatePropagation();
534
+ }
535
+ }
536
+ // Annotate the CommonJS export names for ESM import in node:
537
+ 0 && (module.exports = {
538
+ Checkbox,
539
+ CompactTextField,
540
+ FieldError,
541
+ FieldSet,
542
+ Form,
543
+ FormField,
544
+ FormGroup,
545
+ FormHint,
546
+ IconField,
547
+ InputGroup,
548
+ Label,
549
+ Radio,
550
+ RadioGroup,
551
+ RequiredAsterisk,
552
+ Select,
553
+ TextArea,
554
+ TextField
555
+ });
556
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/index.ts", "../../../scripts/react-shim.js", "../src/Checkbox.tsx", "../src/Label.tsx", "../src/RequiredAsterisk.tsx", "../src/CompactTextField.tsx", "../src/TextField.tsx", "../src/utils/index.ts", "../src/FieldError.tsx", "../src/FieldSet.tsx", "../src/Form.tsx", "../src/FormField.tsx", "../src/FormGroup.tsx", "../src/FormHint.tsx", "../src/IconField.tsx", "../src/InputGroup.tsx", "../src/Radio.tsx", "../src/RadioGroup.tsx", "../src/Select.tsx", "../src/TextArea.tsx"],
4
+ "sourcesContent": ["export type { CheckboxProps } from './Checkbox';\nexport type { CompactTextFieldProps } from './CompactTextField';\nexport type { FormFieldProps } from './FormField';\nexport type { FormHintProps } from './FormHint';\nexport type { FormProps } from './Form';\nexport type { IconFieldProps } from './IconField';\nexport type { LabelProps } from './Label';\nexport type { RadioGroupProps } from './RadioGroup';\nexport type { RadioProps } from './Radio';\nexport type { SelectProps } from './Select';\nexport type { TextAreaProps } from './TextArea';\n\nexport { Checkbox } from './Checkbox';\nexport { CompactTextField } from './CompactTextField';\nexport { FieldError } from './FieldError';\nexport { FieldSet } from './FieldSet';\nexport { Form } from './Form';\nexport { FormField } from './FormField';\nexport { FormGroup } from './FormGroup';\nexport { FormHint } from './FormHint';\nexport { IconField } from './IconField';\nexport { InputGroup } from './InputGroup';\nexport { Label } from './Label';\nexport { Radio } from './Radio';\nexport { RadioGroup } from './RadioGroup';\nexport { RequiredAsterisk } from './RequiredAsterisk';\nexport { Select } from './Select';\nexport { TextArea } from './TextArea';\nexport { TextField } from './TextField';\n", "import * as React from 'react';\nexport { React };\n", "import { Component, createRef, InputHTMLAttributes, RefObject } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support\n * Use this for cases where you have a visible label on the page that is not close to\n * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n /**\n * The test id for the data-test-id attribute for React Testing Library support\n */\n testId?: string;\n};\n\nclass Checkbox extends Component<CheckboxProps> {\n inputRef: RefObject<HTMLInputElement>;\n\n constructor(props: CheckboxProps) {\n super(props);\n this.inputRef = createRef();\n }\n\n value() {\n return this.inputRef.current?.value;\n }\n\n checked() {\n return this.inputRef.current?.checked;\n }\n\n render() {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n testId,\n checked,\n labelClassName,\n ...other\n } = this.props;\n\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...other}\n ref={this.inputRef}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className=\"Form-checkbox\"\n disabled={disabled}\n data-test-id={testId}\n type=\"checkbox\"\n />{' '}\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n );\n }\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import cx from 'clsx';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\nexport type LabelProps = {\n htmlFor?: string;\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n hidden?: boolean;\n};\n\nexport const Label = ({\n htmlFor,\n disabled,\n className,\n children,\n required = false,\n optional = false,\n ...other\n}: LabelProps) => {\n const classes = cx('Form-label', className, { 'Form-label--disabled': disabled });\n return (\n <label {...other} className={classes} htmlFor={htmlFor}>\n {children}\n {optional && !required && <small className=\"Form-labelOptional u-subtle\">(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n", "import type { HTMLAttributes } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n const classes = cx('RequiredAsterisk');\n\n return (\n <span className={classes} data-test-id={testId} {...rest}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\n", "import cx from 'clsx';\nimport { isBoolean } from 'lodash-es';\nimport { Component, FocusEvent } from 'react';\n\nimport { Label } from './Label';\nimport { TextField, TextFieldProps } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nclass CompactTextField extends Component<CompactTextFieldProps, { isActive: boolean }> {\n textField?: TextField | null;\n\n constructor(props: CompactTextFieldProps) {\n super(props);\n const value = props.value;\n\n this.state = {\n isActive: (isBoolean(value) || value ? value.toString() : '').trim().length !== 0,\n };\n }\n\n render() {\n const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;\n const isActive = this.state.isActive || needsErrorFeedback;\n\n const classes = cx('CompactTextField', className, {\n 'is-active': isActive,\n });\n\n const placeholder = isActive ? '' : label;\n\n return (\n <div className={classes}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n name={name}\n type={type}\n placeholder={placeholder}\n ref={(textField) => {\n this.textField = textField;\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n );\n }\n\n handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n this.setState({ isActive: true });\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n this.setState({ isActive: value.trim().length !== 0 });\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n value = () => (this.textField ? this.textField.value() : '');\n\n focus = () => {\n if (this.textField) {\n this.textField.focus();\n }\n };\n}\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import cx from 'clsx';\nimport { Component, createRef, InputHTMLAttributes, RefObject } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n suffix?: string;\n testId?: string;\n tiny?: boolean;\n overrideWidth?: string;\n};\n\nclass TextField extends Component<TextFieldProps> {\n inputRef: RefObject<HTMLInputElement>;\n constructor(props: TextFieldProps) {\n super(props);\n this.inputRef = createRef();\n }\n\n render() {\n const {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n testId,\n suffix,\n overrideWidth,\n ...rest\n } = this.props;\n const classes = overrideWidth\n ? className\n : cx('FormInput', `FormInput-${type}`, className, {\n 'FormInput--tiny': tiny,\n });\n if (suffix) {\n return (\n <div className=\"FormInput-suffixContainer\">\n <input\n {...rest}\n type={type}\n className={cx(classes, 'FormInput-suffix')}\n readOnly={readOnly}\n ref={this.inputRef}\n data-test-id={testId}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={this.inputRef}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n\n getElement() {\n return this.inputRef.current;\n }\n\n value() {\n return this.inputRef.current?.value;\n }\n\n focus() {\n this.inputRef.current?.focus();\n }\n\n blur() {\n this.inputRef.current?.blur();\n }\n\n select() {\n this.inputRef.current?.focus();\n }\n}\n\nexport type { TextFieldProps };\nexport { TextField };\n", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n name: FieldPath;\n errorMessage?: string;\n className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n className={cx('Form-fieldError', className)}\n aria-live=\"polite\"\n id={createFieldErrorId(name)}\n >\n {`Error - ${errorMessage}`}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n children?: ReactNode;\n testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n return (\n <fieldset className=\"FieldSet\" data-test-id={testId}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n id?: string;\n name?: string;\n action?: string;\n className?: string;\n inline?: boolean;\n method?: string;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n onBlurCapture?(e: FocusEvent): void;\n onSubmit?(e: FormEvent<EventTarget>): void;\n ariaLabel?: string;\n children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n props;\n const classes = cx('Form', className, {\n 'Form--inline': inline,\n 'Form--increasedErrorMargin': !!hasIncreasedErrorMargin,\n });\n\n return (\n <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import cx from 'clsx';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx('FormField', className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n >\n {label && (\n <label htmlFor={htmlFor}>\n {label}\n {isRequired && <RequiredAsterisk />}\n </label>\n )}\n {hint && <FormHint className=\"FormField-hint u-subtle\">{hint}</FormHint>}\n {children}\n <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n className?: string;\n onBlur?: () => void;\n testId?: string;\n children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n const classes = cx('Form-group', className, {\n 'is-invalid': !ignoreValidation && isInvalid,\n });\n\n return (\n <div className={classes} data-test-id={testId} {...other}>\n {children}\n </div>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n children: ReactNode;\n className?: string;\n id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n const classes = cx('Form-hint', className);\n\n return (\n <div {...rest} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n icon({ ...other }: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n const Icon = icon;\n\n return (\n <div className=\"IconField\">\n {children}\n <Icon size={IconSize.SMALL} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nexport const InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n const classes = cx('InputGroup', className);\n\n return (\n <div {...other} className={classes}>\n {children}\n </div>\n );\n};\n", "import cx from 'clsx';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Is the Radio checked?\n */\n checked?: boolean;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) to add to the Radio.\n */\n className?: string;\n /**\n * Is the Radio disabled?\n */\n disabled?: boolean;\n /**\n * The id to pair the Radio input with the label for screen reader support.\n */\n id?: string;\n /**\n * The className to pass into the Radio's Label component\n */\n labelClassName?: string;\n /**\n * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name?: string;\n /**\n * The function to pass into the Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent): void;\n /**\n * Optional inline CSS styles to add to the Radio label.\n */\n labelStyle?: object;\n /**\n * The value passed into Radio.\n */\n value: number | string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n name,\n onChange = () => undefined,\n labelStyle,\n value,\n ...props\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx('Form-radio', className)}\n checked={checked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={onChange}\n type=\"radio\"\n value={value}\n {...props}\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n", "import { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const { name, value, onChange, children, disabled, legend, ...other } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n if (elem?.type && elem.type === Radio) {\n return cloneElement(elem, {\n ...elem.props,\n name,\n checked: elem.props.value === value,\n onChange,\n disabled: typeof elem.props?.disabled !== 'undefined' ? elem.props.disabled : disabled,\n });\n }\n\n if (elem?.type && elem.type === Label) {\n return cloneElement(elem, {\n ...elem.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = elem?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(elem, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(elem, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (elem?.type && elem.type !== Radio && elem.type !== Label) {\n return elem;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...other}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n testId?: string;\n value?: number | string;\n 'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n const classes = cx('FormInput', 'FormInput-select', className);\n\n return (\n <select {...rest} className={classes} data-test-id={testId}>\n {children}\n </select>\n );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import cx from 'clsx';\nimport { Component, createRef, RefObject, TextareaHTMLAttributes } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nclass TextArea extends Component<TextAreaProps> {\n textareaRef: RefObject<HTMLTextAreaElement>;\n\n constructor(props: TextAreaProps) {\n super(props);\n this.textareaRef = createRef();\n }\n\n render() {\n const { className, ...props } = this.props;\n\n return (\n <textarea\n {...props}\n className={cx('FormInput', className)}\n ref={this.textareaRef}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n }\n\n focus() {\n this.textareaRef.current?.focus();\n }\n}\n\nfunction onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n}\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,2 @@
1
+ .CompactTextField{width:100%;position:relative}.CompactTextField .Form-label{color:var(--color-gray-600);opacity:0;pointer-events:none;transform-origin:0 0;z-index:1;background-color:#fff;padding:0 3px;transition:all .1s ease-in-out;position:absolute;top:-2px;left:10px}.CompactTextField.is-active .Form-label{border-radius:var(--border-radius);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}
2
+ /*# sourceMappingURL=CompactTextField.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"mappings":"AAAA,+CAKA,+NAcA","sources":["src/styles/CompactTextField.css"],"sourcesContent":[".CompactTextField {\n position: relative;\n width: 100%;\n}\n\n.CompactTextField .Form-label {\n position: absolute;\n top: -2px;\n left: 10px;\n padding: 0 3px;\n color: var(--color-gray-600);\n opacity: 0;\n pointer-events: none;\n background-color: #fff;\n transform-origin: 0 0; /* preserve left alignment after scaling */\n transition: all 100ms ease-in-out;\n z-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.CompactTextField.is-active .Form-label {\n border-radius: var(--border-radius);\n opacity: 1;\n pointer-events: auto;\n transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n"],"names":[]}
@@ -0,0 +1,2 @@
1
+ .FieldSet{border:none;margin:2rem 0;padding:0}
2
+ /*# sourceMappingURL=FieldSet.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"mappings":"AAAA","sources":["src/styles/FieldSet.css"],"sourcesContent":[".FieldSet {\n border: none;\n margin: 2rem 0;\n padding: 0;\n}\n"],"names":[]}
@@ -0,0 +1,2 @@
1
+ .Form-group{margin:2rem 0}.Form--increasedErrorMargin .Form-group{margin:2.8rem 0}.Form .Form-group:first-child{margin-top:0}.Form .Form-group:last-child{margin-bottom:0}.Form--inline .Form-group{vertical-align:middle;margin:0;display:inline-block}.Form--inline .Form-group+.Form-group,.Form--inline .Form-group+.Button{margin-left:1rem}.Form-label{font-size:1.3rem;font-family:var(--font-family-base);word-break:break-word}.Form-label--disabled{color:var(--color-gray-800)}.Form-labelOptional{margin-left:.4em}.u-d-inline .Form-label+.Form-label{margin-left:1rem}.Form-group .Form-label{align-items:center;margin-bottom:.2rem;display:flex}.Form-group .Form-label+.Form-label{margin-top:.5rem}.Form .Form-error{background:var(--color-system-red-600);color:#fff;font-weight:var(--font-weight-regular);border-radius:var(--border-radius);padding:.7rem 1.4rem}.Form-fieldError{color:var(--color-system-red-600);font-size:1.3rem}.Form--increasedErrorMargin .Form-fieldError{min-height:2.8rem}.Form:not(.Form--inline) .Form-fieldError{text-align:left;padding-top:.5rem;display:block}.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError{padding-top:.1rem;padding-bottom:.5rem}.Form-label .Form-fieldError{float:right}.Form .is-invalid .Form-label{color:var(--color-system-red-600)}::placeholder{color:var(--color-gray-600)}.Form .is-invalid .Select-control,.Form .is-invalid .CustomSelect>div,.Form .is-invalid .FormInput{border-color:var(--color-system-red-600)}.Form--increasedErrorMargin .Form-group.is-invalid{margin-bottom:0}.Form--increasedErrorMargin .Form-group.is-invalid+.Form-group,.Form--increasedErrorMargin .Form-group.is-invalid+.Form-hint{margin-top:0}
2
+ /*# sourceMappingURL=Form.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"mappings":"AACA,0BAMA,wDAIA,2CAIA,6CAIA,8EAMA,yFAKA,uFAMA,kDAIA,qCAIA,qDAIA,4EAMA,qDAIA,mKAQA,oEAOA,+DAIA,0FAMA,uGAKA,yCAIA,gEAIA,0CAIA,4IAMA,mEAIA","sources":["src/styles/Form.css"],"sourcesContent":["/* stylelint-disable no-descending-specificity */\n.Form-group {\n margin: 2rem 0;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-group {\n margin: 2.8rem 0;\n}\n\n.Form .Form-group:first-child {\n margin-top: 0;\n}\n\n.Form .Form-group:last-child {\n margin-bottom: 0;\n}\n\n.Form--inline .Form-group {\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n}\n\n.Form--inline .Form-group + .Form-group,\n.Form--inline .Form-group + .Button {\n margin-left: 1rem;\n}\n\n.Form-label {\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n word-break: break-word;\n}\n\n.Form-label--disabled {\n color: var(--color-gray-800);\n}\n\n.Form-labelOptional {\n margin-left: 0.4em;\n}\n\n.u-d-inline .Form-label + .Form-label {\n margin-left: 1rem;\n}\n\n.Form-group .Form-label {\n display: flex;\n align-items: center;\n margin-bottom: 0.2rem;\n}\n\n.Form-group .Form-label + .Form-label {\n margin-top: 0.5rem;\n}\n\n.Form .Form-error {\n background: var(--color-system-red-600);\n color: #fff;\n font-weight: var(--font-weight-regular);\n padding: 0.7rem 1.4rem;\n border-radius: var(--border-radius);\n}\n\n.Form-fieldError {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-fieldError {\n min-height: 2.8rem;\n}\n\n.Form:not(.Form--inline) .Form-fieldError {\n display: block;\n padding-top: 0.5rem;\n text-align: left;\n}\n\n.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {\n padding-top: 0.1rem;\n padding-bottom: 0.5rem;\n}\n\n.Form-label .Form-fieldError {\n float: right;\n}\n\n.Form .is-invalid .Form-label {\n color: var(--color-system-red-600);\n}\n\n::placeholder {\n color: var(--color-gray-600);\n}\n\n.Form .is-invalid .Select-control,\n.Form .is-invalid .CustomSelect > div,\n.Form .is-invalid .FormInput {\n border-color: var(--color-system-red-600);\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid {\n margin-bottom: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {\n margin-top: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {\n margin-top: 0;\n}\n/* stylelint-enable no-descending-specificity */\n"],"names":[]}
@@ -0,0 +1,2 @@
1
+ .FormField-hint{color:var(--color-gray-700);fill:var(--color-gray-700);margin:0;font-size:1.3rem}.Form .FormField .Form-label,.Form .FormField .is-invalid .Form-label{color:var(--color-black-300)}.FormField-errorMessage{color:var(--color-system-red-600);font-size:1.3rem}.FormField.Form-group{margin:1rem 0}.FormField.Form-group:first-child{margin-top:0}
2
+ /*# sourceMappingURL=FormField.css.map */