@servicetitan/anvil2 1.45.1 → 1.46.0

package/dist/{Calendar-Dq_of5A3.js → Calendar-BQ5F2ENO.js}

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useState, useEffect, useRef, useCallback, useMemo, useLayoutEffect, useId } from 'react';
+import * as React from 'react';
+import { createContext, useContext, forwardRef, useState, useEffect, useRef, useCallback, useMemo, useId } from 'react';
 import { B as Button } from './Button-BxFXQ0-n.js';
 import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
 import { S as SvgKeyboardArrowUp } from './keyboard_arrow_up-CxzK6LAl.js';
@@ -8,8 +9,11 @@ import { c as cx } from './index-tZvMCc77.js';
 import { S as SrOnly } from './SrOnly-CTsYSuby.js';
 import { u as useSwipe } from './useSwipe-CULmVQEk.js';
 import { G as Grid } from './Grid-MGUC698u.js';
-import { S as SelectCard } from './SelectCard-DOGCG0zr.js';
+import { S as SelectCard } from './SelectCard-BTYZg9TG.js';
 import { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
+import { flushSync } from 'react-dom';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
+import { u as usePrevious } from './usePrevious-Bvq-5auG.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
 
 import './Calendar.css';// these aren't really private, but nor are they really useful to document
@@ -8174,37 +8178,37 @@ const CalendarYearButton = forwardRef((props, ref) => {
 });
 CalendarYearButton.displayName = "CalendarYearButton";
 
-const calendar = "_calendar_sc127_2";
-const header = "_header_sc127_15";
-const controller = "_controller_sc127_46";
-const spacer = "_spacer_sc127_53";
-const cell = "_cell_sc127_66";
-const overflow = "_overflow_sc127_97";
-const weekday = "_weekday_sc127_103";
-const range = "_range_sc127_148";
-const selected = "_selected_sc127_158";
-const styles = {
+const calendar = "_calendar_m3fpt_2";
+const header = "_header_m3fpt_15";
+const controller = "_controller_m3fpt_46";
+const spacer = "_spacer_m3fpt_53";
+const cell = "_cell_m3fpt_66";
+const overflow = "_overflow_m3fpt_97";
+const weekday = "_weekday_m3fpt_103";
+const range = "_range_m3fpt_148";
+const selected = "_selected_m3fpt_158";
+const styles$1 = {
 	calendar: calendar,
 	header: header,
 	controller: controller,
 	spacer: spacer,
-	"day-grid": "_day-grid_sc127_56",
+	"day-grid": "_day-grid_m3fpt_56",
 	cell: cell,
 	overflow: overflow,
 	weekday: weekday,
-	"month-selection": "_month-selection_sc127_115",
-	"selection-checkbox": "_selection-checkbox_sc127_115",
-	"year-selection": "_year-selection_sc127_116",
-	"selection-card": "_selection-card_sc127_125",
-	"range-first": "_range-first_sc127_148",
-	"range-last": "_range-last_sc127_148",
+	"month-selection": "_month-selection_m3fpt_115",
+	"selection-checkbox": "_selection-checkbox_m3fpt_115",
+	"selection-card": "_selection-card_m3fpt_125",
+	"range-first": "_range-first_m3fpt_148",
+	"range-last": "_range-last_m3fpt_148",
 	range: range,
 	selected: selected,
-	"is-unavailable": "_is-unavailable_sc127_166",
-	"hover-last": "_hover-last_sc127_224",
-	"range-fill": "_range-fill_sc127_228",
-	"range-disabled": "_range-disabled_sc127_238",
-	"controller-button": "_controller-button_sc127_246"
+	"is-unavailable": "_is-unavailable_m3fpt_166",
+	"hover-last": "_hover-last_m3fpt_224",
+	"range-fill": "_range-fill_m3fpt_228",
+	"range-disabled": "_range-disabled_m3fpt_238",
+	"controller-button": "_controller-button_m3fpt_246",
+	"year-selector": "_year-selector_m3fpt_254"
 };
 
 const CalendarPrev = forwardRef(
@@ -8257,7 +8261,7 @@ const CalendarPrev = forwardRef(
       {
         ref,
         onClick: onClickHandler,
-        className: cx(styles["controller-button"], className),
+        className: cx(styles$1["controller-button"], className),
         appearance: "ghost",
         size: "small",
         icon: SvgKeyboardArrowLeft,
@@ -8322,7 +8326,7 @@ const CalendarNext = forwardRef(
         onClick: onClickHandler,
         appearance: "ghost",
         size: "small",
-        className: cx(styles["controller-button"], className),
+        className: cx(styles$1["controller-button"], className),
         icon: SvgKeyboardArrowRight,
         "aria-label": "Next Month",
         "data-anv": "calendar-next",
@@ -8611,14 +8615,14 @@ const CalendarDay = forwardRef(
       defaultTimeZone
     );
     const hoverRange = range && hoveredDate && value.start && !value.end && date.toMillis() > value.start.toMillis() && date.toMillis() <= hoveredDate.toMillis();
-    const cellCx = cx(styles["cell"], {
-      [styles["selected"]]: !isUnavailable && isSelectedDate(date),
-      [styles["range-first"]]: range && value.start && (value.end || hoveredDate) && isSameDay(date, value.start),
-      [styles["range-last"]]: range && (value.start && value.end && isSameDay(date, value.end) || hoverRange && isSameDay(date, hoveredDate)),
-      [styles["range"]]: isRange(date) || hoverRange,
-      [styles["is-unavailable"]]: isUnavailable,
-      [styles["overflow"]]: !isSameMonth(date, focusedDate),
-      [styles["hover-last"]]: hoverRange && isSameDay(date, hoveredDate)
+    const cellCx = cx(styles$1["cell"], {
+      [styles$1["selected"]]: !isUnavailable && isSelectedDate(date),
+      [styles$1["range-first"]]: range && value.start && (value.end || hoveredDate) && isSameDay(date, value.start),
+      [styles$1["range-last"]]: range && (value.start && value.end && isSameDay(date, value.end) || hoverRange && isSameDay(date, hoveredDate)),
+      [styles$1["range"]]: isRange(date) || hoverRange,
+      [styles$1["is-unavailable"]]: isUnavailable,
+      [styles$1["overflow"]]: !isSameMonth(date, focusedDate),
+      [styles$1["hover-last"]]: hoverRange && isSameDay(date, hoveredDate)
     });
     const isMinDate = minDate !== null && date.toMillis() <= minDate?.toMillis();
     const isMaxDate = maxDate !== null && date.toMillis() >= maxDate?.toMillis();
@@ -8634,9 +8638,9 @@ const CalendarDay = forwardRef(
             "div",
             {
               role: "presentation",
-              className: cx(styles["range-fill"], {
-                [styles["range-disabled"]]: isDisabled,
-                [styles["hover-last"]]: hoverRange && isSameDay(date, hoveredDate)
+              className: cx(styles$1["range-fill"], {
+                [styles$1["range-disabled"]]: isDisabled,
+                [styles$1["hover-last"]]: hoverRange && isSameDay(date, hoveredDate)
               })
             }
           ) : null,
@@ -8649,7 +8653,7 @@ const CalendarDay = forwardRef(
               className: cellCx,
               onKeyDown: onKeyDownHandler,
               onMouseEnter: () => onMouseEnterHandler(date),
-              tabIndex: isSameDay(date, focusedDate) ? 0 : -1,
+              tabIndex: disableAutofocus ? -1 : isSameDay(date, focusedDate) ? 0 : -1,
               disabled: isDisabled ? true : void 0,
               "aria-label": `${date.toLocaleString(dateFormat)}${isSelectedDate(date) ? " selected" : ""}${isMinDate ? ", You are on the first available date" : ""}${isMaxDate ? ", You are on the last available date" : ""}`,
               id: `${uid}-${date.toISODate()}`,
@@ -8788,7 +8792,7 @@ const CalendarMonth = forwardRef(
       startDay
     } = context;
     const initialized = useRef(false);
-    const ViewCX = cx(styles["grid"], className);
+    const ViewCX = cx(styles$1["grid"], className);
     const futureDateSelection = useCallback(
       (targetDate) => {
         if (maxDate !== null && targetDate.toMillis() > maxDate?.toMillis()) {
@@ -8919,24 +8923,24 @@ const CalendarMonth = forwardRef(
           ...rest,
           ...touchProps,
           children: [
-            /* @__PURE__ */ jsxs("thead", { "aria-hidden": true, className: styles["weekdays"], children: [
+            /* @__PURE__ */ jsxs("thead", { "aria-hidden": true, className: styles$1["weekdays"], children: [
               /* @__PURE__ */ jsx("tr", { children: weekdaysArr.map((weekday, i) => {
                 return /* @__PURE__ */ jsx(
                   "th",
                   {
                     scope: "col",
-                    className: styles["weekday"],
+                    className: styles$1["weekday"],
                     children: weekday
                   },
                   `${weekday}${i}`
                 );
               }) }),
-              /* @__PURE__ */ jsx("tr", { className: styles["spacer"], children: /* @__PURE__ */ jsx("td", { colSpan: 7 }) })
+              /* @__PURE__ */ jsx("tr", { className: styles$1["spacer"], children: /* @__PURE__ */ jsx("td", { colSpan: 7 }) })
             ] }),
             /* @__PURE__ */ jsx(
               "tbody",
               {
-                className: styles["day-grid"],
+                className: styles$1["day-grid"],
                 children: splitArr.map((week, i) => {
                   return /* @__PURE__ */ jsx(CalendarWeek, { week }, i);
                 })
@@ -8976,7 +8980,7 @@ const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref)
     }),
     [maxDate, minDate, selectedYear]
   );
-  const classes = cx(styles["month-selection"], props.className);
+  const classes = cx(styles$1["month-selection"], props.className);
   const [focusedIndex, setFocusedIndex] = useState(selectedMonth - 1);
   useEffect(() => {
     if (minDate || maxDate) {
@@ -9085,10 +9089,10 @@ const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref)
               onChange: () => onMonthSelection(month),
               checked: selectedMonth === month && selectedYear === currentDate.year,
               checkboxProps: {
-                className: styles["selection-checkbox"],
+                className: styles$1["selection-checkbox"],
                 tabIndex: focusedIndex === index ? 0 : -1
               },
-              className: styles["selection-card"],
+              className: styles$1["selection-card"],
               children: DateTime.fromObject({ month }).toFormat("MMMM")
             }
           ) }, month.toString()))
@@ -9099,134 +9103,1120 @@ const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref)
 });
 CalendarMonthSelection.displayName = "CalendarMonthSelection";
 
-const CalendarYearSelection = forwardRef(({ onYearSelection, ...props }, ref) => {
-  const { maxDate, minDate, selectedYear } = useCalendar();
-  const containerRef = useRef(null);
-  const combinedRef = useMergeRefs([ref, containerRef]);
-  const initialYears = useMemo(
-    () => Array.from({ length: 52 }, (_, i) => {
-      const year = selectedYear - (selectedYear % 2 ? 24 : 25) + i;
-      const disabled = minDate && year < minDate.year || maxDate && year > maxDate.year;
-      return { year, disabled: disabled ?? false };
-    }),
-    [selectedYear, minDate, maxDate]
+function memo(getDeps, fn, opts) {
+  let deps = opts.initialDeps ?? [];
+  let result;
+  function memoizedFunction() {
+    var _a, _b, _c, _d;
+    let depTime;
+    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
+    }
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
+    result = fn(...newDeps);
+    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = " " + str;
+        }
+        return str;
+      };
+      console.info(
+        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * resultFpsPercentage, 120)
+        )}deg 100% 31%);`,
+        opts == null ? void 0 : opts.key
+      );
+    }
+    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
+    return result;
+  }
+  memoizedFunction.updateDeps = (newDeps) => {
+    deps = newDeps;
+  };
+  return memoizedFunction;
+}
+function notUndefined(value, msg) {
+  if (value === void 0) {
+    throw new Error(`Unexpected undefined${""}`);
+  } else {
+    return value;
+  }
+}
+const approxEqual = (a, b) => Math.abs(a - b) < 1.01;
+const debounce = (targetWindow, fn, ms) => {
+  let timeoutId;
+  return function(...args) {
+    targetWindow.clearTimeout(timeoutId);
+    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+const getRect = (element) => {
+  const { offsetWidth, offsetHeight } = element;
+  return { width: offsetWidth, height: offsetHeight };
+};
+const defaultKeyExtractor = (index) => index;
+const defaultRangeExtractor = (range) => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+const observeElementRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  const handler = (rect) => {
+    const { width, height } = rect;
+    cb({ width: Math.round(width), height: Math.round(height) });
+  };
+  handler(getRect(element));
+  if (!targetWindow.ResizeObserver) {
+    return () => {
+    };
+  }
+  const observer = new targetWindow.ResizeObserver((entries) => {
+    const run = () => {
+      const entry = entries[0];
+      if (entry == null ? void 0 : entry.borderBoxSize) {
+        const box = entry.borderBoxSize[0];
+        if (box) {
+          handler({ width: box.inlineSize, height: box.blockSize });
+          return;
+        }
+      }
+      handler(getRect(element));
+    };
+    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => {
+    observer.unobserve(element);
+  };
+};
+const addEventListenerOptions = {
+  passive: true
+};
+const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
+const observeElementOffset = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  let offset = 0;
+  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
+    targetWindow,
+    () => {
+      cb(offset, false);
+    },
+    instance.options.isScrollingResetDelay
   );
-  const [dates, setDates] = useState(initialYears);
-  useLayoutEffect(() => {
-    containerRef.current?.scrollTo({
-      top: (containerRef.current?.scrollHeight ?? 0) / 2 - (containerRef.current?.clientHeight ?? 0) / 2
-    });
-    const container = containerRef.current;
-    if (!container) return;
-    const handleScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const distanceFromTop = scrollTop;
-      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-      if (distanceFromTop < 200 && !minDate) {
-        setDates((prevDates) => {
-          const firstYear = prevDates[0].year;
-          const newDates = Array.from({ length: 20 }, (_, i) => ({
-            year: firstYear - (20 - i),
-            disabled: false
-          }));
-          return [...newDates, ...prevDates];
+  const createHandler = (isScrolling) => () => {
+    const { horizontal, isRtl } = instance.options;
+    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+    fallback();
+    cb(offset, isScrolling);
+  };
+  const handler = createHandler(true);
+  const endHandler = createHandler(false);
+  endHandler();
+  element.addEventListener("scroll", handler, addEventListenerOptions);
+  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
+  if (registerScrollendEvent) {
+    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
+  }
+  return () => {
+    element.removeEventListener("scroll", handler);
+    if (registerScrollendEvent) {
+      element.removeEventListener("scrollend", endHandler);
+    }
+  };
+};
+const measureElement = (element, entry, instance) => {
+  if (entry == null ? void 0 : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size = Math.round(
+        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+      return size;
+    }
+  }
+  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
+};
+const elementScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
+  });
+};
+class Virtualizer {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.targetWindow = null;
+    this.isScrolling = false;
+    this.measurementsCache = [];
+    this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollRect = null;
+    this.scrollOffset = null;
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.elementsCache = /* @__PURE__ */ new Map();
+    this.observer = /* @__PURE__ */ (() => {
+      let _ro = null;
+      const get = () => {
+        if (_ro) {
+          return _ro;
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
+          return null;
+        }
+        return _ro = new this.targetWindow.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const run = () => {
+              this._measureElement(entry.target, entry);
+            };
+            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+          });
+        });
+      };
+      return {
+        disconnect: () => {
+          var _a;
+          (_a = get()) == null ? void 0 : _a.disconnect();
+          _ro = null;
+        },
+        observe: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.unobserve(target);
+        }
+      };
+    })();
+    this.range = null;
+    this.setOptions = (opts2) => {
+      Object.entries(opts2).forEach(([key, value]) => {
+        if (typeof value === "undefined") delete opts2[key];
+      });
+      this.options = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: () => {
+        },
+        measureElement,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        isScrollingResetDelay: 150,
+        enabled: true,
+        isRtl: false,
+        useScrollendEvent: false,
+        useAnimationFrameWithResizeObserver: false,
+        ...opts2
+      };
+    };
+    this.notify = (sync) => {
+      var _a, _b;
+      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
+    };
+    this.maybeNotify = memo(
+      () => {
+        this.calculateRange();
+        return [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ];
+      },
+      (isScrolling) => {
+        this.notify(isScrolling);
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "maybeNotify",
+        debug: () => this.options.debug,
+        initialDeps: [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ]
+      }
+    );
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((d) => d());
+      this.unsubs = [];
+      this.observer.disconnect();
+      this.scrollElement = null;
+      this.targetWindow = null;
+    };
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _a;
+      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        if (!scrollElement) {
+          this.maybeNotify();
+          return;
+        }
+        this.scrollElement = scrollElement;
+        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
+          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
+        } else {
+          this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
+        }
+        this.elementsCache.forEach((cached) => {
+          this.observer.observe(cached);
         });
-      } else if (distanceFromBottom < 200 && !maxDate) {
-        setDates((prevDates) => {
-          const lastYear = prevDates[prevDates.length - 1].year;
-          const newDates = Array.from({ length: 20 }, (_, i) => ({
-            year: lastYear + (i + 1),
-            disabled: false
-          }));
-          return [...prevDates, ...newDates];
+        this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
         });
+        this.unsubs.push(
+          this.options.observeElementRect(this, (rect) => {
+            this.scrollRect = rect;
+            this.maybeNotify();
+          })
+        );
+        this.unsubs.push(
+          this.options.observeElementOffset(this, (offset, isScrolling) => {
+            this.scrollAdjustments = 0;
+            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
+            this.scrollOffset = offset;
+            this.isScrolling = isScrolling;
+            this.maybeNotify();
+          })
+        );
       }
     };
-    container.addEventListener("scroll", handleScroll);
-    return () => container.removeEventListener("scroll", handleScroll);
-  }, [minDate, maxDate]);
-  const classes = cx(styles["year-selection"], props.className);
-  const [focusedIndex, setFocusedIndex] = useState(
-    // start focused on the middle of the year selection, with odd numbers on the left
-    selectedYear % 2 ? 24 : 25
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      const target = e.target;
-      const cards = containerRef.current?.querySelectorAll(
-        "input[type='checkbox']"
-      );
-      if (!cards || cards.length === 0) {
+    this.getSize = () => {
+      if (!this.options.enabled) {
+        this.scrollRect = null;
+        return 0;
+      }
+      this.scrollRect = this.scrollRect ?? this.options.initialRect;
+      return this.scrollRect[this.options.horizontal ? "width" : "height"];
+    };
+    this.getScrollOffset = () => {
+      if (!this.options.enabled) {
+        this.scrollOffset = null;
+        return 0;
+      }
+      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
+      return this.scrollOffset;
+    };
+    this.getFurthestMeasurement = (measurements, index) => {
+      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
+      const furthestMeasurements = /* @__PURE__ */ new Map();
+      for (let m = index - 1; m >= 0; m--) {
+        const measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
+        }
+        const previousFurthestMeasurement = furthestMeasurements.get(
+          measurement.lane
+        );
+        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+          furthestMeasurements.set(measurement.lane, measurement);
+        } else if (measurement.end < previousFurthestMeasurement.end) {
+          furthestMeasurementsFound.set(measurement.lane, true);
+        }
+        if (furthestMeasurementsFound.size === this.options.lanes) {
+          break;
+        }
+      }
+      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
+        if (a.end === b.end) {
+          return a.index - b.index;
+        }
+        return a.end - b.end;
+      })[0] : void 0;
+    };
+    this.getMeasurementOptions = memo(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled
+      ],
+      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count,
+          paddingStart,
+          scrollMargin,
+          getItemKey,
+          enabled
+        };
+      },
+      {
+        key: false
+      }
+    );
+    this.getMeasurements = memo(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
+        if (!enabled) {
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          return [];
+        }
+        if (this.measurementsCache.length === 0) {
+          this.measurementsCache = this.options.initialMeasurementsCache;
+          this.measurementsCache.forEach((item) => {
+            this.itemSizeCache.set(item.key, item.size);
+          });
+        }
+        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        const measurements = this.measurementsCache.slice(0, min);
+        for (let i = min; i < count; i++) {
+          const key = getItemKey(i);
+          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+          const measuredSize = itemSizeCache.get(key);
+          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          const end = start + size;
+          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+          measurements[i] = {
+            index: i,
+            start,
+            size,
+            end,
+            key,
+            lane
+          };
+        }
+        this.measurementsCache = measurements;
+        return measurements;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    );
+    this.calculateRange = memo(
+      () => [
+        this.getMeasurements(),
+        this.getSize(),
+        this.getScrollOffset(),
+        this.options.lanes
+      ],
+      (measurements, outerSize, scrollOffset, lanes) => {
+        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset,
+          lanes
+        }) : null;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualIndexes = memo(
+      () => {
+        let startIndex = null;
+        let endIndex = null;
+        const range = this.calculateRange();
+        if (range) {
+          startIndex = range.startIndex;
+          endIndex = range.endIndex;
+        }
+        this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
+        return [
+          this.options.rangeExtractor,
+          this.options.overscan,
+          this.options.count,
+          startIndex,
+          endIndex
+        ];
+      },
+      (rangeExtractor, overscan, count, startIndex, endIndex) => {
+        return startIndex === null || endIndex === null ? [] : rangeExtractor({
+          startIndex,
+          endIndex,
+          overscan,
+          count
+        });
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
+        debug: () => this.options.debug
+      }
+    );
+    this.indexFromElement = (node) => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(
+          `Missing attribute name '${attributeName}={index}' on measured element.`
+        );
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = (node, entry) => {
+      const index = this.indexFromElement(node);
+      const item = this.measurementsCache[index];
+      if (!item) {
         return;
       }
-      const cardArray = Array.from(cards);
-      const currentIndex = cardArray.indexOf(target);
-      if (currentIndex === -1) return;
-      const updateFocusedIndex = (index) => {
-        e.preventDefault();
-        cardArray[index].focus();
-        setFocusedIndex(index);
+      const key = item.key;
+      const prevNode = this.elementsCache.get(key);
+      if (prevNode !== node) {
+        if (prevNode) {
+          this.observer.unobserve(prevNode);
+        }
+        this.observer.observe(node);
+        this.elementsCache.set(key, node);
+      }
+      if (node.isConnected) {
+        this.resizeItem(index, this.options.measureElement(node, entry, this));
+      }
+    };
+    this.resizeItem = (index, size) => {
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
+      const delta = size - itemSize;
+      if (delta !== 0) {
+        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("correction", delta);
+          }
+          this._scrollToOffset(this.getScrollOffset(), {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: void 0
+          });
+        }
+        this.pendingMeasuredCacheIndexes.push(item.index);
+        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
+        this.notify(false);
+      }
+    };
+    this.measureElement = (node) => {
+      if (!node) {
+        this.elementsCache.forEach((cached, key) => {
+          if (!cached.isConnected) {
+            this.observer.unobserve(cached);
+            this.elementsCache.delete(key);
+          }
+        });
+        return;
+      }
+      this._measureElement(node, void 0);
+    };
+    this.getVirtualItems = memo(
+      () => [this.getVirtualIndexes(), this.getMeasurements()],
+      (indexes, measurements) => {
+        const virtualItems = [];
+        for (let k = 0, len = indexes.length; k < len; k++) {
+          const i = indexes[k];
+          const measurement = measurements[i];
+          virtualItems.push(measurement);
+        }
+        return virtualItems;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualItemForOffset = (offset) => {
+      const measurements = this.getMeasurements();
+      if (measurements.length === 0) {
+        return void 0;
+      }
+      return notUndefined(
+        measurements[findNearestBinarySearch(
+          0,
+          measurements.length - 1,
+          (index) => notUndefined(measurements[index]).start,
+          offset
+        )]
+      );
+    };
+    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        align = toOffset >= scrollOffset + size ? "end" : "start";
+      }
+      if (align === "center") {
+        toOffset += (itemSize - size) / 2;
+      } else if (align === "end") {
+        toOffset -= size;
+      }
+      const maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
+      return Math.max(Math.min(maxOffset, toOffset), 0);
+    };
+    this.getOffsetForIndex = (index, align = "auto") => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return void 0;
+      }
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
+          align = "end";
+        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
+          align = "start";
+        } else {
+          return [scrollOffset, align];
+        }
+      }
+      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(toOffset, align, item.size),
+        align
+      ];
+    };
+    this.isDynamicMode = () => this.elementsCache.size > 0;
+    this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
+      }
+      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
+        adjustments: void 0,
+        behavior
+      });
+    };
+    this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
+      }
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      let attempts = 0;
+      const maxAttempts = 10;
+      const tryScroll = (currentAlign) => {
+        if (!this.targetWindow) return;
+        const offsetInfo = this.getOffsetForIndex(index, currentAlign);
+        if (!offsetInfo) {
+          console.warn("Failed to get offset for index:", index);
+          return;
+        }
+        const [offset, align] = offsetInfo;
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.targetWindow.requestAnimationFrame(() => {
+          const currentOffset = this.getScrollOffset();
+          const afterInfo = this.getOffsetForIndex(index, align);
+          if (!afterInfo) {
+            console.warn("Failed to get offset for index:", index);
+            return;
+          }
+          if (!approxEqual(afterInfo[0], currentOffset)) {
+            scheduleRetry(align);
+          }
+        });
       };
-      switch (e.key) {
-        case "ArrowLeft":
-          updateFocusedIndex(currentIndex - 1);
-          break;
-        case "ArrowRight":
-          updateFocusedIndex(currentIndex + 1);
-          break;
-        case "ArrowUp":
-          updateFocusedIndex(currentIndex - 2);
-          break;
-        case "ArrowDown":
-          updateFocusedIndex(currentIndex + 2);
-          break;
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          onYearSelection(dates[currentIndex].year);
-          break;
+      const scheduleRetry = (align) => {
+        if (!this.targetWindow) return;
+        attempts++;
+        if (attempts < maxAttempts) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("Schedule retry", attempts, maxAttempts);
+          }
+          this.targetWindow.requestAnimationFrame(() => tryScroll(align));
+        } else {
+          console.warn(
+            `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
+          );
+        }
+      };
+      tryScroll(initialAlign);
+    };
+    this.scrollBy = (delta, { behavior } = {}) => {
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
       }
-    },
-    [dates, onYearSelection]
+      this._scrollToOffset(this.getScrollOffset() + delta, {
+        adjustments: void 0,
+        behavior
+      });
+    };
+    this.getTotalSize = () => {
+      var _a;
+      const measurements = this.getMeasurements();
+      let end;
+      if (measurements.length === 0) {
+        end = this.options.paddingStart;
+      } else if (this.options.lanes === 1) {
+        end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
+      } else {
+        const endByLane = Array(this.options.lanes).fill(null);
+        let endIndex = measurements.length - 1;
+        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
+          const item = measurements[endIndex];
+          if (endByLane[item.lane] === null) {
+            endByLane[item.lane] = item.end;
+          }
+          endIndex--;
+        }
+        end = Math.max(...endByLane.filter((val) => val !== null));
+      }
+      return Math.max(
+        end - this.options.scrollMargin + this.options.paddingEnd,
+        0
+      );
+    };
+    this._scrollToOffset = (offset, {
+      adjustments,
+      behavior
+    }) => {
+      this.options.scrollToFn(offset, { behavior, adjustments }, this);
+    };
+    this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ new Map();
+      this.notify(false);
+    };
+    this.setOptions(opts);
+  }
+}
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange({
+  measurements,
+  outerSize,
+  scrollOffset,
+  lanes
+}) {
+  const lastIndex = measurements.length - 1;
+  const getOffset = (index) => measurements[index].start;
+  if (measurements.length <= lanes) {
+    return {
+      startIndex: 0,
+      endIndex: lastIndex
+    };
+  }
+  let startIndex = findNearestBinarySearch(
+    0,
+    lastIndex,
+    getOffset,
+    scrollOffset
+  );
+  let endIndex = startIndex;
+  if (lanes === 1) {
+    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
+      endIndex++;
+    }
+  } else if (lanes > 1) {
+    const endPerLane = Array(lanes).fill(0);
+    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
+      const item = measurements[endIndex];
+      endPerLane[item.lane] = item.end;
+      endIndex++;
+    }
+    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
+    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
+      const item = measurements[startIndex];
+      startPerLane[item.lane] = item.start;
+      startIndex--;
+    }
+    startIndex = Math.max(0, startIndex - startIndex % lanes);
+    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
+  }
+  return { startIndex, endIndex };
+}
+
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useVirtualizerBase(options) {
+  const rerender = React.useReducer(() => ({}), {})[1];
+  const resolvedOptions = {
+    ...options,
+    onChange: (instance2, sync) => {
+      var _a;
+      if (sync) {
+        flushSync(rerender);
+      } else {
+        rerender();
+      }
+      (_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
+    }
+  };
+  const [instance] = React.useState(
+    () => new Virtualizer(resolvedOptions)
   );
+  instance.setOptions(resolvedOptions);
+  useIsomorphicLayoutEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
+}
+
+const styles = {
+	"year-selector": "_year-selector_1pxps_2",
+	"year-grid": "_year-grid_1pxps_9",
+	"year-item": "_year-item_1pxps_26",
+	"pseudo-focused": "_pseudo-focused_1pxps_29"
+};
+
+const useYearSelectorKeys = ({
+  columns,
+  scrollToYear,
+  initialFocus,
+  onSelect,
+  onConfirm,
+  pseudoFocused,
+  setPseudoFocused,
+  min,
+  max,
+  disabled,
+  required
+}) => {
+  const listRef = useRef(null);
+  useEffect(() => {
+    const list = listRef.current;
+    const handleKeyDown = (e) => {
+      if (pseudoFocused === null) return;
+      if ([
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "PageUp",
+        "PageDown",
+        "Enter",
+        " ",
+        "Backspace",
+        "Delete"
+      ].includes(e.key)) {
+        e.preventDefault();
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") {
+          const newYear = e.key === "ArrowLeft" || e.key === "ArrowUp" ? pseudoFocused - 1 : pseudoFocused + 1;
+          const clampedYear = Math.min(Math.max(newYear, min), max);
+          scrollToYear(newYear, { focus: true });
+          setPseudoFocused(newYear);
+          if (!disabled) {
+            onSelect(clampedYear);
+          }
+          return;
+        }
+        if (!required && (e.key === "Backspace" || e.key === "Delete")) {
+          onSelect(null);
+          return;
+        }
+        if (e.key === "PageUp" || e.key === "PageDown") {
+          const newYear = e.key === "PageUp" ? min : max;
+          scrollToYear(newYear, { focus: true });
+          setPseudoFocused(newYear);
+          if (!disabled) {
+            onSelect(newYear);
+          }
+          return;
+        }
+        if (e.key === "Home") {
+          scrollToYear(initialFocus, { focus: true });
+          setPseudoFocused(initialFocus);
+          if (!disabled) {
+            onSelect(initialFocus);
+          }
+          return;
+        }
+        if (e.key === "Enter" || e.key === " ") {
+          if (!disabled) {
+            onConfirm();
+          }
+          return;
+        }
+      }
+    };
+    list?.addEventListener("keydown", handleKeyDown);
+    return () => {
+      list?.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [
+    pseudoFocused,
+    columns,
+    scrollToYear,
+    onSelect,
+    min,
+    max,
+    initialFocus,
+    disabled,
+    setPseudoFocused,
+    required,
+    onConfirm
+  ]);
+  return { listRef };
+};
+
+const YearItem = ({
+  year,
+  onChange,
+  selected,
+  pseudoFocused,
+  disabled,
+  onFocus,
+  ...rest
+}) => {
   return /* @__PURE__ */ jsx(
-    "div",
+    SelectCard,
     {
-      ref: combinedRef,
-      "data-anv": "calendar-year-selection",
-      className: classes,
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar year selection", children: /* @__PURE__ */ jsx(
-        Grid,
-        {
-          templateColumns: "repeat(2, minmax(0, 1fr))",
-          gap: 3,
-          onKeyDown: handleKeyDown,
-          role: "row",
-          children: dates.map(({ year, disabled }, index) => {
-            const yearDate = DateTime.fromObject({ year }).toFormat("yyyy");
-            return /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
-              SelectCard,
-              {
-                id: yearDate,
-                onChange: () => onYearSelection(year),
-                checked: selectedYear === year,
-                checkboxProps: {
-                  className: styles["selection-checkbox"],
-                  tabIndex: focusedIndex === index ? 0 : -1
-                },
-                className: styles["selection-card"],
-                disabled,
-                children: yearDate
-              }
-            ) }, yearDate);
-          })
-        }
-      ) })
+      disabled,
+      id: year,
+      onChange: !disabled ? () => onChange(year) : () => {
+      },
+      checked: selected,
+      checkboxProps: {
+        tabIndex: -1,
+        onFocus
+      },
+      flexGrow: 1,
+      className: cx(styles["year-item"], {
+        [styles["pseudo-focused"]]: pseudoFocused
+      }),
+      "data-year": year,
+      tabIndex: -1,
+      ...rest,
+      children: year
     }
   );
-});
-CalendarYearSelection.displayName = "CalendarYearSelection";
+};
+
+const DEFAULT_MIN = 1900;
+const DEFAULT_MAX = 2200;
+const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+const YearSelector = forwardRef(
+  ({
+    min = DEFAULT_MIN,
+    max = DEFAULT_MAX,
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    onChange,
+    onConfirm,
+    startingYear = currentYear,
+    columns: columnsProp,
+    className,
+    required = false,
+    disabled = false,
+    ariaLabel = "Year selection",
+    rootProps
+  }, ref) => {
+    const columns = Math.max(columnsProp ?? 2, 1);
+    const [value, setValue] = useOptionallyControlledState({
+      controlledValue: valueProp,
+      defaultValue: defaultValueProp ?? null,
+      onChange
+    });
+    const previousValue = usePrevious(value);
+    const initialFocusYear = value ?? startingYear;
+    const [pseudoFocused, setPseudoFocused] = useState(initialFocusYear);
+    const handleChange = (year) => {
+      if (!required && value === year) {
+        setValue(null);
+        return;
+      }
+      setValue(year);
+      if (year !== null) {
+        setPseudoFocused(year);
+      }
+    };
+    const handleItemChange = (year) => {
+      handleChange(year);
+      onConfirm?.(year);
+    };
+    const gap = 12;
+    const rowHeight = 58;
+    const rowCount = Math.ceil((max - min + 1) / columns);
+    const initialOffset = (initialFocusYear - min) * (rowHeight + gap) / columns + gap / 2;
+    const rowVirtualizer = useVirtualizer({
+      count: rowCount,
+      getScrollElement: () => parentRef.current,
+      estimateSize: () => rowHeight,
+      gap,
+      initialOffset,
+      paddingEnd: gap / 2
+    });
+    const scrollToYear = useCallback(
+      (year, { focus } = {}) => {
+        const index = Math.floor((year - min) / columns);
+        rowVirtualizer.scrollToIndex(index, { align: "center" });
+        if (focus) {
+          setPseudoFocused(year);
+        }
+      },
+      [min, columns, rowVirtualizer, setPseudoFocused]
+    );
+    const parentRef = useRef(null);
+    const { listRef } = useYearSelectorKeys({
+      columns,
+      scrollToYear,
+      initialFocus: initialFocusYear,
+      onSelect: handleChange,
+      onConfirm: () => onConfirm?.(value),
+      min,
+      max,
+      disabled,
+      pseudoFocused,
+      setPseudoFocused,
+      required
+    });
+    useEffect(() => {
+      if (value !== null && previousValue !== value) {
+        scrollToYear(value, { focus: true });
+      }
+    }, [value, previousValue, scrollToYear, listRef]);
+    const jointRef = useMergeRefs([parentRef, listRef, ref]);
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: jointRef,
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        className: cx(styles["year-selector"], className),
+        role: "spinbutton",
+        "aria-valuenow": value ?? void 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuetext": value ? `${value}` : "No year selected",
+        "data-test": rowVirtualizer.options.paddingEnd,
+        style: {
+          maxHeight: `${rowVirtualizer.getTotalSize() + 8}px`
+        },
+        ...rootProps,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              height: `${rowVirtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative"
+            },
+            children: rowVirtualizer.getVirtualItems().map((virtualItem) => {
+              const years = Array.from(
+                { length: columns },
+                (_, i) => virtualItem.index * columns + i + min
+              );
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "v-row",
+                  className: styles["year-grid"],
+                  style: {
+                    transform: `translateY(${virtualItem.start}px)`,
+                    gridTemplateColumns: `repeat(${columns}, 1fr)`
+                  },
+                  children: years.map((year) => {
+                    if (year > max) return /* @__PURE__ */ jsx("div", {}, year);
+                    return /* @__PURE__ */ jsx(
+                      YearItem,
+                      {
+                        disabled,
+                        year,
+                        onChange: handleItemChange,
+                        selected: value === year,
+                        pseudoFocused: pseudoFocused === year,
+                        onFocus: () => {
+                          listRef.current?.focus();
+                          setPseudoFocused(year);
+                        }
+                      },
+                      year
+                    );
+                  })
+                },
+                virtualItem.key
+              );
+            })
+          }
+        )
+      }
+    ) });
+  }
+);
+YearSelector.displayName = "YearSelector";
 
 const CalendarElement = forwardRef(
   (props, ref) => {
@@ -9261,6 +10251,8 @@ const CalendarElement = forwardRef(
     const combinedRef = useMergeRefs([ref, calendarRef]);
     const lastIValue = useRef(iValue);
     const buttonsRef = useRef(void 0);
+    const yearButtonRef = useRef(null);
+    const monthButtonRef = useRef(null);
     const [calendarWidth, setCalendarWidth] = useState(
       void 0
     );
@@ -9285,7 +10277,7 @@ const CalendarElement = forwardRef(
       ...style,
       ...layoutStyles
     };
-    const classNameCombined = cx(styles["calendar"], className);
+    const classNameCombined = cx(styles$1["calendar"], className);
     const { nDate, nDefaultDate, nToday } = useMemo(
       () => ({
         nDate: iValue ? typeof iValue === "string" ? normalizeDate(iValue, defaultTimeZone) : {
@@ -9463,6 +10455,7 @@ const CalendarElement = forwardRef(
     }, []);
     const handleMonthSelection = useCallback(
       (month) => {
+        monthButtonRef.current?.focus();
         setSelectedMonth(month);
         setFocusedDate(
           DateTime.fromObject({
@@ -9477,6 +10470,8 @@ const CalendarElement = forwardRef(
     );
     const handleYearSelection = useCallback(
       (year) => {
+        if (year === null) return;
+        yearButtonRef.current?.focus();
         setSelectedYear(year);
         setFocusedDate(
           DateTime.fromObject({
@@ -9487,7 +10482,7 @@ const CalendarElement = forwardRef(
         );
         setCalendarSelectionState("day");
       },
-      [focusedDate]
+      [defaultTimeZone, focusedDate?.month]
     );
     return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs(
       "div",
@@ -9499,17 +10494,18 @@ const CalendarElement = forwardRef(
         "data-anv": "calendar",
         ...remainingProps,
         children: [
-          /* @__PURE__ */ jsx("div", { className: styles["header"], children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { className: styles$1["header"], children: /* @__PURE__ */ jsxs(
             "span",
             {
               "aria-label": "Calendar navigation",
               role: "toolbar",
               onKeyDown: handleHeaderKeyDown,
-              className: styles["controller"],
+              className: styles$1["controller"],
               children: [
                 /* @__PURE__ */ jsx(
                   CalendarMonthButton,
                   {
+                    ref: monthButtonRef,
                     "data-calendar-header-button": true,
                     calendarSelectionState,
                     onClick: () => setCalendarSelectionState(
@@ -9520,6 +10516,7 @@ const CalendarElement = forwardRef(
                 /* @__PURE__ */ jsx(
                   CalendarYearButton,
                   {
+                    ref: yearButtonRef,
                     tabIndex: -1,
                     "data-calendar-header-button": true,
                     calendarSelectionState,
@@ -9538,7 +10535,17 @@ const CalendarElement = forwardRef(
           ) }),
           calendarSelectionState === "day" && /* @__PURE__ */ jsx(CalendarMonth, {}),
           calendarSelectionState === "month" && /* @__PURE__ */ jsx(CalendarMonthSelection, { onMonthSelection: handleMonthSelection }),
-          calendarSelectionState === "year" && /* @__PURE__ */ jsx(CalendarYearSelection, { onYearSelection: handleYearSelection })
+          calendarSelectionState === "year" && // Wrapper div provides some manual offsetting to account for internal padding of the year selector
+          /* @__PURE__ */ jsx("div", { className: styles$1["year-selector"], children: /* @__PURE__ */ jsx(
+            YearSelector,
+            {
+              onConfirm: handleYearSelection,
+              required: true,
+              defaultValue: selectedYear,
+              min: normalizedMinDate?.year,
+              max: normalizedMaxDate?.year
+            }
+          ) })
         ]
       }
     ) });
@@ -9628,4 +10635,4 @@ const Calendar = Object.assign(CalendarElement, {
 });
 
 export { Calendar as C, DateTime as D, CalendarNow as a, CalendarYearButton as b, CalendarPrev as c, CalendarNext as d, CalendarMonthButton as e, CalendarMonth as f, isValidDate as i, toDateString as t };
-//# sourceMappingURL=Calendar-Dq_of5A3.js.map
+//# sourceMappingURL=Calendar-BQ5F2ENO.js.map