@launchpad-ui/form 0.15.11 → 0.15.12

package/dist/index.es.js

@@ -1,558 +0,0 @@
-import './style.css';
-import { Children, cloneElement, forwardRef, isValidElement, useMemo, useRef, useState } from "react";
-import { cx } from "classix";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "@launchpad-ui/icons";
-import { IconButton } from "@launchpad-ui/button";
-import { Tooltip } from "@launchpad-ui/tooltip";
-import { VisuallyHidden } from "@react-aria/visually-hidden";
-import { useButton } from "@react-aria/button";
-import { useLocale } from "@react-aria/i18n";
-import { useNumberField as useNumberField$1 } from "@react-aria/numberfield";
-import { useNumberFieldState } from "@react-stately/numberfield";
-const checkbox = "QJPOUG_checkbox";
-const compactTextField = "QJPOUG_compactTextField";
-const field = "QJPOUG_field";
-const fieldError = "QJPOUG_fieldError";
-const fieldErrorMessage = "QJPOUG_fieldErrorMessage";
-const fieldSet = "QJPOUG_fieldSet";
-const form = "QJPOUG_form";
-const formGroup = "QJPOUG_formGroup";
-const formIncreasedErrorMargin = "QJPOUG_formIncreasedErrorMargin";
-const formInline = "QJPOUG_formInline";
-const formInput = "QJPOUG_formInput";
-const formInputTiny = "QJPOUG_formInputTiny";
-const hint = "QJPOUG_hint";
-const iconField = "QJPOUG_iconField";
-const iconFieldButton = "QJPOUG_iconFieldButton";
-const iconFieldIcon = "QJPOUG_iconFieldIcon";
-const iconFieldIconFill = "QJPOUG_iconFieldIconFill";
-const inlineForm = "QJPOUG_inlineForm";
-const isActive = "QJPOUG_isActive";
-const isDisabled = "QJPOUG_isDisabled";
-const isFocused = "QJPOUG_isFocused";
-const isInvalid = "QJPOUG_isInvalid";
-const label = "QJPOUG_label";
-const labelDisabled = "QJPOUG_labelDisabled";
-const labelOptional = "QJPOUG_labelOptional";
-const number = "QJPOUG_number";
-const numberField = "QJPOUG_numberField";
-const radio = "QJPOUG_radio";
-const requiredAsterisk = "QJPOUG_requiredAsterisk";
-const suffix = "QJPOUG_suffix";
-const suffixContainer = "QJPOUG_suffixContainer";
-var Form_module_default = {
-	checkbox,
-	compactTextField,
-	field,
-	fieldError,
-	fieldErrorMessage,
-	fieldSet,
-	form,
-	formGroup,
-	formIncreasedErrorMargin,
-	formInline,
-	formInput,
-	formInputTiny,
-	hint,
-	iconField,
-	iconFieldButton,
-	iconFieldIcon,
-	iconFieldIconFill,
-	inlineForm,
-	isActive,
-	isDisabled,
-	isFocused,
-	isInvalid,
-	label,
-	labelDisabled,
-	labelOptional,
-	number,
-	numberField,
-	"numberField-input": "QJPOUG_numberField-input",
-	"numberField-stepper": "QJPOUG_numberField-stepper",
-	"numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
-	radio,
-	requiredAsterisk,
-	suffix,
-	suffixContainer
-};
-/**
-* @deprecated use `Label` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
-*/
-const RequiredAsterisk = ({ className, "data-test-id": testId = "required-asterisk",...rest }) => {
-	const classes = cx(Form_module_default.requiredAsterisk, className);
-	return /* @__PURE__ */ jsx("span", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children: "*"
-	});
-};
-/**
-* @deprecated use `Label` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
-*/
-const Label = ({ disabled, className, children, required = false, optional = false, "data-test-id": testId = "label",...rest }) => {
-	const classes = cx(Form_module_default.label, className, disabled && Form_module_default.labelDisabled);
-	return /* @__PURE__ */ jsxs("label", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children: [
-			children,
-			optional && !required && /* @__PURE__ */ jsx("small", {
-				className: Form_module_default.labelOptional,
-				children: "(optional)"
-			}),
-			required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
-		]
-	});
-};
-/**
-* @deprecated use `Checkbox` or `CheckboxGroup` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-checkbox--docs
-*/
-const Checkbox = /* @__PURE__ */ forwardRef(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, disabled, checked, labelClassName, "data-test-id": testId = "checkbox",...rest }, ref) => {
-	const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-	if (!children && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-	return /* @__PURE__ */ jsxs(Label, {
-		className: labelClassName,
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				...rest,
-				ref,
-				checked,
-				"aria-checked": checked ? "true" : "false",
-				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledby,
-				className: Form_module_default.checkbox,
-				disabled,
-				type: "checkbox",
-				"data-test-id": testId
-			}),
-			" ",
-			disabled ? /* @__PURE__ */ jsx("span", {
-				className: Form_module_default.labelDisabled,
-				children
-			}) : children
-		]
-	});
-});
-Checkbox.displayName = "Checkbox";
-const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
-function hasObjectChanged(obj1, obj2) {
-	return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
-		const key = k;
-		return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
-	});
-}
-function useObjectMemo(obj) {
-	const objRef = useRef(obj);
-	return useMemo(() => {
-		if (hasObjectChanged(obj, objRef.current)) objRef.current = obj;
-		return objRef.current;
-	}, [obj]);
-}
-/**
-* @deprecated use `TextField` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
-*/
-const TextField = /* @__PURE__ */ forwardRef(({ className, type = "text", tiny = false, readOnly, tabIndex = 0, suffix: suffix$1, overrideWidth, "data-test-id": testId = "text-field", autoComplete,...rest }, ref) => {
-	const classes = overrideWidth ? className : cx(Form_module_default.formInput, tiny && Form_module_default.formInputTiny, className);
-	const disablePasswordManagers = autoComplete === "off";
-	if (suffix$1) return /* @__PURE__ */ jsxs("div", {
-		className: Form_module_default.suffixContainer,
-		children: [/* @__PURE__ */ jsx("input", {
-			...rest,
-			type,
-			"data-test-id": testId,
-			autoComplete,
-			className: classes,
-			readOnly,
-			ref,
-			"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-		}), /* @__PURE__ */ jsx("label", {
-			className: Form_module_default.suffix,
-			htmlFor: rest.id,
-			children: suffix$1
-		})]
-	});
-	return /* @__PURE__ */ jsx("input", {
-		...rest,
-		"data-1p-ignore": disablePasswordManagers,
-		type,
-		className: classes,
-		readOnly,
-		tabIndex,
-		autoComplete,
-		ref,
-		"data-test-id": testId,
-		style: overrideWidth ? { width: overrideWidth } : void 0,
-		"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-	});
-});
-TextField.displayName = "TextField";
-/**
-* @deprecated use `TextField` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
-*/
-const CompactTextField = /* @__PURE__ */ forwardRef(({ className, id, label: label$1, needsErrorFeedback, value, onFocus, onBlur, "data-test-id": testId = "compact-text-field",...rest }, ref) => {
-	const [isActive$1, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
-	const isActiveState = isActive$1 || needsErrorFeedback;
-	const classes = cx(Form_module_default.compactTextField, className, isActiveState && Form_module_default.isActive);
-	const placeholder = isActiveState ? "" : label$1;
-	const handleFocus = (event) => {
-		setIsActive(true);
-		if (onFocus) onFocus(event);
-	};
-	const handleBlur = (event) => {
-		const value$1 = event.target.value || "";
-		setIsActive(value$1.trim().length !== 0);
-		if (onBlur) onBlur(event);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes,
-		"data-test-id": testId,
-		children: [/* @__PURE__ */ jsx(Label, {
-			htmlFor: id,
-			children: label$1
-		}), /* @__PURE__ */ jsx(TextField, {
-			...rest,
-			id,
-			placeholder,
-			value,
-			ref,
-			onFocus: handleFocus,
-			onBlur: handleBlur
-		})]
-	});
-});
-CompactTextField.displayName = "CompactTextField";
-/**
-* @deprecated use `FieldError` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
-*/
-const FieldError = ({ name, errorMessage, className, "data-test-id": testId = "field-error",...rest }) => {
-	if (!errorMessage) return null;
-	return /* @__PURE__ */ jsxs("span", {
-		...rest,
-		className: cx(Form_module_default.fieldError, className),
-		"aria-live": "polite",
-		"data-test-id": testId,
-		"aria-label": "Error",
-		id: createFieldErrorId(name),
-		children: [
-			/* @__PURE__ */ jsx(Icon, {
-				name: "alert-rhombus",
-				size: "small"
-			}),
-			" ",
-			errorMessage
-		]
-	});
-};
-/**
-* @deprecated use `FieldGroup` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs
-*/
-const FieldSet = ({ children, className, "data-test-id": testId = "field-set",...rest }) => {
-	const classes = cx(Form_module_default.fieldSet, className);
-	return /* @__PURE__ */ jsx("fieldset", {
-		"data-test-id": testId,
-		className: classes,
-		...rest,
-		children
-	});
-};
-/**
-* @deprecated use `Form` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-form--docs
-*/
-const Form = (props) => {
-	const { className, inline, children, hasIncreasedErrorMargin, "data-test-id": testId = "form",...rest } = props;
-	const classes = cx(Form_module_default.form, className, inline && Form_module_default.formInline, !!hasIncreasedErrorMargin && Form_module_default.formIncreasedErrorMargin);
-	return /* @__PURE__ */ jsx("form", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children
-	});
-};
-/**
-* @deprecated use `FieldGroup` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs
-*/
-const FormGroup = (props) => {
-	const { className, name, ignoreValidation, isInvalid: isInvalid$1, children, "data-test-id": testId = "form-group",...rest } = props;
-	const classes = cx(Form_module_default.formGroup, className, !ignoreValidation && isInvalid$1 && Form_module_default.isInvalid);
-	return /* @__PURE__ */ jsx("fieldset", {
-		className: classes,
-		"data-test-id": testId,
-		...rest,
-		children
-	});
-};
-/**
-* @deprecated use `Text` with `[slot='description']` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
-*/
-const FormHint = ({ className, children, "data-test-id": testId = "form-hint",...rest }) => {
-	const classes = cx(Form_module_default.hint, className);
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children
-	});
-};
-/**
-* @deprecated use form elements from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
-*/
-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 = {} }) => {
-	const handleBlur = () => {
-		onBlur?.(name);
-	};
-	return /* @__PURE__ */ jsxs(FormGroup, {
-		className: cx(Form_module_default.field, className),
-		name,
-		ignoreValidation,
-		isInvalid: isInvalid$1,
-		onBlur: handleBlur,
-		"data-test-id": testId,
-		children: [
-			label$1 && /* @__PURE__ */ jsx(Label, {
-				htmlFor,
-				required: isRequired,
-				...LabelProps,
-				children: label$1
-			}),
-			hint$1 && /* @__PURE__ */ jsx(FormHint, {
-				className: Form_module_default.hint,
-				...FormHintProps,
-				children: hint$1
-			}),
-			children,
-			/* @__PURE__ */ jsx(FieldError, {
-				className: Form_module_default.fieldErrorMessage,
-				name,
-				errorMessage,
-				...FieldErrorProps
-			})
-		]
-	});
-};
-/**
-* @deprecated use `Group` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-content-group--docs
-*/
-const IconField = ({ icon, children, className, "data-test-id": testId = "icon-field", tooltip, renderIconLast = false, ariaLabel = "More info",...rest }) => {
-	const iconElement = /* @__PURE__ */ cloneElement(icon, {
-		size: "small",
-		className: cx(Form_module_default.iconFieldIcon, Form_module_default.iconFieldIconFill)
-	});
-	const classes = cx(Form_module_default.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
-	const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, {
-		content: tooltip,
-		targetClassName: Form_module_default.iconFieldButton,
-		children: /* @__PURE__ */ jsx(IconButton, {
-			icon: /* @__PURE__ */ cloneElement(icon, { className: Form_module_default.iconFieldIconFill }),
-			size: "small",
-			className: Form_module_default.iconFieldIcon,
-			style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
-			"aria-label": ariaLabel
-		})
-	}) : iconElement;
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes,
-		"data-test-id": testId,
-		...rest,
-		children: [
-			!renderIconLast && renderIcon,
-			children,
-			renderIconLast && renderIcon
-		]
-	});
-};
-/**
-* @deprecated use `RadioGroup` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs
-*/
-const Radio = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, checked = false, children, className, disabled = false, id, labelClassName, labelStyle, "data-test-id": testId = "radio",...rest }) => {
-	const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-	if (!children && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-		...rest,
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledby,
-		className: cx(Form_module_default.radio, className),
-		checked,
-		disabled,
-		id,
-		"data-test-id": testId,
-		type: "radio"
-	}), /* @__PURE__ */ jsx(Label, {
-		className: labelClassName,
-		htmlFor: id,
-		style: labelStyle,
-		children: disabled ? /* @__PURE__ */ jsx("span", {
-			className: Form_module_default.labelDisabled,
-			children
-		}) : children
-	})] });
-};
-/**
-* @deprecated use `RadioGroup` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs
-*/
-const RadioGroup = (props) => {
-	const { name, value, onChange, children, disabled, legend, "data-test-id": testId = "radio-group",...rest } = props;
-	const fieldsetRef = useRef(null);
-	function updateRadioElems(elem) {
-		if (!/* @__PURE__ */ isValidElement(elem)) return elem;
-		const item = elem;
-		if (item?.type && item.type === Radio) return /* @__PURE__ */ cloneElement(item, {
-			...item.props,
-			name,
-			checked: item.props.value === value,
-			onChange,
-			disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
-		});
-		if (item?.type && item.type === Label) return /* @__PURE__ */ cloneElement(item, {
-			...item.props,
-			onChange,
-			disabled
-		});
-		const elemChildren = item?.props?.children;
-		if (elemChildren) {
-			if (Array.isArray(elemChildren)) return /* @__PURE__ */ cloneElement(item, { children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)) });
-			return /* @__PURE__ */ cloneElement(item, { children: updateRadioElems(elemChildren) });
-		}
-		if (item?.type && item.type !== Radio && item.type !== Label) return item;
-		return null;
-	}
-	const radios = Children.map(children, (child) => updateRadioElems(child));
-	return /* @__PURE__ */ jsxs("fieldset", {
-		"data-test-id": testId,
-		ref: fieldsetRef,
-		children: [legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }), /* @__PURE__ */ jsx("div", {
-			...rest,
-			children: radios
-		})]
-	});
-};
-/**
-* @deprecated use `Select` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-pickers-select--docs
-*/
-const SelectField = /* @__PURE__ */ forwardRef(({ className, children, "data-test-id": testId = "select",...rest }, ref) => {
-	const classes = cx(Form_module_default.formInput, className);
-	return /* @__PURE__ */ jsx("select", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		ref,
-		children
-	});
-});
-SelectField.displayName = "SelectField";
-/**
-* @deprecated use `TextArea` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs#multi%20line
-*/
-const TextArea = /* @__PURE__ */ forwardRef(({ className, "data-test-id": testId = "text-area",...props }, ref) => {
-	const onKeyDown = (e) => {
-		if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") e.stopPropagation();
-		if (e.key === "Escape") e.nativeEvent.stopImmediatePropagation();
-	};
-	return /* @__PURE__ */ jsx("textarea", {
-		...props,
-		className: cx(Form_module_default.formInput, className),
-		ref,
-		"data-test-id": testId,
-		"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-		onKeyDown
-	});
-});
-TextArea.displayName = "TextArea";
-const defaultFormatOptions = { maximumFractionDigits: 6 };
-/**
-* @deprecated use `NumberField` from `@launchpad-ui/components` instead
-*
-* https://launchpad.launchdarkly.com/?path=/docs/components-forms-numberfield--docs
-*/
-const useNumberField = ({ className, "data-test-id": testId = "input", id, name,...otherProps } = {}) => {
-	const formatOptions = useObjectMemo({
-		...defaultFormatOptions,
-		...otherProps.formatOptions
-	});
-	const { locale } = useLocale();
-	const numberFieldState = useNumberFieldState({
-		...otherProps,
-		locale,
-		formatOptions
-	});
-	const inputRef = useRef(null);
-	const { descriptionProps: formHintProps, errorMessageProps: fieldErrorProps, labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField$1({
-		...otherProps,
-		formatOptions,
-		id
-	}, numberFieldState, inputRef);
-	return {
-		fieldErrorProps,
-		formHintProps,
-		labelProps,
-		renderNumberField: () => /* @__PURE__ */ jsxs("div", {
-			...groupProps,
-			className: Form_module_default.numberField,
-			children: [/* @__PURE__ */ jsx("input", {
-				...inputProps,
-				className: cx(Form_module_default.formInput, Form_module_default["numberField-input"]),
-				"data-test-id": testId,
-				name,
-				ref: inputRef
-			}), /* @__PURE__ */ jsxs("div", {
-				className: Form_module_default["numberField-stepperContainer"],
-				children: [/* @__PURE__ */ jsx(Stepper, {
-					...incrementButtonProps,
-					children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up" })
-				}), /* @__PURE__ */ jsx(Stepper, {
-					...decrementButtonProps,
-					children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" })
-				})]
-			})]
-		})
-	};
-};
-const Stepper = (props) => {
-	const buttonRef = useRef(null);
-	const { buttonProps } = useButton(props, buttonRef);
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		...buttonProps,
-		className: Form_module_default["numberField-stepper"],
-		ref: buttonRef,
-		children: props.children
-	});
-};
-export { Checkbox, CompactTextField, FieldError, FieldSet, Form, FormField, FormGroup, FormHint, IconField, Label, Radio, RadioGroup, RequiredAsterisk, SelectField, TextArea, TextField, useNumberField };
-
-//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":["fieldIdentifier?: FieldPath","obj1: T","obj2: T","obj: T","event: FocusEvent<HTMLInputElement>","props: FormProps","props: FormGroupProps","props: RadioGroupProps","elem: ReactNode","e: KeyboardEvent<HTMLTextAreaElement>","defaultFormatOptions: Intl.NumberFormatOptions","props: AriaButtonProps"],"sources":["../src/styles/Form.module.css","../src/RequiredAsterisk.tsx","../src/Label.tsx","../src/Checkbox.tsx","../src/utils/index.ts","../src/TextField.tsx","../src/CompactTextField.tsx","../src/FieldError.tsx","../src/FieldSet.tsx","../src/Form.tsx","../src/FormGroup.tsx","../src/FormHint.tsx","../src/FormField.tsx","../src/IconField.tsx","../src/Radio.tsx","../src/RadioGroup.tsx","../src/SelectField.tsx","../src/TextArea.tsx","../src/useNumberField.tsx"],"sourcesContent":[":root,\n[data-theme='default'] {\n\t--lp-component-form-color-text-label-disabled: var(--lp-color-gray-800);\n}\n\n[data-theme='dark'] {\n\t--lp-component-form-color-text-label-disabled: var(--lp-color-gray-400);\n}\n\n.formGroup {\n\tmargin: 1.25rem 0;\n\tpadding: 0;\n\tborder: none;\n}\n\n/* The margin for .formGroup and the min-height of .form-fieldError\n  should be equal to avoid content shift when errors are shown */\n.formIncreasedErrorMargin .formGroup {\n\tmargin: 1.75rem 0;\n}\n\n.formInline .formGroup {\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tmargin: 0;\n}\n\n.form .formGroup:first-child {\n\tmargin-top: 0;\n}\n\n.form .formGroup:last-child {\n\tmargin-bottom: 0;\n}\n\n.formInput {\n\tdisplay: block;\n\twidth: 100%;\n\tpadding: 0.375rem 0.625rem;\n\tfont-size: 0.8125rem;\n\tfont-family: var(--lp-font-family-base);\n\tline-height: var(--lp-line-height-300);\n\tbackground-color: var(--lp-color-bg-field-base);\n\tcolor: var(--lp-color-text-ui-primary-base);\n\tborder: 1px solid var(--lp-color-border-field-base);\n\tborder-radius: var(--lp-border-radius-regular);\n\ttransition: all var(--lp-duration-100) linear;\n\theight: 2rem;\n}\n\n.formInput:placeholder-shown {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.formInput.isFocused,\n.formInput:focus {\n\toutline: 0;\n\tborder-color: var(--lp-color-border-field-focus);\n\tbox-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\nselect.formInput {\n\tappearance: none;\n\tbackground: transparent;\n\tbackground-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z' fill='%23646f7a'/></svg>\");\n\tbackground-size: 1.25rem;\n\tbackground-repeat: no-repeat;\n\tbackground-position:\n\t\tright 0.4em top 50%,\n\t\t0 0;\n\tpadding-right: 1.25rem;\n}\n\n.suffixContainer .formInput {\n\tborder: none;\n\tborder-radius: var(--lp-border-radius-regular) 0 0 var(--lp-border-radius-regular);\n}\n\n.isInvalid .formInput,\n.form .isInvalid :global(.Select-control),\n.form .isInvalid :global(.CustomSelect) > div,\n.form .isInvalid .formInput {\n\tborder-color: var(--lp-color-border-field-error);\n}\n\n.iconField:global(.IconBefore) .formInput {\n\tpadding-left: 1.875rem;\n}\n\n.iconField:global(.IconAfter) .formInput {\n\tpadding-right: 1.875rem;\n}\n\n.iconFieldIcon {\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n}\n\n.iconField:global(.IconBefore) .iconFieldIcon {\n\tleft: 0.625rem;\n}\n\n.iconField:global(.IconAfter) .iconFieldIcon {\n\tright: 0.625rem;\n}\n\n.suffixContainer .formInput:focus {\n\tbox-shadow: none;\n}\n\n.inlineForm .formGroup + .formGroup,\n.inlineForm .formGroup + :global([class*='_Button']) {\n\tmargin-left: 0.625rem;\n}\n\n.label {\n\tfont-size: 0.8125rem;\n\tfont-family: var(--lp-font-family-base);\n\tword-break: break-word;\n}\n\n.labelDisabled {\n\tcolor: var(--lp-component-form-color-text-label-disabled);\n}\n\n.labelOptional {\n\tmargin-left: 0.4em;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tfill: var(--lp-color-text-ui-secondary);\n}\n\n.compactTextField .label {\n\tposition: absolute;\n\ttop: -2px;\n\tleft: 10px;\n\tpadding: 0 3px;\n\tcolor: var(--lp-color-text-ui-primary-base);\n\topacity: 0;\n\tpointer-events: none;\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\ttransform-origin: 0 0; /* preserve left alignment after scaling */\n\ttransition: all var(--lp-duration-100) ease-in-out;\n\tz-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.formGroup .label {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-bottom: 0.125rem;\n}\n\n.formGroup .label + .label {\n\tmargin-top: 0.3125rem;\n}\n\n.fieldError {\n\tcolor: var(--lp-color-text-feedback-error);\n\tfont-size: 0.8125rem;\n\n\t& svg {\n\t\ttransform: translateY(-1px);\n\t}\n}\n\n/* The margin for .formGroup and the min-height of .form-fieldError\n  should be equal to avoid content shift when errors are shown */\n.formIncreasedErrorMargin .fieldError {\n\tmin-height: 1.75rem;\n}\n\n.label .fieldError {\n\tfloat: right;\n}\n\n.form:not(.inlineForm) .fieldError {\n\tdisplay: block;\n\tpadding-top: 0.3125rem;\n\ttext-align: left;\n}\n\n.formIncreasedErrorMargin:not(.inlineForm) .fieldError {\n\tpadding-top: 0.0625rem;\n\tpadding-bottom: 0.3125rem;\n}\n\n.form .isInvalid .label {\n\tcolor: var(--lp-color-text-feedback-error);\n}\n\n.formInput::placeholder {\n\tcolor: var(--lp-color-text-field-placeholder);\n}\n\n.formIncreasedErrorMargin .formGroup.isInvalid {\n\tmargin-bottom: 0;\n}\n\n.formIncreasedErrorMargin .formGroup.isInvalid + .formGroup {\n\tmargin-top: 0;\n}\n\n.hint {\n\tdisplay: block;\n\tmargin-top: 0.1875rem;\n\tfont-size: 0.8125rem;\n\tfont-weight: var(--lp-font-weight-regular);\n\tcolor: var(--lp-color-text-ui-secondary);\n}\n\n.field .hint {\n\tmargin: 0;\n\tfont-size: 0.8125rem;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tfill: var(--lp-color-text-ui-secondary);\n}\n\n.form .field label,\n.form .field .isInvalid label {\n\tcolor: var(--lp-color-text-ui-primary-base);\n}\n\n.fieldErrorMessage {\n\tcolor: var(--lp-color-text-feedback-error);\n\tfont-size: 0.8125rem;\n}\n\n.field.formGroup {\n\tmargin: 0.625rem 0;\n}\n\n.field.formGroup:first-child {\n\tmargin-top: 0;\n}\n\n.formInput.isDisabled,\ninput.formInput:disabled,\nselect.formInput:disabled,\ninput.formInput:read-only {\n\topacity: 1;\n\tbackground-color: var(--lp-color-bg-field-disabled);\n\tcolor: var(--lp-color-text-field-disabled);\n\tborder-color: var(--lp-color-border-field-disabled);\n}\n\n.formInput.isDisabled:hover,\n.formInput:disabled:hover {\n\tcursor: not-allowed;\n}\n\ntextarea.formInput {\n\tmin-height: 2.5em;\n\theight: auto;\n\tresize: none;\n}\n\ntextarea.formInput:disabled,\ntextarea.formInput:read-only {\n\topacity: 1;\n\tcolor: var(--lp-color-text-field-disabled);\n\tbackground-color: var(--lp-color-bg-field-disabled);\n\tborder-color: var(--lp-color-border-field-disabled);\n}\n\ninput.formInput::-webkit-autofill {\n\tbox-shadow: 0 0 0 50px var(--lp-color-bg-field-base) inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n\tdisplay: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n\tdisplay: none;\n\twidth: 0;\n\theight: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n\tdisplay: none;\n\twidth: 0;\n\theight: 0;\n}\n\ninput[type='checkbox']:disabled {\n\tpointer-events: none;\n}\n\n.formInput[readonly],\n.formInput[readonly]:focus {\n\tcolor: var(--lp-color-text-ui-secondary);\n\tborder-color: var(--lp-color-gray-500);\n\tbox-shadow: none;\n}\n\n.checkbox {\n\talign-self: flex-start; /* Default for .label is center, but this looks bad on multi-line checkbox labels */\n\tflex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n\tmargin-right: 0.3125rem;\n\tmargin-top: 0.25rem;\n}\n\n.radio {\n\tmargin-right: 0.3125rem;\n}\n\n.number {\n\tmin-width: 2.8125rem;\n}\n\n.suffixContainer {\n\tdisplay: inline-flex;\n\tborder: 1px solid var(--lp-color-border-field-base);\n\tborder-radius: var(--lp-border-radius-regular);\n\toverflow: hidden;\n\ttransition: all 0.1s linear;\n}\n\n.suffixContainer:focus-within {\n\tborder-color: var(--lp-color-border-field-focus);\n\tbox-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.suffixContainer .suffix {\n\tpadding: 0 2px;\n\tbackground-color: light-dark(var(--lp-color-bg-ui-secondary), var(--lp-color-bg-ui-primary));\n\tcolor: var(--lp-color-text-ui-secondary);\n\tcursor: text;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tposition: initial;\n}\n\n.suffix::-webkit-outer-spin-button,\n.suffix::-webkit-inner-spin-button {\n\tappearance: none;\n\tmargin: 0;\n}\n\n/* Firefox */\n.suffix[type='number'] {\n\tappearance: textfield;\n}\n\n.iconFieldIconFill {\n\tfill: var(--lp-color-fill-field-base);\n}\n\n[class*='_Popover-target'].iconFieldButton {\n\tdisplay: block;\n}\n\n.formInputTiny {\n\tpadding: 0.0625rem 0.375rem;\n\theight: 1.5rem;\n}\n\n.iconField {\n\tposition: relative;\n}\n\n.requiredAsterisk {\n\tcolor: var(--lp-color-text-feedback-error);\n}\n\n.fieldSet {\n\tborder: none;\n\tmargin: 1.25rem 0;\n\tpadding: 0;\n}\n\n.compactTextField {\n\tposition: relative;\n\twidth: 100%;\n}\n\n.compactTextField.isActive .label {\n\tborder-radius: var(--lp-border-radius-regular);\n\topacity: 1;\n\tpointer-events: auto;\n\ttransform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n\n.numberField {\n\tdisplay: flex;\n\tposition: relative;\n\n\t& .numberField-input {\n\t\tpadding-right: 1.5rem;\n\t}\n\n\t& .numberField-stepperContainer {\n\t\tdisplay: flex;\n\t\topacity: 0;\n\t\tflex-direction: column;\n\t\tposition: absolute;\n\t\twidth: 1.5rem;\n\t\ttop: 1px;\n\t\tbottom: 1px;\n\t\tright: 1px;\n\t\ttransition: all var(--lp-duration-100) linear;\n\n\t\t& .numberField-stepper {\n\t\t\t--numberField-stepper-padding: 0.25rem;\n\t\t\t--numberField-stepper-border-radius: calc(var(--lp-border-radius-regular) - 0.0625rem);\n\n\t\t\tbackground-color: var(--lp-color-bg-field-base);\n\t\t\tflex: auto;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tcursor: pointer;\n\t\t\tpadding: 0 var(--numberField-stepper-padding);\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\tmin-height: 1px;\n\t\t\toverflow: hidden;\n\n\t\t\t&:first-child {\n\t\t\t\tborder-top-right-radius: var(--numberField-stepper-border-radius);\n\t\t\t\tpadding-top: var(--numberField-stepper-padding);\n\t\t\t}\n\n\t\t\t&:last-child {\n\t\t\t\tborder-bottom-right-radius: var(--numberField-stepper-border-radius);\n\t\t\t\tpadding-bottom: var(--numberField-stepper-padding);\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tbackground-color: var(--lp-color-bg-interactive-secondary-active);\n\t\t\t}\n\n\t\t\t& span:has(svg) {\n\t\t\t\twidth: 100%;\n\t\t\t\tcolor: var(--lp-color-text-ui-primary-base);\n\t\t\t}\n\t\t}\n\t}\n\n\t&:hover,\n\t&:has(input:focus) {\n\t\t& .numberField-stepperContainer {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype RequiredAsteriskProps = ComponentProps<'span'> & {\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Label` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs\n */\nconst RequiredAsterisk = ({\n\tclassName,\n\t'data-test-id': testId = 'required-asterisk',\n\t...rest\n}: RequiredAsteriskProps) => {\n\tconst classes = cx(styles.requiredAsterisk, className);\n\n\treturn (\n\t\t<span {...rest} data-test-id={testId} className={classes}>\n\t\t\t*\n\t\t</span>\n\t);\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport styles from './styles/Form.module.css';\n\ntype LabelProps = ComponentProps<'label'> & {\n\trequired?: boolean;\n\toptional?: boolean;\n\tdisabled?: boolean;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Label` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs\n */\nconst Label = ({\n\tdisabled,\n\tclassName,\n\tchildren,\n\trequired = false,\n\toptional = false,\n\t'data-test-id': testId = 'label',\n\t...rest\n}: LabelProps) => {\n\tconst classes = cx(styles.label, className, disabled && styles.labelDisabled);\n\n\treturn (\n\t\t<label {...rest} data-test-id={testId} className={classes}>\n\t\t\t{children}\n\t\t\t{optional && !required && <small className={styles.labelOptional}>(optional)</small>}\n\t\t\t{required && !optional && <RequiredAsterisk />}\n\t\t</label>\n\t);\n};\n\nexport { Label };\nexport type { LabelProps };\n","import type { ComponentProps } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype CheckboxProps = ComponentProps<'input'> & {\n\t/**\n\t * The className to pass into the Checkbox's Label component\n\t */\n\tlabelClassName?: string;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Checkbox` or `CheckboxGroup` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-checkbox--docs\n */\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n\t(\n\t\t{\n\t\t\t'aria-label': ariaLabel,\n\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\tchecked,\n\t\t\tlabelClassName,\n\t\t\t'data-test-id': testId = 'checkbox',\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\t\tif (!children && !hasAriaLabel) {\n\t\t\tconsole.warn(\n\t\t\t\t'If you do not provide children, you must specify an aria-label for accessibility',\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Label className={labelClassName}>\n\t\t\t\t<input\n\t\t\t\t\t{...rest}\n\t\t\t\t\tref={ref}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t\taria-checked={checked ? 'true' : 'false'}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledby}\n\t\t\t\t\tclassName={styles.checkbox}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tdata-test-id={testId}\n\t\t\t\t/>{' '}\n\t\t\t\t{disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n\t\t\t</Label>\n\t\t);\n\t},\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n","import { useMemo, useRef } from 'react';\n\ntype FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n\tfieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nfunction hasObjectChanged<T extends object>(obj1: T, obj2: T): boolean {\n\treturn (\n\t\tObject.keys(obj1).length !== Object.keys(obj2).length ||\n\t\tObject.keys(obj1).some((k) => {\n\t\t\tconst key = k as keyof T;\n\t\t\treturn typeof obj1[key] === 'object' && typeof obj2[key] === 'object'\n\t\t\t\t? hasObjectChanged(obj1[key] as T, obj2[key] as T)\n\t\t\t\t: obj1[key] !== obj2[key];\n\t\t})\n\t);\n}\n\nfunction useObjectMemo<T extends object>(obj: T) {\n\tconst objRef = useRef(obj);\n\n\treturn useMemo(() => {\n\t\tif (hasObjectChanged(obj, objRef.current)) {\n\t\t\tobjRef.current = obj;\n\t\t}\n\n\t\treturn objRef.current;\n\t}, [obj]);\n}\n\nexport { createFieldErrorId, useObjectMemo };\nexport type { FieldPath };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = ComponentProps<'input'> & {\n\tsuffix?: string;\n\ttiny?: boolean;\n\toverrideWidth?: string;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `TextField` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs\n */\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\ttype = 'text',\n\t\t\ttiny = false,\n\t\t\treadOnly,\n\t\t\ttabIndex = 0,\n\t\t\tsuffix,\n\t\t\toverrideWidth,\n\t\t\t'data-test-id': testId = 'text-field',\n\t\t\tautoComplete,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst classes = overrideWidth\n\t\t\t? className\n\t\t\t: cx(styles.formInput, tiny && styles.formInputTiny, className);\n\n\t\tconst disablePasswordManagers = autoComplete === 'off';\n\n\t\tif (suffix) {\n\t\t\treturn (\n\t\t\t\t<div className={styles.suffixContainer}>\n\t\t\t\t\t<input\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\tdata-test-id={testId}\n\t\t\t\t\t\tautoComplete={autoComplete}\n\t\t\t\t\t\tclassName={classes}\n\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n\t\t\t\t\t/>\n\t\t\t\t\t<label className={styles.suffix} htmlFor={rest.id}>\n\t\t\t\t\t\t{suffix}\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\t{...rest}\n\t\t\t\tdata-1p-ignore={disablePasswordManagers} // \"data-1p-ignore\" is added to prevent 1Password from injecting a password autofill icon\n\t\t\t\ttype={type}\n\t\t\t\tclassName={classes}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\ttabIndex={tabIndex}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tref={ref}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tstyle={\n\t\t\t\t\toverrideWidth\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\twidth: overrideWidth,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n","import type { FocusEvent } from 'react';\nimport type { TextFieldProps } from './TextField';\n\nimport { cx } from 'classix';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\nimport { TextField } from './TextField';\n\ntype CompactTextFieldProps = TextFieldProps & {\n\tlabel: string;\n\tneedsErrorFeedback?: boolean;\n};\n\n/**\n * @deprecated use `TextField` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs\n */\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tid,\n\t\t\tlabel,\n\t\t\tneedsErrorFeedback,\n\t\t\tvalue,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\t'data-test-id': testId = 'compact-text-field',\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [isActive, setIsActive] = useState(\n\t\t\t(typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0,\n\t\t);\n\n\t\tconst isActiveState = isActive || needsErrorFeedback;\n\n\t\tconst classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);\n\n\t\tconst placeholder = isActiveState ? '' : label;\n\n\t\tconst handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n\t\t\tsetIsActive(true);\n\t\t\tif (onFocus) {\n\t\t\t\tonFocus(event);\n\t\t\t}\n\t\t};\n\n\t\tconst handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n\t\t\tconst value = event.target.value || '';\n\t\t\tsetIsActive(value.trim().length !== 0);\n\t\t\tif (onBlur) {\n\t\t\t\tonBlur(event);\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<div className={classes} data-test-id={testId}>\n\t\t\t\t<Label htmlFor={id}>{label}</Label>\n\t\t\t\t<TextField\n\t\t\t\t\t{...rest}\n\t\t\t\t\tid={id}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tref={ref}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n","import type { ComponentProps } from 'react';\nimport type { FieldPath } from './utils';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = ComponentProps<'span'> & {\n\tname: FieldPath;\n\terrorMessage?: string;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `FieldError` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs\n */\nconst FieldError = ({\n\tname,\n\terrorMessage,\n\tclassName,\n\t'data-test-id': testId = 'field-error',\n\t...rest\n}: FieldErrorProps) => {\n\tif (!errorMessage) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: ignore\n\t\t<span\n\t\t\t{...rest}\n\t\t\tclassName={cx(styles.fieldError, className)}\n\t\t\taria-live=\"polite\"\n\t\t\tdata-test-id={testId}\n\t\t\taria-label=\"Error\"\n\t\t\tid={createFieldErrorId(name)}\n\t\t>\n\t\t\t<Icon name=\"alert-rhombus\" size=\"small\" /> {errorMessage}\n\t\t</span>\n\t);\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FieldSetProps = ComponentProps<'fieldset'> & {\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `FieldGroup` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs\n */\nconst FieldSet = ({\n\tchildren,\n\tclassName,\n\t'data-test-id': testId = 'field-set',\n\t...rest\n}: FieldSetProps) => {\n\tconst classes = cx(styles.fieldSet, className);\n\n\treturn (\n\t\t<fieldset data-test-id={testId} className={classes} {...rest}>\n\t\t\t{children}\n\t\t</fieldset>\n\t);\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormProps = ComponentProps<'form'> & {\n\tinline?: boolean;\n\t// Increases margin between form fields to make room for error messages.\n\t// This prevents the form from shifting when rendering a field error.\n\t// This may be desired when the form contains external links that will\n\t// shift while clicking if the form shifts from validation.\n\thasIncreasedErrorMargin?: boolean;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Form` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-form--docs\n */\nconst Form = (props: FormProps) => {\n\tconst {\n\t\tclassName,\n\t\tinline,\n\t\tchildren,\n\t\thasIncreasedErrorMargin,\n\t\t'data-test-id': testId = 'form',\n\t\t...rest\n\t} = props;\n\n\tconst classes = cx(\n\t\tstyles.form,\n\t\tclassName,\n\t\tinline && styles.formInline,\n\t\t!!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin,\n\t);\n\n\treturn (\n\t\t<form {...rest} data-test-id={testId} className={classes}>\n\t\t\t{children}\n\t\t</form>\n\t);\n};\n\nexport { Form };\nexport type { FormProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormGroupProps = ComponentProps<'fieldset'> & {\n\tname?: string | string[];\n\tignoreValidation?: boolean;\n\tisInvalid?: boolean;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `FieldGroup` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs\n */\nconst FormGroup = (props: FormGroupProps) => {\n\tconst {\n\t\tclassName,\n\t\t// biome-ignore lint/correctness/noUnusedVariables: ignore\n\t\tname,\n\t\tignoreValidation,\n\t\tisInvalid,\n\t\tchildren,\n\t\t'data-test-id': testId = 'form-group',\n\t\t...rest\n\t} = props;\n\n\tconst classes = cx(\n\t\tstyles.formGroup,\n\t\tclassName,\n\t\t!ignoreValidation && isInvalid && styles.isInvalid,\n\t);\n\n\treturn (\n\t\t<fieldset className={classes} data-test-id={testId} {...rest}>\n\t\t\t{children}\n\t\t</fieldset>\n\t);\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormHintProps = ComponentProps<'div'> & {\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Text` with `[slot='description']` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs\n */\nconst FormHint = ({\n\tclassName,\n\tchildren,\n\t'data-test-id': testId = 'form-hint',\n\t...rest\n}: FormHintProps) => {\n\tconst classes = cx(styles.hint, className);\n\n\treturn (\n\t\t<div {...rest} data-test-id={testId} className={classes}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n","import type { JSX } from 'react';\nimport type { FieldErrorProps } from './FieldError';\nimport type { FormHintProps } from './FormHint';\nimport type { LabelProps } from './Label';\n\nimport { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype FormFieldProps = {\n\tisRequired: boolean;\n\tlabel?: string;\n\tname: string;\n\thtmlFor: string;\n\thint?: string;\n\terrorMessage?: string;\n\tignoreValidation?: boolean;\n\tisInvalid?: boolean;\n\tchildren: JSX.Element;\n\tclassName?: string;\n\tonBlur?: (field: string) => void;\n\t'data-test-id'?: string;\n\tLabelProps?: Partial<LabelProps>;\n\tFormHintProps?: Partial<FormHintProps>;\n\tFieldErrorProps?: Partial<FieldErrorProps>;\n};\n\n/**\n * @deprecated use form elements from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs\n */\nconst FormField = ({\n\tisRequired,\n\tlabel,\n\tname,\n\thtmlFor,\n\thint,\n\terrorMessage,\n\tignoreValidation,\n\tisInvalid,\n\tchildren,\n\tclassName,\n\tonBlur,\n\t'data-test-id': testId = 'form-field',\n\tLabelProps = {},\n\tFormHintProps = {},\n\tFieldErrorProps = {},\n}: FormFieldProps) => {\n\tconst handleBlur = () => {\n\t\tonBlur?.(name);\n\t};\n\n\treturn (\n\t\t<FormGroup\n\t\t\tclassName={cx(styles.field, className)}\n\t\t\tname={name}\n\t\t\tignoreValidation={ignoreValidation}\n\t\t\tisInvalid={isInvalid}\n\t\t\tonBlur={handleBlur}\n\t\t\tdata-test-id={testId}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<Label htmlFor={htmlFor} required={isRequired} {...LabelProps}>\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t)}\n\t\t\t{hint && (\n\t\t\t\t<FormHint className={styles.hint} {...FormHintProps}>\n\t\t\t\t\t{hint}\n\t\t\t\t</FormHint>\n\t\t\t)}\n\t\t\t{children}\n\t\t\t<FieldError\n\t\t\t\tclassName={styles.fieldErrorMessage}\n\t\t\t\tname={name}\n\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t{...FieldErrorProps}\n\t\t\t/>\n\t\t</FormGroup>\n\t);\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n","import type { IconProps } from '@launchpad-ui/icons';\nimport type { ComponentProps, JSX, ReactElement } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { cx } from 'classix';\nimport { cloneElement } from 'react';\n\nimport styles from './styles/Form.module.css';\n\ntype IconFieldProps = ComponentProps<'div'> & {\n\ticon: ReactElement<IconProps>;\n\tchildren: JSX.Element | JSX.Element[];\n\t'data-test-id'?: string;\n\ttooltip?: string | JSX.Element;\n\trenderIconLast?: boolean;\n\tariaLabel?: string;\n};\n\n/**\n * @deprecated use `Group` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-content-group--docs\n */\nconst IconField = ({\n\ticon,\n\tchildren,\n\tclassName,\n\t'data-test-id': testId = 'icon-field',\n\ttooltip,\n\trenderIconLast = false,\n\tariaLabel = 'More info',\n\t...rest\n}: IconFieldProps) => {\n\tconst iconElement = cloneElement(icon, {\n\t\tsize: 'small',\n\t\tclassName: cx(styles.iconFieldIcon, styles.iconFieldIconFill),\n\t});\n\n\tconst classes = cx(styles.iconField, renderIconLast ? 'IconAfter' : 'IconBefore', className);\n\n\tconst renderIcon = tooltip ? (\n\t\t<Tooltip content={tooltip} targetClassName={styles.iconFieldButton}>\n\t\t\t<IconButton\n\t\t\t\ticon={cloneElement(icon, {\n\t\t\t\t\tclassName: styles.iconFieldIconFill,\n\t\t\t\t})}\n\t\t\t\tsize=\"small\"\n\t\t\t\tclassName={styles.iconFieldIcon}\n\t\t\t\tstyle={renderIconLast ? { right: '0.313rem' } : { left: '0.313rem' }}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t/>\n\t\t</Tooltip>\n\t) : (\n\t\ticonElement\n\t);\n\n\treturn (\n\t\t<div className={classes} data-test-id={testId} {...rest}>\n\t\t\t{!renderIconLast && renderIcon}\n\t\t\t{children}\n\t\t\t{renderIconLast && renderIcon}\n\t\t</div>\n\t);\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n","import type { ComponentProps, CSSProperties } from 'react';\n\nimport { cx } from 'classix';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype RadioProps = Omit<ComponentProps<'input'>, 'type'> & {\n\tlabelClassName?: string;\n\tlabelStyle?: CSSProperties;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `RadioGroup` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs\n */\nconst Radio = ({\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\tchecked = false,\n\tchildren,\n\tclassName,\n\tdisabled = false,\n\tid,\n\tlabelClassName,\n\tlabelStyle,\n\t'data-test-id': testId = 'radio',\n\t...rest\n}: RadioProps) => {\n\tconst hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n\tif (!children && !hasAriaLabel) {\n\t\tconsole.warn(\n\t\t\t'If you do not provide children, you must specify an aria-label for accessibility',\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<input\n\t\t\t\t{...rest}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\taria-labelledby={ariaLabelledby}\n\t\t\t\tclassName={cx(styles.radio, className)}\n\t\t\t\tchecked={checked}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tid={id}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\ttype=\"radio\"\n\t\t\t/>\n\t\t\t<Label className={labelClassName} htmlFor={id} style={labelStyle}>\n\t\t\t\t{disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n\t\t\t</Label>\n\t\t</>\n\t);\n};\n\nexport { Radio };\nexport type { RadioProps };\n","import type { ChangeEvent, FormEvent, ReactElement, ReactNode } from 'react';\n\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\n\ntype RadioGroupProps = {\n\t/**\n\t * The legend that describes this groups of radio buttons. The legend\n\t * is important for screen reader users.\n\t */\n\tlegend?: string;\n\t/**\n\t * The children passed into the RadioGroup.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Custom classname(s) passed to the fieldset inner div.\n\t */\n\tclassName?: string;\n\t/**\n\t * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * The RadioGroup's id.\n\t */\n\tid?: string;\n\t/**\n\t * 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\t */\n\tname: string;\n\t/**\n\t * This function is passed into each Radio onChange synthetic event handler.\n\t */\n\tonChange?(e: ChangeEvent | FormEvent<HTMLInputElement>): void;\n\t/**\n\t * The value to compare against the Radio's value to determine if the Radio will be checked.\n\t */\n\tvalue: string;\n\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `RadioGroup` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs\n */\nconst RadioGroup = (props: RadioGroupProps) => {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tonChange,\n\t\tchildren,\n\t\tdisabled,\n\t\tlegend,\n\t\t'data-test-id': testId = 'radio-group',\n\t\t...rest\n\t} = props;\n\tconst fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n\tfunction updateRadioElems(elem: ReactNode): ReactNode {\n\t\tif (!isValidElement(elem)) {\n\t\t\treturn elem;\n\t\t}\n\n\t\t// biome-ignore lint/suspicious/noExplicitAny: ignore\n\t\tconst item = elem as ReactElement<any>;\n\n\t\tif (item?.type && item.type === Radio) {\n\t\t\treturn cloneElement(item, {\n\t\t\t\t...item.props,\n\t\t\t\tname,\n\t\t\t\tchecked: item.props.value === value,\n\t\t\t\tonChange,\n\t\t\t\tdisabled: typeof item.props?.disabled !== 'undefined' ? item.props.disabled : disabled,\n\t\t\t});\n\t\t}\n\n\t\tif (item?.type && item.type === Label) {\n\t\t\treturn cloneElement(item, {\n\t\t\t\t...item.props,\n\t\t\t\tonChange,\n\t\t\t\tdisabled,\n\t\t\t});\n\t\t}\n\n\t\tconst elemChildren = item?.props?.children;\n\t\tif (elemChildren) {\n\t\t\tif (Array.isArray(elemChildren)) {\n\t\t\t\treturn cloneElement(item, {\n\t\t\t\t\tchildren: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn cloneElement(item, {\n\t\t\t\tchildren: updateRadioElems(elemChildren),\n\t\t\t});\n\t\t}\n\n\t\tif (item?.type && item.type !== Radio && item.type !== Label) {\n\t\t\treturn item;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tconst radios = Children.map(children, (child) => updateRadioElems(child));\n\treturn (\n\t\t<fieldset data-test-id={testId} ref={fieldsetRef}>\n\t\t\t{legend && (\n\t\t\t\t<legend>\n\t\t\t\t\t<VisuallyHidden>{legend}</VisuallyHidden>\n\t\t\t\t</legend>\n\t\t\t)}\n\t\t\t<div {...rest}>{radios}</div>\n\t\t</fieldset>\n\t);\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\n\ntype SelectFieldProps = ComponentProps<'select'> & {\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Select` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-pickers-select--docs\n */\nconst SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(\n\t({ className, children, 'data-test-id': testId = 'select', ...rest }: SelectFieldProps, ref) => {\n\t\tconst classes = cx(styles.formInput, className);\n\n\t\treturn (\n\t\t\t<select {...rest} data-test-id={testId} className={classes} ref={ref}>\n\t\t\t\t{children}\n\t\t\t</select>\n\t\t);\n\t},\n);\n\nSelectField.displayName = 'SelectField';\n\nexport { SelectField };\nexport type { SelectFieldProps };\n","import type { ComponentProps, KeyboardEvent } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = ComponentProps<'textarea'> & {\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `TextArea` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs#multi%20line\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n\t({ className, 'data-test-id': testId = 'text-area', ...props }, ref) => {\n\t\tconst onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\tif (\n\t\t\t\te.key === 'ArrowRight' ||\n\t\t\t\te.key === 'ArrowDown' ||\n\t\t\t\te.key === 'ArrowUp' ||\n\t\t\t\te.key === 'ArrowLeft'\n\t\t\t) {\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\te.nativeEvent.stopImmediatePropagation();\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\t{...props}\n\t\t\t\tclassName={cx(styles.formInput, className)}\n\t\t\t\tref={ref}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\taria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n","import type { AriaButtonProps } from '@react-aria/button';\nimport type { AriaNumberFieldProps } from '@react-aria/numberfield';\nimport type { JSX } from 'react';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { useButton } from '@react-aria/button';\nimport { useLocale } from '@react-aria/i18n';\nimport { useNumberField as useReactAriaNumberField } from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport { cx } from 'classix';\nimport { useRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { useObjectMemo } from './utils';\n\ntype UseNumberFieldProps = AriaNumberFieldProps & {\n\tclassName?: string;\n\t'data-test-id'?: string;\n\tid?: string;\n\tname?: string;\n};\n\nconst defaultFormatOptions: Intl.NumberFormatOptions = {\n\tmaximumFractionDigits: 6,\n};\n\n/**\n * @deprecated use `NumberField` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-forms-numberfield--docs\n */\nconst useNumberField = ({\n\tclassName,\n\t'data-test-id': testId = 'input',\n\tid,\n\tname,\n\t...otherProps\n}: UseNumberFieldProps = {}): {\n\tfieldErrorProps: ReturnType<typeof useReactAriaNumberField>['errorMessageProps'];\n\tformHintProps: ReturnType<typeof useReactAriaNumberField>['descriptionProps'];\n\tlabelProps: ReturnType<typeof useReactAriaNumberField>['labelProps'];\n\trenderNumberField: () => JSX.Element;\n} => {\n\t// @react-aria's hooks have a state-updating effect somewhere that depends on \"formatOptions\",\n\t// so we need to memoize it to prevent an infinite render loop.\n\tconst formatOptions = useObjectMemo({\n\t\t...defaultFormatOptions,\n\t\t...otherProps.formatOptions,\n\t});\n\tconst { locale } = useLocale();\n\tconst numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst {\n\t\tdescriptionProps: formHintProps,\n\t\terrorMessageProps: fieldErrorProps,\n\t\tlabelProps,\n\t\tgroupProps,\n\t\tinputProps,\n\t\tincrementButtonProps,\n\t\tdecrementButtonProps,\n\t} = useReactAriaNumberField({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);\n\n\treturn {\n\t\tfieldErrorProps,\n\t\tformHintProps,\n\t\tlabelProps,\n\t\trenderNumberField: () => (\n\t\t\t<div {...groupProps} className={styles.numberField}>\n\t\t\t\t<input\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\tclassName={cx(styles.formInput, styles['numberField-input'])}\n\t\t\t\t\tdata-test-id={testId}\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t/>\n\t\t\t\t<div className={styles['numberField-stepperContainer']}>\n\t\t\t\t\t<Stepper {...incrementButtonProps}>\n\t\t\t\t\t\t<Icon name=\"chevron-up\" />\n\t\t\t\t\t</Stepper>\n\t\t\t\t\t<Stepper {...decrementButtonProps}>\n\t\t\t\t\t\t<Icon name=\"chevron-down\" />\n\t\t\t\t\t</Stepper>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t),\n\t};\n};\n\nconst Stepper = (props: AriaButtonProps) => {\n\tconst buttonRef = useRef<HTMLButtonElement>(null);\n\tconst { buttonProps } = useButton(props, buttonRef);\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t{...buttonProps}\n\t\t\tclassName={styles['numberField-stepper']}\n\t\t\tref={buttonRef}\n\t\t>\n\t\t\t{props.children}\n\t\t</button>\n\t);\n};\n\nexport { useNumberField };\nexport type { UseNumberFieldProps };\n"],"mappings":"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"}