@persona/design-system 0.1.7 → 0.1.8

package/dist/components/DatePicker/index.mjs

@@ -1,922 +1,2 @@
-import { isDisabled, isFocused, isFocusedVisible, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
-import { focusWithinOutline } from "../../mixins/focus.mjs";
-import inputMixin from "../../mixins/input.mjs";
-import { t as Card_default } from "../../Card-CLTkZLKr.mjs";
-import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
-import { t as ClearButton } from "../../Input-PWfwMSJ7.mjs";
-import { c as MenuList, s as MenuItem } from "../../Menu-CVuFAxl2.mjs";
-import { s as Popover_default } from "../../Popover-D0QY5f-J.mjs";
-import { a as FormLabel } from "../../FormControl-ArDcvmir.mjs";
-import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeftIcon, ArrowRightIcon, CircleXInverseIcon } from "@persona/icons";
-import { range } from "lodash/fp.js";
-import { VisuallyHidden, mergeProps, useButton, useCalendar, useCalendarCell, useCalendarGrid, useDateFormatter, useDatePicker, useDateRangePicker, useFocusWithin, useLocale, usePress, useRangeCalendar } from "react-aria";
-import { useCalendarState, useDatePickerState, useDateRangePickerState, useRangeCalendarState } from "react-stately";
-import { Settings } from "luxon";
-import { mergeRefs } from "@react-aria/utils";
-import { CalendarDate, GregorianCalendar, endOfMonth, endOfYear, getWeeksInMonth, isSameDay, isSameMonth, parseAbsolute, startOfMonth, startOfYear, toCalendarDateTime, today } from "@internationalized/date";
-import { useDateField, useDateSegment } from "@react-aria/datepicker";
-import { useLocale as useLocale$1 } from "@react-aria/i18n";
-import { useDateFieldState } from "@react-stately/datepicker";
-//#region components/DatePicker/Calendar/CalendarBase.tsx
-const CalendarContainer = styled.div`
-  display: inline-block;
-`;
-const CalendarHeader = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: ${Spacing[2]};
-`;
-const CalendarHeading = styled.div`
-  ${Typography.TextLargeBold};
-  flex: 1;
-  text-align: center;
-`;
-const StyledCalendarButton = styled(IconButton)`
-  width: 32px;
-  height: 32px;
-`;
-const CalendarButton = (props) => {
-	const ref = useRef();
-	const { buttonProps } = useButton(props, ref);
-	return /* @__PURE__ */ jsx(StyledCalendarButton, {
-		...buttonProps,
-		className: props.className,
-		ref,
-		children: props.children
-	});
-};
-//#endregion
-//#region components/DatePicker/Calendar/CalendarCell.tsx
-const CalendarCellContainer = styled.td`
-  text-align: center;
-  width: 38px;
-  height: 38px;
-  padding: 0px;
-`;
-const CalendarCellButton = styled.button`
-  ${Typography.TextMedium};
-  border-style: none;
-  padding: 0;
-  background: none;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  position: relative;
-
-  ${({ isSelected }) => isSelected && css`
-      background: ${Color.CorePurple100};
-    `}
-
-  ${({ isSelectionStart }) => isSelectionStart && css`
-      background: ${Color.BackgroundButtonPrimary};
-      color: ${Color.TextInverse};
-      border-top-left-radius: ${BorderRadius.Sm};
-      border-bottom-left-radius: ${BorderRadius.Sm};
-    `}
-
-  ${({ isSelectionEnd }) => isSelectionEnd && css`
-      background: ${Color.BackgroundButtonPrimary};
-      color: ${Color.TextInverse};
-      border-top-right-radius: ${BorderRadius.Sm};
-      border-bottom-right-radius: ${BorderRadius.Sm};
-    `}
-
-  ${({ isDisabled }) => isDisabled && css`
-      color: ${Color.CoreSlate300};
-    `}
-
-  ${({ isInvalid }) => isInvalid && css`
-      background: ${Color.BackgroundButtonDanger};
-      color: ${Color.TextInverse};
-    `}
-
-  &:focus-visible {
-    outline: 2px solid ${Color.BorderFocus};
-    outline-offset: -2px;
-    box-shadow: ${Color.PrimaryWhite} 0px 0px 0px 3px inset;
-    z-index: 1;
-  }
-`;
-const CalendarCell = ({ state, date, currentMonth }) => {
-	const ref = useRef();
-	const { cellProps, buttonProps, isSelected, isInvalid, isDisabled, formattedDate } = useCalendarCell({ date }, state, ref);
-	const highlightedRange = "highlightedRange" in state && state.highlightedRange;
-	const isOutsideMonth = !isSameMonth(currentMonth, date);
-	const isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;
-	const isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;
-	return /* @__PURE__ */ jsx(CalendarCellContainer, {
-		...cellProps,
-		children: /* @__PURE__ */ jsx(CalendarCellButton, {
-			...buttonProps,
-			hidden: isOutsideMonth,
-			isSelected,
-			isSelectionStart,
-			isSelectionEnd,
-			isInvalid,
-			isDisabled,
-			ref,
-			children: formattedDate
-		})
-	});
-};
-//#endregion
-//#region components/DatePicker/Calendar/CalendarGrid.tsx
-const CalendarGridContainer = styled.table`
-  width: 266px;
-  border-spacing: 0px;
-  border-collapse: collapse;
-
-  &:focus-visible {
-    outline: 2px solid ${Color.BorderFocus};
-    outline-offset: 1px;
-  }
-`;
-const CalendarGridDayHeader = styled.th`
-  ${Typography.TextMedium};
-  color: ${Color.TextSecondary};
-`;
-const CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }) => {
-	const { locale } = useLocale();
-	const startDate = state.visibleRange.start.add(offset);
-	const { gridProps, headerProps, weekDays } = useCalendarGrid({
-		startDate,
-		endDate: endOfMonth(startDate)
-	}, state);
-	const weeksInMonth = getWeeksInMonth(startDate, locale);
-	return /* @__PURE__ */ jsxs(CalendarGridContainer, {
-		...skipFromTabOrder ? {
-			...gridProps,
-			tabIndex: -1
-		} : gridProps,
-		children: [/* @__PURE__ */ jsx("thead", {
-			...headerProps,
-			children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx(CalendarGridDayHeader, { children: day }, index)) })
-		}), /* @__PURE__ */ jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
-			state,
-			date,
-			currentMonth: startDate
-		}, i) : /* @__PURE__ */ jsx("td", {}, i)) }, weekIndex)) })]
-	});
-};
-//#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 ${Color.BorderFocus};
-    outline-offset: 1px;
-    background-color: ${Color.CorePurple200};
-  }
-
-  ${({ $isComma, $isTimezone }) => ($isComma || $isTimezone) && css`
-      margin-left: 0.25ch;
-      margin-right: 0.25ch;
-    `}
-
-  ${({ $isTimezone }) => $isTimezone && css`
-      color: ${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 }) => 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;
-
-  &${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,
-		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 [isClosing, setIsClosing] = useState(false);
-	const { focusWithinProps } = 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 = 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();
-					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__ */ 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
-const getDefaultPresets = (tz) => {
-	const now = 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: startOfMonth(now),
-				end: now
-			}
-		},
-		{
-			label: "Last month",
-			range: {
-				start: startOfMonth(now.subtract({ months: 1 })),
-				end: endOfMonth(now.subtract({ months: 1 }))
-			}
-		},
-		{
-			label: "This year",
-			range: {
-				start: startOfYear(now),
-				end: now
-			}
-		},
-		{
-			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 ${Color.BorderFocus} !important;
-    outline-offset: 1px;
-  }
-`;
-const PresetButton = ({ state, preset, isSelected, setDateMode, ...props }) => {
-	const ref = useRef();
-	const { buttonProps } = useButton({ onPress: () => {
-		state.setValue(preset.range);
-		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, state, setDateMode, ...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;
-	return /* @__PURE__ */ jsx(Container, {
-		...props,
-		children: /* @__PURE__ */ jsx(MenuList, {
-			"aria-label": "Date range presets",
-			children: presets.map((preset, i) => /* @__PURE__ */ 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 = memo(DateRangePickerPresets, arePropsEqual);
-//#endregion
-//#region 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 ${Color.BorderHairline};
-`;
-const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, setDateMode, setValue, granularity, ...props }) => {
-	const visibleMonths = 2;
-	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: toCalendarDateTime(value.start),
-				end: toCalendarDateTime(value.end)
-			});
-		},
-		selectDate: (date) => {
-			if (onSelectDate) {
-				onSelectDate(date);
-				rangeCalendarState.setAnchorDate(null);
-			} else rangeCalendarState.selectDate(date);
-		}
-	};
-	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,
-				setDateMode
-			})
-		}), /* @__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/DateRangePicker.tsx
-const DateRangeContainer = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-`;
-const DateRangeInputs = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const CustomFormLabel = styled(FormLabel)`
-  margin-bottom: ${Spacing[2]};
-  ${Typography.TextMediumBold};
-`;
-const OpenButton = ({ onOpen, disabled }) => {
-	const openCalBtnRef = useRef(null);
-	const { buttonProps } = useButton({
-		isDisabled: disabled,
-		onPress: onOpen
-	}, openCalBtnRef);
-	return /* @__PURE__ */ jsx("button", {
-		...buttonProps,
-		type: "button",
-		ref: openCalBtnRef,
-		"aria-label": "Open calendar",
-		tabIndex: -1
-	});
-};
-const ClearRangeButton = styled(ClearButton)`
-  height: 16px;
-  width: 16px;
-  margin-left: ${Spacing[2]};
-
-  &${isDisabled}, &:disabled {
-    background-color: transparent;
-  }
-`;
-const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className, calendarZIndex, portalContainer, ...props }) => {
-	const state = useDateRangePickerState({
-		granularity,
-		hideTimeZone,
-		...props
-	});
-	const ref = useRef(null);
-	const startFieldRef = useRef(null);
-	const endFieldRef = useRef(null);
-	const calendarRef = useRef(null);
-	const [dateMode, setDateMode] = useState(null);
-	const [isClosing, setIsClosing] = useState(false);
-	const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } = useDateRangePicker({
-		granularity,
-		hideTimeZone,
-		...props
-	}, state, ref);
-	const focusCalendar = useCallback(() => {
-		requestAnimationFrame(() => {
-			(calendarRef.current?.querySelector("[role=\"menuitem\"], button:not(:disabled), [tabindex=\"0\"]"))?.focus();
-		});
-	}, []);
-	const openCalendar = useCallback(() => {
-		if (!props.disabled && !state.isOpen && !isClosing) state.setOpen(true);
-	}, [
-		isClosing,
-		props.disabled,
-		state
-	]);
-	const openCalendarWithFocus = useCallback(() => {
-		openCalendar();
-		focusCalendar();
-	}, [focusCalendar, openCalendar]);
-	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(Settings.defaultZone);
-		const endDate = props.dateRange.endDate.setZone(Settings.defaultZone);
-		if (!startDate.isValid || !endDate.isValid) return;
-		const dateRangeV2 = {
-			start: state.hasTime ? parseAbsolute(startDate.toISO(), Settings.defaultZone.name) : new CalendarDate(startDate.year, startDate.month, startDate.day),
-			end: state.hasTime ? parseAbsolute(endDate.toISO(), Settings.defaultZone.name) : new CalendarDate(endDate.year, endDate.month, endDate.day)
-		};
-		state.setValue(dateRangeV2);
-	}, [
-		props.dateRange.startDate,
-		props.dateRange.endDate,
-		granularity
-	]);
-	const prevValueRef = useRef(state.value);
-	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 } = useFocusWithin({ onFocusWithin: () => {
-		setDateMode("start");
-		openCalendar();
-	} });
-	const { focusWithinProps: endFocusWithinProps } = useFocusWithin({ onFocusWithin: () => {
-		setDateMode("end");
-		openCalendar();
-	} });
-	const { focusWithinProps: containerFocusProps } = 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 } = usePress({ onPress: () => {
-		state.setValue(null);
-		if (props.onClear) props.onClear();
-	} });
-	const handleKeyDown = useCallback((event) => {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			openCalendarWithFocus();
-		}
-	}, [openCalendarWithFocus]);
-	const isValueNull = state.value && state.value.start == null && state.value.end == null;
-	return /* @__PURE__ */ jsxs(DateRangeContainer, {
-		"data-test": props.dataTest,
-		className,
-		children: [props.label && /* @__PURE__ */ jsx(CustomFormLabel, {
-			...labelProps,
-			children: props.label
-		}), /* @__PURE__ */ jsxs(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__ */ jsx(Popover_default.Trigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsxs(DateRangeInputs, {
-					...mergeProps(groupProps, containerFocusProps),
-					ref,
-					children: [
-						/* @__PURE__ */ jsx(DateField, {
-							ref: startFieldRef,
-							inputPosition: "start",
-							focused: dateMode === "start",
-							disabled: props.disabled,
-							size: props.size,
-							...mergeProps(startFieldProps, startFocusWithinProps, { onKeyDown: handleKeyDown })
-						}),
-						/* @__PURE__ */ jsx(DateField, {
-							ref: endFieldRef,
-							inputPosition: "end",
-							focused: dateMode === "end",
-							disabled: props.disabled,
-							size: props.size,
-							...mergeProps(endFieldProps, endFocusWithinProps, { onKeyDown: handleKeyDown })
-						}),
-						props.showClear && /* @__PURE__ */ jsx(ClearRangeButton, {
-							...pressClearProps,
-							type: "button",
-							disabled: isValueNull,
-							"aria-label": "Clear date range",
-							children: /* @__PURE__ */ jsx(CircleXInverseIcon, {})
-						}),
-						/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(OpenButton, {
-							onOpen: openCalendarWithFocus,
-							disabled: props.disabled
-						}) })
-					]
-				})
-			}), /* @__PURE__ */ 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 ? 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
+import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-DY1YA_Fu.mjs";
 export { Calendar, DateField, DatePicker, DatePicker as default, DateRangePicker };
-
-//# sourceMappingURL=index.mjs.map