@cube-dev/ui-kit 0.181.0 → 0.183.0

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -14,6 +14,7 @@ import { _Calendar } from "../../other/Calendar/Calendar.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { DatePickerElement } from "./DatePickerElement.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -31,184 +32,479 @@ const DateRangeDash = tasty({
 	}
 });
 function DateRangeSeparatedPicker(props, ref) {
+	const $ = c(138);
 	const { t } = useI18n();
-	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
-	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
-	extractStyles(props, CONTAINER_STYLES);
-	let { qa, size, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
-	let targetRef = useRef(null);
-	let state = useDateRangePickerState({ ...props });
-	let startState = useDatePickerState({
-		...props,
-		onChange: null,
-		value: state.value?.start
-	});
-	let endState = useDatePickerState({
-		...props,
-		onChange: null,
-		value: state.value?.end
-	});
-	let startFocusRingProps = useFocusRing({
-		within: true,
-		isTextInput: true,
-		autoFocus
-	});
-	let startFocusProps = useFocusRing({
-		within: false,
-		isTextInput: false,
-		autoFocus
-	});
-	let endFocusRingProps = useFocusRing({
-		within: true,
-		isTextInput: true,
-		autoFocus
-	});
-	let endFocusProps = useFocusRing({
-		within: false,
-		isTextInput: false,
-		autoFocus
-	});
-	let domRef = useFocusManagerRef(ref);
-	let { groupProps, labelProps, startFieldProps, endFieldProps } = useDateRangePicker(props, state, targetRef);
-	let startProps = useDatePicker(props, startState, targetRef);
-	let endProps = useDatePicker(props, endState, targetRef);
-	let placeholder = placeholderValue;
-	let timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
-	let timeMinValue = props.minValue && "hour" in props.minValue ? props.minValue : void 0;
-	let timeMaxValue = props.maxValue && "hour" in props.maxValue ? props.maxValue : void 0;
-	let timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
-	let showTimeField = !!timeGranularity;
-	function onChange(value, type) {
-		if (type === "start") {
-			const newRange = {
-				...state.value,
-				start: value
-			};
-			if (newRange.start && newRange.end && newRange.end.compare(newRange.start) < 0) newRange.end = newRange.start;
-			state.setValue(newRange);
-			startProps.calendarProps.onChange(value);
-			startState.setOpen(false);
-		} else {
-			const newRange = {
-				...state.value,
-				end: value
-			};
-			if (newRange.start && newRange.end && newRange.end.compare(newRange.start) < 0) newRange.start = newRange.end;
-			state.setValue(newRange);
-			endProps.calendarProps.onChange(value);
-			endState.setOpen(false);
-		}
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { defaultValidationTrigger: "onBlur" };
+		$[0] = t0;
+	} else t0 = $[0];
+	props = useFieldProps(props, t0);
+	let t1;
+	if ($[1] !== props) {
+		props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+		t1 = extractStyles(props, CONTAINER_STYLES);
+		$[1] = props;
+		$[2] = t1;
+		$[3] = props;
+	} else {
+		t1 = $[2];
+		props = $[3];
 	}
-	return wrapWithField(/* @__PURE__ */ jsxs(DatePickerElement, {
-		ref: targetRef,
-		...groupProps,
-		styles: props.wrapperStyles,
-		qa: qa || "DateRangeSeparatedPicker",
-		"data-input-type": "daterangeseparatedpicker",
-		children: [
-			/* @__PURE__ */ jsx(_DateInputBase, {
-				disableFocusRing: startFocusProps.isFocused,
-				isDisabled,
-				isInvalid,
-				isValid,
-				size,
-				...startFocusRingProps.focusProps,
-				suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
-					hideArrow: true,
-					type: "popover",
-					mobileType: "tray",
-					placement: "bottom right",
-					targetRef,
-					isOpen: startState.isOpen,
-					shouldFlip: props.shouldFlip,
-					onOpenChange: startState.setOpen,
-					children: [/* @__PURE__ */ jsx(DatePickerButton, {
-						size,
-						...mergeProps$1(startProps.buttonProps, startFocusProps.focusProps),
-						isDisabled
-					}), /* @__PURE__ */ jsxs(Dialog, {
-						...startProps.dialogProps,
-						width: "max-content",
-						children: [/* @__PURE__ */ jsx(_Calendar, {
-							...startProps.calendarProps,
-							defaultFocusedValue: state.value?.start || state.value?.end || void 0,
-							selectedRange: state.value?.start && state.value?.end ? state.value : void 0,
-							onChange: (value) => onChange(value, "start")
-						}), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
-							padding: "1x",
-							label: t("datePicker.time", "Time"),
-							value: startState.timeValue,
-							placeholderValue: timePlaceholder,
-							granularity: timeGranularity,
-							minValue: timeMinValue,
-							maxValue: timeMaxValue,
-							hourCycle: props.hourCycle,
-							hideTimeZone: props.hideTimeZone,
-							onChange: startState.setTimeValue
-						})]
-					})]
-				}),
-				children: /* @__PURE__ */ jsx(DatePickerInput, {
-					useLocale: useLocaleProp,
-					...startFieldProps
-				})
-			}),
-			/* @__PURE__ */ jsx(DateRangeDash, {}),
-			/* @__PURE__ */ jsx(_DateInputBase, {
-				disableFocusRing: endFocusProps.isFocused,
-				isDisabled,
-				isInvalid,
-				isValid,
-				size,
-				...endFocusRingProps.focusProps,
-				suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
-					hideArrow: true,
-					type: "popover",
-					mobileType: "tray",
-					placement: "bottom right",
-					targetRef,
-					isOpen: endState.isOpen,
-					shouldFlip: props.shouldFlip,
-					onOpenChange: endState.setOpen,
-					children: [/* @__PURE__ */ jsx(DatePickerButton, {
-						"aria-label": t("datePicker.showEndCalendar", "Show calendar for the end date"),
-						size,
-						...mergeProps$1(endFocusProps.focusProps, endProps.buttonProps),
-						isDisabled
-					}), /* @__PURE__ */ jsxs(Dialog, {
-						...endProps.dialogProps,
-						width: "max-content",
-						children: [/* @__PURE__ */ jsx(_Calendar, {
-							...endProps.calendarProps,
-							defaultFocusedValue: state.value?.end || state.value?.start || void 0,
-							selectedRange: state.value?.start && state.value?.end ? state.value : void 0,
-							onChange: (value) => {
-								onChange(value, "end");
-							}
-						}), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
-							padding: "1x",
-							label: t("datePicker.time", "Time"),
-							value: endState.timeValue,
-							placeholderValue: timePlaceholder,
-							granularity: timeGranularity,
-							minValue: timeMinValue,
-							maxValue: timeMaxValue,
-							hourCycle: props.hourCycle,
-							hideTimeZone: props.hideTimeZone,
-							onChange: endState.setTimeValue
-						})]
-					})]
-				}),
-				children: /* @__PURE__ */ jsx(DatePickerInput, {
-					useLocale: useLocaleProp,
-					...endFieldProps
-				})
-			})
-		]
-	}), domRef, {
-		...props,
-		labelProps: mergeProps$1(props.labelProps, labelProps)
-	});
+	let t2;
+	if ($[4] !== props.wrapperStyles || $[5] !== t1) {
+		t2 = {
+			...t1,
+			...props.wrapperStyles
+		};
+		$[4] = props.wrapperStyles;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	const styles = t2;
+	const { qa, size, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
+	const targetRef = useRef(null);
+	let t3;
+	if ($[7] !== props) {
+		t3 = { ...props };
+		$[7] = props;
+		$[8] = t3;
+	} else t3 = $[8];
+	const state = useDateRangePickerState(t3);
+	const t4 = state.value?.start;
+	let t5;
+	if ($[9] !== props || $[10] !== t4) {
+		t5 = {
+			...props,
+			onChange: null,
+			value: t4
+		};
+		$[9] = props;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const startState = useDatePickerState(t5);
+	const t6 = state.value?.end;
+	let t7;
+	if ($[12] !== props || $[13] !== t6) {
+		t7 = {
+			...props,
+			onChange: null,
+			value: t6
+		};
+		$[12] = props;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	const endState = useDatePickerState(t7);
+	let t8;
+	if ($[15] !== autoFocus) {
+		t8 = {
+			within: true,
+			isTextInput: true,
+			autoFocus
+		};
+		$[15] = autoFocus;
+		$[16] = t8;
+	} else t8 = $[16];
+	const startFocusRingProps = useFocusRing(t8);
+	let t9;
+	if ($[17] !== autoFocus) {
+		t9 = {
+			within: false,
+			isTextInput: false,
+			autoFocus
+		};
+		$[17] = autoFocus;
+		$[18] = t9;
+	} else t9 = $[18];
+	const startFocusProps = useFocusRing(t9);
+	let t10;
+	if ($[19] !== autoFocus) {
+		t10 = {
+			within: true,
+			isTextInput: true,
+			autoFocus
+		};
+		$[19] = autoFocus;
+		$[20] = t10;
+	} else t10 = $[20];
+	const endFocusRingProps = useFocusRing(t10);
+	let t11;
+	if ($[21] !== autoFocus) {
+		t11 = {
+			within: false,
+			isTextInput: false,
+			autoFocus
+		};
+		$[21] = autoFocus;
+		$[22] = t11;
+	} else t11 = $[22];
+	const endFocusProps = useFocusRing(t11);
+	const domRef = useFocusManagerRef(ref);
+	const { groupProps, labelProps, startFieldProps, endFieldProps } = useDateRangePicker(props, state, targetRef);
+	const startProps = useDatePicker(props, startState, targetRef);
+	const endProps = useDatePicker(props, endState, targetRef);
+	const placeholder = placeholderValue;
+	const timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
+	const timeMinValue = props.minValue && "hour" in props.minValue ? props.minValue : void 0;
+	const timeMaxValue = props.maxValue && "hour" in props.maxValue ? props.maxValue : void 0;
+	const timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
+	const showTimeField = !!timeGranularity;
+	let t12;
+	if ($[23] !== endProps.calendarProps || $[24] !== endState || $[25] !== startProps.calendarProps || $[26] !== startState || $[27] !== state) {
+		t12 = function onChange(value, type) {
+			if (type === "start") {
+				const newRange = {
+					...state.value,
+					start: value
+				};
+				if (newRange.start && newRange.end && newRange.end.compare(newRange.start) < 0) newRange.end = newRange.start;
+				state.setValue(newRange);
+				startProps.calendarProps.onChange(value);
+				startState.setOpen(false);
+			} else {
+				const newRange_0 = {
+					...state.value,
+					end: value
+				};
+				if (newRange_0.start && newRange_0.end && newRange_0.end.compare(newRange_0.start) < 0) newRange_0.start = newRange_0.end;
+				state.setValue(newRange_0);
+				endProps.calendarProps.onChange(value);
+				endState.setOpen(false);
+			}
+		};
+		$[23] = endProps.calendarProps;
+		$[24] = endState;
+		$[25] = startProps.calendarProps;
+		$[26] = startState;
+		$[27] = state;
+		$[28] = t12;
+	} else t12 = $[28];
+	const onChange = t12;
+	const t13 = qa || "DateRangeSeparatedPicker";
+	const t14 = startFocusProps.isFocused;
+	const t15 = startFocusRingProps.focusProps;
+	const t16 = startState.isOpen;
+	const t17 = props.shouldFlip;
+	const t18 = startState.setOpen;
+	let t19;
+	if ($[29] !== startFocusProps.focusProps || $[30] !== startProps.buttonProps) {
+		t19 = mergeProps$1(startProps.buttonProps, startFocusProps.focusProps);
+		$[29] = startFocusProps.focusProps;
+		$[30] = startProps.buttonProps;
+		$[31] = t19;
+	} else t19 = $[31];
+	let t20;
+	if ($[32] !== isDisabled || $[33] !== size || $[34] !== t19) {
+		t20 = /* @__PURE__ */ jsx(DatePickerButton, {
+			size,
+			...t19,
+			isDisabled
+		});
+		$[32] = isDisabled;
+		$[33] = size;
+		$[34] = t19;
+		$[35] = t20;
+	} else t20 = $[35];
+	const t21 = state.value?.start || state.value?.end || void 0;
+	const t22 = state.value?.start && state.value?.end ? state.value : void 0;
+	let t23;
+	if ($[36] !== onChange) {
+		t23 = (value_0) => onChange(value_0, "start");
+		$[36] = onChange;
+		$[37] = t23;
+	} else t23 = $[37];
+	let t24;
+	if ($[38] !== startProps.calendarProps || $[39] !== t21 || $[40] !== t22 || $[41] !== t23) {
+		t24 = /* @__PURE__ */ jsx(_Calendar, {
+			...startProps.calendarProps,
+			defaultFocusedValue: t21,
+			selectedRange: t22,
+			onChange: t23
+		});
+		$[38] = startProps.calendarProps;
+		$[39] = t21;
+		$[40] = t22;
+		$[41] = t23;
+		$[42] = t24;
+	} else t24 = $[42];
+	let t25;
+	if ($[43] !== props.hideTimeZone || $[44] !== props.hourCycle || $[45] !== showTimeField || $[46] !== startState.setTimeValue || $[47] !== startState.timeValue || $[48] !== t || $[49] !== timeGranularity || $[50] !== timeMaxValue || $[51] !== timeMinValue || $[52] !== timePlaceholder) {
+		t25 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+			padding: "1x",
+			label: t("datePicker.time", "Time"),
+			value: startState.timeValue,
+			placeholderValue: timePlaceholder,
+			granularity: timeGranularity,
+			minValue: timeMinValue,
+			maxValue: timeMaxValue,
+			hourCycle: props.hourCycle,
+			hideTimeZone: props.hideTimeZone,
+			onChange: startState.setTimeValue
+		});
+		$[43] = props.hideTimeZone;
+		$[44] = props.hourCycle;
+		$[45] = showTimeField;
+		$[46] = startState.setTimeValue;
+		$[47] = startState.timeValue;
+		$[48] = t;
+		$[49] = timeGranularity;
+		$[50] = timeMaxValue;
+		$[51] = timeMinValue;
+		$[52] = timePlaceholder;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== startProps.dialogProps || $[55] !== t24 || $[56] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Dialog, {
+			...startProps.dialogProps,
+			width: "max-content",
+			children: [t24, t25]
+		});
+		$[54] = startProps.dialogProps;
+		$[55] = t24;
+		$[56] = t25;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== props.shouldFlip || $[59] !== startState.isOpen || $[60] !== startState.setOpen || $[61] !== t20 || $[62] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(DialogTrigger, {
+			hideArrow: true,
+			type: "popover",
+			mobileType: "tray",
+			placement: "bottom right",
+			targetRef,
+			isOpen: t16,
+			shouldFlip: t17,
+			onOpenChange: t18,
+			children: [t20, t26]
+		});
+		$[58] = props.shouldFlip;
+		$[59] = startState.isOpen;
+		$[60] = startState.setOpen;
+		$[61] = t20;
+		$[62] = t26;
+		$[63] = t27;
+	} else t27 = $[63];
+	let t28;
+	if ($[64] !== startFieldProps || $[65] !== useLocaleProp) {
+		t28 = /* @__PURE__ */ jsx(DatePickerInput, {
+			useLocale: useLocaleProp,
+			...startFieldProps
+		});
+		$[64] = startFieldProps;
+		$[65] = useLocaleProp;
+		$[66] = t28;
+	} else t28 = $[66];
+	let t29;
+	if ($[67] !== isDisabled || $[68] !== isInvalid || $[69] !== isValid || $[70] !== size || $[71] !== startFocusProps.isFocused || $[72] !== startFocusRingProps.focusProps || $[73] !== t27 || $[74] !== t28) {
+		t29 = /* @__PURE__ */ jsx(_DateInputBase, {
+			disableFocusRing: t14,
+			isDisabled,
+			isInvalid,
+			isValid,
+			size,
+			...t15,
+			suffix: t27,
+			children: t28
+		});
+		$[67] = isDisabled;
+		$[68] = isInvalid;
+		$[69] = isValid;
+		$[70] = size;
+		$[71] = startFocusProps.isFocused;
+		$[72] = startFocusRingProps.focusProps;
+		$[73] = t27;
+		$[74] = t28;
+		$[75] = t29;
+	} else t29 = $[75];
+	let t30;
+	if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+		t30 = /* @__PURE__ */ jsx(DateRangeDash, {});
+		$[76] = t30;
+	} else t30 = $[76];
+	const t31 = endFocusProps.isFocused;
+	const t32 = endFocusRingProps.focusProps;
+	const t33 = endState.isOpen;
+	const t34 = props.shouldFlip;
+	const t35 = endState.setOpen;
+	let t36;
+	if ($[77] !== t) {
+		t36 = t("datePicker.showEndCalendar", "Show calendar for the end date");
+		$[77] = t;
+		$[78] = t36;
+	} else t36 = $[78];
+	let t37;
+	if ($[79] !== endFocusProps.focusProps || $[80] !== endProps.buttonProps) {
+		t37 = mergeProps$1(endFocusProps.focusProps, endProps.buttonProps);
+		$[79] = endFocusProps.focusProps;
+		$[80] = endProps.buttonProps;
+		$[81] = t37;
+	} else t37 = $[81];
+	let t38;
+	if ($[82] !== isDisabled || $[83] !== size || $[84] !== t36 || $[85] !== t37) {
+		t38 = /* @__PURE__ */ jsx(DatePickerButton, {
+			"aria-label": t36,
+			size,
+			...t37,
+			isDisabled
+		});
+		$[82] = isDisabled;
+		$[83] = size;
+		$[84] = t36;
+		$[85] = t37;
+		$[86] = t38;
+	} else t38 = $[86];
+	const t39 = state.value?.end || state.value?.start || void 0;
+	const t40 = state.value?.start && state.value?.end ? state.value : void 0;
+	let t41;
+	if ($[87] !== onChange) {
+		t41 = (value_1) => {
+			onChange(value_1, "end");
+		};
+		$[87] = onChange;
+		$[88] = t41;
+	} else t41 = $[88];
+	let t42;
+	if ($[89] !== endProps.calendarProps || $[90] !== t39 || $[91] !== t40 || $[92] !== t41) {
+		t42 = /* @__PURE__ */ jsx(_Calendar, {
+			...endProps.calendarProps,
+			defaultFocusedValue: t39,
+			selectedRange: t40,
+			onChange: t41
+		});
+		$[89] = endProps.calendarProps;
+		$[90] = t39;
+		$[91] = t40;
+		$[92] = t41;
+		$[93] = t42;
+	} else t42 = $[93];
+	let t43;
+	if ($[94] !== endState.setTimeValue || $[95] !== endState.timeValue || $[96] !== props.hideTimeZone || $[97] !== props.hourCycle || $[98] !== showTimeField || $[99] !== t || $[100] !== timeGranularity || $[101] !== timeMaxValue || $[102] !== timeMinValue || $[103] !== timePlaceholder) {
+		t43 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+			padding: "1x",
+			label: t("datePicker.time", "Time"),
+			value: endState.timeValue,
+			placeholderValue: timePlaceholder,
+			granularity: timeGranularity,
+			minValue: timeMinValue,
+			maxValue: timeMaxValue,
+			hourCycle: props.hourCycle,
+			hideTimeZone: props.hideTimeZone,
+			onChange: endState.setTimeValue
+		});
+		$[94] = endState.setTimeValue;
+		$[95] = endState.timeValue;
+		$[96] = props.hideTimeZone;
+		$[97] = props.hourCycle;
+		$[98] = showTimeField;
+		$[99] = t;
+		$[100] = timeGranularity;
+		$[101] = timeMaxValue;
+		$[102] = timeMinValue;
+		$[103] = timePlaceholder;
+		$[104] = t43;
+	} else t43 = $[104];
+	let t44;
+	if ($[105] !== endProps.dialogProps || $[106] !== t42 || $[107] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(Dialog, {
+			...endProps.dialogProps,
+			width: "max-content",
+			children: [t42, t43]
+		});
+		$[105] = endProps.dialogProps;
+		$[106] = t42;
+		$[107] = t43;
+		$[108] = t44;
+	} else t44 = $[108];
+	let t45;
+	if ($[109] !== endState.isOpen || $[110] !== endState.setOpen || $[111] !== props.shouldFlip || $[112] !== t38 || $[113] !== t44) {
+		t45 = /* @__PURE__ */ jsxs(DialogTrigger, {
+			hideArrow: true,
+			type: "popover",
+			mobileType: "tray",
+			placement: "bottom right",
+			targetRef,
+			isOpen: t33,
+			shouldFlip: t34,
+			onOpenChange: t35,
+			children: [t38, t44]
+		});
+		$[109] = endState.isOpen;
+		$[110] = endState.setOpen;
+		$[111] = props.shouldFlip;
+		$[112] = t38;
+		$[113] = t44;
+		$[114] = t45;
+	} else t45 = $[114];
+	let t46;
+	if ($[115] !== endFieldProps || $[116] !== useLocaleProp) {
+		t46 = /* @__PURE__ */ jsx(DatePickerInput, {
+			useLocale: useLocaleProp,
+			...endFieldProps
+		});
+		$[115] = endFieldProps;
+		$[116] = useLocaleProp;
+		$[117] = t46;
+	} else t46 = $[117];
+	let t47;
+	if ($[118] !== endFocusProps.isFocused || $[119] !== endFocusRingProps.focusProps || $[120] !== isDisabled || $[121] !== isInvalid || $[122] !== isValid || $[123] !== size || $[124] !== t45 || $[125] !== t46) {
+		t47 = /* @__PURE__ */ jsx(_DateInputBase, {
+			disableFocusRing: t31,
+			isDisabled,
+			isInvalid,
+			isValid,
+			size,
+			...t32,
+			suffix: t45,
+			children: t46
+		});
+		$[118] = endFocusProps.isFocused;
+		$[119] = endFocusRingProps.focusProps;
+		$[120] = isDisabled;
+		$[121] = isInvalid;
+		$[122] = isValid;
+		$[123] = size;
+		$[124] = t45;
+		$[125] = t46;
+		$[126] = t47;
+	} else t47 = $[126];
+	let t48;
+	if ($[127] !== groupProps || $[128] !== styles || $[129] !== t13 || $[130] !== t29 || $[131] !== t47) {
+		t48 = /* @__PURE__ */ jsxs(DatePickerElement, {
+			ref: targetRef,
+			...groupProps,
+			styles,
+			qa: t13,
+			"data-input-type": "daterangeseparatedpicker",
+			children: [
+				t29,
+				t30,
+				t47
+			]
+		});
+		$[127] = groupProps;
+		$[128] = styles;
+		$[129] = t13;
+		$[130] = t29;
+		$[131] = t47;
+		$[132] = t48;
+	} else t48 = $[132];
+	const component = t48;
+	let t49;
+	if ($[133] !== component || $[134] !== domRef || $[135] !== labelProps || $[136] !== props) {
+		t49 = wrapWithField(component, domRef, {
+			...props,
+			labelProps: mergeProps$1(props.labelProps, labelProps)
+		});
+		$[133] = component;
+		$[134] = domRef;
+		$[135] = labelProps;
+		$[136] = props;
+		$[137] = t49;
+	} else t49 = $[137];
+	return t49;
 }
 const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
 _DateRangeSeparatedPicker.displayName = "DateRangeSeparatedPicker";