@launchpad-ui/form 0.10.10 → 0.10.12

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,12 +83,7 @@ const RequiredAsterisk = ({
83
83
  ...rest
84
84
  }) => {
85
85
  const classes = cx(styles.requiredAsterisk, className);
86
- return /* @__PURE__ */ jsx("span", {
87
- ...rest,
88
- "data-test-id": testId,
89
- className: classes,
90
- children: "*"
91
- });
86
+ return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
92
87
  };
93
88
  const Label = ({
94
89
  disabled,
@@ -100,49 +95,50 @@ const Label = ({
100
95
  ...rest
101
96
  }) => {
102
97
  const classes = cx(styles.label, className, disabled && styles.labelDisabled);
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
- });
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
+ ] });
112
103
  };
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");
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
+ ] });
126
140
  }
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
- });
141
+ );
146
142
  Checkbox.displayName = "Checkbox";
147
143
  const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
148
144
  function hasObjectChanged(obj1, obj2) {
@@ -160,101 +156,108 @@ function useObjectMemo(obj) {
160
156
  return objRef.current;
161
157
  }, [obj]);
162
158
  }
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", {
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
+ {
181
195
  ...rest,
196
+ "data-1p-ignore": disablePasswordManagers,
182
197
  type,
183
- "data-test-id": testId,
184
- autoComplete,
185
198
  className: classes,
186
199
  readOnly,
200
+ tabIndex,
201
+ autoComplete,
187
202
  ref,
203
+ "data-test-id": testId,
204
+ style: overrideWidth ? {
205
+ width: overrideWidth
206
+ } : void 0,
188
207
  "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
189
- }), /* @__PURE__ */ jsx("label", {
190
- className: styles.suffix,
191
- htmlFor: rest.id,
192
- children: suffix2
193
- })]
194
- });
208
+ }
209
+ );
195
210
  }
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
- });
211
+ );
212
212
  TextField.displayName = "TextField";
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
- });
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
+ );
258
261
  CompactTextField.displayName = "CompactTextField";
259
262
  const FieldError = ({
260
263
  name,
@@ -266,18 +269,22 @@ const FieldError = ({
266
269
  if (!errorMessage) {
267
270
  return null;
268
271
  }
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
- });
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
+ );
281
288
  };
282
289
  const FieldSet = ({
283
290
  children,
@@ -286,12 +293,7 @@ const FieldSet = ({
286
293
  ...rest
287
294
  }) => {
288
295
  const classes = cx(styles.fieldSet, className);
289
- return /* @__PURE__ */ jsx("fieldset", {
290
- "data-test-id": testId,
291
- className: classes,
292
- ...rest,
293
- children
294
- });
296
+ return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
295
297
  };
296
298
  const Form = (props) => {
297
299
  const {
@@ -302,13 +304,13 @@ const Form = (props) => {
302
304
  "data-test-id": testId = "form",
303
305
  ...rest
304
306
  } = props;
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
- });
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 });
312
314
  };
313
315
  const FormGroup = (props) => {
314
316
  const {
@@ -320,13 +322,12 @@ const FormGroup = (props) => {
320
322
  "data-test-id": testId = "form-group",
321
323
  ...rest
322
324
  } = props;
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
- });
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 });
330
331
  };
331
332
  const FormHint = ({
332
333
  className,
@@ -335,12 +336,7 @@ const FormHint = ({
335
336
  ...rest
336
337
  }) => {
337
338
  const classes = cx(styles.hint, className);
338
- return /* @__PURE__ */ jsx("div", {
339
- ...rest,
340
- "data-test-id": testId,
341
- className: classes,
342
- children
343
- });
339
+ return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
344
340
  };
345
341
  const FormField = ({
346
342
  isRequired,
@@ -362,29 +358,31 @@ const FormField = ({
362
358
  const handleBlur = () => {
363
359
  onBlur && onBlur(name);
364
360
  };
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,
361
+ return /* @__PURE__ */ jsxs(
362
+ FormGroup,
363
+ {
364
+ className: cx(styles.field, className),
383
365
  name,
384
- errorMessage,
385
- ...FieldErrorProps
386
- })]
387
- });
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
+ );
388
386
  };
389
387
  const IconField = ({
390
388
  icon,
@@ -401,29 +399,23 @@ const IconField = ({
401
399
  className: cx(styles.iconFieldIcon, styles.iconFieldIconFill)
402
400
  });
403
401
  const classes = cx(styles.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
404
- const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, {
405
- content: tooltip,
406
- targetClassName: styles.iconFieldButton,
407
- children: /* @__PURE__ */ jsx(IconButton, {
402
+ const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, targetClassName: styles.iconFieldButton, children: /* @__PURE__ */ jsx(
403
+ IconButton,
404
+ {
408
405
  icon: /* @__PURE__ */ cloneElement(icon, {
409
406
  className: styles.iconFieldIconFill
410
407
  }),
411
408
  size: "small",
412
409
  className: styles.iconFieldIcon,
413
- style: renderIconLast ? {
414
- right: "0.313rem"
415
- } : {
416
- left: "0.313rem"
417
- },
410
+ style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
418
411
  "aria-label": ariaLabel
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
- });
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
+ ] });
427
419
  };
428
420
  const Radio = ({
429
421
  "aria-label": ariaLabel,
@@ -440,29 +432,27 @@ const Radio = ({
440
432
  }) => {
441
433
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
442
434
  if (!children && !hasAriaLabel) {
443
- console.warn("If you do not provide children, you must specify an aria-label for accessibility");
435
+ console.warn(
436
+ "If you do not provide children, you must specify an aria-label for accessibility"
437
+ );
444
438
  }
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
- });
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
+ ] });
466
456
  };
467
457
  const RadioGroup = (props) => {
468
458
  const {
@@ -515,57 +505,41 @@ const RadioGroup = (props) => {
515
505
  return null;
516
506
  }
517
507
  const radios = Children.map(children, (child) => updateRadioElems(child));
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
- });
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
+ ] });
530
512
  };
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
- });
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
+ );
546
519
  SelectField.displayName = "SelectField";
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
- });
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
+ );
569
543
  TextArea.displayName = "TextArea";
570
544
  const defaultFormatOptions = {
571
545
  maximumFractionDigits: 6
@@ -581,14 +555,8 @@ const useNumberField = ({
581
555
  ...defaultFormatOptions,
582
556
  ...otherProps.formatOptions
583
557
  });
584
- const {
585
- locale
586
- } = useLocale();
587
- const numberFieldState = useNumberFieldState({
588
- ...otherProps,
589
- locale,
590
- formatOptions
591
- });
558
+ const { locale } = useLocale();
559
+ const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });
592
560
  const inputRef = useRef(null);
593
561
  const {
594
562
  descriptionProps: formHintProps,
@@ -598,52 +566,33 @@ const useNumberField = ({
598
566
  inputProps,
599
567
  incrementButtonProps,
600
568
  decrementButtonProps
601
- } = useNumberField$1({
602
- ...otherProps,
603
- formatOptions,
604
- id
605
- }, numberFieldState, inputRef);
569
+ } = useNumberField$1({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
606
570
  return {
607
571
  fieldErrorProps,
608
572
  formHintProps,
609
573
  labelProps,
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
- })
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
+ ] })
634
590
  };
635
591
  };
636
592
  const Stepper = (props) => {
637
593
  const buttonRef = useRef(null);
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
- });
594
+ const { buttonProps } = useButton(props, buttonRef);
595
+ return /* @__PURE__ */ jsx("button", { ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
647
596
  };
648
597
  export {
649
598
  Checkbox,