@wix/site-ui 1.102.0 → 1.103.0

package/dist/Field/index.css

@@ -17,6 +17,15 @@
 .error-BUDKWp {
   font: var(--wst-paragraph-3-font);
   color: var(--wst-system-error-color, #df3131);
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.error-BUDKWp svg {
+  flex-shrink: 0;
+  width: 1lh;
+  height: 1lh;
 }
 
 .description-IVviYU {

package/dist/Field/index.js

@@ -1,16 +1,483 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoCircle } from "@wix/wix-ui-icons-common";
 import clsx from "clsx";
-import { useLabelableContext, useFieldRootContext, fieldValidityMapping } from "../1477.js";
+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 { SafeReact } from "../6499.js";
 import { error } from "../4026.js";
-import { useRenderElement } from "../8272.js";
+import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "../880.js";
 import { useCheckboxGroupContext } from "../8979.js";
-import { FieldRoot_FieldRoot, FieldDescription_FieldDescription, getCombinedFieldValidityData, LabelableProvider_LabelableProvider, FieldError_FieldError } from "../8972.js";
 import { FieldItemContext } from "../1457.js";
-import { useTransitionStatus } from "../880.js";
 import { Input_module, FieldControl_FieldControl } from "../8685.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);
@@ -52,6 +519,108 @@ const FieldLabel_FieldLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(f
     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);
@@ -126,6 +695,15 @@ const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, var
 const Error = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldError_FieldError, {
         ref: ref,
         className: clsx(Field_module.error, className),
+        render: ({ children, ...rest })=>/*#__PURE__*/ jsxs("div", {
+                ...rest,
+                children: [
+                    /*#__PURE__*/ jsx(InfoCircle, {
+                        "aria-hidden": true
+                    }),
+                    children
+                ]
+            }),
         ...props
     }));
 const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldDescription_FieldDescription, {

package/dist/Select/index.css

@@ -1,7 +1,3 @@
-.root-Pyk3SP {
-  display: contents;
-}
-
 .label-UrIm_f {
   font: var(--wst-paragraph-3-font);
   color: var(--wst-paragraph-2-color, #000);
@@ -9,6 +5,10 @@
   display: block;
 }
 
+.label-UrIm_f.fieldLabel-KieHgU {
+  padding-bottom: 4px;
+}
+
 .requiredMarker-ZRoZQT {
   color: var(--wst-system-error-color, #df3131);
   margin-inline-start: 2px;
@@ -329,27 +329,6 @@ body .item-SBIvtk.item-SBIvtk.item-SBIvtk.item-SBIvtk:focus, body .item-SBIvtk.i
   margin-block: 4px;
 }
 
-.error-rsn7w1 {
-  font: var(--wst-paragraph-3-font);
-  color: var(--wst-system-error-color, #df3131);
-  align-items: center;
-  gap: 4px;
-  margin: 4px 0 0;
-  display: flex;
-}
-
-.error-rsn7w1 svg {
-  flex-shrink: 0;
-  width: 1lh;
-  height: 1lh;
-}
-
-.description-WHObss {
-  font: var(--wst-paragraph-3-font);
-  color: var(--wst-shade-3-color, #767676);
-  margin: 4px 0 0;
-}
-
 .loadingIndicator-X_6SEg {
   border: 2px solid;
   border-block-start-color: #0000;

package/dist/Select/index.js

@@ -1804,8 +1804,8 @@ const SelectPortal_SelectPortal = /*#__PURE__*/ __rspack_external_react.forwardR
 });
 if ("production" !== process.env.NODE_ENV) SelectPortal_SelectPortal.displayName = "SelectPortal";
 const Select_module = {
-    root: "root-Pyk3SP",
     label: "label-UrIm_f",
+    fieldLabel: "fieldLabel-KieHgU",
     requiredMarker: "requiredMarker-ZRoZQT",
     trigger: "trigger-UPubf5",
     value: "value-fKND1Z",
@@ -1826,8 +1826,6 @@ const Select_module = {
     scrollUpArrow: "scrollUpArrow-P67Eti",
     groupLabel: "groupLabel-GC3RgN",
     separator: "separator-XEtOy2",
-    error: "error-rsn7w1",
-    description: "description-WHObss",
     loadingIndicator: "loadingIndicator-X_6SEg",
     loadingIndicatorSpin: "loadingIndicatorSpin-xPUyVe"
 };

package/dist/SelectField/index.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, InfoCircle } from "@wix/wix-ui-icons-common";
+import { ChevronDown } from "@wix/wix-ui-icons-common";
 import { Select, Select_module } from "../Select/index.js";
-import { FieldRoot_FieldRoot, FieldError_FieldError, FieldDescription_FieldDescription } from "../8972.js";
+import { Field } from "../Field/index.js";
 import * as __rspack_external_react from "react";
 const isDivider = (item)=>'divider' in item;
 const isGroup = (item)=>'groupLabel' in item;
@@ -41,8 +41,7 @@ function renderOption(option) {
         })
     }, value);
 }
-const SelectField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ options, label, 'aria-label': ariaLabel, placeholder, description, error, variant = 'floating', alignment = 'start', invalid = false, loading = false, required = false, disabled = false, readOnly, icon = /*#__PURE__*/ jsx(ChevronDown, {}), outerBorder = false, sideOffset = 4, dir, triggerClassName, popupClassName, ...rootProps }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
-        className: Select_module.root,
+const SelectField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ options, label, 'aria-label': ariaLabel, placeholder, description, error, variant = 'floating', alignment = 'start', invalid = false, loading = false, required = false, disabled = false, readOnly, icon = /*#__PURE__*/ jsx(ChevronDown, {}), outerBorder = false, sideOffset = 4, dir, triggerClassName, popupClassName, ...rootProps }, ref)=>/*#__PURE__*/ jsx(Field.Root, {
         invalid: invalid,
         disabled: disabled,
         children: /*#__PURE__*/ jsxs(Select.Root, {
@@ -52,6 +51,7 @@ const SelectField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ options,
             ...rootProps,
             children: [
                 null != label ? /*#__PURE__*/ jsxs(Select.Label, {
+                    className: Select_module.fieldLabel,
                     children: [
                         label,
                         required ? /*#__PURE__*/ jsx("span", {
@@ -82,18 +82,11 @@ const SelectField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ options,
                         })
                     ]
                 }),
-                null != error ? /*#__PURE__*/ jsxs(FieldError_FieldError, {
-                    className: Select_module.error,
+                null != error ? /*#__PURE__*/ jsx(Field.Error, {
                     match: invalid,
-                    children: [
-                        /*#__PURE__*/ jsx(InfoCircle, {
-                            "aria-hidden": true
-                        }),
-                        error
-                    ]
+                    children: error
                 }) : null,
-                null != description ? /*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
-                    className: Select_module.description,
+                null != description ? /*#__PURE__*/ jsx(Field.Description, {
                     children: description
                 }) : null,
                 /*#__PURE__*/ jsx(Select.Portal, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.102.0",
+  "version": "1.103.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -95,5 +95,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "44b9b3e5fde142552a4990cc7f18cc6b31df121b9494732e85bbca72"
+  "falconPackageHash": "04dbfc8fad3ed8dba5ecc2545594688558382cb49a23985d1fb81735"
 }

package/dist/8972.js

@@ -1,576 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-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 } from "./6499.js";
-import { useFieldsetRootContext } from "./353.js";
-import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "./880.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 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";
-export { FieldDescription_FieldDescription, FieldError_FieldError, FieldRoot_FieldRoot, LabelableProvider_LabelableProvider, getCombinedFieldValidityData };