solid-baseui 0.1.0-alpha.0

package/dist/lib/server/field/index.js

@@ -0,0 +1,677 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { DEFAULT_VALIDITY_DATA, DEFAULT_VALIDITY_STATE, VALIDITY_KEYS, copyNativeValidity, fieldStateAttributesMapping } from "../internals/field-constants.js";
+import { n as useFieldRootContext, t as FieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { n as useFormContext } from "../FormContext-pvESt85v.js";
+import { n as createLabelableContext, r as useLabelableContext, t as LabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { n as useFieldItemContext, t as FieldItemContext } from "../FieldItemContext-x-C7ZlmX.js";
+import { n as useFieldsetRootContext } from "../FieldsetRootContext-DyNqCjK6.js";
+import { t as hasFormError } from "../form-types-P7-SCWyr.js";
+import { t as FieldControl } from "../FieldControl-Y_kI7ARp.js";
+import { Dynamic, escape, memo, mergeProps, ssr, ssrHydrationKey } from "@solidjs/web";
+import { For, Show, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
+//#region src/field/root/createFieldValidation.ts
+function createFieldValidation(options) {
+	const registeredInputs = /* @__PURE__ */ new Map();
+	let activeInputSource = null;
+	let validationCommitId = 0;
+	let timeout;
+	function clearTimer() {
+		if (timeout !== void 0) {
+			clearTimeout(timeout);
+			timeout = void 0;
+		}
+	}
+	function findRepresentativeInput() {
+		const activeInputs = activeInputSource ? registeredInputs.get(activeInputSource) : void 0;
+		if (!activeInputs) return null;
+		let fallback = null;
+		for (const input of activeInputs.keys()) {
+			if (!isEligibleInput(input, options.form.formElement())) continue;
+			if (!input.validity.valid) return input;
+			fallback ??= input;
+		}
+		return fallback;
+	}
+	function clearCustomValidity(element) {
+		for (const inputs of registeredInputs.values()) for (const input of inputs.keys()) input.setCustomValidity("");
+		element?.setCustomValidity("");
+	}
+	function publishAllValid(value, element) {
+		clearCustomValidity(element);
+		options.publish({
+			value,
+			state: {
+				...DEFAULT_VALIDITY_STATE,
+				valid: true
+			},
+			error: "",
+			errors: [],
+			initialValue: options.getValidityData().initialValue
+		});
+	}
+	function commit(value, revalidate = false) {
+		validationCommitId += 1;
+		const currentCommitId = validationCommitId;
+		clearTimer();
+		const element = findRepresentativeInput();
+		if (revalidate) {
+			if (options.state().valid !== false || !element) return;
+			const nativeValidity = element.validity;
+			if (!nativeValidity.valueMissing) {
+				publishAllValid(value, element);
+				return;
+			}
+			for (const key of VALIDITY_KEYS) if (key !== "valueMissing" && key !== "customError" && nativeValidity[key]) return;
+		}
+		const nextState = element ? getNativeState(element, options.isMarkedDirty()) : {
+			...DEFAULT_VALIDITY_STATE,
+			valid: true
+		};
+		const validatesOnChange = options.shouldValidateOnChange();
+		if (element?.validationMessage && !validatesOnChange) {
+			options.publish({
+				value,
+				state: nextState,
+				error: element.validationMessage,
+				errors: [element.validationMessage],
+				initialValue: options.getValidityData().initialValue
+			});
+			return;
+		}
+		const result = options.validate()?.(value, options.form.getFormValues()) ?? null;
+		if (isPromise(result)) {
+			result.then((resolved) => {
+				if (currentCommitId === validationCommitId) publishCustomResult(value, element, nextState, resolved, validatesOnChange);
+			});
+			return;
+		}
+		publishCustomResult(value, element, nextState, result, validatesOnChange);
+	}
+	function publishCustomResult(value, element, nativeState, result, validatesOnChange) {
+		const state = { ...nativeState };
+		let errors = [];
+		let error = "";
+		if (result !== null) {
+			errors = Array.isArray(result) ? result : [result];
+			error = errors[0] ?? "";
+			state.valid = false;
+			state.customError = true;
+			element?.setCustomValidity(errors.join("\n"));
+		} else if (validatesOnChange) {
+			clearCustomValidity(element);
+			state.customError = false;
+			if (element?.validationMessage) {
+				error = element.validationMessage;
+				errors = [error];
+			} else if (!element || element.validity.valid) state.valid = true;
+		}
+		options.publish({
+			value,
+			state,
+			error,
+			errors,
+			initialValue: options.getValidityData().initialValue
+		});
+	}
+	function change(value) {
+		clearTimer();
+		const validatesOnChange = options.shouldValidateOnChange();
+		const delay = options.validationDebounceTime();
+		if (validatesOnChange && value !== "" && delay > 0) {
+			validationCommitId += 1;
+			timeout = setTimeout(() => {
+				timeout = void 0;
+				commit(value);
+			}, delay);
+			return;
+		}
+		commit(value, !validatesOnChange);
+	}
+	function registerInput(source, element, getControl = () => element) {
+		let inputs = registeredInputs.get(source);
+		if (!inputs) {
+			inputs = /* @__PURE__ */ new Map();
+			registeredInputs.set(source, inputs);
+		}
+		inputs.set(element, { getControl });
+		return () => {
+			const currentInputs = registeredInputs.get(source);
+			currentInputs?.delete(element);
+			if (currentInputs?.size === 0) registeredInputs.delete(source);
+		};
+	}
+	function getInputControl() {
+		const input = findRepresentativeInput();
+		const registration = activeInputSource && input ? registeredInputs.get(activeInputSource)?.get(input) : void 0;
+		return input ? registration?.getControl() ?? input : null;
+	}
+	function setActiveInputSource(source) {
+		activeInputSource = source;
+	}
+	onCleanup(clearTimer);
+	return {
+		commit,
+		change,
+		registerInput,
+		getInputControl,
+		setActiveInputSource
+	};
+}
+function isEligibleInput(input, formElement) {
+	if (input.matches(":disabled")) return false;
+	if (!formElement || input.form === formElement) return true;
+	return input.form === null && !input.hasAttribute("form");
+}
+function getNativeState(element, markedDirty) {
+	const state = copyNativeValidity(element.validity);
+	let onlyValueMissing = state.valueMissing;
+	for (const key of VALIDITY_KEYS) if (key !== "valueMissing" && state[key]) {
+		onlyValueMissing = false;
+		break;
+	}
+	if (onlyValueMissing && !markedDirty) {
+		state.valid = true;
+		state.valueMissing = false;
+	}
+	return state;
+}
+function isPromise(value) {
+	return typeof value === "object" && value !== null && "then" in value;
+}
+//#endregion
+//#region src/field/root/FieldRoot.tsx
+/** Groups all parts of a field and coordinates validation and form registration. */
+function FieldRoot(props) {
+	const form = useFormContext();
+	const ownProps = props;
+	const fieldset = useFieldsetRootContext(true);
+	const parentLabelable = useLabelableContext();
+	const labelable = createLabelableContext({ parent: parentLabelable });
+	const others = omit(props, "actionsRef", "as", "class", "dirty", "disabled", "invalid", "name", "style", "touched", "validate", "validationDebounceTime", "validationMode");
+	const [touchedState, setTouchedState] = createSignal(false);
+	const [dirtyState, setDirtyState] = createSignal(false);
+	const [filled, setFilled] = createSignal(false);
+	const [focused, setFocused] = createSignal(false);
+	const [registrationVersion, setRegistrationVersion] = createSignal(0);
+	let markedDirty = untrack(() => props.dirty ?? false);
+	let activeControlSource = null;
+	let controlRegistration = null;
+	let capturedInitialValue = false;
+	let unregisterFormField;
+	let validitySnapshot = {
+		...DEFAULT_VALIDITY_DATA,
+		state: { ...DEFAULT_VALIDITY_DATA.state },
+		errors: []
+	};
+	const [validityData, setValidityData] = createSignal(validitySnapshot);
+	const disabled = createMemo(() => fieldset?.disabled() || (props.disabled ?? false));
+	const registeredName = createMemo(() => {
+		registrationVersion();
+		return controlRegistration?.name;
+	});
+	const effectiveName = createMemo(() => props.name ?? registeredName());
+	const invalid = createMemo(() => props.invalid === true || hasFormError(form.errors(), effectiveName()));
+	const validationMode = createMemo(() => props.validationMode ?? form.validationMode());
+	const dirty = createMemo(() => props.dirty ?? dirtyState());
+	const touched = createMemo(() => props.touched ?? touchedState());
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		touched: touched(),
+		dirty: dirty(),
+		valid: invalid() ? false : disabled() ? null : validityData().state.valid,
+		filled: filled(),
+		focused: focused()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
+	function publishValidity(data) {
+		validitySnapshot = data;
+		setValidityData(data);
+	}
+	function setTouched(value) {
+		if (props.touched === void 0) setTouchedState(value);
+	}
+	function setDirty(value) {
+		if (props.dirty !== void 0) return;
+		if (value) markedDirty = true;
+		setDirtyState(value);
+	}
+	function getControlValue() {
+		if (!controlRegistration) return validitySnapshot.value;
+		return controlRegistration.value();
+	}
+	function getFormValue() {
+		if (!controlRegistration) return validitySnapshot.value;
+		return controlRegistration.getValue ? controlRegistration.getValue() : controlRegistration.value();
+	}
+	function validateField() {
+		markedDirty = true;
+		validation.commit(getControlValue());
+	}
+	const validation = createFieldValidation({
+		form,
+		getValidityData: () => validitySnapshot,
+		publish: publishValidity,
+		validate: () => props.validate,
+		validationDebounceTime: () => props.validationDebounceTime ?? 0,
+		state,
+		isMarkedDirty: () => markedDirty,
+		shouldValidateOnChange: () => validationMode() === "onChange" || validationMode() === "onSubmit" && form.submitAttempted()
+	});
+	const formField = {
+		token: Symbol("Field"),
+		name: effectiveName,
+		validate: validateField,
+		isInvalid: () => invalid() || !disabled() && validitySnapshot.state.valid === false,
+		getControl: () => validation.getInputControl() ?? controlRegistration?.getControl() ?? null,
+		getValue: getFormValue
+	};
+	function syncFormRegistration() {
+		const shouldRegister = Boolean(controlRegistration?.id && !disabled());
+		if (shouldRegister && !unregisterFormField) unregisterFormField = form.registerField(formField);
+		else if (!shouldRegister && unregisterFormField) {
+			unregisterFormField();
+			unregisterFormField = void 0;
+		}
+	}
+	function registerFieldControl(source, registration) {
+		if (!registration) {
+			if (activeControlSource === source) {
+				activeControlSource = null;
+				controlRegistration = null;
+				validation.setActiveInputSource(null);
+				setRegistrationVersion((version) => version + 1);
+			}
+			return;
+		}
+		activeControlSource = source;
+		controlRegistration = registration;
+		validation.setActiveInputSource(source);
+		if (!capturedInitialValue) {
+			capturedInitialValue = true;
+			publishValidity({
+				...validitySnapshot,
+				initialValue: untrack(getControlValue)
+			});
+		}
+		setRegistrationVersion((version) => version + 1);
+	}
+	const actions = { validate: validateField };
+	const context = {
+		state,
+		validityData,
+		name: effectiveName,
+		disabled,
+		invalid,
+		validationMode,
+		shouldValidateOnChange: () => validationMode() === "onChange" || validationMode() === "onSubmit" && form.submitAttempted(),
+		setTouched,
+		setDirty,
+		setFilled,
+		setFocused,
+		registerFieldControl,
+		validation
+	};
+	createEffect(() => props.dirty, (controlledDirty) => {
+		if (controlledDirty !== void 0) markedDirty = controlledDirty;
+	});
+	createEffect(() => ({
+		version: registrationVersion(),
+		disabled: disabled()
+	}), () => untrack(syncFormRegistration));
+	createEffect(() => ownProps.actionsRef, (actionsRef) => {
+		actionsRef?.(actions);
+	});
+	onCleanup(() => unregisterFormField?.());
+	return LabelableContext({
+		value: labelable,
+		get children() {
+			return FieldRootContext({
+				value: context,
+				get children() {
+					return Dynamic(mergeProps({
+						get component() {
+							return props.as ?? "div";
+						},
+						get ["class"]() {
+							return classValue();
+						},
+						get style() {
+							return styleValue();
+						}
+					}, stateAttributes, others));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/field/label/FieldLabel.tsx
+/** A label automatically associated with the current field control. */
+function FieldLabel(props) {
+	const field = useFieldRootContext();
+	const item = useFieldItemContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const [element, setElement] = createSignal();
+	const others = omit(allProps, "as", "class", "id", "nativeLabel", "onClick", "onMouseDown", "onPointerDown", "ref", "style");
+	const id = createMemo(() => internalProps.id ?? generatedId);
+	const nativeLabel = createMemo(() => internalProps.nativeLabel ?? true);
+	const state = createMemo(() => ({
+		...field.state(),
+		disabled: field.disabled() || item.disabled()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
+	const callExternalClick = composeEventHandlers(() => internalProps.onClick);
+	const callExternalMouseDown = composeEventHandlers(() => internalProps.onMouseDown);
+	const callExternalPointerDown = composeEventHandlers(() => internalProps.onPointerDown);
+	function isInteractiveTarget(target) {
+		return target instanceof Element && Boolean(target.closest("button,input,select,textarea"));
+	}
+	function focusControl() {
+		const controlId = labelable.controlId();
+		const currentElement = element();
+		if (!controlId || !currentElement) return;
+		const control = currentElement.ownerDocument.getElementById(controlId);
+		if (control instanceof HTMLElement) control.focus({ focusVisible: true });
+	}
+	function handleClick(event) {
+		callExternalClick.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		if (!nativeLabel() && !isInteractiveTarget(event.target)) focusControl();
+	}
+	function handleMouseDown(event) {
+		callExternalMouseDown.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		if (!isInteractiveTarget(event.target) && !event.defaultPrevented && event.detail > 1) event.preventDefault();
+	}
+	function handlePointerDown(event) {
+		callExternalPointerDown.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		if (!nativeLabel()) event.preventDefault();
+	}
+	createEffect(id, (currentId) => labelable.registerLabelId(currentId));
+	onSettled(() => {
+		element();
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "label";
+		},
+		ref: [((value) => setElement(value)), internalProps.ref],
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get ["for"]() {
+			return memo(() => {
+				return !!nativeLabel();
+			})() ? labelable.controlId() ?? void 0 : void 0;
+		},
+		onClick: handleClick,
+		onMouseDown: handleMouseDown,
+		onPointerDown: handlePointerDown
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/field/description/FieldDescription.tsx
+/** Additional information that is automatically associated with the control. */
+function FieldDescription(props) {
+	const field = useFieldRootContext();
+	const item = useFieldItemContext();
+	const labelable = useLabelableContext();
+	const source = Symbol("FieldDescription");
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const others = omit(props, "as", "class", "id", "style");
+	const id = createMemo(() => props.id ?? generatedId);
+	const state = createMemo(() => ({
+		...field.state(),
+		disabled: field.disabled() || item.disabled()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
+	createEffect(id, (currentId) => labelable.registerMessageId(source, currentId));
+	onCleanup(() => labelable.registerMessageId(source, void 0));
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "p";
+		},
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/field/item/FieldItem.tsx
+/** Groups one item in a grouped field with its own labelable scope. */
+function FieldItem(props) {
+	const field = useFieldRootContext();
+	const parentLabelable = useLabelableContext();
+	const labelable = createLabelableContext({ parent: parentLabelable });
+	const others = omit(props, "as", "class", "disabled", "style");
+	const disabled = createMemo(() => field.disabled() || (props.disabled ?? false));
+	const state = createMemo(() => ({
+		...field.state(),
+		disabled: disabled()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
+	const context = { disabled };
+	return LabelableContext({
+		value: labelable,
+		get children() {
+			return FieldItemContext({
+				value: context,
+				get children() {
+					return Dynamic(mergeProps({
+						get component() {
+							return props.as ?? "div";
+						},
+						get ["class"]() {
+							return classValue();
+						},
+						get style() {
+							return styleValue();
+						}
+					}, stateAttributes, others));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/field/error/FieldError.tsx
+var _tmpl$ = [
+	"<ul",
+	">",
+	"</ul>"
+];
+var _tmpl$2 = [
+	"<li",
+	">",
+	"</li>"
+];
+var stateAttributesMapping = {
+	...fieldStateAttributesMapping,
+	...transitionStatusMapping
+};
+/** A conditional validation message associated with the current control. */
+function FieldError(props) {
+	let errorElement;
+	let latestVisible = false;
+	const field = useFieldRootContext();
+	const form = useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const source = Symbol("FieldError");
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const others = omit(allProps, "as", "children", "class", "id", "match", "ref", "style");
+	const id = createMemo(() => internalProps.id ?? generatedId);
+	const formError = createMemo(() => {
+		const name = field.name();
+		const errors = form.errors();
+		return name && Object.hasOwn(errors, name) ? errors[name] : null;
+	});
+	const hasFormError = createMemo(() => {
+		const error = formError();
+		return Array.isArray(error) ? error.length > 0 : Boolean(error);
+	});
+	const specificMatch = createMemo(() => typeof internalProps.match === "string" ? internalProps.match : void 0);
+	const visible = createMemo(() => {
+		if (internalProps.match === true) return true;
+		if (field.state().disabled) return false;
+		const match = specificMatch();
+		if (match) return Boolean(field.validityData().state[match]);
+		return hasFormError() || field.validityData().state.valid === false;
+	});
+	const generatedMessage = createMemo(() => {
+		if (!specificMatch() && hasFormError()) return formError();
+		const validity = field.validityData();
+		return validity.errors.length > 1 ? validity.errors : validity.error;
+	});
+	const message = createMemo(() => {
+		if (internalProps.children !== void 0) return internalProps.children;
+		const current = generatedMessage();
+		if (Array.isArray(current)) {
+			var _v$, _v$2;
+			return current.length > 1 ? (_v$ = ssrHydrationKey(), _v$2 = escape(For({
+				each: current,
+				children: (item) => {
+					var _v$3, _v$4;
+					return _v$3 = ssrHydrationKey(), _v$4 = escape(item), ssr(_tmpl$2, _v$3, _v$4);
+				}
+			})), ssr(_tmpl$, _v$, _v$2)) : current[0];
+		}
+		return current;
+	});
+	const [lastMessage, setLastMessage] = createSignal();
+	const transition = createTransitionStatus(() => visible());
+	const state = createMemo(() => ({
+		...field.state(),
+		transitionStatus: transition.transitionStatus()
+	}));
+	const classValue = createMemo(() => transition.mounted() ? resolveClass(props.class, state()) : void 0);
+	const styleValue = createMemo(() => transition.mounted() ? resolveStyle(props.style, state()) : void 0);
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
+	createEffect(() => ({
+		visible: visible(),
+		id: id(),
+		message: visible() ? message() : void 0
+	}), (current) => {
+		latestVisible = current.visible;
+		labelable.registerMessageId(source, current.visible ? current.id : void 0);
+		if (current.visible) setLastMessage(current.message);
+	});
+	createEffect(() => ({
+		visible: visible(),
+		transitionStatus: transition.transitionStatus(),
+		element: errorElement
+	}), (current) => {
+		if (current.visible || current.transitionStatus !== "ending" || !current.element) return;
+		const abortController = new AbortController();
+		runOnceAnimationsFinish(current.element, () => {
+			if (!latestVisible) {
+				errorElement = void 0;
+				transition.setMounted(false);
+			}
+		}, abortController.signal);
+		return () => abortController.abort();
+	});
+	onCleanup(() => labelable.registerMessageId(source, void 0));
+	return Show({
+		get when() {
+			return transition.mounted();
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [internalProps.ref, ((element) => errorElement = element)],
+				get id() {
+					return id();
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others, { get children() {
+				return memo(() => {
+					return !!visible();
+				})() ? message() : lastMessage();
+			} }));
+		}
+	});
+}
+//#endregion
+//#region src/field/validity/FieldValidity.tsx
+/** Exposes the current validity data to a render callback without adding a DOM node. */
+function FieldValidity(props) {
+	const field = useFieldRootContext();
+	const combined = createMemo(() => {
+		const data = field.validityData();
+		if (!field.invalid()) return data;
+		return {
+			...data,
+			state: {
+				...data.state,
+				valid: false
+			}
+		};
+	});
+	const transition = createTransitionStatus(() => combined().state.valid === false);
+	const state = createMemo(() => {
+		const data = combined();
+		return {
+			error: data.error,
+			errors: data.errors,
+			value: data.value,
+			initialValue: data.initialValue,
+			validity: data.state,
+			transitionStatus: transition.transitionStatus()
+		};
+	});
+	return memo(() => {
+		return escape(props.children(state()));
+	});
+}
+//#endregion
+//#region src/field/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Control: () => FieldControl,
+	Description: () => FieldDescription,
+	Error: () => FieldError,
+	Item: () => FieldItem,
+	Label: () => FieldLabel,
+	Root: () => FieldRoot,
+	Validity: () => FieldValidity
+});
+//#endregion
+export { index_parts_exports as Field };