@cube-dev/ui-kit 0.201.0 → 0.203.0

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

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