@cube-dev/ui-kit 0.193.1 → 0.194.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";

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

@@ -1,8 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { Space } from "../../layout/Space.js";
 import { useI18n } from "../../../i18n/useI18n.js";
+import { Space } from "../../layout/Space.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";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -32,7 +32,7 @@ const DateRangeDash = tasty({
 	}
 });
 function DateRangeSeparatedPicker(rawProps, ref) {
-	const $ = c(145);
+	const $ = c(148);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -206,50 +206,58 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 		$[30] = t22;
 	} else t22 = $[30];
 	let t23;
-	if ($[31] !== isDisabled || $[32] !== size || $[33] !== t22) {
-		t23 = /* @__PURE__ */ jsx(DatePickerButton, {
+	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
 		});
-		$[31] = isDisabled;
-		$[32] = size;
-		$[33] = t22;
-		$[34] = t23;
-	} else t23 = $[34];
-	const t24 = state.value?.start || state.value?.end || void 0;
-	let t25;
-	if ($[35] !== state.value) {
-		t25 = state.value?.start && state.value?.end ? {
+		$[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 ? {
 			start: state.value.start,
 			end: state.value.end
 		} : void 0;
-		$[35] = state.value;
-		$[36] = t25;
-	} else t25 = $[36];
-	let t26;
-	if ($[37] !== onChange) {
-		t26 = (value_0) => onChange(value_0, "start");
-		$[37] = onChange;
-		$[38] = t26;
-	} else t26 = $[38];
+		$[38] = state.value;
+		$[39] = t26;
+	} else t26 = $[39];
 	let t27;
-	if ($[39] !== startProps.calendarProps || $[40] !== t24 || $[41] !== t25 || $[42] !== t26) {
-		t27 = /* @__PURE__ */ jsx(_Calendar, {
+	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, {
 			...startProps.calendarProps,
-			defaultFocusedValue: t24,
-			selectedRange: t25,
-			onChange: t26
+			defaultFocusedValue: t25,
+			selectedRange: t26,
+			onChange: t27
 		});
-		$[39] = startProps.calendarProps;
-		$[40] = t24;
-		$[41] = t25;
-		$[42] = t26;
-		$[43] = t27;
-	} else t27 = $[43];
-	let t28;
-	if ($[44] !== props.hideTimeZone || $[45] !== props.hourCycle || $[46] !== showTimeField || $[47] !== startState.setTimeValue || $[48] !== startState.timeValue || $[49] !== t || $[50] !== timeGranularity || $[51] !== timeMaxValue || $[52] !== timeMinValue || $[53] !== timePlaceholder) {
-		t28 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+		$[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,
@@ -261,34 +269,34 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 			hideTimeZone: props.hideTimeZone,
 			onChange: startState.setTimeValue
 		});
-		$[44] = props.hideTimeZone;
-		$[45] = props.hourCycle;
-		$[46] = showTimeField;
-		$[47] = startState.setTimeValue;
-		$[48] = startState.timeValue;
-		$[49] = t;
-		$[50] = timeGranularity;
-		$[51] = timeMaxValue;
-		$[52] = timeMinValue;
-		$[53] = timePlaceholder;
-		$[54] = t28;
-	} else t28 = $[54];
-	let t29;
-	if ($[55] !== startProps.dialogProps || $[56] !== t27 || $[57] !== t28) {
-		t29 = /* @__PURE__ */ jsxs(Dialog, {
+		$[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, {
 			...startProps.dialogProps,
 			width: "max-content",
 			overflow: "auto",
-			children: [t27, t28]
+			children: [t28, t29]
 		});
-		$[55] = startProps.dialogProps;
-		$[56] = t27;
-		$[57] = t28;
-		$[58] = t29;
-	} else t29 = $[58];
-	let t30;
-	if ($[59] !== props.shouldFlip || $[60] !== startState.isOpen || $[61] !== startState.setOpen || $[62] !== t17 || $[63] !== t18 || $[64] !== t23 || $[65] !== t29) {
-		t30 = /* @__PURE__ */ jsxs(DialogTrigger, {
+		$[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,
@@ -296,123 +304,123 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 			isOpen: t19,
 			shouldFlip: t20,
 			onOpenChange: t21,
-			children: [t23, t29]
-		});
-		$[59] = props.shouldFlip;
-		$[60] = startState.isOpen;
-		$[61] = startState.setOpen;
-		$[62] = t17;
-		$[63] = t18;
-		$[64] = t23;
-		$[65] = t29;
-		$[66] = t30;
-	} else t30 = $[66];
-	let t31;
-	if ($[67] !== startFieldProps || $[68] !== useLocaleProp) {
-		t31 = /* @__PURE__ */ jsx(DatePickerInput, {
-			useLocale: useLocaleProp,
-			...startFieldProps
+			children: [t24, t30]
 		});
-		$[67] = startFieldProps;
-		$[68] = useLocaleProp;
+		$[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] !== isDisabled || $[71] !== isInvalid || $[72] !== isValid || $[73] !== size || $[74] !== startFocusProps.isFocused || $[75] !== startFocusRingProps.focusProps || $[76] !== t30 || $[77] !== t31) {
-		t32 = /* @__PURE__ */ jsx(_DateInputBase, {
+	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] !== isDisabled || $[74] !== isInvalid || $[75] !== isValid || $[76] !== size || $[77] !== startFocusProps.isFocused || $[78] !== startFocusRingProps.focusProps || $[79] !== t31 || $[80] !== t32) {
+		t33 = /* @__PURE__ */ jsx(_DateInputBase, {
 			disableFocusRing: t15,
 			isDisabled,
 			isInvalid,
 			isValid,
 			size,
 			...t16,
-			suffix: t30,
-			children: t31
+			suffix: t31,
+			children: t32
 		});
-		$[70] = isDisabled;
-		$[71] = isInvalid;
-		$[72] = isValid;
-		$[73] = size;
-		$[74] = startFocusProps.isFocused;
-		$[75] = startFocusRingProps.focusProps;
-		$[76] = t30;
-		$[77] = t31;
-		$[78] = t32;
-	} else t32 = $[78];
-	let t33;
-	if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
-		t33 = /* @__PURE__ */ jsx(DateRangeDash, {});
-		$[79] = t33;
-	} else t33 = $[79];
-	const t34 = endFocusProps.isFocused;
-	const t35 = endFocusRingProps.focusProps;
-	const t36 = props.placement ?? "bottom right";
-	const t37 = props.targetRef ?? targetRef;
-	const t38 = endState.isOpen;
-	const t39 = props.shouldFlip;
-	const t40 = endState.setOpen;
-	let t41;
-	if ($[80] !== t) {
-		t41 = t("datePicker.showEndCalendar", "Show calendar for the end date");
-		$[80] = t;
-		$[81] = t41;
-	} else t41 = $[81];
+		$[73] = isDisabled;
+		$[74] = isInvalid;
+		$[75] = isValid;
+		$[76] = size;
+		$[77] = startFocusProps.isFocused;
+		$[78] = startFocusRingProps.focusProps;
+		$[79] = t31;
+		$[80] = t32;
+		$[81] = t33;
+	} else t33 = $[81];
+	let t34;
+	if ($[82] === Symbol.for("react.memo_cache_sentinel")) {
+		t34 = /* @__PURE__ */ jsx(DateRangeDash, {});
+		$[82] = t34;
+	} else t34 = $[82];
+	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 ($[82] !== endFocusProps.focusProps || $[83] !== endProps.buttonProps) {
+	if ($[83] !== endFocusProps.focusProps || $[84] !== endProps.buttonProps) {
 		t42 = mergeProps$1(endFocusProps.focusProps, endProps.buttonProps);
-		$[82] = endFocusProps.focusProps;
-		$[83] = endProps.buttonProps;
-		$[84] = t42;
-	} else t42 = $[84];
+		$[83] = endFocusProps.focusProps;
+		$[84] = endProps.buttonProps;
+		$[85] = t42;
+	} else t42 = $[85];
 	let t43;
-	if ($[85] !== isDisabled || $[86] !== size || $[87] !== t41 || $[88] !== t42) {
-		t43 = /* @__PURE__ */ jsx(DatePickerButton, {
-			"aria-label": t41,
+	if ($[86] !== t) {
+		t43 = t("datePicker.showEndCalendar", "Show calendar for the end date");
+		$[86] = t;
+		$[87] = t43;
+	} else t43 = $[87];
+	let t44;
+	if ($[88] !== isDisabled || $[89] !== size || $[90] !== t42 || $[91] !== t43) {
+		t44 = /* @__PURE__ */ jsx(DatePickerButton, {
 			size,
 			...t42,
+			"aria-label": t43,
 			isDisabled
 		});
-		$[85] = isDisabled;
-		$[86] = size;
-		$[87] = t41;
-		$[88] = t42;
-		$[89] = t43;
-	} else t43 = $[89];
-	const t44 = state.value?.end || state.value?.start || void 0;
-	let t45;
-	if ($[90] !== state.value) {
-		t45 = state.value?.start && state.value?.end ? {
+		$[88] = isDisabled;
+		$[89] = size;
+		$[90] = t42;
+		$[91] = t43;
+		$[92] = t44;
+	} else t44 = $[92];
+	const t45 = state.value?.end || state.value?.start || void 0;
+	let t46;
+	if ($[93] !== state.value) {
+		t46 = state.value?.start && state.value?.end ? {
 			start: state.value.start,
 			end: state.value.end
 		} : void 0;
-		$[90] = state.value;
-		$[91] = t45;
-	} else t45 = $[91];
-	let t46;
-	if ($[92] !== onChange) {
-		t46 = (value_1) => {
+		$[93] = state.value;
+		$[94] = t46;
+	} else t46 = $[94];
+	let t47;
+	if ($[95] !== onChange) {
+		t47 = (value_1) => {
 			onChange(value_1, "end");
 		};
-		$[92] = onChange;
-		$[93] = t46;
-	} else t46 = $[93];
-	let t47;
-	if ($[94] !== endProps.calendarProps || $[95] !== t44 || $[96] !== t45 || $[97] !== t46) {
-		t47 = /* @__PURE__ */ jsx(_Calendar, {
+		$[95] = onChange;
+		$[96] = t47;
+	} else t47 = $[96];
+	let t48;
+	if ($[97] !== endProps.calendarProps || $[98] !== t45 || $[99] !== t46 || $[100] !== t47) {
+		t48 = /* @__PURE__ */ jsx(_Calendar, {
 			...endProps.calendarProps,
-			defaultFocusedValue: t44,
-			selectedRange: t45,
-			onChange: t46
+			defaultFocusedValue: t45,
+			selectedRange: t46,
+			onChange: t47
 		});
-		$[94] = endProps.calendarProps;
-		$[95] = t44;
-		$[96] = t45;
-		$[97] = t46;
-		$[98] = t47;
-	} else t47 = $[98];
-	let t48;
-	if ($[99] !== endState.setTimeValue || $[100] !== endState.timeValue || $[101] !== props.hideTimeZone || $[102] !== props.hourCycle || $[103] !== showTimeField || $[104] !== t || $[105] !== timeGranularity || $[106] !== timeMaxValue || $[107] !== timeMinValue || $[108] !== timePlaceholder) {
-		t48 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+		$[97] = endProps.calendarProps;
+		$[98] = t45;
+		$[99] = t46;
+		$[100] = t47;
+		$[101] = t48;
+	} else t48 = $[101];
+	let t49;
+	if ($[102] !== endState.setTimeValue || $[103] !== endState.timeValue || $[104] !== props.hideTimeZone || $[105] !== props.hourCycle || $[106] !== showTimeField || $[107] !== t || $[108] !== timeGranularity || $[109] !== timeMaxValue || $[110] !== timeMinValue || $[111] !== timePlaceholder) {
+		t49 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
 			padding: "1x",
 			label: t("datePicker.time", "Time"),
 			value: endState.timeValue,
@@ -424,119 +432,119 @@ function DateRangeSeparatedPicker(rawProps, ref) {
 			hideTimeZone: props.hideTimeZone,
 			onChange: endState.setTimeValue
 		});
-		$[99] = endState.setTimeValue;
-		$[100] = endState.timeValue;
-		$[101] = props.hideTimeZone;
-		$[102] = props.hourCycle;
-		$[103] = showTimeField;
-		$[104] = t;
-		$[105] = timeGranularity;
-		$[106] = timeMaxValue;
-		$[107] = timeMinValue;
-		$[108] = timePlaceholder;
-		$[109] = t48;
-	} else t48 = $[109];
-	let t49;
-	if ($[110] !== endProps.dialogProps || $[111] !== t47 || $[112] !== t48) {
-		t49 = /* @__PURE__ */ jsxs(Dialog, {
+		$[102] = endState.setTimeValue;
+		$[103] = endState.timeValue;
+		$[104] = props.hideTimeZone;
+		$[105] = props.hourCycle;
+		$[106] = showTimeField;
+		$[107] = t;
+		$[108] = timeGranularity;
+		$[109] = timeMaxValue;
+		$[110] = timeMinValue;
+		$[111] = timePlaceholder;
+		$[112] = t49;
+	} else t49 = $[112];
+	let t50;
+	if ($[113] !== endProps.dialogProps || $[114] !== t48 || $[115] !== t49) {
+		t50 = /* @__PURE__ */ jsxs(Dialog, {
 			...endProps.dialogProps,
 			width: "max-content",
 			overflow: "auto",
-			children: [t47, t48]
+			children: [t48, t49]
 		});
-		$[110] = endProps.dialogProps;
-		$[111] = t47;
-		$[112] = t48;
-		$[113] = t49;
-	} else t49 = $[113];
-	let t50;
-	if ($[114] !== endState.isOpen || $[115] !== endState.setOpen || $[116] !== props.shouldFlip || $[117] !== t36 || $[118] !== t37 || $[119] !== t43 || $[120] !== t49) {
-		t50 = /* @__PURE__ */ jsxs(DialogTrigger, {
+		$[113] = endProps.dialogProps;
+		$[114] = t48;
+		$[115] = t49;
+		$[116] = t50;
+	} else t50 = $[116];
+	let t51;
+	if ($[117] !== endState.isOpen || $[118] !== endState.setOpen || $[119] !== props.shouldFlip || $[120] !== t37 || $[121] !== t38 || $[122] !== t44 || $[123] !== t50) {
+		t51 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
-			placement: t36,
-			targetRef: t37,
-			isOpen: t38,
-			shouldFlip: t39,
-			onOpenChange: t40,
-			children: [t43, t49]
-		});
-		$[114] = endState.isOpen;
-		$[115] = endState.setOpen;
-		$[116] = props.shouldFlip;
-		$[117] = t36;
-		$[118] = t37;
-		$[119] = t43;
-		$[120] = t49;
-		$[121] = t50;
-	} else t50 = $[121];
-	let t51;
-	if ($[122] !== endFieldProps || $[123] !== useLocaleProp) {
-		t51 = /* @__PURE__ */ jsx(DatePickerInput, {
-			useLocale: useLocaleProp,
-			...endFieldProps
+			placement: t37,
+			targetRef: t38,
+			isOpen: t39,
+			shouldFlip: t40,
+			onOpenChange: t41,
+			children: [t44, t50]
 		});
-		$[122] = endFieldProps;
-		$[123] = useLocaleProp;
+		$[117] = endState.isOpen;
+		$[118] = endState.setOpen;
+		$[119] = props.shouldFlip;
+		$[120] = t37;
+		$[121] = t38;
+		$[122] = t44;
+		$[123] = t50;
 		$[124] = t51;
 	} else t51 = $[124];
 	let t52;
-	if ($[125] !== endFocusProps.isFocused || $[126] !== endFocusRingProps.focusProps || $[127] !== isDisabled || $[128] !== isInvalid || $[129] !== isValid || $[130] !== size || $[131] !== t50 || $[132] !== t51) {
-		t52 = /* @__PURE__ */ jsx(_DateInputBase, {
-			disableFocusRing: t34,
+	if ($[125] !== endFieldProps || $[126] !== useLocaleProp) {
+		t52 = /* @__PURE__ */ jsx(DatePickerInput, {
+			useLocale: useLocaleProp,
+			...endFieldProps
+		});
+		$[125] = endFieldProps;
+		$[126] = useLocaleProp;
+		$[127] = t52;
+	} else t52 = $[127];
+	let t53;
+	if ($[128] !== endFocusProps.isFocused || $[129] !== endFocusRingProps.focusProps || $[130] !== isDisabled || $[131] !== isInvalid || $[132] !== isValid || $[133] !== size || $[134] !== t51 || $[135] !== t52) {
+		t53 = /* @__PURE__ */ jsx(_DateInputBase, {
+			disableFocusRing: t35,
 			isDisabled,
 			isInvalid,
 			isValid,
 			size,
-			...t35,
-			suffix: t50,
-			children: t51
+			...t36,
+			suffix: t51,
+			children: t52
 		});
-		$[125] = endFocusProps.isFocused;
-		$[126] = endFocusRingProps.focusProps;
-		$[127] = isDisabled;
-		$[128] = isInvalid;
-		$[129] = isValid;
-		$[130] = size;
-		$[131] = t50;
-		$[132] = t51;
-		$[133] = t52;
-	} else t52 = $[133];
-	let t53;
-	if ($[134] !== groupProps || $[135] !== styles || $[136] !== t14 || $[137] !== t32 || $[138] !== t52) {
-		t53 = /* @__PURE__ */ jsxs(DatePickerElement, {
+		$[128] = endFocusProps.isFocused;
+		$[129] = endFocusRingProps.focusProps;
+		$[130] = isDisabled;
+		$[131] = isInvalid;
+		$[132] = isValid;
+		$[133] = size;
+		$[134] = t51;
+		$[135] = t52;
+		$[136] = t53;
+	} else t53 = $[136];
+	let t54;
+	if ($[137] !== groupProps || $[138] !== styles || $[139] !== t14 || $[140] !== t33 || $[141] !== t53) {
+		t54 = /* @__PURE__ */ jsxs(DatePickerElement, {
 			ref: targetRef,
 			...groupProps,
 			styles,
 			qa: t14,
 			"data-input-type": "daterangeseparatedpicker",
 			children: [
-				t32,
 				t33,
-				t52
+				t34,
+				t53
 			]
 		});
-		$[134] = groupProps;
-		$[135] = styles;
-		$[136] = t14;
-		$[137] = t32;
-		$[138] = t52;
-		$[139] = t53;
-	} else t53 = $[139];
-	const component = t53;
-	let t54;
-	if ($[140] !== component || $[141] !== domRef || $[142] !== labelProps || $[143] !== props) {
-		t54 = wrapWithField(component, domRef, {
+		$[137] = groupProps;
+		$[138] = styles;
+		$[139] = t14;
+		$[140] = t33;
+		$[141] = t53;
+		$[142] = t54;
+	} else t54 = $[142];
+	const component = t54;
+	let t55;
+	if ($[143] !== component || $[144] !== domRef || $[145] !== labelProps || $[146] !== props) {
+		t55 = wrapWithField(component, domRef, {
 			...props,
 			labelProps: mergeProps$1(props.labelProps, labelProps)
 		});
-		$[140] = component;
-		$[141] = domRef;
-		$[142] = labelProps;
-		$[143] = props;
-		$[144] = t54;
-	} else t54 = $[144];
-	return t54;
+		$[143] = component;
+		$[144] = domRef;
+		$[145] = labelProps;
+		$[146] = props;
+		$[147] = t55;
+	} else t55 = $[147];
+	return t55;
 }
 const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
 _DateRangeSeparatedPicker.displayName = "DateRangeSeparatedPicker";