@launchpad-ui/form 0.10.7 → 0.10.8

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
@@ -83,7 +83,12 @@ const RequiredAsterisk = ({
83
83
  ...rest
84
84
  }) => {
85
85
  const classes = cx(styles.requiredAsterisk, className);
86
- return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
86
+ return /* @__PURE__ */ jsx("span", {
87
+ ...rest,
88
+ "data-test-id": testId,
89
+ className: classes,
90
+ children: "*"
91
+ });
87
92
  };
88
93
  const Label = ({
89
94
  disabled,
@@ -95,50 +100,49 @@ const Label = ({
95
100
  ...rest
96
101
  }) => {
97
102
  const classes = cx(styles.label, className, disabled && styles.labelDisabled);
98
- return /* @__PURE__ */ jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
99
- children,
100
- optional && !required && /* @__PURE__ */ jsx("small", { className: styles.labelOptional, children: "(optional)" }),
101
- required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
102
- ] });
103
+ return /* @__PURE__ */ jsxs("label", {
104
+ ...rest,
105
+ "data-test-id": testId,
106
+ className: classes,
107
+ children: [children, optional && !required && /* @__PURE__ */ jsx("small", {
108
+ className: styles.labelOptional,
109
+ children: "(optional)"
110
+ }), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
111
+ });
103
112
  };
104
- const Checkbox = /* @__PURE__ */ forwardRef(
105
- ({
106
- "aria-label": ariaLabel,
107
- "aria-labelledby": ariaLabelledby,
108
- children,
109
- disabled,
110
- checked,
111
- labelClassName,
112
- "data-test-id": testId = "checkbox",
113
- ...rest
114
- }, ref) => {
115
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
116
- if (!children && !hasAriaLabel) {
117
- console.warn(
118
- "If you do not provide children, you must specify an aria-label for accessibility"
119
- );
120
- }
121
- return /* @__PURE__ */ jsxs(Label, { className: labelClassName, children: [
122
- /* @__PURE__ */ jsx(
123
- "input",
124
- {
125
- ...rest,
126
- ref,
127
- checked,
128
- "aria-checked": checked ? "true" : "false",
129
- "aria-label": ariaLabel,
130
- "aria-labelledby": ariaLabelledby,
131
- className: styles.checkbox,
132
- disabled,
133
- type: "checkbox",
134
- "data-test-id": testId
135
- }
136
- ),
137
- " ",
138
- disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children
139
- ] });
113
+ const Checkbox = /* @__PURE__ */ forwardRef(({
114
+ "aria-label": ariaLabel,
115
+ "aria-labelledby": ariaLabelledby,
116
+ children,
117
+ disabled,
118
+ checked,
119
+ labelClassName,
120
+ "data-test-id": testId = "checkbox",
121
+ ...rest
122
+ }, ref) => {
123
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
124
+ if (!children && !hasAriaLabel) {
125
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
140
126
  }
141
- );
127
+ return /* @__PURE__ */ jsxs(Label, {
128
+ className: labelClassName,
129
+ children: [/* @__PURE__ */ jsx("input", {
130
+ ...rest,
131
+ ref,
132
+ checked,
133
+ "aria-checked": checked ? "true" : "false",
134
+ "aria-label": ariaLabel,
135
+ "aria-labelledby": ariaLabelledby,
136
+ className: styles.checkbox,
137
+ disabled,
138
+ type: "checkbox",
139
+ "data-test-id": testId
140
+ }), " ", disabled ? /* @__PURE__ */ jsx("span", {
141
+ className: styles.labelDisabled,
142
+ children
143
+ }) : children]
144
+ });
145
+ });
142
146
  Checkbox.displayName = "Checkbox";
143
147
  const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
144
148
  function hasObjectChanged(obj1, obj2) {
@@ -156,108 +160,101 @@ function useObjectMemo(obj) {
156
160
  return objRef.current;
157
161
  }, [obj]);
158
162
  }
159
- const TextField = /* @__PURE__ */ forwardRef(
160
- ({
161
- className,
162
- type = "text",
163
- tiny = false,
164
- readOnly,
165
- tabIndex = 0,
166
- suffix: suffix2,
167
- overrideWidth,
168
- "data-test-id": testId = "text-field",
169
- autoComplete,
170
- ...rest
171
- }, ref) => {
172
- const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
173
- const disablePasswordManagers = autoComplete === "off";
174
- if (suffix2) {
175
- return /* @__PURE__ */ jsxs("div", { className: styles.suffixContainer, children: [
176
- /* @__PURE__ */ jsx(
177
- "input",
178
- {
179
- ...rest,
180
- type,
181
- "data-test-id": testId,
182
- autoComplete,
183
- className: classes,
184
- readOnly,
185
- ref,
186
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
187
- }
188
- ),
189
- /* @__PURE__ */ jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
190
- ] });
191
- }
192
- return /* @__PURE__ */ jsx(
193
- "input",
194
- {
163
+ const TextField = /* @__PURE__ */ forwardRef(({
164
+ className,
165
+ type = "text",
166
+ tiny = false,
167
+ readOnly,
168
+ tabIndex = 0,
169
+ suffix: suffix2,
170
+ overrideWidth,
171
+ "data-test-id": testId = "text-field",
172
+ autoComplete,
173
+ ...rest
174
+ }, ref) => {
175
+ const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
176
+ const disablePasswordManagers = autoComplete === "off";
177
+ if (suffix2) {
178
+ return /* @__PURE__ */ jsxs("div", {
179
+ className: styles.suffixContainer,
180
+ children: [/* @__PURE__ */ jsx("input", {
195
181
  ...rest,
196
- "data-1p-ignore": disablePasswordManagers,
197
182
  type,
183
+ "data-test-id": testId,
184
+ autoComplete,
198
185
  className: classes,
199
186
  readOnly,
200
- tabIndex,
201
- autoComplete,
202
187
  ref,
203
- "data-test-id": testId,
204
- style: overrideWidth ? {
205
- width: overrideWidth
206
- } : void 0,
207
188
  "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
208
- }
209
- );
189
+ }), /* @__PURE__ */ jsx("label", {
190
+ className: styles.suffix,
191
+ htmlFor: rest.id,
192
+ children: suffix2
193
+ })]
194
+ });
210
195
  }
211
- );
196
+ return /* @__PURE__ */ jsx("input", {
197
+ ...rest,
198
+ "data-1p-ignore": disablePasswordManagers,
199
+ type,
200
+ className: classes,
201
+ readOnly,
202
+ tabIndex,
203
+ autoComplete,
204
+ ref,
205
+ "data-test-id": testId,
206
+ style: overrideWidth ? {
207
+ width: overrideWidth
208
+ } : void 0,
209
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
210
+ });
211
+ });
212
212
  TextField.displayName = "TextField";
213
- const CompactTextField = /* @__PURE__ */ forwardRef(
214
- ({
215
- className,
216
- id,
217
- label: label2,
218
- needsErrorFeedback,
219
- value,
220
- onFocus,
221
- onBlur,
222
- "data-test-id": testId = "compact-text-field",
223
- ...rest
224
- }, ref) => {
225
- const [isActive2, setIsActive] = useState(
226
- (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
227
- );
228
- const isActiveState = isActive2 || needsErrorFeedback;
229
- const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
230
- const placeholder = isActiveState ? "" : label2;
231
- const handleFocus = (event) => {
232
- setIsActive(true);
233
- if (onFocus) {
234
- onFocus(event);
235
- }
236
- };
237
- const handleBlur = (event) => {
238
- const value2 = event.target.value || "";
239
- setIsActive(value2.trim().length !== 0);
240
- if (onBlur) {
241
- onBlur(event);
242
- }
243
- };
244
- return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, children: [
245
- /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label2 }),
246
- /* @__PURE__ */ jsx(
247
- TextField,
248
- {
249
- ...rest,
250
- id,
251
- placeholder,
252
- value,
253
- ref,
254
- onFocus: handleFocus,
255
- onBlur: handleBlur
256
- }
257
- )
258
- ] });
259
- }
260
- );
213
+ const CompactTextField = /* @__PURE__ */ forwardRef(({
214
+ className,
215
+ id,
216
+ label: label2,
217
+ needsErrorFeedback,
218
+ value,
219
+ onFocus,
220
+ onBlur,
221
+ "data-test-id": testId = "compact-text-field",
222
+ ...rest
223
+ }, ref) => {
224
+ const [isActive2, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
225
+ const isActiveState = isActive2 || needsErrorFeedback;
226
+ const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
227
+ const placeholder = isActiveState ? "" : label2;
228
+ const handleFocus = (event) => {
229
+ setIsActive(true);
230
+ if (onFocus) {
231
+ onFocus(event);
232
+ }
233
+ };
234
+ const handleBlur = (event) => {
235
+ const value2 = event.target.value || "";
236
+ setIsActive(value2.trim().length !== 0);
237
+ if (onBlur) {
238
+ onBlur(event);
239
+ }
240
+ };
241
+ return /* @__PURE__ */ jsxs("div", {
242
+ className: classes,
243
+ "data-test-id": testId,
244
+ children: [/* @__PURE__ */ jsx(Label, {
245
+ htmlFor: id,
246
+ children: label2
247
+ }), /* @__PURE__ */ jsx(TextField, {
248
+ ...rest,
249
+ id,
250
+ placeholder,
251
+ value,
252
+ ref,
253
+ onFocus: handleFocus,
254
+ onBlur: handleBlur
255
+ })]
256
+ });
257
+ });
261
258
  CompactTextField.displayName = "CompactTextField";
262
259
  const FieldError = ({
263
260
  name,
@@ -269,22 +266,18 @@ const FieldError = ({
269
266
  if (!errorMessage) {
270
267
  return null;
271
268
  }
272
- return /* @__PURE__ */ jsxs(
273
- "span",
274
- {
275
- ...rest,
276
- className: cx(styles.fieldError, className),
277
- "aria-live": "polite",
278
- "data-test-id": testId,
279
- "aria-label": "Error",
280
- id: createFieldErrorId(name),
281
- children: [
282
- /* @__PURE__ */ jsx(Icon, { name: "alert-rhombus", size: "small" }),
283
- " ",
284
- errorMessage
285
- ]
286
- }
287
- );
269
+ return /* @__PURE__ */ jsxs("span", {
270
+ ...rest,
271
+ className: cx(styles.fieldError, className),
272
+ "aria-live": "polite",
273
+ "data-test-id": testId,
274
+ "aria-label": "Error",
275
+ id: createFieldErrorId(name),
276
+ children: [/* @__PURE__ */ jsx(Icon, {
277
+ name: "alert-rhombus",
278
+ size: "small"
279
+ }), " ", errorMessage]
280
+ });
288
281
  };
289
282
  const FieldSet = ({
290
283
  children,
@@ -293,7 +286,12 @@ const FieldSet = ({
293
286
  ...rest
294
287
  }) => {
295
288
  const classes = cx(styles.fieldSet, className);
296
- return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
289
+ return /* @__PURE__ */ jsx("fieldset", {
290
+ "data-test-id": testId,
291
+ className: classes,
292
+ ...rest,
293
+ children
294
+ });
297
295
  };
298
296
  const Form = (props) => {
299
297
  const {
@@ -304,13 +302,13 @@ const Form = (props) => {
304
302
  "data-test-id": testId = "form",
305
303
  ...rest
306
304
  } = props;
307
- const classes = cx(
308
- styles.form,
309
- className,
310
- inline && styles.formInline,
311
- !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
312
- );
313
- return /* @__PURE__ */ jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
305
+ const classes = cx(styles.form, className, inline && styles.formInline, !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin);
306
+ return /* @__PURE__ */ jsx("form", {
307
+ ...rest,
308
+ "data-test-id": testId,
309
+ className: classes,
310
+ children
311
+ });
314
312
  };
315
313
  const FormGroup = (props) => {
316
314
  const {
@@ -322,12 +320,13 @@ const FormGroup = (props) => {
322
320
  "data-test-id": testId = "form-group",
323
321
  ...rest
324
322
  } = props;
325
- const classes = cx(
326
- styles.formGroup,
327
- className,
328
- !ignoreValidation && isInvalid2 && styles.isInvalid
329
- );
330
- return /* @__PURE__ */ jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
323
+ const classes = cx(styles.formGroup, className, !ignoreValidation && isInvalid2 && styles.isInvalid);
324
+ return /* @__PURE__ */ jsx("fieldset", {
325
+ className: classes,
326
+ "data-test-id": testId,
327
+ ...rest,
328
+ children
329
+ });
331
330
  };
332
331
  const FormHint = ({
333
332
  className,
@@ -336,7 +335,12 @@ const FormHint = ({
336
335
  ...rest
337
336
  }) => {
338
337
  const classes = cx(styles.hint, className);
339
- return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
338
+ return /* @__PURE__ */ jsx("div", {
339
+ ...rest,
340
+ "data-test-id": testId,
341
+ className: classes,
342
+ children
343
+ });
340
344
  };
341
345
  const FormField = ({
342
346
  isRequired,
@@ -358,31 +362,29 @@ const FormField = ({
358
362
  const handleBlur = () => {
359
363
  onBlur && onBlur(name);
360
364
  };
361
- return /* @__PURE__ */ jsxs(
362
- FormGroup,
363
- {
364
- className: cx(styles.field, className),
365
+ return /* @__PURE__ */ jsxs(FormGroup, {
366
+ className: cx(styles.field, className),
367
+ name,
368
+ ignoreValidation,
369
+ isInvalid: isInvalid2,
370
+ onBlur: handleBlur,
371
+ "data-test-id": testId,
372
+ children: [label2 && /* @__PURE__ */ jsx(Label, {
373
+ htmlFor,
374
+ required: isRequired,
375
+ ...LabelProps,
376
+ children: label2
377
+ }), hint2 && /* @__PURE__ */ jsx(FormHint, {
378
+ className: styles.hint,
379
+ ...FormHintProps,
380
+ children: hint2
381
+ }), children, /* @__PURE__ */ jsx(FieldError, {
382
+ className: styles.fieldErrorMessage,
365
383
  name,
366
- ignoreValidation,
367
- isInvalid: isInvalid2,
368
- onBlur: handleBlur,
369
- "data-test-id": testId,
370
- children: [
371
- label2 && /* @__PURE__ */ jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
372
- hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
373
- children,
374
- /* @__PURE__ */ jsx(
375
- FieldError,
376
- {
377
- className: styles.fieldErrorMessage,
378
- name,
379
- errorMessage,
380
- ...FieldErrorProps
381
- }
382
- )
383
- ]
384
- }
385
- );
384
+ errorMessage,
385
+ ...FieldErrorProps
386
+ })]
387
+ });
386
388
  };
387
389
  const IconField = ({
388
390
  icon,
@@ -399,23 +401,29 @@ const IconField = ({
399
401
  className: cx(styles.iconFieldIcon, styles.iconFieldIconFill)
400
402
  });
401
403
  const classes = cx(styles.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
402
- const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, targetClassName: styles.iconFieldButton, children: /* @__PURE__ */ jsx(
403
- IconButton,
404
- {
404
+ const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, {
405
+ content: tooltip,
406
+ targetClassName: styles.iconFieldButton,
407
+ children: /* @__PURE__ */ jsx(IconButton, {
405
408
  icon: /* @__PURE__ */ cloneElement(icon, {
406
409
  className: styles.iconFieldIconFill
407
410
  }),
408
411
  size: "small",
409
412
  className: styles.iconFieldIcon,
410
- style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
413
+ style: renderIconLast ? {
414
+ right: "0.313rem"
415
+ } : {
416
+ left: "0.313rem"
417
+ },
411
418
  "aria-label": ariaLabel
412
- }
413
- ) }) : iconElement;
414
- return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
415
- !renderIconLast && renderIcon,
416
- children,
417
- renderIconLast && renderIcon
418
- ] });
419
+ })
420
+ }) : iconElement;
421
+ return /* @__PURE__ */ jsxs("div", {
422
+ className: classes,
423
+ "data-test-id": testId,
424
+ ...rest,
425
+ children: [!renderIconLast && renderIcon, children, renderIconLast && renderIcon]
426
+ });
419
427
  };
420
428
  const Radio = ({
421
429
  "aria-label": ariaLabel,
@@ -432,27 +440,29 @@ const Radio = ({
432
440
  }) => {
433
441
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
434
442
  if (!children && !hasAriaLabel) {
435
- console.warn(
436
- "If you do not provide children, you must specify an aria-label for accessibility"
437
- );
443
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
438
444
  }
439
- return /* @__PURE__ */ jsxs(Fragment, { children: [
440
- /* @__PURE__ */ jsx(
441
- "input",
442
- {
443
- ...rest,
444
- "aria-label": ariaLabel,
445
- "aria-labelledby": ariaLabelledby,
446
- className: cx(styles.radio, className),
447
- checked,
448
- disabled,
449
- id,
450
- "data-test-id": testId,
451
- type: "radio"
452
- }
453
- ),
454
- /* @__PURE__ */ jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children })
455
- ] });
445
+ return /* @__PURE__ */ jsxs(Fragment, {
446
+ children: [/* @__PURE__ */ jsx("input", {
447
+ ...rest,
448
+ "aria-label": ariaLabel,
449
+ "aria-labelledby": ariaLabelledby,
450
+ className: cx(styles.radio, className),
451
+ checked,
452
+ disabled,
453
+ id,
454
+ "data-test-id": testId,
455
+ type: "radio"
456
+ }), /* @__PURE__ */ jsx(Label, {
457
+ className: labelClassName,
458
+ htmlFor: id,
459
+ style: labelStyle,
460
+ children: disabled ? /* @__PURE__ */ jsx("span", {
461
+ className: styles.labelDisabled,
462
+ children
463
+ }) : children
464
+ })]
465
+ });
456
466
  };
457
467
  const RadioGroup = (props) => {
458
468
  const {
@@ -505,41 +515,57 @@ const RadioGroup = (props) => {
505
515
  return null;
506
516
  }
507
517
  const radios = Children.map(children, (child) => updateRadioElems(child));
508
- return /* @__PURE__ */ jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
509
- legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }),
510
- /* @__PURE__ */ jsx("div", { ...rest, children: radios })
511
- ] });
518
+ return /* @__PURE__ */ jsxs("fieldset", {
519
+ "data-test-id": testId,
520
+ ref: fieldsetRef,
521
+ children: [legend && /* @__PURE__ */ jsx("legend", {
522
+ children: /* @__PURE__ */ jsx(VisuallyHidden, {
523
+ children: legend
524
+ })
525
+ }), /* @__PURE__ */ jsx("div", {
526
+ ...rest,
527
+ children: radios
528
+ })]
529
+ });
512
530
  };
513
- const SelectField = /* @__PURE__ */ forwardRef(
514
- ({ className, children, "data-test-id": testId = "select", ...rest }, ref) => {
515
- const classes = cx(styles.formInput, className);
516
- return /* @__PURE__ */ jsx("select", { ...rest, "data-test-id": testId, className: classes, ref, children });
517
- }
518
- );
531
+ const SelectField = /* @__PURE__ */ forwardRef(({
532
+ className,
533
+ children,
534
+ "data-test-id": testId = "select",
535
+ ...rest
536
+ }, ref) => {
537
+ const classes = cx(styles.formInput, className);
538
+ return /* @__PURE__ */ jsx("select", {
539
+ ...rest,
540
+ "data-test-id": testId,
541
+ className: classes,
542
+ ref,
543
+ children
544
+ });
545
+ });
519
546
  SelectField.displayName = "SelectField";
520
- const TextArea = /* @__PURE__ */ forwardRef(
521
- ({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
522
- const onKeyDown = (e) => {
523
- if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
524
- e.stopPropagation();
525
- }
526
- if (e.key === "Escape") {
527
- e.nativeEvent.stopImmediatePropagation();
528
- }
529
- };
530
- return /* @__PURE__ */ jsx(
531
- "textarea",
532
- {
533
- ...props,
534
- className: cx(styles.formInput, className),
535
- ref,
536
- "data-test-id": testId,
537
- "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
538
- onKeyDown
539
- }
540
- );
541
- }
542
- );
547
+ const TextArea = /* @__PURE__ */ forwardRef(({
548
+ className,
549
+ "data-test-id": testId = "text-area",
550
+ ...props
551
+ }, ref) => {
552
+ const onKeyDown = (e) => {
553
+ if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
554
+ e.stopPropagation();
555
+ }
556
+ if (e.key === "Escape") {
557
+ e.nativeEvent.stopImmediatePropagation();
558
+ }
559
+ };
560
+ return /* @__PURE__ */ jsx("textarea", {
561
+ ...props,
562
+ className: cx(styles.formInput, className),
563
+ ref,
564
+ "data-test-id": testId,
565
+ "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
566
+ onKeyDown
567
+ });
568
+ });
543
569
  TextArea.displayName = "TextArea";
544
570
  const defaultFormatOptions = {
545
571
  maximumFractionDigits: 6
@@ -555,8 +581,14 @@ const useNumberField = ({
555
581
  ...defaultFormatOptions,
556
582
  ...otherProps.formatOptions
557
583
  });
558
- const { locale } = useLocale();
559
- const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });
584
+ const {
585
+ locale
586
+ } = useLocale();
587
+ const numberFieldState = useNumberFieldState({
588
+ ...otherProps,
589
+ locale,
590
+ formatOptions
591
+ });
560
592
  const inputRef = useRef(null);
561
593
  const {
562
594
  descriptionProps: formHintProps,
@@ -566,33 +598,52 @@ const useNumberField = ({
566
598
  inputProps,
567
599
  incrementButtonProps,
568
600
  decrementButtonProps
569
- } = useNumberField$1({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
601
+ } = useNumberField$1({
602
+ ...otherProps,
603
+ formatOptions,
604
+ id
605
+ }, numberFieldState, inputRef);
570
606
  return {
571
607
  fieldErrorProps,
572
608
  formHintProps,
573
609
  labelProps,
574
- renderNumberField: () => /* @__PURE__ */ jsxs("div", { ...groupProps, className: styles.numberField, children: [
575
- /* @__PURE__ */ jsx(
576
- "input",
577
- {
578
- ...inputProps,
579
- className: cx(styles.formInput, styles["numberField-input"]),
580
- "data-test-id": testId,
581
- name,
582
- ref: inputRef
583
- }
584
- ),
585
- /* @__PURE__ */ jsxs("div", { className: styles["numberField-stepperContainer"], children: [
586
- /* @__PURE__ */ jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up" }) }),
587
- /* @__PURE__ */ jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" }) })
588
- ] })
589
- ] })
610
+ renderNumberField: () => /* @__PURE__ */ jsxs("div", {
611
+ ...groupProps,
612
+ className: styles.numberField,
613
+ children: [/* @__PURE__ */ jsx("input", {
614
+ ...inputProps,
615
+ className: cx(styles.formInput, styles["numberField-input"]),
616
+ "data-test-id": testId,
617
+ name,
618
+ ref: inputRef
619
+ }), /* @__PURE__ */ jsxs("div", {
620
+ className: styles["numberField-stepperContainer"],
621
+ children: [/* @__PURE__ */ jsx(Stepper, {
622
+ ...incrementButtonProps,
623
+ children: /* @__PURE__ */ jsx(Icon, {
624
+ name: "chevron-up"
625
+ })
626
+ }), /* @__PURE__ */ jsx(Stepper, {
627
+ ...decrementButtonProps,
628
+ children: /* @__PURE__ */ jsx(Icon, {
629
+ name: "chevron-down"
630
+ })
631
+ })]
632
+ })]
633
+ })
590
634
  };
591
635
  };
592
636
  const Stepper = (props) => {
593
637
  const buttonRef = useRef(null);
594
- const { buttonProps } = useButton(props, buttonRef);
595
- return /* @__PURE__ */ jsx("button", { ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
638
+ const {
639
+ buttonProps
640
+ } = useButton(props, buttonRef);
641
+ return /* @__PURE__ */ jsx("button", {
642
+ ...buttonProps,
643
+ className: styles["numberField-stepper"],
644
+ ref: buttonRef,
645
+ children: props.children
646
+ });
596
647
  };
597
648
  export {
598
649
  Checkbox,