@wix/site-ui 1.30.0 → 1.32.0

package/dist/Field/index.js

@@ -1,7 +1,674 @@
 import { jsx } from "react/jsx-runtime";
-import { Field } from "@base-ui/react/field";
 import clsx from "clsx";
+import { useBaseUiId } from "../6046.js";
+import { useRefWithInit, EMPTY_OBJECT, mergeProps, useRenderElement } from "../8272.js";
+import { LabelableContext, FieldRootContext, useFieldRootContext, useLabelableContext, fieldValidityMapping, DEFAULT_VALIDITY_STATE } from "../1477.js";
+import { useStableCallback } from "../7541.js";
+import { useFormContext } from "../5085.js";
+import { useTimeout } from "../42.js";
+import { useIsoLayoutEffect, SafeReact } from "../6499.js";
+import { useFieldsetRootContext } from "../353.js";
+import { useLabel } from "../4143.js";
+import { error } from "../4026.js";
+import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "../880.js";
+import { useCheckboxGroupContext } from "../8979.js";
+import { FieldItemContext } from "../1457.js";
+import { FieldControl_FieldControl } from "../1268.js";
 import * as __rspack_external_react from "react";
+const LabelableProvider_LabelableProvider = function(props) {
+    const defaultId = useBaseUiId();
+    const initialControlId = void 0 === props.controlId ? defaultId : props.controlId;
+    const [controlId, setControlIdState] = __rspack_external_react.useState(initialControlId);
+    const [labelId, setLabelId] = __rspack_external_react.useState(props.labelId);
+    const [messageIds, setMessageIds] = __rspack_external_react.useState([]);
+    const registrationsRef = useRefWithInit(()=>new Map());
+    const { messageIds: parentMessageIds } = useLabelableContext();
+    const registerControlId = useStableCallback((source, nextId)=>{
+        const registrations = registrationsRef.current;
+        if (void 0 === nextId) return void registrations.delete(source);
+        registrations.set(source, nextId);
+        setControlIdState((prev)=>{
+            if (0 === registrations.size) return;
+            let nextControlId;
+            for (const id of registrations.values()){
+                if (void 0 !== prev && id === prev) return prev;
+                if (void 0 === nextControlId) nextControlId = id;
+            }
+            return nextControlId;
+        });
+    });
+    const getDescriptionProps = __rspack_external_react.useCallback((externalProps)=>mergeProps({
+            'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || void 0
+        }, externalProps), [
+        parentMessageIds,
+        messageIds
+    ]);
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            controlId,
+            registerControlId,
+            labelId,
+            setLabelId,
+            messageIds,
+            setMessageIds,
+            getDescriptionProps
+        }), [
+        controlId,
+        registerControlId,
+        labelId,
+        setLabelId,
+        messageIds,
+        setMessageIds,
+        getDescriptionProps
+    ]);
+    return /*#__PURE__*/ jsx(LabelableContext.Provider, {
+        value: contextValue,
+        children: props.children
+    });
+};
+if ("production" !== process.env.NODE_ENV) LabelableProvider_LabelableProvider.displayName = "LabelableProvider";
+function getCombinedFieldValidityData(validityData, invalid) {
+    return {
+        ...validityData,
+        state: {
+            ...validityData.state,
+            valid: !invalid && validityData.state.valid
+        }
+    };
+}
+const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
+function isOnlyValueMissing(state) {
+    if (!state || state.valid || !state.valueMissing) return false;
+    let onlyValueMissing = false;
+    for (const key of validityKeys)if ('valid' !== key) {
+        if ('valueMissing' === key) onlyValueMissing = state[key];
+        if (state[key]) onlyValueMissing = false;
+    }
+    return onlyValueMissing;
+}
+function useFieldValidation(params) {
+    const { formRef, clearErrors } = useFormContext();
+    const { setValidityData, validate, validityData, validationDebounceTime, invalid, markedDirtyRef, state, name, shouldValidateOnChange, getRegisteredFieldId } = params;
+    const { controlId, getDescriptionProps } = useLabelableContext();
+    const timeout = useTimeout();
+    const inputRef = __rspack_external_react.useRef(null);
+    const commit = useStableCallback(async (value, revalidate = false)=>{
+        const element = inputRef.current;
+        if (!element) return;
+        function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
+            const fieldId = getRegisteredFieldId() ?? controlId;
+            if (null == fieldId) return;
+            const currentFieldData = formRef.current.fields.get(fieldId);
+            if (!currentFieldData) return;
+            const validityDataWithFormErrors = getCombinedFieldValidityData(nextValidityData, externalInvalid);
+            formRef.current.fields.set(fieldId, {
+                ...currentFieldData,
+                validityData: validityDataWithFormErrors
+            });
+        }
+        if (revalidate) {
+            if (false !== state.valid) return;
+            const currentNativeValidity = element.validity;
+            if (!currentNativeValidity.valueMissing) {
+                const nextValidityData = {
+                    value,
+                    state: {
+                        ...DEFAULT_VALIDITY_STATE,
+                        valid: true
+                    },
+                    error: '',
+                    errors: [],
+                    initialValue: validityData.initialValue
+                };
+                element.setCustomValidity('');
+                updateRegisteredFieldValidity(nextValidityData, false);
+                setValidityData(nextValidityData);
+                return;
+            }
+            const currentNativeValidityObject = validityKeys.reduce((acc, key)=>{
+                acc[key] = currentNativeValidity[key];
+                return acc;
+            }, {});
+            if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) return;
+        }
+        function getState(el) {
+            const computedState = validityKeys.reduce((acc, key)=>{
+                acc[key] = el.validity[key];
+                return acc;
+            }, {});
+            let hasOnlyValueMissingError = false;
+            for (const key of validityKeys)if ('valid' !== key) {
+                if ('valueMissing' === key && computedState[key]) hasOnlyValueMissingError = true;
+                else if (computedState[key]) return computedState;
+            }
+            if (hasOnlyValueMissingError && !markedDirtyRef.current) {
+                computedState.valid = true;
+                computedState.valueMissing = false;
+            }
+            return computedState;
+        }
+        timeout.clear();
+        let result = null;
+        let validationErrors = [];
+        const nextState = getState(element);
+        let defaultValidationMessage;
+        const validateOnChange = shouldValidateOnChange();
+        if (element.validationMessage && !validateOnChange) {
+            defaultValidationMessage = element.validationMessage;
+            validationErrors = [
+                element.validationMessage
+            ];
+        } else {
+            const formValues = Array.from(formRef.current.fields.values()).reduce((acc, field)=>{
+                if (field.name) acc[field.name] = field.getValue();
+                return acc;
+            }, {});
+            const resultOrPromise = validate(value, formValues);
+            result = 'object' == typeof resultOrPromise && null !== resultOrPromise && 'then' in resultOrPromise ? await resultOrPromise : resultOrPromise;
+            if (null !== result) {
+                nextState.valid = false;
+                nextState.customError = true;
+                if (Array.isArray(result)) {
+                    validationErrors = result;
+                    element.setCustomValidity(result.join('\n'));
+                } else if (result) {
+                    validationErrors = [
+                        result
+                    ];
+                    element.setCustomValidity(result);
+                }
+            } else if (validateOnChange) {
+                element.setCustomValidity('');
+                nextState.customError = false;
+                if (element.validationMessage) {
+                    defaultValidationMessage = element.validationMessage;
+                    validationErrors = [
+                        element.validationMessage
+                    ];
+                } else if (element.validity.valid && !nextState.valid) nextState.valid = true;
+            }
+        }
+        const nextValidityData = {
+            value,
+            state: nextState,
+            error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
+            errors: validationErrors,
+            initialValue: validityData.initialValue
+        };
+        updateRegisteredFieldValidity(nextValidityData);
+        setValidityData(nextValidityData);
+    });
+    const getValidationProps = __rspack_external_react.useCallback((externalProps = {})=>mergeProps(getDescriptionProps, false === state.valid ? {
+            'aria-invalid': true
+        } : EMPTY_OBJECT, externalProps), [
+        getDescriptionProps,
+        state.valid
+    ]);
+    const getInputValidationProps = __rspack_external_react.useCallback((externalProps = {})=>mergeProps({
+            onChange (event) {
+                if (event.nativeEvent.defaultPrevented) return;
+                clearErrors(name);
+                if (!shouldValidateOnChange()) return void commit(event.currentTarget.value, true);
+                const element = event.currentTarget;
+                if ('' === element.value) return void commit(element.value);
+                timeout.clear();
+                if (validationDebounceTime) timeout.start(validationDebounceTime, ()=>{
+                    commit(element.value);
+                });
+                else commit(element.value);
+            }
+        }, getValidationProps(externalProps)), [
+        getValidationProps,
+        clearErrors,
+        name,
+        timeout,
+        commit,
+        validationDebounceTime,
+        shouldValidateOnChange
+    ]);
+    return __rspack_external_react.useMemo(()=>({
+            getValidationProps,
+            getInputValidationProps,
+            inputRef,
+            commit
+        }), [
+        getValidationProps,
+        getInputValidationProps,
+        commit
+    ]);
+}
+function useFieldControlRegistration(params) {
+    const { commit, invalid, markedDirtyRef, name, setRegisteredFieldId, setValidityData, validityData } = params;
+    const { formRef } = useFormContext();
+    const activeFieldControlSourceRef = __rspack_external_react.useRef(null);
+    const registrationRef = __rspack_external_react.useRef(null);
+    const fallbackControlRef = __rspack_external_react.useRef(null);
+    const getValueForForm = useStableCallback(()=>{
+        const registration = registrationRef.current;
+        if (!registration) return;
+        if (registration.getValue) return registration.getValue();
+        return registration.value;
+    });
+    const validate = useStableCallback(()=>{
+        const registration = registrationRef.current;
+        if (!registration) return;
+        let nextValue = registration.value;
+        if (void 0 === nextValue) nextValue = getValueForForm();
+        markedDirtyRef.current = true;
+        commit(nextValue);
+    });
+    function refreshRegistration() {
+        const registration = registrationRef.current;
+        if (!registration || !registration.id) return;
+        formRef.current.fields.set(registration.id, {
+            getValue: getValueForForm,
+            name,
+            controlRef: registration.controlRef ?? fallbackControlRef,
+            validityData: getCombinedFieldValidityData(validityData, invalid),
+            validate
+        });
+    }
+    function deleteRegistration(id = registrationRef.current?.id) {
+        if (id) formRef.current.fields.delete(id);
+    }
+    function syncInitialValue() {
+        const registration = registrationRef.current;
+        if (!registration) return;
+        let initialValue = registration.value;
+        if (void 0 === initialValue) initialValue = getValueForForm();
+        if (null === validityData.initialValue && null !== initialValue) setValidityData((prev)=>({
+                ...prev,
+                initialValue
+            }));
+    }
+    useIsoLayoutEffect(()=>{
+        const registration = registrationRef.current;
+        if (!registration || !registration.id) return;
+        formRef.current.fields.set(registration.id, {
+            getValue: getValueForForm,
+            name,
+            controlRef: registration.controlRef ?? fallbackControlRef,
+            validityData: getCombinedFieldValidityData(validityData, invalid),
+            validate
+        });
+    }, [
+        formRef,
+        getValueForForm,
+        invalid,
+        name,
+        validate,
+        validityData
+    ]);
+    useIsoLayoutEffect(()=>{
+        const fields = formRef.current.fields;
+        return ()=>{
+            const id = registrationRef.current?.id;
+            if (id) fields.delete(id);
+        };
+    }, [
+        formRef
+    ]);
+    return useStableCallback((source, registration)=>{
+        if (!registration) {
+            if (activeFieldControlSourceRef.current === source) {
+                activeFieldControlSourceRef.current = null;
+                deleteRegistration();
+                registrationRef.current = null;
+                setRegisteredFieldId(void 0);
+            }
+            return;
+        }
+        const previousId = registrationRef.current?.id;
+        activeFieldControlSourceRef.current = source;
+        registrationRef.current = registration;
+        setRegisteredFieldId(registration.id);
+        if (previousId && previousId !== registration.id) deleteRegistration(previousId);
+        syncInitialValue();
+        refreshRegistration();
+    });
+}
+const FieldRoot_FieldRootInner = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { errors, validationMode: formValidationMode, submitAttemptedRef } = useFormContext();
+    const { render, className, validate: validateProp, validationDebounceTime = 0, validationMode = formValidationMode, name, disabled: disabledProp = false, invalid: invalidProp, dirty: dirtyProp, touched: touchedProp, actionsRef, style, ...elementProps } = componentProps;
+    const { disabled: disabledFieldset } = useFieldsetRootContext();
+    const validate = useStableCallback(validateProp || (()=>null));
+    const disabled = disabledFieldset || disabledProp;
+    const [touchedState, setTouchedUnwrapped] = __rspack_external_react.useState(false);
+    const [dirtyState, setDirtyUnwrapped] = __rspack_external_react.useState(false);
+    const [filled, setFilled] = __rspack_external_react.useState(false);
+    const [focused, setFocused] = __rspack_external_react.useState(false);
+    const dirty = dirtyProp ?? dirtyState;
+    const touched = touchedProp ?? touchedState;
+    const markedDirtyRef = __rspack_external_react.useRef(false);
+    const registeredFieldIdRef = __rspack_external_react.useRef(void 0);
+    const getRegisteredFieldId = __rspack_external_react.useCallback(()=>registeredFieldIdRef.current, []);
+    const setRegisteredFieldId = __rspack_external_react.useCallback((id)=>{
+        registeredFieldIdRef.current = id;
+    }, []);
+    const setDirty = useStableCallback((value)=>{
+        if (void 0 !== dirtyProp) return;
+        if (value) markedDirtyRef.current = true;
+        setDirtyUnwrapped(value);
+    });
+    const setTouched = useStableCallback((value)=>{
+        if (void 0 !== touchedProp) return;
+        setTouchedUnwrapped(value);
+    });
+    const shouldValidateOnChange = useStableCallback(()=>'onChange' === validationMode || 'onSubmit' === validationMode && submitAttemptedRef.current);
+    const hasFormError = !!name && Object.hasOwn(errors, name) && void 0 !== errors[name];
+    const invalid = true === invalidProp || hasFormError;
+    const [validityData, setValidityData] = __rspack_external_react.useState({
+        state: DEFAULT_VALIDITY_STATE,
+        error: '',
+        errors: [],
+        value: null,
+        initialValue: null
+    });
+    const valid = !invalid && validityData.state.valid;
+    const state = __rspack_external_react.useMemo(()=>({
+            disabled,
+            touched,
+            dirty,
+            valid,
+            filled,
+            focused
+        }), [
+        disabled,
+        touched,
+        dirty,
+        valid,
+        filled,
+        focused
+    ]);
+    const validation = useFieldValidation({
+        setValidityData,
+        validate,
+        validityData,
+        validationDebounceTime,
+        invalid,
+        markedDirtyRef,
+        state,
+        name,
+        shouldValidateOnChange,
+        getRegisteredFieldId
+    });
+    const validityValue = validityData.value;
+    const handleImperativeValidate = __rspack_external_react.useCallback(()=>{
+        markedDirtyRef.current = true;
+        validation.commit(validityValue);
+    }, [
+        validation,
+        validityValue
+    ]);
+    const registerFieldControl = useFieldControlRegistration({
+        commit: validation.commit,
+        invalid,
+        markedDirtyRef,
+        name,
+        setRegisteredFieldId,
+        setValidityData,
+        validityData
+    });
+    __rspack_external_react.useImperativeHandle(actionsRef, ()=>({
+            validate: handleImperativeValidate
+        }), [
+        handleImperativeValidate
+    ]);
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            invalid,
+            name,
+            validityData,
+            setValidityData,
+            disabled,
+            touched,
+            setTouched,
+            dirty,
+            setDirty,
+            filled,
+            setFilled,
+            focused,
+            setFocused,
+            validate,
+            validationMode,
+            validationDebounceTime,
+            shouldValidateOnChange,
+            state,
+            markedDirtyRef,
+            registerFieldControl,
+            validation
+        }), [
+        invalid,
+        name,
+        validityData,
+        disabled,
+        touched,
+        setTouched,
+        dirty,
+        setDirty,
+        filled,
+        setFilled,
+        focused,
+        setFocused,
+        validate,
+        validationMode,
+        validationDebounceTime,
+        shouldValidateOnChange,
+        state,
+        registerFieldControl,
+        validation
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        ref: forwardedRef,
+        state,
+        props: elementProps,
+        stateAttributesMapping: fieldValidityMapping
+    });
+    return /*#__PURE__*/ jsx(FieldRootContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) FieldRoot_FieldRootInner.displayName = "FieldRootInner";
+const FieldRoot_FieldRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    return /*#__PURE__*/ jsx(LabelableProvider_LabelableProvider, {
+        children: /*#__PURE__*/ jsx(FieldRoot_FieldRootInner, {
+            ...componentProps,
+            ref: forwardedRef
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) FieldRoot_FieldRoot.displayName = "FieldRoot";
+const FieldLabel_FieldLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, id: idProp, nativeLabel = true, ...elementProps } = componentProps;
+    const fieldRootContext = useFieldRootContext(false);
+    const { labelId } = useLabelableContext();
+    const labelRef = __rspack_external_react.useRef(null);
+    const labelProps = useLabel({
+        id: labelId ?? idProp,
+        native: nativeLabel
+    });
+    if ('production' !== process.env.NODE_ENV) __rspack_external_react.useEffect(()=>{
+        if (!labelRef.current) return;
+        const isLabelTag = 'LABEL' === labelRef.current.tagName;
+        if (nativeLabel) {
+            if (!isLabelTag) {
+                const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+                const message = "<Field.Label> expected a <label> element because the `nativeLabel` prop is true. Rendering a non-<label> disables native label association, so `htmlFor` will not work. Use a real <label> in the `render` prop, or set `nativeLabel` to `false`.";
+                error(`${message}${ownerStackMessage}`);
+            }
+        } else if (isLabelTag) {
+            const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+            const message = "<Field.Label> expected a non-<label> element because the `nativeLabel` prop is false. Rendering a <label> assumes native label behavior while Base UI treats it as non-native, which can cause unexpected pointer behavior. Use a non-<label> in the `render` prop, or set `nativeLabel` to `true`.";
+            error(`${message}${ownerStackMessage}`);
+        }
+    }, [
+        nativeLabel
+    ]);
+    const element = useRenderElement('label', componentProps, {
+        ref: [
+            forwardedRef,
+            labelRef
+        ],
+        state: fieldRootContext.state,
+        props: [
+            labelProps,
+            elementProps
+        ],
+        stateAttributesMapping: fieldValidityMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) FieldLabel_FieldLabel.displayName = "FieldLabel";
+const stateAttributesMapping = {
+    ...fieldValidityMapping,
+    ...transitionStatusMapping
+};
+const FieldError_FieldError = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, id: idProp, className, match, style, ...elementProps } = componentProps;
+    const id = useBaseUiId(idProp);
+    const { validityData, state: fieldState, name } = useFieldRootContext(false);
+    const { setMessageIds } = useLabelableContext();
+    const { errors } = useFormContext();
+    const formError = name ? errors[name] : null;
+    const hasSpecificMatch = 'string' == typeof match;
+    let rendered = false;
+    rendered = true === match ? true : hasSpecificMatch ? Boolean(validityData.state[match]) : Boolean(formError) || false === validityData.state.valid;
+    const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+    useIsoLayoutEffect(()=>{
+        if (!rendered || !id) return;
+        setMessageIds((v)=>v.concat(id));
+        return ()=>{
+            setMessageIds((v)=>v.filter((item)=>item !== id));
+        };
+    }, [
+        rendered,
+        id,
+        setMessageIds
+    ]);
+    const errorRef = __rspack_external_react.useRef(null);
+    const [lastRenderedMessage, setLastRenderedMessage] = __rspack_external_react.useState(null);
+    const [lastRenderedMessageKey, setLastRenderedMessageKey] = __rspack_external_react.useState(null);
+    const clientErrorMessage = validityData.errors.length > 1 ? /*#__PURE__*/ jsx("ul", {
+        children: validityData.errors.map((message)=>/*#__PURE__*/ jsx("li", {
+                children: message
+            }, message))
+    }) : validityData.error;
+    const errorMessage = hasSpecificMatch ? clientErrorMessage : formError || clientErrorMessage;
+    let errorKey = validityData.error;
+    if (null != formError) errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;
+    else if (validityData.errors.length > 1) errorKey = JSON.stringify(validityData.errors);
+    if (rendered && errorKey !== lastRenderedMessageKey) {
+        setLastRenderedMessageKey(errorKey);
+        setLastRenderedMessage(errorMessage);
+    }
+    useOpenChangeComplete({
+        open: rendered,
+        ref: errorRef,
+        onComplete () {
+            if (!rendered) setMounted(false);
+        }
+    });
+    const state = {
+        ...fieldState,
+        transitionStatus
+    };
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            errorRef
+        ],
+        state,
+        props: [
+            {
+                id,
+                children: rendered ? errorMessage : lastRenderedMessage
+            },
+            elementProps
+        ],
+        stateAttributesMapping: stateAttributesMapping,
+        enabled: mounted
+    });
+    if (!mounted) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) FieldError_FieldError.displayName = "FieldError";
+const FieldDescription_FieldDescription = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, id: idProp, className, style, ...elementProps } = componentProps;
+    const id = useBaseUiId(idProp);
+    const fieldRootContext = useFieldRootContext(false);
+    const { setMessageIds } = useLabelableContext();
+    useIsoLayoutEffect(()=>{
+        if (!id) return;
+        setMessageIds((v)=>v.concat(id));
+        return ()=>{
+            setMessageIds((v)=>v.filter((item)=>item !== id));
+        };
+    }, [
+        id,
+        setMessageIds
+    ]);
+    const element = useRenderElement('p', componentProps, {
+        ref: forwardedRef,
+        state: fieldRootContext.state,
+        props: [
+            {
+                id
+            },
+            elementProps
+        ],
+        stateAttributesMapping: fieldValidityMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) FieldDescription_FieldDescription.displayName = "FieldDescription";
+const FieldItem_FieldItem = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, disabled: disabledProp = false, ...elementProps } = componentProps;
+    const { state, disabled: rootDisabled } = useFieldRootContext(false);
+    const disabled = rootDisabled || disabledProp;
+    const checkboxGroupContext = useCheckboxGroupContext();
+    const hasParentCheckbox = checkboxGroupContext?.allValues !== void 0;
+    const controlId = hasParentCheckbox ? checkboxGroupContext?.parent.id : void 0;
+    const fieldItemContext = __rspack_external_react.useMemo(()=>({
+            disabled
+        }), [
+        disabled
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        ref: forwardedRef,
+        state,
+        props: elementProps,
+        stateAttributesMapping: fieldValidityMapping
+    });
+    return /*#__PURE__*/ jsx(LabelableProvider_LabelableProvider, {
+        controlId: controlId,
+        children: /*#__PURE__*/ jsx(FieldItemContext.Provider, {
+            value: fieldItemContext,
+            children: element
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) FieldItem_FieldItem.displayName = "FieldItem";
+const FieldValidity_FieldValidity = function(props) {
+    const { children } = props;
+    const { validityData, invalid } = useFieldRootContext(false);
+    const combinedFieldValidityData = __rspack_external_react.useMemo(()=>getCombinedFieldValidityData(validityData, invalid), [
+        validityData,
+        invalid
+    ]);
+    const isInvalid = false === combinedFieldValidityData.state.valid;
+    const { transitionStatus } = useTransitionStatus(isInvalid);
+    const fieldValidityState = __rspack_external_react.useMemo(()=>({
+            ...combinedFieldValidityData,
+            validity: combinedFieldValidityData.state,
+            transitionStatus
+        }), [
+        combinedFieldValidityData,
+        transitionStatus
+    ]);
+    return /*#__PURE__*/ jsx(__rspack_external_react.Fragment, {
+        children: children(fieldValidityState)
+    });
+};
+if ("production" !== process.env.NODE_ENV) FieldValidity_FieldValidity.displayName = "FieldValidity";
 const Field_module = {
     root: "root-ECdHfF",
     label: "label-YSWZBs",
@@ -9,43 +676,43 @@ const Field_module = {
     description: "description-IVviYU",
     item: "item-kQeHOQ"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Root, {
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
         ref: ref,
         className: clsx(Field_module.root, className),
         ...props
     }));
-const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Label, {
+const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldLabel_FieldLabel, {
         ref: ref,
         className: clsx(Field_module.label, className),
         ...props
     }));
-const Error = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Error, {
+const Error = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldError_FieldError, {
         ref: ref,
         className: clsx(Field_module.error, className),
         ...props
     }));
-const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Description, {
+const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
         ref: ref,
         className: clsx(Field_module.description, className),
         ...props
     }));
-const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Control, {
+const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldControl_FieldControl, {
         ref: ref,
         className: clsx(Field_module.control, className),
         ...props
     }));
-const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Item, {
+const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldItem_FieldItem, {
         ref: ref,
         className: clsx(Field_module.item, className),
         ...props
     }));
-const Field_Field = {
+const Field = {
     Root: Root,
     Label: Label,
     Error: Error,
     Description: Description,
     Control: Control,
     Item: Item,
-    Validity: Field.Validity
+    Validity: FieldValidity_FieldValidity
 };
-export { Field_Field as Field };
+export { Field };