@proyecto-viviana/solidaria-components 0.4.0 → 0.5.0

package/dist/DateField2.js

@@ -1,109 +1,11 @@
 import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.js";
 import { TextContext } from "./Text.js";
 import { FormContext } from "./Form.js";
-import { addEventListener, createComponent, effect, getNextElement, insert, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { createDateField, createDateSegment, createFormValidation } from "@proyecto-viviana/solidaria";
+import { className, createComponent, effect, getNextElement, insert, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
+import { Index, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createDateField, createDateSegment, createFocusRing, createHover, createVisuallyHidden, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
 import { access, createDateFieldState } from "@proyecto-viviana/solid-stately";
-//#region src/HiddenDateInput.tsx
-/**
-* HiddenDateInput component for solidaria-components
-*
-* A hidden native date/datetime-local input for form submission.
-* Renders server-side with the initial value for SSR safety.
-*/
-var _tmpl$$1 = /*#__PURE__*/ template(`<input tabindex=-1 aria-hidden=true>`);
-function accessValue(value) {
-	return typeof value === "function" ? value() : value;
-}
-function formatDateValue(value, granularity) {
-	if (!value) return "";
-	if ("timeZone" in value) return String(value);
-	const dateValue = value;
-	const year = String(dateValue.year).padStart(4, "0");
-	const month = String(dateValue.month).padStart(2, "0");
-	const day = String(dateValue.day).padStart(2, "0");
-	if (granularity === "day") return `${year}-${month}-${day}`;
-	const hasHour = "hour" in dateValue;
-	const hour = hasHour ? String(dateValue.hour).padStart(2, "0") : "00";
-	const hasMinute = hasHour && "minute" in dateValue;
-	const minute = hasMinute ? String(dateValue.minute).padStart(2, "0") : "00";
-	if (granularity === "second" && hasMinute && "second" in dateValue) return `${year}-${month}-${day}T${hour}:${minute}:${String(dateValue.second).padStart(2, "0")}`;
-	return `${year}-${month}-${day}T${hour}:${minute}`;
-}
-function HiddenDateInput(props) {
-	const granularity = () => props.granularity ?? "day";
-	const hasValidationBehavior = () => props.validationBehavior != null;
-	const validationBehavior = () => props.validationBehavior;
-	const usesNativeValidation = () => validationBehavior() === "native";
-	const value = () => accessValue(props.value);
-	const minValue = () => accessValue(props.minValue);
-	const maxValue = () => accessValue(props.maxValue);
-	const hasTimeZoneValue = () => Boolean(value() && "timeZone" in value() || minValue() && "timeZone" in minValue() || maxValue() && "timeZone" in maxValue());
-	const inputType = () => usesNativeValidation() ? "text" : hasValidationBehavior() ? "hidden" : hasTimeZoneValue() ? "hidden" : granularity() === "day" ? "date" : "datetime-local";
-	const formattedValue = () => formatDateValue(value(), granularity());
-	const formattedMin = () => formatDateValue(minValue(), granularity());
-	const formattedMax = () => formatDateValue(maxValue(), granularity());
-	const [inputRef, setInputRef] = createSignal();
-	if (props.validationState) createFormValidation({
-		get validationBehavior() {
-			return validationBehavior();
-		},
-		get focus() {
-			return props.focus;
-		}
-	}, props.validationState, inputRef);
-	createEffect(() => {
-		const val = formattedValue();
-		const input = inputRef();
-		if (input && input.value !== val) input.value = val;
-	});
-	return (() => {
-		var _el$ = getNextElement(_tmpl$$1);
-		addEventListener(_el$, "change", usesNativeValidation() ? () => {} : void 0);
-		use((el) => {
-			setInputRef(el);
-		}, _el$);
-		effect((_p$) => {
-			var _v$ = inputType(), _v$2 = props.name, _v$3 = props.form, _v$4 = props.autoComplete, _v$5 = props.isDisabled, _v$6 = usesNativeValidation() && props.isRequired ? true : void 0, _v$7 = usesNativeValidation() || void 0, _v$8 = hasValidationBehavior() ? void 0 : formattedMin() || void 0, _v$9 = hasValidationBehavior() ? void 0 : formattedMax() || void 0, _v$0 = {
-				position: "absolute",
-				width: "1px",
-				height: "1px",
-				padding: "0",
-				margin: "-1px",
-				overflow: "hidden",
-				clip: "rect(0, 0, 0, 0)",
-				"white-space": "nowrap",
-				"border-width": "0"
-			};
-			_v$ !== _p$.e && setAttribute(_el$, "type", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "name", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$, "form", _p$.a = _v$3);
-			_v$4 !== _p$.o && setAttribute(_el$, "autocomplete", _p$.o = _v$4);
-			_v$5 !== _p$.i && setProperty(_el$, "disabled", _p$.i = _v$5);
-			_v$6 !== _p$.n && setProperty(_el$, "required", _p$.n = _v$6);
-			_v$7 !== _p$.s && setProperty(_el$, "hidden", _p$.s = _v$7);
-			_v$8 !== _p$.h && setAttribute(_el$, "min", _p$.h = _v$8);
-			_v$9 !== _p$.r && setAttribute(_el$, "max", _p$.r = _v$9);
-			_p$.d = style(_el$, _v$0, _p$.d);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0,
-			h: void 0,
-			r: void 0,
-			d: void 0
-		});
-		effect(() => setProperty(_el$, "value", formattedValue()));
-		return _el$;
-	})();
-}
-//#endregion
+import { parseDate, parseDateTime, toCalendarDate, toCalendarDateTime, toLocalTimeZone } from "@internationalized/date";
 //#region src/DateRangePickerContext.tsx
 const DateRangePickerContext = createContext(null);
 function useDateRangePickerContext() {
@@ -119,7 +21,7 @@ function useDateRangePickerContext() {
 * Pre-wired headless date field component with segment-based editing.
 * Port of react-aria-components/src/DateField.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div class="solidaria-DateField solidaria-DateField--placeholder"aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<div>`), _tmpl$3 = /*#__PURE__*/ template(`<span>`), _tmpl$4 = /*#__PURE__*/ template(`<p>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div class="solidaria-DateField solidaria-DateField--placeholder"aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<div>`), _tmpl$3 = /*#__PURE__*/ template(`<div><input tabindex=-1 form>`), _tmpl$4 = /*#__PURE__*/ template(`<input>`), _tmpl$5 = /*#__PURE__*/ template(`<span>`);
 const DateFieldContext = createContext(null);
 const DateFieldStateContext = createContext(null);
 function withFormValidationBehavior(props, formContext) {
@@ -194,8 +96,7 @@ function DateField(props) {
 * Internal DateField component that renders after client mount.
 */
 function DateFieldInner(props) {
-	const formContext = props.__formContext ?? useContext(FormContext);
-	const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, formContext), [
+	const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, props.__formContext ?? useContext(FormContext)), [
 		"children",
 		"class",
 		"style",
@@ -225,11 +126,17 @@ function DateFieldInner(props) {
 		"isDateUnavailable"
 	]);
 	const [fieldRef, setFieldRef] = createSignal(null);
+	const [validationInputRef, setValidationInputRef] = createSignal(null);
 	const state = createDateFieldState(stateProps);
 	const fieldAria = createDateField(() => ({
 		...rest,
+		isDisabled: access(stateProps.isDisabled),
+		isReadOnly: access(stateProps.isReadOnly),
+		isRequired: access(stateProps.isRequired),
+		validationBehavior: stateProps.validationBehavior ?? "native",
 		description: stateProps.description,
-		errorMessage: stateProps.errorMessage
+		errorMessage: stateProps.errorMessage,
+		inputRef: () => validationInputRef() ?? void 0
 	}), state, fieldRef);
 	const renderValues = createMemo(() => ({
 		isDisabled: state.isDisabled(),
@@ -242,7 +149,6 @@ function DateFieldInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-DateField"
 	}, renderValues);
-	const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
 	const textSlots = { slots: {
 		get description() {
 			return fieldAria.descriptionProps;
@@ -255,97 +161,158 @@ function DateFieldInner(props) {
 		value: state,
 		get children() {
 			return createComponent(DateFieldContext.Provider, {
-				get value() {
-					return {
-						state,
-						aria: {
-							labelProps: fieldAria.labelProps,
-							inputProps: fieldAria.inputProps,
-							descriptionProps: fieldAria.descriptionProps,
-							errorMessageProps: fieldAria.errorMessageProps
+				value: {
+					state,
+					aria: {
+						get labelProps() {
+							return fieldAria.labelProps;
+						},
+						get inputProps() {
+							return fieldAria.fieldProps;
+						},
+						get hiddenInputProps() {
+							return mergeProps$2(fieldAria.inputProps, { ref: setValidationInputRef });
+						},
+						get descriptionProps() {
+							return fieldAria.descriptionProps;
+						},
+						get errorMessageProps() {
+							return fieldAria.errorMessageProps;
 						}
-					};
+					}
 				},
 				get children() {
 					return [(() => {
 						var _el$2 = getNextElement(_tmpl$2);
 						use(setFieldRef, _el$2);
-						spread(_el$2, mergeProps(() => fieldAria.fieldProps, {
-							get ["class"]() {
-								return renderProps.class();
-							},
-							get style() {
-								return renderProps.style();
-							},
-							get ["data-disabled"]() {
-								return dataAttr(state.isDisabled());
-							},
-							get ["data-readonly"]() {
-								return dataAttr(state.isReadOnly());
-							},
-							get ["data-required"]() {
-								return dataAttr(state.isRequired());
-							},
-							get ["data-invalid"]() {
-								return dataAttr(state.isInvalid());
-							}
-						}), false, true);
 						insert(_el$2, createComponent(Provider, {
 							values: [[TextContext, textSlots]],
 							get children() {
 								return local.children;
 							}
 						}));
-						runHydrationEvents();
+						effect((_p$) => {
+							var _v$ = renderProps.class(), _v$2 = renderProps.style(), _v$3 = dataAttr(state.isDisabled()), _v$4 = dataAttr(state.isReadOnly()), _v$5 = dataAttr(state.isRequired()), _v$6 = dataAttr(state.isInvalid());
+							_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+							_p$.t = style(_el$2, _v$2, _p$.t);
+							_v$3 !== _p$.a && setAttribute(_el$2, "data-disabled", _p$.a = _v$3);
+							_v$4 !== _p$.o && setAttribute(_el$2, "data-readonly", _p$.o = _v$4);
+							_v$5 !== _p$.i && setAttribute(_el$2, "data-required", _p$.i = _v$5);
+							_v$6 !== _p$.n && setAttribute(_el$2, "data-invalid", _p$.n = _v$6);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0,
+							i: void 0,
+							n: void 0
+						});
 						return _el$2;
-					})(), createComponent(Show, {
-						get when() {
+					})(), createComponent(RootHiddenDateInput, {
+						get autoComplete() {
+							return rest.autoComplete;
+						},
+						get name() {
 							return rest.name;
 						},
-						get children() {
-							return createComponent(HiddenDateInput, {
-								get name() {
-									return rest.name;
-								},
-								get form() {
-									return rest.form;
-								},
-								get value() {
-									return state.value();
-								},
-								get autoComplete() {
-									return rest.autoComplete;
-								},
-								get isDisabled() {
-									return state.isDisabled();
-								},
-								get isRequired() {
-									return state.isRequired();
-								},
-								get validationBehavior() {
-									return validationBehavior();
-								},
-								validationState: state,
-								focus: () => {
-									fieldRef()?.querySelector("[role=\"spinbutton\"]")?.focus();
-								},
-								get minValue() {
-									return access(stateProps.minValue);
-								},
-								get maxValue() {
-									return access(stateProps.maxValue);
-								},
-								get granularity() {
-									return state.granularity;
-								}
-							});
-						}
+						get isDisabled() {
+							return state.isDisabled();
+						},
+						state
 					})];
 				}
 			});
 		}
 	});
 }
+const HIDDEN_DATE_SEGMENTS = [
+	"day",
+	"month",
+	"year"
+];
+const HIDDEN_TIME_SEGMENTS = [
+	"hour",
+	"minute",
+	"second"
+];
+const HIDDEN_GRANULARITY_MAP = {
+	hour: 1,
+	minute: 2,
+	second: 3
+};
+/**
+* The always-rendered hidden date input at the DateField root — a faithful port
+* of react-aria-components' HiddenDateInput (private/HiddenDateInput.mjs). It is
+* NOT a validation input: it is a clipped, aria-hidden, tabIndex={-1} native
+* date input that mirrors the current value for browser autofill. `form=""`
+* detaches it from form submission (the DateInput's <Input> submits), so it
+* never double-counts in FormData. RAC renders it unconditionally, which is why
+* it appears as the trailing tabindex="-1" element in the focus trail.
+*/
+function RootHiddenDateInput(props) {
+	const { visuallyHiddenProps } = createVisuallyHidden(() => ({ style: {
+		position: "fixed",
+		top: "0",
+		left: "0"
+	} }));
+	const granularity = () => props.state.granularity ?? "day";
+	const inputStep = () => {
+		const g = granularity();
+		if (g === "second") return 1;
+		if (g === "hour") return 3600;
+		return 60;
+	};
+	const inputType = () => granularity() === "day" ? "date" : "datetime-local";
+	const dateValue = () => {
+		const value = props.state.value();
+		if (!value) return "";
+		if (granularity() === "day") return toCalendarDate(value).toString();
+		return toCalendarDateTime("timeZone" in value ? toLocalTimeZone(value) : value).toString();
+	};
+	const onChange = (event) => {
+		const targetString = (event.currentTarget.value ?? "").toString();
+		if (!targetString) return;
+		try {
+			const g = granularity();
+			const targetValue = g === "day" ? parseDate(targetString) : parseDateTime(targetString);
+			let timeSegments = HIDDEN_TIME_SEGMENTS;
+			if (HIDDEN_TIME_SEGMENTS.includes(g)) timeSegments = HIDDEN_TIME_SEGMENTS.slice(0, HIDDEN_GRANULARITY_MAP[g]);
+			const state = props.state;
+			if (typeof state.setSegment === "function") for (const type in targetValue) {
+				if (HIDDEN_DATE_SEGMENTS.includes(type)) state.setSegment(type, targetValue[type]);
+				if (timeSegments.includes(type)) state.setSegment(type, targetValue[type]);
+			}
+			state.setValue(targetValue);
+		} catch {}
+	};
+	return (() => {
+		var _el$3 = getNextElement(_tmpl$3), _el$4 = _el$3.firstChild;
+		spread(_el$3, mergeProps(() => visuallyHiddenProps(), {
+			"aria-hidden": "true",
+			"data-testid": "hidden-dateinput-container"
+		}), false, true);
+		_el$4.addEventListener("change", onChange);
+		effect((_p$) => {
+			var _v$7 = props.autoComplete, _v$8 = props.isDisabled, _v$9 = inputType(), _v$0 = props.name, _v$1 = inputStep();
+			_v$7 !== _p$.e && setAttribute(_el$4, "autocomplete", _p$.e = _v$7);
+			_v$8 !== _p$.t && setProperty(_el$4, "disabled", _p$.t = _v$8);
+			_v$9 !== _p$.a && setAttribute(_el$4, "type", _p$.a = _v$9);
+			_v$0 !== _p$.o && setAttribute(_el$4, "name", _p$.o = _v$0);
+			_v$1 !== _p$.i && setAttribute(_el$4, "step", _p$.i = _v$1);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		effect(() => setProperty(_el$4, "value", dateValue()));
+		runHydrationEvents();
+		return _el$3;
+	})();
+}
 /**
 * The input area containing date segments.
 */
@@ -363,6 +330,11 @@ function DateInput(props) {
 		style: props.style,
 		defaultClassName: "solidaria-DateInput"
 	}, renderValues);
+	const inputDivProps = createMemo(() => mergeProps$2(aria.inputProps, {
+		onFocusIn: () => setIsFocused(true),
+		onFocusOut: () => setIsFocused(false),
+		style: renderProps.style()
+	}));
 	createEffect(() => {
 		const element = inputRef();
 		const handler = props.onPointerDownCapture;
@@ -374,32 +346,45 @@ function DateInput(props) {
 	return createComponent(DateFieldContext.Provider, {
 		value: context,
 		get children() {
-			var _el$3 = getNextElement(_tmpl$2);
-			use(setInputRef, _el$3);
-			spread(_el$3, mergeProps(() => aria.inputProps, {
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return renderProps.style();
-				},
-				get ["data-disabled"]() {
-					return dataAttr(state.isDisabled());
-				},
-				get ["data-focused"]() {
-					return dataAttr(isFocused());
+			return [(() => {
+				var _el$5 = getNextElement(_tmpl$2);
+				use(setInputRef, _el$5);
+				spread(_el$5, mergeProps(inputDivProps, {
+					get ["class"]() {
+						return renderProps.class();
+					},
+					get ["data-disabled"]() {
+						return dataAttr(state.isDisabled());
+					},
+					get ["data-focused"]() {
+						return dataAttr(isFocused());
+					}
+				}), false, true);
+				insert(_el$5, createComponent(Index, {
+					get each() {
+						return state.segments();
+					},
+					children: (segment) => {
+						const liveSegment = new Proxy({}, {
+							get: (_t, key) => segment()[key],
+							has: (_t, key) => key in segment()
+						});
+						return props.children?.(liveSegment);
+					}
+				}));
+				runHydrationEvents();
+				return _el$5;
+			})(), createComponent(Show, {
+				get when() {
+					return aria.hiddenInputProps;
 				},
-				"onFocusIn": () => setIsFocused(true),
-				"onFocusOut": () => setIsFocused(false)
-			}), false, true);
-			insert(_el$3, createComponent(For, {
-				get each() {
-					return state.segments();
-				},
-				children: (segment) => props.children?.(segment)
-			}));
-			runHydrationEvents();
-			return _el$3;
+				children: (hiddenInputProps) => (() => {
+					var _el$6 = getNextElement(_tmpl$4);
+					spread(_el$6, mergeProps(() => hiddenInputProps()), false, false);
+					runHydrationEvents();
+					return _el$6;
+				})()
+			})];
 		}
 	});
 }
@@ -409,13 +394,21 @@ function DateInput(props) {
 function DateSegment(props) {
 	const { state } = useDateFieldContext();
 	const [segmentRef, setSegmentRef] = createSignal(null);
-	const segmentAria = createDateSegment({ segment: props.segment }, state, segmentRef);
+	const segmentAria = createDateSegment({ get segment() {
+		return props.segment;
+	} }, state, segmentRef);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover(() => ({ isDisabled: state.isDisabled() || props.segment.type === "literal" }));
 	const renderValues = createMemo(() => ({
-		isFocused: segmentAria.isFocused,
-		isEditable: segmentAria.isEditable,
-		isPlaceholder: segmentAria.isPlaceholder,
+		isHovered: isHovered(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isPlaceholder: props.segment.isPlaceholder,
+		isReadOnly: state.isReadOnly(),
+		isDisabled: state.isDisabled(),
+		isInvalid: state.isInvalid(),
 		type: props.segment.type,
-		text: segmentAria.text
+		text: props.segment.text
 	}));
 	const renderProps = useRenderProps({
 		get children() {
@@ -427,73 +420,83 @@ function DateSegment(props) {
 	}, renderValues);
 	const getChildren = () => {
 		if (typeof props.children === "function") return renderProps.renderChildren();
-		return segmentAria.text;
+		return props.segment.text;
 	};
+	const segmentElementProps = createMemo(() => mergeProps$2(segmentAria.segmentProps, focusProps, hoverProps, { style: renderProps.style() }));
 	return (() => {
-		var _el$4 = getNextElement(_tmpl$3);
-		use(setSegmentRef, _el$4);
-		spread(_el$4, mergeProps(() => segmentAria.segmentProps, {
+		var _el$7 = getNextElement(_tmpl$5);
+		use(setSegmentRef, _el$7);
+		spread(_el$7, mergeProps(segmentElementProps, {
 			get ["class"]() {
 				return renderProps.class();
 			},
-			get style() {
-				return renderProps.style();
+			get ["data-placeholder"]() {
+				return props.segment.isPlaceholder || void 0;
 			},
-			get ["data-focused"]() {
-				return dataAttr(segmentAria.isFocused);
+			get ["data-invalid"]() {
+				return state.isInvalid() || void 0;
 			},
-			get ["data-editable"]() {
-				return dataAttr(segmentAria.isEditable);
+			get ["data-readonly"]() {
+				return state.isReadOnly() || void 0;
 			},
-			get ["data-placeholder"]() {
-				return dataAttr(segmentAria.isPlaceholder);
+			get ["data-disabled"]() {
+				return state.isDisabled() || void 0;
 			},
 			get ["data-type"]() {
 				return props.segment.type;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return isFocusVisible() || void 0;
 			}
 		}), false, true);
-		insert(_el$4, getChildren);
+		insert(_el$7, getChildren);
 		runHydrationEvents();
-		return _el$4;
+		return _el$7;
 	})();
 }
 function DateFieldLabel(props) {
 	const { aria } = useDateFieldContext();
 	return (() => {
-		var _el$5 = getNextElement(_tmpl$3);
-		spread(_el$5, mergeProps(() => aria.labelProps, { get ["class"]() {
+		var _el$8 = getNextElement(_tmpl$5);
+		spread(_el$8, mergeProps(() => aria.labelProps, { get ["class"]() {
 			return props.class;
 		} }), false, true);
-		insert(_el$5, () => props.children);
+		insert(_el$8, () => props.children);
 		runHydrationEvents();
-		return _el$5;
+		return _el$8;
 	})();
 }
 function DateFieldDescription(props) {
 	const { aria } = useDateFieldContext();
 	return (() => {
-		var _el$6 = getNextElement(_tmpl$4);
-		spread(_el$6, mergeProps(() => aria.descriptionProps, { get ["class"]() {
+		var _el$9 = getNextElement(_tmpl$5);
+		spread(_el$9, mergeProps(() => aria.descriptionProps, { get ["class"]() {
 			return props.class;
 		} }), false, true);
-		insert(_el$6, () => props.children);
+		insert(_el$9, () => props.children);
 		runHydrationEvents();
-		return _el$6;
+		return _el$9;
 	})();
 }
 function DateFieldErrorMessage(props) {
 	const { aria } = useDateFieldContext();
 	return (() => {
-		var _el$7 = getNextElement(_tmpl$4);
-		spread(_el$7, mergeProps(() => aria.errorMessageProps, { get ["class"]() {
+		var _el$0 = getNextElement(_tmpl$5);
+		spread(_el$0, mergeProps(() => aria.errorMessageProps, { get ["class"]() {
 			return props.class;
 		} }), false, true);
-		insert(_el$7, () => props.children);
+		insert(_el$0, () => props.children);
 		runHydrationEvents();
-		return _el$7;
+		return _el$0;
 	})();
 }
 //#endregion
-export { DateFieldLabel as a, DateSegment as c, useDateRangePickerContext as d, HiddenDateInput as f, DateFieldErrorMessage as i, useDateFieldContext as l, DateFieldContext as n, DateFieldStateContext as o, DateFieldDescription as r, DateInput as s, DateField as t, DateRangePickerContext as u };
+export { DateFieldLabel as a, DateSegment as c, useDateRangePickerContext as d, DateFieldErrorMessage as i, useDateFieldContext as l, DateFieldContext as n, DateFieldStateContext as o, DateFieldDescription as r, DateInput as s, DateField as t, DateRangePickerContext as u };
 
 //# sourceMappingURL=DateField2.js.map