@ultraviolet/ui 3.21.1 → 3.21.2

package/dist/components/DateInput/components/CalendarContent.js

@@ -15,73 +15,75 @@ import { ArrowLeftIcon } from "@ultraviolet/icons/ArrowLeftIcon";
 
 //#region src/components/DateInput/components/CalendarContent.tsx
 var CalendarContent;
-var init_CalendarContent = __esmMin(() => {
-	init_Button();
-	init_Stack();
-	init_Text();
-	init_Context();
-	init_helpers();
-	init_CalendarDaily();
-	init_CalendarMonthly();
-	init_styles_css();
-	CalendarContent = () => {
-		const { showMonthYearPicker, disabled, monthToShow, yearToShow, setMonthToShow, setYearToShow, maxDate, minDate, MONTHS_ARR, readOnly } = useContext(DateInputContext);
-		return /* @__PURE__ */ jsxs(Stack, {
-			gap: 2,
-			children: [/* @__PURE__ */ jsxs(Stack, {
-				direction: "row",
-				justifyContent: "space-between",
-				width: "100%",
-				children: [
-					/* @__PURE__ */ jsx(Button, {
-						"data-testid": "previous-month",
-						disabled: !!(minDate && minDate > new Date(yearToShow, monthToShow - 1, 0)) || disabled,
-						onClick: () => {
-							if ((!minDate || minDate <= new Date(yearToShow, monthToShow - 1, 0)) && !readOnly) if (showMonthYearPicker) setYearToShow(yearToShow - 1);
-							else {
-								const [prevMonth, year] = getPreviousMonth(monthToShow, yearToShow);
-								setMonthToShow(prevMonth);
-								setYearToShow(year);
-							}
-						},
-						sentiment: "neutral",
-						size: "xsmall",
-						variant: "ghost",
-						children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-					}),
-					/* @__PURE__ */ jsxs(Text, {
-						as: "span",
-						className: dateInputStyle.capitalizedText,
-						disabled,
-						sentiment: "neutral",
-						variant: "bodyStrong",
-						children: [
-							showMonthYearPicker ? null : MONTHS_ARR[monthToShow - 1],
-							"\xA0",
-							yearToShow
-						]
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						"data-testid": "next-month",
-						disabled: !!(maxDate && maxDate < new Date(yearToShow, monthToShow, 1)) || disabled,
-						onClick: () => {
-							if ((!maxDate || maxDate >= new Date(yearToShow, monthToShow, 1)) && !readOnly) if (showMonthYearPicker) setYearToShow(yearToShow + 1);
-							else {
-								const [monthNext, year] = getNextMonth(monthToShow, yearToShow);
-								setMonthToShow(monthNext);
-								setYearToShow(year);
-							}
-						},
-						sentiment: "neutral",
-						size: "xsmall",
-						variant: "ghost",
-						children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
-					})
-				]
-			}), showMonthYearPicker ? /* @__PURE__ */ jsx(Monthly, {}) : /* @__PURE__ */ jsx(Daily, {})]
-		});
-	};
-});
+function init_CalendarContent() {
+	return (init_CalendarContent = __esmMin(() => {
+		init_Button();
+		init_Stack();
+		init_Text();
+		init_Context();
+		init_helpers();
+		init_CalendarDaily();
+		init_CalendarMonthly();
+		init_styles_css();
+		CalendarContent = () => {
+			const { showMonthYearPicker, disabled, monthToShow, yearToShow, setMonthToShow, setYearToShow, maxDate, minDate, MONTHS_ARR, readOnly } = useContext(DateInputContext);
+			return /* @__PURE__ */ jsxs(Stack, {
+				gap: 2,
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					justifyContent: "space-between",
+					width: "100%",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							"data-testid": "previous-month",
+							disabled: !!(minDate && minDate > new Date(yearToShow, monthToShow - 1, 0)) || disabled,
+							onClick: () => {
+								if ((!minDate || minDate <= new Date(yearToShow, monthToShow - 1, 0)) && !readOnly) if (showMonthYearPicker) setYearToShow(yearToShow - 1);
+								else {
+									const [prevMonth, year] = getPreviousMonth(monthToShow, yearToShow);
+									setMonthToShow(prevMonth);
+									setYearToShow(year);
+								}
+							},
+							sentiment: "neutral",
+							size: "xsmall",
+							variant: "ghost",
+							children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+						}),
+						/* @__PURE__ */ jsxs(Text, {
+							as: "span",
+							className: dateInputStyle.capitalizedText,
+							disabled,
+							sentiment: "neutral",
+							variant: "bodyStrong",
+							children: [
+								showMonthYearPicker ? null : MONTHS_ARR[monthToShow - 1],
+								"\xA0",
+								yearToShow
+							]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							"data-testid": "next-month",
+							disabled: !!(maxDate && maxDate < new Date(yearToShow, monthToShow, 1)) || disabled,
+							onClick: () => {
+								if ((!maxDate || maxDate >= new Date(yearToShow, monthToShow, 1)) && !readOnly) if (showMonthYearPicker) setYearToShow(yearToShow + 1);
+								else {
+									const [monthNext, year] = getNextMonth(monthToShow, yearToShow);
+									setMonthToShow(monthNext);
+									setYearToShow(year);
+								}
+							},
+							sentiment: "neutral",
+							size: "xsmall",
+							variant: "ghost",
+							children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+						})
+					]
+				}), showMonthYearPicker ? /* @__PURE__ */ jsx(Monthly, {}) : /* @__PURE__ */ jsx(Daily, {})]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_CalendarContent();

package/dist/components/DateInput/components/CalendarDaily.js

@@ -12,148 +12,150 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DateInput/components/CalendarDaily.tsx
 var Daily;
-var init_CalendarDaily = __esmMin(() => {
-	init_Button();
-	init_Row();
-	init_Text();
-	init_constants();
-	init_Context();
-	init_helpers();
-	init_styles_css();
-	Daily = () => {
-		const { value, yearToShow, monthToShow, setValue, setMonthToShow, onChange, setYearToShow, excludeDates, minDate, maxDate, DAYS, selectsRange, range, setRange, setInputValue, format, setVisible, readOnly, disabled, hoveredDate, setHoveredDate } = useContext(DateInputContext);
-		const [rangeState, setRangeState] = useState((range === null || range === void 0 ? void 0 : range.start) && !(range === null || range === void 0 ? void 0 : range.end) ? "end" : "start");
-		const monthDays = new Date(yearToShow, monthToShow, 0).getDate();
-		const daysFromPreviousMonth = getMonthFirstDay(monthToShow, yearToShow);
-		const daysFromNextMonth = 6 * 7 - (daysFromPreviousMonth + monthDays);
-		const [previousMonth, prevMonthYear] = getPreviousMonth(monthToShow, yearToShow);
-		const [nextMonth, nextMonthYear] = getNextMonth(monthToShow, yearToShow);
-		const previousMonthDays = new Date(prevMonthYear, previousMonth, 0).getDate();
-		const prevMonthDates = Array.from({ length: daysFromPreviousMonth }, (_, index) => ({
-			day: index + 1 + (previousMonthDays - daysFromPreviousMonth),
-			month: -1
-		}));
-		const currentMonthDates = Array.from({ length: monthDays }, (_, index) => ({
-			day: index + 1,
-			month: 0
-		}));
-		const nextMonthDates = Array.from({ length: daysFromNextMonth }, (_, index) => ({
-			day: index + 1,
-			month: 1
-		}));
-		const allDaysToShow = [
-			...prevMonthDates,
-			...currentMonthDates,
-			...nextMonthDates
-		];
-		return /* @__PURE__ */ jsxs(Row, {
-			gap: 1,
-			templateColumns: "repeat(7, 1fr)",
-			children: [Object.entries(DAYS).map((day) => /* @__PURE__ */ jsx(Text, {
-				as: "p",
-				className: dateInputStyle.capitalizedTextDay,
-				disabled,
-				sentiment: "neutral",
-				variant: "bodyStrong",
-				children: day[1]
-			}, day[0])), allDaysToShow.map((data) => {
-				const constructedDate = new Date(yearToShow, monthToShow - 1 + data.month, data.day);
-				const isExcluded = excludeDates ? excludeDates.map((date) => isSameDay(constructedDate, date)).includes(true) : false;
-				const isOutsideRange = !!(minDate && constructedDate < minDate) || !!(maxDate && constructedDate > maxDate);
-				const isSelected = value && isSameDay(constructedDate, new Date(value)) || (range === null || range === void 0 ? void 0 : range.end) && isSameDay(constructedDate, range.end) || (range === null || range === void 0 ? void 0 : range.start) && isSameDay(constructedDate, range.start);
-				const isAfterStartDate = selectsRange && (range === null || range === void 0 ? void 0 : range.start) && constructedDate > range.start;
-				const isInHoveredRange = getIsInHoveredRange(selectsRange, constructedDate, hoveredDate, range);
-				const getNewDate = () => {
-					if (data.month !== 0 && data.day > 15) {
-						setMonthToShow(previousMonth);
-						setYearToShow(prevMonthYear);
-						return new Date(prevMonthYear, previousMonth - 1, data.day);
-					}
-					if (data.month !== 0 && data.day < 15) {
-						setMonthToShow(nextMonth);
-						setYearToShow(nextMonthYear);
-						return new Date(nextMonthYear, nextMonth - 1, data.day);
-					}
-					return new Date(yearToShow, monthToShow - 1, data.day);
-				};
-				const onClickRange = (event, newDate) => {
-					if (selectsRange) if (rangeState === "end" && isAfterStartDate) {
-						setRange === null || setRange === void 0 || setRange({
-							end: newDate,
-							start: range.start
-						});
-						onChange === null || onChange === void 0 || onChange([range.start, newDate], event);
-						setInputValue(formatValue(null, {
-							end: newDate,
-							start: range.start
-						}, false, true, format));
-						setRangeState("start");
-						setVisible(false);
-					} else if (rangeState === "end" && !isAfterStartDate && (range === null || range === void 0 ? void 0 : range.start)) {
-						setRange === null || setRange === void 0 || setRange({
-							end: range.start,
-							start: newDate
-						});
-						onChange === null || onChange === void 0 || onChange([newDate, range.start], event);
-						setInputValue(formatValue(null, {
-							end: range.start,
-							start: newDate
-						}, false, true, format));
-						setRangeState("start");
-						setVisible(false);
-					} else {
-						setRange === null || setRange === void 0 || setRange({
-							end: null,
-							start: newDate
-						});
-						onChange === null || onChange === void 0 || onChange([newDate, null], event);
-						setInputValue(formatValue(null, {
-							end: null,
-							start: newDate
-						}, false, true, format));
-						setRangeState("end");
-					}
-				};
-				const createTestId = () => {
-					if (isInHoveredRange) return "rangeButton";
-					if (data.month === -1) return "dayLastMonth";
-					if (data.month === 1) return "dayNextMonth";
-				};
-				const dayState = () => {
-					if (isSelected) return "selected";
-					if (isInHoveredRange) return "in-range";
-					if (data.month !== 0) return "not-current";
-					return "neutral";
-				};
-				const isHightlighted = isSelected || isInHoveredRange;
-				return /* @__PURE__ */ jsx(Button, {
-					"aria-label": dayState(),
-					className: dateInputStyle.dayMonth,
-					"data-testid": createTestId(),
-					disabled: disabled || isExcluded || isOutsideRange,
-					onClick: (event) => {
-						if (!(isExcluded || isOutsideRange || readOnly)) {
-							const newDate = getNewDate();
-							if (selectsRange) onClickRange(event, newDate);
-							else {
-								setValue(newDate);
-								onChange === null || onChange === void 0 || onChange(newDate, event);
-								setInputValue(formatValue(newDate, null, false, false, format));
-								setVisible(false);
-							}
+function init_CalendarDaily() {
+	return (init_CalendarDaily = __esmMin(() => {
+		init_Button();
+		init_Row();
+		init_Text();
+		init_constants();
+		init_Context();
+		init_helpers();
+		init_styles_css();
+		Daily = () => {
+			const { value, yearToShow, monthToShow, setValue, setMonthToShow, onChange, setYearToShow, excludeDates, minDate, maxDate, DAYS, selectsRange, range, setRange, setInputValue, format, setVisible, readOnly, disabled, hoveredDate, setHoveredDate } = useContext(DateInputContext);
+			const [rangeState, setRangeState] = useState((range === null || range === void 0 ? void 0 : range.start) && !(range === null || range === void 0 ? void 0 : range.end) ? "end" : "start");
+			const monthDays = new Date(yearToShow, monthToShow, 0).getDate();
+			const daysFromPreviousMonth = getMonthFirstDay(monthToShow, yearToShow);
+			const daysFromNextMonth = 6 * 7 - (daysFromPreviousMonth + monthDays);
+			const [previousMonth, prevMonthYear] = getPreviousMonth(monthToShow, yearToShow);
+			const [nextMonth, nextMonthYear] = getNextMonth(monthToShow, yearToShow);
+			const previousMonthDays = new Date(prevMonthYear, previousMonth, 0).getDate();
+			const prevMonthDates = Array.from({ length: daysFromPreviousMonth }, (_, index) => ({
+				day: index + 1 + (previousMonthDays - daysFromPreviousMonth),
+				month: -1
+			}));
+			const currentMonthDates = Array.from({ length: monthDays }, (_, index) => ({
+				day: index + 1,
+				month: 0
+			}));
+			const nextMonthDates = Array.from({ length: daysFromNextMonth }, (_, index) => ({
+				day: index + 1,
+				month: 1
+			}));
+			const allDaysToShow = [
+				...prevMonthDates,
+				...currentMonthDates,
+				...nextMonthDates
+			];
+			return /* @__PURE__ */ jsxs(Row, {
+				gap: 1,
+				templateColumns: "repeat(7, 1fr)",
+				children: [Object.entries(DAYS).map((day) => /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					className: dateInputStyle.capitalizedTextDay,
+					disabled,
+					sentiment: "neutral",
+					variant: "bodyStrong",
+					children: day[1]
+				}, day[0])), allDaysToShow.map((data) => {
+					const constructedDate = new Date(yearToShow, monthToShow - 1 + data.month, data.day);
+					const isExcluded = excludeDates ? excludeDates.map((date) => isSameDay(constructedDate, date)).includes(true) : false;
+					const isOutsideRange = !!(minDate && constructedDate < minDate) || !!(maxDate && constructedDate > maxDate);
+					const isSelected = value && isSameDay(constructedDate, new Date(value)) || (range === null || range === void 0 ? void 0 : range.end) && isSameDay(constructedDate, range.end) || (range === null || range === void 0 ? void 0 : range.start) && isSameDay(constructedDate, range.start);
+					const isAfterStartDate = selectsRange && (range === null || range === void 0 ? void 0 : range.start) && constructedDate > range.start;
+					const isInHoveredRange = getIsInHoveredRange(selectsRange, constructedDate, hoveredDate, range);
+					const getNewDate = () => {
+						if (data.month !== 0 && data.day > 15) {
+							setMonthToShow(previousMonth);
+							setYearToShow(prevMonthYear);
+							return new Date(prevMonthYear, previousMonth - 1, data.day);
+						}
+						if (data.month !== 0 && data.day < 15) {
+							setMonthToShow(nextMonth);
+							setYearToShow(nextMonthYear);
+							return new Date(nextMonthYear, nextMonth - 1, data.day);
 						}
-					},
-					onMouseEnter: () => {
-						if (selectsRange && (range === null || range === void 0 ? void 0 : range.start)) setHoveredDate(constructedDate);
-					},
-					sentiment: isHightlighted ? "primary" : "neutral",
-					variant: isHightlighted ? "filled" : "ghost",
-					children: data.day
-				}, `${data.month}-${data.day}`);
-			})]
-		});
-	};
-});
+						return new Date(yearToShow, monthToShow - 1, data.day);
+					};
+					const onClickRange = (event, newDate) => {
+						if (selectsRange) if (rangeState === "end" && isAfterStartDate) {
+							setRange === null || setRange === void 0 || setRange({
+								end: newDate,
+								start: range.start
+							});
+							onChange === null || onChange === void 0 || onChange([range.start, newDate], event);
+							setInputValue(formatValue(null, {
+								end: newDate,
+								start: range.start
+							}, false, true, format));
+							setRangeState("start");
+							setVisible(false);
+						} else if (rangeState === "end" && !isAfterStartDate && (range === null || range === void 0 ? void 0 : range.start)) {
+							setRange === null || setRange === void 0 || setRange({
+								end: range.start,
+								start: newDate
+							});
+							onChange === null || onChange === void 0 || onChange([newDate, range.start], event);
+							setInputValue(formatValue(null, {
+								end: range.start,
+								start: newDate
+							}, false, true, format));
+							setRangeState("start");
+							setVisible(false);
+						} else {
+							setRange === null || setRange === void 0 || setRange({
+								end: null,
+								start: newDate
+							});
+							onChange === null || onChange === void 0 || onChange([newDate, null], event);
+							setInputValue(formatValue(null, {
+								end: null,
+								start: newDate
+							}, false, true, format));
+							setRangeState("end");
+						}
+					};
+					const createTestId = () => {
+						if (isInHoveredRange) return "rangeButton";
+						if (data.month === -1) return "dayLastMonth";
+						if (data.month === 1) return "dayNextMonth";
+					};
+					const dayState = () => {
+						if (isSelected) return "selected";
+						if (isInHoveredRange) return "in-range";
+						if (data.month !== 0) return "not-current";
+						return "neutral";
+					};
+					const isHightlighted = isSelected || isInHoveredRange;
+					return /* @__PURE__ */ jsx(Button, {
+						"aria-label": dayState(),
+						className: dateInputStyle.dayMonth,
+						"data-testid": createTestId(),
+						disabled: disabled || isExcluded || isOutsideRange,
+						onClick: (event) => {
+							if (!(isExcluded || isOutsideRange || readOnly)) {
+								const newDate = getNewDate();
+								if (selectsRange) onClickRange(event, newDate);
+								else {
+									setValue(newDate);
+									onChange === null || onChange === void 0 || onChange(newDate, event);
+									setInputValue(formatValue(newDate, null, false, false, format));
+									setVisible(false);
+								}
+							}
+						},
+						onMouseEnter: () => {
+							if (selectsRange && (range === null || range === void 0 ? void 0 : range.start)) setHoveredDate(constructedDate);
+						},
+						sentiment: isHightlighted ? "primary" : "neutral",
+						variant: isHightlighted ? "filled" : "ghost",
+						children: data.day
+					}, `${data.month}-${data.day}`);
+				})]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_CalendarDaily();

package/dist/components/DateInput/components/CalendarMonthly.js

@@ -11,92 +11,94 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/DateInput/components/CalendarMonthly.tsx
 var Monthly;
-var init_CalendarMonthly = __esmMin(() => {
-	init_Button();
-	init_Row();
-	init_Context();
-	init_helpers();
-	init_styles_css();
-	Monthly = () => {
-		const { yearToShow, setValue, setMonthToShow, MONTHS, onChange, selectsRange, setRange, range, minDate, maxDate, excludeDates, value, setInputValue, format, setVisible, readOnly, disabled, setHoveredDate, hoveredDate } = useContext(DateInputContext);
-		const [rangeState, setRangeState] = useState((range === null || range === void 0 ? void 0 : range.start) && !range.end ? "end" : "start");
-		return /* @__PURE__ */ jsx(Row, {
-			gap: 1,
-			templateColumns: "1fr 1fr 1fr",
-			children: Object.entries(MONTHS).map((month, index) => {
-				const constructedDate = new Date(yearToShow, index, 1);
-				const isExcluded = excludeDates ? excludeDates.map((date) => isSameMonth(constructedDate, date)).includes(true) : false;
-				const isOutsideRange = !!(minDate && constructedDate < minDate) || !!(maxDate && constructedDate > maxDate);
-				const isAfterStartDate = selectsRange && (range === null || range === void 0 ? void 0 : range.start) && constructedDate > range.start;
-				const isInHoveredRange = getIsInHoveredRange(selectsRange, constructedDate, hoveredDate, range);
-				const isSelected = value && isSameMonth(constructedDate, value) || (range === null || range === void 0 ? void 0 : range.start) && isSameMonth(constructedDate, range.start) || (range === null || range === void 0 ? void 0 : range.end) && isSameMonth(constructedDate, range.end);
-				const onClickRange = (event, newDate) => {
-					if (selectsRange) if (rangeState === "end" && isAfterStartDate) {
-						setRange === null || setRange === void 0 || setRange({
-							end: newDate,
-							start: range.start
-						});
-						onChange === null || onChange === void 0 || onChange([range.start, newDate], event);
-						setInputValue(formatValue(null, {
-							end: newDate,
-							start: range.start
-						}, true, true, format));
-						setVisible(false);
-						setRangeState("start");
-					} else if (rangeState === "end" && !isAfterStartDate && range) {
-						setRange === null || setRange === void 0 || setRange({
-							end: range.start,
-							start: newDate
-						});
-						onChange === null || onChange === void 0 || onChange([newDate, range.start], event);
-						setInputValue(formatValue(null, {
-							end: range.start,
-							start: newDate
-						}, true, true, format));
-						setVisible(false);
-						setRangeState("start");
-					} else {
-						setRange === null || setRange === void 0 || setRange({
-							end: null,
-							start: newDate
-						});
-						onChange === null || onChange === void 0 || onChange([newDate, null], event);
-						setInputValue(formatValue(null, {
-							end: null,
-							start: newDate
-						}, true, true, format));
-						setRangeState("end");
-					}
-				};
-				const monthState = () => {
-					if (isSelected) return "selected";
-					if (isInHoveredRange) return "in-range";
-					return "neutral";
-				};
-				const isHightlighted = isSelected || isInHoveredRange;
-				return /* @__PURE__ */ jsx(Button, {
-					"aria-label": monthState(),
-					className: cn(dateInputStyle.dayMonth, dateInputStyle.capitalizedText),
-					disabled: disabled || isExcluded || isOutsideRange,
-					onClick: (event) => {
-						if (!(isExcluded || isOutsideRange || readOnly)) if (selectsRange) onClickRange(event, constructedDate);
-						else {
-							setMonthToShow(index + 1);
-							setValue(constructedDate);
-							onChange === null || onChange === void 0 || onChange(constructedDate, event);
-							setInputValue(formatValue(constructedDate, null, true, false, format));
+function init_CalendarMonthly() {
+	return (init_CalendarMonthly = __esmMin(() => {
+		init_Button();
+		init_Row();
+		init_Context();
+		init_helpers();
+		init_styles_css();
+		Monthly = () => {
+			const { yearToShow, setValue, setMonthToShow, MONTHS, onChange, selectsRange, setRange, range, minDate, maxDate, excludeDates, value, setInputValue, format, setVisible, readOnly, disabled, setHoveredDate, hoveredDate } = useContext(DateInputContext);
+			const [rangeState, setRangeState] = useState((range === null || range === void 0 ? void 0 : range.start) && !range.end ? "end" : "start");
+			return /* @__PURE__ */ jsx(Row, {
+				gap: 1,
+				templateColumns: "1fr 1fr 1fr",
+				children: Object.entries(MONTHS).map((month, index) => {
+					const constructedDate = new Date(yearToShow, index, 1);
+					const isExcluded = excludeDates ? excludeDates.map((date) => isSameMonth(constructedDate, date)).includes(true) : false;
+					const isOutsideRange = !!(minDate && constructedDate < minDate) || !!(maxDate && constructedDate > maxDate);
+					const isAfterStartDate = selectsRange && (range === null || range === void 0 ? void 0 : range.start) && constructedDate > range.start;
+					const isInHoveredRange = getIsInHoveredRange(selectsRange, constructedDate, hoveredDate, range);
+					const isSelected = value && isSameMonth(constructedDate, value) || (range === null || range === void 0 ? void 0 : range.start) && isSameMonth(constructedDate, range.start) || (range === null || range === void 0 ? void 0 : range.end) && isSameMonth(constructedDate, range.end);
+					const onClickRange = (event, newDate) => {
+						if (selectsRange) if (rangeState === "end" && isAfterStartDate) {
+							setRange === null || setRange === void 0 || setRange({
+								end: newDate,
+								start: range.start
+							});
+							onChange === null || onChange === void 0 || onChange([range.start, newDate], event);
+							setInputValue(formatValue(null, {
+								end: newDate,
+								start: range.start
+							}, true, true, format));
 							setVisible(false);
+							setRangeState("start");
+						} else if (rangeState === "end" && !isAfterStartDate && range) {
+							setRange === null || setRange === void 0 || setRange({
+								end: range.start,
+								start: newDate
+							});
+							onChange === null || onChange === void 0 || onChange([newDate, range.start], event);
+							setInputValue(formatValue(null, {
+								end: range.start,
+								start: newDate
+							}, true, true, format));
+							setVisible(false);
+							setRangeState("start");
+						} else {
+							setRange === null || setRange === void 0 || setRange({
+								end: null,
+								start: newDate
+							});
+							onChange === null || onChange === void 0 || onChange([newDate, null], event);
+							setInputValue(formatValue(null, {
+								end: null,
+								start: newDate
+							}, true, true, format));
+							setRangeState("end");
 						}
-					},
-					onMouseEnter: () => setHoveredDate(constructedDate),
-					sentiment: isHightlighted ? "primary" : "neutral",
-					variant: isHightlighted ? "filled" : "ghost",
-					children: month[1]
-				}, month[0]);
-			})
-		});
-	};
-});
+					};
+					const monthState = () => {
+						if (isSelected) return "selected";
+						if (isInHoveredRange) return "in-range";
+						return "neutral";
+					};
+					const isHightlighted = isSelected || isInHoveredRange;
+					return /* @__PURE__ */ jsx(Button, {
+						"aria-label": monthState(),
+						className: cn(dateInputStyle.dayMonth, dateInputStyle.capitalizedText),
+						disabled: disabled || isExcluded || isOutsideRange,
+						onClick: (event) => {
+							if (!(isExcluded || isOutsideRange || readOnly)) if (selectsRange) onClickRange(event, constructedDate);
+							else {
+								setMonthToShow(index + 1);
+								setValue(constructedDate);
+								onChange === null || onChange === void 0 || onChange(constructedDate, event);
+								setInputValue(formatValue(constructedDate, null, true, false, format));
+								setVisible(false);
+							}
+						},
+						onMouseEnter: () => setHoveredDate(constructedDate),
+						sentiment: isHightlighted ? "primary" : "neutral",
+						variant: isHightlighted ? "filled" : "ghost",
+						children: month[1]
+					}, month[0]);
+				})
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_CalendarMonthly();