@persona/design-system 0.10.10 → 0.10.11

package/dist/{DatePicker-C9redLBr.mjs → DatePicker-BK7ioKBm.mjs}

@@ -1,18 +1,18 @@
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
-import { t as Card_default } from "./Card-DuQHyroh.mjs";
-import { withAlpha } from "./lib/color.mjs";
 import { isDisabled, isFocused, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { Z_INDICES } from "./lib/zindex.mjs";
+import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { focusWithinOutline } from "./mixins/focus.mjs";
+import { withAlpha } from "./lib/color.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { t as IconButton } from "./IconButton-DxHB2g80.mjs";
-import { t as ClearButton } from "./Input-RHXujO9u.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-BVn1jh46.mjs";
-import { s as Popover_default } from "./Popover-DordjYNM.mjs";
-import { a as FormLabel } from "./FormControl-BztNXLn6.mjs";
-import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
+import { t as Card_default } from "./Card-DuQHyroh.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { t as IconButton } from "./IconButton-kSjnfhWt.mjs";
+import { t as ClearButton } from "./Input-TRmTBEav.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-BvMzSH2I.mjs";
+import { s as Popover_default } from "./Popover-DuFjaSoq.mjs";
+import { a as FormLabel } from "./FormControl--pbTH3bY.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateTime, Settings } from "luxon";
 import { ArrowLeftIcon, ArrowRightIcon, CircleXInverseIcon } from "@persona/icons";
@@ -172,274 +172,32 @@ const CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }) => {
 	});
 };
 //#endregion
-//#region src/components/DatePicker/Calendar/RangeCalendarPresets.tsx
-/** The preset windows the picker offers; the codec resolves the same ids on read. */
-const getDefaultPresets = (tz) => {
-	const now = today(tz);
-	return [
-		{
-			id: "last_7_days",
-			label: "Last 7 days",
-			range: {
-				start: now.subtract({ days: 7 }),
-				end: now
-			}
-		},
-		{
-			id: "last_14_days",
-			label: "Last 14 days",
-			range: {
-				start: now.subtract({ days: 14 }),
-				end: now
-			}
-		},
-		{
-			id: "last_30_days",
-			label: "Last 30 days",
-			range: {
-				start: now.subtract({ days: 30 }),
-				end: now
-			}
-		},
-		{
-			id: "this_month",
-			label: "This month",
-			range: {
-				start: startOfMonth(now),
-				end: now
-			}
-		},
-		{
-			id: "last_month",
-			label: "Last month",
-			range: {
-				start: startOfMonth(now.subtract({ months: 1 })),
-				end: endOfMonth(now.subtract({ months: 1 }))
-			}
-		},
-		{
-			id: "this_year",
-			label: "This year",
-			range: {
-				start: startOfYear(now),
-				end: now
-			}
-		},
-		{
-			id: "last_year",
-			label: "Last year",
-			range: {
-				start: startOfYear(now.subtract({ years: 1 })),
-				end: endOfYear(now.subtract({ years: 1 }))
-			}
-		}
-	];
-};
-/**
-* Compare two date values by year/month/day only, ignoring time components.
-*/
-const datesMatchByDay = (a, b) => a.year === b.year && a.month === b.month && a.day === b.day;
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-const StyledPresetButton = styled(MenuItem)`
-  ${({ selected }) => !selected && css`
-      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {
-        background-color: transparent;
-      }
-    `}
-
-  &:focus-visible {
-    // MenuItems default to outline: none, so we need to override it here.
-    outline: 2px solid ${({ theme }) => semanticColor(theme, "BorderFocus", Color.BorderFocus)} !important;
-    outline-offset: 1px;
-  }
-`;
-const PresetButton = ({ commitRange, state, preset, isSelected, setDateMode, onPresetSelect, ...props }) => {
-	const ref = useRef();
-	const { buttonProps } = useButton({ onPress: () => {
-		const commit = () => commitRange(preset.range);
-		if (onPresetSelect) onPresetSelect(preset.id, commit);
-		else commit();
-		setDateMode(null);
-	} }, ref);
-	const { "aria-current": _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);
-	return /* @__PURE__ */ jsx(StyledPresetButton, {
-		selected: isSelected,
-		...mergedProps,
-		ref,
-		children: preset.label
-	});
-};
-const DateRangePickerPresets = ({ presetsFn = getDefaultPresets, commitRange, state, setDateMode, onPresetSelect, selectedPreset, ...props }) => {
-	const presets = presetsFn(Settings.defaultZone.name);
-	const { value } = state;
-	const selectedPresetIndex = value ? presets.findIndex((preset) => datesMatchByDay(preset.range.start, value.start) && datesMatchByDay(preset.range.end, value.end)) : -1;
-	const infersSelection = typeof selectedPreset === "undefined";
-	return /* @__PURE__ */ jsx(Container, {
-		...props,
-		children: /* @__PURE__ */ jsx(MenuList, {
-			"aria-label": "Date range presets",
-			children: presets.map((preset, i) => /* @__PURE__ */ jsx(PresetButton, {
-				preset,
-				commitRange,
-				state,
-				setDateMode,
-				onPresetSelect,
-				isSelected: infersSelection ? i === selectedPresetIndex : preset.id === selectedPreset
-			}, i))
-		})
-	});
-};
-const arePropsEqual = (prevProps, nextProps) => {
-	if (prevProps.selectedPreset !== nextProps.selectedPreset || prevProps.onPresetSelect !== nextProps.onPresetSelect || prevProps.commitRange !== nextProps.commitRange || prevProps.setDateMode !== nextProps.setDateMode || prevProps.presetsFn !== nextProps.presetsFn) return false;
-	const prevValue = prevProps.state.value;
-	const nextValue = nextProps.state.value;
-	if (!prevValue && !nextValue) return true;
-	if (!prevValue || !nextValue) return false;
-	return prevValue.start.compare(nextValue.start) === 0 && prevValue.end.compare(nextValue.end) === 0;
-};
-var RangeCalendarPresets_default = memo(DateRangePickerPresets, arePropsEqual);
-//#endregion
 //#region src/components/DatePicker/common.ts
 const createCalendar = () => new GregorianCalendar();
 //#endregion
-//#region src/components/DatePicker/time-range.ts
-const earliest = (a, b) => a.compare(b) <= 0 ? a : b;
-const presetEnd = (end) => earliest(end.set({
-	hour: 23,
-	minute: 59,
-	second: 59,
-	millisecond: 999
-}), toCalendarDateTime(now(Settings.defaultZone.name)).set({
-	second: 0,
-	millisecond: 0
-}));
-//#endregion
-//#region src/components/DatePicker/Calendar/RangeCalendar.tsx
-const RangeCalendarHeader = styled(CalendarHeader)`
-  gap: ${Spacing[5]};
-`;
-const CalendarHeaderMonth = styled.div`
-  display: grid;
-  grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
-  grid-template-areas: 'prev title next';
-  width: 266px;
-  align-items: center;
-`;
-const CalendarGrids = styled.div`
-  display: flex;
-  gap: ${Spacing[5]};
-  align-items: start;
-`;
-const PrevButton = styled(CalendarButton)`
-  grid-area: prev;
-  justify-self: start;
-  border-radius: ${BorderRadius.Sm};
-`;
-const NextButton = styled(CalendarButton)`
-  grid-area: next;
-  justify-self: end;
-  border-radius: ${BorderRadius.Sm};
-`;
-const RangeCalendarHeading = styled(CalendarHeading)`
-  grid-area: title;
-`;
-const RangeCalendarContainer = styled.div`
-  display: flex;
-`;
-const PresetsContainer = styled(Card_default.Body)`
-  border-right: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", Color.BorderHairline)};
-`;
-const hasTimeComponent = (date) => "hour" in date;
-const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, visibleMonths = 2, setDateMode, onPresetSelect, selectedPreset, setValue, granularity, ...props }) => {
+//#region src/components/DatePicker/Calendar/Calendar.tsx
+const Calendar = (props) => {
 	const { locale } = useLocale();
-	const timezoneName = Settings.defaultZone.name;
-	const rangeCalendarState = useRangeCalendarState({
+	const state = useCalendarState({
 		...props,
-		minValue: minDate,
-		maxValue: maxDate,
-		visibleDuration: { months: visibleMonths },
 		locale,
 		createCalendar
 	});
-	const state = {
-		...rangeCalendarState,
-		setValue: (value) => {
-			if (!value || granularity === "day") {
-				rangeCalendarState.setValue(value);
-				return;
-			}
-			setValue({
-				start: toZoned(toCalendarDateTime(value.start), timezoneName),
-				end: toZoned(hasTimeComponent(value.end) ? toCalendarDateTime(value.end) : presetEnd(toCalendarDateTime(value.end)), timezoneName)
-			});
-		},
-		selectDate: (date) => {
-			if (onSelectDate) {
-				onSelectDate(date);
-				rangeCalendarState.setAnchorDate(null);
-			} else rangeCalendarState.selectDate(date);
-		}
-	};
-	const commitRef = useRef(state.setValue);
-	useEffect(() => {
-		commitRef.current = state.setValue;
-	});
-	const commitRange = useCallback((value) => commitRef.current(value), []);
-	const ref = useRef();
-	const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);
-	const monthDateFormatter = useDateFormatter({
-		month: "long",
-		year: "numeric",
-		timeZone: timezoneName
-	});
-	const monthHeaders = range(0, visibleMonths).map((i) => {
-		return /* @__PURE__ */ jsxs(CalendarHeaderMonth, { children: [
-			i === 0 && /* @__PURE__ */ jsx(PrevButton, {
+	const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);
+	return /* @__PURE__ */ jsxs(CalendarContainer, {
+		...calendarProps,
+		ref: props.calendarRef,
+		children: [/* @__PURE__ */ jsxs(CalendarHeader, { children: [
+			/* @__PURE__ */ jsx(CalendarButton, {
 				...prevButtonProps,
 				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
 			}),
-			/* @__PURE__ */ jsx(RangeCalendarHeading, {
-				"aria-hidden": true,
-				children: monthDateFormatter.format(state.visibleRange.start.add({ months: i }).toDate(timezoneName))
-			}),
-			i === visibleMonths - 1 && /* @__PURE__ */ jsx(NextButton, {
+			/* @__PURE__ */ jsx(CalendarHeading, { children: title }),
+			/* @__PURE__ */ jsx(CalendarButton, {
 				...nextButtonProps,
 				children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
 			})
-		] }, `calendar-month-${i}`);
-	});
-	const monthGrids = range(0, visibleMonths).map((i) => {
-		return /* @__PURE__ */ jsx(CalendarGrid, {
-			state,
-			offset: { months: i },
-			skipFromTabOrder: i > 0
-		}, `calendar-grid-${i}`);
-	});
-	return /* @__PURE__ */ jsxs(RangeCalendarContainer, {
-		ref: calendarRef,
-		children: [!hidePresets && /* @__PURE__ */ jsx(PresetsContainer, {
-			padding: Spacing[3],
-			children: /* @__PURE__ */ jsx(RangeCalendarPresets_default, {
-				state,
-				commitRange,
-				setDateMode,
-				onPresetSelect,
-				selectedPreset
-			})
-		}), /* @__PURE__ */ jsx(Card_default.Body, {
-			padding: Spacing[3],
-			children: /* @__PURE__ */ jsxs(CalendarContainer, {
-				...calendarProps,
-				ref,
-				children: [/* @__PURE__ */ jsxs(RangeCalendarHeader, { children: [/* @__PURE__ */ jsx(VisuallyHidden, {
-					isFocusable: false,
-					children: calendarProps["aria-label"]
-				}), monthHeaders] }), /* @__PURE__ */ jsx(CalendarGrids, { children: monthGrids })]
-			})
-		})]
+		] }), /* @__PURE__ */ jsx(CalendarGrid, { state })]
 	});
 };
 //#endregion
@@ -568,32 +326,396 @@ const InputBox = styled.div`
 	}
 }}
 `;
-const DateField = forwardRef(function DateField(props, forwardedRef) {
-	const { locale } = useLocale$1();
-	const state = useDateFieldState({
+const DateField = forwardRef(function DateField(props, forwardedRef) {
+	const { locale } = useLocale$1();
+	const state = useDateFieldState({
+		...props,
+		locale,
+		createCalendar
+	});
+	const ref = useRef();
+	const { fieldProps } = useDateField(props, state, ref);
+	return /* @__PURE__ */ jsx(InputBox, {
+		...fieldProps,
+		...props.dateFieldProps || {},
+		ref: mergeRefs(ref, forwardedRef),
+		focused: props.focused,
+		disabled: props.disabled,
+		"aria-label": props["aria-label"],
+		$size: props.size ?? "md",
+		$inputPosition: props.inputPosition,
+		$hasTimeZone: state.segments.some((segment) => segment.type === "timeZoneName"),
+		hasError: props.hasError,
+		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, {
+			segment,
+			state
+		}, i))
+	});
+});
+//#endregion
+//#region src/components/DatePicker/DatePicker.tsx
+const OpenButton$1 = ({ calendarRef }) => {
+	const openCalBtnRef = useRef(null);
+	const { buttonProps } = useButton({ onPress: () => {
+		if (calendarRef.current) calendarRef.current.querySelector("button[aria-label=\"Previous\"]").focus();
+	} }, openCalBtnRef);
+	return /* @__PURE__ */ jsx("button", {
+		...buttonProps,
+		ref: openCalBtnRef,
+		"aria-label": "Open calendar"
+	});
+};
+const DatePicker = (props) => {
+	const state = useDatePickerState(props);
+	const ref = useRef(null);
+	const fieldRef = useRef(null);
+	const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);
+	const calendarRef = useRef(null);
+	const isClosingRef = useRef(false);
+	const { focusWithinProps } = useFocusWithin({
+		onFocusWithin: () => {
+			if (!state.isOpen && !isClosingRef.current) state.setOpen(true);
+		},
+		onBlurWithin: (e) => {
+			if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) state.setOpen(false);
+		}
+	});
+	const handleOutsideClick = (e) => {
+		const target = e.target;
+		if (ref.current?.contains(target)) return;
+		if (state.isOpen) state.setOpen(false);
+	};
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && !state.isOpen) {
+			event.preventDefault();
+			state.setOpen(true);
+		}
+	}, [state]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: /* @__PURE__ */ jsxs(Popover_default, {
+			open: state.isOpen,
+			modal: false,
+			contentProps: {
+				style: { zIndex: props.useModalZIndex ? Z_INDICES.modalDropdown : Z_INDICES.dropdown },
+				align: "start",
+				"aria-modal": true,
+				onInteractOutside: handleOutsideClick,
+				onEscapeKeyDown: () => {
+					state.setOpen(false);
+				},
+				onCloseAutoFocus: (e) => {
+					e.preventDefault();
+					isClosingRef.current = true;
+					if (fieldRef.current) {
+						const firstEditableSegment = fieldRef.current.querySelector("[tabindex=\"0\"]");
+						if (firstEditableSegment instanceof HTMLElement) firstEditableSegment.focus();
+					}
+					requestAnimationFrame(() => {
+						isClosingRef.current = false;
+					});
+				},
+				noPadding: true
+			},
+			children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					...mergeProps(groupProps, focusWithinProps),
+					ref,
+					style: {
+						display: "flex",
+						position: "relative"
+					},
+					children: [/* @__PURE__ */ jsx(DateField, {
+						ref: fieldRef,
+						id: props.id,
+						dateFieldProps: props.dateFieldProps,
+						disabled: props.disabled,
+						size: props.size,
+						...mergeProps(fieldProps, { onKeyDown: handleKeyDown }),
+						value: fieldProps.value ?? void 0
+					}), /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton$1, { calendarRef }) })]
+				})
+			}), /* @__PURE__ */ jsx(Calendar, {
+				...calendarProps,
+				autoFocus: void 0,
+				calendarRef,
+				id: "calendar-popover"
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/DatePicker/Calendar/RangeCalendarPresets.tsx
+/** The preset windows the picker offers; the codec resolves the same ids on read. */
+const getDefaultPresets = (tz) => {
+	const now = today(tz);
+	return [
+		{
+			id: "last_7_days",
+			label: "Last 7 days",
+			range: {
+				start: now.subtract({ days: 7 }),
+				end: now
+			}
+		},
+		{
+			id: "last_14_days",
+			label: "Last 14 days",
+			range: {
+				start: now.subtract({ days: 14 }),
+				end: now
+			}
+		},
+		{
+			id: "last_30_days",
+			label: "Last 30 days",
+			range: {
+				start: now.subtract({ days: 30 }),
+				end: now
+			}
+		},
+		{
+			id: "this_month",
+			label: "This month",
+			range: {
+				start: startOfMonth(now),
+				end: now
+			}
+		},
+		{
+			id: "last_month",
+			label: "Last month",
+			range: {
+				start: startOfMonth(now.subtract({ months: 1 })),
+				end: endOfMonth(now.subtract({ months: 1 }))
+			}
+		},
+		{
+			id: "this_year",
+			label: "This year",
+			range: {
+				start: startOfYear(now),
+				end: now
+			}
+		},
+		{
+			id: "last_year",
+			label: "Last year",
+			range: {
+				start: startOfYear(now.subtract({ years: 1 })),
+				end: endOfYear(now.subtract({ years: 1 }))
+			}
+		}
+	];
+};
+/**
+* Compare two date values by year/month/day only, ignoring time components.
+*/
+const datesMatchByDay = (a, b) => a.year === b.year && a.month === b.month && a.day === b.day;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledPresetButton = styled(MenuItem)`
+  ${({ selected }) => !selected && css`
+      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {
+        background-color: transparent;
+      }
+    `}
+
+  &:focus-visible {
+    // MenuItems default to outline: none, so we need to override it here.
+    outline: 2px solid ${({ theme }) => semanticColor(theme, "BorderFocus", Color.BorderFocus)} !important;
+    outline-offset: 1px;
+  }
+`;
+const PresetButton = ({ commitRange, state, preset, isSelected, setDateMode, onPresetSelect, ...props }) => {
+	const ref = useRef();
+	const { buttonProps } = useButton({ onPress: () => {
+		const commit = () => commitRange(preset.range);
+		if (onPresetSelect) onPresetSelect(preset.id, commit);
+		else commit();
+		setDateMode(null);
+	} }, ref);
+	const { "aria-current": _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);
+	return /* @__PURE__ */ jsx(StyledPresetButton, {
+		selected: isSelected,
+		...mergedProps,
+		ref,
+		children: preset.label
+	});
+};
+const DateRangePickerPresets = ({ presetsFn = getDefaultPresets, commitRange, state, setDateMode, onPresetSelect, selectedPreset, ...props }) => {
+	const presets = presetsFn(Settings.defaultZone.name);
+	const { value } = state;
+	const selectedPresetIndex = value ? presets.findIndex((preset) => datesMatchByDay(preset.range.start, value.start) && datesMatchByDay(preset.range.end, value.end)) : -1;
+	const infersSelection = typeof selectedPreset === "undefined";
+	return /* @__PURE__ */ jsx(Container, {
+		...props,
+		children: /* @__PURE__ */ jsx(MenuList, {
+			"aria-label": "Date range presets",
+			children: presets.map((preset, i) => /* @__PURE__ */ jsx(PresetButton, {
+				preset,
+				commitRange,
+				state,
+				setDateMode,
+				onPresetSelect,
+				isSelected: infersSelection ? i === selectedPresetIndex : preset.id === selectedPreset
+			}, i))
+		})
+	});
+};
+const arePropsEqual = (prevProps, nextProps) => {
+	if (prevProps.selectedPreset !== nextProps.selectedPreset || prevProps.onPresetSelect !== nextProps.onPresetSelect || prevProps.commitRange !== nextProps.commitRange || prevProps.setDateMode !== nextProps.setDateMode || prevProps.presetsFn !== nextProps.presetsFn) return false;
+	const prevValue = prevProps.state.value;
+	const nextValue = nextProps.state.value;
+	if (!prevValue && !nextValue) return true;
+	if (!prevValue || !nextValue) return false;
+	return prevValue.start.compare(nextValue.start) === 0 && prevValue.end.compare(nextValue.end) === 0;
+};
+var RangeCalendarPresets_default = memo(DateRangePickerPresets, arePropsEqual);
+//#endregion
+//#region src/components/DatePicker/time-range.ts
+const earliest = (a, b) => a.compare(b) <= 0 ? a : b;
+const presetEnd = (end) => earliest(end.set({
+	hour: 23,
+	minute: 59,
+	second: 59,
+	millisecond: 999
+}), toCalendarDateTime(now(Settings.defaultZone.name)).set({
+	second: 0,
+	millisecond: 0
+}));
+//#endregion
+//#region src/components/DatePicker/Calendar/RangeCalendar.tsx
+const RangeCalendarHeader = styled(CalendarHeader)`
+  gap: ${Spacing[5]};
+`;
+const CalendarHeaderMonth = styled.div`
+  display: grid;
+  grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
+  grid-template-areas: 'prev title next';
+  width: 266px;
+  align-items: center;
+`;
+const CalendarGrids = styled.div`
+  display: flex;
+  gap: ${Spacing[5]};
+  align-items: start;
+`;
+const PrevButton = styled(CalendarButton)`
+  grid-area: prev;
+  justify-self: start;
+  border-radius: ${BorderRadius.Sm};
+`;
+const NextButton = styled(CalendarButton)`
+  grid-area: next;
+  justify-self: end;
+  border-radius: ${BorderRadius.Sm};
+`;
+const RangeCalendarHeading = styled(CalendarHeading)`
+  grid-area: title;
+`;
+const RangeCalendarContainer = styled.div`
+  display: flex;
+`;
+const PresetsContainer = styled(Card_default.Body)`
+  border-right: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", Color.BorderHairline)};
+`;
+const hasTimeComponent = (date) => "hour" in date;
+const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, visibleMonths = 2, setDateMode, onPresetSelect, selectedPreset, setValue, granularity, ...props }) => {
+	const { locale } = useLocale();
+	const timezoneName = Settings.defaultZone.name;
+	const rangeCalendarState = useRangeCalendarState({
 		...props,
+		minValue: minDate,
+		maxValue: maxDate,
+		visibleDuration: { months: visibleMonths },
 		locale,
 		createCalendar
 	});
+	const state = {
+		...rangeCalendarState,
+		setValue: (value) => {
+			if (!value || granularity === "day") {
+				rangeCalendarState.setValue(value);
+				return;
+			}
+			setValue({
+				start: toZoned(toCalendarDateTime(value.start), timezoneName),
+				end: toZoned(hasTimeComponent(value.end) ? toCalendarDateTime(value.end) : presetEnd(toCalendarDateTime(value.end)), timezoneName)
+			});
+		},
+		selectDate: (date) => {
+			if (onSelectDate) {
+				onSelectDate(date);
+				rangeCalendarState.setAnchorDate(null);
+			} else rangeCalendarState.selectDate(date);
+		}
+	};
+	const commitRef = useRef(state.setValue);
+	useEffect(() => {
+		commitRef.current = state.setValue;
+	});
+	const commitRange = useCallback((value) => commitRef.current(value), []);
 	const ref = useRef();
-	const { fieldProps } = useDateField(props, state, ref);
-	return /* @__PURE__ */ jsx(InputBox, {
-		...fieldProps,
-		...props.dateFieldProps || {},
-		ref: mergeRefs(ref, forwardedRef),
-		focused: props.focused,
-		disabled: props.disabled,
-		"aria-label": props["aria-label"],
-		$size: props.size ?? "md",
-		$inputPosition: props.inputPosition,
-		$hasTimeZone: state.segments.some((segment) => segment.type === "timeZoneName"),
-		hasError: props.hasError,
-		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, {
-			segment,
-			state
-		}, i))
+	const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);
+	const monthDateFormatter = useDateFormatter({
+		month: "long",
+		year: "numeric",
+		timeZone: timezoneName
 	});
-});
+	const monthHeaders = range(0, visibleMonths).map((i) => {
+		return /* @__PURE__ */ jsxs(CalendarHeaderMonth, { children: [
+			i === 0 && /* @__PURE__ */ jsx(PrevButton, {
+				...prevButtonProps,
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+			}),
+			/* @__PURE__ */ jsx(RangeCalendarHeading, {
+				"aria-hidden": true,
+				children: monthDateFormatter.format(state.visibleRange.start.add({ months: i }).toDate(timezoneName))
+			}),
+			i === visibleMonths - 1 && /* @__PURE__ */ jsx(NextButton, {
+				...nextButtonProps,
+				children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+			})
+		] }, `calendar-month-${i}`);
+	});
+	const monthGrids = range(0, visibleMonths).map((i) => {
+		return /* @__PURE__ */ jsx(CalendarGrid, {
+			state,
+			offset: { months: i },
+			skipFromTabOrder: i > 0
+		}, `calendar-grid-${i}`);
+	});
+	return /* @__PURE__ */ jsxs(RangeCalendarContainer, {
+		ref: calendarRef,
+		children: [!hidePresets && /* @__PURE__ */ jsx(PresetsContainer, {
+			padding: Spacing[3],
+			children: /* @__PURE__ */ jsx(RangeCalendarPresets_default, {
+				state,
+				commitRange,
+				setDateMode,
+				onPresetSelect,
+				selectedPreset
+			})
+		}), /* @__PURE__ */ jsx(Card_default.Body, {
+			padding: Spacing[3],
+			children: /* @__PURE__ */ jsxs(CalendarContainer, {
+				...calendarProps,
+				ref,
+				children: [/* @__PURE__ */ jsxs(RangeCalendarHeader, { children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+					isFocusable: false,
+					children: calendarProps["aria-label"]
+				}), monthHeaders] }), /* @__PURE__ */ jsx(CalendarGrids, { children: monthGrids })]
+			})
+		})]
+	});
+};
 //#endregion
 //#region src/components/DatePicker/DateRangePicker.tsx
 const DateRangeContainer = styled.div`
@@ -632,7 +754,7 @@ const CustomFormLabel = styled(FormLabel)`
   margin-bottom: ${Spacing[2]};
   ${Typography.TextMediumBold};
 `;
-const OpenButton$1 = ({ onOpen, disabled }) => {
+const OpenButton = ({ onOpen, disabled }) => {
 	const openCalBtnRef = useRef(null);
 	const { buttonProps } = useButton({
 		isDisabled: disabled,
@@ -851,7 +973,7 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 							"aria-label": "Clear date range",
 							children: /* @__PURE__ */ jsx(CircleXInverseIcon, {})
 						}),
-						/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton$1, {
+						/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton, {
 							onOpen: openCalendarWithFocus,
 							disabled: props.disabled
 						}) })
@@ -946,128 +1068,6 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 	});
 };
 //#endregion
-//#region src/components/DatePicker/Calendar/Calendar.tsx
-const Calendar = (props) => {
-	const { locale } = useLocale();
-	const state = useCalendarState({
-		...props,
-		locale,
-		createCalendar
-	});
-	const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);
-	return /* @__PURE__ */ jsxs(CalendarContainer, {
-		...calendarProps,
-		ref: props.calendarRef,
-		children: [/* @__PURE__ */ jsxs(CalendarHeader, { children: [
-			/* @__PURE__ */ jsx(CalendarButton, {
-				...prevButtonProps,
-				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-			}),
-			/* @__PURE__ */ jsx(CalendarHeading, { children: title }),
-			/* @__PURE__ */ jsx(CalendarButton, {
-				...nextButtonProps,
-				children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
-			})
-		] }), /* @__PURE__ */ jsx(CalendarGrid, { state })]
-	});
-};
-//#endregion
-//#region src/components/DatePicker/DatePicker.tsx
-const OpenButton = ({ calendarRef }) => {
-	const openCalBtnRef = useRef(null);
-	const { buttonProps } = useButton({ onPress: () => {
-		if (calendarRef.current) calendarRef.current.querySelector("button[aria-label=\"Previous\"]").focus();
-	} }, openCalBtnRef);
-	return /* @__PURE__ */ jsx("button", {
-		...buttonProps,
-		ref: openCalBtnRef,
-		"aria-label": "Open calendar"
-	});
-};
-const DatePicker = (props) => {
-	const state = useDatePickerState(props);
-	const ref = useRef(null);
-	const fieldRef = useRef(null);
-	const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);
-	const calendarRef = useRef(null);
-	const isClosingRef = useRef(false);
-	const { focusWithinProps } = useFocusWithin({
-		onFocusWithin: () => {
-			if (!state.isOpen && !isClosingRef.current) state.setOpen(true);
-		},
-		onBlurWithin: (e) => {
-			if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) state.setOpen(false);
-		}
-	});
-	const handleOutsideClick = (e) => {
-		const target = e.target;
-		if (ref.current?.contains(target)) return;
-		if (state.isOpen) state.setOpen(false);
-	};
-	const handleKeyDown = useCallback((event) => {
-		if (event.key === "Enter" && !state.isOpen) {
-			event.preventDefault();
-			state.setOpen(true);
-		}
-	}, [state]);
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			display: "flex",
-			flexDirection: "column"
-		},
-		children: /* @__PURE__ */ jsxs(Popover_default, {
-			open: state.isOpen,
-			modal: false,
-			contentProps: {
-				style: { zIndex: props.useModalZIndex ? Z_INDICES.modalDropdown : Z_INDICES.dropdown },
-				align: "start",
-				"aria-modal": true,
-				onInteractOutside: handleOutsideClick,
-				onEscapeKeyDown: () => {
-					state.setOpen(false);
-				},
-				onCloseAutoFocus: (e) => {
-					e.preventDefault();
-					isClosingRef.current = true;
-					if (fieldRef.current) {
-						const firstEditableSegment = fieldRef.current.querySelector("[tabindex=\"0\"]");
-						if (firstEditableSegment instanceof HTMLElement) firstEditableSegment.focus();
-					}
-					requestAnimationFrame(() => {
-						isClosingRef.current = false;
-					});
-				},
-				noPadding: true
-			},
-			children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsxs("div", {
-					...mergeProps(groupProps, focusWithinProps),
-					ref,
-					style: {
-						display: "flex",
-						position: "relative"
-					},
-					children: [/* @__PURE__ */ jsx(DateField, {
-						ref: fieldRef,
-						id: props.id,
-						dateFieldProps: props.dateFieldProps,
-						disabled: props.disabled,
-						size: props.size,
-						...mergeProps(fieldProps, { onKeyDown: handleKeyDown }),
-						value: fieldProps.value ?? void 0
-					}), /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton, { calendarRef }) })]
-				})
-			}), /* @__PURE__ */ jsx(Calendar, {
-				...calendarProps,
-				autoFocus: void 0,
-				calendarRef,
-				id: "calendar-popover"
-			})]
-		})
-	});
-};
-//#endregion
-export { RangeCalendar as a, DateField as i, Calendar as n, DateRangePicker as r, DatePicker as t };
+export { Calendar as a, DateField as i, RangeCalendar as n, DatePicker as r, DateRangePicker as t };
 
-//# sourceMappingURL=DatePicker-C9redLBr.mjs.map
+//# sourceMappingURL=DatePicker-BK7ioKBm.mjs.map