@persona/design-system 0.1.7 → 0.1.8

package/dist/DatePicker-BlCgFb7g.cjs

@@ -0,0 +1,948 @@
+const require_chunk = require("./chunk-CKQMccvm.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_focus = require("./mixins/focus.cjs");
+const require_mixins_input = require("./mixins/input.cjs");
+const require_Card = require("./Card-Csz-PxX0.cjs");
+const require_lib_zindex = require("./lib/zindex.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_Menu = require("./Menu-t2q8NrV0.cjs");
+const require_Input = require("./Input-OJPQ07TW.cjs");
+const require_Popover = require("./Popover-BzgMAhsX.cjs");
+const require_FormControl = require("./FormControl-MkBXuUF6.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+let styled_components$1 = require_chunk.__toESM(styled_components, 1);
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _persona_icons = require("@persona/icons");
+let lodash_fp_js = require("lodash/fp.js");
+let react_aria = require("react-aria");
+let react_stately = require("react-stately");
+let luxon = require("luxon");
+let _react_aria_utils = require("@react-aria/utils");
+let _internationalized_date = require("@internationalized/date");
+let _react_aria_datepicker = require("@react-aria/datepicker");
+let _react_aria_i18n = require("@react-aria/i18n");
+let _react_stately_datepicker = require("@react-stately/datepicker");
+//#region components/DatePicker/Calendar/CalendarBase.tsx
+const CalendarContainer = styled_components$1.default.div`
+  display: inline-block;
+`;
+const CalendarHeader = styled_components$1.default.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${_persona_design_tokens.Spacing[2]};
+`;
+const CalendarHeading = styled_components$1.default.div`
+  ${_persona_design_tokens.Typography.TextLargeBold};
+  flex: 1;
+  text-align: center;
+`;
+const StyledCalendarButton = (0, styled_components$1.default)(require_IconButton.IconButton)`
+  width: 32px;
+  height: 32px;
+`;
+const CalendarButton = (props) => {
+	const ref = (0, react.useRef)();
+	const { buttonProps } = (0, react_aria.useButton)(props, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCalendarButton, {
+		...buttonProps,
+		className: props.className,
+		ref,
+		children: props.children
+	});
+};
+//#endregion
+//#region components/DatePicker/Calendar/CalendarCell.tsx
+const CalendarCellContainer = styled_components.default.td`
+  text-align: center;
+  width: 38px;
+  height: 38px;
+  padding: 0px;
+`;
+const CalendarCellButton = styled_components.default.button`
+  ${_persona_design_tokens.Typography.TextMedium};
+  border-style: none;
+  padding: 0;
+  background: none;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  position: relative;
+
+  ${({ isSelected }) => isSelected && styled_components.css`
+      background: ${_persona_design_tokens.Color.CorePurple100};
+    `}
+
+  ${({ isSelectionStart }) => isSelectionStart && styled_components.css`
+      background: ${_persona_design_tokens.Color.BackgroundButtonPrimary};
+      color: ${_persona_design_tokens.Color.TextInverse};
+      border-top-left-radius: ${_persona_design_tokens.BorderRadius.Sm};
+      border-bottom-left-radius: ${_persona_design_tokens.BorderRadius.Sm};
+    `}
+
+  ${({ isSelectionEnd }) => isSelectionEnd && styled_components.css`
+      background: ${_persona_design_tokens.Color.BackgroundButtonPrimary};
+      color: ${_persona_design_tokens.Color.TextInverse};
+      border-top-right-radius: ${_persona_design_tokens.BorderRadius.Sm};
+      border-bottom-right-radius: ${_persona_design_tokens.BorderRadius.Sm};
+    `}
+
+  ${({ isDisabled }) => isDisabled && styled_components.css`
+      color: ${_persona_design_tokens.Color.CoreSlate300};
+    `}
+
+  ${({ isInvalid }) => isInvalid && styled_components.css`
+      background: ${_persona_design_tokens.Color.BackgroundButtonDanger};
+      color: ${_persona_design_tokens.Color.TextInverse};
+    `}
+
+  &:focus-visible {
+    outline: 2px solid ${_persona_design_tokens.Color.BorderFocus};
+    outline-offset: -2px;
+    box-shadow: ${_persona_design_tokens.Color.PrimaryWhite} 0px 0px 0px 3px inset;
+    z-index: 1;
+  }
+`;
+const CalendarCell = ({ state, date, currentMonth }) => {
+	const ref = (0, react.useRef)();
+	const { cellProps, buttonProps, isSelected, isInvalid, isDisabled, formattedDate } = (0, react_aria.useCalendarCell)({ date }, state, ref);
+	const highlightedRange = "highlightedRange" in state && state.highlightedRange;
+	const isOutsideMonth = !(0, _internationalized_date.isSameMonth)(currentMonth, date);
+	const isSelectionStart = highlightedRange ? (0, _internationalized_date.isSameDay)(date, highlightedRange.start) : isSelected;
+	const isSelectionEnd = highlightedRange ? (0, _internationalized_date.isSameDay)(date, highlightedRange.end) : isSelected;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarCellContainer, {
+		...cellProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarCellButton, {
+			...buttonProps,
+			hidden: isOutsideMonth,
+			isSelected,
+			isSelectionStart,
+			isSelectionEnd,
+			isInvalid,
+			isDisabled,
+			ref,
+			children: formattedDate
+		})
+	});
+};
+//#endregion
+//#region components/DatePicker/Calendar/CalendarGrid.tsx
+const CalendarGridContainer = styled_components$1.default.table`
+  width: 266px;
+  border-spacing: 0px;
+  border-collapse: collapse;
+
+  &:focus-visible {
+    outline: 2px solid ${_persona_design_tokens.Color.BorderFocus};
+    outline-offset: 1px;
+  }
+`;
+const CalendarGridDayHeader = styled_components$1.default.th`
+  ${_persona_design_tokens.Typography.TextMedium};
+  color: ${_persona_design_tokens.Color.TextSecondary};
+`;
+const CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }) => {
+	const { locale } = (0, react_aria.useLocale)();
+	const startDate = state.visibleRange.start.add(offset);
+	const { gridProps, headerProps, weekDays } = (0, react_aria.useCalendarGrid)({
+		startDate,
+		endDate: (0, _internationalized_date.endOfMonth)(startDate)
+	}, state);
+	const weeksInMonth = (0, _internationalized_date.getWeeksInMonth)(startDate, locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarGridContainer, {
+		...skipFromTabOrder ? {
+			...gridProps,
+			tabIndex: -1
+		} : gridProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+			...headerProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGridDayHeader, { children: day }, index)) })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarCell, {
+			state,
+			date,
+			currentMonth: startDate
+		}, i) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {}, i)) }, weekIndex)) })]
+	});
+};
+//#endregion
+//#region components/DatePicker/common.ts
+const createCalendar = () => new _internationalized_date.GregorianCalendar();
+//#endregion
+//#region components/DatePicker/Calendar/Calendar.tsx
+const Calendar = (props) => {
+	const { locale } = (0, react_aria.useLocale)();
+	const state = (0, react_stately.useCalendarState)({
+		...props,
+		locale,
+		createCalendar
+	});
+	const { calendarProps, prevButtonProps, nextButtonProps, title } = (0, react_aria.useCalendar)(props, state);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarContainer, {
+		...calendarProps,
+		ref: props.calendarRef,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarHeader, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarButton, {
+				...prevButtonProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ArrowLeftIcon, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarHeading, { children: title }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarButton, {
+				...nextButtonProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ArrowRightIcon, {})
+			})
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrid, { state })]
+	});
+};
+//#endregion
+//#region components/DatePicker/DateField.tsx
+const DateSegmentContainer = styled_components.default.div`
+  font-variant-numeric: tabular-nums;
+  box-sizing: content-box;
+  text-align: end;
+
+  ${require_lib_pseudoClass.isFocused} {
+    outline: 2px solid ${_persona_design_tokens.Color.BorderFocus};
+    outline-offset: 1px;
+    background-color: ${_persona_design_tokens.Color.CorePurple200};
+  }
+
+  ${({ $isComma, $isTimezone }) => ($isComma || $isTimezone) && styled_components.css`
+      margin-left: 0.25ch;
+      margin-right: 0.25ch;
+    `}
+
+  ${({ $isTimezone }) => $isTimezone && styled_components.css`
+      color: ${_persona_design_tokens.Color.TextSecondary};
+      pointer-events: none;
+
+      &:focus {
+        outline: none;
+        background-color: transparent;
+      }
+    `}
+`;
+const DateSegmentPlaceholder = styled_components.default.span`
+  display: block;
+  width: 100%;
+  pointer-events: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  ${({ isPlaceholder }) => isPlaceholder ? styled_components.css`
+          height: 100%;
+          color: ${({ theme }) => theme.color.text.tertiary};
+        ` : styled_components.css`
+          visibility: hidden;
+          height: 0;
+        `}
+  ${({ type }) => type === "literal" && styled_components.css`
+      padding-left: ${_persona_design_tokens.Spacing[1]};
+      padding-right: ${_persona_design_tokens.Spacing[1]};
+    `}
+  ${({ type, isPlaceholder }) => type === "month" && isPlaceholder && styled_components.css`
+      width: 3ch;
+    `}
+`;
+function DateSegment({ segment, state }) {
+	const ref = (0, react.useRef)();
+	const { segmentProps } = (0, _react_aria_datepicker.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__ */ (0, react_jsx_runtime.jsxs)(DateSegmentContainer, {
+		...segmentProps,
+		ref,
+		style: {
+			...segmentProps.style,
+			minWidth
+		},
+		$isComma: isComma,
+		$isTimezone: isTimezone,
+		...isTimezone && {
+			tabIndex: -1,
+			role: "presentation"
+		},
+		children: [segment.placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateSegmentPlaceholder, {
+			"aria-hidden": "true",
+			isPlaceholder: segment.isPlaceholder,
+			type: segment.type,
+			children: segment.placeholder
+		}), segment.isPlaceholder ? "" : segment.text]
+	});
+}
+const InputBox = styled_components.default.div`
+  ${require_mixins_input};
+  display: flex;
+  padding-left: ${_persona_design_tokens.Spacing[2]};
+  padding-right: ${_persona_design_tokens.Spacing[2]};
+  line-height: 1;
+  position: relative;
+
+  &${require_lib_pseudoClass.isFocusedVisible}${require_lib_pseudoClass.isNotDisabled} {
+    position: relative;
+    z-index: 1;
+  }
+
+  ${require_mixins_focus.focusWithinOutline}
+
+  ${({ $inputPosition }) => {
+	switch ($inputPosition) {
+		case "start": return styled_components.css`
+          border-top-right-radius: 0px;
+          border-bottom-right-radius: 0px;
+        `;
+		case "end": return styled_components.css`
+          margin-left: -1px;
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+        `;
+	}
+}}
+`;
+const DateField = (0, react.forwardRef)(function DateField(props, forwardedRef) {
+	const { locale } = (0, _react_aria_i18n.useLocale)();
+	const state = (0, _react_stately_datepicker.useDateFieldState)({
+		...props,
+		locale,
+		createCalendar
+	});
+	const ref = (0, react.useRef)();
+	const { fieldProps } = (0, _react_aria_datepicker.useDateField)(props, state, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputBox, {
+		...fieldProps,
+		...props.dateFieldProps || {},
+		ref: (0, _react_aria_utils.mergeRefs)(ref, forwardedRef),
+		focused: props.focused,
+		disabled: props.disabled,
+		"aria-label": props["aria-label"],
+		$size: props.size ?? "md",
+		$inputPosition: props.inputPosition,
+		hasError: props.hasError,
+		children: state.segments.map((segment, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateSegment, {
+			segment,
+			state
+		}, i))
+	});
+});
+//#endregion
+//#region components/DatePicker/DatePicker.tsx
+const OpenButton$1 = ({ calendarRef }) => {
+	const openCalBtnRef = (0, react.useRef)(null);
+	const { buttonProps } = (0, react_aria.useButton)({ onPress: () => {
+		if (calendarRef.current) calendarRef.current.querySelector("button[aria-label=\"Previous\"]").focus();
+	} }, openCalBtnRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...buttonProps,
+		ref: openCalBtnRef,
+		"aria-label": "Open calendar"
+	});
+};
+const DatePicker = (props) => {
+	const state = (0, react_stately.useDatePickerState)(props);
+	const ref = (0, react.useRef)(null);
+	const fieldRef = (0, react.useRef)(null);
+	const { groupProps, fieldProps, calendarProps } = (0, react_aria.useDatePicker)(props, state, ref);
+	const calendarRef = (0, react.useRef)(null);
+	const [isClosing, setIsClosing] = (0, react.useState)(false);
+	const { focusWithinProps } = (0, react_aria.useFocusWithin)({
+		onFocusWithin: () => {
+			if (!state.isOpen && !isClosing) 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 = (0, react.useCallback)((event) => {
+		if (event.key === "Enter" && !state.isOpen) {
+			event.preventDefault();
+			state.setOpen(true);
+		}
+	}, [state]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default, {
+			open: state.isOpen,
+			modal: false,
+			contentProps: {
+				style: { zIndex: props.useModalZIndex ? require_lib_zindex.Z_INDICES.modalDropdown : require_lib_zindex.Z_INDICES.dropdown },
+				align: "start",
+				"aria-modal": true,
+				onInteractOutside: handleOutsideClick,
+				onEscapeKeyDown: () => {
+					state.setOpen(false);
+				},
+				onCloseAutoFocus: (e) => {
+					e.preventDefault();
+					setIsClosing(true);
+					if (fieldRef.current) {
+						const firstEditableSegment = fieldRef.current.querySelector("[tabindex=\"0\"]");
+						if (firstEditableSegment instanceof HTMLElement) firstEditableSegment.focus();
+					}
+					requestAnimationFrame(() => setIsClosing(false));
+				},
+				noPadding: true
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...(0, react_aria.mergeProps)(groupProps, focusWithinProps),
+					ref,
+					style: {
+						display: "flex",
+						position: "relative"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateField, {
+						ref: fieldRef,
+						id: props.id,
+						dateFieldProps: props.dateFieldProps,
+						disabled: props.disabled,
+						size: props.size,
+						...(0, react_aria.mergeProps)(fieldProps, { onKeyDown: handleKeyDown }),
+						value: fieldProps.value ?? void 0
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenButton$1, { calendarRef }) })]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Calendar, {
+				...calendarProps,
+				autoFocus: void 0,
+				calendarRef,
+				id: "calendar-popover"
+			})]
+		})
+	});
+};
+//#endregion
+//#region components/DatePicker/Calendar/RangeCalendarPresets.tsx
+const getDefaultPresets = (tz) => {
+	const now = (0, _internationalized_date.today)(tz);
+	return [
+		{
+			label: "Last 7 days",
+			range: {
+				start: now.subtract({ days: 7 }),
+				end: now
+			}
+		},
+		{
+			label: "Last 14 days",
+			range: {
+				start: now.subtract({ days: 14 }),
+				end: now
+			}
+		},
+		{
+			label: "Last 30 days",
+			range: {
+				start: now.subtract({ days: 30 }),
+				end: now
+			}
+		},
+		{
+			label: "This month",
+			range: {
+				start: (0, _internationalized_date.startOfMonth)(now),
+				end: now
+			}
+		},
+		{
+			label: "Last month",
+			range: {
+				start: (0, _internationalized_date.startOfMonth)(now.subtract({ months: 1 })),
+				end: (0, _internationalized_date.endOfMonth)(now.subtract({ months: 1 }))
+			}
+		},
+		{
+			label: "This year",
+			range: {
+				start: (0, _internationalized_date.startOfYear)(now),
+				end: now
+			}
+		},
+		{
+			label: "Last year",
+			range: {
+				start: (0, _internationalized_date.startOfYear)(now.subtract({ years: 1 })),
+				end: (0, _internationalized_date.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_components$1.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledPresetButton = (0, styled_components$1.default)(require_Menu.MenuItem)`
+  ${({ selected }) => !selected && styled_components$1.css`
+      &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isHovered}, &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isFocused} {
+        background-color: transparent;
+      }
+    `}
+
+  &:focus-visible {
+    // MenuItems default to outline: none, so we need to override it here.
+    outline: 2px solid ${_persona_design_tokens.Color.BorderFocus} !important;
+    outline-offset: 1px;
+  }
+`;
+const PresetButton = ({ state, preset, isSelected, setDateMode, ...props }) => {
+	const ref = (0, react.useRef)();
+	const { buttonProps } = (0, react_aria.useButton)({ onPress: () => {
+		state.setValue(preset.range);
+		setDateMode(null);
+	} }, ref);
+	const { "aria-current": _ariaCurrent, ...mergedProps } = (0, react_aria.mergeProps)(props, buttonProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPresetButton, {
+		selected: isSelected,
+		...mergedProps,
+		ref,
+		children: preset.label
+	});
+};
+const DateRangePickerPresets = ({ presetsFn = getDefaultPresets, state, setDateMode, ...props }) => {
+	const presets = presetsFn(luxon.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;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuList, {
+			"aria-label": "Date range presets",
+			children: presets.map((preset, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetButton, {
+				preset,
+				state,
+				setDateMode,
+				isSelected: i === selectedPresetIndex
+			}, i))
+		})
+	});
+};
+const arePropsEqual = (prevProps, nextProps) => {
+	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 = (0, react.memo)(DateRangePickerPresets, arePropsEqual);
+//#endregion
+//#region components/DatePicker/Calendar/RangeCalendar.tsx
+const RangeCalendarHeader = (0, styled_components$1.default)(CalendarHeader)`
+  gap: ${_persona_design_tokens.Spacing[5]};
+`;
+const CalendarHeaderMonth = styled_components$1.default.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_components$1.default.div`
+  display: flex;
+  gap: ${_persona_design_tokens.Spacing[5]};
+  align-items: start;
+`;
+const PrevButton = (0, styled_components$1.default)(CalendarButton)`
+  grid-area: prev;
+  justify-self: start;
+  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
+`;
+const NextButton = (0, styled_components$1.default)(CalendarButton)`
+  grid-area: next;
+  justify-self: end;
+  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
+`;
+const RangeCalendarHeading = (0, styled_components$1.default)(CalendarHeading)`
+  grid-area: title;
+`;
+const RangeCalendarContainer = styled_components$1.default.div`
+  display: flex;
+`;
+const PresetsContainer = (0, styled_components$1.default)(require_Card.Card_default.Body)`
+  border-right: 1px solid ${_persona_design_tokens.Color.BorderHairline};
+`;
+const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, setDateMode, setValue, granularity, ...props }) => {
+	const visibleMonths = 2;
+	const { locale } = (0, react_aria.useLocale)();
+	const timezoneName = luxon.Settings.defaultZone.name;
+	const rangeCalendarState = (0, react_stately.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: (0, _internationalized_date.toCalendarDateTime)(value.start),
+				end: (0, _internationalized_date.toCalendarDateTime)(value.end)
+			});
+		},
+		selectDate: (date) => {
+			if (onSelectDate) {
+				onSelectDate(date);
+				rangeCalendarState.setAnchorDate(null);
+			} else rangeCalendarState.selectDate(date);
+		}
+	};
+	const ref = (0, react.useRef)();
+	const { calendarProps, prevButtonProps, nextButtonProps } = (0, react_aria.useRangeCalendar)(props, state, ref);
+	const monthDateFormatter = (0, react_aria.useDateFormatter)({
+		month: "long",
+		year: "numeric",
+		timeZone: timezoneName
+	});
+	const monthHeaders = (0, lodash_fp_js.range)(0, visibleMonths).map((i) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarHeaderMonth, { children: [
+			i === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrevButton, {
+				...prevButtonProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ArrowLeftIcon, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeCalendarHeading, {
+				"aria-hidden": true,
+				children: monthDateFormatter.format(state.visibleRange.start.add({ months: i }).toDate(timezoneName))
+			}),
+			i === visibleMonths - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NextButton, {
+				...nextButtonProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ArrowRightIcon, {})
+			})
+		] }, `calendar-month-${i}`);
+	});
+	const monthGrids = (0, lodash_fp_js.range)(0, visibleMonths).map((i) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrid, {
+			state,
+			offset: { months: i },
+			skipFromTabOrder: i > 0
+		}, `calendar-grid-${i}`);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RangeCalendarContainer, {
+		ref: calendarRef,
+		children: [!hidePresets && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetsContainer, {
+			padding: _persona_design_tokens.Spacing[3],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeCalendarPresets_default, {
+				state,
+				setDateMode
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.Card_default.Body, {
+			padding: _persona_design_tokens.Spacing[3],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarContainer, {
+				...calendarProps,
+				ref,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RangeCalendarHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria.VisuallyHidden, {
+					isFocusable: false,
+					children: calendarProps["aria-label"]
+				}), monthHeaders] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrids, { children: monthGrids })]
+			})
+		})]
+	});
+};
+//#endregion
+//#region components/DatePicker/DateRangePicker.tsx
+const DateRangeContainer = styled_components.default.div`
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const DateRangeInputs = styled_components.default.div`
+  display: flex;
+  align-items: center;
+`;
+const CustomFormLabel = (0, styled_components.default)(require_FormControl.FormLabel)`
+  margin-bottom: ${_persona_design_tokens.Spacing[2]};
+  ${_persona_design_tokens.Typography.TextMediumBold};
+`;
+const OpenButton = ({ onOpen, disabled }) => {
+	const openCalBtnRef = (0, react.useRef)(null);
+	const { buttonProps } = (0, react_aria.useButton)({
+		isDisabled: disabled,
+		onPress: onOpen
+	}, openCalBtnRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...buttonProps,
+		type: "button",
+		ref: openCalBtnRef,
+		"aria-label": "Open calendar",
+		tabIndex: -1
+	});
+};
+const ClearRangeButton = (0, styled_components.default)(require_Input.ClearButton)`
+  height: 16px;
+  width: 16px;
+  margin-left: ${_persona_design_tokens.Spacing[2]};
+
+  &${require_lib_pseudoClass.isDisabled}, &:disabled {
+    background-color: transparent;
+  }
+`;
+const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className, calendarZIndex, portalContainer, ...props }) => {
+	const state = (0, react_stately.useDateRangePickerState)({
+		granularity,
+		hideTimeZone,
+		...props
+	});
+	const ref = (0, react.useRef)(null);
+	const startFieldRef = (0, react.useRef)(null);
+	const endFieldRef = (0, react.useRef)(null);
+	const calendarRef = (0, react.useRef)(null);
+	const [dateMode, setDateMode] = (0, react.useState)(null);
+	const [isClosing, setIsClosing] = (0, react.useState)(false);
+	const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } = (0, react_aria.useDateRangePicker)({
+		granularity,
+		hideTimeZone,
+		...props
+	}, state, ref);
+	const focusCalendar = (0, react.useCallback)(() => {
+		requestAnimationFrame(() => {
+			(calendarRef.current?.querySelector("[role=\"menuitem\"], button:not(:disabled), [tabindex=\"0\"]"))?.focus();
+		});
+	}, []);
+	const openCalendar = (0, react.useCallback)(() => {
+		if (!props.disabled && !state.isOpen && !isClosing) state.setOpen(true);
+	}, [
+		isClosing,
+		props.disabled,
+		state
+	]);
+	const openCalendarWithFocus = (0, react.useCallback)(() => {
+		openCalendar();
+		focusCalendar();
+	}, [focusCalendar, openCalendar]);
+	(0, react.useEffect)(() => {
+		if (!props.dateRange.startDate || !props.dateRange.endDate) return;
+		if (!props.dateRange.startDate.isValid || !props.dateRange.endDate.isValid) return;
+		const startDate = props.dateRange.startDate.setZone(luxon.Settings.defaultZone);
+		const endDate = props.dateRange.endDate.setZone(luxon.Settings.defaultZone);
+		if (!startDate.isValid || !endDate.isValid) return;
+		const dateRangeV2 = {
+			start: state.hasTime ? (0, _internationalized_date.parseAbsolute)(startDate.toISO(), luxon.Settings.defaultZone.name) : new _internationalized_date.CalendarDate(startDate.year, startDate.month, startDate.day),
+			end: state.hasTime ? (0, _internationalized_date.parseAbsolute)(endDate.toISO(), luxon.Settings.defaultZone.name) : new _internationalized_date.CalendarDate(endDate.year, endDate.month, endDate.day)
+		};
+		state.setValue(dateRangeV2);
+	}, [
+		props.dateRange.startDate,
+		props.dateRange.endDate,
+		granularity
+	]);
+	const prevValueRef = (0, react.useRef)(state.value);
+	(0, react.useEffect)(() => {
+		const prevValue = prevValueRef.current;
+		const currentValue = state.value;
+		prevValueRef.current = currentValue;
+		const startChanged = prevValue?.start && currentValue?.start ? prevValue.start.compare(currentValue.start) !== 0 : prevValue?.start !== currentValue?.start;
+		const endChanged = prevValue?.end && currentValue?.end ? prevValue.end.compare(currentValue.end) !== 0 : prevValue?.end !== currentValue?.end;
+		const datesAreDifferent = currentValue?.start && currentValue?.end && currentValue.start.compare(currentValue.end) !== 0;
+		if (state.isOpen && startChanged && endChanged && datesAreDifferent) state.setOpen(false);
+	}, [state.value, state.isOpen]);
+	const { focusWithinProps: startFocusWithinProps } = (0, react_aria.useFocusWithin)({ onFocusWithin: () => {
+		setDateMode("start");
+		openCalendar();
+	} });
+	const { focusWithinProps: endFocusWithinProps } = (0, react_aria.useFocusWithin)({ onFocusWithin: () => {
+		setDateMode("end");
+		openCalendar();
+	} });
+	const { focusWithinProps: containerFocusProps } = (0, react_aria.useFocusWithin)({ onBlurWithin: () => {
+		requestAnimationFrame(() => {
+			const activeElement = document.activeElement;
+			const isFocusInDateRangeInput = activeElement instanceof Node && ref.current?.contains(activeElement);
+			const isFocusInCalendar = activeElement instanceof Node && calendarRef.current?.contains(activeElement);
+			if (isFocusInDateRangeInput || isFocusInCalendar) return;
+			setDateMode(null);
+			if (state.isOpen) state.setOpen(false);
+		});
+	} });
+	const handleOutsideClick = (e) => {
+		const target = e.target;
+		if (ref.current?.contains(target)) return;
+		if (state.isOpen) {
+			setDateMode(null);
+			state.setOpen(false);
+		}
+	};
+	const { pressProps: pressClearProps } = (0, react_aria.usePress)({ onPress: () => {
+		state.setValue(null);
+		if (props.onClear) props.onClear();
+	} });
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			openCalendarWithFocus();
+		}
+	}, [openCalendarWithFocus]);
+	const isValueNull = state.value && state.value.start == null && state.value.end == null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DateRangeContainer, {
+		"data-test": props.dataTest,
+		className,
+		children: [props.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomFormLabel, {
+			...labelProps,
+			children: props.label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default, {
+			open: state.isOpen,
+			modal: false,
+			portalProps: portalContainer ? { container: portalContainer } : void 0,
+			contentProps: {
+				align: "start",
+				"aria-modal": true,
+				"aria-label": props["aria-label"] ?? void 0,
+				onInteractOutside: handleOutsideClick,
+				onOpenAutoFocus: (e) => {
+					e.preventDefault();
+				},
+				onEscapeKeyDown: () => {
+					state.setOpen(false);
+					if (dateMode) {
+						const seg = (dateMode === "start" ? startFieldRef : endFieldRef).current?.querySelector("[tabindex=\"0\"]");
+						if (seg instanceof HTMLElement) seg.focus();
+					}
+				},
+				onCloseAutoFocus: (e) => {
+					e.preventDefault();
+					setIsClosing(true);
+					requestAnimationFrame(() => setIsClosing(false));
+				},
+				noPadding: true,
+				style: { zIndex: calendarZIndex },
+				zIndex: calendarZIndex
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DateRangeInputs, {
+					...(0, react_aria.mergeProps)(groupProps, containerFocusProps),
+					ref,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateField, {
+							ref: startFieldRef,
+							inputPosition: "start",
+							focused: dateMode === "start",
+							disabled: props.disabled,
+							size: props.size,
+							...(0, react_aria.mergeProps)(startFieldProps, startFocusWithinProps, { onKeyDown: handleKeyDown })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateField, {
+							ref: endFieldRef,
+							inputPosition: "end",
+							focused: dateMode === "end",
+							disabled: props.disabled,
+							size: props.size,
+							...(0, react_aria.mergeProps)(endFieldProps, endFocusWithinProps, { onKeyDown: handleKeyDown })
+						}),
+						props.showClear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearRangeButton, {
+							...pressClearProps,
+							type: "button",
+							disabled: isValueNull,
+							"aria-label": "Clear date range",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CircleXInverseIcon, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenButton, {
+							onOpen: openCalendarWithFocus,
+							disabled: props.disabled
+						}) })
+					]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeCalendar, {
+				...calendarProps,
+				autoFocus: void 0,
+				calendarRef,
+				setDateMode,
+				setValue: state.setValue,
+				granularity,
+				hidePresets: props.hidePresets,
+				onSelectDate: (dateVal) => {
+					/**
+					* Please use caution when editing the logic below.
+					* It is specific to react-aria's date picker and can be brittle.
+					*/
+					if (dateVal) {
+						const date = state.hasTime ? (0, _internationalized_date.toCalendarDateTime)(dateVal) : dateVal;
+						if (dateMode === "start") {
+							if (state.value.end == null && state.value.start == null) state.setValue({
+								start: date,
+								end: date
+							});
+							else if (state.value.end && date.compare(state.value.end) > 0) state.setValue({
+								start: state.value.end,
+								end: state.value.end.set(dateVal)
+							});
+							else state.setValue({
+								start: state.value.start == null ? date : state.value.start.set(dateVal),
+								end: state.value.end
+							});
+							setDateMode("end");
+						} else {
+							if (state.value.end == null && state.value.start == null) state.setValue({
+								start: date,
+								end: date
+							});
+							else if (state.value.start && date.compare(state.value.start) < 0) state.setValue({
+								start: state.value.start.set(dateVal),
+								end: state.value.start
+							});
+							else state.setValue({
+								start: state.value.start,
+								end: state.value.end == null ? date : state.value.end.set(dateVal)
+							});
+							state.setOpen(false);
+						}
+					}
+				},
+				minDate: props.minDate,
+				maxDate: props.maxDate
+			})]
+		})]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Calendar", {
+	enumerable: true,
+	get: function() {
+		return Calendar;
+	}
+});
+Object.defineProperty(exports, "DateField", {
+	enumerable: true,
+	get: function() {
+		return DateField;
+	}
+});
+Object.defineProperty(exports, "DatePicker", {
+	enumerable: true,
+	get: function() {
+		return DatePicker;
+	}
+});
+Object.defineProperty(exports, "DateRangePicker", {
+	enumerable: true,
+	get: function() {
+		return DateRangePicker;
+	}
+});
+
+//# sourceMappingURL=DatePicker-BlCgFb7g.cjs.map