infinity-ui-elements 1.8.8 → 1.8.9

package/dist/index.esm.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import { Children, cloneElement, useMemo, forwardRef, useState, useCallback, useImperativeHandle } from 'react';
 import { cva } from 'class-variance-authority';
 import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
-import { clsx } from 'clsx';
+import clsx$1, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ExternalLink, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ExternalLink, Calendar as Calendar$1, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { flexRender } from '@tanstack/react-table';
 
@@ -1688,234 +1689,2700 @@ const Counter = React.forwardRef(({ value, max, size = "medium", color = "neutra
 });
 Counter.displayName = "Counter";
 
-const dividerVariants = cva("", {
+const copyProperty = (to, from, property, ignoreNonConfigurable) => {
+	// `Function#length` should reflect the parameters of `to` not `from` since we keep its body.
+	// `Function#prototype` is non-writable and non-configurable so can never be modified.
+	if (property === 'length' || property === 'prototype') {
+		return;
+	}
+
+	// `Function#arguments` and `Function#caller` should not be copied. They were reported to be present in `Reflect.ownKeys` for some devices in React Native (#41), so we explicitly ignore them here.
+	if (property === 'arguments' || property === 'caller') {
+		return;
+	}
+
+	const toDescriptor = Object.getOwnPropertyDescriptor(to, property);
+	const fromDescriptor = Object.getOwnPropertyDescriptor(from, property);
+
+	if (!canCopyProperty(toDescriptor, fromDescriptor) && ignoreNonConfigurable) {
+		return;
+	}
+
+	Object.defineProperty(to, property, fromDescriptor);
+};
+
+// `Object.defineProperty()` throws if the property exists, is not configurable and either:
+// - one its descriptors is changed
+// - it is non-writable and its value is changed
+const canCopyProperty = function (toDescriptor, fromDescriptor) {
+	return toDescriptor === undefined || toDescriptor.configurable || (
+		toDescriptor.writable === fromDescriptor.writable
+		&& toDescriptor.enumerable === fromDescriptor.enumerable
+		&& toDescriptor.configurable === fromDescriptor.configurable
+		&& (toDescriptor.writable || toDescriptor.value === fromDescriptor.value)
+	);
+};
+
+const changePrototype = (to, from) => {
+	const fromPrototype = Object.getPrototypeOf(from);
+	if (fromPrototype === Object.getPrototypeOf(to)) {
+		return;
+	}
+
+	Object.setPrototypeOf(to, fromPrototype);
+};
+
+const wrappedToString = (withName, fromBody) => `/* Wrapped ${withName}*/\n${fromBody}`;
+
+const toStringDescriptor = Object.getOwnPropertyDescriptor(Function.prototype, 'toString');
+const toStringName = Object.getOwnPropertyDescriptor(Function.prototype.toString, 'name');
+
+// We call `from.toString()` early (not lazily) to ensure `from` can be garbage collected.
+// We use `bind()` instead of a closure for the same reason.
+// Calling `from.toString()` early also allows caching it in case `to.toString()` is called several times.
+const changeToString = (to, from, name) => {
+	const withName = name === '' ? '' : `with ${name.trim()}() `;
+	const newToString = wrappedToString.bind(null, withName, from.toString());
+	// Ensure `to.toString.toString` is non-enumerable and has the same `same`
+	Object.defineProperty(newToString, 'name', toStringName);
+	const {writable, enumerable, configurable} = toStringDescriptor; // We destructue to avoid a potential `get` descriptor.
+	Object.defineProperty(to, 'toString', {value: newToString, writable, enumerable, configurable});
+};
+
+function mimicFunction(to, from, {ignoreNonConfigurable = false} = {}) {
+	const {name} = to;
+
+	for (const property of Reflect.ownKeys(from)) {
+		copyProperty(to, from, property, ignoreNonConfigurable);
+	}
+
+	changePrototype(to, from);
+	changeToString(to, from, name);
+
+	return to;
+}
+
+const maxTimeoutValue = 2_147_483_647;
+const cacheStore = new WeakMap();
+const cacheTimerStore = new WeakMap();
+const cacheKeyStore = new WeakMap();
+function getValidCacheItem(cache, key) {
+    const item = cache.get(key);
+    if (!item) {
+        return undefined;
+    }
+    if (item.maxAge <= Date.now()) {
+        cache.delete(key);
+        return undefined;
+    }
+    return item;
+}
+/**
+[Memoize](https://en.wikipedia.org/wiki/Memoization) functions - An optimization used to speed up consecutive function calls by caching the result of calls with identical input.
+
+@param function_ - The function to be memoized.
+
+@example
+```
+import memoize from 'memoize';
+
+let index = 0;
+const counter = () => ++index;
+const memoized = memoize(counter);
+
+memoized('foo');
+//=> 1
+
+// Cached as it's the same argument
+memoized('foo');
+//=> 1
+
+// Not cached anymore as the arguments changed
+memoized('bar');
+//=> 2
+
+memoized('bar');
+//=> 2
+```
+*/
+function memoize(function_, { cacheKey, cache = new Map(), maxAge, } = {}) {
+    if (maxAge === 0) {
+        return function_;
+    }
+    if (typeof maxAge === 'number' && Number.isFinite(maxAge)) {
+        if (maxAge > maxTimeoutValue) {
+            throw new TypeError(`The \`maxAge\` option cannot exceed ${maxTimeoutValue}.`);
+        }
+        if (maxAge < 0) {
+            throw new TypeError('The `maxAge` option should not be a negative number.');
+        }
+    }
+    const memoized = function (...arguments_) {
+        const key = cacheKey ? cacheKey(arguments_) : arguments_[0];
+        const cacheItem = getValidCacheItem(cache, key);
+        if (cacheItem) {
+            return cacheItem.data;
+        }
+        const result = function_.apply(this, arguments_);
+        const computedMaxAge = typeof maxAge === 'function' ? maxAge(...arguments_) : maxAge;
+        if (computedMaxAge !== undefined && computedMaxAge !== Number.POSITIVE_INFINITY) {
+            if (!Number.isFinite(computedMaxAge)) {
+                throw new TypeError('The `maxAge` function must return a finite number, `0`, or `Infinity`.');
+            }
+            if (computedMaxAge <= 0) {
+                return result; // Do not cache
+            }
+            if (computedMaxAge > maxTimeoutValue) {
+                throw new TypeError(`The \`maxAge\` function result cannot exceed ${maxTimeoutValue}.`);
+            }
+        }
+        cache.set(key, {
+            data: result,
+            maxAge: (computedMaxAge === undefined || computedMaxAge === Number.POSITIVE_INFINITY)
+                ? Number.POSITIVE_INFINITY
+                : Date.now() + computedMaxAge,
+        });
+        if (computedMaxAge !== undefined && computedMaxAge !== Number.POSITIVE_INFINITY) {
+            const timer = setTimeout(() => {
+                cache.delete(key);
+                cacheTimerStore.get(memoized)?.delete(timer);
+            }, computedMaxAge);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            timer.unref?.();
+            const timers = cacheTimerStore.get(memoized) ?? new Set();
+            timers.add(timer);
+            cacheTimerStore.set(memoized, timers);
+        }
+        return result;
+    };
+    mimicFunction(memoized, function_, {
+        ignoreNonConfigurable: true,
+    });
+    cacheStore.set(memoized, cache);
+    cacheKeyStore.set(memoized, (cacheKey ?? ((arguments_) => arguments_[0])));
+    return memoized;
+}
+
+function isString(el) {
+    return typeof el === 'string';
+}
+function isUnique(el, index, arr) {
+    return arr.indexOf(el) === index;
+}
+function isAllLowerCase(el) {
+    return el.toLowerCase() === el;
+}
+function fixCommas(el) {
+    return el.indexOf(',') === -1 ? el : el.split(',');
+}
+function normalizeLocale(locale) {
+    if (!locale) {
+        return locale;
+    }
+    if (locale === 'C' || locale === 'posix' || locale === 'POSIX') {
+        return 'en-US';
+    }
+    // If there's a dot (.) in the locale, it's likely in the format of "en-US.UTF-8", so we only take the first part
+    if (locale.indexOf('.') !== -1) {
+        var _a = locale.split('.')[0], actualLocale = _a === void 0 ? '' : _a;
+        return normalizeLocale(actualLocale);
+    }
+    // If there's an at sign (@) in the locale, it's likely in the format of "en-US@posix", so we only take the first part
+    if (locale.indexOf('@') !== -1) {
+        var _b = locale.split('@')[0], actualLocale = _b === void 0 ? '' : _b;
+        return normalizeLocale(actualLocale);
+    }
+    // If there's a dash (-) in the locale and it's not all lower case, it's already in the format of "en-US", so we return it
+    if (locale.indexOf('-') === -1 || !isAllLowerCase(locale)) {
+        return locale;
+    }
+    var _c = locale.split('-'), splitEl1 = _c[0], _d = _c[1], splitEl2 = _d === void 0 ? '' : _d;
+    return "".concat(splitEl1, "-").concat(splitEl2.toUpperCase());
+}
+function getUserLocalesInternal(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.useFallbackLocale, useFallbackLocale = _c === void 0 ? true : _c, _d = _b.fallbackLocale, fallbackLocale = _d === void 0 ? 'en-US' : _d;
+    var languageList = [];
+    if (typeof navigator !== 'undefined') {
+        var rawLanguages = navigator.languages || [];
+        var languages = [];
+        for (var _i = 0, rawLanguages_1 = rawLanguages; _i < rawLanguages_1.length; _i++) {
+            var rawLanguagesItem = rawLanguages_1[_i];
+            languages = languages.concat(fixCommas(rawLanguagesItem));
+        }
+        var rawLanguage = navigator.language;
+        var language = rawLanguage ? fixCommas(rawLanguage) : rawLanguage;
+        languageList = languageList.concat(languages, language);
+    }
+    if (useFallbackLocale) {
+        languageList.push(fallbackLocale);
+    }
+    return languageList.filter(isString).map(normalizeLocale).filter(isUnique);
+}
+var getUserLocales = memoize(getUserLocalesInternal, { cacheKey: JSON.stringify });
+function getUserLocaleInternal(options) {
+    return getUserLocales(options)[0] || null;
+}
+var getUserLocale = memoize(getUserLocaleInternal, { cacheKey: JSON.stringify });
+
+/**
+ * Utils
+ */
+function makeGetEdgeOfNeighbor(getPeriod, getEdgeOfPeriod, defaultOffset) {
+    return function makeGetEdgeOfNeighborInternal(date, offset = defaultOffset) {
+        const previousPeriod = getPeriod(date) + offset;
+        return getEdgeOfPeriod(previousPeriod);
+    };
+}
+function makeGetEnd(getBeginOfNextPeriod) {
+    return function makeGetEndInternal(date) {
+        return new Date(getBeginOfNextPeriod(date).getTime() - 1);
+    };
+}
+function makeGetRange(getStart, getEnd) {
+    return function makeGetRangeInternal(date) {
+        return [getStart(date), getEnd(date)];
+    };
+}
+/**
+ * Simple getters - getting a property of a given point in time
+ */
+/**
+ * Gets year from a given date.
+ *
+ * @param {DateLike} date Date to get year from
+ * @returns {number} Year
+ */
+function getYear(date) {
+    if (date instanceof Date) {
+        return date.getFullYear();
+    }
+    if (typeof date === 'number') {
+        return date;
+    }
+    const year = Number.parseInt(date, 10);
+    if (typeof date === 'string' && !Number.isNaN(year)) {
+        return year;
+    }
+    throw new Error(`Failed to get year from date: ${date}.`);
+}
+/**
+ * Gets month from a given date.
+ *
+ * @param {Date} date Date to get month from
+ * @returns {number} Month
+ */
+function getMonth(date) {
+    if (date instanceof Date) {
+        return date.getMonth();
+    }
+    throw new Error(`Failed to get month from date: ${date}.`);
+}
+/**
+ * Gets day of the month from a given date.
+ *
+ * @param {Date} date Date to get day of the month from
+ * @returns {number} Day of the month
+ */
+function getDate(date) {
+    if (date instanceof Date) {
+        return date.getDate();
+    }
+    throw new Error(`Failed to get year from date: ${date}.`);
+}
+/**
+ * Century
+ */
+/**
+ * Gets century start date from a given date.
+ *
+ * @param {DateLike} date Date to get century start from
+ * @returns {Date} Century start date
+ */
+function getCenturyStart(date) {
+    const year = getYear(date);
+    const centuryStartYear = year + ((-year + 1) % 100);
+    const centuryStartDate = new Date();
+    centuryStartDate.setFullYear(centuryStartYear, 0, 1);
+    centuryStartDate.setHours(0, 0, 0, 0);
+    return centuryStartDate;
+}
+/**
+ * Gets previous century start date from a given date.
+ *
+ * @param {DateLike} date Date to get previous century start from
+ * @param {number} [offset=-100] Offset in years to calculate previous century start from
+ * @returns {Date} Previous century start date
+ */
+const getPreviousCenturyStart = makeGetEdgeOfNeighbor(getYear, getCenturyStart, -100);
+/**
+ * Gets next century start date from a given date.
+ *
+ * @param {DateLike} date Date to get next century start from
+ * @param {number} [offset=100] Offset in years to calculate next century start from
+ * @returns {Date} Next century start date
+ */
+const getNextCenturyStart = makeGetEdgeOfNeighbor(getYear, getCenturyStart, 100);
+/**
+ * Gets century end date from a given date.
+ *
+ * @param {DateLike} date Date to get century end from
+ * @returns {Date} Century end date
+ */
+const getCenturyEnd = makeGetEnd(getNextCenturyStart);
+/**
+ * Gets previous century end date from a given date.
+ *
+ * @param {DateLike} date Date to get previous century end from
+ * @param {number} [offset=-100] Offset in years to calculate previous century end from
+ * @returns {Date} Previous century end date
+ */
+const getPreviousCenturyEnd = makeGetEdgeOfNeighbor(getYear, getCenturyEnd, -100);
+/**
+ * Gets century start and end dates from a given date.
+ *
+ * @param {DateLike} date Date to get century start and end from
+ * @returns {[Date, Date]} Century start and end dates
+ */
+const getCenturyRange = makeGetRange(getCenturyStart, getCenturyEnd);
+/**
+ * Decade
+ */
+/**
+ * Gets decade start date from a given date.
+ *
+ * @param {DateLike} date Date to get decade start from
+ * @returns {Date} Decade start date
+ */
+function getDecadeStart(date) {
+    const year = getYear(date);
+    const decadeStartYear = year + ((-year + 1) % 10);
+    const decadeStartDate = new Date();
+    decadeStartDate.setFullYear(decadeStartYear, 0, 1);
+    decadeStartDate.setHours(0, 0, 0, 0);
+    return decadeStartDate;
+}
+/**
+ * Gets previous decade start date from a given date.
+ *
+ * @param {DateLike} date Date to get previous decade start from
+ * @param {number} [offset=-10] Offset in years to calculate previous decade start from
+ * @returns {Date} Previous decade start date
+ */
+const getPreviousDecadeStart = makeGetEdgeOfNeighbor(getYear, getDecadeStart, -10);
+/**
+ * Gets next decade start date from a given date.
+ *
+ * @param {DateLike} date Date to get next decade start from
+ * @param {number} [offset=10] Offset in years to calculate next decade start from
+ * @returns {Date} Next decade start date
+ */
+const getNextDecadeStart = makeGetEdgeOfNeighbor(getYear, getDecadeStart, 10);
+/**
+ * Gets decade end date from a given date.
+ *
+ * @param {DateLike} date Date to get decade end from
+ * @returns {Date} Decade end date
+ */
+const getDecadeEnd = makeGetEnd(getNextDecadeStart);
+/**
+ * Gets previous decade end date from a given date.
+ *
+ * @param {DateLike} date Date to get previous decade end from
+ * @param {number} [offset=-10] Offset in years to calculate previous decade end from
+ * @returns {Date} Previous decade end date
+ */
+const getPreviousDecadeEnd = makeGetEdgeOfNeighbor(getYear, getDecadeEnd, -10);
+/**
+ * Gets decade start and end dates from a given date.
+ *
+ * @param {DateLike} date Date to get decade start and end from
+ * @returns {[Date, Date]} Decade start and end dates
+ */
+const getDecadeRange = makeGetRange(getDecadeStart, getDecadeEnd);
+/**
+ * Year
+ */
+/**
+ * Gets year start date from a given date.
+ *
+ * @param {DateLike} date Date to get year start from
+ * @returns {Date} Year start date
+ */
+function getYearStart(date) {
+    const year = getYear(date);
+    const yearStartDate = new Date();
+    yearStartDate.setFullYear(year, 0, 1);
+    yearStartDate.setHours(0, 0, 0, 0);
+    return yearStartDate;
+}
+/**
+ * Gets previous year start date from a given date.
+ *
+ * @param {DateLike} date Date to get previous year start from
+ * @param {number} [offset=-1] Offset in years to calculate previous year start from
+ * @returns {Date} Previous year start date
+ */
+const getPreviousYearStart = makeGetEdgeOfNeighbor(getYear, getYearStart, -1);
+/**
+ * Gets next year start date from a given date.
+ *
+ * @param {DateLike} date Date to get next year start from
+ * @param {number} [offset=1] Offset in years to calculate next year start from
+ * @returns {Date} Next year start date
+ */
+const getNextYearStart = makeGetEdgeOfNeighbor(getYear, getYearStart, 1);
+/**
+ * Gets year end date from a given date.
+ *
+ * @param {DateLike} date Date to get year end from
+ * @returns {Date} Year end date
+ */
+const getYearEnd = makeGetEnd(getNextYearStart);
+/**
+ * Gets previous year end date from a given date.
+ *
+ * @param {DateLike} date Date to get previous year end from
+ * @param {number} [offset=-1] Offset in years to calculate previous year end from
+ * @returns {Date} Previous year end date
+ */
+const getPreviousYearEnd = makeGetEdgeOfNeighbor(getYear, getYearEnd, -1);
+/**
+ * Gets year start and end dates from a given date.
+ *
+ * @param {DateLike} date Date to get year start and end from
+ * @returns {[Date, Date]} Year start and end dates
+ */
+const getYearRange = makeGetRange(getYearStart, getYearEnd);
+/**
+ * Month
+ */
+function makeGetEdgeOfNeighborMonth(getEdgeOfPeriod, defaultOffset) {
+    return function makeGetEdgeOfNeighborMonthInternal(date, offset = defaultOffset) {
+        const year = getYear(date);
+        const month = getMonth(date) + offset;
+        const previousPeriod = new Date();
+        previousPeriod.setFullYear(year, month, 1);
+        previousPeriod.setHours(0, 0, 0, 0);
+        return getEdgeOfPeriod(previousPeriod);
+    };
+}
+/**
+ * Gets month start date from a given date.
+ *
+ * @param {DateLike} date Date to get month start from
+ * @returns {Date} Month start date
+ */
+function getMonthStart(date) {
+    const year = getYear(date);
+    const month = getMonth(date);
+    const monthStartDate = new Date();
+    monthStartDate.setFullYear(year, month, 1);
+    monthStartDate.setHours(0, 0, 0, 0);
+    return monthStartDate;
+}
+/**
+ * Gets previous month start date from a given date.
+ *
+ * @param {Date} date Date to get previous month start from
+ * @param {number} [offset=-1] Offset in months to calculate previous month start from
+ * @returns {Date} Previous month start date
+ */
+const getPreviousMonthStart = makeGetEdgeOfNeighborMonth(getMonthStart, -1);
+/**
+ * Gets next month start date from a given date.
+ *
+ * @param {Date} date Date to get next month start from
+ * @param {number} [offset=1] Offset in months to calculate next month start from
+ * @returns {Date} Next month start date
+ */
+const getNextMonthStart = makeGetEdgeOfNeighborMonth(getMonthStart, 1);
+/**
+ * Gets month end date from a given date.
+ *
+ * @param {Date} date Date to get month end from
+ * @returns {Date} Month end date
+ */
+const getMonthEnd = makeGetEnd(getNextMonthStart);
+/**
+ * Gets previous month end date from a given date.
+ *
+ * @param {Date} date Date to get previous month end from
+ * @param {number} [offset=-1] Offset in months to calculate previous month end from
+ * @returns {Date} Previous month end date
+ */
+const getPreviousMonthEnd = makeGetEdgeOfNeighborMonth(getMonthEnd, -1);
+/**
+ * Gets month start and end dates from a given date.
+ *
+ * @param {Date} date Date to get month start and end from
+ * @returns {[Date, Date]} Month start and end dates
+ */
+const getMonthRange = makeGetRange(getMonthStart, getMonthEnd);
+/**
+ * Day
+ */
+function makeGetEdgeOfNeighborDay(getEdgeOfPeriod, defaultOffset) {
+    return function makeGetEdgeOfNeighborDayInternal(date, offset = defaultOffset) {
+        const year = getYear(date);
+        const month = getMonth(date);
+        const day = getDate(date) + offset;
+        const previousPeriod = new Date();
+        previousPeriod.setFullYear(year, month, day);
+        previousPeriod.setHours(0, 0, 0, 0);
+        return getEdgeOfPeriod(previousPeriod);
+    };
+}
+/**
+ * Gets day start date from a given date.
+ *
+ * @param {DateLike} date Date to get day start from
+ * @returns {Date} Day start date
+ */
+function getDayStart(date) {
+    const year = getYear(date);
+    const month = getMonth(date);
+    const day = getDate(date);
+    const dayStartDate = new Date();
+    dayStartDate.setFullYear(year, month, day);
+    dayStartDate.setHours(0, 0, 0, 0);
+    return dayStartDate;
+}
+/**
+ * Gets next day start date from a given date.
+ *
+ * @param {Date} date Date to get next day start from
+ * @param {number} [offset=1] Offset in days to calculate next day start from
+ * @returns {Date} Next day start date
+ */
+const getNextDayStart = makeGetEdgeOfNeighborDay(getDayStart, 1);
+/**
+ * Gets day end date from a given date.
+ *
+ * @param {Date} date Date to get day end from
+ * @returns {Date} Day end date
+ */
+const getDayEnd = makeGetEnd(getNextDayStart);
+/**
+ * Gets day start and end dates from a given date.
+ *
+ * @param {DateLike} date Date to get day start and end from
+ * @returns {[Date, Date]} Day start and end dates
+ */
+const getDayRange = makeGetRange(getDayStart, getDayEnd);
+/**
+ * Other
+ */
+/**
+ * Returns a number of days in a month of a given date.
+ *
+ * @param {Date} date Date
+ * @returns {number} Number of days in a month
+ */
+function getDaysInMonth(date) {
+    return getDate(getMonthEnd(date));
+}
+
+var CALENDAR_TYPES = {
+    GREGORY: 'gregory',
+    HEBREW: 'hebrew',
+    ISLAMIC: 'islamic',
+    ISO_8601: 'iso8601',
+};
+var CALENDAR_TYPE_LOCALES = {
+    gregory: [
+        'en-CA',
+        'en-US',
+        'es-AR',
+        'es-BO',
+        'es-CL',
+        'es-CO',
+        'es-CR',
+        'es-DO',
+        'es-EC',
+        'es-GT',
+        'es-HN',
+        'es-MX',
+        'es-NI',
+        'es-PA',
+        'es-PE',
+        'es-PR',
+        'es-SV',
+        'es-VE',
+        'pt-BR',
+    ],
+    hebrew: ['he', 'he-IL'],
+    islamic: [
+        // ar-LB, ar-MA intentionally missing
+        'ar',
+        'ar-AE',
+        'ar-BH',
+        'ar-DZ',
+        'ar-EG',
+        'ar-IQ',
+        'ar-JO',
+        'ar-KW',
+        'ar-LY',
+        'ar-OM',
+        'ar-QA',
+        'ar-SA',
+        'ar-SD',
+        'ar-SY',
+        'ar-YE',
+        'dv',
+        'dv-MV',
+        'ps',
+        'ps-AR',
+    ],
+};
+var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+
+var formatterCache = new Map();
+function getFormatter(options) {
+    return function formatter(locale, date) {
+        var localeWithDefault = locale || getUserLocale();
+        if (!formatterCache.has(localeWithDefault)) {
+            formatterCache.set(localeWithDefault, new Map());
+        }
+        var formatterCacheLocale = formatterCache.get(localeWithDefault);
+        if (!formatterCacheLocale.has(options)) {
+            formatterCacheLocale.set(options, new Intl.DateTimeFormat(localeWithDefault || undefined, options).format);
+        }
+        return formatterCacheLocale.get(options)(date);
+    };
+}
+/**
+ * Changes the hour in a Date to ensure right date formatting even if DST is messed up.
+ * Workaround for bug in WebKit and Firefox with historical dates.
+ * For more details, see:
+ * https://bugs.chromium.org/p/chromium/issues/detail?id=750465
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1385643
+ *
+ * @param {Date} date Date.
+ * @returns {Date} Date with hour set to 12.
+ */
+function toSafeHour(date) {
+    var safeDate = new Date(date);
+    return new Date(safeDate.setHours(12));
+}
+function getSafeFormatter(options) {
+    return function (locale, date) { return getFormatter(options)(locale, toSafeHour(date)); };
+}
+var formatDayOptions = { day: 'numeric' };
+var formatLongDateOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+};
+var formatMonthOptions = { month: 'long' };
+var formatMonthYearOptions = {
+    month: 'long',
+    year: 'numeric',
+};
+var formatShortWeekdayOptions = { weekday: 'short' };
+var formatWeekdayOptions = { weekday: 'long' };
+var formatYearOptions = { year: 'numeric' };
+var formatDay = getSafeFormatter(formatDayOptions);
+var formatLongDate = getSafeFormatter(formatLongDateOptions);
+var formatMonth = getSafeFormatter(formatMonthOptions);
+var formatMonthYear = getSafeFormatter(formatMonthYearOptions);
+var formatShortWeekday = getSafeFormatter(formatShortWeekdayOptions);
+var formatWeekday = getSafeFormatter(formatWeekdayOptions);
+var formatYear = getSafeFormatter(formatYearOptions);
+
+var SUNDAY = WEEKDAYS[0];
+var FRIDAY = WEEKDAYS[5];
+var SATURDAY = WEEKDAYS[6];
+/* Simple getters - getting a property of a given point in time */
+/**
+ * Gets day of the week of a given date.
+ * @param {Date} date Date.
+ * @param {CalendarType} [calendarType="iso8601"] Calendar type.
+ * @returns {number} Day of the week.
+ */
+function getDayOfWeek(date, calendarType) {
+    if (calendarType === void 0) { calendarType = CALENDAR_TYPES.ISO_8601; }
+    var weekday = date.getDay();
+    switch (calendarType) {
+        case CALENDAR_TYPES.ISO_8601:
+            // Shifts days of the week so that Monday is 0, Sunday is 6
+            return (weekday + 6) % 7;
+        case CALENDAR_TYPES.ISLAMIC:
+            return (weekday + 1) % 7;
+        case CALENDAR_TYPES.HEBREW:
+        case CALENDAR_TYPES.GREGORY:
+            return weekday;
+        default:
+            throw new Error('Unsupported calendar type.');
+    }
+}
+/**
+ * Century
+ */
+/**
+ * Gets the year of the beginning of a century of a given date.
+ * @param {Date} date Date.
+ * @returns {number} Year of the beginning of a century.
+ */
+function getBeginOfCenturyYear(date) {
+    var beginOfCentury = getCenturyStart(date);
+    return getYear(beginOfCentury);
+}
+/**
+ * Decade
+ */
+/**
+ * Gets the year of the beginning of a decade of a given date.
+ * @param {Date} date Date.
+ * @returns {number} Year of the beginning of a decade.
+ */
+function getBeginOfDecadeYear(date) {
+    var beginOfDecade = getDecadeStart(date);
+    return getYear(beginOfDecade);
+}
+/**
+ * Week
+ */
+/**
+ * Returns the beginning of a given week.
+ *
+ * @param {Date} date Date.
+ * @param {CalendarType} [calendarType="iso8601"] Calendar type.
+ * @returns {Date} Beginning of a given week.
+ */
+function getBeginOfWeek(date, calendarType) {
+    if (calendarType === void 0) { calendarType = CALENDAR_TYPES.ISO_8601; }
+    var year = getYear(date);
+    var monthIndex = getMonth(date);
+    var day = date.getDate() - getDayOfWeek(date, calendarType);
+    return new Date(year, monthIndex, day);
+}
+/**
+ * Gets week number according to ISO 8601 or US standard.
+ * In ISO 8601, Arabic and Hebrew week 1 is the one with January 4.
+ * In US calendar week 1 is the one with January 1.
+ *
+ * @param {Date} date Date.
+ * @param {CalendarType} [calendarType="iso8601"] Calendar type.
+ * @returns {number} Week number.
+ */
+function getWeekNumber(date, calendarType) {
+    if (calendarType === void 0) { calendarType = CALENDAR_TYPES.ISO_8601; }
+    var calendarTypeForWeekNumber = calendarType === CALENDAR_TYPES.GREGORY ? CALENDAR_TYPES.GREGORY : CALENDAR_TYPES.ISO_8601;
+    var beginOfWeek = getBeginOfWeek(date, calendarType);
+    var year = getYear(date) + 1;
+    var dayInWeekOne;
+    var beginOfFirstWeek;
+    // Look for the first week one that does not come after a given date
+    do {
+        dayInWeekOne = new Date(year, 0, calendarTypeForWeekNumber === CALENDAR_TYPES.ISO_8601 ? 4 : 1);
+        beginOfFirstWeek = getBeginOfWeek(dayInWeekOne, calendarType);
+        year -= 1;
+    } while (date < beginOfFirstWeek);
+    return Math.round((beginOfWeek.getTime() - beginOfFirstWeek.getTime()) / (8.64e7 * 7)) + 1;
+}
+/**
+ * Others
+ */
+/**
+ * Returns the beginning of a given range.
+ *
+ * @param {RangeType} rangeType Range type (e.g. 'day')
+ * @param {Date} date Date.
+ * @returns {Date} Beginning of a given range.
+ */
+function getBegin(rangeType, date) {
+    switch (rangeType) {
+        case 'century':
+            return getCenturyStart(date);
+        case 'decade':
+            return getDecadeStart(date);
+        case 'year':
+            return getYearStart(date);
+        case 'month':
+            return getMonthStart(date);
+        case 'day':
+            return getDayStart(date);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+/**
+ * Returns the beginning of a previous given range.
+ *
+ * @param {RangeType} rangeType Range type (e.g. 'day')
+ * @param {Date} date Date.
+ * @returns {Date} Beginning of a previous given range.
+ */
+function getBeginPrevious(rangeType, date) {
+    switch (rangeType) {
+        case 'century':
+            return getPreviousCenturyStart(date);
+        case 'decade':
+            return getPreviousDecadeStart(date);
+        case 'year':
+            return getPreviousYearStart(date);
+        case 'month':
+            return getPreviousMonthStart(date);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+/**
+ * Returns the beginning of a next given range.
+ *
+ * @param {RangeType} rangeType Range type (e.g. 'day')
+ * @param {Date} date Date.
+ * @returns {Date} Beginning of a next given range.
+ */
+function getBeginNext(rangeType, date) {
+    switch (rangeType) {
+        case 'century':
+            return getNextCenturyStart(date);
+        case 'decade':
+            return getNextDecadeStart(date);
+        case 'year':
+            return getNextYearStart(date);
+        case 'month':
+            return getNextMonthStart(date);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+function getBeginPrevious2(rangeType, date) {
+    switch (rangeType) {
+        case 'decade':
+            return getPreviousDecadeStart(date, -100);
+        case 'year':
+            return getPreviousYearStart(date, -10);
+        case 'month':
+            return getPreviousMonthStart(date, -12);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+function getBeginNext2(rangeType, date) {
+    switch (rangeType) {
+        case 'decade':
+            return getNextDecadeStart(date, 100);
+        case 'year':
+            return getNextYearStart(date, 10);
+        case 'month':
+            return getNextMonthStart(date, 12);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+/**
+ * Returns the end of a given range.
+ *
+ * @param {RangeType} rangeType Range type (e.g. 'day')
+ * @param {Date} date Date.
+ * @returns {Date} End of a given range.
+ */
+function getEnd(rangeType, date) {
+    switch (rangeType) {
+        case 'century':
+            return getCenturyEnd(date);
+        case 'decade':
+            return getDecadeEnd(date);
+        case 'year':
+            return getYearEnd(date);
+        case 'month':
+            return getMonthEnd(date);
+        case 'day':
+            return getDayEnd(date);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+/**
+ * Returns the end of a previous given range.
+ *
+ * @param {RangeType} rangeType Range type (e.g. 'day')
+ * @param {Date} date Date.
+ * @returns {Date} End of a previous given range.
+ */
+function getEndPrevious(rangeType, date) {
+    switch (rangeType) {
+        case 'century':
+            return getPreviousCenturyEnd(date);
+        case 'decade':
+            return getPreviousDecadeEnd(date);
+        case 'year':
+            return getPreviousYearEnd(date);
+        case 'month':
+            return getPreviousMonthEnd(date);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+function getEndPrevious2(rangeType, date) {
+    switch (rangeType) {
+        case 'decade':
+            return getPreviousDecadeEnd(date, -100);
+        case 'year':
+            return getPreviousYearEnd(date, -10);
+        case 'month':
+            return getPreviousMonthEnd(date, -12);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+/**
+ * Returns an array with the beginning and the end of a given range.
+ *
+ * @param {RangeType} rangeType Range type (e.g. 'day')
+ * @param {Date} date Date.
+ * @returns {Date[]} Beginning and end of a given range.
+ */
+function getRange(rangeType, date) {
+    switch (rangeType) {
+        case 'century':
+            return getCenturyRange(date);
+        case 'decade':
+            return getDecadeRange(date);
+        case 'year':
+            return getYearRange(date);
+        case 'month':
+            return getMonthRange(date);
+        case 'day':
+            return getDayRange(date);
+        default:
+            throw new Error("Invalid rangeType: ".concat(rangeType));
+    }
+}
+/**
+ * Creates a range out of two values, ensuring they are in order and covering entire period ranges.
+ *
+ * @param {RangeType} rangeType Range type (e.g. 'day')
+ * @param {Date} date1 First date.
+ * @param {Date} date2 Second date.
+ * @returns {Date[]} Beginning and end of a given range.
+ */
+function getValueRange(rangeType, date1, date2) {
+    var rawNextValue = [date1, date2].sort(function (a, b) { return a.getTime() - b.getTime(); });
+    return [getBegin(rangeType, rawNextValue[0]), getEnd(rangeType, rawNextValue[1])];
+}
+function toYearLabel(locale, formatYear$1, dates) {
+    return dates.map(function (date) { return (formatYear$1 || formatYear)(locale, date); }).join(' – ');
+}
+/**
+ * @callback FormatYear
+ * @param {string} locale Locale.
+ * @param {Date} date Date.
+ * @returns {string} Formatted year.
+ */
+/**
+ * Returns a string labelling a century of a given date.
+ * For example, for 2017 it will return 2001-2100.
+ *
+ * @param {string} locale Locale.
+ * @param {FormatYear} formatYear Function to format a year.
+ * @param {Date|string|number} date Date or a year as a string or as a number.
+ * @returns {string} String labelling a century of a given date.
+ */
+function getCenturyLabel(locale, formatYear, date) {
+    return toYearLabel(locale, formatYear, getCenturyRange(date));
+}
+/**
+ * Returns a string labelling a decade of a given date.
+ * For example, for 2017 it will return 2011-2020.
+ *
+ * @param {string} locale Locale.
+ * @param {FormatYear} formatYear Function to format a year.
+ * @param {Date|string|number} date Date or a year as a string or as a number.
+ * @returns {string} String labelling a decade of a given date.
+ */
+function getDecadeLabel(locale, formatYear, date) {
+    return toYearLabel(locale, formatYear, getDecadeRange(date));
+}
+/**
+ * Returns a boolean determining whether a given date is the current day of the week.
+ *
+ * @param {Date} date Date.
+ * @returns {boolean} Whether a given date is the current day of the week.
+ */
+function isCurrentDayOfWeek(date) {
+    return date.getDay() === new Date().getDay();
+}
+/**
+ * Returns a boolean determining whether a given date is a weekend day.
+ *
+ * @param {Date} date Date.
+ * @param {CalendarType} [calendarType="iso8601"] Calendar type.
+ * @returns {boolean} Whether a given date is a weekend day.
+ */
+function isWeekend(date, calendarType) {
+    if (calendarType === void 0) { calendarType = CALENDAR_TYPES.ISO_8601; }
+    var weekday = date.getDay();
+    switch (calendarType) {
+        case CALENDAR_TYPES.ISLAMIC:
+        case CALENDAR_TYPES.HEBREW:
+            return weekday === FRIDAY || weekday === SATURDAY;
+        case CALENDAR_TYPES.ISO_8601:
+        case CALENDAR_TYPES.GREGORY:
+            return weekday === SATURDAY || weekday === SUNDAY;
+        default:
+            throw new Error('Unsupported calendar type.');
+    }
+}
+
+var className$6 = 'react-calendar__navigation';
+function Navigation(_a) {
+    var activeStartDate = _a.activeStartDate, drillUp = _a.drillUp, _b = _a.formatMonthYear, formatMonthYear$1 = _b === void 0 ? formatMonthYear : _b, _c = _a.formatYear, formatYear$1 = _c === void 0 ? formatYear : _c, locale = _a.locale, maxDate = _a.maxDate, minDate = _a.minDate, _d = _a.navigationAriaLabel, navigationAriaLabel = _d === void 0 ? '' : _d, navigationAriaLive = _a.navigationAriaLive, navigationLabel = _a.navigationLabel, _e = _a.next2AriaLabel, next2AriaLabel = _e === void 0 ? '' : _e, _f = _a.next2Label, next2Label = _f === void 0 ? '»' : _f, _g = _a.nextAriaLabel, nextAriaLabel = _g === void 0 ? '' : _g, _h = _a.nextLabel, nextLabel = _h === void 0 ? '›' : _h, _j = _a.prev2AriaLabel, prev2AriaLabel = _j === void 0 ? '' : _j, _k = _a.prev2Label, prev2Label = _k === void 0 ? '«' : _k, _l = _a.prevAriaLabel, prevAriaLabel = _l === void 0 ? '' : _l, _m = _a.prevLabel, prevLabel = _m === void 0 ? '‹' : _m, setActiveStartDate = _a.setActiveStartDate, showDoubleView = _a.showDoubleView, view = _a.view, views = _a.views;
+    var drillUpAvailable = views.indexOf(view) > 0;
+    var shouldShowPrevNext2Buttons = view !== 'century';
+    var previousActiveStartDate = getBeginPrevious(view, activeStartDate);
+    var previousActiveStartDate2 = shouldShowPrevNext2Buttons
+        ? getBeginPrevious2(view, activeStartDate)
+        : undefined;
+    var nextActiveStartDate = getBeginNext(view, activeStartDate);
+    var nextActiveStartDate2 = shouldShowPrevNext2Buttons
+        ? getBeginNext2(view, activeStartDate)
+        : undefined;
+    var prevButtonDisabled = (function () {
+        if (previousActiveStartDate.getFullYear() < 0) {
+            return true;
+        }
+        var previousActiveEndDate = getEndPrevious(view, activeStartDate);
+        return minDate && minDate >= previousActiveEndDate;
+    })();
+    var prev2ButtonDisabled = shouldShowPrevNext2Buttons &&
+        (function () {
+            if (previousActiveStartDate2.getFullYear() < 0) {
+                return true;
+            }
+            var previousActiveEndDate = getEndPrevious2(view, activeStartDate);
+            return minDate && minDate >= previousActiveEndDate;
+        })();
+    var nextButtonDisabled = maxDate && maxDate < nextActiveStartDate;
+    var next2ButtonDisabled = shouldShowPrevNext2Buttons && maxDate && maxDate < nextActiveStartDate2;
+    function onClickPrevious() {
+        setActiveStartDate(previousActiveStartDate, 'prev');
+    }
+    function onClickPrevious2() {
+        setActiveStartDate(previousActiveStartDate2, 'prev2');
+    }
+    function onClickNext() {
+        setActiveStartDate(nextActiveStartDate, 'next');
+    }
+    function onClickNext2() {
+        setActiveStartDate(nextActiveStartDate2, 'next2');
+    }
+    function renderLabel(date) {
+        var label = (function () {
+            switch (view) {
+                case 'century':
+                    return getCenturyLabel(locale, formatYear$1, date);
+                case 'decade':
+                    return getDecadeLabel(locale, formatYear$1, date);
+                case 'year':
+                    return formatYear$1(locale, date);
+                case 'month':
+                    return formatMonthYear$1(locale, date);
+                default:
+                    throw new Error("Invalid view: ".concat(view, "."));
+            }
+        })();
+        return navigationLabel
+            ? navigationLabel({
+                date: date,
+                label: label,
+                locale: locale || getUserLocale() || undefined,
+                view: view,
+            })
+            : label;
+    }
+    function renderButton() {
+        var labelClassName = "".concat(className$6, "__label");
+        return (jsxs("button", { "aria-label": navigationAriaLabel, "aria-live": navigationAriaLive, className: labelClassName, disabled: !drillUpAvailable, onClick: drillUp, style: { flexGrow: 1 }, type: "button", children: [jsx("span", { className: "".concat(labelClassName, "__labelText ").concat(labelClassName, "__labelText--from"), children: renderLabel(activeStartDate) }), showDoubleView ? (jsxs(Fragment, { children: [jsx("span", { className: "".concat(labelClassName, "__divider"), children: " \u2013 " }), jsx("span", { className: "".concat(labelClassName, "__labelText ").concat(labelClassName, "__labelText--to"), children: renderLabel(nextActiveStartDate) })] })) : null] }));
+    }
+    return (jsxs("div", { className: className$6, children: [prev2Label !== null && shouldShowPrevNext2Buttons ? (jsx("button", { "aria-label": prev2AriaLabel, className: "".concat(className$6, "__arrow ").concat(className$6, "__prev2-button"), disabled: prev2ButtonDisabled, onClick: onClickPrevious2, type: "button", children: prev2Label })) : null, prevLabel !== null && (jsx("button", { "aria-label": prevAriaLabel, className: "".concat(className$6, "__arrow ").concat(className$6, "__prev-button"), disabled: prevButtonDisabled, onClick: onClickPrevious, type: "button", children: prevLabel })), renderButton(), nextLabel !== null && (jsx("button", { "aria-label": nextAriaLabel, className: "".concat(className$6, "__arrow ").concat(className$6, "__next-button"), disabled: nextButtonDisabled, onClick: onClickNext, type: "button", children: nextLabel })), next2Label !== null && shouldShowPrevNext2Buttons ? (jsx("button", { "aria-label": next2AriaLabel, className: "".concat(className$6, "__arrow ").concat(className$6, "__next2-button"), disabled: next2ButtonDisabled, onClick: onClickNext2, type: "button", children: next2Label })) : null] }));
+}
+
+var __assign$e = (undefined && undefined.__assign) || function () {
+    __assign$e = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$e.apply(this, arguments);
+};
+var __rest$a = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function toPercent(num) {
+    return "".concat(num, "%");
+}
+function Flex(_a) {
+    var children = _a.children, className = _a.className, count = _a.count, direction = _a.direction, offset = _a.offset, style = _a.style, wrap = _a.wrap, otherProps = __rest$a(_a, ["children", "className", "count", "direction", "offset", "style", "wrap"]);
+    return (jsx("div", __assign$e({ className: className, style: __assign$e({ display: 'flex', flexDirection: direction, flexWrap: wrap ? 'wrap' : 'nowrap' }, style) }, otherProps, { children: Children.map(children, function (child, index) {
+            var marginInlineStart = offset && index === 0 ? toPercent((100 * offset) / count) : null;
+            return cloneElement(child, __assign$e(__assign$e({}, child.props), { style: {
+                    flexBasis: toPercent(100 / count),
+                    flexShrink: 0,
+                    flexGrow: 0,
+                    overflow: 'hidden',
+                    marginLeft: marginInlineStart,
+                    marginInlineStart: marginInlineStart,
+                    marginInlineEnd: 0,
+                } }));
+        }) })));
+}
+
+/**
+ * Returns a value no smaller than min and no larger than max.
+ *
+ * @param {Date} value Value to return.
+ * @param {Date} min Minimum return value.
+ * @param {Date} max Maximum return value.
+ * @returns {Date} Value between min and max.
+ */
+function between(value, min, max) {
+    if (min && min > value) {
+        return min;
+    }
+    if (max && max < value) {
+        return max;
+    }
+    return value;
+}
+function isValueWithinRange(value, range) {
+    return range[0] <= value && range[1] >= value;
+}
+function isRangeWithinRange(greaterRange, smallerRange) {
+    return greaterRange[0] <= smallerRange[0] && greaterRange[1] >= smallerRange[1];
+}
+function doRangesOverlap(range1, range2) {
+    return isValueWithinRange(range1[0], range2) || isValueWithinRange(range1[1], range2);
+}
+function getRangeClassNames(valueRange, dateRange, baseClassName) {
+    var isRange = doRangesOverlap(dateRange, valueRange);
+    var classes = [];
+    if (isRange) {
+        classes.push(baseClassName);
+        var isRangeStart = isValueWithinRange(valueRange[0], dateRange);
+        var isRangeEnd = isValueWithinRange(valueRange[1], dateRange);
+        if (isRangeStart) {
+            classes.push("".concat(baseClassName, "Start"));
+        }
+        if (isRangeEnd) {
+            classes.push("".concat(baseClassName, "End"));
+        }
+        if (isRangeStart && isRangeEnd) {
+            classes.push("".concat(baseClassName, "BothEnds"));
+        }
+    }
+    return classes;
+}
+function isCompleteValue(value) {
+    if (Array.isArray(value)) {
+        return value[0] !== null && value[1] !== null;
+    }
+    return value !== null;
+}
+function getTileClasses(args) {
+    if (!args) {
+        throw new Error('args is required');
+    }
+    var value = args.value, date = args.date, hover = args.hover;
+    var className = 'react-calendar__tile';
+    var classes = [className];
+    if (!date) {
+        return classes;
+    }
+    var now = new Date();
+    var dateRange = (function () {
+        if (Array.isArray(date)) {
+            return date;
+        }
+        var dateType = args.dateType;
+        if (!dateType) {
+            throw new Error('dateType is required when date is not an array of two dates');
+        }
+        return getRange(dateType, date);
+    })();
+    if (isValueWithinRange(now, dateRange)) {
+        classes.push("".concat(className, "--now"));
+    }
+    if (!value || !isCompleteValue(value)) {
+        return classes;
+    }
+    var valueRange = (function () {
+        if (Array.isArray(value)) {
+            return value;
+        }
+        var valueType = args.valueType;
+        if (!valueType) {
+            throw new Error('valueType is required when value is not an array of two dates');
+        }
+        return getRange(valueType, value);
+    })();
+    if (isRangeWithinRange(valueRange, dateRange)) {
+        classes.push("".concat(className, "--active"));
+    }
+    else if (doRangesOverlap(valueRange, dateRange)) {
+        classes.push("".concat(className, "--hasActive"));
+    }
+    var valueRangeClassNames = getRangeClassNames(valueRange, dateRange, "".concat(className, "--range"));
+    classes.push.apply(classes, valueRangeClassNames);
+    var valueArray = Array.isArray(value) ? value : [value];
+    if (hover && valueArray.length === 1) {
+        var hoverRange = hover > valueRange[0] ? [valueRange[0], hover] : [hover, valueRange[0]];
+        var hoverRangeClassNames = getRangeClassNames(hoverRange, dateRange, "".concat(className, "--hover"));
+        classes.push.apply(classes, hoverRangeClassNames);
+    }
+    return classes;
+}
+
+function TileGroup(_a) {
+    var className = _a.className, _b = _a.count, count = _b === void 0 ? 3 : _b, dateTransform = _a.dateTransform, dateType = _a.dateType, end = _a.end, hover = _a.hover, offset = _a.offset, renderTile = _a.renderTile, start = _a.start, _c = _a.step, step = _c === void 0 ? 1 : _c, value = _a.value, valueType = _a.valueType;
+    var tiles = [];
+    for (var point = start; point <= end; point += step) {
+        var date = dateTransform(point);
+        tiles.push(renderTile({
+            classes: getTileClasses({
+                date: date,
+                dateType: dateType,
+                hover: hover,
+                value: value,
+                valueType: valueType,
+            }),
+            date: date,
+        }));
+    }
+    return (jsx(Flex, { className: className, count: count, offset: offset, wrap: true, children: tiles }));
+}
+
+function Tile(props) {
+    var activeStartDate = props.activeStartDate, children = props.children, classes = props.classes, date = props.date, formatAbbr = props.formatAbbr, locale = props.locale, maxDate = props.maxDate, maxDateTransform = props.maxDateTransform, minDate = props.minDate, minDateTransform = props.minDateTransform, onClick = props.onClick, onMouseOver = props.onMouseOver, style = props.style, tileClassNameProps = props.tileClassName, tileContentProps = props.tileContent, tileDisabled = props.tileDisabled, view = props.view;
+    var tileClassName = useMemo(function () {
+        var args = { activeStartDate: activeStartDate, date: date, view: view };
+        return typeof tileClassNameProps === 'function' ? tileClassNameProps(args) : tileClassNameProps;
+    }, [activeStartDate, date, tileClassNameProps, view]);
+    var tileContent = useMemo(function () {
+        var args = { activeStartDate: activeStartDate, date: date, view: view };
+        return typeof tileContentProps === 'function' ? tileContentProps(args) : tileContentProps;
+    }, [activeStartDate, date, tileContentProps, view]);
+    return (jsxs("button", { className: clsx$1(classes, tileClassName), disabled: (minDate && minDateTransform(minDate) > date) ||
+            (maxDate && maxDateTransform(maxDate) < date) ||
+            (tileDisabled === null || tileDisabled === void 0 ? void 0 : tileDisabled({ activeStartDate: activeStartDate, date: date, view: view })), onClick: onClick ? function (event) { return onClick(date, event); } : undefined, onFocus: onMouseOver ? function () { return onMouseOver(date); } : undefined, onMouseOver: onMouseOver ? function () { return onMouseOver(date); } : undefined, style: style, type: "button", children: [formatAbbr ? jsx("abbr", { "aria-label": formatAbbr(locale, date), children: children }) : children, tileContent] }));
+}
+
+var __assign$d = (undefined && undefined.__assign) || function () {
+    __assign$d = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$d.apply(this, arguments);
+};
+var __rest$9 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var className$5 = 'react-calendar__century-view__decades__decade';
+function Decade(_a) {
+    var _b = _a.classes, classes = _b === void 0 ? [] : _b, currentCentury = _a.currentCentury, _c = _a.formatYear, formatYear$1 = _c === void 0 ? formatYear : _c, otherProps = __rest$9(_a, ["classes", "currentCentury", "formatYear"]);
+    var date = otherProps.date, locale = otherProps.locale;
+    var classesProps = [];
+    if (classes) {
+        classesProps.push.apply(classesProps, classes);
+    }
+    {
+        classesProps.push(className$5);
+    }
+    if (getCenturyStart(date).getFullYear() !== currentCentury) {
+        classesProps.push("".concat(className$5, "--neighboringCentury"));
+    }
+    return (jsx(Tile, __assign$d({}, otherProps, { classes: classesProps, maxDateTransform: getDecadeEnd, minDateTransform: getDecadeStart, view: "century", children: getDecadeLabel(locale, formatYear$1, date) })));
+}
+
+var __assign$c = (undefined && undefined.__assign) || function () {
+    __assign$c = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$c.apply(this, arguments);
+};
+var __rest$8 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function Decades(props) {
+    var activeStartDate = props.activeStartDate, hover = props.hover, showNeighboringCentury = props.showNeighboringCentury, value = props.value, valueType = props.valueType, otherProps = __rest$8(props, ["activeStartDate", "hover", "showNeighboringCentury", "value", "valueType"]);
+    var start = getBeginOfCenturyYear(activeStartDate);
+    var end = start + (showNeighboringCentury ? 119 : 99);
+    return (jsx(TileGroup, { className: "react-calendar__century-view__decades", dateTransform: getDecadeStart, dateType: "decade", end: end, hover: hover, renderTile: function (_a) {
+            var date = _a.date, otherTileProps = __rest$8(_a, ["date"]);
+            return (jsx(Decade, __assign$c({}, otherProps, otherTileProps, { activeStartDate: activeStartDate, currentCentury: start, date: date }), date.getTime()));
+        }, start: start, step: 10, value: value, valueType: valueType }));
+}
+
+var __assign$b = (undefined && undefined.__assign) || function () {
+    __assign$b = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$b.apply(this, arguments);
+};
+/**
+ * Displays a given century.
+ */
+function CenturyView(props) {
+    function renderDecades() {
+        return jsx(Decades, __assign$b({}, props));
+    }
+    return jsx("div", { className: "react-calendar__century-view", children: renderDecades() });
+}
+
+var __assign$a = (undefined && undefined.__assign) || function () {
+    __assign$a = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$a.apply(this, arguments);
+};
+var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var className$4 = 'react-calendar__decade-view__years__year';
+function Year(_a) {
+    var _b = _a.classes, classes = _b === void 0 ? [] : _b, currentDecade = _a.currentDecade, _c = _a.formatYear, formatYear$1 = _c === void 0 ? formatYear : _c, otherProps = __rest$7(_a, ["classes", "currentDecade", "formatYear"]);
+    var date = otherProps.date, locale = otherProps.locale;
+    var classesProps = [];
+    if (classes) {
+        classesProps.push.apply(classesProps, classes);
+    }
+    {
+        classesProps.push(className$4);
+    }
+    if (getDecadeStart(date).getFullYear() !== currentDecade) {
+        classesProps.push("".concat(className$4, "--neighboringDecade"));
+    }
+    return (jsx(Tile, __assign$a({}, otherProps, { classes: classesProps, maxDateTransform: getYearEnd, minDateTransform: getYearStart, view: "decade", children: formatYear$1(locale, date) })));
+}
+
+var __assign$9 = (undefined && undefined.__assign) || function () {
+    __assign$9 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$9.apply(this, arguments);
+};
+var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function Years(props) {
+    var activeStartDate = props.activeStartDate, hover = props.hover, showNeighboringDecade = props.showNeighboringDecade, value = props.value, valueType = props.valueType, otherProps = __rest$6(props, ["activeStartDate", "hover", "showNeighboringDecade", "value", "valueType"]);
+    var start = getBeginOfDecadeYear(activeStartDate);
+    var end = start + (showNeighboringDecade ? 11 : 9);
+    return (jsx(TileGroup, { className: "react-calendar__decade-view__years", dateTransform: getYearStart, dateType: "year", end: end, hover: hover, renderTile: function (_a) {
+            var date = _a.date, otherTileProps = __rest$6(_a, ["date"]);
+            return (jsx(Year, __assign$9({}, otherProps, otherTileProps, { activeStartDate: activeStartDate, currentDecade: start, date: date }), date.getTime()));
+        }, start: start, value: value, valueType: valueType }));
+}
+
+var __assign$8 = (undefined && undefined.__assign) || function () {
+    __assign$8 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$8.apply(this, arguments);
+};
+/**
+ * Displays a given decade.
+ */
+function DecadeView(props) {
+    function renderYears() {
+        return jsx(Years, __assign$8({}, props));
+    }
+    return jsx("div", { className: "react-calendar__decade-view", children: renderYears() });
+}
+
+var __assign$7 = (undefined && undefined.__assign) || function () {
+    __assign$7 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$7.apply(this, arguments);
+};
+var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var className$3 = 'react-calendar__year-view__months__month';
+function Month(_a) {
+    var _b = _a.classes, classes = _b === void 0 ? [] : _b, _c = _a.formatMonth, formatMonth$1 = _c === void 0 ? formatMonth : _c, _d = _a.formatMonthYear, formatMonthYear$1 = _d === void 0 ? formatMonthYear : _d, otherProps = __rest$5(_a, ["classes", "formatMonth", "formatMonthYear"]);
+    var date = otherProps.date, locale = otherProps.locale;
+    return (jsx(Tile, __assign$7({}, otherProps, { classes: __spreadArray(__spreadArray([], classes, true), [className$3], false), formatAbbr: formatMonthYear$1, maxDateTransform: getMonthEnd, minDateTransform: getMonthStart, view: "year", children: formatMonth$1(locale, date) })));
+}
+
+var __assign$6 = (undefined && undefined.__assign) || function () {
+    __assign$6 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$6.apply(this, arguments);
+};
+var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function Months(props) {
+    var activeStartDate = props.activeStartDate, hover = props.hover, value = props.value, valueType = props.valueType, otherProps = __rest$4(props, ["activeStartDate", "hover", "value", "valueType"]);
+    var start = 0;
+    var end = 11;
+    var year = getYear(activeStartDate);
+    return (jsx(TileGroup, { className: "react-calendar__year-view__months", dateTransform: function (monthIndex) {
+            var date = new Date();
+            date.setFullYear(year, monthIndex, 1);
+            return getMonthStart(date);
+        }, dateType: "month", end: end, hover: hover, renderTile: function (_a) {
+            var date = _a.date, otherTileProps = __rest$4(_a, ["date"]);
+            return (jsx(Month, __assign$6({}, otherProps, otherTileProps, { activeStartDate: activeStartDate, date: date }), date.getTime()));
+        }, start: start, value: value, valueType: valueType }));
+}
+
+var __assign$5 = (undefined && undefined.__assign) || function () {
+    __assign$5 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$5.apply(this, arguments);
+};
+/**
+ * Displays a given year.
+ */
+function YearView(props) {
+    function renderMonths() {
+        return jsx(Months, __assign$5({}, props));
+    }
+    return jsx("div", { className: "react-calendar__year-view", children: renderMonths() });
+}
+
+var __assign$4 = (undefined && undefined.__assign) || function () {
+    __assign$4 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$4.apply(this, arguments);
+};
+var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var className$2 = 'react-calendar__month-view__days__day';
+function Day(_a) {
+    var calendarType = _a.calendarType, _b = _a.classes, classes = _b === void 0 ? [] : _b, currentMonthIndex = _a.currentMonthIndex, _c = _a.formatDay, formatDay$1 = _c === void 0 ? formatDay : _c, _d = _a.formatLongDate, formatLongDate$1 = _d === void 0 ? formatLongDate : _d, otherProps = __rest$3(_a, ["calendarType", "classes", "currentMonthIndex", "formatDay", "formatLongDate"]);
+    var date = otherProps.date, locale = otherProps.locale;
+    var classesProps = [];
+    if (classes) {
+        classesProps.push.apply(classesProps, classes);
+    }
+    {
+        classesProps.push(className$2);
+    }
+    if (isWeekend(date, calendarType)) {
+        classesProps.push("".concat(className$2, "--weekend"));
+    }
+    if (date.getMonth() !== currentMonthIndex) {
+        classesProps.push("".concat(className$2, "--neighboringMonth"));
+    }
+    return (jsx(Tile, __assign$4({}, otherProps, { classes: classesProps, formatAbbr: formatLongDate$1, maxDateTransform: getDayEnd, minDateTransform: getDayStart, view: "month", children: formatDay$1(locale, date) })));
+}
+
+var __assign$3 = (undefined && undefined.__assign) || function () {
+    __assign$3 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$3.apply(this, arguments);
+};
+var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function Days(props) {
+    var activeStartDate = props.activeStartDate, calendarType = props.calendarType, hover = props.hover, showFixedNumberOfWeeks = props.showFixedNumberOfWeeks, showNeighboringMonth = props.showNeighboringMonth, value = props.value, valueType = props.valueType, otherProps = __rest$2(props, ["activeStartDate", "calendarType", "hover", "showFixedNumberOfWeeks", "showNeighboringMonth", "value", "valueType"]);
+    var year = getYear(activeStartDate);
+    var monthIndex = getMonth(activeStartDate);
+    var hasFixedNumberOfWeeks = showFixedNumberOfWeeks || showNeighboringMonth;
+    var dayOfWeek = getDayOfWeek(activeStartDate, calendarType);
+    var offset = hasFixedNumberOfWeeks ? 0 : dayOfWeek;
+    /**
+     * Defines on which day of the month the grid shall start. If we simply show current
+     * month, we obviously start on day one, but if showNeighboringMonth is set to
+     * true, we need to find the beginning of the week the first day of the month is in.
+     */
+    var start = (hasFixedNumberOfWeeks ? -dayOfWeek : 0) + 1;
+    /**
+     * Defines on which day of the month the grid shall end. If we simply show current
+     * month, we need to stop on the last day of the month, but if showNeighboringMonth
+     * is set to true, we need to find the end of the week the last day of the month is in.
+     */
+    var end = (function () {
+        if (showFixedNumberOfWeeks) {
+            // Always show 6 weeks
+            return start + 6 * 7 - 1;
+        }
+        var daysInMonth = getDaysInMonth(activeStartDate);
+        if (showNeighboringMonth) {
+            var activeEndDate = new Date();
+            activeEndDate.setFullYear(year, monthIndex, daysInMonth);
+            activeEndDate.setHours(0, 0, 0, 0);
+            var daysUntilEndOfTheWeek = 7 - getDayOfWeek(activeEndDate, calendarType) - 1;
+            return daysInMonth + daysUntilEndOfTheWeek;
+        }
+        return daysInMonth;
+    })();
+    return (jsx(TileGroup, { className: "react-calendar__month-view__days", count: 7, dateTransform: function (day) {
+            var date = new Date();
+            date.setFullYear(year, monthIndex, day);
+            return getDayStart(date);
+        }, dateType: "day", hover: hover, end: end, renderTile: function (_a) {
+            var date = _a.date, otherTileProps = __rest$2(_a, ["date"]);
+            return (jsx(Day, __assign$3({}, otherProps, otherTileProps, { activeStartDate: activeStartDate, calendarType: calendarType, currentMonthIndex: monthIndex, date: date }), date.getTime()));
+        }, offset: offset, start: start, value: value, valueType: valueType }));
+}
+
+var className$1 = 'react-calendar__month-view__weekdays';
+var weekdayClassName = "".concat(className$1, "__weekday");
+function Weekdays(props) {
+    var calendarType = props.calendarType, _a = props.formatShortWeekday, formatShortWeekday$1 = _a === void 0 ? formatShortWeekday : _a, _b = props.formatWeekday, formatWeekday$1 = _b === void 0 ? formatWeekday : _b, locale = props.locale, onMouseLeave = props.onMouseLeave;
+    var anyDate = new Date();
+    var beginOfMonth = getMonthStart(anyDate);
+    var year = getYear(beginOfMonth);
+    var monthIndex = getMonth(beginOfMonth);
+    var weekdays = [];
+    for (var weekday = 1; weekday <= 7; weekday += 1) {
+        var weekdayDate = new Date(year, monthIndex, weekday - getDayOfWeek(beginOfMonth, calendarType));
+        var abbr = formatWeekday$1(locale, weekdayDate);
+        weekdays.push(jsx("div", { className: clsx$1(weekdayClassName, isCurrentDayOfWeek(weekdayDate) && "".concat(weekdayClassName, "--current"), isWeekend(weekdayDate, calendarType) && "".concat(weekdayClassName, "--weekend")), children: jsx("abbr", { "aria-label": abbr, title: abbr, children: formatShortWeekday$1(locale, weekdayDate).replace('.', '') }) }, weekday));
+    }
+    return (jsx(Flex, { className: className$1, count: 7, onFocus: onMouseLeave, onMouseOver: onMouseLeave, children: weekdays }));
+}
+
+var __assign$2 = (undefined && undefined.__assign) || function () {
+    __assign$2 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$2.apply(this, arguments);
+};
+var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var className = 'react-calendar__tile';
+function WeekNumber(props) {
+    var onClickWeekNumber = props.onClickWeekNumber, weekNumber = props.weekNumber;
+    var children = jsx("span", { children: weekNumber });
+    if (onClickWeekNumber) {
+        var date_1 = props.date, onClickWeekNumber_1 = props.onClickWeekNumber, weekNumber_1 = props.weekNumber, otherProps = __rest$1(props, ["date", "onClickWeekNumber", "weekNumber"]);
+        return (jsx("button", __assign$2({}, otherProps, { className: className, onClick: function (event) { return onClickWeekNumber_1(weekNumber_1, date_1, event); }, type: "button", children: children })));
+        // biome-ignore lint/style/noUselessElse: TypeScript is unhappy if we remove this else
+    }
+    else {
+        props.date; props.onClickWeekNumber; props.weekNumber; var otherProps = __rest$1(props, ["date", "onClickWeekNumber", "weekNumber"]);
+        return (jsx("div", __assign$2({}, otherProps, { className: className, children: children })));
+    }
+}
+
+function WeekNumbers(props) {
+    var activeStartDate = props.activeStartDate, calendarType = props.calendarType, onClickWeekNumber = props.onClickWeekNumber, onMouseLeave = props.onMouseLeave, showFixedNumberOfWeeks = props.showFixedNumberOfWeeks;
+    var numberOfWeeks = (function () {
+        if (showFixedNumberOfWeeks) {
+            return 6;
+        }
+        var numberOfDays = getDaysInMonth(activeStartDate);
+        var startWeekday = getDayOfWeek(activeStartDate, calendarType);
+        var days = numberOfDays - (7 - startWeekday);
+        return 1 + Math.ceil(days / 7);
+    })();
+    var dates = (function () {
+        var year = getYear(activeStartDate);
+        var monthIndex = getMonth(activeStartDate);
+        var day = getDate(activeStartDate);
+        var result = [];
+        for (var index = 0; index < numberOfWeeks; index += 1) {
+            result.push(getBeginOfWeek(new Date(year, monthIndex, day + index * 7), calendarType));
+        }
+        return result;
+    })();
+    var weekNumbers = dates.map(function (date) { return getWeekNumber(date, calendarType); });
+    return (jsx(Flex, { className: "react-calendar__month-view__weekNumbers", count: numberOfWeeks, direction: "column", onFocus: onMouseLeave, onMouseOver: onMouseLeave, style: { flexBasis: 'calc(100% * (1 / 8)', flexShrink: 0 }, children: weekNumbers.map(function (weekNumber, weekIndex) {
+            var date = dates[weekIndex];
+            if (!date) {
+                throw new Error('date is not defined');
+            }
+            return (jsx(WeekNumber, { date: date, onClickWeekNumber: onClickWeekNumber, weekNumber: weekNumber }, weekNumber));
+        }) }));
+}
+
+var __assign$1 = (undefined && undefined.__assign) || function () {
+    __assign$1 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function getCalendarTypeFromLocale(locale) {
+    if (locale) {
+        for (var _i = 0, _a = Object.entries(CALENDAR_TYPE_LOCALES); _i < _a.length; _i++) {
+            var _b = _a[_i], calendarType = _b[0], locales = _b[1];
+            if (locales.includes(locale)) {
+                return calendarType;
+            }
+        }
+    }
+    return CALENDAR_TYPES.ISO_8601;
+}
+/**
+ * Displays a given month.
+ */
+function MonthView(props) {
+    var activeStartDate = props.activeStartDate, locale = props.locale, onMouseLeave = props.onMouseLeave, showFixedNumberOfWeeks = props.showFixedNumberOfWeeks;
+    var _a = props.calendarType, calendarType = _a === void 0 ? getCalendarTypeFromLocale(locale) : _a, formatShortWeekday = props.formatShortWeekday, formatWeekday = props.formatWeekday, onClickWeekNumber = props.onClickWeekNumber, showWeekNumbers = props.showWeekNumbers, childProps = __rest(props, ["calendarType", "formatShortWeekday", "formatWeekday", "onClickWeekNumber", "showWeekNumbers"]);
+    function renderWeekdays() {
+        return (jsx(Weekdays, { calendarType: calendarType, formatShortWeekday: formatShortWeekday, formatWeekday: formatWeekday, locale: locale, onMouseLeave: onMouseLeave }));
+    }
+    function renderWeekNumbers() {
+        if (!showWeekNumbers) {
+            return null;
+        }
+        return (jsx(WeekNumbers, { activeStartDate: activeStartDate, calendarType: calendarType, onClickWeekNumber: onClickWeekNumber, onMouseLeave: onMouseLeave, showFixedNumberOfWeeks: showFixedNumberOfWeeks }));
+    }
+    function renderDays() {
+        return jsx(Days, __assign$1({ calendarType: calendarType }, childProps));
+    }
+    var className = 'react-calendar__month-view';
+    return (jsx("div", { className: clsx$1(className, showWeekNumbers ? "".concat(className, "--weekNumbers") : ''), children: jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-end',
+            }, children: [renderWeekNumbers(), jsxs("div", { style: {
+                        flexGrow: 1,
+                        width: '100%',
+                    }, children: [renderWeekdays(), renderDays()] })] }) }));
+}
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var baseClassName = 'react-calendar';
+var allViews = ['century', 'decade', 'year', 'month'];
+var allValueTypes = ['decade', 'year', 'month', 'day'];
+var defaultMinDate = new Date();
+defaultMinDate.setFullYear(1, 0, 1);
+defaultMinDate.setHours(0, 0, 0, 0);
+var defaultMaxDate = new Date(8.64e15);
+function toDate(value) {
+    if (value instanceof Date) {
+        return value;
+    }
+    return new Date(value);
+}
+/**
+ * Returns views array with disallowed values cut off.
+ */
+function getLimitedViews(minDetail, maxDetail) {
+    return allViews.slice(allViews.indexOf(minDetail), allViews.indexOf(maxDetail) + 1);
+}
+/**
+ * Determines whether a given view is allowed with currently applied settings.
+ */
+function isViewAllowed(view, minDetail, maxDetail) {
+    var views = getLimitedViews(minDetail, maxDetail);
+    return views.indexOf(view) !== -1;
+}
+/**
+ * Gets either provided view if allowed by minDetail and maxDetail, or gets
+ * the default view if not allowed.
+ */
+function getView(view, minDetail, maxDetail) {
+    if (!view) {
+        return maxDetail;
+    }
+    if (isViewAllowed(view, minDetail, maxDetail)) {
+        return view;
+    }
+    return maxDetail;
+}
+/**
+ * Returns value type that can be returned with currently applied settings.
+ */
+function getValueType(view) {
+    var index = allViews.indexOf(view);
+    return allValueTypes[index];
+}
+function getValue(value, index) {
+    var rawValue = Array.isArray(value) ? value[index] : value;
+    if (!rawValue) {
+        return null;
+    }
+    var valueDate = toDate(rawValue);
+    if (Number.isNaN(valueDate.getTime())) {
+        throw new Error("Invalid date: ".concat(value));
+    }
+    return valueDate;
+}
+function getDetailValue(_a, index) {
+    var value = _a.value, minDate = _a.minDate, maxDate = _a.maxDate, maxDetail = _a.maxDetail;
+    var valuePiece = getValue(value, index);
+    if (!valuePiece) {
+        return null;
+    }
+    var valueType = getValueType(maxDetail);
+    var detailValueFrom = (function () {
+        switch (index) {
+            case 0:
+                return getBegin(valueType, valuePiece);
+            case 1:
+                return getEnd(valueType, valuePiece);
+            default:
+                throw new Error("Invalid index value: ".concat(index));
+        }
+    })();
+    return between(detailValueFrom, minDate, maxDate);
+}
+var getDetailValueFrom = function (args) { return getDetailValue(args, 0); };
+var getDetailValueTo = function (args) { return getDetailValue(args, 1); };
+var getDetailValueArray = function (args) {
+    return [getDetailValueFrom, getDetailValueTo].map(function (fn) { return fn(args); });
+};
+function getActiveStartDate(_a) {
+    var maxDate = _a.maxDate, maxDetail = _a.maxDetail, minDate = _a.minDate, minDetail = _a.minDetail, value = _a.value, view = _a.view;
+    var rangeType = getView(view, minDetail, maxDetail);
+    var valueFrom = getDetailValueFrom({
+        value: value,
+        minDate: minDate,
+        maxDate: maxDate,
+        maxDetail: maxDetail,
+    }) || new Date();
+    return getBegin(rangeType, valueFrom);
+}
+function getInitialActiveStartDate(_a) {
+    var activeStartDate = _a.activeStartDate, defaultActiveStartDate = _a.defaultActiveStartDate, defaultValue = _a.defaultValue, defaultView = _a.defaultView, maxDate = _a.maxDate, maxDetail = _a.maxDetail, minDate = _a.minDate, minDetail = _a.minDetail, value = _a.value, view = _a.view;
+    var rangeType = getView(view, minDetail, maxDetail);
+    var valueFrom = activeStartDate || defaultActiveStartDate;
+    if (valueFrom) {
+        return getBegin(rangeType, valueFrom);
+    }
+    return getActiveStartDate({
+        maxDate: maxDate,
+        maxDetail: maxDetail,
+        minDate: minDate,
+        minDetail: minDetail,
+        value: value || defaultValue,
+        view: view || defaultView,
+    });
+}
+function getIsSingleValue(value) {
+    return value && (!Array.isArray(value) || value.length === 1);
+}
+function areDatesEqual(date1, date2) {
+    return date1 instanceof Date && date2 instanceof Date && date1.getTime() === date2.getTime();
+}
+var Calendar = forwardRef(function Calendar(props, ref) {
+    var activeStartDateProps = props.activeStartDate, allowPartialRange = props.allowPartialRange, calendarType = props.calendarType, className = props.className, defaultActiveStartDate = props.defaultActiveStartDate, defaultValue = props.defaultValue, defaultView = props.defaultView, formatDay = props.formatDay, formatLongDate = props.formatLongDate, formatMonth = props.formatMonth, formatMonthYear = props.formatMonthYear, formatShortWeekday = props.formatShortWeekday, formatWeekday = props.formatWeekday, formatYear = props.formatYear, _a = props.goToRangeStartOnSelect, goToRangeStartOnSelect = _a === void 0 ? true : _a, inputRef = props.inputRef, locale = props.locale, _b = props.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b, _c = props.maxDetail, maxDetail = _c === void 0 ? 'month' : _c, _d = props.minDate, minDate = _d === void 0 ? defaultMinDate : _d, _e = props.minDetail, minDetail = _e === void 0 ? 'century' : _e, navigationAriaLabel = props.navigationAriaLabel, navigationAriaLive = props.navigationAriaLive, navigationLabel = props.navigationLabel, next2AriaLabel = props.next2AriaLabel, next2Label = props.next2Label, nextAriaLabel = props.nextAriaLabel, nextLabel = props.nextLabel, onActiveStartDateChange = props.onActiveStartDateChange, onChangeProps = props.onChange, onClickDay = props.onClickDay, onClickDecade = props.onClickDecade, onClickMonth = props.onClickMonth, onClickWeekNumber = props.onClickWeekNumber, onClickYear = props.onClickYear, onDrillDown = props.onDrillDown, onDrillUp = props.onDrillUp, onViewChange = props.onViewChange, prev2AriaLabel = props.prev2AriaLabel, prev2Label = props.prev2Label, prevAriaLabel = props.prevAriaLabel, prevLabel = props.prevLabel, _f = props.returnValue, returnValue = _f === void 0 ? 'start' : _f, selectRange = props.selectRange, showDoubleView = props.showDoubleView, showFixedNumberOfWeeks = props.showFixedNumberOfWeeks, _g = props.showNavigation, showNavigation = _g === void 0 ? true : _g, showNeighboringCentury = props.showNeighboringCentury, showNeighboringDecade = props.showNeighboringDecade, _h = props.showNeighboringMonth, showNeighboringMonth = _h === void 0 ? true : _h, showWeekNumbers = props.showWeekNumbers, tileClassName = props.tileClassName, tileContent = props.tileContent, tileDisabled = props.tileDisabled, valueProps = props.value, viewProps = props.view;
+    var _j = useState(defaultActiveStartDate), activeStartDateState = _j[0], setActiveStartDateState = _j[1];
+    var _k = useState(null), hoverState = _k[0], setHoverState = _k[1];
+    var _l = useState(Array.isArray(defaultValue)
+        ? defaultValue.map(function (el) { return (el !== null ? toDate(el) : null); })
+        : defaultValue !== null && defaultValue !== undefined
+            ? toDate(defaultValue)
+            : null), valueState = _l[0], setValueState = _l[1];
+    var _m = useState(defaultView), viewState = _m[0], setViewState = _m[1];
+    var activeStartDate = activeStartDateProps ||
+        activeStartDateState ||
+        getInitialActiveStartDate({
+            activeStartDate: activeStartDateProps,
+            defaultActiveStartDate: defaultActiveStartDate,
+            defaultValue: defaultValue,
+            defaultView: defaultView,
+            maxDate: maxDate,
+            maxDetail: maxDetail,
+            minDate: minDate,
+            minDetail: minDetail,
+            value: valueProps,
+            view: viewProps,
+        });
+    var value = (function () {
+        var rawValue = (function () {
+            // In the middle of range selection, use value from state
+            if (selectRange && getIsSingleValue(valueState)) {
+                return valueState;
+            }
+            return valueProps !== undefined ? valueProps : valueState;
+        })();
+        if (!rawValue) {
+            return null;
+        }
+        return Array.isArray(rawValue)
+            ? rawValue.map(function (el) { return (el !== null ? toDate(el) : null); })
+            : rawValue !== null
+                ? toDate(rawValue)
+                : null;
+    })();
+    var valueType = getValueType(maxDetail);
+    var view = getView(viewProps || viewState, minDetail, maxDetail);
+    var views = getLimitedViews(minDetail, maxDetail);
+    var hover = selectRange ? hoverState : null;
+    var drillDownAvailable = views.indexOf(view) < views.length - 1;
+    var drillUpAvailable = views.indexOf(view) > 0;
+    var getProcessedValue = useCallback(function (value) {
+        var processFunction = (function () {
+            switch (returnValue) {
+                case 'start':
+                    return getDetailValueFrom;
+                case 'end':
+                    return getDetailValueTo;
+                case 'range':
+                    return getDetailValueArray;
+                default:
+                    throw new Error('Invalid returnValue.');
+            }
+        })();
+        return processFunction({
+            maxDate: maxDate,
+            maxDetail: maxDetail,
+            minDate: minDate,
+            value: value,
+        });
+    }, [maxDate, maxDetail, minDate, returnValue]);
+    var setActiveStartDate = useCallback(function (nextActiveStartDate, action) {
+        setActiveStartDateState(nextActiveStartDate);
+        var args = {
+            action: action,
+            activeStartDate: nextActiveStartDate,
+            value: value,
+            view: view,
+        };
+        if (onActiveStartDateChange && !areDatesEqual(activeStartDate, nextActiveStartDate)) {
+            onActiveStartDateChange(args);
+        }
+    }, [activeStartDate, onActiveStartDateChange, value, view]);
+    var onClickTile = useCallback(function (value, event) {
+        var callback = (function () {
+            switch (view) {
+                case 'century':
+                    return onClickDecade;
+                case 'decade':
+                    return onClickYear;
+                case 'year':
+                    return onClickMonth;
+                case 'month':
+                    return onClickDay;
+                default:
+                    throw new Error("Invalid view: ".concat(view, "."));
+            }
+        })();
+        if (callback)
+            callback(value, event);
+    }, [onClickDay, onClickDecade, onClickMonth, onClickYear, view]);
+    var drillDown = useCallback(function (nextActiveStartDate, event) {
+        if (!drillDownAvailable) {
+            return;
+        }
+        onClickTile(nextActiveStartDate, event);
+        var nextView = views[views.indexOf(view) + 1];
+        if (!nextView) {
+            throw new Error('Attempted to drill down from the lowest view.');
+        }
+        setActiveStartDateState(nextActiveStartDate);
+        setViewState(nextView);
+        var args = {
+            action: 'drillDown',
+            activeStartDate: nextActiveStartDate,
+            value: value,
+            view: nextView,
+        };
+        if (onActiveStartDateChange && !areDatesEqual(activeStartDate, nextActiveStartDate)) {
+            onActiveStartDateChange(args);
+        }
+        if (onViewChange && view !== nextView) {
+            onViewChange(args);
+        }
+        if (onDrillDown) {
+            onDrillDown(args);
+        }
+    }, [
+        activeStartDate,
+        drillDownAvailable,
+        onActiveStartDateChange,
+        onClickTile,
+        onDrillDown,
+        onViewChange,
+        value,
+        view,
+        views,
+    ]);
+    var drillUp = useCallback(function () {
+        if (!drillUpAvailable) {
+            return;
+        }
+        var nextView = views[views.indexOf(view) - 1];
+        if (!nextView) {
+            throw new Error('Attempted to drill up from the highest view.');
+        }
+        var nextActiveStartDate = getBegin(nextView, activeStartDate);
+        setActiveStartDateState(nextActiveStartDate);
+        setViewState(nextView);
+        var args = {
+            action: 'drillUp',
+            activeStartDate: nextActiveStartDate,
+            value: value,
+            view: nextView,
+        };
+        if (onActiveStartDateChange && !areDatesEqual(activeStartDate, nextActiveStartDate)) {
+            onActiveStartDateChange(args);
+        }
+        if (onViewChange && view !== nextView) {
+            onViewChange(args);
+        }
+        if (onDrillUp) {
+            onDrillUp(args);
+        }
+    }, [
+        activeStartDate,
+        drillUpAvailable,
+        onActiveStartDateChange,
+        onDrillUp,
+        onViewChange,
+        value,
+        view,
+        views,
+    ]);
+    var onChange = useCallback(function (rawNextValue, event) {
+        var previousValue = value;
+        onClickTile(rawNextValue, event);
+        var isFirstValueInRange = selectRange && !getIsSingleValue(previousValue);
+        var nextValue;
+        if (selectRange) {
+            // Range selection turned on
+            if (isFirstValueInRange) {
+                // Value has 0 or 2 elements - either way we're starting a new array
+                // First value
+                nextValue = getBegin(valueType, rawNextValue);
+            }
+            else {
+                if (!previousValue) {
+                    throw new Error('previousValue is required');
+                }
+                if (Array.isArray(previousValue)) {
+                    throw new Error('previousValue must not be an array');
+                }
+                // Second value
+                nextValue = getValueRange(valueType, previousValue, rawNextValue);
+            }
+        }
+        else {
+            // Range selection turned off
+            nextValue = getProcessedValue(rawNextValue);
+        }
+        var nextActiveStartDate = 
+        // Range selection turned off
+        !selectRange ||
+            // Range selection turned on, first value
+            isFirstValueInRange ||
+            // Range selection turned on, second value, goToRangeStartOnSelect toggled on
+            goToRangeStartOnSelect
+            ? getActiveStartDate({
+                maxDate: maxDate,
+                maxDetail: maxDetail,
+                minDate: minDate,
+                minDetail: minDetail,
+                value: nextValue,
+                view: view,
+            })
+            : null;
+        event.persist();
+        setActiveStartDateState(nextActiveStartDate);
+        setValueState(nextValue);
+        var args = {
+            action: 'onChange',
+            activeStartDate: nextActiveStartDate,
+            value: nextValue,
+            view: view,
+        };
+        if (onActiveStartDateChange && !areDatesEqual(activeStartDate, nextActiveStartDate)) {
+            onActiveStartDateChange(args);
+        }
+        if (onChangeProps) {
+            if (selectRange) {
+                var isSingleValue = getIsSingleValue(nextValue);
+                if (!isSingleValue) {
+                    onChangeProps(nextValue || null, event);
+                }
+                else if (allowPartialRange) {
+                    if (Array.isArray(nextValue)) {
+                        throw new Error('value must not be an array');
+                    }
+                    onChangeProps([nextValue || null, null], event);
+                }
+            }
+            else {
+                onChangeProps(nextValue || null, event);
+            }
+        }
+    }, [
+        activeStartDate,
+        allowPartialRange,
+        getProcessedValue,
+        goToRangeStartOnSelect,
+        maxDate,
+        maxDetail,
+        minDate,
+        minDetail,
+        onActiveStartDateChange,
+        onChangeProps,
+        onClickTile,
+        selectRange,
+        value,
+        valueType,
+        view,
+    ]);
+    function onMouseOver(nextHover) {
+        setHoverState(nextHover);
+    }
+    function onMouseLeave() {
+        setHoverState(null);
+    }
+    useImperativeHandle(ref, function () { return ({
+        activeStartDate: activeStartDate,
+        drillDown: drillDown,
+        drillUp: drillUp,
+        onChange: onChange,
+        setActiveStartDate: setActiveStartDate,
+        value: value,
+        view: view,
+    }); }, [activeStartDate, drillDown, drillUp, onChange, setActiveStartDate, value, view]);
+    function renderContent(next) {
+        var currentActiveStartDate = next
+            ? getBeginNext(view, activeStartDate)
+            : getBegin(view, activeStartDate);
+        var onClick = drillDownAvailable ? drillDown : onChange;
+        var commonProps = {
+            activeStartDate: currentActiveStartDate,
+            hover: hover,
+            locale: locale,
+            maxDate: maxDate,
+            minDate: minDate,
+            onClick: onClick,
+            onMouseOver: selectRange ? onMouseOver : undefined,
+            tileClassName: tileClassName,
+            tileContent: tileContent,
+            tileDisabled: tileDisabled,
+            value: value,
+            valueType: valueType,
+        };
+        switch (view) {
+            case 'century': {
+                return (jsx(CenturyView, __assign({ formatYear: formatYear, showNeighboringCentury: showNeighboringCentury }, commonProps)));
+            }
+            case 'decade': {
+                return (jsx(DecadeView, __assign({ formatYear: formatYear, showNeighboringDecade: showNeighboringDecade }, commonProps)));
+            }
+            case 'year': {
+                return (jsx(YearView, __assign({ formatMonth: formatMonth, formatMonthYear: formatMonthYear }, commonProps)));
+            }
+            case 'month': {
+                return (jsx(MonthView, __assign({ calendarType: calendarType, formatDay: formatDay, formatLongDate: formatLongDate, formatShortWeekday: formatShortWeekday, formatWeekday: formatWeekday, onClickWeekNumber: onClickWeekNumber, onMouseLeave: selectRange ? onMouseLeave : undefined, showFixedNumberOfWeeks: typeof showFixedNumberOfWeeks !== 'undefined'
+                        ? showFixedNumberOfWeeks
+                        : showDoubleView, showNeighboringMonth: showNeighboringMonth, showWeekNumbers: showWeekNumbers }, commonProps)));
+            }
+            default:
+                throw new Error("Invalid view: ".concat(view, "."));
+        }
+    }
+    function renderNavigation() {
+        if (!showNavigation) {
+            return null;
+        }
+        return (jsx(Navigation, { activeStartDate: activeStartDate, drillUp: drillUp, formatMonthYear: formatMonthYear, formatYear: formatYear, locale: locale, maxDate: maxDate, minDate: minDate, navigationAriaLabel: navigationAriaLabel, navigationAriaLive: navigationAriaLive, navigationLabel: navigationLabel, next2AriaLabel: next2AriaLabel, next2Label: next2Label, nextAriaLabel: nextAriaLabel, nextLabel: nextLabel, prev2AriaLabel: prev2AriaLabel, prev2Label: prev2Label, prevAriaLabel: prevAriaLabel, prevLabel: prevLabel, setActiveStartDate: setActiveStartDate, showDoubleView: showDoubleView, view: view, views: views }));
+    }
+    var valueArray = Array.isArray(value) ? value : [value];
+    return (jsxs("div", { className: clsx$1(baseClassName, selectRange && valueArray.length === 1 && "".concat(baseClassName, "--selectRange"), showDoubleView && "".concat(baseClassName, "--doubleView"), className), ref: inputRef, children: [renderNavigation(), jsxs("div", { className: "".concat(baseClassName, "__viewContainer"), onBlur: selectRange ? onMouseLeave : undefined, onMouseLeave: selectRange ? onMouseLeave : undefined, children: [renderContent(), showDoubleView ? renderContent(true) : null] })] }));
+});
+
+const tooltipVariants = cva("fixed z-50 bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium border border-popup-outline-subtle flex flex-col  p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
     variants: {
-        orientation: {
-            horizontal: "w-full",
-            vertical: "h-full",
-        },
-        thickness: {
-            thinner: "",
-            thin: "",
-            thick: "",
-            thicker: "",
-        },
-        lineStyle: {
-            solid: "border-solid",
-            dashed: "border-dashed",
-        },
-        variant: {
-            normal: "",
-            subtle: "",
-            muted: "",
+        isVisible: {
+            true: "opacity-100 pointer-events-auto shadow-[0_4px_20px_rgba(0,0,0,0.15)]",
+            false: "opacity-0 pointer-events-none",
         },
     },
-    compoundVariants: [
-        // Horizontal orientation with thickness
-        {
-            orientation: "horizontal",
-            thickness: "thinner",
-            class: "border-t-[0.5px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thin",
-            class: "border-t-[1px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thick",
-            class: "border-t-[2px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thicker",
-            class: "border-t-[3px]",
+    defaultVariants: {
+        isVisible: false,
+    },
+});
+const tooltipArrowVariants = cva("absolute w-0 h-0 border-solid border-[6px] -translate-x-1/2", {
+    variants: {
+        placement: {
+            "top-start": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
+            top: "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
+            "top-end": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
+            "bottom-start": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
+            bottom: "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
+            "bottom-end": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
         },
-        // Vertical orientation with thickness
-        {
-            orientation: "vertical",
-            thickness: "thinner",
-            class: "border-l-[0.5px]",
+    },
+    defaultVariants: {
+        placement: "top",
+    },
+});
+const Tooltip = React.forwardRef(({ children, heading, description, placement = "top", showArrow = true, className, delay = 200, disabled = false, }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [position, setPosition] = React.useState({ top: 0, left: 0 });
+    const [arrowPosition, setArrowPosition] = React.useState({ left: 0 });
+    const [actualPlacement, setActualPlacement] = React.useState(placement);
+    const timeoutRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const calculatePosition = React.useCallback(() => {
+        if (!triggerRef.current || !tooltipRef.current)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const gap = 8; // 8px gap between trigger and tooltip
+        const arrowSize = 6; // Size of the arrow
+        const viewportPadding = 8; // Minimum padding from viewport edges
+        let top = 0;
+        let left = 0;
+        let currentPlacement = placement;
+        // Calculate initial position based on placement
+        switch (placement) {
+            case "top-start":
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left = triggerRect.left;
+                break;
+            case "top":
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left =
+                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "top-end":
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left = triggerRect.right - tooltipRect.width;
+                break;
+            case "bottom-start":
+                top = triggerRect.bottom + gap + arrowSize;
+                left = triggerRect.left;
+                break;
+            case "bottom":
+                top = triggerRect.bottom + gap + arrowSize;
+                left =
+                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "bottom-end":
+                top = triggerRect.bottom + gap + arrowSize;
+                left = triggerRect.right - tooltipRect.width;
+                break;
+        }
+        // Get viewport dimensions
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Adjust horizontal position to keep tooltip within viewport
+        if (left < viewportPadding) {
+            // Tooltip would overflow on the left
+            left = viewportPadding;
+        }
+        else if (left + tooltipRect.width > viewportWidth - viewportPadding) {
+            // Tooltip would overflow on the right
+            left = viewportWidth - tooltipRect.width - viewportPadding;
+        }
+        // Adjust vertical position to keep tooltip within viewport
+        if (top < viewportPadding) {
+            // Tooltip would overflow at the top
+            // Try to flip to bottom if there's more space there
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            if (spaceBelow > spaceAbove) {
+                // Flip to bottom
+                top = triggerRect.bottom + gap + arrowSize;
+                // Update placement to reflect the flip
+                if (placement === "top-start")
+                    currentPlacement = "bottom-start";
+                else if (placement === "top")
+                    currentPlacement = "bottom";
+                else if (placement === "top-end")
+                    currentPlacement = "bottom-end";
+            }
+            else {
+                // Keep at top but adjust to stay in viewport
+                top = viewportPadding;
+            }
+        }
+        else if (top + tooltipRect.height > viewportHeight - viewportPadding) {
+            // Tooltip would overflow at the bottom
+            // Try to flip to top if there's more space there
+            const spaceAbove = triggerRect.top;
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            if (spaceAbove > spaceBelow) {
+                // Flip to top
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                // Update placement to reflect the flip
+                if (placement === "bottom-start")
+                    currentPlacement = "top-start";
+                else if (placement === "bottom")
+                    currentPlacement = "top";
+                else if (placement === "bottom-end")
+                    currentPlacement = "top-end";
+            }
+            else {
+                // Keep at bottom but adjust to stay in viewport
+                top = viewportHeight - tooltipRect.height - viewportPadding;
+            }
+        }
+        // Calculate arrow position relative to trigger
+        // The arrow should point to the center of the trigger element
+        const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+        const tooltipLeft = left;
+        const arrowLeft = triggerCenterX - tooltipLeft;
+        // Clamp arrow position to stay within tooltip bounds (with padding)
+        const arrowPadding = 16; // Minimum distance from tooltip edges
+        const clampedArrowLeft = Math.max(arrowPadding, Math.min(arrowLeft, tooltipRect.width - arrowPadding));
+        setPosition({ top, left });
+        setArrowPosition({ left: clampedArrowLeft });
+        setActualPlacement(currentPlacement);
+    }, [placement]);
+    const handleMouseEnter = () => {
+        if (disabled)
+            return;
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setIsVisible(false);
+    };
+    const handleFocus = () => {
+        if (disabled)
+            return;
+        setIsVisible(true);
+    };
+    const handleBlur = () => {
+        setIsVisible(false);
+    };
+    React.useEffect(() => {
+        if (isVisible) {
+            calculatePosition();
+            window.addEventListener("scroll", calculatePosition, true);
+            window.addEventListener("resize", calculatePosition);
+        }
+        return () => {
+            window.removeEventListener("scroll", calculatePosition, true);
+            window.removeEventListener("resize", calculatePosition);
+        };
+    }, [isVisible, calculatePosition]);
+    React.useEffect(() => {
+        // Reset actualPlacement when placement prop changes
+        setActualPlacement(placement);
+    }, [placement]);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    // Merge refs function
+    const mergeRefs = (...refs) => {
+        return (node) => {
+            refs.forEach((ref) => {
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else if (ref && typeof ref === "object" && "current" in ref) {
+                    ref.current = node;
+                }
+            });
+        };
+    };
+    // Clone the child element and add event handlers
+    const trigger = React.cloneElement(children, {
+        ref: mergeRefs(triggerRef, children.ref),
+        onMouseEnter: (e) => {
+            handleMouseEnter();
+            children.props.onMouseEnter?.(e);
         },
-        {
-            orientation: "vertical",
-            thickness: "thin",
-            class: "border-l-[1px]",
+        onMouseLeave: (e) => {
+            handleMouseLeave();
+            children.props.onMouseLeave?.(e);
         },
-        {
-            orientation: "vertical",
-            thickness: "thick",
-            class: "border-l-[2px]",
+        onFocus: (e) => {
+            handleFocus();
+            children.props.onFocus?.(e);
         },
-        {
-            orientation: "vertical",
-            thickness: "thicker",
-            class: "border-l-[3px]",
+        onBlur: (e) => {
+            handleBlur();
+            children.props.onBlur?.(e);
         },
-        // Normal variant colors
-        {
-            variant: "normal",
-            class: "border-surface-outline-neutral-normal",
+        "aria-describedby": isVisible ? "tooltip-content" : undefined,
+    });
+    return (jsxs(Fragment, { children: [trigger, jsxs("div", { ref: mergeRefs(tooltipRef, ref), id: "tooltip-content", role: "tooltip", className: cn(tooltipVariants({ isVisible }), className), style: {
+                    top: `${position.top}px`,
+                    left: `${position.left}px`,
+                }, "aria-hidden": !isVisible, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [showArrow && (jsx("div", { className: cn(tooltipArrowVariants({ placement: actualPlacement })), style: {
+                            left: `${arrowPosition.left}px`,
+                        } })), jsxs("div", { className: "relative flex flex-col gap-2", children: [heading && (jsx(Text, { variant: "body", size: "medium", weight: "semibold", color: "onPrimary", children: heading })), jsx(Text, { variant: "body", size: "small", weight: "regular", color: "onPrimary", children: description })] })] })] }));
+});
+Tooltip.displayName = "Tooltip";
+
+const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = false, isRequired = false, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, linkLeadingIcon, linkTrailingIcon, htmlFor, className, labelClassName, linkClassName, }, ref) => {
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            textClassName: "text-body-xsmall-semibold",
+            textClassNameRegular: "text-caption-small-regular",
+            iconSize: 12,
+            gap: "gap-1.5",
         },
-        // Subtle variant colors
-        {
-            variant: "subtle",
-            class: "border-surface-outline-neutral-subtle",
+        medium: {
+            textClassName: "text-body-small-semibold",
+            textClassNameRegular: "text-caption-medium-regular",
+            iconSize: 14,
+            gap: "gap-2",
         },
-        // Muted variant colors
-        {
-            variant: "muted",
-            class: "border-surface-outline-neutral-muted",
+        large: {
+            textClassName: "text-body-medium-semibold",
+            textClassNameRegular: "text-caption-large-regular",
+            iconSize: 16,
+            gap: "gap-2.5",
         },
-    ],
-    defaultVariants: {
-        orientation: "horizontal",
-        thickness: "thin",
-        lineStyle: "solid",
-        variant: "normal",
-    },
-});
-const Divider = React.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
-    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
+    };
+    const config = sizeConfig[size];
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx("span", { className: cn(config.textClassName, "text-surface-neutral-subtle"), children: label }), isRequired && (jsx("span", { className: cn(config.textClassName, "text-color-negative ml-0.5"), children: "*" })), isOptional && (jsx("span", { className: cn(config.textClassNameRegular, "text-surface-neutral-muted italic ml-1"), children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsx(Icon, { name: "info", size: config.iconSize }) }))] }), LinkComponent
+                ? LinkComponent
+                : linkText && (jsx(Link, { href: linkHref, onClick: onLinkClick, type: "action", color: "primary", size: size === "large" ? "small" : "xsmall", leadingIcon: linkLeadingIcon, trailingIcon: linkTrailingIcon, children: linkText }))] }));
 });
-Divider.displayName = "Divider";
+FormHeader.displayName = "FormHeader";
 
-const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+const datePickerVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
     variants: {
-        variant: {
-            default: `hover:bg-action-fill-neutral-faded
-          focus:bg-action-fill-neutral-faded
-          focus:ring-2
-          ring-action-outline-primary-faded-hover
-          border border-transparent
-          `,
-            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
-            primary: `hover:bg-action-fill-neutral-faded
-          focus:bg-action-fill-neutral-faded 
-          focus:ring-2 
-          ring-action-outline-primary-faded-hover
-          border border-transparent
-          `,
-            negative: `hover:bg-action-fill-negative-faded 
-          focus:bg-action-fill-negative-faded 
-          focus:ring-2 ring-action-outline-negative-faded-hover
-          border border-transparent
-          `,
+        size: {
+            small: "h-[28px] px-3 text-xs gap-2",
+            medium: "h-[36px] px-4 text-sm gap-2",
+            large: "h-[44px] px-5 text-base gap-3",
         },
-        isDisabled: {
-            true: "cursor-not-allowed opacity-60",
-            false: "",
+        validationState: {
+            none: `
+        border-action-outline-neutral-faded 
+        hover:border-action-outline-primary-hover 
+        focus-within:border-action-outline-primary-hover 
+        focus-within:ring-2 
+        ring-action-outline-primary-faded-hover`,
+            positive: `
+          border-action-outline-positive-default 
+          focus-within:border-action-outline-positive-hover
+          focus-within:ring-2
+          ring-action-outline-positive-faded-hover`,
+            negative: `border-action-outline-negative-default 
+          focus-within:border-action-outline-negative-hover
+          focus-within:ring-2 
+          ring-action-outline-negative-faded-hover`,
         },
-        isSelected: {
-            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
-            false: "",
+        isDisabled: {
+            true: `
+        border-[var(--border-width-thinner)]
+        hover:border-action-outline-neutral-disabled
+        border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense cursor-not-allowed opacity-60`,
+            false: "bg-surface-fill-neutral-intense",
         },
     },
     defaultVariants: {
-        variant: "default",
+        size: "medium",
+        validationState: "none",
         isDisabled: false,
-        isSelected: false,
     },
 });
-const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
-    const [internalSelected, setInternalSelected] = React.useState(isSelected);
-    // Sync internal state with prop
-    React.useEffect(() => {
-        setInternalSelected(isSelected);
-    }, [isSelected]);
-    const handleClick = (e) => {
-        if (isDisabled)
+// Helper functions
+const parseDate = (date) => {
+    if (!date)
+        return null;
+    if (date instanceof Date)
+        return date;
+    if (typeof date === "string") {
+        const parsed = new Date(date);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    return null;
+};
+const formatDateDefault = (date) => {
+    return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+};
+const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(parseDate(defaultValue));
+    const [isOpen, setIsOpen] = React.useState(false);
+    const datePickerRef = React.useRef(null);
+    const calendarRef = React.useRef(null);
+    const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
+    const value = controlledValue !== undefined
+        ? parseDate(controlledValue)
+        : uncontrolledValue;
+    const hasValue = value !== null;
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const handleOpenChange = (newOpen) => {
+        if (!isDisabled) {
+            setIsOpen(newOpen);
+        }
+    };
+    const toggleOpen = () => {
+        handleOpenChange(!isOpen);
+    };
+    const handleCalendarChange = (value, event) => {
+        // react-calendar can return Date, Date[], or null
+        // We only support single date selection, so we take the first date if it's an array
+        if (!value) {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(null);
+            }
+            onChange?.(null);
+            setIsOpen(false);
             return;
-        if (type === "multiple") {
-            const newSelected = !internalSelected;
-            setInternalSelected(newSelected);
-            onSelectionChange?.(newSelected);
         }
-        onClick?.(e);
+        const selectedDate = Array.isArray(value) ? value[0] : value;
+        // Ensure we have a valid Date object
+        if (selectedDate instanceof Date) {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(selectedDate);
+            }
+            onChange?.(selectedDate);
+            setIsOpen(false);
+        }
     };
-    const handleCheckboxChange = (e) => {
+    const handleClear = (e) => {
         e.stopPropagation();
-        if (isDisabled)
-            return;
-        const newSelected = e.target.checked;
-        setInternalSelected(newSelected);
-        onSelectionChange?.(newSelected);
+        if (onClear) {
+            onClear();
+        }
+        else {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(null);
+            }
+            onChange?.(null);
+        }
     };
-    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
-            variant,
-            isDisabled,
-            isSelected: type === "multiple" ? internalSelected : false,
-        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
-                    ? "text-action-ink-primary-normal"
-                    : variant === "negative"
-                        ? "text-action-ink-negative-normal"
-                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
-                            ? "text-action-ink-primary-normal"
-                            : variant === "negative"
-                                ? "text-action-ink-negative-normal"
-                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
-});
-ListItem.displayName = "ListItem";
-
-const DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
-    const renderContent = () => {
-        if (isLoading) {
-            return (jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsx(Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
+    const updateDropdownPlacement = React.useCallback(() => {
+        if (typeof window === "undefined")
+            return;
+        const trigger = datePickerRef.current;
+        if (!trigger)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const calendarHeight = calendarRef.current
+            ? calendarRef.current.offsetHeight
+            : 0;
+        if (calendarHeight === 0) {
+            setDropdownPlacement(spaceBelow >= spaceAbove ? "bottom" : "top");
+            return;
         }
-        if (customContent) {
-            return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "px-1", children: customContent })] }));
+        if (spaceBelow >= calendarHeight || spaceBelow >= spaceAbove) {
+            setDropdownPlacement("bottom");
         }
-        if (isEmpty || items.length === 0) {
-            return (jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsx(Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
+        else {
+            setDropdownPlacement("top");
         }
-        return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "flex flex-col gap-1", children: items.map((item, index) => (jsx(ListItem, { title: item.label, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, variant: item.variant, onClick: () => {
-                            item.onClick?.();
-                            onClose?.();
-                        }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.value))) })] }));
-    };
-    const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
-    const footerVisible = showFooter ?? !disableFooter;
-    return (jsxs("div", { ref: ref, className: cn("bg-white  rounded-large overflow-hidden", widthClass, className), style: {
-            boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
-            ...(width !== "full" && width !== "auto" ? { width } : {}),
-        }, children: [renderContent(), footerVisible && (jsxs("div", { className: "flex flex-col", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
-                            ? "flex-col"
-                            : "items-center flex-row"), children: [jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText }), jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText })] })] }))] }));
-});
-DropdownMenu.displayName = "DropdownMenu";
-
-const dropdownVariants = cva("bg-surface-fill-primary-normal border border-surface-outline-neutral-subtle rounded-large", {
-    variants: {
-        size: {
-            small: "w-64",
-            medium: "w-80",
-            large: "w-96",
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-    },
-});
-const Dropdown = React.forwardRef(({ className, trigger, items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...props }, ref) => {
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
-    const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
-    const dropdownRef = React.useRef(null);
-    const handleOpenChange = (newOpen) => {
-        if (controlledOpen === undefined) {
-            setUncontrolledOpen(newOpen);
+    }, []);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        if (typeof window === "undefined")
+            return;
+        let rafId = requestAnimationFrame(updateDropdownPlacement);
+        const handleUpdate = () => updateDropdownPlacement();
+        window.addEventListener("resize", handleUpdate);
+        window.addEventListener("scroll", handleUpdate, true);
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener("resize", handleUpdate);
+            window.removeEventListener("scroll", handleUpdate, true);
+        };
+    }, [isOpen, updateDropdownPlacement]);
+    React.useEffect(() => {
+        if (isOpen) {
+            updateDropdownPlacement();
         }
-        onOpenChange?.(newOpen);
-    };
-    const toggleOpen = () => {
-        handleOpenChange(!isOpen);
-    };
-    // Close dropdown when clicking outside
+    }, [isOpen, updateDropdownPlacement]);
+    // Close calendar when clicking outside
     React.useEffect(() => {
         const handleClickOutside = (event) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
+            if (datePickerRef.current &&
+                !datePickerRef.current.contains(event.target)) {
                 handleOpenChange(false);
             }
         };
@@ -1940,273 +4407,308 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
             };
         }
     }, [isOpen]);
-    const sizeMap = {
-        small: "w-64",
-        medium: "w-80",
-        large: "w-96",
+    const minDateParsed = parseDate(minDate);
+    const maxDateParsed = parseDate(maxDate);
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+        },
+        medium: {
+            gap: "gap-2",
+        },
+        large: {
+            gap: "gap-3",
+        },
     };
-    return (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
+    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { ref: datePickerRef, className: cn(datePickerVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), "relative w-full cursor-pointer", className), onClick: !isDisabled ? toggleOpen : undefined, role: "button", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [jsx(Calendar$1, { className: cn("shrink-0 w-4 h-4", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : currentValidationState === "positive"
+                                ? "text-feedback-ink-positive-intense"
+                                : currentValidationState === "negative"
+                                    ? "text-feedback-ink-negative-subtle"
+                                    : "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDate(value) : placeholder }), showClearButton && hasValue && !isDisabled && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), isOpen && !isDisabled && (jsx("div", { ref: calendarRef, className: cn("absolute z-50 left-0 bg-surface-fill-neutral-intense rounded-large shadow-lg p-4", dropdownPlacement === "bottom"
+                            ? "top-full mt-1"
+                            : "bottom-full mb-1", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsx("div", { className: "react-calendar-wrapper w-fit", children: jsx(Calendar, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
+                                    const weekdayNames = [
+                                        "Su",
+                                        "Mo",
+                                        "Tu",
+                                        "We",
+                                        "Th",
+                                        "Fr",
+                                        "Sa",
+                                    ];
+                                    return weekdayNames[date.getDay()];
+                                } }) }) }))] }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
 });
-Dropdown.displayName = "Dropdown";
+DatePicker.displayName = "DatePicker";
 
-const tooltipVariants = cva("fixed z-50 bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium border border-popup-outline-subtle flex flex-col  p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
+const dividerVariants = cva("", {
     variants: {
-        isVisible: {
-            true: "opacity-100 pointer-events-auto shadow-[0_4px_20px_rgba(0,0,0,0.15)]",
-            false: "opacity-0 pointer-events-none",
+        orientation: {
+            horizontal: "w-full",
+            vertical: "h-full",
         },
-    },
-    defaultVariants: {
-        isVisible: false,
-    },
-});
-const tooltipArrowVariants = cva("absolute w-0 h-0 border-solid border-[6px] -translate-x-1/2", {
-    variants: {
-        placement: {
-            "top-start": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
-            top: "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
-            "top-end": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
-            "bottom-start": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
-            bottom: "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
-            "bottom-end": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
+        thickness: {
+            thinner: "",
+            thin: "",
+            thick: "",
+            thicker: "",
+        },
+        lineStyle: {
+            solid: "border-solid",
+            dashed: "border-dashed",
+        },
+        variant: {
+            normal: "",
+            subtle: "",
+            muted: "",
         },
     },
+    compoundVariants: [
+        // Horizontal orientation with thickness
+        {
+            orientation: "horizontal",
+            thickness: "thinner",
+            class: "border-t-[0.5px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thin",
+            class: "border-t-[1px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thick",
+            class: "border-t-[2px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thicker",
+            class: "border-t-[3px]",
+        },
+        // Vertical orientation with thickness
+        {
+            orientation: "vertical",
+            thickness: "thinner",
+            class: "border-l-[0.5px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thin",
+            class: "border-l-[1px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thick",
+            class: "border-l-[2px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thicker",
+            class: "border-l-[3px]",
+        },
+        // Normal variant colors
+        {
+            variant: "normal",
+            class: "border-surface-outline-neutral-normal",
+        },
+        // Subtle variant colors
+        {
+            variant: "subtle",
+            class: "border-surface-outline-neutral-subtle",
+        },
+        // Muted variant colors
+        {
+            variant: "muted",
+            class: "border-surface-outline-neutral-muted",
+        },
+    ],
     defaultVariants: {
-        placement: "top",
+        orientation: "horizontal",
+        thickness: "thin",
+        lineStyle: "solid",
+        variant: "normal",
     },
 });
-const Tooltip = React.forwardRef(({ children, heading, description, placement = "top", showArrow = true, className, delay = 200, disabled = false, }, ref) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [position, setPosition] = React.useState({ top: 0, left: 0 });
-    const [arrowPosition, setArrowPosition] = React.useState({ left: 0 });
-    const [actualPlacement, setActualPlacement] = React.useState(placement);
-    const timeoutRef = React.useRef(null);
-    const triggerRef = React.useRef(null);
-    const tooltipRef = React.useRef(null);
-    const calculatePosition = React.useCallback(() => {
-        if (!triggerRef.current || !tooltipRef.current)
-            return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
-        const gap = 8; // 8px gap between trigger and tooltip
-        const arrowSize = 6; // Size of the arrow
-        const viewportPadding = 8; // Minimum padding from viewport edges
-        let top = 0;
-        let left = 0;
-        let currentPlacement = placement;
-        // Calculate initial position based on placement
-        switch (placement) {
-            case "top-start":
-                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
-                left = triggerRect.left;
-                break;
-            case "top":
-                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
-                left =
-                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
-                break;
-            case "top-end":
-                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
-                left = triggerRect.right - tooltipRect.width;
-                break;
-            case "bottom-start":
-                top = triggerRect.bottom + gap + arrowSize;
-                left = triggerRect.left;
-                break;
-            case "bottom":
-                top = triggerRect.bottom + gap + arrowSize;
-                left =
-                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
-                break;
-            case "bottom-end":
-                top = triggerRect.bottom + gap + arrowSize;
-                left = triggerRect.right - tooltipRect.width;
-                break;
-        }
-        // Get viewport dimensions
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Adjust horizontal position to keep tooltip within viewport
-        if (left < viewportPadding) {
-            // Tooltip would overflow on the left
-            left = viewportPadding;
-        }
-        else if (left + tooltipRect.width > viewportWidth - viewportPadding) {
-            // Tooltip would overflow on the right
-            left = viewportWidth - tooltipRect.width - viewportPadding;
-        }
-        // Adjust vertical position to keep tooltip within viewport
-        if (top < viewportPadding) {
-            // Tooltip would overflow at the top
-            // Try to flip to bottom if there's more space there
-            const spaceBelow = viewportHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
-            if (spaceBelow > spaceAbove) {
-                // Flip to bottom
-                top = triggerRect.bottom + gap + arrowSize;
-                // Update placement to reflect the flip
-                if (placement === "top-start")
-                    currentPlacement = "bottom-start";
-                else if (placement === "top")
-                    currentPlacement = "bottom";
-                else if (placement === "top-end")
-                    currentPlacement = "bottom-end";
-            }
-            else {
-                // Keep at top but adjust to stay in viewport
-                top = viewportPadding;
-            }
-        }
-        else if (top + tooltipRect.height > viewportHeight - viewportPadding) {
-            // Tooltip would overflow at the bottom
-            // Try to flip to top if there's more space there
-            const spaceAbove = triggerRect.top;
-            const spaceBelow = viewportHeight - triggerRect.bottom;
-            if (spaceAbove > spaceBelow) {
-                // Flip to top
-                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
-                // Update placement to reflect the flip
-                if (placement === "bottom-start")
-                    currentPlacement = "top-start";
-                else if (placement === "bottom")
-                    currentPlacement = "top";
-                else if (placement === "bottom-end")
-                    currentPlacement = "top-end";
-            }
-            else {
-                // Keep at bottom but adjust to stay in viewport
-                top = viewportHeight - tooltipRect.height - viewportPadding;
-            }
-        }
-        // Calculate arrow position relative to trigger
-        // The arrow should point to the center of the trigger element
-        const triggerCenterX = triggerRect.left + triggerRect.width / 2;
-        const tooltipLeft = left;
-        const arrowLeft = triggerCenterX - tooltipLeft;
-        // Clamp arrow position to stay within tooltip bounds (with padding)
-        const arrowPadding = 16; // Minimum distance from tooltip edges
-        const clampedArrowLeft = Math.max(arrowPadding, Math.min(arrowLeft, tooltipRect.width - arrowPadding));
-        setPosition({ top, left });
-        setArrowPosition({ left: clampedArrowLeft });
-        setActualPlacement(currentPlacement);
-    }, [placement]);
-    const handleMouseEnter = () => {
-        if (disabled)
+const Divider = React.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
+    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
+});
+Divider.displayName = "Divider";
+
+const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+    variants: {
+        variant: {
+            default: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded
+          focus:ring-2
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
+            primary: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded 
+          focus:ring-2 
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            negative: `hover:bg-action-fill-negative-faded 
+          focus:bg-action-fill-negative-faded 
+          focus:ring-2 ring-action-outline-negative-faded-hover
+          border border-transparent
+          `,
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60",
+            false: "",
+        },
+        isSelected: {
+            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        isDisabled: false,
+        isSelected: false,
+    },
+});
+const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
+    const [internalSelected, setInternalSelected] = React.useState(isSelected);
+    // Sync internal state with prop
+    React.useEffect(() => {
+        setInternalSelected(isSelected);
+    }, [isSelected]);
+    const handleClick = (e) => {
+        if (isDisabled)
             return;
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
+        if (type === "multiple") {
+            const newSelected = !internalSelected;
+            setInternalSelected(newSelected);
+            onSelectionChange?.(newSelected);
         }
-        timeoutRef.current = setTimeout(() => {
-            setIsVisible(true);
-        }, delay);
+        onClick?.(e);
     };
-    const handleMouseLeave = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
+    const handleCheckboxChange = (e) => {
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        const newSelected = e.target.checked;
+        setInternalSelected(newSelected);
+        onSelectionChange?.(newSelected);
+    };
+    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
+            variant,
+            isDisabled,
+            isSelected: type === "multiple" ? internalSelected : false,
+        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
+                    ? "text-action-ink-primary-normal"
+                    : variant === "negative"
+                        ? "text-action-ink-negative-normal"
+                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
+                            ? "text-action-ink-primary-normal"
+                            : variant === "negative"
+                                ? "text-action-ink-negative-normal"
+                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
+});
+ListItem.displayName = "ListItem";
+
+const DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
+    const renderContent = () => {
+        if (isLoading) {
+            return (jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsx(Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
         }
-        setIsVisible(false);
+        if (customContent) {
+            return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "px-1", children: customContent })] }));
+        }
+        if (isEmpty || items.length === 0) {
+            return (jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsx(Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
+        }
+        return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "flex flex-col gap-1", children: items.map((item, index) => (jsx(ListItem, { title: item.label, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, variant: item.variant, onClick: () => {
+                            item.onClick?.();
+                            onClose?.();
+                        }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.value))) })] }));
     };
-    const handleFocus = () => {
-        if (disabled)
-            return;
-        setIsVisible(true);
+    const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
+    const footerVisible = showFooter ?? !disableFooter;
+    return (jsxs("div", { ref: ref, className: cn("bg-white  rounded-large overflow-hidden", widthClass, className), style: {
+            boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
+            ...(width !== "full" && width !== "auto" ? { width } : {}),
+        }, children: [renderContent(), footerVisible && (jsxs("div", { className: "flex flex-col", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
+                            ? "flex-col"
+                            : "items-center flex-row"), children: [jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText }), jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText })] })] }))] }));
+});
+DropdownMenu.displayName = "DropdownMenu";
+
+const dropdownVariants = cva("bg-surface-fill-primary-normal border border-surface-outline-neutral-subtle rounded-large", {
+    variants: {
+        size: {
+            small: "w-64",
+            medium: "w-80",
+            large: "w-96",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const Dropdown = React.forwardRef(({ className, trigger, items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
+    const dropdownRef = React.useRef(null);
+    const handleOpenChange = (newOpen) => {
+        if (controlledOpen === undefined) {
+            setUncontrolledOpen(newOpen);
+        }
+        onOpenChange?.(newOpen);
     };
-    const handleBlur = () => {
-        setIsVisible(false);
+    const toggleOpen = () => {
+        handleOpenChange(!isOpen);
     };
+    // Close dropdown when clicking outside
     React.useEffect(() => {
-        if (isVisible) {
-            calculatePosition();
-            window.addEventListener("scroll", calculatePosition, true);
-            window.addEventListener("resize", calculatePosition);
-        }
-        return () => {
-            window.removeEventListener("scroll", calculatePosition, true);
-            window.removeEventListener("resize", calculatePosition);
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                handleOpenChange(false);
+            }
         };
-    }, [isVisible, calculatePosition]);
-    React.useEffect(() => {
-        // Reset actualPlacement when placement prop changes
-        setActualPlacement(placement);
-    }, [placement]);
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [isOpen]);
+    // Close on escape key
     React.useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                handleOpenChange(false);
             }
         };
-    }, []);
-    // Merge refs function
-    const mergeRefs = (...refs) => {
-        return (node) => {
-            refs.forEach((ref) => {
-                if (typeof ref === "function") {
-                    ref(node);
-                }
-                else if (ref && typeof ref === "object" && "current" in ref) {
-                    ref.current = node;
-                }
-            });
-        };
-    };
-    // Clone the child element and add event handlers
-    const trigger = React.cloneElement(children, {
-        ref: mergeRefs(triggerRef, children.ref),
-        onMouseEnter: (e) => {
-            handleMouseEnter();
-            children.props.onMouseEnter?.(e);
-        },
-        onMouseLeave: (e) => {
-            handleMouseLeave();
-            children.props.onMouseLeave?.(e);
-        },
-        onFocus: (e) => {
-            handleFocus();
-            children.props.onFocus?.(e);
-        },
-        onBlur: (e) => {
-            handleBlur();
-            children.props.onBlur?.(e);
-        },
-        "aria-describedby": isVisible ? "tooltip-content" : undefined,
-    });
-    return (jsxs(Fragment, { children: [trigger, jsxs("div", { ref: mergeRefs(tooltipRef, ref), id: "tooltip-content", role: "tooltip", className: cn(tooltipVariants({ isVisible }), className), style: {
-                    top: `${position.top}px`,
-                    left: `${position.left}px`,
-                }, "aria-hidden": !isVisible, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [showArrow && (jsx("div", { className: cn(tooltipArrowVariants({ placement: actualPlacement })), style: {
-                            left: `${arrowPosition.left}px`,
-                        } })), jsxs("div", { className: "relative flex flex-col gap-2", children: [heading && (jsx(Text, { variant: "body", size: "medium", weight: "semibold", color: "onPrimary", children: heading })), jsx(Text, { variant: "body", size: "small", weight: "regular", color: "onPrimary", children: description })] })] })] }));
-});
-Tooltip.displayName = "Tooltip";
-
-const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = false, isRequired = false, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, linkLeadingIcon, linkTrailingIcon, htmlFor, className, labelClassName, linkClassName, }, ref) => {
-    // Size-based configurations
-    const sizeConfig = {
-        small: {
-            textClassName: "text-body-xsmall-semibold",
-            textClassNameRegular: "text-caption-small-regular",
-            iconSize: 12,
-            gap: "gap-1.5",
-        },
-        medium: {
-            textClassName: "text-body-small-semibold",
-            textClassNameRegular: "text-caption-medium-regular",
-            iconSize: 14,
-            gap: "gap-2",
-        },
-        large: {
-            textClassName: "text-body-medium-semibold",
-            textClassNameRegular: "text-caption-large-regular",
-            iconSize: 16,
-            gap: "gap-2.5",
-        },
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            return () => {
+                document.removeEventListener("keydown", handleEscape);
+            };
+        }
+    }, [isOpen]);
+    const sizeMap = {
+        small: "w-64",
+        medium: "w-80",
+        large: "w-96",
     };
-    const config = sizeConfig[size];
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx("span", { className: cn(config.textClassName, "text-surface-neutral-subtle"), children: label }), isRequired && (jsx("span", { className: cn(config.textClassName, "text-color-negative ml-0.5"), children: "*" })), isOptional && (jsx("span", { className: cn(config.textClassNameRegular, "text-surface-neutral-muted italic ml-1"), children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsx(Icon, { name: "info", size: config.iconSize }) }))] }), LinkComponent
-                ? LinkComponent
-                : linkText && (jsx(Link, { href: linkHref, onClick: onLinkClick, type: "action", color: "primary", size: size === "large" ? "small" : "xsmall", leadingIcon: linkLeadingIcon, trailingIcon: linkTrailingIcon, children: linkText }))] }));
+    return (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
 });
-FormHeader.displayName = "FormHeader";
+Dropdown.displayName = "Dropdown";
 
 const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, children, size = "medium", showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
     const modalRef = React.useRef(null);
@@ -3713,5 +6215,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Alert, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Alert, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map