@persona/design-system 0.1.8 → 0.2.0

package/dist/DatePicker-BlCgFb7g.cjs

@@ -1,948 +0,0 @@
-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