@povio/ui 2.3.0-rc.1 → 2.3.0-rc.10

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -12,6 +12,7 @@ import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -24,7 +25,20 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	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 todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const granularity = granularityProp ?? ui.dateInput.granularity;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
@@ -50,12 +64,16 @@ var DatePickerBase = (props) => {
 	const datePickerRef = useMemo(() => ({ get current() {
 		return datePickerInputRef.current?.getContainer?.() || null;
 	} }), []);
-	useImperativeHandle(ref, () => ({ clear: () => {
-		datePickerInputRef.current?.clear();
-	} }));
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
 	const handleBlur = (val) => {
 		onBlur?.({ target: { value: val } });
 	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -66,15 +84,16 @@ var DatePickerBase = (props) => {
 		...rest,
 		shouldForceLeadingZeros,
 		value,
-		onChange: (val) => {
-			let normalizedValue = val;
-			if (val) normalizedValue = normalizeByGranularity(val);
+		onChange: (val_0) => {
+			let normalizedValue = val_0;
+			if (val_0) normalizedValue = normalizeByGranularity(val_0);
 			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
 				state.setValue(state.value);
 				return;
 			}
 			onChange?.(normalizedValue);
 			dialogState.setValue(normalizedValue);
+			debouncedBlur(normalizedValue);
 			if (normalizedValue) {
 				calendarState.setFocusedDate(normalizedValue);
 				return;
@@ -225,7 +244,8 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		renderInput,
 		setRenderInput,
 		getFocusTarget: (input) => {
-			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 		}
 	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
@@ -247,14 +267,14 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		if (calendarDate === null) return null;
 		const normalizedDate = normalizeByGranularity(calendarDate);
 		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
-		const date = DateTimeUtils.fromDateValueToLocal(normalizedDate);
-		return DateTime.fromJSDate(date).toISODate();
+		const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate);
+		return DateTime.fromJSDate(date_0).toISODate();
 	};
 	const parseCalendarDate = (formattedDate) => {
 		if (formattedDate == null) return formattedDate;
 		if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
-		const date = DateTime.fromISO(formattedDate).toJSDate();
-		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date)));
+		const date_1 = DateTime.fromISO(formattedDate).toJSDate();
+		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1)));
 	};
 	const dateLimits = {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
@@ -274,7 +294,6 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		const staticSegments = getStaticCalendarDateSegments({
 			value: dateValue,
 			locale,
-			placeholder: props.placeholder,
 			shouldForceLeadingZeros,
 			isDisabled,
 			hidePlaceholder: as === "floating" && !dateValue
@@ -301,6 +320,8 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
@@ -330,7 +351,7 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		ref: mergeRefs(props.ref, inputRef),
 		granularity,
 		value: parseCalendarDate(props.value),
-		onChange: (value) => props.onChange?.(formatCalendarDate(value))
+		onChange: (value_0) => props.onChange?.(formatCalendarDate(value_0))
 	});
 };
 //#endregion

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -30,7 +30,18 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var 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 = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	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, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, ...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 todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -65,11 +76,14 @@ var DateRangePickerBase = (props) => {
 		shouldForceLeadingZeros
 	}, dialogState, dateRangePickerRef);
 	const { locale } = useLocale$1();
-	useImperativeHandle(ref, () => ({ clear: () => {
-		datePickerInputRef.current?.clear();
-	} }));
-	const handleBlur = (newValue) => {
-		onBlur?.({ target: { value: newValue } });
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
+	const handleBlur = (newValue_0) => {
+		onBlur?.({ target: { value: newValue_0 } });
 	};
 	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const formFieldProps = {
@@ -122,10 +136,10 @@ var DateRangePickerBase = (props) => {
 		className: headerClassName,
 		labelProps
 	};
-	const isValidRange = useCallback((newValue) => {
-		if (newValue?.start && newValue?.end) {
-			const startDate = newValue.start;
-			if (newValue.end.compare(startDate) < 0) {
+	const isValidRange = useCallback((newValue_1) => {
+		if (newValue_1?.start && newValue_1?.end) {
+			const startDate = newValue_1.start;
+			if (newValue_1.end.compare(startDate) < 0) {
 				setValidationRangeError(t(($) => $.ui.datePicker.errors.endDateBeforeStart, { ns: "ui" }));
 				return true;
 			}
@@ -133,20 +147,20 @@ var DateRangePickerBase = (props) => {
 		} else setValidationRangeError(void 0);
 		return false;
 	}, [t]);
-	const handleCalendarStatesChange = (newValue) => {
-		if (newValue) {
-			if (isValidRange(newValue)) return;
-			dialogState.setValue(newValue);
-			const startDate = newValue.start;
-			const endDate = newValue.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(newValue);
-			rightCalendarState.setValue(newValue);
+	const handleCalendarStatesChange = (newValue_2) => {
+		if (newValue_2) {
+			if (isValidRange(newValue_2)) return;
+			dialogState.setValue(newValue_2);
+			const startDate_0 = newValue_2.start;
+			const endDate_0 = newValue_2.end;
+			leftCalendarState.setFocusedDate(startDate_0);
+			if (startDate_0.year === endDate_0.year && startDate_0.month === endDate_0.month) rightCalendarState.setFocusedDate(startDate_0.add({ months: 1 }));
+			else rightCalendarState.setFocusedDate(endDate_0);
+			leftCalendarState.setValue(newValue_2);
+			rightCalendarState.setValue(newValue_2);
 			setRangeSelection({
-				start: newValue.start,
-				end: newValue.end,
+				start: newValue_2.start,
+				end: newValue_2.end,
 				isSelecting: false
 			});
 			setHoverDate(null);
@@ -170,27 +184,27 @@ var DateRangePickerBase = (props) => {
 			setHoverDate(date);
 		});
 	}, []);
-	const handleDateHover = useCallback((date) => {
-		if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date);
+	const handleDateHover = useCallback((date_0) => {
+		if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date_0);
 	}, [
 		rangeSelection.isSelecting,
 		rangeSelection.start,
 		throttledSetHoverDate
 	]);
-	const handleDateSelection = useCallback((date, calendarSide) => {
+	const handleDateSelection = useCallback((date_1, 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 }));
+			if (date_1.month !== currentVisibleMonth.month || date_1.year !== currentVisibleMonth.year) if (calendarSide === "left") {
+				leftCalendarState.setFocusedDate(date_1);
+				rightCalendarState.setFocusedDate(date_1.add({ months: 1 }));
 			} else {
-				rightCalendarState.setFocusedDate(date);
-				leftCalendarState.setFocusedDate(date.subtract({ months: 1 }));
+				rightCalendarState.setFocusedDate(date_1);
+				leftCalendarState.setFocusedDate(date_1.subtract({ months: 1 }));
 			}
 		}
 		if (!rangeSelection.isSelecting || !rangeSelection.start) {
 			setRangeSelection({
-				start: date,
+				start: date_1,
 				end: null,
 				isSelecting: true
 			});
@@ -199,7 +213,7 @@ var DateRangePickerBase = (props) => {
 			rightCalendarState.setValue(null);
 		} else {
 			const { start } = rangeSelection;
-			const end = date;
+			const end = date_1;
 			const finalStart = start.compare(end) <= 0 ? start : end;
 			const finalEnd = start.compare(end) <= 0 ? end : start;
 			const newRange = {
@@ -223,16 +237,16 @@ var DateRangePickerBase = (props) => {
 		rightCalendarState,
 		dialogState
 	]);
-	const handleKeyboardNavigation = useCallback((event, date, calendarSide) => {
-		const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
-		const otherState = calendarSide === "left" ? rightCalendarState : leftCalendarState;
+	const handleKeyboardNavigation = useCallback((event, date_2, calendarSide_0) => {
+		const currentState_0 = calendarSide_0 === "left" ? leftCalendarState : rightCalendarState;
+		const otherState = calendarSide_0 === "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) {
+				const nextDate = date_2.add({ days: 1 });
+				const currentMonth_2 = currentState_0.visibleRange.start;
+				const otherMonth_2 = otherState.visibleRange.start;
+				if (calendarSide_0 === "left" && nextDate.month !== currentMonth_2.month) if (nextDate.year === otherMonth_2.year && nextDate.month === otherMonth_2.month) {
 					otherState.setFocusedDate(nextDate);
 					shouldPreventDefault = true;
 				} else {
@@ -242,10 +256,10 @@ var DateRangePickerBase = (props) => {
 				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) {
+				const prevDate = date_2.subtract({ days: 1 });
+				const currentMonth_1 = currentState_0.visibleRange.start;
+				const otherMonth_1 = otherState.visibleRange.start;
+				if (calendarSide_0 === "right" && prevDate.month !== currentMonth_1.month) if (prevDate.year === otherMonth_1.year && prevDate.month === otherMonth_1.month) {
 					otherState.setFocusedDate(prevDate);
 					shouldPreventDefault = true;
 				} else {
@@ -255,10 +269,10 @@ var DateRangePickerBase = (props) => {
 				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) {
+				const nextWeekDate = date_2.add({ weeks: 1 });
+				const currentMonth_0 = currentState_0.visibleRange.start;
+				const otherMonth_0 = otherState.visibleRange.start;
+				if (calendarSide_0 === "left" && nextWeekDate.month !== currentMonth_0.month) if (nextWeekDate.year === otherMonth_0.year && nextWeekDate.month === otherMonth_0.month) {
 					otherState.setFocusedDate(nextWeekDate);
 					shouldPreventDefault = true;
 				} else {
@@ -268,10 +282,10 @@ var DateRangePickerBase = (props) => {
 				break;
 			}
 			case "ArrowUp": {
-				const prevWeekDate = date.subtract({ weeks: 1 });
-				const currentMonth = currentState.visibleRange.start;
+				const prevWeekDate = date_2.subtract({ weeks: 1 });
+				const currentMonth = currentState_0.visibleRange.start;
 				const otherMonth = otherState.visibleRange.start;
-				if (calendarSide === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
+				if (calendarSide_0 === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
 					otherState.setFocusedDate(prevWeekDate);
 					shouldPreventDefault = true;
 				} else {
@@ -282,7 +296,7 @@ var DateRangePickerBase = (props) => {
 			}
 			case "Enter":
 			case " ":
-				handleDateSelection(date);
+				handleDateSelection(date_2);
 				shouldPreventDefault = true;
 				break;
 			case "Escape":
@@ -306,14 +320,14 @@ var DateRangePickerBase = (props) => {
 		rightCalendarState,
 		handleDateSelection
 	]);
-	const syncCalendarStates = useCallback((newValue) => {
-		if (isValidRange(newValue)) return;
-		leftCalendarState.setValue(newValue);
-		rightCalendarState.setValue(newValue);
-		dialogState.setValue(newValue);
-		if (newValue) setRangeSelection({
-			start: newValue.start,
-			end: newValue.end,
+	const syncCalendarStates = useCallback((newValue_3) => {
+		if (isValidRange(newValue_3)) return;
+		leftCalendarState.setValue(newValue_3);
+		rightCalendarState.setValue(newValue_3);
+		dialogState.setValue(newValue_3);
+		if (newValue_3) setRangeSelection({
+			start: newValue_3.start,
+			end: newValue_3.end,
 			isSelecting: false
 		});
 		else setRangeSelection({
@@ -355,11 +369,11 @@ var DateRangePickerBase = (props) => {
 				dialogState.setValue(state.value);
 				leftCalendarState.setValue(state.value);
 				rightCalendarState.setValue(state.value);
-				const startDate = state.value.start || today(getLocalTimeZone());
-				const endDate = state.value.end || today(getLocalTimeZone()).add({ months: 1 });
-				leftCalendarState.setFocusedDate(startDate);
-				if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
-				else rightCalendarState.setFocusedDate(endDate);
+				const startDate_1 = state.value.start || today(getLocalTimeZone());
+				const endDate_1 = state.value.end || today(getLocalTimeZone()).add({ months: 1 });
+				leftCalendarState.setFocusedDate(startDate_1);
+				if (startDate_1.year === endDate_1.year && startDate_1.month === endDate_1.month) rightCalendarState.setFocusedDate(startDate_1.add({ months: 1 }));
+				else rightCalendarState.setFocusedDate(endDate_1);
 				setRangeSelection({
 					start: state.value.start,
 					end: state.value.end,
@@ -368,87 +382,87 @@ var DateRangePickerBase = (props) => {
 			}
 		}
 	};
-	const todayDate = today(getLocalTimeZone());
+	const todayDate_0 = today(getLocalTimeZone());
 	const getThisWeekRange = () => {
 		return {
-			start: startOfWeek(todayDate, locale),
-			end: endOfWeek(todayDate, locale)
+			start: startOfWeek(todayDate_0, locale),
+			end: endOfWeek(todayDate_0, locale)
 		};
 	};
 	const getLastWeekRange = () => {
-		const thisWeekStart = startOfWeek(todayDate, locale);
+		const thisWeekStart = startOfWeek(todayDate_0, locale);
 		return {
 			start: thisWeekStart.subtract({ weeks: 1 }),
 			end: thisWeekStart.subtract({ days: 1 })
 		};
 	};
 	const getThisAndLastWeekRange = () => {
-		const thisWeekEnd = endOfWeek(todayDate, locale);
+		const thisWeekEnd = endOfWeek(todayDate_0, locale);
 		return {
-			start: startOfWeek(todayDate, locale).subtract({ weeks: 1 }),
+			start: startOfWeek(todayDate_0, locale).subtract({ weeks: 1 }),
 			end: thisWeekEnd
 		};
 	};
 	const getThisMonthRange = () => {
 		return {
-			start: startOfMonth(todayDate),
-			end: endOfMonth(todayDate)
+			start: startOfMonth(todayDate_0),
+			end: endOfMonth(todayDate_0)
 		};
 	};
 	const getThisAndLastMonthRange = () => {
-		const thisMonthEnd = endOfMonth(todayDate);
+		const thisMonthEnd = endOfMonth(todayDate_0);
 		return {
-			start: startOfMonth(todayDate).subtract({ months: 1 }),
+			start: startOfMonth(todayDate_0).subtract({ months: 1 }),
 			end: thisMonthEnd
 		};
 	};
 	const presets = [
 		{
-			label: t(($) => $.ui.datePicker.presets.thisWeek, { ns: "ui" }),
+			label: t(($_0) => $_0.ui.datePicker.presets.thisWeek, { ns: "ui" }),
 			getValue: getThisWeekRange
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.lastWeek, { ns: "ui" }),
+			label: t(($_1) => $_1.ui.datePicker.presets.lastWeek, { ns: "ui" }),
 			getValue: getLastWeekRange
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
+			label: t(($_2) => $_2.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
 			getValue: getThisAndLastWeekRange
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.thisMonth, { ns: "ui" }),
+			label: t(($_3) => $_3.ui.datePicker.presets.thisMonth, { ns: "ui" }),
 			getValue: getThisMonthRange
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
+			label: t(($_4) => $_4.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
 			getValue: getThisAndLastMonthRange
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.thisYear, { ns: "ui" }),
+			label: t(($_5) => $_5.ui.datePicker.presets.thisYear, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate),
-				end: todayDate
+				start: startOfYear(todayDate_0),
+				end: todayDate_0
 			})
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.lastYear, { ns: "ui" }),
+			label: t(($_6) => $_6.ui.datePicker.presets.lastYear, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate.subtract({ years: 1 })),
-				end: endOfYear(todayDate.subtract({ years: 1 }))
+				start: startOfYear(todayDate_0.subtract({ years: 1 })),
+				end: endOfYear(todayDate_0.subtract({ years: 1 }))
 			})
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
+			label: t(($_7) => $_7.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate.subtract({ years: 1 })),
-				end: todayDate
+				start: startOfYear(todayDate_0.subtract({ years: 1 })),
+				end: todayDate_0
 			})
 		},
 		{
-			label: t(($) => $.ui.datePicker.presets.soFar, { ns: "ui" }),
+			label: t(($_8) => $_8.ui.datePicker.presets.soFar, { ns: "ui" }),
 			getValue: () => ({
-				start: startOfYear(todayDate),
-				end: todayDate
+				start: startOfYear(todayDate_0),
+				end: todayDate_0
 			})
 		}
 	];
@@ -456,12 +470,12 @@ var DateRangePickerBase = (props) => {
 		setActivePreset(preset.label);
 		const presetValue = preset.getValue();
 		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);
+		const startDate_2 = presetValue.start;
+		leftCalendarState.setFocusedDate(startDate_2);
+		const endDate_2 = presetValue.end;
+		if ((endDate_2.year - startDate_2.year) * 12 + (endDate_2.month - startDate_2.month) > 2) rightCalendarState.setFocusedDate(endDate_2);
 		else {
-			const rightCalendarMonth = startDate.add({ months: 1 });
+			const rightCalendarMonth = startDate_2.add({ months: 1 });
 			rightCalendarState.setFocusedDate(rightCalendarMonth);
 		}
 	};
@@ -502,17 +516,17 @@ var DateRangePickerBase = (props) => {
 				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(Button, {
-						onClick: () => selectPreset(preset),
-						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item", 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: presets.map((preset_0) => /* @__PURE__ */ jsx(Button, {
+						onClick: () => selectPreset(preset_0),
+						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item", activePreset !== preset_0.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset_0.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
+							children: preset_0.label
 						})
-					}, preset.label))
+					}, preset_0.label))
 				}),
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -559,7 +573,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		renderInput,
 		setRenderInput,
 		getFocusTarget: (input) => {
-			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 		}
 	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
@@ -588,10 +603,10 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			start: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start),
 			end: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end)
 		};
-		const startDate = DateTime.fromISO(formattedRange.start).toJSDate();
-		const endDate = DateTime.fromISO(formattedRange.end).toJSDate();
-		const startZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(startDate);
-		const endZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(endDate);
+		const startDate_0 = DateTime.fromISO(formattedRange.start).toJSDate();
+		const endDate_0 = DateTime.fromISO(formattedRange.end).toJSDate();
+		const startZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(startDate_0);
+		const endZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(endDate_0);
 		return {
 			start: toCalendarDate(startZonedDateTime),
 			end: toCalendarDate(endZonedDateTime)
@@ -624,7 +639,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			start: startDateValue,
 			end: endDateValue,
 			locale,
-			placeholder: props.placeholder,
 			shouldForceLeadingZeros,
 			isDisabled,
 			hidePlaceholder: as === "floating" && !hasProvidedRangeValue
@@ -651,6 +665,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
@@ -679,7 +695,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		...dateLimits,
 		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateRange(props.value),
-		onChange: (value) => props.onChange?.(formatDateRange(value))
+		onChange: (value_0) => props.onChange?.(formatDateRange(value_0))
 	});
 };
 //#endregion