@persona/design-system 0.9.1 → 0.10.0

package/dist/{DatePicker-DQHVCGnP.mjs → DatePicker-D0cvVbzq.mjs}

@@ -1,16 +1,16 @@
 import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
-import { isDisabled, isFocused, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.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 Card_default } from "./Card-BXNxWX5C.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 { t as IconButton } from "./IconButton-D4awF770.mjs";
-import { t as ClearButton } from "./Input-DD4jzJhK.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-DlN0A5Nb.mjs";
-import { s as Popover_default } from "./Popover-DewrGOJB.mjs";
-import { a as FormLabel } from "./FormControl-CD_FdAXA.mjs";
+import { focusWithinOutline } from "./mixins/focus.mjs";
+import inputMixin from "./mixins/input.mjs";
+import { t as IconButton } from "./IconButton-HWx5Hlmi.mjs";
+import { t as ClearButton } from "./Input-Dap055xf.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-Dw6Rcpk6.mjs";
+import { s as Popover_default } from "./Popover-BcII7usF.mjs";
+import { a as FormLabel } from "./FormControl-C4CiA0H-.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";
@@ -172,283 +172,6 @@ const CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }) => {
 	});
 };
 //#endregion
-//#region components/DatePicker/common.ts
-const createCalendar = () => new GregorianCalendar();
-//#endregion
-//#region 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 components/DatePicker/DateField.tsx
-const DateSegmentContainer = styled.div`
-  font-variant-numeric: tabular-nums;
-  box-sizing: content-box;
-  text-align: end;
-
-  ${isFocused} {
-    outline: 2px solid ${({ theme }) => semanticColor(theme, "BorderFocus", Color.BorderFocus)};
-    outline-offset: 1px;
-    background-color: ${({ theme }) => {
-	const tokens = semanticTokens(theme);
-	return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple200;
-}};
-    ${semanticOnly((tokens) => `color: ${tokens.FgAccent};`)}
-  }
-
-  ${({ $isComma, $isTimezone }) => ($isComma || $isTimezone) && css`
-      margin-left: 0.25ch;
-      margin-right: 0.25ch;
-    `}
-
-  ${({ $isTimezone }) => $isTimezone && css`
-      color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.TextSecondary)};
-      pointer-events: none;
-
-      &:focus {
-        outline: none;
-        background-color: transparent;
-      }
-    `}
-`;
-const DateSegmentPlaceholder = styled.span`
-  display: block;
-  width: 100%;
-  pointer-events: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  ${({ isPlaceholder }) => isPlaceholder ? css`
-          height: 100%;
-          color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.tertiary)};
-        ` : css`
-          visibility: hidden;
-          height: 0;
-        `}
-  ${({ type }) => type === "literal" && css`
-      padding-left: ${Spacing[1]};
-      padding-right: ${Spacing[1]};
-    `}
-  ${({ type, isPlaceholder }) => type === "month" && isPlaceholder && css`
-      width: 3ch;
-    `}
-`;
-function DateSegment({ segment, state }) {
-	const ref = useRef();
-	const { segmentProps } = useDateSegment(segment, state, ref);
-	let minWidth;
-	switch (segment.type) {
-		case "dayPeriod":
-			minWidth = "2.75ch";
-			break;
-		default:
-			minWidth = `${segment.maxValue != null && String(segment.maxValue).length + .25}ch`;
-			break;
-	}
-	const isComma = segment.type === "literal" && segment.text === ", ";
-	const isTimezone = segment.type === "timeZoneName";
-	return /* @__PURE__ */ jsxs(DateSegmentContainer, {
-		...segmentProps,
-		ref,
-		style: {
-			...segmentProps.style,
-			minWidth
-		},
-		$isComma: isComma,
-		$isTimezone: isTimezone,
-		...isTimezone && {
-			tabIndex: -1,
-			role: "presentation"
-		},
-		children: [segment.placeholder && /* @__PURE__ */ jsx(DateSegmentPlaceholder, {
-			"aria-hidden": "true",
-			isPlaceholder: segment.isPlaceholder,
-			type: segment.type,
-			children: segment.placeholder
-		}), segment.isPlaceholder ? "" : segment.text]
-	});
-}
-const InputBox = styled.div`
-  ${inputMixin};
-  display: flex;
-  padding-left: ${Spacing[2]};
-  padding-right: ${Spacing[2]};
-  line-height: 1;
-  position: relative;
-  white-space: nowrap;
-
-  ${({ $hasTimeZone }) => $hasTimeZone && css`
-      width: auto;
-      flex: 1 0 auto;
-    `}
-
-  &${isFocusedVisible}${isNotDisabled} {
-    position: relative;
-    z-index: 1;
-  }
-
-  ${focusWithinOutline}
-
-  ${({ $inputPosition }) => {
-	switch ($inputPosition) {
-		case "start": return css`
-          border-top-right-radius: 0px;
-          border-bottom-right-radius: 0px;
-        `;
-		case "end": return css`
-          margin-left: -1px;
-          border-top-left-radius: 0px;
-          border-bottom-left-radius: 0px;
-        `;
-	}
-}}
-`;
-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 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 components/DatePicker/Calendar/RangeCalendarPresets.tsx
 /** The preset windows the picker offers; the codec resolves the same ids on read. */
 const getDefaultPresets = (tz) => {
@@ -579,6 +302,9 @@ const arePropsEqual = (prevProps, nextProps) => {
 };
 var RangeCalendarPresets_default = memo(DateRangePickerPresets, arePropsEqual);
 //#endregion
+//#region components/DatePicker/common.ts
+const createCalendar = () => new GregorianCalendar();
+//#endregion
 //#region components/DatePicker/time-range.ts
 const earliest = (a, b) => a.compare(b) <= 0 ? a : b;
 const presetEnd = (end) => earliest(end.set({
@@ -626,96 +352,248 @@ const RangeCalendarContainer = styled.div`
 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({
+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 { 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 components/DatePicker/DateField.tsx
+const DateSegmentContainer = styled.div`
+  font-variant-numeric: tabular-nums;
+  box-sizing: content-box;
+  text-align: end;
+
+  ${isFocused} {
+    outline: 2px solid ${({ theme }) => semanticColor(theme, "BorderFocus", Color.BorderFocus)};
+    outline-offset: 1px;
+    background-color: ${({ theme }) => {
+	const tokens = semanticTokens(theme);
+	return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple200;
+}};
+    ${semanticOnly((tokens) => `color: ${tokens.FgAccent};`)}
+  }
+
+  ${({ $isComma, $isTimezone }) => ($isComma || $isTimezone) && css`
+      margin-left: 0.25ch;
+      margin-right: 0.25ch;
+    `}
+
+  ${({ $isTimezone }) => $isTimezone && css`
+      color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.TextSecondary)};
+      pointer-events: none;
+
+      &:focus {
+        outline: none;
+        background-color: transparent;
+      }
+    `}
+`;
+const DateSegmentPlaceholder = styled.span`
+  display: block;
+  width: 100%;
+  pointer-events: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  ${({ isPlaceholder }) => isPlaceholder ? css`
+          height: 100%;
+          color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.tertiary)};
+        ` : css`
+          visibility: hidden;
+          height: 0;
+        `}
+  ${({ type }) => type === "literal" && css`
+      padding-left: ${Spacing[1]};
+      padding-right: ${Spacing[1]};
+    `}
+  ${({ type, isPlaceholder }) => type === "month" && isPlaceholder && css`
+      width: 3ch;
+    `}
+`;
+function DateSegment({ segment, state }) {
+	const ref = useRef();
+	const { segmentProps } = useDateSegment(segment, state, ref);
+	let minWidth;
+	switch (segment.type) {
+		case "dayPeriod":
+			minWidth = "2.75ch";
+			break;
+		default:
+			minWidth = `${segment.maxValue != null && String(segment.maxValue).length + .25}ch`;
+			break;
+	}
+	const isComma = segment.type === "literal" && segment.text === ", ";
+	const isTimezone = segment.type === "timeZoneName";
+	return /* @__PURE__ */ jsxs(DateSegmentContainer, {
+		...segmentProps,
+		ref,
+		style: {
+			...segmentProps.style,
+			minWidth
+		},
+		$isComma: isComma,
+		$isTimezone: isTimezone,
+		...isTimezone && {
+			tabIndex: -1,
+			role: "presentation"
+		},
+		children: [segment.placeholder && /* @__PURE__ */ jsx(DateSegmentPlaceholder, {
+			"aria-hidden": "true",
+			isPlaceholder: segment.isPlaceholder,
+			type: segment.type,
+			children: segment.placeholder
+		}), segment.isPlaceholder ? "" : segment.text]
+	});
+}
+const InputBox = styled.div`
+  ${inputMixin};
+  display: flex;
+  padding-left: ${Spacing[2]};
+  padding-right: ${Spacing[2]};
+  line-height: 1;
+  position: relative;
+  white-space: nowrap;
+
+  ${({ $hasTimeZone }) => $hasTimeZone && css`
+      width: auto;
+      flex: 1 0 auto;
+    `}
+
+  &${isFocusedVisible}${isNotDisabled} {
+    position: relative;
+    z-index: 1;
+  }
+
+  ${focusWithinOutline}
+
+  ${({ $inputPosition }) => {
+	switch ($inputPosition) {
+		case "start": return css`
+          border-top-right-radius: 0px;
+          border-bottom-right-radius: 0px;
+        `;
+		case "end": return css`
+          margin-left: -1px;
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+        `;
+	}
+}}
+`;
+const DateField = forwardRef(function DateField(props, forwardedRef) {
+	const { locale } = useLocale$1();
+	const state = useDateFieldState({
 		...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, {
-				...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 })]
-			})
-		})]
+	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 components/DatePicker/DateRangePicker.tsx
 const DateRangeContainer = styled.div`
@@ -754,7 +632,7 @@ const CustomFormLabel = styled(FormLabel)`
   margin-bottom: ${Spacing[2]};
   ${Typography.TextMediumBold};
 `;
-const OpenButton = ({ onOpen, disabled }) => {
+const OpenButton$1 = ({ onOpen, disabled }) => {
 	const openCalBtnRef = useRef(null);
 	const { buttonProps } = useButton({
 		isDisabled: disabled,
@@ -973,7 +851,7 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 							"aria-label": "Clear date range",
 							children: /* @__PURE__ */ jsx(CircleXInverseIcon, {})
 						}),
-						/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton, {
+						/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton$1, {
 							onOpen: openCalendarWithFocus,
 							disabled: props.disabled
 						}) })
@@ -1068,6 +946,128 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 	});
 };
 //#endregion
-export { Calendar as a, DateField as i, RangeCalendar as n, DatePicker as r, DateRangePicker as t };
+//#region 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 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 };
 
-//# sourceMappingURL=DatePicker-DQHVCGnP.mjs.map
+//# sourceMappingURL=DatePicker-D0cvVbzq.mjs.map