@geckoui/geckoui 2.0.5 → 2.1.0

package/dist/index.js

@@ -197,7 +197,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/hooks/useClickOutside.ts
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/utils/isInsideShadowDom.ts
 function isInsideShadowDOM(node) {
@@ -207,14 +207,61 @@ function isInsideShadowDOM(node) {
   return rootNode instanceof ShadowRoot;
 }
 
+// src/utils/layerStack.ts
+var import_react = require("react");
+var stack = [];
+var topAtGesture;
+var gestureActive = false;
+var listening = false;
+function startGesture() {
+  topAtGesture = stack[stack.length - 1];
+  gestureActive = true;
+}
+function endGesture() {
+  setTimeout(() => {
+    gestureActive = false;
+    topAtGesture = void 0;
+  });
+}
+function listen() {
+  if (listening || typeof window === "undefined") return;
+  listening = true;
+  for (const type of ["pointerdown", "touchstart", "keydown"]) {
+    window.addEventListener(type, startGesture, true);
+  }
+  for (const type of ["click", "keyup", "pointercancel"]) {
+    window.addEventListener(type, endGesture, true);
+  }
+}
+function isTopLayer(layer) {
+  return (gestureActive ? topAtGesture : stack[stack.length - 1]) === layer;
+}
+function useLayer(active) {
+  const layer = (0, import_react.useRef)({}).current;
+  (0, import_react.useEffect)(() => {
+    if (!active) return;
+    listen();
+    stack.push(layer);
+    return () => {
+      const index = stack.lastIndexOf(layer);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [active, layer]);
+  return (0, import_react.useCallback)(() => isTopLayer(layer), [layer]);
+}
+
 // src/hooks/useClickOutside.ts
-var useClickOutside = (handler, refs) => {
-  const handlerRef = (0, import_react.useRef)(handler);
-  const refsRef = (0, import_react.useRef)(refs);
+var useClickOutside = (handler, refs, open) => {
+  const isTop = useLayer(!!open);
+  const layered = open !== void 0;
+  const layeredRef = (0, import_react2.useRef)(layered);
+  layeredRef.current = layered;
+  const handlerRef = (0, import_react2.useRef)(handler);
+  const refsRef = (0, import_react2.useRef)(refs);
   handlerRef.current = handler;
   refsRef.current = refs;
   const enabled = !!handler && !!refs && refs.length > 0;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!enabled) return;
     const listener = (event) => {
       var _a, _b, _c;
@@ -227,6 +274,7 @@ var useClickOutside = (handler, refs) => {
       })) {
         return;
       }
+      if (layeredRef.current && !isTop()) return;
       (_c = handlerRef.current) == null ? void 0 : _c.call(handlerRef, event);
     };
     document.addEventListener("mousedown", listener, true);
@@ -235,12 +283,12 @@ var useClickOutside = (handler, refs) => {
       document.removeEventListener("mousedown", listener, true);
       document.removeEventListener("touchstart", listener, true);
     };
-  }, [enabled]);
+  }, [enabled, isTop]);
 };
 var useClickOutside_default = useClickOutside;
 
 // src/hooks/useFilePicker.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/utils/isNil.ts
 var isNil = (value) => {
@@ -293,10 +341,10 @@ function isTwoFileEqualByFileContent(file1, file2) {
 }
 
 // src/utils/isElement.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var hasDisplayName = (displayName) => (e) => {
   var _a;
-  return (0, import_react2.isValidElement)(e) && ((_a = e.type) == null ? void 0 : _a.displayName) === displayName;
+  return (0, import_react3.isValidElement)(e) && ((_a = e.type) == null ? void 0 : _a.displayName) === displayName;
 };
 
 // src/utils/formatNumericInput.ts
@@ -370,8 +418,8 @@ function devWarn(message) {
 }
 
 // src/utils/asChildElement.ts
-var import_react3 = require("react");
-var asChildElement = (children) => (0, import_react3.isValidElement)(children) ? children : null;
+var import_react4 = require("react");
+var asChildElement = (children) => (0, import_react4.isValidElement)(children) ? children : null;
 
 // src/lib/FilePicker/handlers/BaseFilePickerHandler.ts
 var BaseFilePickerHandler = class {
@@ -634,11 +682,11 @@ var FilePicker = (() => {
 var FilePicker_default = FilePicker;
 
 // src/hooks/useRevokedPreviews.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var useRevokedPreviews = (previews) => {
-  const held = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
-  const inherited = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const held = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const inherited = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     const current = new Set(previews.filter((preview) => Boolean(preview)));
     if (inherited.current === null) inherited.current = current;
     held.current.forEach((preview) => {
@@ -646,7 +694,7 @@ var useRevokedPreviews = (previews) => {
     });
     held.current = current;
   });
-  (0, import_react4.useEffect)(
+  (0, import_react5.useEffect)(
     () => () => {
       held.current.forEach((preview) => {
         var _a;
@@ -673,11 +721,11 @@ function useFilePicker(options) {
     disabled = false,
     multiple = true
   } = options || {};
-  const dropzoneRef = (0, import_react5.useRef)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [dragging, setDragging] = (0, import_react5.useState)(false);
+  const dropzoneRef = (0, import_react6.useRef)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [dragging, setDragging] = (0, import_react6.useState)(false);
   useRevokedPreviews_default(files.map((file) => file.preview));
-  const handleOnChange = (0, import_react5.useCallback)(
+  const handleOnChange = (0, import_react6.useCallback)(
     (res) => __async(null, null, function* () {
       const transformedRes = transform ? yield transform(res) : res;
       const _result = keepOldFiles ? [...files].concat(transformedRes) : transformedRes;
@@ -707,7 +755,7 @@ function useFilePicker(options) {
       setLoading(() => false);
     }
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const el = dropzoneRef.current;
     if (!el || disabled) return;
     const handleDragOver = (e) => {
@@ -774,9 +822,9 @@ function useFilePicker(options) {
 var useFilePicker_default = useFilePicker;
 
 // src/hooks/usePreventDefault.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var usePreventDefault = () => {
-  const preventAction = (0, import_react6.useRef)(false);
+  const preventAction = (0, import_react7.useRef)(false);
   const preventDefault = () => preventAction.current = true;
   const attachPreventDefault = (fn) => __async(null, null, function* () {
     if (preventAction.current) {
@@ -790,9 +838,9 @@ var usePreventDefault = () => {
 var usePreventDefault_default = usePreventDefault;
 
 // src/hooks/useEscListener.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useEscListener = (callback) => {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!callback) return;
     const dismissListener = (e) => {
       const node = e.target;
@@ -811,7 +859,7 @@ var useEscListener = (callback) => {
 var useEscListener_default = useEscListener;
 
 // src/hooks/useScrollLock.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var lockCount = 0;
 var previousOverflow = "";
 var previousPaddingRight = "";
@@ -838,7 +886,7 @@ function unlockBodyScroll() {
   documentElement.style.removeProperty(SCROLLBAR_VARIABLE);
 }
 var useScrollLock = (enabled) => {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!enabled) return;
     lockBodyScroll();
     return unlockBodyScroll;
@@ -847,7 +895,7 @@ var useScrollLock = (enabled) => {
 var useScrollLock_default = useScrollLock;
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/icons/CheckIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -948,12 +996,12 @@ var X_default = X;
 
 // src/components/Checkbox/Checkbox.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Checkbox = (0, import_react9.forwardRef)(
+var Checkbox = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, { id, disabled, className, checked, indeterminate } = _b, rest = __objRest(_b, ["id", "disabled", "className", "checked", "indeterminate"]);
-    const _id = (0, import_react9.useId)();
-    const innerRef = (0, import_react9.useRef)(null);
-    const setRefs = (0, import_react9.useCallback)(
+    const _id = (0, import_react10.useId)();
+    const innerRef = (0, import_react10.useRef)(null);
+    const setRefs = (0, import_react10.useCallback)(
       (node) => {
         innerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -961,7 +1009,7 @@ var Checkbox = (0, import_react9.forwardRef)(
       },
       [ref]
     );
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (innerRef.current) innerRef.current.indeterminate = Boolean(indeterminate);
     });
     const Icon = indeterminate ? IndeterminateIcon_default : CheckIcon_default;
@@ -986,13 +1034,13 @@ Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
 
 // src/components/CounterInput/CounterInput.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var countDecimals = (value) => {
   var _a;
   return ((_a = String(value).split(".")[1]) != null ? _a : "").length;
 };
-var CounterInput = (0, import_react10.forwardRef)(
+var CounterInput = (0, import_react11.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -1116,11 +1164,11 @@ CounterInput.displayName = "CounterInput";
 var CounterInput_default = CounterInput;
 
 // src/components/DateInput/DateInput.tsx
-var import_react14 = require("@floating-ui/react");
-var import_react15 = require("react");
+var import_react15 = require("@floating-ui/react");
+var import_react16 = require("react");
 
 // src/components/BaseDateInput/BaseDateInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/DynamicComponentRenderer/DynamicComponentRenderer.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -1221,14 +1269,14 @@ var BaseDateInput = ({
   hasFocus,
   "aria-invalid": invalid
 }) => {
-  const containerRef = (0, import_react11.useRef)(null);
-  const monthRef = (0, import_react11.useRef)(null);
-  const dayRef = (0, import_react11.useRef)(null);
-  const yearRef = (0, import_react11.useRef)(null);
-  const [month, setMonth] = (0, import_react11.useState)("");
-  const [day, setDay] = (0, import_react11.useState)("");
-  const [year, setYear] = (0, import_react11.useState)("");
-  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react11.useState)(0);
+  const containerRef = (0, import_react12.useRef)(null);
+  const monthRef = (0, import_react12.useRef)(null);
+  const dayRef = (0, import_react12.useRef)(null);
+  const yearRef = (0, import_react12.useRef)(null);
+  const [month, setMonth] = (0, import_react12.useState)("");
+  const [day, setDay] = (0, import_react12.useState)("");
+  const [year, setYear] = (0, import_react12.useState)("");
+  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react12.useState)(0);
   const segmentRefs = { month: monthRef, day: dayRef, year: yearRef };
   const focusRef = (ref) => {
     var _a, _b;
@@ -1383,7 +1431,7 @@ var BaseDateInput = ({
     onSubmit == null ? void 0 : onSubmit();
     clearFocus();
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdatedTime;
     if (timeSinceLastUpdate > 500) {
@@ -1437,7 +1485,7 @@ var BaseDateInput = ({
       children: [
         Boolean(prefix) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DynamicComponentRenderer_default, { component: prefix }) }),
         !!isEmpty && !hasFocus && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: placeholder != null ? placeholder : generatePlaceholder(format, separator) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: classNames("GeckoUIDateInput__display-container"), children: inputs.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: classNames("GeckoUIDateInput__display-container"), children: inputs.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react12.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "label",
             {
@@ -1493,7 +1541,7 @@ BaseDateInput.displayName = "BaseDateInput";
 var BaseDateInput_default = BaseDateInput;
 
 // src/components/Calendar/Calendar/Calendar.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/Calendar/Calendar.utils.ts
 function daysInMonth(month, year) {
@@ -1758,12 +1806,12 @@ CalendarMonthPicker.displayName = "CalendarMonthPicker";
 var CalendarMonthPicker_default = CalendarMonthPicker;
 
 // src/components/Calendar/CalendarYearPicker/CalendarYearPicker.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function CalendarYearPicker(_a) {
   var _b = _a, { activeYear, onSelectYear } = _b, headerProps = __objRest(_b, ["activeYear", "onSelectYear"]);
   const start = Math.floor(activeYear / 10) * 10;
-  const [years, setYears] = (0, import_react12.useState)(
+  const [years, setYears] = (0, import_react13.useState)(
     () => Array.from({ length: 12 }).map((_, index) => start - 1 + index)
   );
   const handleLeft = () => {
@@ -1822,9 +1870,9 @@ var Calendar = (props) => {
     fixedWeeks,
     mode = "single"
   } = props;
-  const [view, setView] = (0, import_react13.useState)("day" /* Day */);
-  const [rangeSelectionStart, setRangeSelectionStart] = (0, import_react13.useState)(null);
-  const [hoveredDate, setHoveredDate] = (0, import_react13.useState)(null);
+  const [view, setView] = (0, import_react14.useState)("day" /* Day */);
+  const [rangeSelectionStart, setRangeSelectionStart] = (0, import_react14.useState)(null);
+  const [hoveredDate, setHoveredDate] = (0, import_react14.useState)(null);
   const selectedDate = mode === "single" ? props.selectedDate : void 0;
   const onSelectDate = mode === "single" ? props.onSelectDate : void 0;
   const selectedRange = mode === "range" ? props.selectedRange : void 0;
@@ -1838,8 +1886,8 @@ var Calendar = (props) => {
   const isValidDate2 = isValidISOFormat(initialDate);
   const today = getTodayDate();
   const [year, month] = (isValidDate2 ? initialDate : today).split("-").map(Number);
-  const [activeMonth, setActiveMonth] = (0, import_react13.useState)(month - 1);
-  const [activeYear, setActiveYear] = (0, import_react13.useState)(year);
+  const [activeMonth, setActiveMonth] = (0, import_react14.useState)(month - 1);
+  const [activeYear, setActiveYear] = (0, import_react14.useState)(year);
   const increaseYear = () => {
     setActiveYear((prev) => prev + 1);
   };
@@ -1863,7 +1911,7 @@ var Calendar = (props) => {
       onSelectDate == null ? void 0 : onSelectDate("");
     }
   };
-  (0, import_react13.useImperativeHandle)(calendarRef, () => {
+  (0, import_react14.useImperativeHandle)(calendarRef, () => {
     return {
       moveTo: (month2, year2) => {
         setActiveMonth(month2 - 1);
@@ -1873,7 +1921,7 @@ var Calendar = (props) => {
       clearSelection
     };
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (mode === "single") {
       if (selectedDate && !isValidISOFormat(selectedDate)) {
         devWarn(
@@ -2049,20 +2097,24 @@ var DateInput = (_a) => {
     "onStateUpdate",
     "onSubmit"
   ]);
-  const calendarRef = (0, import_react15.useRef)(null);
-  const [openCalendar, setOpenCalendar] = (0, import_react15.useState)(false);
-  const { refs, floatingStyles } = (0, import_react14.useFloating)({
+  const calendarRef = (0, import_react16.useRef)(null);
+  const [openCalendar, setOpenCalendar] = (0, import_react16.useState)(false);
+  const { refs, floatingStyles } = (0, import_react15.useFloating)({
     placement: calendarPlacement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react14.flip)({ padding: 4 }), (0, import_react14.offset)({ mainAxis: 4 })],
-    whileElementsMounted: import_react14.autoUpdate,
+    middleware: [(0, import_react15.flip)({ padding: 4 }), (0, import_react15.offset)({ mainAxis: 4 })],
+    whileElementsMounted: import_react15.autoUpdate,
     open: openCalendar,
     onOpenChange: setOpenCalendar
   });
-  useClickOutside_default(() => {
-    setOpenCalendar(false);
-  }, [refs.reference]);
-  const handleStateUpdateInternal = (0, import_react15.useCallback)(
+  useClickOutside_default(
+    () => {
+      setOpenCalendar(false);
+    },
+    [refs.reference],
+    openCalendar
+  );
+  const handleStateUpdateInternal = (0, import_react16.useCallback)(
     (state) => {
       var _a2;
       if (!hideCalendar) {
@@ -2080,11 +2132,11 @@ var DateInput = (_a) => {
     },
     [hideCalendar, onStateUpdate]
   );
-  const handleSubmit = (0, import_react15.useCallback)(() => {
+  const handleSubmit = (0, import_react16.useCallback)(() => {
     setOpenCalendar(false);
     onSubmit == null ? void 0 : onSubmit();
   }, [onSubmit]);
-  const handleChange = (0, import_react15.useCallback)(
+  const handleChange = (0, import_react16.useCallback)(
     (date) => {
       onChange == null ? void 0 : onChange(date);
       if (date === null) {
@@ -2153,11 +2205,11 @@ DateInput.displayName = "DateInput";
 var DateInput_default = DateInput;
 
 // src/components/DateRangeInput/DateRangeInput.tsx
-var import_react17 = require("@floating-ui/react");
-var import_react18 = require("react");
+var import_react18 = require("@floating-ui/react");
+var import_react19 = require("react");
 
 // src/components/BaseDateRangeInput/BaseDateRangeInput.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var BaseDateRangeInput = (_a) => {
   var _b = _a, {
@@ -2201,20 +2253,20 @@ var BaseDateRangeInput = (_a) => {
     "hasFocus",
     "aria-invalid"
   ]);
-  const containerRef = (0, import_react16.useRef)(null);
-  const startMonthRef = (0, import_react16.useRef)(null);
-  const startDayRef = (0, import_react16.useRef)(null);
-  const startYearRef = (0, import_react16.useRef)(null);
-  const endMonthRef = (0, import_react16.useRef)(null);
-  const endDayRef = (0, import_react16.useRef)(null);
-  const endYearRef = (0, import_react16.useRef)(null);
-  const [startMonth, setStartMonth] = (0, import_react16.useState)("");
-  const [startDay, setStartDay] = (0, import_react16.useState)("");
-  const [startYear, setStartYear] = (0, import_react16.useState)("");
-  const [endMonth, setEndMonth] = (0, import_react16.useState)("");
-  const [endDay, setEndDay] = (0, import_react16.useState)("");
-  const [endYear, setEndYear] = (0, import_react16.useState)("");
-  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react16.useState)(0);
+  const containerRef = (0, import_react17.useRef)(null);
+  const startMonthRef = (0, import_react17.useRef)(null);
+  const startDayRef = (0, import_react17.useRef)(null);
+  const startYearRef = (0, import_react17.useRef)(null);
+  const endMonthRef = (0, import_react17.useRef)(null);
+  const endDayRef = (0, import_react17.useRef)(null);
+  const endYearRef = (0, import_react17.useRef)(null);
+  const [startMonth, setStartMonth] = (0, import_react17.useState)("");
+  const [startDay, setStartDay] = (0, import_react17.useState)("");
+  const [startYear, setStartYear] = (0, import_react17.useState)("");
+  const [endMonth, setEndMonth] = (0, import_react17.useState)("");
+  const [endDay, setEndDay] = (0, import_react17.useState)("");
+  const [endYear, setEndYear] = (0, import_react17.useState)("");
+  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react17.useState)(0);
   const segmentRefs = {
     startMonth: startMonthRef,
     startDay: startDayRef,
@@ -2402,7 +2454,7 @@ var BaseDateRangeInput = (_a) => {
     onSubmit == null ? void 0 : onSubmit();
     clearFocus();
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdatedTime;
     if (timeSinceLastUpdate > 500) {
@@ -2521,7 +2573,7 @@ var BaseDateRangeInput = (_a) => {
   const endValid = isValidDate(endYear, endMonth, endDay);
   const isError = !isEmpty && (!startEmpty && !startValid || !endEmpty && !endValid) || invalid === true || invalid === "true";
   const state = disabled ? "disabled" : readOnly ? "readonly" : "enabled";
-  const renderSegments = (segments) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: segments.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react16.Fragment, { children: [
+  const renderSegments = (segments) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: segments.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react17.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "label",
       {
@@ -2651,8 +2703,8 @@ var DateRangeInput = (_a) => {
     "onStateUpdate",
     "onSubmit"
   ]);
-  const calendarRef = (0, import_react18.useRef)(null);
-  const [openCalendar, setOpenCalendar] = (0, import_react18.useState)(false);
+  const calendarRef = (0, import_react19.useRef)(null);
+  const [openCalendar, setOpenCalendar] = (0, import_react19.useState)(false);
   const handleCloseCalendar = () => {
     setOpenCalendar(false);
     if (!(value == null ? void 0 : value.from) || !(value == null ? void 0 : value.to)) return;
@@ -2660,17 +2712,21 @@ var DateRangeInput = (_a) => {
       onChange == null ? void 0 : onChange({ from: value.to, to: value.from });
     }
   };
-  const { refs, floatingStyles } = (0, import_react17.useFloating)({
+  const { refs, floatingStyles } = (0, import_react18.useFloating)({
     placement: calendarPlacement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react17.flip)({ padding: 4 }), (0, import_react17.offset)({ mainAxis: 4 })],
-    whileElementsMounted: import_react17.autoUpdate,
+    middleware: [(0, import_react18.flip)({ padding: 4 }), (0, import_react18.offset)({ mainAxis: 4 })],
+    whileElementsMounted: import_react18.autoUpdate,
     open: openCalendar,
     onOpenChange: setOpenCalendar
   });
-  useClickOutside_default(() => {
-    handleCloseCalendar();
-  }, [refs.reference]);
+  useClickOutside_default(
+    () => {
+      handleCloseCalendar();
+    },
+    [refs.reference],
+    openCalendar
+  );
   const handleStateUpdateInternal = (state) => {
     var _a2;
     if (!hideCalendar) {
@@ -2761,12 +2817,12 @@ DateRangeInput.displayName = "DateRangeInput";
 var DateRangeInput_default = DateRangeInput;
 
 // src/components/Input/Input.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var Input = (0, import_react19.forwardRef)(
+var Input = (0, import_react20.forwardRef)(
   (_a, ref) => {
     var _b = _a, { name, prefix, id, suffix, inputClassName, className, disabled, readOnly } = _b, props = __objRest(_b, ["name", "prefix", "id", "suffix", "inputClassName", "className", "disabled", "readOnly"]);
-    const _id = (0, import_react19.useId)();
+    const _id = (0, import_react20.useId)();
     const { dataAttributes, rest } = splitDataAttributes(props);
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "label",
@@ -2800,8 +2856,8 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react20 = require("@floating-ui/react");
-var import_react21 = require("react");
+var import_react21 = require("@floating-ui/react");
+var import_react22 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Tooltip = ({
   children,
@@ -2815,14 +2871,14 @@ var Tooltip = ({
   placement = "top",
   sideOffset = 12
 }) => {
-  const [isOpen2, setIsOpen] = (0, import_react21.useState)(false);
-  const arrowRef = (0, import_react21.useRef)(null);
-  const timeoutRef = (0, import_react21.useRef)(null);
-  const { refs, floatingStyles, context } = (0, import_react20.useFloating)({
+  const [isOpen2, setIsOpen] = (0, import_react22.useState)(false);
+  const arrowRef = (0, import_react22.useRef)(null);
+  const timeoutRef = (0, import_react22.useRef)(null);
+  const { refs, floatingStyles, context } = (0, import_react21.useFloating)({
     open: isOpen2,
     onOpenChange: setIsOpen,
     placement,
-    middleware: [(0, import_react20.offset)(sideOffset), (0, import_react20.flip)(), (0, import_react20.shift)({ padding: 5 }), (0, import_react20.arrow)({ element: arrowRef })]
+    middleware: [(0, import_react21.offset)(sideOffset), (0, import_react21.flip)(), (0, import_react21.shift)({ padding: 5 }), (0, import_react21.arrow)({ element: arrowRef })]
   });
   const handleMouseEnter = () => {
     if (timeoutRef.current) {
@@ -2849,7 +2905,7 @@ var Tooltip = ({
   const renderTrigger = () => {
     const child = triggerAsChild ? asChildElement(children) : null;
     if (child) {
-      return (0, import_react21.cloneElement)(child, __spreadProps(__spreadValues({}, triggerProps), {
+      return (0, import_react22.cloneElement)(child, __spreadProps(__spreadValues({}, triggerProps), {
         className: classNames(child.props.className, triggerClassName)
       }));
     }
@@ -2857,7 +2913,7 @@ var Tooltip = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     renderTrigger(),
-    isOpen2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react20.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    isOpen2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react21.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         ref: refs.setFloating,
@@ -2867,7 +2923,7 @@ var Tooltip = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DynamicComponentRenderer_default, { component: content }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react20.FloatingArrow,
+            import_react21.FloatingArrow,
             {
               ref: arrowRef,
               context,
@@ -2927,9 +2983,9 @@ var InputError = (_a) => {
 var InputError_default = InputError;
 
 // src/components/Button/Button.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Button = (0, import_react22.forwardRef)(
+var Button = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant = "filled", size: size2 = "md", color = "primary" } = _b, rest = __objRest(_b, ["children", "className", "variant", "size", "color"]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -3030,7 +3086,7 @@ LoadingButton.displayName = "LoadingButton";
 var LoadingButton_default = LoadingButton;
 
 // src/components/RHF/RHFCheckbox/RHFCheckbox.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/utils/isEqual.ts
 var import_lodash = __toESM(require("lodash.isequal"));
@@ -3085,7 +3141,7 @@ var RHFCheckbox = (_a) => {
     "indeterminate",
     "onBlur"
   ]);
-  const _id = (0, import_react23.useId)();
+  const _id = (0, import_react24.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     RHFController_default,
     {
@@ -3257,7 +3313,7 @@ RHFInput.displayName = "RHFInput";
 var RHFInput_default = RHFInput;
 
 // src/components/RHF/RHFError/RHFError.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var RHFError = ({ name, control, className, render }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -3267,7 +3323,7 @@ var RHFError = ({ name, control, className, render }) => {
       name,
       render: ({ fieldState }) => {
         const { error } = fieldState;
-        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react24.Fragment, {}, "rhf-error");
+        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react25.Fragment, {}, "rhf-error");
         if (typeof render === "function") {
           return render(fieldState);
         }
@@ -3398,12 +3454,12 @@ RHFCurrencyInput.displayName = "RHFCurrencyInput";
 var RHFCurrencyInput_default = RHFCurrencyInput;
 
 // src/components/Textarea/Textarea.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/hooks/useAutoResize.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 var useAutoResize = (ref, { enabled, minRows, maxRows, value }) => {
-  const fit = (0, import_react25.useCallback)(() => {
+  const fit = (0, import_react26.useCallback)(() => {
     const el = ref.current;
     if (!el || !enabled) return;
     const style = getComputedStyle(el);
@@ -3417,7 +3473,7 @@ var useAutoResize = (ref, { enabled, minRows, maxRows, value }) => {
     el.style.height = `${Math.min(Math.max(content, min), max) + (style.boxSizing === "border-box" ? border : -padding)}px`;
     el.style.overflowY = content > max ? "auto" : "hidden";
   }, [ref, enabled, minRows, maxRows]);
-  (0, import_react25.useLayoutEffect)(() => {
+  (0, import_react26.useLayoutEffect)(() => {
     const el = ref.current;
     if (!el) return;
     if (!enabled) {
@@ -3446,17 +3502,17 @@ var useAutoResize_default = useAutoResize;
 
 // src/components/Textarea/Textarea.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Textarea = (0, import_react26.forwardRef)(
+var Textarea = (0, import_react27.forwardRef)(
   (_a, ref) => {
     var _b = _a, { autoResize = false, className, rows = 2, maxRows, onInput, value } = _b, rest = __objRest(_b, ["autoResize", "className", "rows", "maxRows", "onInput", "value"]);
-    const innerRef = (0, import_react26.useRef)(null);
+    const innerRef = (0, import_react27.useRef)(null);
     const fit = useAutoResize_default(innerRef, {
       enabled: autoResize,
       minRows: rows,
       maxRows,
       value
     });
-    const handleInput = (0, import_react26.useCallback)(
+    const handleInput = (0, import_react27.useCallback)(
       (event) => {
         fit();
         onInput == null ? void 0 : onInput(event);
@@ -3541,9 +3597,9 @@ RHFTextarea.displayName = "RHFTextarea";
 var RHFTextarea_default = RHFTextarea;
 
 // src/components/Switch/Switch.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Switch = (0, import_react27.forwardRef)(
+var Switch = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { size: size2 = "md", className, thumbClassName, onChange, onKeyDown } = _b, rest = __objRest(_b, ["size", "className", "thumbClassName", "onChange", "onKeyDown"]);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: classNames("GeckoUISwitch", className), "data-size": size2, children: [
@@ -3648,12 +3704,12 @@ RHFSwitch.displayName = "RHFSwitch";
 var RHFSwitch_default = RHFSwitch;
 
 // src/components/RHF/RHFRadio/RHFRadio.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/Radio/Radio.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Radio = (0, import_react28.forwardRef)((_a, ref) => {
+var Radio = (0, import_react29.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", __spreadProps(__spreadValues({ className: classNames("GeckoUIRadio", className), ref }, rest), { type: "radio" }));
 });
@@ -3686,7 +3742,7 @@ var RHFRadio = (_a) => {
     "onChange",
     "onBlur"
   ]);
-  const _id = (0, import_react29.useId)();
+  const _id = (0, import_react30.useId)();
   const uniqueId = id || _id;
   if (value === void 0 || value === null) {
     throw new Error("RHFRadio: value cannot be undefined or null");
@@ -3760,8 +3816,8 @@ RHFDateInput.displayName = "RHFDateInput";
 var RHFDateInput_default = RHFDateInput;
 
 // src/components/TimeInput/TimeInput.tsx
-var import_react30 = require("@floating-ui/react");
-var import_react31 = require("react");
+var import_react31 = require("@floating-ui/react");
+var import_react32 = require("react");
 
 // src/components/TimeInput/TimeInput.utils.ts
 var hasSeconds = (format) => format.includes("ss");
@@ -3887,28 +3943,28 @@ var TimeInput = ({
   const twelve = isTwelveHour(format);
   const withSeconds = hasSeconds(format);
   const segments = segmentsFor(format);
-  const fieldRef = (0, import_react31.useRef)(null);
-  const listRef = (0, import_react31.useRef)(null);
-  const columnsRef = (0, import_react31.useRef)(null);
-  const hourRef = (0, import_react31.useRef)(null);
-  const minuteRef = (0, import_react31.useRef)(null);
-  const secondRef = (0, import_react31.useRef)(null);
-  const meridiemRef = (0, import_react31.useRef)(null);
+  const fieldRef = (0, import_react32.useRef)(null);
+  const listRef = (0, import_react32.useRef)(null);
+  const columnsRef = (0, import_react32.useRef)(null);
+  const hourRef = (0, import_react32.useRef)(null);
+  const minuteRef = (0, import_react32.useRef)(null);
+  const secondRef = (0, import_react32.useRef)(null);
+  const meridiemRef = (0, import_react32.useRef)(null);
   const refs = {
     hour: hourRef,
     minute: minuteRef,
     second: secondRef,
     meridiem: meridiemRef
   };
-  const [draft, setDraft] = (0, import_react31.useState)(null);
-  const [focused, setFocused] = (0, import_react31.useState)(false);
-  const [open, setOpen] = (0, import_react31.useState)(false);
+  const [draft, setDraft] = (0, import_react32.useState)(null);
+  const [focused, setFocused] = (0, import_react32.useState)(false);
+  const [open, setOpen] = (0, import_react32.useState)(false);
   const parts = draft != null ? draft : partsFrom(value, twelve);
-  const floating = (0, import_react30.useFloating)({
+  const floating = (0, import_react31.useFloating)({
     placement: listPlacement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react30.offset)(4), (0, import_react30.flip)({ padding: 8 }), (0, import_react30.shift)({ padding: 8 })],
-    whileElementsMounted: import_react30.autoUpdate,
+    middleware: [(0, import_react31.offset)(4), (0, import_react31.flip)({ padding: 8 }), (0, import_react31.shift)({ padding: 8 })],
+    whileElementsMounted: import_react31.autoUpdate,
     open,
     onOpenChange: setOpen
   });
@@ -3916,8 +3972,8 @@ var TimeInput = ({
     setOpen(false);
     setDraft(null);
   };
-  useClickOutside_default(close, [listRef, fieldRef]);
-  (0, import_react31.useEffect)(() => {
+  useClickOutside_default(close, [listRef, fieldRef], open);
+  (0, import_react32.useEffect)(() => {
     var _a;
     if (!open) return;
     (_a = columnsRef.current) == null ? void 0 : _a.querySelectorAll('[data-state="selected"]').forEach((cell) => {
@@ -4031,7 +4087,7 @@ var TimeInput = ({
             children: [
               Boolean(prefix) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "GeckoUITimeInput__prefix", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicComponentRenderer_default, { component: prefix }) }),
               isEmpty && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: classNames("GeckoUITimeInput__placeholder", placeholderClassName), children: placeholder != null ? placeholder : format }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "GeckoUITimeInput__segments", children: segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react31.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "GeckoUITimeInput__segments", children: segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react32.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
                   "label",
                   {
@@ -4184,7 +4240,7 @@ RHFTimeInput.displayName = "RHFTimeInput";
 var RHFTimeInput_default = RHFTimeInput;
 
 // src/components/Slider/SliderBase/SliderBase.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/Slider/Slider.utils.ts
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
@@ -4226,9 +4282,9 @@ var SliderBase = ({
   className,
   thumbLabels
 }) => {
-  const trackRef = (0, import_react32.useRef)(null);
-  const [active, setActive] = (0, import_react32.useState)(null);
-  const [focused, setFocused] = (0, import_react32.useState)(null);
+  const trackRef = (0, import_react33.useRef)(null);
+  const [active, setActive] = (0, import_react33.useState)(null);
+  const [focused, setFocused] = (0, import_react33.useState)(null);
   const boundsFor = (index) => [
     index === 0 ? min : values[index - 1] + minGap,
     index === values.length - 1 ? max : values[index + 1] - minGap
@@ -4515,8 +4571,8 @@ RHFSlider.displayName = "RHFSlider";
 var RHFSlider_default = RHFSlider;
 
 // src/components/TagInput/TagInput/TagInput.tsx
-var import_react35 = require("@floating-ui/react");
-var import_react36 = require("react");
+var import_react36 = require("@floating-ui/react");
+var import_react37 = require("react");
 
 // src/utils/isTextIncludes.ts
 function isTextIncludes(baseString = "", searchString) {
@@ -4525,15 +4581,15 @@ function isTextIncludes(baseString = "", searchString) {
 var isTextIncludes_default = isTextIncludes;
 
 // src/components/TagInput/TagInput.utils.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 var labelOf = (props) => {
   if (props.label) return props.label;
   return typeof props.children === "string" ? props.children : props.value;
 };
-var optionsFrom = (children) => import_react33.Children.toArray(children).filter(
+var optionsFrom = (children) => import_react34.Children.toArray(children).filter(
   (child) => {
     var _a;
-    return (0, import_react33.isValidElement)(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "TagInputOption";
+    return (0, import_react34.isValidElement)(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "TagInputOption";
   }
 );
 var looseKey = (text) => text.trim().replace(/\s+/g, " ").toLowerCase();
@@ -4544,10 +4600,10 @@ var splitOnSeparators = (text, separators) => {
 };
 
 // src/components/TagInput/useTagInput.tsx
-var import_react34 = require("react");
-var TagInputContext = (0, import_react34.createContext)(null);
+var import_react35 = require("react");
+var TagInputContext = (0, import_react35.createContext)(null);
 var useTagInput = () => {
-  const context = (0, import_react34.useContext)(TagInputContext);
+  const context = (0, import_react35.useContext)(TagInputContext);
   if (!context) {
     throw new Error("TagInput components have to be used inside a <TagInput>.");
   }
@@ -4581,21 +4637,21 @@ var TagInput = ({
   children,
   "aria-invalid": invalid
 }) => {
-  const fieldRef = (0, import_react36.useRef)(null);
-  const menuRef = (0, import_react36.useRef)(null);
-  const inputRef = (0, import_react36.useRef)(null);
-  const [keyword, setKeyword] = (0, import_react36.useState)("");
-  const [focused, setFocused] = (0, import_react36.useState)(null);
-  const [open, setOpen] = (0, import_react36.useState)(false);
-  const floating = (0, import_react35.useFloating)({
+  const fieldRef = (0, import_react37.useRef)(null);
+  const menuRef = (0, import_react37.useRef)(null);
+  const inputRef = (0, import_react37.useRef)(null);
+  const [keyword, setKeyword] = (0, import_react37.useState)("");
+  const [focused, setFocused] = (0, import_react37.useState)(null);
+  const [open, setOpen] = (0, import_react37.useState)(false);
+  const floating = (0, import_react36.useFloating)({
     placement: menuPlacement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react35.offset)(4), (0, import_react35.flip)({ padding: 8 }), (0, import_react35.shift)({ padding: 8 })],
-    whileElementsMounted: import_react35.autoUpdate,
+    middleware: [(0, import_react36.offset)(4), (0, import_react36.flip)({ padding: 8 }), (0, import_react36.shift)({ padding: 8 })],
+    whileElementsMounted: import_react36.autoUpdate,
     open,
     onOpenChange: setOpen
   });
-  useClickOutside_default(() => setOpen(false), [menuRef, fieldRef]);
+  useClickOutside_default(() => setOpen(false), [menuRef, fieldRef], open);
   const declared = optionsFrom(children);
   const isSelected = (tag) => value.includes(tag);
   const canonical = (tag) => {
@@ -4849,7 +4905,7 @@ RHFTagInput.displayName = "RHFTagInput";
 var RHFTagInput_default = RHFTagInput;
 
 // src/components/Rating/Rating.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/Rating/Rating.utils.ts
 var snap = (value, precision) => Number((Math.round(value / precision) * precision).toFixed(4));
@@ -4907,9 +4963,9 @@ var Rating = (_a) => {
     "className",
     "aria-label"
   ]);
-  const generated = (0, import_react37.useId)();
-  const iconsRef = (0, import_react37.useRef)([]);
-  const [hovered, setHovered] = (0, import_react37.useState)(null);
+  const generated = (0, import_react38.useId)();
+  const iconsRef = (0, import_react38.useRef)([]);
+  const [hovered, setHovered] = (0, import_react38.useState)(null);
   const interactive = !readOnly && !disabled;
   const group = name != null ? name : `GeckoUIRating-${generated}`;
   const steps = stepsFor(max, precision);
@@ -5053,11 +5109,11 @@ RHFRating.displayName = "RHFRating";
 var RHFRating_default = RHFRating;
 
 // src/components/ColorInput/ColorInput.tsx
-var import_react42 = require("@floating-ui/react");
-var import_react43 = require("react");
+var import_react43 = require("@floating-ui/react");
+var import_react44 = require("react");
 
 // src/components/ColorPicker/ColorPicker.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/ColorPicker/ColorPicker.utils.ts
 var clamp2 = (value, min, max) => Math.min(Math.max(value, min), max);
@@ -5172,7 +5228,7 @@ var cssColor = (hsva) => formatColor(hsva, "rgb", true);
 var sameColor = (a, b) => a.h === b.h && a.s === b.s && a.v === b.v && a.a === b.a;
 
 // src/components/ColorPicker/ColorSlider/ColorSlider.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var ColorSlider = ({
   value,
@@ -5188,8 +5244,8 @@ var ColorSlider = ({
   valueText,
   children
 }) => {
-  const trackRef = (0, import_react38.useRef)(null);
-  const [dragging, setDragging] = (0, import_react38.useState)(false);
+  const trackRef = (0, import_react39.useRef)(null);
+  const [dragging, setDragging] = (0, import_react39.useState)(false);
   const moveTo = (event) => {
     var _a;
     const track = (_a = trackRef.current) == null ? void 0 : _a.getBoundingClientRect();
@@ -5274,15 +5330,15 @@ ColorSlider.displayName = "ColorSlider";
 var ColorSlider_default = ColorSlider;
 
 // src/components/ColorPicker/FormatSelect/FormatSelect.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var FormatSelect = ({ value, options, labels, disabled, onChange }) => {
-  const rootRef = (0, import_react39.useRef)(null);
-  const listRef = (0, import_react39.useRef)(null);
-  const [open, setOpen] = (0, import_react39.useState)(false);
-  const [active, setActive] = (0, import_react39.useState)(() => Math.max(options.indexOf(value), 0));
-  useClickOutside_default(() => setOpen(false), [rootRef]);
-  (0, import_react39.useEffect)(() => {
+  const rootRef = (0, import_react40.useRef)(null);
+  const listRef = (0, import_react40.useRef)(null);
+  const [open, setOpen] = (0, import_react40.useState)(false);
+  const [active, setActive] = (0, import_react40.useState)(() => Math.max(options.indexOf(value), 0));
+  useClickOutside_default(() => setOpen(false), [rootRef], open);
+  (0, import_react40.useEffect)(() => {
     var _a;
     if (!open) return;
     setActive(Math.max(options.indexOf(value), 0));
@@ -5380,7 +5436,7 @@ FormatSelect.displayName = "FormatSelect";
 var FormatSelect_default = FormatSelect;
 
 // src/components/ColorPicker/SaturationArea/SaturationArea.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var SaturationArea = ({
   hsva,
@@ -5390,8 +5446,8 @@ var SaturationArea = ({
   label,
   children
 }) => {
-  const areaRef = (0, import_react40.useRef)(null);
-  const [dragging, setDragging] = (0, import_react40.useState)(false);
+  const areaRef = (0, import_react41.useRef)(null);
+  const [dragging, setDragging] = (0, import_react41.useState)(false);
   const moveTo = (event) => {
     var _a;
     const area = (_a = areaRef.current) == null ? void 0 : _a.getBoundingClientRect();
@@ -5512,20 +5568,20 @@ var ColorPicker = (_a) => {
     "className"
   ]);
   var _a2;
-  const [internal, setInternal] = (0, import_react41.useState)(() => {
+  const [internal, setInternal] = (0, import_react42.useState)(() => {
     var _a3;
     return (_a3 = parseColor(value != null ? value : defaultValue)) != null ? _a3 : BLACK;
   });
-  const [typed, setTyped] = (0, import_react41.useState)(null);
-  const [hasDropper, setHasDropper] = (0, import_react41.useState)(false);
+  const [typed, setTyped] = (0, import_react42.useState)(null);
+  const [hasDropper, setHasDropper] = (0, import_react42.useState)(false);
   const preferred = (_a2 = formats[0]) != null ? _a2 : "hex";
-  const [active, setActive] = (0, import_react41.useState)(preferred);
-  (0, import_react41.useEffect)(() => setActive(preferred), [preferred]);
-  const emitted = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(() => {
+  const [active, setActive] = (0, import_react42.useState)(preferred);
+  (0, import_react42.useEffect)(() => setActive(preferred), [preferred]);
+  const emitted = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
     setHasDropper(typeof window !== "undefined" && typeof window.EyeDropper === "function");
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (value === void 0 || value === emitted.current) return;
     const parsed = parseColor(value);
     if (parsed && !sameColor(parsed, internal)) setInternal(parsed);
@@ -5733,15 +5789,15 @@ var ColorInput = (_a) => {
     "wrapperClassName",
     "pickerClassName"
   ]);
-  const fieldRef = (0, import_react43.useRef)(null);
-  const panelRef = (0, import_react43.useRef)(null);
-  const [internal, setInternal] = (0, import_react43.useState)(defaultValue);
-  const [open, setOpen] = (0, import_react43.useState)(false);
-  const floating = (0, import_react42.useFloating)({
+  const fieldRef = (0, import_react44.useRef)(null);
+  const panelRef = (0, import_react44.useRef)(null);
+  const [internal, setInternal] = (0, import_react44.useState)(defaultValue);
+  const [open, setOpen] = (0, import_react44.useState)(false);
+  const floating = (0, import_react43.useFloating)({
     placement: pickerPlacement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react42.offset)(4), (0, import_react42.flip)({ padding: 8 }), (0, import_react42.shift)({ padding: 8 })],
-    whileElementsMounted: import_react42.autoUpdate,
+    middleware: [(0, import_react43.offset)(4), (0, import_react43.flip)({ padding: 8 }), (0, import_react43.shift)({ padding: 8 })],
+    whileElementsMounted: import_react43.autoUpdate,
     open,
     onOpenChange: setOpen
   });
@@ -5751,7 +5807,7 @@ var ColorInput = (_a) => {
     setOpen(next);
     onOpenChange == null ? void 0 : onOpenChange(next);
   };
-  useClickOutside_default(() => toggle(false), [panelRef, fieldRef]);
+  useClickOutside_default(() => toggle(false), [panelRef, fieldRef], open);
   const color = value != null ? value : internal;
   const parsed = parseColor(color);
   const handleChange = (next) => {
@@ -5959,7 +6015,7 @@ RHFDateRangeInput.displayName = "RHFDateRangeInput";
 var RHFDateRangeInput_default = RHFDateRangeInput;
 
 // src/components/FileInput/FileInput.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/components/FileInput/FileInput.utils.ts
 var countLabel = (count) => {
@@ -6006,9 +6062,9 @@ var FileInput = (props) => {
     "unique",
     "max"
   ]);
-  const fieldRef = (0, import_react44.useRef)(null);
-  const [dragging, setDragging] = (0, import_react44.useState)(false);
-  const [loading, setLoading] = (0, import_react44.useState)(false);
+  const fieldRef = (0, import_react45.useRef)(null);
+  const [dragging, setDragging] = (0, import_react45.useState)(false);
+  const [loading, setLoading] = (0, import_react45.useState)(false);
   const held = multiple ? value != null ? value : [] : value ? [value] : [];
   useRevokedPreviews_default(held.map((file) => file.preview));
   const usable = !disabled && !readOnly;
@@ -6170,9 +6226,9 @@ RHFFileInput.displayName = "RHFFileInput";
 var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var OTPInput = (0, import_react45.forwardRef)(
+var OTPInput = (0, import_react46.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       value = "",
@@ -6199,7 +6255,7 @@ var OTPInput = (0, import_react45.forwardRef)(
       "disabled",
       "aria-invalid"
     ]);
-    const divRef = (0, import_react45.useRef)(null);
+    const divRef = (0, import_react46.useRef)(null);
     const { dataAttributes } = splitDataAttributes(props);
     const focus = (index) => {
       var _a2, _b2;
@@ -6362,8 +6418,8 @@ RHFOTPInput.displayName = "RHFOTPInput";
 var RHFOTPInput_default = RHFOTPInput;
 
 // src/components/Select/Select/Select.tsx
-var import_react50 = require("@floating-ui/react");
-var import_react51 = require("react");
+var import_react51 = require("@floating-ui/react");
+var import_react52 = require("react");
 
 // src/components/Select/Select.utils.ts
 var isSelect = hasDisplayName("Select");
@@ -6426,7 +6482,7 @@ function findSelectOptions(el) {
 }
 
 // src/components/Select/SelectButton/SelectButton.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/utils/createLabel.ts
 function isBlankLabel(value) {
@@ -6468,13 +6524,13 @@ function createLabel(item) {
 var createLabel_default = createLabel;
 
 // src/components/Select/hooks/useSelectTrigger.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/Select/useSelect.tsx
-var import_react46 = require("react");
-var SelectContext = (0, import_react46.createContext)(void 0);
+var import_react47 = require("react");
+var SelectContext = (0, import_react47.createContext)(void 0);
 var useSelect = () => {
-  const context = (0, import_react46.useContext)(SelectContext);
+  const context = (0, import_react47.useContext)(SelectContext);
   if (context === void 0) {
     throw new Error("SelectContext must be used within a SelectProvider");
   }
@@ -6495,14 +6551,17 @@ var useSelectTrigger = () => {
     open,
     multiple,
     isEmpty,
-    handleChange
+    handleChange,
+    filterable,
+    requestSearchFocus
   } = useSelect();
+  const hasDropdownSearch = filterable === true || filterable === "dropdown";
   const filteredOptions = options.filter(
     ({ label, visibility }) => !isHideSelectOption({ keyword, label, visibility, isEmpty })
   );
-  const handleInputChange = (e) => {
-    setKeyword(() => e.target.value);
-    let focusedValue = options.find(({ label }) => isTextIncludes_default(label, e.target.value));
+  const filterTo = (text) => {
+    setKeyword(() => text);
+    let focusedValue = options.find(({ label }) => isTextIncludes_default(label, text));
     if (!focusedValue && filteredOptions.length) {
       focusedValue = filteredOptions[0];
     }
@@ -6510,7 +6569,16 @@ var useSelectTrigger = () => {
       setFocusedOption(__spreadProps(__spreadValues({}, focusedValue), { focusType: "keyboard" }));
     }
   };
+  const handleInputChange = (e) => filterTo(e.target.value);
   const handleKeyboardInteraction = (e) => {
+    const printable = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+    if (hasDropdownSearch && printable && !(e.key === " " && !keyword)) {
+      e.preventDefault();
+      if (!open) openMenu();
+      filterTo((open ? keyword : "") + e.key);
+      requestSearchFocus();
+      return;
+    }
     if (e.key === "Escape") {
       e.currentTarget.blur();
       closeMenu();
@@ -6554,13 +6622,13 @@ var useSelectTrigger = () => {
     }
   };
   const matchesAnOption = options.some((opt) => isEqual_default(opt.value, value));
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (multiple || matchesAnOption || isNil_default(value) || value === "") return;
     devWarn(
       "Select was given a value that matches no SelectOption, so the label was worked out from the value itself. Add an option for it, or give the value a `label` key."
     );
   }, [multiple, matchesAnOption, value]);
-  const hasValue = (0, import_react47.useMemo)(() => {
+  const hasValue = (0, import_react48.useMemo)(() => {
     if (multiple) {
       return Array.isArray(value) && !!(value == null ? void 0 : value.length);
     }
@@ -6619,10 +6687,10 @@ function SelectButton(_a) {
     onChange,
     clearable
   } = useSelect();
-  const id = (0, import_react48.useId)();
-  const pointerDownRef = (0, import_react48.useRef)(false);
+  const id = (0, import_react49.useId)();
+  const pointerDownRef = (0, import_react49.useRef)(false);
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
-  const trigger = (0, import_react48.useMemo)(() => import_react48.Children.toArray(children).find(isSelectTrigger), [children]);
+  const trigger = (0, import_react49.useMemo)(() => import_react49.Children.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
     e.stopPropagation();
     if (disabled) return;
@@ -6690,6 +6758,7 @@ function SelectButton(_a) {
                   disabled,
                   className: "GeckoUISelectButton__search__input"
                 }, (open && !hasValue || !multiple && hasValue) && { "data-initial": "" }), !filterable && { "data-readonly": "" }), {
+                  readOnly: !filterable,
                   onKeyDown: handleKeyboardInteraction,
                   onFocusCapture: openMenu,
                   onChange: filterable ? handleInputChange : (
@@ -6803,7 +6872,7 @@ SelectButton.displayName = "SelectButton";
 var SelectButton_default = SelectButton;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/Select/SelectDropdownSearch/SelectDropdownSearch.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
@@ -6909,13 +6978,20 @@ var SelectMenu = (_a) => {
     disabled,
     open,
     filterable,
+    autoFocusSearch,
+    searchFocusRequest,
     menuScrollContainerRef,
     floating: { refs, floatingStyles }
   } = useSelect();
-  const menuItems = (0, import_react49.useMemo)(
-    () => import_react49.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
+  const menuItems = (0, import_react50.useMemo)(
+    () => import_react50.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
     [children]
   );
+  (0, import_react50.useEffect)(() => {
+    var _a2, _b2;
+    if (!searchFocusRequest) return;
+    (_b2 = (_a2 = refs.floating.current) == null ? void 0 : _a2.querySelector(".GeckoUISelectMenu__search-container input")) == null ? void 0 : _b2.focus();
+  }, [searchFocusRequest, refs.floating]);
   if (!open || disabled) {
     return null;
   }
@@ -6929,7 +7005,13 @@ var SelectMenu = (_a) => {
       "data-with-search": hasDropdownSearch || void 0
     }, rest), {
       children: [
-        hasDropdownSearch && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SelectDropdownSearch_default, { className: "GeckoUISelectMenu__search-container", autoFocus: true }),
+        hasDropdownSearch && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          SelectDropdownSearch_default,
+          {
+            className: "GeckoUISelectMenu__search-container",
+            autoFocus: autoFocusSearch
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
           menuItems,
           /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Empty, { children: menuItems })
@@ -6941,7 +7023,7 @@ var SelectMenu = (_a) => {
 function Empty({ children }) {
   const { hideDefaultEmptyUI = false } = useSelect();
   if (hideDefaultEmptyUI) return null;
-  const customEmpty = import_react49.Children.toArray(children).find(isSelectEmpty);
+  const customEmpty = import_react50.Children.toArray(children).find(isSelectEmpty);
   if (customEmpty) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SelectEmpty_default, {});
 }
@@ -6951,8 +7033,8 @@ var SelectMenu_default = SelectMenu;
 // src/components/Select/Select/Select.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var Select = (props) => {
-  const inputRef = (0, import_react51.useRef)(null);
-  const menuScrollContainerRef = (0, import_react51.useRef)(null);
+  const inputRef = (0, import_react52.useRef)(null);
+  const menuScrollContainerRef = (0, import_react52.useRef)(null);
   const _a = props, {
     disabled,
     inputRef: customInputRef,
@@ -6980,16 +7062,17 @@ var Select = (props) => {
     "floatingStrategy",
     "clearable"
   ]);
-  const [open, setOpen] = (0, import_react51.useState)(false);
-  const [keyword, setKeyword] = (0, import_react51.useState)("");
-  const [focusedOption, setFocusedOption] = (0, import_react51.useState)(null);
-  const floating = (0, import_react50.useFloating)({
+  const [open, setOpen] = (0, import_react52.useState)(false);
+  const [keyword, setKeyword] = (0, import_react52.useState)("");
+  const [searchFocusRequest, setSearchFocusRequest] = (0, import_react52.useState)(0);
+  const [focusedOption, setFocusedOption] = (0, import_react52.useState)(null);
+  const floating = (0, import_react51.useFloating)({
     placement,
     strategy: floatingStrategy,
     middleware: [
-      (0, import_react50.flip)({ padding: 6 }),
-      (0, import_react50.offset)({ mainAxis: 6 }),
-      (0, import_react50.size)({
+      (0, import_react51.flip)({ padding: 6 }),
+      (0, import_react51.offset)({ mainAxis: 6 }),
+      (0, import_react51.size)({
         padding: 6,
         apply({ rects, availableWidth, elements }) {
           Object.assign(elements.floating.style, {
@@ -7000,15 +7083,15 @@ var Select = (props) => {
         }
       })
     ],
-    whileElementsMounted: import_react50.autoUpdate,
+    whileElementsMounted: import_react51.autoUpdate,
     open,
     onOpenChange: setOpen
   });
   const { refs } = floating;
-  const options = (0, import_react51.useMemo)(
+  const options = (0, import_react52.useMemo)(
     () => {
       var _a2;
-      return (_a2 = import_react51.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
+      return (_a2 = import_react52.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
     },
     [children]
   );
@@ -7054,9 +7137,13 @@ var Select = (props) => {
       onChange([...prevValue, optionValue]);
     }
   };
-  useClickOutside_default(() => {
-    closeMenu();
-  }, [refs.reference]);
+  useClickOutside_default(
+    () => {
+      closeMenu();
+    },
+    [refs.reference],
+    open
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     SelectContext.Provider,
     {
@@ -7065,6 +7152,8 @@ var Select = (props) => {
         setOpen,
         keyword,
         setKeyword,
+        searchFocusRequest,
+        requestSearchFocus: () => setSearchFocusRequest((n) => n + 1),
         floating,
         openMenu,
         closeMenu,
@@ -7104,7 +7193,7 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
@@ -7127,7 +7216,7 @@ var SelectOption = (_a) => {
     "onRemove",
     "disabled"
   ]);
-  const ref = (0, import_react52.useRef)(null);
+  const ref = (0, import_react53.useRef)(null);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const {
     closeMenuOnSelect,
@@ -7145,7 +7234,7 @@ var SelectOption = (_a) => {
   } = useSelect();
   const selected = isSelected(value);
   const focused = !isNil_default(focusedOption) && isEqual_default(focusedOption == null ? void 0 : focusedOption.value, value);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!ref.current || !menuScrollContainerRef.current) return;
     if ((focusedOption == null ? void 0 : focusedOption.focusType) !== "mouse" && focused) {
       const scrollContainer = menuScrollContainerRef.current;
@@ -7321,7 +7410,7 @@ RHFSelect.displayName = "RHFSelect";
 var RHFSelect_default = RHFSelect;
 
 // src/components/Tabs/Tabs/Tabs.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/components/Tabs/Tabs.utils.ts
 var isTab = hasDisplayName("Tab");
@@ -7338,10 +7427,10 @@ function findTabs(el) {
 }
 
 // src/components/Tabs/useTabs.tsx
-var import_react53 = require("react");
-var TabsContext = (0, import_react53.createContext)(void 0);
+var import_react54 = require("react");
+var TabsContext = (0, import_react54.createContext)(void 0);
 var useTabs = () => {
-  const context = (0, import_react53.useContext)(TabsContext);
+  const context = (0, import_react54.useContext)(TabsContext);
   if (context === void 0) {
     throw new Error("useTabs must be used within a Tabs");
   }
@@ -7376,14 +7465,14 @@ var Tabs = (_a) => {
     "className",
     "children"
   ]);
-  const firstEnabled = (0, import_react54.useMemo)(
+  const firstEnabled = (0, import_react55.useMemo)(
     () => {
       var _a2;
       return (_a2 = findTabs(children).find((tab) => !tab.disabled)) == null ? void 0 : _a2.value;
     },
     [children]
   );
-  const [internalValue, setInternalValue] = (0, import_react54.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react55.useState)(defaultValue);
   const isControlled = value !== void 0;
   const selectedValue = isControlled ? value : internalValue != null ? internalValue : firstEnabled;
   const select = (next) => {
@@ -7413,13 +7502,13 @@ Tabs.displayName = "Tabs";
 var Tabs_default = Tabs;
 
 // src/components/Tabs/TabList/TabList.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var TabList = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
   const { selectedValue, isNav, orientation } = useTabs();
-  const listRef = (0, import_react55.useRef)(null);
-  (0, import_react55.useEffect)(() => {
+  const listRef = (0, import_react56.useRef)(null);
+  (0, import_react56.useEffect)(() => {
     const list = listRef.current;
     if (!list) return;
     const tab = list.querySelector('[data-gecko-tab][data-state="selected"]');
@@ -7491,7 +7580,7 @@ TabList.displayName = "TabList";
 var TabList_default = TabList;
 
 // src/components/Tabs/Tab/Tab.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var Tab = (_a) => {
   var _b = _a, { value, disabled, asChild, className, children } = _b, rest = __objRest(_b, ["value", "disabled", "asChild", "className", "children"]);
@@ -7513,7 +7602,7 @@ var Tab = (_a) => {
   });
   const child = asChild ? asChildElement(children) : null;
   if (child) {
-    return (0, import_react56.cloneElement)(child, __spreadProps(__spreadValues(__spreadValues({}, tabProps), rest), {
+    return (0, import_react57.cloneElement)(child, __spreadProps(__spreadValues(__spreadValues({}, tabProps), rest), {
       className: classNames(
         "GeckoUITabs__tab",
         child.props.className,
@@ -7562,21 +7651,21 @@ TabPanel.displayName = "TabPanel";
 var TabPanel_default = TabPanel;
 
 // src/components/Accordion/Accordion/Accordion.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 
 // src/components/Accordion/useAccordion.tsx
-var import_react57 = require("react");
-var AccordionContext = (0, import_react57.createContext)(void 0);
-var AccordionItemContext = (0, import_react57.createContext)(void 0);
+var import_react58 = require("react");
+var AccordionContext = (0, import_react58.createContext)(void 0);
+var AccordionItemContext = (0, import_react58.createContext)(void 0);
 var useAccordion = () => {
-  const context = (0, import_react57.useContext)(AccordionContext);
+  const context = (0, import_react58.useContext)(AccordionContext);
   if (context === void 0) {
     throw new Error("useAccordion must be used within an Accordion");
   }
   return context;
 };
 var useAccordionItem = () => {
-  const context = (0, import_react57.useContext)(AccordionItemContext);
+  const context = (0, import_react58.useContext)(AccordionItemContext);
   if (context === void 0) {
     throw new Error("useAccordionItem must be used within an AccordionItem");
   }
@@ -7613,8 +7702,8 @@ var Accordion = (_a) => {
     "className",
     "children"
   ]);
-  const rootRef = (0, import_react58.useRef)(null);
-  const [internalValue, setInternalValue] = (0, import_react58.useState)(defaultValue);
+  const rootRef = (0, import_react59.useRef)(null);
+  const [internalValue, setInternalValue] = (0, import_react59.useState)(defaultValue);
   const isControlled = value !== void 0;
   const openValues = toArray(isControlled ? value : internalValue);
   const toggle = (itemValue) => {
@@ -7809,7 +7898,7 @@ var Alert = (props) => {
 var Alert_default = Alert;
 
 // src/components/Avatar/Avatar/Avatar.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/components/Avatar/Avatar.utils.ts
 var initialsFrom = (name) => {
@@ -7822,9 +7911,9 @@ var initialsFrom = (name) => {
 };
 
 // src/components/Avatar/useAvatarGroup.tsx
-var import_react59 = require("react");
-var AvatarGroupContext = (0, import_react59.createContext)(null);
-var useAvatarGroup = () => (0, import_react59.useContext)(AvatarGroupContext);
+var import_react60 = require("react");
+var AvatarGroupContext = (0, import_react60.createContext)(null);
+var useAvatarGroup = () => (0, import_react60.useContext)(AvatarGroupContext);
 
 // src/components/Avatar/Avatar/Avatar.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
@@ -7838,7 +7927,7 @@ var PersonIcon = () => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { vi
     strokeLinejoin: "round"
   }
 ) });
-var Avatar = (0, import_react60.forwardRef)(
+var Avatar = (0, import_react61.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       src,
@@ -7865,7 +7954,7 @@ var Avatar = (0, import_react60.forwardRef)(
     ]);
     var _a2, _b2;
     const group = useAvatarGroup();
-    const [failedSrc, setFailedSrc] = (0, import_react60.useState)();
+    const [failedSrc, setFailedSrc] = (0, import_react61.useState)();
     const label = alt != null ? alt : name;
     const showImage = !!src && failedSrc !== src;
     const initials = name ? initialsFrom(name) : "";
@@ -7909,7 +7998,7 @@ Avatar.displayName = "Avatar";
 var Avatar_default = Avatar;
 
 // src/components/Avatar/AvatarGroup/AvatarGroup.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var NAME_DELAY2 = 150;
 var defaultOverflow = ({ avatars }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("ul", { className: "GeckoUIAvatarGroup__list", children: avatars.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("li", { className: "GeckoUIAvatarGroup__list__item", children: [
@@ -7934,9 +8023,9 @@ var AvatarGroup = (_a) => {
     "className",
     "children"
   ]);
-  const items = import_react61.Children.toArray(children);
+  const items = import_react62.Children.toArray(children);
   const visible = max && max > 0 ? items.slice(0, max) : items;
-  const avatars = items.slice(visible.length).map((child) => (0, import_react61.isValidElement)(child) ? child.props : {});
+  const avatars = items.slice(visible.length).map((child) => (0, import_react62.isValidElement)(child) ? child.props : {});
   const chip = avatars.length ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     Avatar_default,
     {
@@ -7980,9 +8069,9 @@ AvatarGroup.displayName = "AvatarGroup";
 var AvatarGroup_default = AvatarGroup;
 
 // src/components/Badge/Badge.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var Badge = (0, import_react62.forwardRef)(
+var Badge = (0, import_react63.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -8025,9 +8114,9 @@ Badge.displayName = "Badge";
 var Badge_default = Badge;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
-var Skeleton = (0, import_react63.forwardRef)(
+var Skeleton = (0, import_react64.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       shape = "text",
@@ -8064,13 +8153,13 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Progress/Progress.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var Progress = (0, import_react64.forwardRef)(
+var Progress = (0, import_react65.forwardRef)(
   (_a, ref) => {
     var _b = _a, { value, max = 100, color = "primary", size: size2 = "md", label, className } = _b, rest = __objRest(_b, ["value", "max", "color", "size", "label", "className"]);
     const indeterminate = value === void 0;
-    (0, import_react64.useEffect)(() => {
+    (0, import_react65.useEffect)(() => {
       if (max <= 0) devWarn(`Progress needs a max above 0, but got ${max}.`);
     }, [max]);
     const clamped = indeterminate || max <= 0 ? 0 : Math.min(Math.max(value, 0), max);
@@ -8107,13 +8196,13 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Breadcrumb/Breadcrumb/Breadcrumb.tsx
-var import_react66 = require("@floating-ui/react");
-var import_react67 = require("react");
+var import_react67 = require("@floating-ui/react");
+var import_react68 = require("react");
 
 // src/components/Breadcrumb/useBreadcrumb.tsx
-var import_react65 = require("react");
-var BreadcrumbContext = (0, import_react65.createContext)({ isLast: false });
-var useBreadcrumb = () => (0, import_react65.useContext)(BreadcrumbContext);
+var import_react66 = require("react");
+var BreadcrumbContext = (0, import_react66.createContext)({ isLast: false });
+var useBreadcrumb = () => (0, import_react66.useContext)(BreadcrumbContext);
 
 // src/components/Breadcrumb/Breadcrumb/Breadcrumb.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
@@ -8144,20 +8233,20 @@ var Breadcrumb = (_a) => {
     "menuClassName",
     "aria-label"
   ]);
-  const triggerRef = (0, import_react67.useRef)(null);
-  const menuRef = (0, import_react67.useRef)(null);
-  const [open, setOpen] = (0, import_react67.useState)(false);
-  const floating = (0, import_react66.useFloating)({
+  const triggerRef = (0, import_react68.useRef)(null);
+  const menuRef = (0, import_react68.useRef)(null);
+  const [open, setOpen] = (0, import_react68.useState)(false);
+  const floating = (0, import_react67.useFloating)({
     placement: menuPlacement,
-    middleware: [(0, import_react66.offset)(6), (0, import_react66.flip)({ padding: 8 }), (0, import_react66.shift)({ padding: 8 })],
-    whileElementsMounted: import_react66.autoUpdate,
+    middleware: [(0, import_react67.offset)(6), (0, import_react67.flip)({ padding: 8 }), (0, import_react67.shift)({ padding: 8 })],
+    whileElementsMounted: import_react67.autoUpdate,
     open,
     onOpenChange: setOpen
   });
-  useClickOutside_default(() => setOpen(false), [menuRef, triggerRef]);
-  const crumbs = import_react67.Children.toArray(children);
+  useClickOutside_default(() => setOpen(false), [menuRef, triggerRef], open);
+  const crumbs = import_react68.Children.toArray(children);
   const claimed = crumbs.some(
-    (crumb) => (0, import_react67.isValidElement)(crumb) && crumb.props.current
+    (crumb) => (0, import_react68.isValidElement)(crumb) && crumb.props.current
   );
   const collapsed = maxItems !== void 0 && maxItems > 0 && crumbs.length > maxItems;
   const hidden = collapsed ? crumbs.slice(itemsBeforeCollapse, crumbs.length - itemsAfterCollapse) : [];
@@ -8176,7 +8265,7 @@ var Breadcrumb = (_a) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("ol", { className: "GeckoUIBreadcrumb__list", children: shown.map((crumb, index) => {
           const last = index === shown.length - 1;
-          return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react67.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react68.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("li", { className: "GeckoUIBreadcrumb__crumb", children: crumb === "ellipsis" ? (
               /*
                * A list rather than opening out in place. On a narrow screen unfolding a
@@ -8235,7 +8324,7 @@ Breadcrumb.displayName = "Breadcrumb";
 var Breadcrumb_default = Breadcrumb;
 
 // src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var BreadcrumbItem = (_a) => {
   var _b = _a, {
@@ -8264,7 +8353,7 @@ var BreadcrumbItem = (_a) => {
   if (asChild) {
     const child = asChildElement(children);
     if (child) {
-      return (0, import_react68.cloneElement)(child, __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, shared), rest), onClick ? { onClick } : {}), {
+      return (0, import_react69.cloneElement)(child, __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, shared), rest), onClick ? { onClick } : {}), {
         className: classNames(classes, child.props.className)
       }));
     }
@@ -8287,11 +8376,11 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbItem_default = BreadcrumbItem;
 
 // src/components/Stepper/Stepper.utils.ts
-var import_react69 = require("react");
-var stepValuesFrom = (children) => import_react69.Children.toArray(children).filter(
+var import_react70 = require("react");
+var stepValuesFrom = (children) => import_react70.Children.toArray(children).filter(
   (child) => {
     var _a;
-    return (0, import_react69.isValidElement)(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "Step";
+    return (0, import_react70.isValidElement)(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "Step";
   }
 ).map((child) => child.props.value);
 var statusAt = (index, currentIndex) => {
@@ -8302,10 +8391,10 @@ var statusAt = (index, currentIndex) => {
 var isReachableAt = (index, currentIndex, linear) => linear ? index <= currentIndex : true;
 
 // src/components/Stepper/useStepper.tsx
-var import_react70 = require("react");
-var StepperContext = (0, import_react70.createContext)(null);
+var import_react71 = require("react");
+var StepperContext = (0, import_react71.createContext)(null);
 var useStepper = () => {
-  const context = (0, import_react70.useContext)(StepperContext);
+  const context = (0, import_react71.useContext)(StepperContext);
   if (!context) throw new Error("Step has to be used inside a <Stepper>.");
   return context;
 };
@@ -8530,14 +8619,14 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
 var Pagination_default = Pagination;
 
 // src/components/Popover/Popover/Popover.tsx
-var import_react72 = require("@floating-ui/react");
-var import_react73 = require("react");
+var import_react73 = require("@floating-ui/react");
+var import_react74 = require("react");
 
 // src/components/Popover/usePopover.tsx
-var import_react71 = require("react");
-var PopoverContext = (0, import_react71.createContext)(void 0);
+var import_react72 = require("react");
+var PopoverContext = (0, import_react72.createContext)(void 0);
 var usePopover = () => {
-  const context = (0, import_react71.useContext)(PopoverContext);
+  const context = (0, import_react72.useContext)(PopoverContext);
   if (context === void 0) {
     throw new Error("usePopover must be used within a Popover");
   }
@@ -8575,10 +8664,10 @@ var Popover = (_a) => {
     "className",
     "children"
   ]);
-  const arrowRef = (0, import_react73.useRef)(null);
-  const triggerRef = (0, import_react73.useRef)(null);
-  const rootRef = (0, import_react73.useRef)(null);
-  const [internalOpen, setInternalOpen] = (0, import_react73.useState)(defaultOpen);
+  const arrowRef = (0, import_react74.useRef)(null);
+  const triggerRef = (0, import_react74.useRef)(null);
+  const rootRef = (0, import_react74.useRef)(null);
+  const [internalOpen, setInternalOpen] = (0, import_react74.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const open = disabled ? false : isControlled ? controlledOpen : internalOpen;
   const setOpen = (next) => {
@@ -8592,27 +8681,29 @@ var Popover = (_a) => {
     setOpen(false);
     (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
   };
-  const floating = (0, import_react72.useFloating)({
+  const floating = (0, import_react73.useFloating)({
     placement,
     strategy: floatingStrategy,
     middleware: [
       // `offset` is the gap between the trigger and the nearest part of the popover. The
       // arrow sticks out past the panel edge, so it has to be paid for here or the tip
       // lands on the trigger.
-      (0, import_react72.offset)(arrow2 ? offset10 + ARROW_HEIGHT : offset10),
-      (0, import_react72.flip)({ padding: 6 }),
-      (0, import_react72.shift)({ padding: 6 }),
-      ...arrow2 ? [(0, import_react72.arrow)({ element: arrowRef })] : []
+      (0, import_react73.offset)(arrow2 ? offset10 + ARROW_HEIGHT : offset10),
+      (0, import_react73.flip)({ padding: 6 }),
+      (0, import_react73.shift)({ padding: 6 }),
+      ...arrow2 ? [(0, import_react73.arrow)({ element: arrowRef })] : []
     ],
-    whileElementsMounted: import_react72.autoUpdate,
+    whileElementsMounted: import_react73.autoUpdate,
     open,
     onOpenChange: setOpen
   });
-  (0, import_react73.useEffect)(() => {
+  const isTop = useLayer(open);
+  (0, import_react74.useEffect)(() => {
     if (!dismissOnOutsideClick || !open) return;
     const dismiss = (event) => {
       var _a2;
       if ((_a2 = rootRef.current) == null ? void 0 : _a2.contains(event.target)) return;
+      if (!isTop()) return;
       setOpen(false);
     };
     document.addEventListener("click", dismiss);
@@ -8642,6 +8733,7 @@ var Popover = (_a) => {
           className: classNames("GeckoUIPopover", className),
           onKeyDown: (e) => {
             if (!dismissOnEscape || !open || e.key !== "Escape") return;
+            if (!isTop()) return;
             e.stopPropagation();
             close();
           }
@@ -8656,7 +8748,7 @@ Popover.displayName = "Popover";
 var Popover_default = Popover;
 
 // src/components/Popover/PopoverTrigger/PopoverTrigger.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var PopoverTrigger = ({ children }) => {
   var _a;
@@ -8684,21 +8776,21 @@ var PopoverTrigger = ({ children }) => {
       toggle();
     }
   };
-  if (child) return (0, import_react74.cloneElement)(child, triggerProps);
+  if (child) return (0, import_react75.cloneElement)(child, triggerProps);
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", __spreadProps(__spreadValues({}, triggerProps), { children }));
 };
 PopoverTrigger.displayName = "PopoverTrigger";
 var PopoverTrigger_default = PopoverTrigger;
 
 // src/components/Popover/PopoverContent/PopoverContent.tsx
-var import_react75 = require("@floating-ui/react");
-var import_react76 = require("react");
+var import_react76 = require("@floating-ui/react");
+var import_react77 = require("react");
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var PopoverContent = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
   const { open, arrow: arrow2, arrowRef, floating } = usePopover();
-  const contentRef = (0, import_react76.useRef)(null);
-  (0, import_react76.useEffect)(() => {
+  const contentRef = (0, import_react77.useRef)(null);
+  (0, import_react77.useEffect)(() => {
     var _a2, _b2;
     if (!open) return;
     const focusable = (_a2 = contentRef.current) == null ? void 0 : _a2.querySelector(
@@ -8723,7 +8815,7 @@ var PopoverContent = (_a) => {
       children: [
         children,
         arrow2 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_react75.FloatingArrow,
+          import_react76.FloatingArrow,
           {
             ref: arrowRef,
             context: floating.context,
@@ -8739,7 +8831,7 @@ PopoverContent.displayName = "PopoverContent";
 var PopoverContent_default = PopoverContent;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 
 // src/components/GeckoUIProvider/overlay-store.ts
 var OVERLAY_ANIMATION_DURATION = 300;
@@ -8871,7 +8963,7 @@ var overlayStore = {
 };
 
 // src/components/Dialog/DialogSurface.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 function DialogSurface({
   open,
@@ -8885,27 +8977,27 @@ function DialogSurface({
   onExited,
   children
 }) {
-  const [animationState, setAnimationState] = (0, import_react77.useState)(
+  const [animationState, setAnimationState] = (0, import_react78.useState)(
     open ? "entering" : "closed"
   );
-  const rootRef = (0, import_react77.useRef)(null);
-  const backdropRef = (0, import_react77.useRef)(null);
-  const pressedOutside = (0, import_react77.useRef)(false);
-  const onDismissRef = (0, import_react77.useRef)(onDismiss);
-  const onExitedRef = (0, import_react77.useRef)(onExited);
+  const rootRef = (0, import_react78.useRef)(null);
+  const backdropRef = (0, import_react78.useRef)(null);
+  const pressedOutside = (0, import_react78.useRef)(false);
+  const onDismissRef = (0, import_react78.useRef)(onDismiss);
+  const onExitedRef = (0, import_react78.useRef)(onExited);
   onDismissRef.current = onDismiss;
   onExitedRef.current = onExited;
-  const requestDismiss = (0, import_react77.useCallback)(() => {
+  const requestDismiss = (0, import_react78.useCallback)(() => {
     var _a;
     (_a = onDismissRef.current) == null ? void 0 : _a.call(onDismissRef);
   }, []);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     setAnimationState((current) => {
       if (open) return current === "open" ? current : "entering";
       return current === "closed" ? current : "closing";
     });
   }, [open]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (animationState === "entering") {
       let innerFrame = 0;
       const outerFrame = requestAnimationFrame(() => {
@@ -8927,7 +9019,11 @@ function DialogSurface({
   }, [animationState]);
   useScrollLock_default(animationState !== "closed");
   const canDismiss = open && isTop && animationState !== "closing";
-  useEscListener_default(canDismiss && dismissOnEscape ? requestDismiss : void 0);
+  const isTopLayer2 = useLayer(open);
+  const dismissIfTopLayer = (0, import_react78.useCallback)(() => {
+    if (isTopLayer2()) requestDismiss();
+  }, [isTopLayer2, requestDismiss]);
+  useEscListener_default(canDismiss && dismissOnEscape ? dismissIfTopLayer : void 0);
   const isOutside = (target) => target === backdropRef.current || target === rootRef.current;
   const handleMouseDown = (event) => {
     pressedOutside.current = isOutside(event.target);
@@ -8935,7 +9031,7 @@ function DialogSurface({
   const handleMouseUp = (event) => {
     const shouldDismiss2 = pressedOutside.current && isOutside(event.target);
     pressedOutside.current = false;
-    if (shouldDismiss2 && canDismiss && dismissOnOutsideClick) requestDismiss();
+    if (shouldDismiss2 && canDismiss && dismissOnOutsideClick) dismissIfTopLayer();
   };
   if (animationState === "closed") return null;
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
@@ -9017,10 +9113,10 @@ function ConfirmDialogContent({
   onCancel,
   isTop = true
 }) {
-  const [cancelLoading, setCancelLoading] = (0, import_react78.useState)(false);
-  const [confirmLoading, setConfirmLoading] = (0, import_react78.useState)(false);
+  const [cancelLoading, setCancelLoading] = (0, import_react79.useState)(false);
+  const [confirmLoading, setConfirmLoading] = (0, import_react79.useState)(false);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
-  const handleConfirm = (0, import_react78.useCallback)(() => __async(null, null, function* () {
+  const handleConfirm = (0, import_react79.useCallback)(() => __async(null, null, function* () {
     const isAsync = isAsyncFn(onConfirm);
     if (isAsync) {
       setConfirmLoading(true);
@@ -9037,7 +9133,7 @@ function ConfirmDialogContent({
     setCancelLoading(false);
     attachPreventDefault(dismiss);
   });
-  (0, import_react78.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     if (!isTop) return;
     const onKeyDown = (e) => {
       const el = document.activeElement;
@@ -9197,11 +9293,11 @@ toast.promise = (promise, messages, options) => {
 toast.dismiss = (id) => toastStore.dismiss(id);
 
 // src/components/Toast/Toaster.tsx
-var import_react80 = require("react");
+var import_react81 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/Toast/ToastItem.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 
 // src/components/Toast/Toast.utils.ts
 var swipeDirectionsFor = (position) => ({
@@ -9271,31 +9367,31 @@ var icons = {
 function ToastItem({ toast: toast2, defaults, paused, position }) {
   var _a, _b, _c, _d;
   const { options, message, variant, custom } = toast2;
-  const [state, setState] = (0, import_react79.useState)("entering");
+  const [state, setState] = (0, import_react80.useState)("entering");
   const duration = (_a = options.duration) != null ? _a : defaults.duration;
   const dismissible = (_c = (_b = options.dismissible) != null ? _b : defaults.dismissible) != null ? _c : true;
   const closeButton = (_d = options.closeButton) != null ? _d : defaults.closeButton;
   const swipe = swipeDirectionsFor(position);
-  const [offset10, setOffset] = (0, import_react79.useState)(0);
-  const [axis, setAxis] = (0, import_react79.useState)(null);
-  const [dragging, setDragging] = (0, import_react79.useState)(false);
-  const dragFrom = (0, import_react79.useRef)({ x: 0, y: 0 });
-  const dragStartedAt = (0, import_react79.useRef)(0);
-  const remaining = (0, import_react79.useRef)(duration);
-  const startedAt = (0, import_react79.useRef)(0);
-  const closedBy = (0, import_react79.useRef)(null);
-  const close = (0, import_react79.useCallback)((reason) => {
+  const [offset10, setOffset] = (0, import_react80.useState)(0);
+  const [axis, setAxis] = (0, import_react80.useState)(null);
+  const [dragging, setDragging] = (0, import_react80.useState)(false);
+  const dragFrom = (0, import_react80.useRef)({ x: 0, y: 0 });
+  const dragStartedAt = (0, import_react80.useRef)(0);
+  const remaining = (0, import_react80.useRef)(duration);
+  const startedAt = (0, import_react80.useRef)(0);
+  const closedBy = (0, import_react80.useRef)(null);
+  const close = (0, import_react80.useCallback)((reason) => {
     if (closedBy.current) return;
     closedBy.current = reason;
     setState("closing");
   }, []);
-  (0, import_react79.useEffect)(() => toastStore.registerDismiss(toast2.id, () => close("manual")), [toast2.id, close]);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => toastStore.registerDismiss(toast2.id, () => close("manual")), [toast2.id, close]);
+  (0, import_react80.useEffect)(() => {
     const raf = requestAnimationFrame(() => setState("open"));
     return () => cancelAnimationFrame(raf);
   }, []);
-  const generationRef = (0, import_react79.useRef)(toast2.generation);
-  (0, import_react79.useEffect)(() => {
+  const generationRef = (0, import_react80.useRef)(toast2.generation);
+  (0, import_react80.useEffect)(() => {
     if (generationRef.current !== toast2.generation) {
       generationRef.current = toast2.generation;
       remaining.current = duration;
@@ -9468,13 +9564,13 @@ function Toaster(_a) {
     "offset",
     "className"
   ]);
-  const isMounted = (0, import_react80.useSyncExternalStore)(subscribeNever, mounted, notMounted);
-  const toasts2 = (0, import_react80.useSyncExternalStore)(
+  const isMounted = (0, import_react81.useSyncExternalStore)(subscribeNever, mounted, notMounted);
+  const toasts2 = (0, import_react81.useSyncExternalStore)(
     toastStore.subscribe,
     toastStore.getSnapshot,
     toastStore.getServerSnapshot
   );
-  const [pausedRegion, setPausedRegion] = (0, import_react80.useState)(null);
+  const [pausedRegion, setPausedRegion] = (0, import_react81.useState)(null);
   if (!isMounted || toasts2.length === 0) return null;
   const defaults = __spreadValues({ duration, closeButton, dismissible }, rest);
   return (0, import_react_dom.createPortal)(
@@ -9513,11 +9609,11 @@ function Toaster(_a) {
 }
 
 // src/components/GeckoUIProvider/GeckoUIProvider.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/Drawer/Drawer.tsx
-var import_react81 = require("react");
+var import_react82 = require("react");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 function Drawer({
   open = false,
@@ -9532,38 +9628,42 @@ function Drawer({
   keepMounted = false,
   style
 }) {
-  const drawerRef = (0, import_react81.useRef)(null);
-  const [readyFor, setReadyFor] = (0, import_react81.useState)(null);
-  (0, import_react81.useEffect)(() => {
+  const drawerRef = (0, import_react82.useRef)(null);
+  const [readyFor, setReadyFor] = (0, import_react82.useState)(null);
+  (0, import_react82.useEffect)(() => {
     const frame = requestAnimationFrame(() => setReadyFor(placement));
     return () => cancelAnimationFrame(frame);
   }, [placement]);
   const ready = readyFor === placement;
   const visible = open && ready;
-  const [closing, setClosing] = (0, import_react81.useState)(false);
-  const [prevOpen, setPrevOpen] = (0, import_react81.useState)(open);
+  const [closing, setClosing] = (0, import_react82.useState)(false);
+  const [prevOpen, setPrevOpen] = (0, import_react82.useState)(open);
   if (prevOpen !== open) {
     setPrevOpen(open);
     setClosing(!open);
   }
-  (0, import_react81.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (!closing) return;
     const timer = setTimeout(() => setClosing(false), OVERLAY_ANIMATION_DURATION);
     return () => clearTimeout(timer);
   }, [closing]);
-  const onCloseRef = (0, import_react81.useRef)(onClose);
+  const onCloseRef = (0, import_react82.useRef)(onClose);
   onCloseRef.current = onClose;
-  const handleDismiss = (0, import_react81.useCallback)(() => {
+  const isTop = useLayer(open);
+  const handleDismiss = (0, import_react82.useCallback)(() => {
     var _a;
     (_a = onCloseRef.current) == null ? void 0 : _a.call(onCloseRef);
   }, []);
-  const dismissOnClickOutside = (0, import_react81.useCallback)(() => {
+  const dismissIfTop = (0, import_react82.useCallback)(() => {
+    if (isTop()) handleDismiss();
+  }, [isTop, handleDismiss]);
+  const dismissOnClickOutside = (0, import_react82.useCallback)(() => {
     if (!allowClickOutside || !open) return;
-    handleDismiss();
-  }, [allowClickOutside, open, handleDismiss]);
+    dismissIfTop();
+  }, [allowClickOutside, open, dismissIfTop]);
   useClickOutside_default(dismissOnClickOutside, [drawerRef]);
   useScrollLock_default((open || closing) && !allowClickOutside);
-  useEscListener_default(open && dismissOnEscape ? handleDismiss : void 0);
+  useEscListener_default(open && dismissOnEscape ? dismissIfTop : void 0);
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "GeckoUIDrawer", style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       "div",
@@ -9571,7 +9671,7 @@ function Drawer({
         "data-state": visible && !hideBackdrop ? "visible" : "hidden",
         "data-clickthrough": allowClickOutside || void 0,
         className: classNames("GeckoUIDrawer__backdrop", backdropClassName),
-        onMouseDown: open ? handleDismiss : void 0,
+        onMouseDown: open ? dismissIfTop : void 0,
         role: "presentation"
       }
     ),
@@ -9591,7 +9691,7 @@ function Drawer({
     )
   ] });
 }
-var INERT_IS_BOOLEAN = Number(import_react81.version.split(".")[0]) >= 19;
+var INERT_IS_BOOLEAN = Number(import_react82.version.split(".")[0]) >= 19;
 function inertProps(inert) {
   if (INERT_IS_BOOLEAN) return { inert };
   return inert ? { inert: "" } : {};
@@ -9613,14 +9713,14 @@ var emptySubscribe = () => () => {
 var getNoHost = () => null;
 var getMounted = () => true;
 var getNotMounted = () => false;
-var useIsMounted = () => (0, import_react82.useSyncExternalStore)(emptySubscribe, getMounted, getNotMounted);
+var useIsMounted = () => (0, import_react83.useSyncExternalStore)(emptySubscribe, getMounted, getNotMounted);
 function useOverlayEntry(id) {
-  const [open, setOpen] = (0, import_react82.useState)(true);
-  const close = (0, import_react82.useCallback)(() => {
+  const [open, setOpen] = (0, import_react83.useState)(true);
+  const close = (0, import_react83.useCallback)(() => {
     setOpen(false);
     overlayStore.markClosing(id);
   }, [id]);
-  const handleExited = (0, import_react82.useCallback)(() => {
+  const handleExited = (0, import_react83.useCallback)(() => {
     overlayStore.remove(id);
   }, [id]);
   return { open, close, handleExited };
@@ -9638,7 +9738,7 @@ function DialogEntryRenderer({ id, options, isTop, zIndex }) {
     "dismissOnOutsideClick"
   ]);
   const { open, close, handleExited } = useOverlayEntry(id);
-  (0, import_react82.useEffect)(() => overlayStore.registerDismiss(id, close), [id, close]);
+  (0, import_react83.useEffect)(() => overlayStore.registerDismiss(id, close), [id, close]);
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     DialogSurface,
     {
@@ -9663,15 +9763,15 @@ function DrawerEntryRenderer({
   zIndex
 }) {
   const { open, close, handleExited } = useOverlayEntry(id);
-  const onCloseRef = (0, import_react82.useRef)(options.onClose);
+  const onCloseRef = (0, import_react83.useRef)(options.onClose);
   onCloseRef.current = options.onClose;
-  const handleClose = (0, import_react82.useCallback)(() => {
+  const handleClose = (0, import_react83.useCallback)(() => {
     var _a;
     (_a = onCloseRef.current) == null ? void 0 : _a.call(onCloseRef);
     close();
   }, [close]);
-  (0, import_react82.useEffect)(() => overlayStore.registerDismiss(id, handleClose), [id, handleClose]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => overlayStore.registerDismiss(id, handleClose), [id, handleClose]);
+  (0, import_react83.useEffect)(() => {
     if (open) return;
     const timer = setTimeout(handleExited, OVERLAY_ANIMATION_DURATION);
     return () => clearTimeout(timer);
@@ -9700,14 +9800,14 @@ function OverlayEntryRenderer({
 }
 function GeckoUIProvider({ children, toastOptions = {} }) {
   const mounted2 = useIsMounted();
-  const [hostId] = (0, import_react82.useState)(() => overlayStore.createHostId());
-  (0, import_react82.useEffect)(() => overlayStore.registerHost(hostId), [hostId]);
-  const activeHost2 = (0, import_react82.useSyncExternalStore)(
+  const [hostId] = (0, import_react83.useState)(() => overlayStore.createHostId());
+  (0, import_react83.useEffect)(() => overlayStore.registerHost(hostId), [hostId]);
+  const activeHost2 = (0, import_react83.useSyncExternalStore)(
     overlayStore.subscribe,
     overlayStore.getActiveHost,
     getNoHost
   );
-  const entries2 = (0, import_react82.useSyncExternalStore)(
+  const entries2 = (0, import_react83.useSyncExternalStore)(
     overlayStore.subscribe,
     overlayStore.getSnapshot,
     overlayStore.getServerSnapshot
@@ -9735,17 +9835,17 @@ function GeckoUIProvider({ children, toastOptions = {} }) {
 }
 
 // src/components/Menu/Menu/Menu.tsx
-var import_react86 = require("@floating-ui/react");
-var import_react87 = require("react");
+var import_react87 = require("@floating-ui/react");
+var import_react88 = require("react");
 
 // src/components/Menu/Menu.utils.ts
-var import_react84 = require("react");
+var import_react85 = require("react");
 
 // src/components/Menu/useMenu.tsx
-var import_react83 = require("react");
-var MenuContext = (0, import_react83.createContext)(void 0);
+var import_react84 = require("react");
+var MenuContext = (0, import_react84.createContext)(void 0);
 var useMenu = () => {
-  const context = (0, import_react83.useContext)(MenuContext);
+  const context = (0, import_react84.useContext)(MenuContext);
   if (context === void 0) {
     throw new Error("useMenu must be used within a Menu");
   }
@@ -9762,7 +9862,7 @@ var MenuTrigger_default = MenuTrigger;
 
 // src/components/Menu/Menu.utils.ts
 function isMenuTrigger(child) {
-  return (0, import_react84.isValidElement)(child) && child.type === MenuTrigger_default;
+  return (0, import_react85.isValidElement)(child) && child.type === MenuTrigger_default;
 }
 
 // src/components/Menu/MenuButton/MenuButton.tsx
@@ -9797,7 +9897,7 @@ MenuButton.displayName = "MenuButton";
 var MenuButton_default = MenuButton;
 
 // src/components/Menu/MenuPanel/MenuPanel.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var MenuPanel = ({ children, className }) => {
   const {
@@ -9807,8 +9907,8 @@ var MenuPanel = ({ children, className }) => {
     menuRef,
     floating: { refs, floatingStyles }
   } = useMenu();
-  const panelRef = (0, import_react85.useRef)(null);
-  (0, import_react85.useEffect)(() => {
+  const panelRef = (0, import_react86.useRef)(null);
+  (0, import_react86.useEffect)(() => {
     if (!open || !panelRef.current) return;
     panelRef.current.focus();
   }, [open]);
@@ -9872,35 +9972,39 @@ var Menu = ({
   buttonClassName,
   children
 }) => {
-  const menuRef = (0, import_react87.useRef)(null);
-  const [open, setOpen] = (0, import_react87.useState)(false);
-  const floating = (0, import_react86.useFloating)({
+  const menuRef = (0, import_react88.useRef)(null);
+  const [open, setOpen] = (0, import_react88.useState)(false);
+  const floating = (0, import_react87.useFloating)({
     placement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react86.flip)({ padding: 6 }), (0, import_react86.offset)({ mainAxis: 6 })],
-    whileElementsMounted: import_react86.autoUpdate,
+    middleware: [(0, import_react87.flip)({ padding: 6 }), (0, import_react87.offset)({ mainAxis: 6 })],
+    whileElementsMounted: import_react87.autoUpdate,
     open,
     onOpenChange: setOpen
   });
   const { refs } = floating;
-  const openMenu = (0, import_react87.useCallback)(() => {
+  const openMenu = (0, import_react88.useCallback)(() => {
     if (disabled || open) return;
     setOpen(true);
   }, [disabled, open]);
-  const closeMenu = (0, import_react87.useCallback)(() => {
+  const closeMenu = (0, import_react88.useCallback)(() => {
     setOpen(false);
   }, []);
-  const toggleMenu = (0, import_react87.useCallback)(() => {
+  const toggleMenu = (0, import_react88.useCallback)(() => {
     if (open) {
       closeMenu();
     } else {
       openMenu();
     }
   }, [open, openMenu, closeMenu]);
-  useClickOutside_default(() => {
-    closeMenu();
-  }, [refs.reference]);
-  const childArray = import_react87.Children.toArray(children);
+  useClickOutside_default(
+    () => {
+      closeMenu();
+    },
+    [refs.reference],
+    open
+  );
+  const childArray = import_react88.Children.toArray(children);
   const trigger = childArray.find(isMenuTrigger);
   const menuItems = childArray.filter((el) => !isMenuTrigger(el));
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(