@povio/ui 3.4.0-rc.2 → 3.4.0-rc.22

package/dist/DateRangePicker-BmScgvEH.js

@@ -0,0 +1,1322 @@
+import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as ChevronDown } from "./chevron-down-Ciz9yP9R.js";
+import { t as ChevronLeft } from "./chevron-left-VO8YZrXZ.js";
+import { t as ChevronRight } from "./chevron-right-C_M98bh3.js";
+import { n as ChevronsLeft, t as ChevronsRight } from "./chevrons-right-BXdmZ2TS.js";
+import { t as FormField } from "./FormField-DoGaUqFm.js";
+import { i as CalendarGrid, n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-C2z1kgaC.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { B as $d4ee10de306f2510$export$4282f70798064fe0, J as $bdb11010cef70236$export$f680877a34711e37, L as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, R as $3ef42575df84b30b$export$9d1611c77c2fe928, z as $5dc95899b306f630$export$c9058316764c140e } from "./useHover-DwfnacVy.js";
+import { o as $9bf71ea28793e738$export$c5251b9e124bf29 } from "./SelectionIndicator-qJF4qfyY.js";
+import { r as $ef06256079686ba0$export$f8aeda7b10753fa1 } from "./PressResponder-q8UTUsf0.js";
+import { C as $dfb4eba373ed9493$exports, S as $3dfb0f96be0d6a08$export$4a931266a3838b86, h as useRangeCalendarState, i as getStaticDateTimeFocusTarget, m as useDateRangePickerState, o as DateTimeDialogFooter, r as getStaticDateRangeSegments, s as DateTimeDialog, v as $16f0b7bb276bc17e$export$300019f83c56d282, w as $896ba0a80a8f4d36$export$85fd5fdf27bacc79, x as $16f0b7bb276bc17e$export$7b3062cd49e80452 } from "./staticDateTimeSegments-CKL9PuGV.js";
+import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-Cq7t4Xxl.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-CLFkoJMP.js";
+import { n as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-C2M9mXF2.js";
+import { n as $9ab94262bd0047c7$export$420e68273165f4ec } from "./useFocusRing-DuXtCnJj.js";
+import { n as $2baaea4c71418dea$export$294aa081a6c6f55d } from "./useFormValidation-DLZqyNVp.js";
+import { n as $e5be200c675c3b3a$export$a763b9476acd3eb, r as $e5be200c675c3b3a$export$dad6ae84456c676a, t as $e5be200c675c3b3a$export$75ee7c75d68f5b0e } from "./useFormValidationState-Bpry7Uk5.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import { PillButton } from "./components/pill-button.js";
+import "./i18n-C2TBJvnh.js";
+import { t as FieldController } from "./form.binding-DyZ4fH8l.js";
+import { t as TooltipWrapper } from "./TooltipWrapper-CLMp_zj4.js";
+import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-COJdSrME.js";
+import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
+import { t as Select } from "./Select-CCNQ4Bso.js";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
+import { useRangeCalendar } from "@react-aria/calendar";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region ../../node_modules/.bun/@react-aria+datepicker@3.16.0+67f6792bdf102c28/node_modules/@react-aria/datepicker/dist/useDateRangePicker.mjs
+function $parcel$interopDefault(a) {
+	return a && a.__esModule ? a.default : a;
+}
+function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
+	var _state_value, _state_defaultValue, _state_value1, _state_defaultValue1, _state_dateRange;
+	let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($dfb4eba373ed9493$exports), "@react-aria/datepicker");
+	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d({
+		...props,
+		labelElementType: "span",
+		isInvalid,
+		errorMessage: props.errorMessage || validationErrors
+	});
+	let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+	let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	let range = state.formatValue(locale, { month: "long" });
+	let description = range ? stringFormatter.format("selectedRangeDescription", {
+		startDate: range.start,
+		endDate: range.end
+	}) : "";
+	let descProps = $ef06256079686ba0$export$f8aeda7b10753fa1(description);
+	let startFieldProps = {
+		"aria-label": stringFormatter.format("startDate"),
+		"aria-labelledby": labelledBy
+	};
+	let endFieldProps = {
+		"aria-label": stringFormatter.format("endDate"),
+		"aria-labelledby": labelledBy
+	};
+	let buttonId = $bdb11010cef70236$export$f680877a34711e37();
+	let dialogId = $bdb11010cef70236$export$f680877a34711e37();
+	let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
+	let ariaDescribedBy = [descProps["aria-describedby"], fieldProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	let focusManager = useMemo(() => $9bf71ea28793e738$export$c5251b9e124bf29(ref, { accept: (element) => element.id !== buttonId }), [ref, buttonId]);
+	let commonFieldProps = {
+		[$16f0b7bb276bc17e$export$7b3062cd49e80452]: focusManager,
+		[$16f0b7bb276bc17e$export$300019f83c56d282]: "presentation",
+		"aria-describedby": ariaDescribedBy,
+		placeholderValue: props.placeholderValue,
+		hideTimeZone: props.hideTimeZone,
+		hourCycle: props.hourCycle,
+		granularity: props.granularity,
+		shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+		isDisabled: props.isDisabled,
+		isReadOnly: props.isReadOnly,
+		isRequired: props.isRequired,
+		validationBehavior: props.validationBehavior
+	};
+	let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+	let isFocused = useRef(false);
+	let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
+		...props,
+		isDisabled: state.isOpen,
+		onBlurWithin: (e) => {
+			let dialog = document.getElementById(dialogId);
+			if (!$d4ee10de306f2510$export$4282f70798064fe0(dialog, e.relatedTarget)) {
+				var _props_onBlur, _props_onFocusChange;
+				isFocused.current = false;
+				(_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 || _props_onBlur.call(props, e);
+				(_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 || _props_onFocusChange.call(props, false);
+			}
+		},
+		onFocusWithin: (e) => {
+			if (!isFocused.current) {
+				var _props_onFocus, _props_onFocusChange;
+				isFocused.current = true;
+				(_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 || _props_onFocus.call(props, e);
+				(_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 || _props_onFocusChange.call(props, true);
+			}
+		}
+	});
+	let startFieldValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+	let endFieldValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+	var _state_value_start, _state_value_end;
+	return {
+		groupProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+			role: "group",
+			"aria-disabled": props.isDisabled || null,
+			"aria-describedby": ariaDescribedBy,
+			onKeyDown(e) {
+				if (state.isOpen) return;
+				if (props.onKeyDown) props.onKeyDown(e);
+			},
+			onKeyUp(e) {
+				if (state.isOpen) return;
+				if (props.onKeyUp) props.onKeyUp(e);
+			}
+		}),
+		labelProps: {
+			...labelProps,
+			onClick: () => {
+				focusManager.focusFirst();
+			}
+		},
+		buttonProps: {
+			...descProps,
+			id: buttonId,
+			"aria-haspopup": "dialog",
+			"aria-label": stringFormatter.format("calendar"),
+			"aria-labelledby": `${buttonId} ${labelledBy}`,
+			"aria-describedby": ariaDescribedBy,
+			"aria-expanded": state.isOpen,
+			isDisabled: props.isDisabled || props.isReadOnly,
+			onPress: () => state.setOpen(true)
+		},
+		dialogProps: {
+			id: dialogId,
+			"aria-labelledby": `${buttonId} ${labelledBy}`
+		},
+		startFieldProps: {
+			...startFieldProps,
+			...commonFieldProps,
+			value: (_state_value_start = (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start) !== null && _state_value_start !== void 0 ? _state_value_start : null,
+			defaultValue: (_state_defaultValue = state.defaultValue) === null || _state_defaultValue === void 0 ? void 0 : _state_defaultValue.start,
+			onChange: (start) => state.setDateTime("start", start),
+			autoFocus: props.autoFocus,
+			name: props.startName,
+			form: props.form,
+			[$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+				realtimeValidation: state.realtimeValidation,
+				displayValidation: state.displayValidation,
+				updateValidation(e) {
+					startFieldValidation.current = e;
+					state.updateValidation($e5be200c675c3b3a$export$75ee7c75d68f5b0e(e, endFieldValidation.current));
+				},
+				resetValidation: state.resetValidation,
+				commitValidation: state.commitValidation
+			}
+		},
+		endFieldProps: {
+			...endFieldProps,
+			...commonFieldProps,
+			value: (_state_value_end = (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end) !== null && _state_value_end !== void 0 ? _state_value_end : null,
+			defaultValue: (_state_defaultValue1 = state.defaultValue) === null || _state_defaultValue1 === void 0 ? void 0 : _state_defaultValue1.end,
+			onChange: (end) => state.setDateTime("end", end),
+			name: props.endName,
+			form: props.form,
+			[$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+				realtimeValidation: state.realtimeValidation,
+				displayValidation: state.displayValidation,
+				updateValidation(e) {
+					endFieldValidation.current = e;
+					state.updateValidation($e5be200c675c3b3a$export$75ee7c75d68f5b0e(startFieldValidation.current, e));
+				},
+				resetValidation: state.resetValidation,
+				commitValidation: state.commitValidation
+			}
+		},
+		descriptionProps,
+		errorMessageProps,
+		calendarProps: {
+			autoFocus: true,
+			value: ((_state_dateRange = state.dateRange) === null || _state_dateRange === void 0 ? void 0 : _state_dateRange.start) && state.dateRange.end ? state.dateRange : null,
+			onChange: state.setDateRange,
+			minValue: props.minValue,
+			maxValue: props.maxValue,
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isDateUnavailable: props.isDateUnavailable,
+			allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+			defaultFocusedValue: state.dateRange ? void 0 : props.placeholderValue,
+			isInvalid: state.isInvalid,
+			errorMessage: typeof props.errorMessage === "function" ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(" "),
+			firstDayOfWeek: props.firstDayOfWeek,
+			pageBehavior: props.pageBehavior
+		},
+		isInvalid,
+		validationErrors,
+		validationDetails
+	};
+}
+//#endregion
+//#region src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx
+const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+	const { t } = useTranslation("ui");
+	const displayDate = state.visibleRange.start.add(offset);
+	const currentMonth = displayDate.month - 1;
+	const currentYear = displayDate.year;
+	const formatter = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
+		month: "long",
+		timeZone: state.timeZone
+	});
+	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+	const MONTHS = useMemo(() => {
+		const months = [];
+		for (let i = 1; i <= numMonths; i++) {
+			const date = state.focusedDate.set({ month: i });
+			months.push(formatter.format(date.toDate(state.timeZone)));
+		}
+		return months;
+	}, [
+		formatter,
+		numMonths,
+		state.focusedDate,
+		state.timeZone
+	]);
+	const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
+	const getAvailableMonths = () => {
+		return MONTHS.map((month, i) => {
+			const monthDate = displayDate.set({ month: i + 1 });
+			let isDisabled = false;
+			if (maxDate) isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
+			if (minDate) isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
+			return {
+				month,
+				value: i,
+				isDisabled
+			};
+		});
+	};
+	const getAvailableYears = () => {
+		return years.map((year) => {
+			let isDisabled = false;
+			if (maxDate) isDisabled = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
+			if (minDate && !isDisabled) isDisabled = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
+			return {
+				year,
+				isDisabled
+			};
+		});
+	};
+	const availableMonths = getAvailableMonths();
+	const availableYears = getAvailableYears();
+	const handleMonthChange = (value) => {
+		if (value === null) return;
+		const newDate = displayDate.set({ month: value + 1 });
+		onNavigate?.(newDate);
+	};
+	const handleYearChange = (value) => {
+		if (value === null) return;
+		const newDate = displayDate.set({ year: value });
+		onNavigate?.(newDate);
+	};
+	const handlePrevMonth = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.subtract({ months: 1 });
+		onNavigate?.(newDate);
+	};
+	const handleNextMonth = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.add({ months: 1 });
+		onNavigate?.(newDate);
+	};
+	const handlePrevYear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.subtract({ years: 1 });
+		onNavigate?.(newDate);
+	};
+	const handleNextYear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.add({ years: 1 });
+		onNavigate?.(newDate);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevYearDisabled,
+					onClick: handlePrevYear,
+					icon: ChevronsLeft,
+					label: t(($) => $.ui.datePicker.navigation.previousYear)
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevMonthDisabled,
+					onClick: handlePrevMonth,
+					icon: ChevronLeft,
+					label: t(($) => $.ui.datePicker.navigation.previousMonth)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Select, {
+					label: "Month",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ChevronDown,
+						children: MONTHS[currentMonth].slice(0, 3)
+					}),
+					ignoreTriggerWidth: true,
+					items: availableMonths.map(({ month, value, isDisabled }) => ({
+						label: month,
+						id: value,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
+					value: currentMonth,
+					onChange: handleMonthChange
+				}), /* @__PURE__ */ jsx(Select, {
+					label: "Year",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ChevronDown,
+						children: currentYear.toString()
+					}),
+					items: availableYears.map(({ year, isDisabled }) => ({
+						label: year.toString(),
+						id: year,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
+					value: currentYear,
+					onChange: handleYearChange
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextMonthDisabled,
+					onClick: handleNextMonth,
+					icon: ChevronRight,
+					label: t(($) => $.ui.datePicker.navigation.nextMonth)
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextYearDisabled,
+					onClick: handleNextYear,
+					icon: ChevronsRight,
+					label: t(($) => $.ui.datePicker.navigation.nextYear)
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/RangeCalendar.tsx
+const RangeCalendar = ({ className, leftCalendarState, rightCalendarState, calendarProps, onApply, onRangeChange: _onRangeChange, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation }) => {
+	const leftRef = useRef(null);
+	const rightRef = useRef(null);
+	const { calendarProps: leftCalendarAriaProps } = useRangeCalendar(calendarProps, leftCalendarState, leftRef);
+	const { calendarProps: rightCalendarAriaProps } = useRangeCalendar(calendarProps, rightCalendarState, rightRef);
+	const leftDate = leftCalendarState.visibleRange.start;
+	const rightDate = rightCalendarState.visibleRange.start;
+	const handleLeftKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "left") ?? false;
+	};
+	const handleRightKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "right") ?? false;
+	};
+	const handleLeftNavigate = (newDate) => {
+		const rightCurrentDate = rightCalendarState.visibleRange.start;
+		if (newDate.year < rightCurrentDate.year || newDate.year === rightCurrentDate.year && newDate.month < rightCurrentDate.month) leftCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = rightCurrentDate.subtract({ months: 1 });
+			leftCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const handleRightNavigate = (newDate) => {
+		const leftCurrentDate = leftCalendarState.visibleRange.start;
+		if (newDate.year > leftCurrentDate.year || newDate.year === leftCurrentDate.year && newDate.month > leftCurrentDate.month) rightCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = leftCurrentDate.add({ months: 1 });
+			rightCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const isNextDisabled = useMemo(() => {
+		const leftNextDate = leftDate.add({ months: 1 });
+		return leftNextDate.year > rightDate.year || leftNextDate.year === rightDate.year && leftNextDate.month === rightDate.month;
+	}, [leftDate, rightDate]);
+	const isPrevDisabled = useMemo(() => {
+		const rightPrevDate = rightDate.subtract({ months: 1 });
+		return rightPrevDate.year < leftDate.year || rightPrevDate.year === leftDate.year && rightPrevDate.month === leftDate.month;
+	}, [leftDate, rightDate]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex w-fit flex-col items-center bg-elevation-fill-default-1", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			children: [/* @__PURE__ */ jsxs("div", {
+				...leftCalendarAriaProps,
+				ref: leftRef,
+				className: "flex flex-col items-center",
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: leftCalendarState,
+					isNextMonthDisabled: isNextDisabled,
+					isNextYearDisabled: isNextDisabled,
+					onNavigate: handleLeftNavigate,
+					maxDate: rightDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					state: leftCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleLeftKeyboardNavigation,
+					className: "h-64 w-[304px]!",
+					calendarSide: "left"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				...rightCalendarAriaProps,
+				ref: rightRef,
+				className: "hidden flex-col items-center md:flex",
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: rightCalendarState,
+					isPrevMonthDisabled: isPrevDisabled,
+					isPrevYearDisabled: isPrevDisabled,
+					onNavigate: handleRightNavigate,
+					minDate: leftDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					state: rightCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleRightKeyboardNavigation,
+					className: "h-64 w-[304px]!",
+					calendarSide: "right"
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/DateRangePicker/DateRangePicker.tsx
+const DateRangePickerBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const { t } = useTranslation();
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, allowPartialRange: allowPartialRangeProp, minValue, maxValue, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconButtonComponent = todayIconButtonComponentProp ?? ui.dateInput.todayIconButtonComponent;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const allowPartialRange = allowPartialRangeProp ?? ui.dateInput.allowPartialRange;
+	const timeZone = ui.dateInput.timeZone;
+	let effectiveTimeZone = getLocalTimeZone();
+	if (timeZone !== "clientLocal") effectiveTimeZone = timeZone;
+	const [validationRangeError, setValidationRangeError] = useState();
+	const datePickerInputRef = useRef(null);
+	const dateRangePickerRef = useMemo(() => ({ get current() {
+		return datePickerInputRef.current?.getContainer?.() || null;
+	} }), []);
+	const normalizedValue = value ?? null;
+	const fieldRangeRef = useRef(normalizedValue);
+	fieldRangeRef.current = normalizedValue;
+	const dialogState = useDateRangePickerState({
+		...rest,
+		value: normalizedValue,
+		shouldCloseOnSelect: false,
+		shouldForceLeadingZeros,
+		minValue,
+		maxValue
+	});
+	const state = useDateRangePickerState({
+		...rest,
+		shouldForceLeadingZeros,
+		value: normalizedValue,
+		minValue,
+		maxValue,
+		onChange: (newValue) => {
+			if (allowPartialRange && newValue === null) return;
+			fieldRangeRef.current = newValue;
+			const isInvalidRange = isValidRange(newValue);
+			onChange?.(newValue);
+			if (isInvalidRange) return;
+			handleCalendarStatesChange(newValue);
+		},
+		shouldCloseOnSelect: false
+	});
+	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = $887cac91b7cc8801$export$12fd5f0e9f4bb192({
+		...rest,
+		label,
+		shouldForceLeadingZeros,
+		minValue,
+		maxValue
+	}, state, dateRangePickerRef);
+	const { calendarProps } = $887cac91b7cc8801$export$12fd5f0e9f4bb192({
+		...rest,
+		label,
+		shouldForceLeadingZeros,
+		minValue,
+		maxValue
+	}, dialogState, dateRangePickerRef);
+	const emitPartialRangeChange = (part, date) => {
+		if (!allowPartialRange) return;
+		const partialRange = {
+			start: part === "start" ? date : fieldRangeRef.current?.start ?? null,
+			end: part === "end" ? date : fieldRangeRef.current?.end ?? null
+		};
+		fieldRangeRef.current = partialRange;
+		if (partialRange.start && partialRange.end) return;
+		const newValue = partialRange.start || partialRange.end ? partialRange : null;
+		onChange?.(newValue);
+	};
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
+	const handleBlur = (newValue) => {
+		onBlur?.({ target: { value: newValue } });
+	};
+	const formFieldProps = {
+		error: error || validationRangeError,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const leftCalendarState = useRangeCalendarState({
+		...calendarProps,
+		locale,
+		createCalendar,
+		pageBehavior: "single",
+		visibleDuration: { months: 1 },
+		minValue,
+		maxValue
+	});
+	const rightCalendarState = useRangeCalendarState({
+		...calendarProps,
+		locale,
+		createCalendar,
+		pageBehavior: "single",
+		visibleDuration: { months: 1 },
+		defaultFocusedValue: today(effectiveTimeZone).add({ months: 1 }),
+		minValue,
+		maxValue
+	});
+	const [activePreset, setActivePreset] = useState(null);
+	const [rangeSelection, setRangeSelection] = useState({
+		start: value?.start || null,
+		end: value?.end || null,
+		isSelecting: false
+	});
+	const [hoverDate, setHoverDate] = useState(null);
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const isDateOutsideBounds = useCallback((date) => {
+		if (minValue && date.compare(minValue) < 0) return true;
+		if (maxValue && date.compare(maxValue) > 0) return true;
+		return false;
+	}, [minValue, maxValue]);
+	const clampRangeToBounds = useCallback((range) => {
+		if (range === null) return null;
+		if (minValue && maxValue && minValue.compare(maxValue) > 0) return null;
+		let startDate = range.start;
+		let endDate = range.end;
+		if (minValue && endDate.compare(minValue) < 0 || maxValue && startDate.compare(maxValue) > 0) return null;
+		if (minValue && startDate.compare(minValue) < 0) startDate = minValue;
+		if (maxValue && startDate.compare(maxValue) > 0) startDate = maxValue;
+		if (minValue && endDate.compare(minValue) < 0) endDate = minValue;
+		if (maxValue && endDate.compare(maxValue) > 0) endDate = maxValue;
+		if (startDate.compare(endDate) > 0) return null;
+		return {
+			start: startDate,
+			end: endDate
+		};
+	}, [minValue, maxValue]);
+	const isRangeWithinBounds = useCallback((range) => {
+		if (minValue && range.start.compare(minValue) < 0) return false;
+		if (maxValue && range.end.compare(maxValue) > 0) return false;
+		return true;
+	}, [minValue, maxValue]);
+	const isValidRange = useCallback((newValue) => {
+		if (newValue?.start && newValue?.end) {
+			const startDate = newValue.start;
+			if (newValue.end.compare(startDate) < 0) {
+				setValidationRangeError(t(($) => $.ui.datePicker.errors.endDateBeforeStart, { ns: "ui" }));
+				return true;
+			}
+			setValidationRangeError(void 0);
+		} else setValidationRangeError(void 0);
+		return false;
+	}, [t]);
+	const handleCalendarStatesChange = (newValue) => {
+		if (newValue) {
+			const clampedValue = clampRangeToBounds(newValue);
+			if (!clampedValue) return;
+			if (isValidRange(clampedValue)) return;
+			dialogState.setValue(clampedValue);
+			const startDate = clampedValue.start;
+			const endDate = clampedValue.end;
+			leftCalendarState.setFocusedDate(startDate);
+			if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+			else rightCalendarState.setFocusedDate(endDate);
+			leftCalendarState.setValue(clampedValue);
+			rightCalendarState.setValue(clampedValue);
+			setRangeSelection({
+				start: clampedValue.start,
+				end: clampedValue.end,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			setActivePreset(null);
+		} else {
+			setValidationRangeError(void 0);
+			dialogState.setValue(null);
+			leftCalendarState.setValue(null);
+			rightCalendarState.setValue(null);
+			setRangeSelection({
+				start: null,
+				end: null,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			setActivePreset(null);
+		}
+	};
+	const throttledSetHoverDate = useCallback((date) => {
+		requestAnimationFrame(() => {
+			setHoverDate(date);
+		});
+	}, []);
+	const handleDateHover = useCallback((date) => {
+		if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date);
+	}, [
+		rangeSelection.isSelecting,
+		rangeSelection.start,
+		throttledSetHoverDate
+	]);
+	const handleDateSelection = useCallback((date, calendarSide) => {
+		if (calendarSide) {
+			const currentVisibleMonth = (calendarSide === "left" ? leftCalendarState : rightCalendarState).visibleRange.start;
+			if (date.month !== currentVisibleMonth.month || date.year !== currentVisibleMonth.year) if (calendarSide === "left") {
+				leftCalendarState.setFocusedDate(date);
+				rightCalendarState.setFocusedDate(date.add({ months: 1 }));
+			} else {
+				rightCalendarState.setFocusedDate(date);
+				leftCalendarState.setFocusedDate(date.subtract({ months: 1 }));
+			}
+		}
+		if (isDateOutsideBounds(date)) return;
+		if (!rangeSelection.isSelecting || !rangeSelection.start) {
+			setRangeSelection({
+				start: date,
+				end: null,
+				isSelecting: true
+			});
+			setHoverDate(null);
+			leftCalendarState.setValue(null);
+			rightCalendarState.setValue(null);
+		} else {
+			const { start } = rangeSelection;
+			const end = date;
+			const newRange = {
+				start: start.compare(end) <= 0 ? start : end,
+				end: start.compare(end) <= 0 ? end : start
+			};
+			const clampedRange = clampRangeToBounds(newRange);
+			if (!clampedRange) return;
+			leftCalendarState.setValue(clampedRange);
+			rightCalendarState.setValue(clampedRange);
+			dialogState.setValue(clampedRange);
+			setRangeSelection({
+				start: clampedRange.start,
+				end: clampedRange.end,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			setActivePreset(null);
+		}
+	}, [
+		rangeSelection,
+		leftCalendarState,
+		rightCalendarState,
+		dialogState,
+		isDateOutsideBounds,
+		clampRangeToBounds
+	]);
+	const handleKeyboardNavigation = useCallback((event, date, calendarSide) => {
+		const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
+		const otherState = calendarSide === "left" ? rightCalendarState : leftCalendarState;
+		let shouldPreventDefault = false;
+		switch (event.key) {
+			case "ArrowRight": {
+				const nextDate = date.add({ days: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "left" && nextDate.month !== currentMonth.month) if (nextDate.year === otherMonth.year && nextDate.month === otherMonth.month) {
+					otherState.setFocusedDate(nextDate);
+					shouldPreventDefault = true;
+				} else {
+					rightCalendarState.setFocusedDate(nextDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "ArrowLeft": {
+				const prevDate = date.subtract({ days: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "right" && prevDate.month !== currentMonth.month) if (prevDate.year === otherMonth.year && prevDate.month === otherMonth.month) {
+					otherState.setFocusedDate(prevDate);
+					shouldPreventDefault = true;
+				} else {
+					leftCalendarState.setFocusedDate(prevDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "ArrowDown": {
+				const nextWeekDate = date.add({ weeks: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "left" && nextWeekDate.month !== currentMonth.month) if (nextWeekDate.year === otherMonth.year && nextWeekDate.month === otherMonth.month) {
+					otherState.setFocusedDate(nextWeekDate);
+					shouldPreventDefault = true;
+				} else {
+					rightCalendarState.setFocusedDate(nextWeekDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "ArrowUp": {
+				const prevWeekDate = date.subtract({ weeks: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
+					otherState.setFocusedDate(prevWeekDate);
+					shouldPreventDefault = true;
+				} else {
+					leftCalendarState.setFocusedDate(prevWeekDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "Enter":
+			case " ":
+				handleDateSelection(date);
+				shouldPreventDefault = true;
+				break;
+			case "Escape":
+				setRangeSelection({
+					start: null,
+					end: null,
+					isSelecting: false
+				});
+				setHoverDate(null);
+				shouldPreventDefault = true;
+		}
+		if (shouldPreventDefault) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		return shouldPreventDefault;
+	}, [
+		leftCalendarState,
+		rightCalendarState,
+		handleDateSelection
+	]);
+	const syncCalendarStates = useCallback((newValue) => {
+		if (newValue === null) {
+			setValidationRangeError(void 0);
+			leftCalendarState.setValue(null);
+			rightCalendarState.setValue(null);
+			dialogState.setValue(null);
+			setRangeSelection({
+				start: null,
+				end: null,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			return;
+		}
+		const clampedValue = clampRangeToBounds(newValue);
+		if (!clampedValue) return;
+		if (isValidRange(clampedValue)) return;
+		leftCalendarState.setValue(clampedValue);
+		rightCalendarState.setValue(clampedValue);
+		dialogState.setValue(clampedValue);
+		setRangeSelection({
+			start: clampedValue.start,
+			end: clampedValue.end,
+			isSelecting: false
+		});
+		setHoverDate(null);
+	}, [
+		isValidRange,
+		leftCalendarState,
+		rightCalendarState,
+		dialogState,
+		clampRangeToBounds
+	]);
+	const onApply = () => {
+		let valueToApply = dialogState.value;
+		if (rangeSelection.start && rangeSelection.end) valueToApply = {
+			start: rangeSelection.start,
+			end: rangeSelection.end
+		};
+		if (valueToApply) {
+			const clampedValue = clampRangeToBounds(valueToApply);
+			if (clampedValue) {
+				valueToApply = clampedValue;
+				state.setValue(clampedValue);
+			}
+		}
+		state.toggle();
+	};
+	const onTodayPress = () => {
+		const todayDate = today(effectiveTimeZone);
+		const clampedTodayRange = clampRangeToBounds({
+			start: todayDate,
+			end: todayDate
+		});
+		if (!clampedTodayRange) return;
+		const startDate = clampedTodayRange.start;
+		const endDate = clampedTodayRange.end;
+		leftCalendarState.setFocusedDate(startDate);
+		if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+		else rightCalendarState.setFocusedDate(endDate);
+		syncCalendarStates(clampedTodayRange);
+	};
+	const onInputClear = () => {
+		fieldRangeRef.current = null;
+		onChange?.(null);
+		dialogState.setValue(null);
+		leftCalendarState.setValue(null);
+		rightCalendarState.setValue(null);
+		setRangeSelection({
+			start: null,
+			end: null,
+			isSelecting: false
+		});
+		setHoverDate(null);
+	};
+	const syncSelectionFromControlledValue = () => {
+		const currentValue = state.value;
+		if (!(currentValue != null && currentValue.start != null && currentValue.end != null)) {
+			syncCalendarStates(null);
+			return;
+		}
+		syncCalendarStates(currentValue);
+		const startDate = currentValue.start;
+		const endDate = currentValue.end;
+		leftCalendarState.setFocusedDate(startDate);
+		if (startDate.year === endDate.year && startDate.month === endDate.month) {
+			rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+			return;
+		}
+		rightCalendarState.setFocusedDate(endDate);
+	};
+	useEffect(() => {
+		if (!state.isOpen) return;
+		syncSelectionFromControlledValue();
+	}, [state.isOpen]);
+	const onOpenChange = (_isOpen) => {
+		state.toggle();
+		syncSelectionFromControlledValue();
+	};
+	const onOpenDropdown = () => {
+		syncSelectionFromControlledValue();
+		state.toggle();
+	};
+	const todayDate = today(effectiveTimeZone);
+	const getThisWeekRange = () => {
+		return {
+			start: startOfWeek(todayDate, locale),
+			end: endOfWeek(todayDate, locale)
+		};
+	};
+	const getLastWeekRange = () => {
+		const thisWeekStart = startOfWeek(todayDate, locale);
+		return {
+			start: thisWeekStart.subtract({ weeks: 1 }),
+			end: thisWeekStart.subtract({ days: 1 })
+		};
+	};
+	const getThisAndLastWeekRange = () => {
+		const thisWeekEnd = endOfWeek(todayDate, locale);
+		return {
+			start: startOfWeek(todayDate, locale).subtract({ weeks: 1 }),
+			end: thisWeekEnd
+		};
+	};
+	const getThisMonthRange = () => {
+		return {
+			start: startOfMonth(todayDate),
+			end: endOfMonth(todayDate)
+		};
+	};
+	const getThisAndLastMonthRange = () => {
+		const thisMonthEnd = endOfMonth(todayDate);
+		return {
+			start: startOfMonth(todayDate).subtract({ months: 1 }),
+			end: thisMonthEnd
+		};
+	};
+	const createPreset = (params) => {
+		let clampedValue = clampRangeToBounds(params.getValue());
+		let isDisabled = false;
+		if (params.keepEnabledUnlessFutureMin) {
+			let minDateIsInFuture = false;
+			if (minValue && minValue.compare(todayDate) > 0) minDateIsInFuture = true;
+			if (minDateIsInFuture) {
+				isDisabled = true;
+				clampedValue = null;
+			} else if (!clampedValue && maxValue) clampedValue = {
+				start: maxValue,
+				end: maxValue
+			};
+		}
+		if (!clampedValue) isDisabled = true;
+		if (clampedValue && !isRangeWithinBounds(clampedValue)) isDisabled = true;
+		return {
+			label: params.label,
+			getValue: params.getValue,
+			clampedValue,
+			isDisabled
+		};
+	};
+	const presets = [
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.thisWeek, { ns: "ui" }),
+			getValue: getThisWeekRange
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.lastWeek, { ns: "ui" }),
+			getValue: getLastWeekRange
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
+			getValue: getThisAndLastWeekRange
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.thisMonth, { ns: "ui" }),
+			getValue: getThisMonthRange
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
+			getValue: getThisAndLastMonthRange
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.thisYear, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate),
+				end: todayDate
+			})
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.lastYear, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate.subtract({ years: 1 })),
+				end: endOfYear(todayDate.subtract({ years: 1 }))
+			})
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate.subtract({ years: 1 })),
+				end: todayDate
+			})
+		}),
+		createPreset({
+			label: t(($) => $.ui.datePicker.presets.soFar, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate),
+				end: todayDate
+			}),
+			keepEnabledUnlessFutureMin: true
+		})
+	];
+	const selectPreset = (preset) => {
+		if (preset.isDisabled || !preset.clampedValue) return;
+		setActivePreset(preset.label);
+		const presetValue = preset.clampedValue;
+		syncCalendarStates(presetValue);
+		const startDate = presetValue.start;
+		leftCalendarState.setFocusedDate(startDate);
+		const endDate = presetValue.end;
+		if ((endDate.year - startDate.year) * 12 + (endDate.month - startDate.month) > 2) rightCalendarState.setFocusedDate(endDate);
+		else {
+			const rightCalendarMonth = startDate.add({ months: 1 });
+			rightCalendarState.setFocusedDate(rightCalendarMonth);
+		}
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("group relative inline-flex w-full flex-col text-left", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: [/* @__PURE__ */ jsx(DatePickerInput, {
+				ref: $5dc95899b306f630$export$c9058316764c140e(ref, datePickerInputRef),
+				as,
+				groupProps,
+				fieldProps: {
+					...startFieldProps,
+					onChange: (date) => {
+						startFieldProps.onChange?.(date);
+						emitPartialRangeChange("start", date);
+					},
+					onBlur: (event) => {
+						startFieldProps.onBlur?.(event);
+						handleBlur(state.value);
+					}
+				},
+				endFieldProps: {
+					...endFieldProps,
+					onChange: (date) => {
+						endFieldProps.onChange?.(date);
+						emitPartialRangeChange("end", date);
+					},
+					onBlur: (event) => {
+						endFieldProps.onBlur?.(event);
+						handleBlur(state.value);
+					}
+				},
+				fieldValue: normalizedValue?.start ?? null,
+				endFieldValue: normalizedValue?.end ?? null,
+				isValueControlled: true,
+				hasValue: normalizedValue?.start != null || normalizedValue?.end != null,
+				buttonProps,
+				isDisabled,
+				isInvalid: !!error,
+				disableDropdown,
+				variant,
+				size,
+				isClearable,
+				isClearableIfDisabled,
+				headerProps,
+				todayIcon,
+				todayIconButtonSize,
+				todayIconButtonComponent,
+				todayIconPlacement,
+				isDirty,
+				disableManualEntry,
+				autoFixYear,
+				placeholder,
+				className: inputClassName,
+				onOpenDropdown,
+				timeZone: effectiveTimeZone,
+				onClear: onInputClear
+			}), /* @__PURE__ */ jsx(DateTimeDialog, {
+				hideSidebar,
+				sidebar: /* @__PURE__ */ jsx("div", {
+					className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden",
+					children: presets.map((preset) => /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+						isDisabled: preset.isDisabled,
+						onClick: () => selectPreset(preset),
+						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item disabled:text-interactive-text-secondary-disabled!", activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
+						children: /* @__PURE__ */ jsx(Typography, {
+							size: "label-2",
+							sizeMobile: "label-3",
+							as: "span",
+							className: "whitespace-nowrap",
+							children: preset.label
+						})
+					}, preset.label))
+				}),
+				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
+					isDisabled,
+					isValid: !dialogState.isInvalid && !!dialogState.value,
+					onTodayPress,
+					onApply
+				}),
+				label,
+				triggerRef: dateRangePickerRef,
+				dialogProps,
+				isOpen: state.isOpen,
+				onOpenChange,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "mb-4 flex max-w-[804px] md:mb-0",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-1 justify-center",
+						children: /* @__PURE__ */ jsx(RangeCalendar, {
+							leftCalendarState,
+							rightCalendarState,
+							calendarProps,
+							onApply,
+							onRangeChange: syncCalendarStates,
+							onDateSelection: handleDateSelection,
+							onDateHover: handleDateHover,
+							rangeSelection,
+							hoverDate,
+							onKeyboardNavigation: handleKeyboardNavigation
+						})
+					})
+				})
+			})]
+		})
+	});
+};
+const DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
+	const allowPartialRange = props.allowPartialRange ?? ui.dateInput.allowPartialRange;
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { renderRealInput, replayStaticInputPress } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input, staticTarget) => {
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget) : null;
+		},
+		getPressTarget: (input) => {
+			const container = input.getContainer?.() ?? input;
+			if (!(container instanceof HTMLElement)) return null;
+			return container.querySelector("[data-static-press-action]");
+		}
+	});
+	const normalizedValue = props.value ?? null;
+	const formatDateRange = (range) => {
+		if (!range || !range.start && !range.end || !allowPartialRange && (!range.start || !range.end)) return null;
+		if (fullIso) return {
+			start: range.start ? DateTimeUtils.fromCalendarDateToUTCISO(range.start) : null,
+			end: range.end ? DateTimeUtils.fromCalendarDateToUTCISO(range.end, { endOfDay: true }) : null
+		};
+		const startDate = range.start ? DateTimeUtils.fromDateValueToLocal(range.start, "UTC") : null;
+		const endDate = range.end ? DateTimeUtils.fromDateValueToLocal(range.end, "UTC") : null;
+		return {
+			start: startDate ? startDate.toISOString().slice(0, 10) : null,
+			end: endDate ? endDate.toISOString().slice(0, 10) : null
+		};
+	};
+	const parseDateRange = (formattedRange) => {
+		if (!formattedRange || !formattedRange.start && !formattedRange.end || !allowPartialRange && (!formattedRange.start || !formattedRange.end)) return null;
+		if (fullIso) return {
+			start: formattedRange.start ? DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start) : null,
+			end: formattedRange.end ? DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end) : null
+		};
+		const startDate = formattedRange.start ? /* @__PURE__ */ new Date(`${formattedRange.start}T00:00:00.000Z`) : null;
+		const endDate = formattedRange.end ? /* @__PURE__ */ new Date(`${formattedRange.end}T00:00:00.000Z`) : null;
+		const startZonedDateTime = startDate ? DateTimeUtils.fromLocalToZonedDateTime(startDate, "UTC") : null;
+		const endZonedDateTime = endDate ? DateTimeUtils.fromLocalToZonedDateTime(endDate, "UTC") : null;
+		return {
+			start: startZonedDateTime ? toCalendarDate(startZonedDateTime) : null,
+			end: endZonedDateTime ? toCalendarDate(endZonedDateTime) : null
+		};
+	};
+	const parseCalendarDate = useCallback((formattedDate) => {
+		if (formattedDate == null) return null;
+		if (fullIso) return DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
+		const date = /* @__PURE__ */ new Date(`${formattedDate}T00:00:00.000Z`);
+		const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date, "UTC");
+		return toCalendarDate(zonedDateTime);
+	}, [fullIso]);
+	const dateLimits = useMemo(() => ({
+		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
+	}), [
+		minValue,
+		maxValue,
+		parseCalendarDate
+	]);
+	if (!renderInput) {
+		const startDateValue = parseCalendarDate(normalizedValue?.start ?? null);
+		const endDateValue = parseCalendarDate(normalizedValue?.end ?? null);
+		const hasProvidedRangeValue = !!(normalizedValue?.start || normalizedValue?.end);
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
+		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconButtonComponent = props.todayIconButtonComponent ?? ui.dateInput.todayIconButtonComponent;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
+			isDisabled,
+			renderStatic: true,
+			size: todayIconButtonSize,
+			todayIconButtonComponent
+		});
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticSegments = getStaticDateRangeSegments({
+			start: startDateValue,
+			end: endDateValue,
+			locale,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !hasProvidedRangeValue,
+			disableManualEntry,
+			placeholder: props.placeholder
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			onClear: () => props.onChange?.(null),
+			isDisabled,
+			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
+			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: "pr-0!",
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			contentGroup: "date-picker",
+			labelPlacement: "content-row",
+			dataAttributes: {
+				dataIsEmpty: !hasProvidedRangeValue,
+				dataIsFilled: hasProvidedRangeValue,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: hasProvidedRangeValue
+			},
+			onStaticInteract: renderRealInput,
+			onStaticPress: replayStaticInputPress,
+			staticPressTarget: "action",
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			showClear: hasProvidedRangeValue,
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
+			trailingClassName: "py-0! pl-0!",
+			action: showDropdown ? {
+				icon: ui.dateInput.calendarIcon,
+				onClick: () => {},
+				altText: ""
+			} : void 0,
+			children: staticSegments
+		});
+	}
+	return /* @__PURE__ */ jsx(DateRangePickerBase, {
+		...props,
+		...dateLimits,
+		ref: $5dc95899b306f630$export$c9058316764c140e(props.ref, inputRef),
+		value: parseDateRange(normalizedValue),
+		onChange: (value) => props.onChange?.(formatDateRange(value))
+	});
+};
+const DateRangePickerComponent = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateRangePickerInner, {
+				...innerProps,
+				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
+				value: field.value ?? null,
+				onChange: (value) => field.onChange(value ?? null),
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				fullIso,
+				minValue,
+				maxValue,
+				renderStaticInput
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(DateRangePickerInner, {
+		...props,
+		fullIso,
+		minValue,
+		maxValue,
+		renderStaticInput
+	});
+};
+const DateRangePicker = memo(DateRangePickerComponent);
+//#endregion
+export { DateRangePicker as t };