@gnist/design-system 6.0.0-alpha.3 → 6.1.0

package/dist/utilities/forms/formHelpers.js

@@ -1,54 +1,65 @@
 "use client";
-import { produce } from "immer";
-import { useCallback } from "react";
 import { useLanguage } from "../../translations/LocalizationProvider.js";
-import "../validation/validators.js";
 import { getValidationMessage } from "../validation/validation.js";
+import "../validation/index.js";
+import { useCallback } from "react";
+import { produce } from "immer";
+//#region src/utilities/forms/formHelpers.ts
+/**
+* Hook for getting utilities like `inputProps('myFormField')` for handling form logic
+* @param form The form state
+* @param setField Setter for updating a field
+* @param setBlurred Setter for updating a field's blur state
+* @returns A {@link FormHelpers} object for easily setting up the correct values for each field in the view
+*/
 function useFormHelpers(form, validators, setField, setBlurred) {
-  const lang = useLanguage();
-  const setValue = useCallback((field) => (value) => setField([field, value]), [setField]);
-  return {
-    setValue,
-    inputProps: (field) => ({
-      value: form.raw[field],
-      setValue: setValue(field),
-      ...form.showError[field] && !form.validation[field]?.isValid && {
-        validity: {
-          type: "error",
-          message: getValidationMessage(form.validation[field], validators[field].messagePrefix, lang)
-        }
-      },
-      onBlur: () => setBlurred(field)
-    })
-  };
+	const lang = useLanguage();
+	const setValue = useCallback((field) => (value) => setField([field, value]), [setField]);
+	return {
+		setValue,
+		inputProps: (field) => ({
+			value: form.raw[field],
+			setValue: setValue(field),
+			...form.showError[field] && !form.validation[field]?.isValid && { validity: {
+				type: "error",
+				message: getValidationMessage(form.validation[field], validators[field].messagePrefix, lang)
+			} },
+			onBlur: () => setBlurred(field)
+		})
+	};
 }
-const makePropertySetter = (formValidator) => (state, [property, value]) => {
-  const raw = produce(state.raw, (draft) => {
-    draft[property] = value;
-  });
-  const result = formValidator(raw);
-  const showError = produce(state.showError, (draft) => {
-    if (result.validation[property]?.showMessageImmediately) {
-      draft[property] = true;
-    } else {
-      draft[property] = false;
-    }
-  });
-  return {
-    ...state,
-    ...result,
-    raw,
-    showError
-  };
+/**
+* Function for creating a "property setter", which sets properties in a form object.
+* Ensures validation state is updated.
+*
+* @param formValidator Validation function for the form object
+* @returns Function for setting individual properties in a form object
+*/
+var makePropertySetter = (formValidator) => (state, [property, value]) => {
+	const raw = produce(state.raw, (draft) => {
+		draft[property] = value;
+	});
+	const result = formValidator(raw);
+	const showError = produce(state.showError, (draft) => {
+		if (result.validation[property]?.showMessageImmediately) draft[property] = true;
+		else draft[property] = false;
+	});
+	return {
+		...state,
+		...result,
+		raw,
+		showError
+	};
 };
-const makeBlurSetter = () => (state, property) => produce(state, (draft) => {
-  const rawValue = draft.raw[property];
-  if (typeof rawValue === "string" && rawValue.length >= 1 || typeof rawValue !== "string" && rawValue !== void 0) {
-    draft.showError[property] = true;
-  }
+/**
+* Function for creating an "onBlur" function, which sets the blur state for properties in a form object.
+* Ensures validation is shown, if necessary, when the user leaves a form field.
+*
+* @returns Function for usage "onBlur" on individual form fields
+*/
+var makeBlurSetter = () => (state, property) => produce(state, (draft) => {
+	const rawValue = draft.raw[property];
+	if (typeof rawValue === "string" && rawValue.length >= 1 || typeof rawValue !== "string" && rawValue !== void 0) draft.showError[property] = true;
 });
-export {
-  makeBlurSetter,
-  makePropertySetter,
-  useFormHelpers
-};
+//#endregion
+export { makeBlurSetter, makePropertySetter, useFormHelpers };

package/dist/utilities/forms/formInputs.cjs

@@ -1,21 +1,20 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components = require("./internal/components.cjs");
+const require_components = require("./internal/components.cjs");
+//#region src/utilities/forms/formInputs.tsx
+/**
+* Given a form type, returns input components for use with that form
+* @template _T The form type
+* @returns specialized input components where a `field` prop is required and must be one of the property names in `_T`
+*/
 function formInputs() {
-  const TextField = components.FormTextField;
-  const TextArea = components.FormTextArea;
-  const Checkbox = components.FormCheckbox;
-  const SingleSelect = components.FormSingleSelect;
-  const MultiSelect = components.FormMultiSelect;
-  const RadioGroup = components.FormRadioGroup;
-  return {
-    TextField,
-    TextArea,
-    Checkbox,
-    SingleSelect,
-    MultiSelect,
-    RadioGroup
-  };
+	return {
+		TextField: require_components.FormTextField,
+		TextArea: require_components.FormTextArea,
+		Checkbox: require_components.FormCheckbox,
+		SingleSelect: require_components.FormSingleSelect,
+		MultiSelect: require_components.FormMultiSelect,
+		RadioGroup: require_components.FormRadioGroup
+	};
 }
+//#endregion
 exports.formInputs = formInputs;

package/dist/utilities/forms/formInputs.js

@@ -1,21 +1,20 @@
 "use client";
-import { FormRadioGroup, FormMultiSelect, FormSingleSelect, FormCheckbox, FormTextArea, FormTextField } from "./internal/components.js";
+import { FormCheckbox, FormMultiSelect, FormRadioGroup, FormSingleSelect, FormTextArea, FormTextField } from "./internal/components.js";
+//#region src/utilities/forms/formInputs.tsx
+/**
+* Given a form type, returns input components for use with that form
+* @template _T The form type
+* @returns specialized input components where a `field` prop is required and must be one of the property names in `_T`
+*/
 function formInputs() {
-  const TextField = FormTextField;
-  const TextArea = FormTextArea;
-  const Checkbox = FormCheckbox;
-  const SingleSelect = FormSingleSelect;
-  const MultiSelect = FormMultiSelect;
-  const RadioGroup = FormRadioGroup;
-  return {
-    TextField,
-    TextArea,
-    Checkbox,
-    SingleSelect,
-    MultiSelect,
-    RadioGroup
-  };
+	return {
+		TextField: FormTextField,
+		TextArea: FormTextArea,
+		Checkbox: FormCheckbox,
+		SingleSelect: FormSingleSelect,
+		MultiSelect: FormMultiSelect,
+		RadioGroup: FormRadioGroup
+	};
 }
-export {
-  formInputs
-};
+//#endregion
+export { formInputs };

package/dist/utilities/forms/index.cjs

@@ -1,10 +1,9 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const formContext = require("./formContext.cjs");
-const formInputs = require("./formInputs.cjs");
-const useLocalFormState = require("./useLocalFormState.cjs");
-exports.FormProvider = formContext.FormProvider;
-exports.useForm = formContext.useForm;
-exports.formInputs = formInputs.formInputs;
-exports.useLocalFormState = useLocalFormState.useLocalFormState;
+const require_formContext = require("./formContext.cjs");
+const require_formInputs = require("./formInputs.cjs");
+const require_useLocalFormState = require("./useLocalFormState.cjs");
+exports.FormProvider = require_formContext.FormProvider;
+exports.formInputs = require_formInputs.formInputs;
+exports.useForm = require_formContext.useForm;
+exports.useLocalFormState = require_useLocalFormState.useLocalFormState;

package/dist/utilities/forms/index.js

@@ -2,9 +2,4 @@
 import { FormProvider, useForm } from "./formContext.js";
 import { formInputs } from "./formInputs.js";
 import { useLocalFormState } from "./useLocalFormState.js";
-export {
-  FormProvider,
-  formInputs,
-  useForm,
-  useLocalFormState
-};
+export { FormProvider, formInputs, useForm, useLocalFormState };

package/dist/utilities/forms/internal/components.cjs

@@ -1,91 +1,83 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const MultiSelect = require("../../../components/inputs/dropdowns/MultiSelect.cjs");
-const SingleSelect = require("../../../components/inputs/dropdowns/SingleSelect.cjs");
-const Checkbox = require("../../../components/actions/selectionControls/Checkbox.cjs");
-const TextArea = require("../../../components/inputs/textFields/TextArea.cjs");
-const TextField = require("../../../components/inputs/textFields/TextField.cjs");
-const LocalizationProvider = require("../../../translations/LocalizationProvider.cjs");
-require("../../validation/validators.cjs");
-const validation = require("../../validation/validation.cjs");
-const formContext = require("../formContext.cjs");
-const useFormProps = require("../useFormProps.cjs");
-const RadioGroup = require("../../../components/actions/selectionControls/RadioGroup.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Checkbox = require("../../../components/actions/selectionControls/Checkbox.cjs");
+const require_RadioGroup = require("../../../components/actions/selectionControls/RadioGroup.cjs");
+const require_LocalizationProvider = require("../../../translations/LocalizationProvider.cjs");
+const require_MultiSelect = require("../../../components/inputs/dropdowns/MultiSelect.cjs");
+const require_SingleSelect = require("../../../components/inputs/dropdowns/SingleSelect.cjs");
+const require_TextArea = require("../../../components/inputs/textFields/TextArea.cjs");
+const require_TextField = require("../../../components/inputs/textFields/TextField.cjs");
+const require_formContext = require("../formContext.cjs");
+const require_validation = require("../../validation/validation.cjs");
+require("../../validation/index.cjs");
+const require_useFormProps = require("../useFormProps.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/utilities/forms/internal/components.tsx
 function FormTextField(originalProps) {
-  const props = useFormProps.useFormProps(originalProps, (event) => event.target.value);
-  return jsxRuntime.jsx(TextField.TextField, { ...props });
+	return (0, react_jsx_runtime.jsx)(require_TextField.TextField, { ...require_useFormProps.useFormProps(originalProps, (event) => event.target.value) });
 }
 function FormTextArea(originalProps) {
-  const props = useFormProps.useFormProps(originalProps, (event) => event.target.value);
-  return jsxRuntime.jsx(TextArea.TextArea, { ...props });
+	return (0, react_jsx_runtime.jsx)(require_TextArea.TextArea, { ...require_useFormProps.useFormProps(originalProps, (event) => event.target.value) });
 }
 function FormCheckbox(originalProps) {
-  const props = useFormProps.useFormProps(originalProps, (event) => event.target.checked);
-  return jsxRuntime.jsx(Checkbox.Checkbox, { ...props, canShowErrorMessage: true });
+	return (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
+		...require_useFormProps.useFormProps(originalProps, (event) => event.target.checked),
+		canShowErrorMessage: true
+	});
 }
 function FormSingleSelect(originalProps) {
-  const formCtx = formContext.useForm();
-  if (!formCtx) {
-    throw new Error("FormSingleSelect must be used inside a <FormProvider />");
-  }
-  const lang = LocalizationProvider.useLanguage();
-  const { id: formId, form } = formCtx;
-  const formProps = form.inputProps(originalProps.field);
-  const props = {
-    ...originalProps,
-    id: `${formId}_${String(originalProps.field)}`,
-    helperText: validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
-    onChange: (value) => {
-      originalProps.onChange?.(value);
-      formProps.setValue(value);
-    },
-    value: formProps.value,
-    validity: formProps.validity ?? originalProps.validity
-  };
-  return jsxRuntime.jsx(SingleSelect.SingleSelect, { ...props });
+	const formCtx = require_formContext.useForm();
+	if (!formCtx) throw new Error("FormSingleSelect must be used inside a <FormProvider />");
+	const lang = require_LocalizationProvider.useLanguage();
+	const { id: formId, form } = formCtx;
+	const formProps = form.inputProps(originalProps.field);
+	return (0, react_jsx_runtime.jsx)(require_SingleSelect.SingleSelect, {
+		...originalProps,
+		id: `${formId}_${String(originalProps.field)}`,
+		helperText: require_validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+		onChange: (value) => {
+			originalProps.onChange?.(value);
+			formProps.setValue(value);
+		},
+		value: formProps.value,
+		validity: formProps.validity ?? originalProps.validity
+	});
 }
 function FormMultiSelect(originalProps) {
-  const formCtx = formContext.useForm();
-  if (!formCtx) {
-    throw new Error("FormMultiSelect must be used inside a <FormProvider />");
-  }
-  const lang = LocalizationProvider.useLanguage();
-  const { id: formId, form } = formCtx;
-  const formProps = form.inputProps(originalProps.field);
-  const props = {
-    ...originalProps,
-    id: `${formId}_${String(originalProps.field)}`,
-    helperText: validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
-    onChange: (value) => {
-      originalProps.onChange?.(value);
-      formProps.setValue(value);
-    },
-    value: formProps.value,
-    validity: formProps.validity ?? originalProps.validity
-  };
-  return jsxRuntime.jsx(MultiSelect.MultiSelect, { ...props });
+	const formCtx = require_formContext.useForm();
+	if (!formCtx) throw new Error("FormMultiSelect must be used inside a <FormProvider />");
+	const lang = require_LocalizationProvider.useLanguage();
+	const { id: formId, form } = formCtx;
+	const formProps = form.inputProps(originalProps.field);
+	return (0, react_jsx_runtime.jsx)(require_MultiSelect.MultiSelect, {
+		...originalProps,
+		id: `${formId}_${String(originalProps.field)}`,
+		helperText: require_validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+		onChange: (value) => {
+			originalProps.onChange?.(value);
+			formProps.setValue(value);
+		},
+		value: formProps.value,
+		validity: formProps.validity ?? originalProps.validity
+	});
 }
 function FormRadioGroup(originalProps) {
-  const formCtx = formContext.useForm();
-  if (!formCtx) {
-    throw new Error("FormRadioGroup must be used inside a <FormProvider />");
-  }
-  const { id: formId, form } = formCtx;
-  const formProps = form.inputProps(originalProps.field);
-  const props = {
-    ...originalProps,
-    name: `${formId}_${String(originalProps.field)}`,
-    onChange: (value) => {
-      originalProps.onChange?.(value);
-      formProps.setValue(value);
-    },
-    value: formProps.value,
-    validity: formProps.validity ?? originalProps.validity
-  };
-  return jsxRuntime.jsx(RadioGroup.RadioGroup, { ...props });
+	const formCtx = require_formContext.useForm();
+	if (!formCtx) throw new Error("FormRadioGroup must be used inside a <FormProvider />");
+	const { id: formId, form } = formCtx;
+	const formProps = form.inputProps(originalProps.field);
+	return (0, react_jsx_runtime.jsx)(require_RadioGroup.RadioGroup, {
+		...originalProps,
+		name: `${formId}_${String(originalProps.field)}`,
+		onChange: (value) => {
+			originalProps.onChange?.(value);
+			formProps.setValue(value);
+		},
+		value: formProps.value,
+		validity: formProps.validity ?? originalProps.validity
+	});
 }
+//#endregion
 exports.FormCheckbox = FormCheckbox;
 exports.FormMultiSelect = FormMultiSelect;
 exports.FormRadioGroup = FormRadioGroup;

package/dist/utilities/forms/internal/components.js

@@ -1,94 +1,80 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "../../../components/actions/selectionControls/Checkbox.js";
+import { RadioGroup } from "../../../components/actions/selectionControls/RadioGroup.js";
+import { useLanguage } from "../../../translations/LocalizationProvider.js";
 import { MultiSelect } from "../../../components/inputs/dropdowns/MultiSelect.js";
 import { SingleSelect } from "../../../components/inputs/dropdowns/SingleSelect.js";
-import { Checkbox } from "../../../components/actions/selectionControls/Checkbox.js";
 import { TextArea } from "../../../components/inputs/textFields/TextArea.js";
 import { TextField } from "../../../components/inputs/textFields/TextField.js";
-import { useLanguage } from "../../../translations/LocalizationProvider.js";
-import "../../validation/validators.js";
-import { addNecessityIndicator } from "../../validation/validation.js";
 import { useForm } from "../formContext.js";
+import { addNecessityIndicator } from "../../validation/validation.js";
+import "../../validation/index.js";
 import { useFormProps } from "../useFormProps.js";
-import { RadioGroup } from "../../../components/actions/selectionControls/RadioGroup.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/utilities/forms/internal/components.tsx
 function FormTextField(originalProps) {
-  const props = useFormProps(originalProps, (event) => event.target.value);
-  return jsx(TextField, { ...props });
+	return jsx(TextField, { ...useFormProps(originalProps, (event) => event.target.value) });
 }
 function FormTextArea(originalProps) {
-  const props = useFormProps(originalProps, (event) => event.target.value);
-  return jsx(TextArea, { ...props });
+	return jsx(TextArea, { ...useFormProps(originalProps, (event) => event.target.value) });
 }
 function FormCheckbox(originalProps) {
-  const props = useFormProps(originalProps, (event) => event.target.checked);
-  return jsx(Checkbox, { ...props, canShowErrorMessage: true });
+	return jsx(Checkbox, {
+		...useFormProps(originalProps, (event) => event.target.checked),
+		canShowErrorMessage: true
+	});
 }
 function FormSingleSelect(originalProps) {
-  const formCtx = useForm();
-  if (!formCtx) {
-    throw new Error("FormSingleSelect must be used inside a <FormProvider />");
-  }
-  const lang = useLanguage();
-  const { id: formId, form } = formCtx;
-  const formProps = form.inputProps(originalProps.field);
-  const props = {
-    ...originalProps,
-    id: `${formId}_${String(originalProps.field)}`,
-    helperText: addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
-    onChange: (value) => {
-      originalProps.onChange?.(value);
-      formProps.setValue(value);
-    },
-    value: formProps.value,
-    validity: formProps.validity ?? originalProps.validity
-  };
-  return jsx(SingleSelect, { ...props });
+	const formCtx = useForm();
+	if (!formCtx) throw new Error("FormSingleSelect must be used inside a <FormProvider />");
+	const lang = useLanguage();
+	const { id: formId, form } = formCtx;
+	const formProps = form.inputProps(originalProps.field);
+	return jsx(SingleSelect, {
+		...originalProps,
+		id: `${formId}_${String(originalProps.field)}`,
+		helperText: addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+		onChange: (value) => {
+			originalProps.onChange?.(value);
+			formProps.setValue(value);
+		},
+		value: formProps.value,
+		validity: formProps.validity ?? originalProps.validity
+	});
 }
 function FormMultiSelect(originalProps) {
-  const formCtx = useForm();
-  if (!formCtx) {
-    throw new Error("FormMultiSelect must be used inside a <FormProvider />");
-  }
-  const lang = useLanguage();
-  const { id: formId, form } = formCtx;
-  const formProps = form.inputProps(originalProps.field);
-  const props = {
-    ...originalProps,
-    id: `${formId}_${String(originalProps.field)}`,
-    helperText: addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
-    onChange: (value) => {
-      originalProps.onChange?.(value);
-      formProps.setValue(value);
-    },
-    value: formProps.value,
-    validity: formProps.validity ?? originalProps.validity
-  };
-  return jsx(MultiSelect, { ...props });
+	const formCtx = useForm();
+	if (!formCtx) throw new Error("FormMultiSelect must be used inside a <FormProvider />");
+	const lang = useLanguage();
+	const { id: formId, form } = formCtx;
+	const formProps = form.inputProps(originalProps.field);
+	return jsx(MultiSelect, {
+		...originalProps,
+		id: `${formId}_${String(originalProps.field)}`,
+		helperText: addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+		onChange: (value) => {
+			originalProps.onChange?.(value);
+			formProps.setValue(value);
+		},
+		value: formProps.value,
+		validity: formProps.validity ?? originalProps.validity
+	});
 }
 function FormRadioGroup(originalProps) {
-  const formCtx = useForm();
-  if (!formCtx) {
-    throw new Error("FormRadioGroup must be used inside a <FormProvider />");
-  }
-  const { id: formId, form } = formCtx;
-  const formProps = form.inputProps(originalProps.field);
-  const props = {
-    ...originalProps,
-    name: `${formId}_${String(originalProps.field)}`,
-    onChange: (value) => {
-      originalProps.onChange?.(value);
-      formProps.setValue(value);
-    },
-    value: formProps.value,
-    validity: formProps.validity ?? originalProps.validity
-  };
-  return jsx(RadioGroup, { ...props });
+	const formCtx = useForm();
+	if (!formCtx) throw new Error("FormRadioGroup must be used inside a <FormProvider />");
+	const { id: formId, form } = formCtx;
+	const formProps = form.inputProps(originalProps.field);
+	return jsx(RadioGroup, {
+		...originalProps,
+		name: `${formId}_${String(originalProps.field)}`,
+		onChange: (value) => {
+			originalProps.onChange?.(value);
+			formProps.setValue(value);
+		},
+		value: formProps.value,
+		validity: formProps.validity ?? originalProps.validity
+	});
 }
-export {
-  FormCheckbox,
-  FormMultiSelect,
-  FormRadioGroup,
-  FormSingleSelect,
-  FormTextArea,
-  FormTextField
-};
+//#endregion
+export { FormCheckbox, FormMultiSelect, FormRadioGroup, FormSingleSelect, FormTextArea, FormTextField };

package/dist/utilities/forms/useFormProps.cjs

@@ -1,32 +1,29 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const LocalizationProvider = require("../../translations/LocalizationProvider.cjs");
-const validation = require("../validation/validation.cjs");
-const formContext = require("./formContext.cjs");
+const require_LocalizationProvider = require("../../translations/LocalizationProvider.cjs");
+const require_formContext = require("./formContext.cjs");
+const require_validation = require("../validation/validation.cjs");
+//#region src/utilities/forms/useFormProps.ts
 function useFormProps(originalProps, getChangedValue) {
-  const lang = LocalizationProvider.useLanguage();
-  const formCtx = formContext.useForm();
-  if (!formCtx || !originalProps.field) {
-    return originalProps;
-  }
-  const { id: formId, form } = formCtx;
-  const formProps = form.inputProps(originalProps.field);
-  const props = formProps ? {
-    ...originalProps,
-    id: originalProps.id ?? `${formId}_${String(originalProps.field)}`,
-    helperText: validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
-    onChange: (event) => {
-      originalProps.onChange?.(event);
-      formProps.setValue(getChangedValue(event));
-    },
-    onBlur: (event) => {
-      originalProps.onBlur?.(event);
-      formProps.onBlur();
-    },
-    value: formProps.value,
-    validity: formProps.validity ?? originalProps.validity
-  } : originalProps;
-  return props;
+	const lang = require_LocalizationProvider.useLanguage();
+	const formCtx = require_formContext.useForm();
+	if (!formCtx || !originalProps.field) return originalProps;
+	const { id: formId, form } = formCtx;
+	const formProps = form.inputProps(originalProps.field);
+	return formProps ? {
+		...originalProps,
+		id: originalProps.id ?? `${formId}_${String(originalProps.field)}`,
+		helperText: require_validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+		onChange: (event) => {
+			originalProps.onChange?.(event);
+			formProps.setValue(getChangedValue(event));
+		},
+		onBlur: (event) => {
+			originalProps.onBlur?.(event);
+			formProps.onBlur();
+		},
+		value: formProps.value,
+		validity: formProps.validity ?? originalProps.validity
+	} : originalProps;
 }
+//#endregion
 exports.useFormProps = useFormProps;