@btst/stack 1.4.0 → 1.5.0

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/labels/labelYearDropdown.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+/**
+ * Generates the ARIA label for the years dropdown.
+ *
+ * @defaultValue `"Choose the Year"`
+ * @param options - Optional configuration for the date formatting library.
+ * @returns The ARIA label for the years dropdown.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+function labelYearDropdown(_options) {
+    return "Choose the Year";
+}
+
+exports.labelYearDropdown = labelYearDropdown;

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/labels/labelYearDropdown.mjs

@@ -0,0 +1,14 @@
+/**
+ * Generates the ARIA label for the years dropdown.
+ *
+ * @defaultValue `"Choose the Year"`
+ * @param options - Optional configuration for the date formatting library.
+ * @returns The ARIA label for the years dropdown.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+function labelYearDropdown(_options) {
+    return "Choose the Year";
+}
+
+export { labelYearDropdown };

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/locale/en-US.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+const dateFns = require('date-fns');
+const locale = require('date-fns/locale');
+
+/** English (United States) locale extended with DayPicker-specific translations. */
+const enUS = {
+    ...locale.enUS,
+    labels: {
+        labelDayButton: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => dateFns.format(d, pattern, { locale: locale.enUS, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers.today)
+                label = `Today, ${label}`;
+            if (modifiers.selected)
+                label = `${label}, selected`;
+            return label;
+        },
+        labelMonthDropdown: "Choose the Month",
+        labelNext: "Go to the Next Month",
+        labelPrevious: "Go to the Previous Month",
+        labelWeekNumber: (weekNumber) => `Week ${weekNumber}`,
+        labelYearDropdown: "Choose the Year",
+        labelGrid: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => dateFns.format(d, pattern, { locale: locale.enUS, ...options });
+            }
+            return formatDate(date, "LLLL yyyy");
+        },
+        labelGridcell: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => dateFns.format(d, pattern, { locale: locale.enUS, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers?.today) {
+                label = `Today, ${label}`;
+            }
+            return label;
+        },
+        labelNav: "Navigation bar",
+        labelWeekNumberHeader: "Week Number",
+        labelWeekday: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => dateFns.format(d, pattern, { locale: locale.enUS, ...options });
+            }
+            return formatDate(date, "cccc");
+        },
+    },
+};
+
+exports.enUS = enUS;

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/locale/en-US.mjs

@@ -0,0 +1,67 @@
+import { format } from 'date-fns';
+import { enUS as enUS$1 } from 'date-fns/locale';
+
+/** English (United States) locale extended with DayPicker-specific translations. */
+const enUS = {
+    ...enUS$1,
+    labels: {
+        labelDayButton: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers.today)
+                label = `Today, ${label}`;
+            if (modifiers.selected)
+                label = `${label}, selected`;
+            return label;
+        },
+        labelMonthDropdown: "Choose the Month",
+        labelNext: "Go to the Next Month",
+        labelPrevious: "Go to the Previous Month",
+        labelWeekNumber: (weekNumber) => `Week ${weekNumber}`,
+        labelYearDropdown: "Choose the Year",
+        labelGrid: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            return formatDate(date, "LLLL yyyy");
+        },
+        labelGridcell: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers?.today) {
+                label = `Today, ${label}`;
+            }
+            return label;
+        },
+        labelNav: "Navigation bar",
+        labelWeekNumberHeader: "Week Number",
+        labelWeekday: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            return formatDate(date, "cccc");
+        },
+    },
+};
+
+export { enUS };

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/selection/useMulti.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+const useControlledValue = require('../helpers/useControlledValue.cjs');
+
+/**
+ * Hook to manage multiple-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected dates, a function to select dates,
+ *   and a function to check if a date is selected.
+ */
+function useMulti(props, dateLib) {
+    const { selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue.useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const { isSameDay } = dateLib;
+    const isSelected = (date) => {
+        return selected?.some((d) => isSameDay(d, date)) ?? false;
+    };
+    const { min, max } = props;
+    const select = (triggerDate, modifiers, e) => {
+        let newDates = [...(selected ?? [])];
+        if (isSelected(triggerDate)) {
+            if (selected?.length === min) {
+                // Min value reached, do nothing
+                return;
+            }
+            if (required && selected?.length === 1) {
+                // Required value already selected do nothing
+                return;
+            }
+            newDates = selected?.filter((d) => !isSameDay(d, triggerDate));
+        }
+        else {
+            if (selected?.length === max) {
+                // Max value reached, reset the selection to date
+                newDates = [triggerDate];
+            }
+            else {
+                // Add the date to the selection
+                newDates = [...newDates, triggerDate];
+            }
+        }
+        if (!onSelect) {
+            setSelected(newDates);
+        }
+        onSelect?.(newDates, triggerDate, modifiers, e);
+        return newDates;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+exports.useMulti = useMulti;

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/selection/useMulti.mjs

@@ -0,0 +1,57 @@
+import { useControlledValue } from '../helpers/useControlledValue.mjs';
+
+/**
+ * Hook to manage multiple-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected dates, a function to select dates,
+ *   and a function to check if a date is selected.
+ */
+function useMulti(props, dateLib) {
+    const { selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const { isSameDay } = dateLib;
+    const isSelected = (date) => {
+        return selected?.some((d) => isSameDay(d, date)) ?? false;
+    };
+    const { min, max } = props;
+    const select = (triggerDate, modifiers, e) => {
+        let newDates = [...(selected ?? [])];
+        if (isSelected(triggerDate)) {
+            if (selected?.length === min) {
+                // Min value reached, do nothing
+                return;
+            }
+            if (required && selected?.length === 1) {
+                // Required value already selected do nothing
+                return;
+            }
+            newDates = selected?.filter((d) => !isSameDay(d, triggerDate));
+        }
+        else {
+            if (selected?.length === max) {
+                // Max value reached, reset the selection to date
+                newDates = [triggerDate];
+            }
+            else {
+                // Add the date to the selection
+                newDates = [...newDates, triggerDate];
+            }
+        }
+        if (!onSelect) {
+            setSelected(newDates);
+        }
+        onSelect?.(newDates, triggerDate, modifiers, e);
+        return newDates;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+export { useMulti };

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/selection/useRange.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+const useControlledValue = require('../helpers/useControlledValue.cjs');
+const rangeIncludesDate = require('../utils/rangeIncludesDate.cjs');
+const addToRange = require('../utils/addToRange.cjs');
+const rangeContainsModifiers = require('../utils/rangeContainsModifiers.cjs');
+
+/**
+ * Hook to manage range selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected range, a function to select a
+ *   range, and a function to check if a date is within the range.
+ */
+function useRange(props, dateLib) {
+    const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue.useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const isSelected = (date) => selected && rangeIncludesDate.rangeIncludesDate(selected, date, false, dateLib);
+    const select = (triggerDate, modifiers, e) => {
+        const { min, max } = props;
+        const newRange = triggerDate
+            ? addToRange.addToRange(triggerDate, selected, min, max, required, dateLib)
+            : undefined;
+        if (excludeDisabled && disabled && newRange?.from && newRange.to) {
+            if (rangeContainsModifiers.rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
+                // if a disabled days is found, the range is reset
+                newRange.from = triggerDate;
+                newRange.to = undefined;
+            }
+        }
+        if (!onSelect) {
+            setSelected(newRange);
+        }
+        onSelect?.(newRange, triggerDate, modifiers, e);
+        return newRange;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+exports.useRange = useRange;

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/selection/useRange.mjs

@@ -0,0 +1,45 @@
+import { useControlledValue } from '../helpers/useControlledValue.mjs';
+import { rangeIncludesDate } from '../utils/rangeIncludesDate.mjs';
+import { addToRange } from '../utils/addToRange.mjs';
+import { rangeContainsModifiers } from '../utils/rangeContainsModifiers.mjs';
+
+/**
+ * Hook to manage range selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected range, a function to select a
+ *   range, and a function to check if a date is within the range.
+ */
+function useRange(props, dateLib) {
+    const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
+    const select = (triggerDate, modifiers, e) => {
+        const { min, max } = props;
+        const newRange = triggerDate
+            ? addToRange(triggerDate, selected, min, max, required, dateLib)
+            : undefined;
+        if (excludeDisabled && disabled && newRange?.from && newRange.to) {
+            if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
+                // if a disabled days is found, the range is reset
+                newRange.from = triggerDate;
+                newRange.to = undefined;
+            }
+        }
+        if (!onSelect) {
+            setSelected(newRange);
+        }
+        onSelect?.(newRange, triggerDate, modifiers, e);
+        return newRange;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+export { useRange };

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/selection/useSingle.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+const useControlledValue = require('../helpers/useControlledValue.cjs');
+
+/**
+ * Hook to manage single-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected date, a function to select a date,
+ *   and a function to check if a date is selected.
+ */
+function useSingle(props, dateLib) {
+    const { selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue.useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const { isSameDay } = dateLib;
+    const isSelected = (compareDate) => {
+        return selected ? isSameDay(selected, compareDate) : false;
+    };
+    const select = (triggerDate, modifiers, e) => {
+        let newDate = triggerDate;
+        if (!required && selected && selected && isSameDay(triggerDate, selected)) {
+            // If the date is the same, clear the selection.
+            newDate = undefined;
+        }
+        if (!onSelect) {
+            setSelected(newDate);
+        }
+        if (required) {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        else {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        return newDate;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+exports.useSingle = useSingle;

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/selection/useSingle.mjs

@@ -0,0 +1,44 @@
+import { useControlledValue } from '../helpers/useControlledValue.mjs';
+
+/**
+ * Hook to manage single-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected date, a function to select a date,
+ *   and a function to check if a date is selected.
+ */
+function useSingle(props, dateLib) {
+    const { selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const { isSameDay } = dateLib;
+    const isSelected = (compareDate) => {
+        return selected ? isSameDay(selected, compareDate) : false;
+    };
+    const select = (triggerDate, modifiers, e) => {
+        let newDate = triggerDate;
+        if (!required && selected && selected && isSameDay(triggerDate, selected)) {
+            // If the date is the same, clear the selection.
+            newDate = undefined;
+        }
+        if (!onSelect) {
+            setSelected(newDate);
+        }
+        if (required) {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        else {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        return newDate;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+export { useSingle };

package/dist/node_modules/.pnpm/react-day-picker@9.12.0_react@19.2.0/node_modules/react-day-picker/dist/esm/useAnimation.cjs

@@ -0,0 +1,176 @@
+'use strict';
+
+const React = require('react');
+const UI = require('./UI.cjs');
+
+const asHtmlElement = (element) => {
+    if (element instanceof HTMLElement)
+        return element;
+    return null;
+};
+const queryMonthEls = (element) => [
+    ...(element.querySelectorAll("[data-animated-month]") ?? []),
+];
+const queryMonthEl = (element) => asHtmlElement(element.querySelector("[data-animated-month]"));
+const queryCaptionEl = (element) => asHtmlElement(element.querySelector("[data-animated-caption]"));
+const queryWeeksEl = (element) => asHtmlElement(element.querySelector("[data-animated-weeks]"));
+const queryNavEl = (element) => asHtmlElement(element.querySelector("[data-animated-nav]"));
+const queryWeekdaysEl = (element) => asHtmlElement(element.querySelector("[data-animated-weekdays]"));
+/**
+ * Handles animations for transitioning between months in the DayPicker
+ * component.
+ *
+ * @private
+ * @param rootElRef - A reference to the root element of the DayPicker
+ *   component.
+ * @param enabled - Whether animations are enabled.
+ * @param options - Configuration options for the animation, including class
+ *   names, months, focused day, and the date utility library.
+ */
+function useAnimation(rootElRef, enabled, { classNames, months, focused, dateLib, }) {
+    const previousRootElSnapshotRef = React.useRef(null);
+    const previousMonthsRef = React.useRef(months);
+    const animatingRef = React.useRef(false);
+    React.useLayoutEffect(() => {
+        // get previous months before updating the previous months ref
+        const previousMonths = previousMonthsRef.current;
+        // update previous months ref for next effect trigger
+        previousMonthsRef.current = months;
+        if (!enabled ||
+            !rootElRef.current ||
+            // safety check because the ref can be set to anything by consumers
+            !(rootElRef.current instanceof HTMLElement) ||
+            // validation required for the animation to work as expected
+            months.length === 0 ||
+            previousMonths.length === 0 ||
+            months.length !== previousMonths.length) {
+            return;
+        }
+        const isSameMonth = dateLib.isSameMonth(months[0].date, previousMonths[0].date);
+        const isAfterPreviousMonth = dateLib.isAfter(months[0].date, previousMonths[0].date);
+        const captionAnimationClass = isAfterPreviousMonth
+            ? classNames[UI.Animation.caption_after_enter]
+            : classNames[UI.Animation.caption_before_enter];
+        const weeksAnimationClass = isAfterPreviousMonth
+            ? classNames[UI.Animation.weeks_after_enter]
+            : classNames[UI.Animation.weeks_before_enter];
+        // get previous root element snapshot before updating the snapshot ref
+        const previousRootElSnapshot = previousRootElSnapshotRef.current;
+        // update snapshot for next effect trigger
+        const rootElSnapshot = rootElRef.current.cloneNode(true);
+        if (rootElSnapshot instanceof HTMLElement) {
+            // if this effect is triggered while animating, we need to clean up the new root snapshot
+            // to put it in the same state as when not animating, to correctly animate the next month change
+            const currentMonthElsSnapshot = queryMonthEls(rootElSnapshot);
+            currentMonthElsSnapshot.forEach((currentMonthElSnapshot) => {
+                if (!(currentMonthElSnapshot instanceof HTMLElement))
+                    return;
+                // remove the old month snapshots from the new root snapshot
+                const previousMonthElSnapshot = queryMonthEl(currentMonthElSnapshot);
+                if (previousMonthElSnapshot &&
+                    currentMonthElSnapshot.contains(previousMonthElSnapshot)) {
+                    currentMonthElSnapshot.removeChild(previousMonthElSnapshot);
+                }
+                // remove animation classes from the new month snapshots
+                const captionEl = queryCaptionEl(currentMonthElSnapshot);
+                if (captionEl) {
+                    captionEl.classList.remove(captionAnimationClass);
+                }
+                const weeksEl = queryWeeksEl(currentMonthElSnapshot);
+                if (weeksEl) {
+                    weeksEl.classList.remove(weeksAnimationClass);
+                }
+            });
+            previousRootElSnapshotRef.current = rootElSnapshot;
+        }
+        else {
+            previousRootElSnapshotRef.current = null;
+        }
+        if (animatingRef.current ||
+            isSameMonth ||
+            // skip animation if a day is focused because it can cause issues to the animation and is better for a11y
+            focused) {
+            return;
+        }
+        const previousMonthEls = previousRootElSnapshot instanceof HTMLElement
+            ? queryMonthEls(previousRootElSnapshot)
+            : [];
+        const currentMonthEls = queryMonthEls(rootElRef.current);
+        if (currentMonthEls?.every((el) => el instanceof HTMLElement) &&
+            previousMonthEls &&
+            previousMonthEls.every((el) => el instanceof HTMLElement)) {
+            animatingRef.current = true;
+            // set isolation to isolate to isolate the stacking context during animation
+            rootElRef.current.style.isolation = "isolate";
+            // set z-index to 1 to ensure the nav is clickable over the other elements being animated
+            const navEl = queryNavEl(rootElRef.current);
+            if (navEl) {
+                navEl.style.zIndex = "1";
+            }
+            currentMonthEls.forEach((currentMonthEl, index) => {
+                const previousMonthEl = previousMonthEls[index];
+                if (!previousMonthEl) {
+                    return;
+                }
+                // animate new displayed month
+                currentMonthEl.style.position = "relative";
+                currentMonthEl.style.overflow = "hidden";
+                const captionEl = queryCaptionEl(currentMonthEl);
+                if (captionEl) {
+                    captionEl.classList.add(captionAnimationClass);
+                }
+                const weeksEl = queryWeeksEl(currentMonthEl);
+                if (weeksEl) {
+                    weeksEl.classList.add(weeksAnimationClass);
+                }
+                // animate new displayed month end
+                const cleanUp = () => {
+                    animatingRef.current = false;
+                    if (rootElRef.current) {
+                        rootElRef.current.style.isolation = "";
+                    }
+                    if (navEl) {
+                        navEl.style.zIndex = "";
+                    }
+                    if (captionEl) {
+                        captionEl.classList.remove(captionAnimationClass);
+                    }
+                    if (weeksEl) {
+                        weeksEl.classList.remove(weeksAnimationClass);
+                    }
+                    currentMonthEl.style.position = "";
+                    currentMonthEl.style.overflow = "";
+                    if (currentMonthEl.contains(previousMonthEl)) {
+                        currentMonthEl.removeChild(previousMonthEl);
+                    }
+                };
+                // animate old displayed month
+                previousMonthEl.style.pointerEvents = "none";
+                previousMonthEl.style.position = "absolute";
+                previousMonthEl.style.overflow = "hidden";
+                previousMonthEl.setAttribute("aria-hidden", "true");
+                // hide the weekdays container of the old month and only the new one
+                const previousWeekdaysEl = queryWeekdaysEl(previousMonthEl);
+                if (previousWeekdaysEl) {
+                    previousWeekdaysEl.style.opacity = "0";
+                }
+                const previousCaptionEl = queryCaptionEl(previousMonthEl);
+                if (previousCaptionEl) {
+                    previousCaptionEl.classList.add(isAfterPreviousMonth
+                        ? classNames[UI.Animation.caption_before_exit]
+                        : classNames[UI.Animation.caption_after_exit]);
+                    previousCaptionEl.addEventListener("animationend", cleanUp);
+                }
+                const previousWeeksEl = queryWeeksEl(previousMonthEl);
+                if (previousWeeksEl) {
+                    previousWeeksEl.classList.add(isAfterPreviousMonth
+                        ? classNames[UI.Animation.weeks_before_exit]
+                        : classNames[UI.Animation.weeks_after_exit]);
+                }
+                currentMonthEl.insertBefore(previousMonthEl, currentMonthEl.firstChild);
+            });
+        }
+    });
+}
+
+exports.useAnimation = useAnimation;