@launchpad-ui/form 0.11.57 → 0.11.58

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 (6) hide show
  1. package/dist/index.es.js +493 -552
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +521 -543
  4. package/dist/index.js.map +1 -1
  5. package/dist/style.css +2 -1
  6. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,17 +1,36 @@
1
1
  require('./style.css');
2
2
  "use strict";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- const jsxRuntime = require("react/jsx-runtime");
5
- const react = require("react");
6
- const classix = require("classix");
7
- const icons = require("@launchpad-ui/icons");
8
- const button = require("@launchpad-ui/button");
9
- const tooltip = require("@launchpad-ui/tooltip");
10
- const visuallyHidden = require("@react-aria/visually-hidden");
11
- const button$1 = require("@react-aria/button");
12
- const i18n = require("@react-aria/i18n");
13
- const numberfield$1 = require("@react-aria/numberfield");
14
- const numberfield = require("@react-stately/numberfield");
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
11
+ key = keys[i];
12
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
13
+ get: ((k) => from[k]).bind(null, key),
14
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
15
+ });
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", {
20
+ value: mod,
21
+ enumerable: true
22
+ }) : target, mod));
23
+ const react = __toESM(require("react"));
24
+ const classix = __toESM(require("classix"));
25
+ const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
26
+ const __launchpad_ui_icons = __toESM(require("@launchpad-ui/icons"));
27
+ const __launchpad_ui_button = __toESM(require("@launchpad-ui/button"));
28
+ const __launchpad_ui_tooltip = __toESM(require("@launchpad-ui/tooltip"));
29
+ const __react_aria_visually_hidden = __toESM(require("@react-aria/visually-hidden"));
30
+ const __react_aria_button = __toESM(require("@react-aria/button"));
31
+ const __react_aria_i18n = __toESM(require("@react-aria/i18n"));
32
+ const __react_aria_numberfield = __toESM(require("@react-aria/numberfield"));
33
+ const __react_stately_numberfield = __toESM(require("@react-stately/numberfield"));
15
34
  const checkbox = "QJPOUG_checkbox";
16
35
  const compactTextField = "QJPOUG_compactTextField";
17
36
  const field = "QJPOUG_field";
@@ -29,573 +48,531 @@ const iconField = "QJPOUG_iconField";
29
48
  const iconFieldButton = "QJPOUG_iconFieldButton";
30
49
  const iconFieldIcon = "QJPOUG_iconFieldIcon";
31
50
  const iconFieldIconFill = "QJPOUG_iconFieldIconFill";
51
+ const inlineForm = "QJPOUG_inlineForm";
32
52
  const isActive = "QJPOUG_isActive";
53
+ const isDisabled = "QJPOUG_isDisabled";
54
+ const isFocused = "QJPOUG_isFocused";
33
55
  const isInvalid = "QJPOUG_isInvalid";
34
56
  const label = "QJPOUG_label";
35
57
  const labelDisabled = "QJPOUG_labelDisabled";
36
58
  const labelOptional = "QJPOUG_labelOptional";
59
+ const number = "QJPOUG_number";
37
60
  const numberField = "QJPOUG_numberField";
38
61
  const radio = "QJPOUG_radio";
39
62
  const requiredAsterisk = "QJPOUG_requiredAsterisk";
40
63
  const suffix = "QJPOUG_suffix";
41
64
  const suffixContainer = "QJPOUG_suffixContainer";
42
- const styles = {
43
- checkbox,
44
- compactTextField,
45
- field,
46
- fieldError,
47
- fieldErrorMessage,
48
- fieldSet,
49
- form,
50
- formGroup,
51
- formIncreasedErrorMargin,
52
- formInline,
53
- formInput,
54
- formInputTiny,
55
- hint,
56
- iconField,
57
- iconFieldButton,
58
- iconFieldIcon,
59
- iconFieldIconFill,
60
- isActive,
61
- isInvalid,
62
- label,
63
- labelDisabled,
64
- labelOptional,
65
- numberField,
66
- "numberField-input": "QJPOUG_numberField-input",
67
- "numberField-stepper": "QJPOUG_numberField-stepper",
68
- "numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
69
- radio,
70
- requiredAsterisk,
71
- suffix,
72
- suffixContainer
65
+ var Form_module_default = {
66
+ checkbox,
67
+ compactTextField,
68
+ field,
69
+ fieldError,
70
+ fieldErrorMessage,
71
+ fieldSet,
72
+ form,
73
+ formGroup,
74
+ formIncreasedErrorMargin,
75
+ formInline,
76
+ formInput,
77
+ formInputTiny,
78
+ hint,
79
+ iconField,
80
+ iconFieldButton,
81
+ iconFieldIcon,
82
+ iconFieldIconFill,
83
+ inlineForm,
84
+ isActive,
85
+ isDisabled,
86
+ isFocused,
87
+ isInvalid,
88
+ label,
89
+ labelDisabled,
90
+ labelOptional,
91
+ number,
92
+ numberField,
93
+ "numberField-input": "QJPOUG_numberField-input",
94
+ "numberField-stepper": "QJPOUG_numberField-stepper",
95
+ "numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
96
+ radio,
97
+ requiredAsterisk,
98
+ suffix,
99
+ suffixContainer
73
100
  };
74
- const RequiredAsterisk = ({
75
- className,
76
- "data-test-id": testId = "required-asterisk",
77
- ...rest
78
- }) => {
79
- const classes = classix.cx(styles.requiredAsterisk, className);
80
- return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
101
+ /**
102
+ * @deprecated use `Label` from `@launchpad-ui/components` instead
103
+ *
104
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
105
+ */
106
+ const RequiredAsterisk = ({ className, "data-test-id": testId = "required-asterisk",...rest }) => {
107
+ const classes = (0, classix.cx)(Form_module_default.requiredAsterisk, className);
108
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
109
+ ...rest,
110
+ "data-test-id": testId,
111
+ className: classes,
112
+ children: "*"
113
+ });
81
114
  };
82
- const Label = ({
83
- disabled,
84
- className,
85
- children,
86
- required = false,
87
- optional = false,
88
- "data-test-id": testId = "label",
89
- ...rest
90
- }) => {
91
- const classes = classix.cx(styles.label, className, disabled && styles.labelDisabled);
92
- return /* @__PURE__ */ jsxRuntime.jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
93
- children,
94
- optional && !required && /* @__PURE__ */ jsxRuntime.jsx("small", { className: styles.labelOptional, children: "(optional)" }),
95
- required && !optional && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})
96
- ] });
115
+ /**
116
+ * @deprecated use `Label` from `@launchpad-ui/components` instead
117
+ *
118
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
119
+ */
120
+ const Label = ({ disabled, className, children, required = false, optional = false, "data-test-id": testId = "label",...rest }) => {
121
+ const classes = (0, classix.cx)(Form_module_default.label, className, disabled && Form_module_default.labelDisabled);
122
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
123
+ ...rest,
124
+ "data-test-id": testId,
125
+ className: classes,
126
+ children: [
127
+ children,
128
+ optional && !required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
129
+ className: Form_module_default.labelOptional,
130
+ children: "(optional)"
131
+ }),
132
+ required && !optional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequiredAsterisk, {})
133
+ ]
134
+ });
97
135
  };
98
- const Checkbox = /* @__PURE__ */ react.forwardRef(
99
- ({
100
- "aria-label": ariaLabel,
101
- "aria-labelledby": ariaLabelledby,
102
- children,
103
- disabled,
104
- checked,
105
- labelClassName,
106
- "data-test-id": testId = "checkbox",
107
- ...rest
108
- }, ref) => {
109
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
110
- if (!children && !hasAriaLabel) {
111
- console.warn(
112
- "If you do not provide children, you must specify an aria-label for accessibility"
113
- );
114
- }
115
- return /* @__PURE__ */ jsxRuntime.jsxs(Label, { className: labelClassName, children: [
116
- /* @__PURE__ */ jsxRuntime.jsx(
117
- "input",
118
- {
119
- ...rest,
120
- ref,
121
- checked,
122
- "aria-checked": checked ? "true" : "false",
123
- "aria-label": ariaLabel,
124
- "aria-labelledby": ariaLabelledby,
125
- className: styles.checkbox,
126
- disabled,
127
- type: "checkbox",
128
- "data-test-id": testId
129
- }
130
- ),
131
- " ",
132
- disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelDisabled, children }) : children
133
- ] });
134
- }
135
- );
136
+ /**
137
+ * @deprecated use `Checkbox` or `CheckboxGroup` from `@launchpad-ui/components` instead
138
+ *
139
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-checkbox--docs
140
+ */
141
+ const Checkbox = /* @__PURE__ */ (0, react.forwardRef)(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, disabled, checked, labelClassName, "data-test-id": testId = "checkbox",...rest }, ref) => {
142
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
143
+ if (!children && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
144
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Label, {
145
+ className: labelClassName,
146
+ children: [
147
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
148
+ ...rest,
149
+ ref,
150
+ checked,
151
+ "aria-checked": checked ? "true" : "false",
152
+ "aria-label": ariaLabel,
153
+ "aria-labelledby": ariaLabelledby,
154
+ className: Form_module_default.checkbox,
155
+ disabled,
156
+ type: "checkbox",
157
+ "data-test-id": testId
158
+ }),
159
+ " ",
160
+ disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
161
+ className: Form_module_default.labelDisabled,
162
+ children
163
+ }) : children
164
+ ]
165
+ });
166
+ });
136
167
  Checkbox.displayName = "Checkbox";
137
168
  const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
138
169
  function hasObjectChanged(obj1, obj2) {
139
- return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
140
- const key = k;
141
- return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
142
- });
170
+ return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
171
+ const key = k;
172
+ return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
173
+ });
143
174
  }
144
175
  function useObjectMemo(obj) {
145
- const objRef = react.useRef(obj);
146
- return react.useMemo(() => {
147
- if (hasObjectChanged(obj, objRef.current)) {
148
- objRef.current = obj;
149
- }
150
- return objRef.current;
151
- }, [obj]);
176
+ const objRef = (0, react.useRef)(obj);
177
+ return (0, react.useMemo)(() => {
178
+ if (hasObjectChanged(obj, objRef.current)) objRef.current = obj;
179
+ return objRef.current;
180
+ }, [obj]);
152
181
  }
153
- const TextField = /* @__PURE__ */ react.forwardRef(
154
- ({
155
- className,
156
- type = "text",
157
- tiny = false,
158
- readOnly,
159
- tabIndex = 0,
160
- suffix: suffix2,
161
- overrideWidth,
162
- "data-test-id": testId = "text-field",
163
- autoComplete,
164
- ...rest
165
- }, ref) => {
166
- const classes = overrideWidth ? className : classix.cx(styles.formInput, tiny && styles.formInputTiny, className);
167
- const disablePasswordManagers = autoComplete === "off";
168
- if (suffix2) {
169
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.suffixContainer, children: [
170
- /* @__PURE__ */ jsxRuntime.jsx(
171
- "input",
172
- {
173
- ...rest,
174
- type,
175
- "data-test-id": testId,
176
- autoComplete,
177
- className: classes,
178
- readOnly,
179
- ref,
180
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
181
- }
182
- ),
183
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
184
- ] });
185
- }
186
- return /* @__PURE__ */ jsxRuntime.jsx(
187
- "input",
188
- {
189
- ...rest,
190
- "data-1p-ignore": disablePasswordManagers,
191
- type,
192
- className: classes,
193
- readOnly,
194
- tabIndex,
195
- autoComplete,
196
- ref,
197
- "data-test-id": testId,
198
- style: overrideWidth ? {
199
- width: overrideWidth
200
- } : void 0,
201
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
202
- }
203
- );
204
- }
205
- );
182
+ /**
183
+ * @deprecated use `TextField` from `@launchpad-ui/components` instead
184
+ *
185
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
186
+ */
187
+ const TextField = /* @__PURE__ */ (0, react.forwardRef)(({ className, type = "text", tiny = false, readOnly, tabIndex = 0, suffix: suffix$1, overrideWidth, "data-test-id": testId = "text-field", autoComplete,...rest }, ref) => {
188
+ const classes = overrideWidth ? className : (0, classix.cx)(Form_module_default.formInput, tiny && Form_module_default.formInputTiny, className);
189
+ const disablePasswordManagers = autoComplete === "off";
190
+ if (suffix$1) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
191
+ className: Form_module_default.suffixContainer,
192
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
193
+ ...rest,
194
+ type,
195
+ "data-test-id": testId,
196
+ autoComplete,
197
+ className: classes,
198
+ readOnly,
199
+ ref,
200
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
201
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
202
+ className: Form_module_default.suffix,
203
+ htmlFor: rest.id,
204
+ children: suffix$1
205
+ })]
206
+ });
207
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
208
+ ...rest,
209
+ "data-1p-ignore": disablePasswordManagers,
210
+ type,
211
+ className: classes,
212
+ readOnly,
213
+ tabIndex,
214
+ autoComplete,
215
+ ref,
216
+ "data-test-id": testId,
217
+ style: overrideWidth ? { width: overrideWidth } : void 0,
218
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
219
+ });
220
+ });
206
221
  TextField.displayName = "TextField";
207
- const CompactTextField = /* @__PURE__ */ react.forwardRef(
208
- ({
209
- className,
210
- id,
211
- label: label2,
212
- needsErrorFeedback,
213
- value,
214
- onFocus,
215
- onBlur,
216
- "data-test-id": testId = "compact-text-field",
217
- ...rest
218
- }, ref) => {
219
- const [isActive2, setIsActive] = react.useState(
220
- (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
221
- );
222
- const isActiveState = isActive2 || needsErrorFeedback;
223
- const classes = classix.cx(styles.compactTextField, className, isActiveState && styles.isActive);
224
- const placeholder = isActiveState ? "" : label2;
225
- const handleFocus = (event) => {
226
- setIsActive(true);
227
- if (onFocus) {
228
- onFocus(event);
229
- }
230
- };
231
- const handleBlur = (event) => {
232
- const value2 = event.target.value || "";
233
- setIsActive(value2.trim().length !== 0);
234
- if (onBlur) {
235
- onBlur(event);
236
- }
237
- };
238
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, "data-test-id": testId, children: [
239
- /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, children: label2 }),
240
- /* @__PURE__ */ jsxRuntime.jsx(
241
- TextField,
242
- {
243
- ...rest,
244
- id,
245
- placeholder,
246
- value,
247
- ref,
248
- onFocus: handleFocus,
249
- onBlur: handleBlur
250
- }
251
- )
252
- ] });
253
- }
254
- );
222
+ /**
223
+ * @deprecated use `TextField` from `@launchpad-ui/components` instead
224
+ *
225
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
226
+ */
227
+ const CompactTextField = /* @__PURE__ */ (0, react.forwardRef)(({ className, id, label: label$1, needsErrorFeedback, value, onFocus, onBlur, "data-test-id": testId = "compact-text-field",...rest }, ref) => {
228
+ const [isActive$1, setIsActive] = (0, react.useState)((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
229
+ const isActiveState = isActive$1 || needsErrorFeedback;
230
+ const classes = (0, classix.cx)(Form_module_default.compactTextField, className, isActiveState && Form_module_default.isActive);
231
+ const placeholder = isActiveState ? "" : label$1;
232
+ const handleFocus = (event) => {
233
+ setIsActive(true);
234
+ if (onFocus) onFocus(event);
235
+ };
236
+ const handleBlur = (event) => {
237
+ const value$1 = event.target.value || "";
238
+ setIsActive(value$1.trim().length !== 0);
239
+ if (onBlur) onBlur(event);
240
+ };
241
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
242
+ className: classes,
243
+ "data-test-id": testId,
244
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
245
+ htmlFor: id,
246
+ children: label$1
247
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
248
+ ...rest,
249
+ id,
250
+ placeholder,
251
+ value,
252
+ ref,
253
+ onFocus: handleFocus,
254
+ onBlur: handleBlur
255
+ })]
256
+ });
257
+ });
255
258
  CompactTextField.displayName = "CompactTextField";
256
- const FieldError = ({
257
- name,
258
- errorMessage,
259
- className,
260
- "data-test-id": testId = "field-error",
261
- ...rest
262
- }) => {
263
- if (!errorMessage) {
264
- return null;
265
- }
266
- return /* @__PURE__ */ jsxRuntime.jsxs(
267
- "span",
268
- {
269
- ...rest,
270
- className: classix.cx(styles.fieldError, className),
271
- "aria-live": "polite",
272
- "data-test-id": testId,
273
- "aria-label": "Error",
274
- id: createFieldErrorId(name),
275
- children: [
276
- /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "alert-rhombus", size: "small" }),
277
- " ",
278
- errorMessage
279
- ]
280
- }
281
- );
259
+ /**
260
+ * @deprecated use `FieldError` from `@launchpad-ui/components` instead
261
+ *
262
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
263
+ */
264
+ const FieldError = ({ name, errorMessage, className, "data-test-id": testId = "field-error",...rest }) => {
265
+ if (!errorMessage) return null;
266
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
267
+ ...rest,
268
+ className: (0, classix.cx)(Form_module_default.fieldError, className),
269
+ "aria-live": "polite",
270
+ "data-test-id": testId,
271
+ "aria-label": "Error",
272
+ id: createFieldErrorId(name),
273
+ children: [
274
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
275
+ name: "alert-rhombus",
276
+ size: "small"
277
+ }),
278
+ " ",
279
+ errorMessage
280
+ ]
281
+ });
282
282
  };
283
- const FieldSet = ({
284
- children,
285
- className,
286
- "data-test-id": testId = "field-set",
287
- ...rest
288
- }) => {
289
- const classes = classix.cx(styles.fieldSet, className);
290
- return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
283
+ /**
284
+ * @deprecated use `FieldGroup` from `@launchpad-ui/components` instead
285
+ *
286
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs
287
+ */
288
+ const FieldSet = ({ children, className, "data-test-id": testId = "field-set",...rest }) => {
289
+ const classes = (0, classix.cx)(Form_module_default.fieldSet, className);
290
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
291
+ "data-test-id": testId,
292
+ className: classes,
293
+ ...rest,
294
+ children
295
+ });
291
296
  };
297
+ /**
298
+ * @deprecated use `Form` from `@launchpad-ui/components` instead
299
+ *
300
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-form--docs
301
+ */
292
302
  const Form = (props) => {
293
- const {
294
- className,
295
- inline,
296
- children,
297
- hasIncreasedErrorMargin,
298
- "data-test-id": testId = "form",
299
- ...rest
300
- } = props;
301
- const classes = classix.cx(
302
- styles.form,
303
- className,
304
- inline && styles.formInline,
305
- !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
306
- );
307
- return /* @__PURE__ */ jsxRuntime.jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
303
+ const { className, inline, children, hasIncreasedErrorMargin, "data-test-id": testId = "form",...rest } = props;
304
+ const classes = (0, classix.cx)(Form_module_default.form, className, inline && Form_module_default.formInline, !!hasIncreasedErrorMargin && Form_module_default.formIncreasedErrorMargin);
305
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
306
+ ...rest,
307
+ "data-test-id": testId,
308
+ className: classes,
309
+ children
310
+ });
308
311
  };
312
+ /**
313
+ * @deprecated use `FieldGroup` from `@launchpad-ui/components` instead
314
+ *
315
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs
316
+ */
309
317
  const FormGroup = (props) => {
310
- const {
311
- className,
312
- name,
313
- ignoreValidation,
314
- isInvalid: isInvalid2,
315
- children,
316
- "data-test-id": testId = "form-group",
317
- ...rest
318
- } = props;
319
- const classes = classix.cx(
320
- styles.formGroup,
321
- className,
322
- !ignoreValidation && isInvalid2 && styles.isInvalid
323
- );
324
- return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
318
+ const { className, name, ignoreValidation, isInvalid: isInvalid$1, children, "data-test-id": testId = "form-group",...rest } = props;
319
+ const classes = (0, classix.cx)(Form_module_default.formGroup, className, !ignoreValidation && isInvalid$1 && Form_module_default.isInvalid);
320
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
321
+ className: classes,
322
+ "data-test-id": testId,
323
+ ...rest,
324
+ children
325
+ });
325
326
  };
326
- const FormHint = ({
327
- className,
328
- children,
329
- "data-test-id": testId = "form-hint",
330
- ...rest
331
- }) => {
332
- const classes = classix.cx(styles.hint, className);
333
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
327
+ /**
328
+ * @deprecated use `Text` with `[slot='description']` from `@launchpad-ui/components` instead
329
+ *
330
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
331
+ */
332
+ const FormHint = ({ className, children, "data-test-id": testId = "form-hint",...rest }) => {
333
+ const classes = (0, classix.cx)(Form_module_default.hint, className);
334
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
335
+ ...rest,
336
+ "data-test-id": testId,
337
+ className: classes,
338
+ children
339
+ });
334
340
  };
335
- const FormField = ({
336
- isRequired,
337
- label: label2,
338
- name,
339
- htmlFor,
340
- hint: hint2,
341
- errorMessage,
342
- ignoreValidation,
343
- isInvalid: isInvalid2,
344
- children,
345
- className,
346
- onBlur,
347
- "data-test-id": testId = "form-field",
348
- LabelProps = {},
349
- FormHintProps = {},
350
- FieldErrorProps = {}
351
- }) => {
352
- const handleBlur = () => {
353
- onBlur == null ? void 0 : onBlur(name);
354
- };
355
- return /* @__PURE__ */ jsxRuntime.jsxs(
356
- FormGroup,
357
- {
358
- className: classix.cx(styles.field, className),
359
- name,
360
- ignoreValidation,
361
- isInvalid: isInvalid2,
362
- onBlur: handleBlur,
363
- "data-test-id": testId,
364
- children: [
365
- label2 && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
366
- hint2 && /* @__PURE__ */ jsxRuntime.jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
367
- children,
368
- /* @__PURE__ */ jsxRuntime.jsx(
369
- FieldError,
370
- {
371
- className: styles.fieldErrorMessage,
372
- name,
373
- errorMessage,
374
- ...FieldErrorProps
375
- }
376
- )
377
- ]
378
- }
379
- );
341
+ /**
342
+ * @deprecated use form elements from `@launchpad-ui/components` instead
343
+ *
344
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
345
+ */
346
+ const FormField = ({ isRequired, label: label$1, name, htmlFor, hint: hint$1, errorMessage, ignoreValidation, isInvalid: isInvalid$1, children, className, onBlur, "data-test-id": testId = "form-field", LabelProps = {}, FormHintProps = {}, FieldErrorProps = {} }) => {
347
+ const handleBlur = () => {
348
+ onBlur?.(name);
349
+ };
350
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FormGroup, {
351
+ className: (0, classix.cx)(Form_module_default.field, className),
352
+ name,
353
+ ignoreValidation,
354
+ isInvalid: isInvalid$1,
355
+ onBlur: handleBlur,
356
+ "data-test-id": testId,
357
+ children: [
358
+ label$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
359
+ htmlFor,
360
+ required: isRequired,
361
+ ...LabelProps,
362
+ children: label$1
363
+ }),
364
+ hint$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormHint, {
365
+ className: Form_module_default.hint,
366
+ ...FormHintProps,
367
+ children: hint$1
368
+ }),
369
+ children,
370
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldError, {
371
+ className: Form_module_default.fieldErrorMessage,
372
+ name,
373
+ errorMessage,
374
+ ...FieldErrorProps
375
+ })
376
+ ]
377
+ });
380
378
  };
381
- const IconField = ({
382
- icon,
383
- children,
384
- className,
385
- "data-test-id": testId = "icon-field",
386
- tooltip: tooltip$1,
387
- renderIconLast = false,
388
- ariaLabel = "More info",
389
- ...rest
390
- }) => {
391
- const iconElement = /* @__PURE__ */ react.cloneElement(icon, {
392
- size: "small",
393
- className: classix.cx(styles.iconFieldIcon, styles.iconFieldIconFill)
394
- });
395
- const classes = classix.cx(styles.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
396
- const renderIcon = tooltip$1 ? /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, { content: tooltip$1, targetClassName: styles.iconFieldButton, children: /* @__PURE__ */ jsxRuntime.jsx(
397
- button.IconButton,
398
- {
399
- icon: /* @__PURE__ */ react.cloneElement(icon, {
400
- className: styles.iconFieldIconFill
401
- }),
402
- size: "small",
403
- className: styles.iconFieldIcon,
404
- style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
405
- "aria-label": ariaLabel
406
- }
407
- ) }) : iconElement;
408
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
409
- !renderIconLast && renderIcon,
410
- children,
411
- renderIconLast && renderIcon
412
- ] });
379
+ /**
380
+ * @deprecated use `Group` from `@launchpad-ui/components` instead
381
+ *
382
+ * https://launchpad.launchdarkly.com/?path=/docs/components-content-group--docs
383
+ */
384
+ const IconField = ({ icon, children, className, "data-test-id": testId = "icon-field", tooltip, renderIconLast = false, ariaLabel = "More info",...rest }) => {
385
+ const iconElement = /* @__PURE__ */ (0, react.cloneElement)(icon, {
386
+ size: "small",
387
+ className: (0, classix.cx)(Form_module_default.iconFieldIcon, Form_module_default.iconFieldIconFill)
388
+ });
389
+ const classes = (0, classix.cx)(Form_module_default.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
390
+ const renderIcon = tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_tooltip.Tooltip, {
391
+ content: tooltip,
392
+ targetClassName: Form_module_default.iconFieldButton,
393
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_button.IconButton, {
394
+ icon: /* @__PURE__ */ (0, react.cloneElement)(icon, { className: Form_module_default.iconFieldIconFill }),
395
+ size: "small",
396
+ className: Form_module_default.iconFieldIcon,
397
+ style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
398
+ "aria-label": ariaLabel
399
+ })
400
+ }) : iconElement;
401
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
402
+ className: classes,
403
+ "data-test-id": testId,
404
+ ...rest,
405
+ children: [
406
+ !renderIconLast && renderIcon,
407
+ children,
408
+ renderIconLast && renderIcon
409
+ ]
410
+ });
413
411
  };
414
- const Radio = ({
415
- "aria-label": ariaLabel,
416
- "aria-labelledby": ariaLabelledby,
417
- checked = false,
418
- children,
419
- className,
420
- disabled = false,
421
- id,
422
- labelClassName,
423
- labelStyle,
424
- "data-test-id": testId = "radio",
425
- ...rest
426
- }) => {
427
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
428
- if (!children && !hasAriaLabel) {
429
- console.warn(
430
- "If you do not provide children, you must specify an aria-label for accessibility"
431
- );
432
- }
433
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
434
- /* @__PURE__ */ jsxRuntime.jsx(
435
- "input",
436
- {
437
- ...rest,
438
- "aria-label": ariaLabel,
439
- "aria-labelledby": ariaLabelledby,
440
- className: classix.cx(styles.radio, className),
441
- checked,
442
- disabled,
443
- id,
444
- "data-test-id": testId,
445
- type: "radio"
446
- }
447
- ),
448
- /* @__PURE__ */ jsxRuntime.jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelDisabled, children }) : children })
449
- ] });
412
+ /**
413
+ * @deprecated use `RadioGroup` from `@launchpad-ui/components` instead
414
+ *
415
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs
416
+ */
417
+ const Radio = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, checked = false, children, className, disabled = false, id, labelClassName, labelStyle, "data-test-id": testId = "radio",...rest }) => {
418
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
419
+ if (!children && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
420
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
421
+ ...rest,
422
+ "aria-label": ariaLabel,
423
+ "aria-labelledby": ariaLabelledby,
424
+ className: (0, classix.cx)(Form_module_default.radio, className),
425
+ checked,
426
+ disabled,
427
+ id,
428
+ "data-test-id": testId,
429
+ type: "radio"
430
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
431
+ className: labelClassName,
432
+ htmlFor: id,
433
+ style: labelStyle,
434
+ children: disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
435
+ className: Form_module_default.labelDisabled,
436
+ children
437
+ }) : children
438
+ })] });
450
439
  };
440
+ /**
441
+ * @deprecated use `RadioGroup` from `@launchpad-ui/components` instead
442
+ *
443
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs
444
+ */
451
445
  const RadioGroup = (props) => {
452
- const {
453
- name,
454
- value,
455
- onChange,
456
- children,
457
- disabled,
458
- legend,
459
- "data-test-id": testId = "radio-group",
460
- ...rest
461
- } = props;
462
- const fieldsetRef = react.useRef(null);
463
- function updateRadioElems(elem) {
464
- var _a, _b;
465
- if (!/* @__PURE__ */ react.isValidElement(elem)) {
466
- return elem;
467
- }
468
- const item = elem;
469
- if ((item == null ? void 0 : item.type) && item.type === Radio) {
470
- return /* @__PURE__ */ react.cloneElement(item, {
471
- ...item.props,
472
- name,
473
- checked: item.props.value === value,
474
- onChange,
475
- disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
476
- });
477
- }
478
- if ((item == null ? void 0 : item.type) && item.type === Label) {
479
- return /* @__PURE__ */ react.cloneElement(item, {
480
- ...item.props,
481
- onChange,
482
- disabled
483
- });
484
- }
485
- const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
486
- if (elemChildren) {
487
- if (Array.isArray(elemChildren)) {
488
- return /* @__PURE__ */ react.cloneElement(item, {
489
- children: react.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
490
- });
491
- }
492
- return /* @__PURE__ */ react.cloneElement(item, {
493
- children: updateRadioElems(elemChildren)
494
- });
495
- }
496
- if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
497
- return item;
498
- }
499
- return null;
500
- }
501
- const radios = react.Children.map(children, (child) => updateRadioElems(child));
502
- return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
503
- legend && /* @__PURE__ */ jsxRuntime.jsx("legend", { children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, { children: legend }) }),
504
- /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children: radios })
505
- ] });
446
+ const { name, value, onChange, children, disabled, legend, "data-test-id": testId = "radio-group",...rest } = props;
447
+ const fieldsetRef = (0, react.useRef)(null);
448
+ function updateRadioElems(elem) {
449
+ if (!/* @__PURE__ */ (0, react.isValidElement)(elem)) return elem;
450
+ const item = elem;
451
+ if (item?.type && item.type === Radio) return /* @__PURE__ */ (0, react.cloneElement)(item, {
452
+ ...item.props,
453
+ name,
454
+ checked: item.props.value === value,
455
+ onChange,
456
+ disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
457
+ });
458
+ if (item?.type && item.type === Label) return /* @__PURE__ */ (0, react.cloneElement)(item, {
459
+ ...item.props,
460
+ onChange,
461
+ disabled
462
+ });
463
+ const elemChildren = item?.props?.children;
464
+ if (elemChildren) {
465
+ if (Array.isArray(elemChildren)) return /* @__PURE__ */ (0, react.cloneElement)(item, { children: react.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)) });
466
+ return /* @__PURE__ */ (0, react.cloneElement)(item, { children: updateRadioElems(elemChildren) });
467
+ }
468
+ if (item?.type && item.type !== Radio && item.type !== Label) return item;
469
+ return null;
470
+ }
471
+ const radios = react.Children.map(children, (child) => updateRadioElems(child));
472
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
473
+ "data-test-id": testId,
474
+ ref: fieldsetRef,
475
+ children: [legend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_aria_visually_hidden.VisuallyHidden, { children: legend }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
476
+ ...rest,
477
+ children: radios
478
+ })]
479
+ });
506
480
  };
507
- const SelectField = /* @__PURE__ */ react.forwardRef(
508
- ({ className, children, "data-test-id": testId = "select", ...rest }, ref) => {
509
- const classes = classix.cx(styles.formInput, className);
510
- return /* @__PURE__ */ jsxRuntime.jsx("select", { ...rest, "data-test-id": testId, className: classes, ref, children });
511
- }
512
- );
481
+ /**
482
+ * @deprecated use `Select` from `@launchpad-ui/components` instead
483
+ *
484
+ * https://launchpad.launchdarkly.com/?path=/docs/components-pickers-select--docs
485
+ */
486
+ const SelectField = /* @__PURE__ */ (0, react.forwardRef)(({ className, children, "data-test-id": testId = "select",...rest }, ref) => {
487
+ const classes = (0, classix.cx)(Form_module_default.formInput, className);
488
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
489
+ ...rest,
490
+ "data-test-id": testId,
491
+ className: classes,
492
+ ref,
493
+ children
494
+ });
495
+ });
513
496
  SelectField.displayName = "SelectField";
514
- const TextArea = /* @__PURE__ */ react.forwardRef(
515
- ({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
516
- const onKeyDown = (e) => {
517
- if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
518
- e.stopPropagation();
519
- }
520
- if (e.key === "Escape") {
521
- e.nativeEvent.stopImmediatePropagation();
522
- }
523
- };
524
- return /* @__PURE__ */ jsxRuntime.jsx(
525
- "textarea",
526
- {
527
- ...props,
528
- className: classix.cx(styles.formInput, className),
529
- ref,
530
- "data-test-id": testId,
531
- "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
532
- onKeyDown
533
- }
534
- );
535
- }
536
- );
497
+ /**
498
+ * @deprecated use `TextArea` from `@launchpad-ui/components` instead
499
+ *
500
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs#multi%20line
501
+ */
502
+ const TextArea = /* @__PURE__ */ (0, react.forwardRef)(({ className, "data-test-id": testId = "text-area",...props }, ref) => {
503
+ const onKeyDown = (e) => {
504
+ if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") e.stopPropagation();
505
+ if (e.key === "Escape") e.nativeEvent.stopImmediatePropagation();
506
+ };
507
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
508
+ ...props,
509
+ className: (0, classix.cx)(Form_module_default.formInput, className),
510
+ ref,
511
+ "data-test-id": testId,
512
+ "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
513
+ onKeyDown
514
+ });
515
+ });
537
516
  TextArea.displayName = "TextArea";
538
- const defaultFormatOptions = {
539
- maximumFractionDigits: 6
540
- };
541
- const useNumberField = ({
542
- className,
543
- "data-test-id": testId = "input",
544
- id,
545
- name,
546
- ...otherProps
547
- } = {}) => {
548
- const formatOptions = useObjectMemo({
549
- ...defaultFormatOptions,
550
- ...otherProps.formatOptions
551
- });
552
- const { locale } = i18n.useLocale();
553
- const numberFieldState = numberfield.useNumberFieldState({ ...otherProps, locale, formatOptions });
554
- const inputRef = react.useRef(null);
555
- const {
556
- descriptionProps: formHintProps,
557
- errorMessageProps: fieldErrorProps,
558
- labelProps,
559
- groupProps,
560
- inputProps,
561
- incrementButtonProps,
562
- decrementButtonProps
563
- } = numberfield$1.useNumberField({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
564
- return {
565
- fieldErrorProps,
566
- formHintProps,
567
- labelProps,
568
- renderNumberField: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { ...groupProps, className: styles.numberField, children: [
569
- /* @__PURE__ */ jsxRuntime.jsx(
570
- "input",
571
- {
572
- ...inputProps,
573
- className: classix.cx(styles.formInput, styles["numberField-input"]),
574
- "data-test-id": testId,
575
- name,
576
- ref: inputRef
577
- }
578
- ),
579
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles["numberField-stepperContainer"], children: [
580
- /* @__PURE__ */ jsxRuntime.jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-up" }) }),
581
- /* @__PURE__ */ jsxRuntime.jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-down" }) })
582
- ] })
583
- ] })
584
- };
517
+ const defaultFormatOptions = { maximumFractionDigits: 6 };
518
+ /**
519
+ * @deprecated use `NumberField` from `@launchpad-ui/components` instead
520
+ *
521
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-numberfield--docs
522
+ */
523
+ const useNumberField = ({ className, "data-test-id": testId = "input", id, name,...otherProps } = {}) => {
524
+ const formatOptions = useObjectMemo({
525
+ ...defaultFormatOptions,
526
+ ...otherProps.formatOptions
527
+ });
528
+ const { locale } = (0, __react_aria_i18n.useLocale)();
529
+ const numberFieldState = (0, __react_stately_numberfield.useNumberFieldState)({
530
+ ...otherProps,
531
+ locale,
532
+ formatOptions
533
+ });
534
+ const inputRef = (0, react.useRef)(null);
535
+ const { descriptionProps: formHintProps, errorMessageProps: fieldErrorProps, labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps } = (0, __react_aria_numberfield.useNumberField)({
536
+ ...otherProps,
537
+ formatOptions,
538
+ id
539
+ }, numberFieldState, inputRef);
540
+ return {
541
+ fieldErrorProps,
542
+ formHintProps,
543
+ labelProps,
544
+ renderNumberField: () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
545
+ ...groupProps,
546
+ className: Form_module_default.numberField,
547
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
548
+ ...inputProps,
549
+ className: (0, classix.cx)(Form_module_default.formInput, Form_module_default["numberField-input"]),
550
+ "data-test-id": testId,
551
+ name,
552
+ ref: inputRef
553
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
554
+ className: Form_module_default["numberField-stepperContainer"],
555
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stepper, {
556
+ ...incrementButtonProps,
557
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, { name: "chevron-up" })
558
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stepper, {
559
+ ...decrementButtonProps,
560
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, { name: "chevron-down" })
561
+ })]
562
+ })]
563
+ })
564
+ };
585
565
  };
586
566
  const Stepper = (props) => {
587
- const buttonRef = react.useRef(null);
588
- const { buttonProps } = button$1.useButton(props, buttonRef);
589
- return /* @__PURE__ */ jsxRuntime.jsx(
590
- "button",
591
- {
592
- type: "button",
593
- ...buttonProps,
594
- className: styles["numberField-stepper"],
595
- ref: buttonRef,
596
- children: props.children
597
- }
598
- );
567
+ const buttonRef = (0, react.useRef)(null);
568
+ const { buttonProps } = (0, __react_aria_button.useButton)(props, buttonRef);
569
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
570
+ type: "button",
571
+ ...buttonProps,
572
+ className: Form_module_default["numberField-stepper"],
573
+ ref: buttonRef,
574
+ children: props.children
575
+ });
599
576
  };
600
577
  exports.Checkbox = Checkbox;
601
578
  exports.CompactTextField = CompactTextField;
@@ -614,4 +591,5 @@ exports.SelectField = SelectField;
614
591
  exports.TextArea = TextArea;
615
592
  exports.TextField = TextField;
616
593
  exports.useNumberField = useNumberField;
617
- //# sourceMappingURL=index.js.map
594
+
595
+ //# sourceMappingURL=index.js.map