@geckoui/geckoui 2.0.5 → 2.0.6

package/dist/index.mjs

@@ -55,7 +55,7 @@ var __async = (__this, __arguments, generator) => {
 var __forAwait = (obj, it, method) => (it = obj[__knownSymbol("asyncIterator")]) ? it.call(obj) : (obj = obj[__knownSymbol("iterator")](), it = {}, method = (key, fn) => (fn = obj[key]) && (it[key] = (arg) => new Promise((yes, no, done) => (arg = fn.call(obj, arg), done = arg.done, Promise.resolve(arg.value).then((value) => yes({ value, done }), no)))), method("next"), method("return"), it);
 
 // src/hooks/useClickOutside.ts
-import { useEffect, useRef } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // src/utils/isInsideShadowDom.ts
 function isInsideShadowDOM(node) {
@@ -65,14 +65,61 @@ function isInsideShadowDOM(node) {
   return rootNode instanceof ShadowRoot;
 }
 
+// src/utils/layerStack.ts
+import { useCallback, useEffect, useRef } from "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 = useRef({}).current;
+  useEffect(() => {
+    if (!active) return;
+    listen();
+    stack.push(layer);
+    return () => {
+      const index = stack.lastIndexOf(layer);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [active, layer]);
+  return useCallback(() => isTopLayer(layer), [layer]);
+}
+
 // src/hooks/useClickOutside.ts
-var useClickOutside = (handler, refs) => {
-  const handlerRef = useRef(handler);
-  const refsRef = useRef(refs);
+var useClickOutside = (handler, refs, open) => {
+  const isTop = useLayer(!!open);
+  const layered = open !== void 0;
+  const layeredRef = useRef2(layered);
+  layeredRef.current = layered;
+  const handlerRef = useRef2(handler);
+  const refsRef = useRef2(refs);
   handlerRef.current = handler;
   refsRef.current = refs;
   const enabled = !!handler && !!refs && refs.length > 0;
-  useEffect(() => {
+  useEffect2(() => {
     if (!enabled) return;
     const listener = (event) => {
       var _a, _b, _c;
@@ -85,6 +132,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);
@@ -93,12 +141,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
-import { useCallback, useEffect as useEffect3, useRef as useRef3, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState } from "react";
 
 // src/utils/isNil.ts
 var isNil = (value) => {
@@ -492,11 +540,11 @@ var FilePicker = (() => {
 var FilePicker_default = FilePicker;
 
 // src/hooks/useRevokedPreviews.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 var useRevokedPreviews = (previews) => {
-  const held = useRef2(/* @__PURE__ */ new Set());
-  const inherited = useRef2(null);
-  useEffect2(() => {
+  const held = useRef3(/* @__PURE__ */ new Set());
+  const inherited = useRef3(null);
+  useEffect3(() => {
     const current = new Set(previews.filter((preview) => Boolean(preview)));
     if (inherited.current === null) inherited.current = current;
     held.current.forEach((preview) => {
@@ -504,7 +552,7 @@ var useRevokedPreviews = (previews) => {
     });
     held.current = current;
   });
-  useEffect2(
+  useEffect3(
     () => () => {
       held.current.forEach((preview) => {
         var _a;
@@ -531,11 +579,11 @@ function useFilePicker(options) {
     disabled = false,
     multiple = true
   } = options || {};
-  const dropzoneRef = useRef3(null);
+  const dropzoneRef = useRef4(null);
   const [loading, setLoading] = useState(false);
   const [dragging, setDragging] = useState(false);
   useRevokedPreviews_default(files.map((file) => file.preview));
-  const handleOnChange = useCallback(
+  const handleOnChange = useCallback2(
     (res) => __async(null, null, function* () {
       const transformedRes = transform ? yield transform(res) : res;
       const _result = keepOldFiles ? [...files].concat(transformedRes) : transformedRes;
@@ -565,7 +613,7 @@ function useFilePicker(options) {
       setLoading(() => false);
     }
   });
-  useEffect3(() => {
+  useEffect4(() => {
     const el = dropzoneRef.current;
     if (!el || disabled) return;
     const handleDragOver = (e) => {
@@ -632,9 +680,9 @@ function useFilePicker(options) {
 var useFilePicker_default = useFilePicker;
 
 // src/hooks/usePreventDefault.ts
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 var usePreventDefault = () => {
-  const preventAction = useRef4(false);
+  const preventAction = useRef5(false);
   const preventDefault = () => preventAction.current = true;
   const attachPreventDefault = (fn) => __async(null, null, function* () {
     if (preventAction.current) {
@@ -648,9 +696,9 @@ var usePreventDefault = () => {
 var usePreventDefault_default = usePreventDefault;
 
 // src/hooks/useEscListener.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 var useEscListener = (callback) => {
-  useEffect4(() => {
+  useEffect5(() => {
     if (!callback) return;
     const dismissListener = (e) => {
       const node = e.target;
@@ -669,7 +717,7 @@ var useEscListener = (callback) => {
 var useEscListener_default = useEscListener;
 
 // src/hooks/useScrollLock.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 var lockCount = 0;
 var previousOverflow = "";
 var previousPaddingRight = "";
@@ -696,7 +744,7 @@ function unlockBodyScroll() {
   documentElement.style.removeProperty(SCROLLBAR_VARIABLE);
 }
 var useScrollLock = (enabled) => {
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled) return;
     lockBodyScroll();
     return unlockBodyScroll;
@@ -705,7 +753,7 @@ var useScrollLock = (enabled) => {
 var useScrollLock_default = useScrollLock;
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef, useCallback as useCallback2, useEffect as useEffect6, useId, useRef as useRef5 } from "react";
+import { forwardRef, useCallback as useCallback3, useEffect as useEffect7, useId, useRef as useRef6 } from "react";
 
 // src/icons/CheckIcon.tsx
 import { jsx } from "react/jsx-runtime";
@@ -810,8 +858,8 @@ var Checkbox = forwardRef(
   (_a, ref) => {
     var _b = _a, { id, disabled, className, checked, indeterminate } = _b, rest = __objRest(_b, ["id", "disabled", "className", "checked", "indeterminate"]);
     const _id = useId();
-    const innerRef = useRef5(null);
-    const setRefs = useCallback2(
+    const innerRef = useRef6(null);
+    const setRefs = useCallback3(
       (node) => {
         innerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -819,7 +867,7 @@ var Checkbox = forwardRef(
       },
       [ref]
     );
-    useEffect6(() => {
+    useEffect7(() => {
       if (innerRef.current) innerRef.current.indeterminate = Boolean(indeterminate);
     });
     const Icon = indeterminate ? IndeterminateIcon_default : CheckIcon_default;
@@ -975,10 +1023,10 @@ var CounterInput_default = CounterInput;
 
 // src/components/DateInput/DateInput.tsx
 import { autoUpdate, flip, offset, useFloating } from "@floating-ui/react";
-import { useCallback as useCallback3, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback4, useRef as useRef8, useState as useState5 } from "react";
 
 // src/components/BaseDateInput/BaseDateInput.tsx
-import { Fragment, useEffect as useEffect7, useRef as useRef6, useState as useState2 } from "react";
+import { Fragment, useEffect as useEffect8, useRef as useRef7, useState as useState2 } from "react";
 
 // src/components/DynamicComponentRenderer/DynamicComponentRenderer.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -1079,10 +1127,10 @@ var BaseDateInput = ({
   hasFocus,
   "aria-invalid": invalid
 }) => {
-  const containerRef = useRef6(null);
-  const monthRef = useRef6(null);
-  const dayRef = useRef6(null);
-  const yearRef = useRef6(null);
+  const containerRef = useRef7(null);
+  const monthRef = useRef7(null);
+  const dayRef = useRef7(null);
+  const yearRef = useRef7(null);
   const [month, setMonth] = useState2("");
   const [day, setDay] = useState2("");
   const [year, setYear] = useState2("");
@@ -1241,7 +1289,7 @@ var BaseDateInput = ({
     onSubmit == null ? void 0 : onSubmit();
     clearFocus();
   };
-  useEffect7(() => {
+  useEffect8(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdatedTime;
     if (timeSinceLastUpdate > 500) {
@@ -1351,7 +1399,7 @@ BaseDateInput.displayName = "BaseDateInput";
 var BaseDateInput_default = BaseDateInput;
 
 // src/components/Calendar/Calendar/Calendar.tsx
-import { useEffect as useEffect8, useImperativeHandle, useState as useState4 } from "react";
+import { useEffect as useEffect9, useImperativeHandle, useState as useState4 } from "react";
 
 // src/components/Calendar/Calendar.utils.ts
 function daysInMonth(month, year) {
@@ -1731,7 +1779,7 @@ var Calendar = (props) => {
       clearSelection
     };
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (mode === "single") {
       if (selectedDate && !isValidISOFormat(selectedDate)) {
         devWarn(
@@ -1907,7 +1955,7 @@ var DateInput = (_a) => {
     "onStateUpdate",
     "onSubmit"
   ]);
-  const calendarRef = useRef7(null);
+  const calendarRef = useRef8(null);
   const [openCalendar, setOpenCalendar] = useState5(false);
   const { refs, floatingStyles } = useFloating({
     placement: calendarPlacement,
@@ -1917,10 +1965,14 @@ var DateInput = (_a) => {
     open: openCalendar,
     onOpenChange: setOpenCalendar
   });
-  useClickOutside_default(() => {
-    setOpenCalendar(false);
-  }, [refs.reference]);
-  const handleStateUpdateInternal = useCallback3(
+  useClickOutside_default(
+    () => {
+      setOpenCalendar(false);
+    },
+    [refs.reference],
+    openCalendar
+  );
+  const handleStateUpdateInternal = useCallback4(
     (state) => {
       var _a2;
       if (!hideCalendar) {
@@ -1938,11 +1990,11 @@ var DateInput = (_a) => {
     },
     [hideCalendar, onStateUpdate]
   );
-  const handleSubmit = useCallback3(() => {
+  const handleSubmit = useCallback4(() => {
     setOpenCalendar(false);
     onSubmit == null ? void 0 : onSubmit();
   }, [onSubmit]);
-  const handleChange = useCallback3(
+  const handleChange = useCallback4(
     (date) => {
       onChange == null ? void 0 : onChange(date);
       if (date === null) {
@@ -2012,10 +2064,10 @@ var DateInput_default = DateInput;
 
 // src/components/DateRangeInput/DateRangeInput.tsx
 import { autoUpdate as autoUpdate2, flip as flip2, offset as offset2, useFloating as useFloating2 } from "@floating-ui/react";
-import { useRef as useRef9, useState as useState7 } from "react";
+import { useRef as useRef10, useState as useState7 } from "react";
 
 // src/components/BaseDateRangeInput/BaseDateRangeInput.tsx
-import { Fragment as Fragment5, useEffect as useEffect9, useRef as useRef8, useState as useState6 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect10, useRef as useRef9, useState as useState6 } from "react";
 import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var BaseDateRangeInput = (_a) => {
   var _b = _a, {
@@ -2059,13 +2111,13 @@ var BaseDateRangeInput = (_a) => {
     "hasFocus",
     "aria-invalid"
   ]);
-  const containerRef = useRef8(null);
-  const startMonthRef = useRef8(null);
-  const startDayRef = useRef8(null);
-  const startYearRef = useRef8(null);
-  const endMonthRef = useRef8(null);
-  const endDayRef = useRef8(null);
-  const endYearRef = useRef8(null);
+  const containerRef = useRef9(null);
+  const startMonthRef = useRef9(null);
+  const startDayRef = useRef9(null);
+  const startYearRef = useRef9(null);
+  const endMonthRef = useRef9(null);
+  const endDayRef = useRef9(null);
+  const endYearRef = useRef9(null);
   const [startMonth, setStartMonth] = useState6("");
   const [startDay, setStartDay] = useState6("");
   const [startYear, setStartYear] = useState6("");
@@ -2260,7 +2312,7 @@ var BaseDateRangeInput = (_a) => {
     onSubmit == null ? void 0 : onSubmit();
     clearFocus();
   };
-  useEffect9(() => {
+  useEffect10(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdatedTime;
     if (timeSinceLastUpdate > 500) {
@@ -2509,7 +2561,7 @@ var DateRangeInput = (_a) => {
     "onStateUpdate",
     "onSubmit"
   ]);
-  const calendarRef = useRef9(null);
+  const calendarRef = useRef10(null);
   const [openCalendar, setOpenCalendar] = useState7(false);
   const handleCloseCalendar = () => {
     setOpenCalendar(false);
@@ -2526,9 +2578,13 @@ var DateRangeInput = (_a) => {
     open: openCalendar,
     onOpenChange: setOpenCalendar
   });
-  useClickOutside_default(() => {
-    handleCloseCalendar();
-  }, [refs.reference]);
+  useClickOutside_default(
+    () => {
+      handleCloseCalendar();
+    },
+    [refs.reference],
+    openCalendar
+  );
   const handleStateUpdateInternal = (state) => {
     var _a2;
     if (!hideCalendar) {
@@ -2667,7 +2723,7 @@ import {
   shift,
   useFloating as useFloating3
 } from "@floating-ui/react";
-import { cloneElement, useRef as useRef10, useState as useState8 } from "react";
+import { cloneElement, useRef as useRef11, useState as useState8 } from "react";
 import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var Tooltip = ({
   children,
@@ -2682,8 +2738,8 @@ var Tooltip = ({
   sideOffset = 12
 }) => {
   const [isOpen2, setIsOpen] = useState8(false);
-  const arrowRef = useRef10(null);
-  const timeoutRef = useRef10(null);
+  const arrowRef = useRef11(null);
+  const timeoutRef = useRef11(null);
   const { refs, floatingStyles, context } = useFloating3({
     open: isOpen2,
     onOpenChange: setIsOpen,
@@ -3264,12 +3320,12 @@ RHFCurrencyInput.displayName = "RHFCurrencyInput";
 var RHFCurrencyInput_default = RHFCurrencyInput;
 
 // src/components/Textarea/Textarea.tsx
-import { forwardRef as forwardRef5, useCallback as useCallback5, useRef as useRef11 } from "react";
+import { forwardRef as forwardRef5, useCallback as useCallback6, useRef as useRef12 } from "react";
 
 // src/hooks/useAutoResize.ts
-import { useCallback as useCallback4, useLayoutEffect } from "react";
+import { useCallback as useCallback5, useLayoutEffect } from "react";
 var useAutoResize = (ref, { enabled, minRows, maxRows, value }) => {
-  const fit = useCallback4(() => {
+  const fit = useCallback5(() => {
     const el = ref.current;
     if (!el || !enabled) return;
     const style = getComputedStyle(el);
@@ -3315,14 +3371,14 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 var Textarea = forwardRef5(
   (_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 = useRef11(null);
+    const innerRef = useRef12(null);
     const fit = useAutoResize_default(innerRef, {
       enabled: autoResize,
       minRows: rows,
       maxRows,
       value
     });
-    const handleInput = useCallback5(
+    const handleInput = useCallback6(
       (event) => {
         fit();
         onInput == null ? void 0 : onInput(event);
@@ -3627,7 +3683,7 @@ var RHFDateInput_default = RHFDateInput;
 
 // src/components/TimeInput/TimeInput.tsx
 import { autoUpdate as autoUpdate3, flip as flip4, offset as offset4, shift as shift2, useFloating as useFloating4 } from "@floating-ui/react";
-import { Fragment as Fragment9, useEffect as useEffect10, useRef as useRef12, useState as useState9 } from "react";
+import { Fragment as Fragment9, useEffect as useEffect11, useRef as useRef13, useState as useState9 } from "react";
 
 // src/components/TimeInput/TimeInput.utils.ts
 var hasSeconds = (format) => format.includes("ss");
@@ -3753,13 +3809,13 @@ var TimeInput = ({
   const twelve = isTwelveHour(format);
   const withSeconds = hasSeconds(format);
   const segments = segmentsFor(format);
-  const fieldRef = useRef12(null);
-  const listRef = useRef12(null);
-  const columnsRef = useRef12(null);
-  const hourRef = useRef12(null);
-  const minuteRef = useRef12(null);
-  const secondRef = useRef12(null);
-  const meridiemRef = useRef12(null);
+  const fieldRef = useRef13(null);
+  const listRef = useRef13(null);
+  const columnsRef = useRef13(null);
+  const hourRef = useRef13(null);
+  const minuteRef = useRef13(null);
+  const secondRef = useRef13(null);
+  const meridiemRef = useRef13(null);
   const refs = {
     hour: hourRef,
     minute: minuteRef,
@@ -3782,8 +3838,8 @@ var TimeInput = ({
     setOpen(false);
     setDraft(null);
   };
-  useClickOutside_default(close, [listRef, fieldRef]);
-  useEffect10(() => {
+  useClickOutside_default(close, [listRef, fieldRef], open);
+  useEffect11(() => {
     var _a;
     if (!open) return;
     (_a = columnsRef.current) == null ? void 0 : _a.querySelectorAll('[data-state="selected"]').forEach((cell) => {
@@ -4050,7 +4106,7 @@ RHFTimeInput.displayName = "RHFTimeInput";
 var RHFTimeInput_default = RHFTimeInput;
 
 // src/components/Slider/SliderBase/SliderBase.tsx
-import { useRef as useRef13, useState as useState10 } from "react";
+import { useRef as useRef14, useState as useState10 } from "react";
 
 // src/components/Slider/Slider.utils.ts
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
@@ -4092,7 +4148,7 @@ var SliderBase = ({
   className,
   thumbLabels
 }) => {
-  const trackRef = useRef13(null);
+  const trackRef = useRef14(null);
   const [active, setActive] = useState10(null);
   const [focused, setFocused] = useState10(null);
   const boundsFor = (index) => [
@@ -4382,7 +4438,7 @@ var RHFSlider_default = RHFSlider;
 
 // src/components/TagInput/TagInput/TagInput.tsx
 import { autoUpdate as autoUpdate4, flip as flip5, offset as offset5, shift as shift3, useFloating as useFloating5 } from "@floating-ui/react";
-import { useRef as useRef14, useState as useState11 } from "react";
+import { useRef as useRef15, useState as useState11 } from "react";
 
 // src/utils/isTextIncludes.ts
 function isTextIncludes(baseString = "", searchString) {
@@ -4447,9 +4503,9 @@ var TagInput = ({
   children,
   "aria-invalid": invalid
 }) => {
-  const fieldRef = useRef14(null);
-  const menuRef = useRef14(null);
-  const inputRef = useRef14(null);
+  const fieldRef = useRef15(null);
+  const menuRef = useRef15(null);
+  const inputRef = useRef15(null);
   const [keyword, setKeyword] = useState11("");
   const [focused, setFocused] = useState11(null);
   const [open, setOpen] = useState11(false);
@@ -4461,7 +4517,7 @@ var TagInput = ({
     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) => {
@@ -4715,7 +4771,7 @@ RHFTagInput.displayName = "RHFTagInput";
 var RHFTagInput_default = RHFTagInput;
 
 // src/components/Rating/Rating.tsx
-import { useId as useId5, useRef as useRef15, useState as useState12 } from "react";
+import { useId as useId5, useRef as useRef16, useState as useState12 } from "react";
 
 // src/components/Rating/Rating.utils.ts
 var snap = (value, precision) => Number((Math.round(value / precision) * precision).toFixed(4));
@@ -4774,7 +4830,7 @@ var Rating = (_a) => {
     "aria-label"
   ]);
   const generated = useId5();
-  const iconsRef = useRef15([]);
+  const iconsRef = useRef16([]);
   const [hovered, setHovered] = useState12(null);
   const interactive = !readOnly && !disabled;
   const group = name != null ? name : `GeckoUIRating-${generated}`;
@@ -4920,10 +4976,10 @@ var RHFRating_default = RHFRating;
 
 // src/components/ColorInput/ColorInput.tsx
 import { autoUpdate as autoUpdate5, flip as flip6, offset as offset6, shift as shift4, useFloating as useFloating6 } from "@floating-ui/react";
-import { useRef as useRef20, useState as useState17 } from "react";
+import { useRef as useRef21, useState as useState17 } from "react";
 
 // src/components/ColorPicker/ColorPicker.tsx
-import { useEffect as useEffect12, useRef as useRef19, useState as useState16 } from "react";
+import { useEffect as useEffect13, useRef as useRef20, useState as useState16 } from "react";
 
 // src/components/ColorPicker/ColorPicker.utils.ts
 var clamp2 = (value, min, max) => Math.min(Math.max(value, min), max);
@@ -5038,7 +5094,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
-import { useRef as useRef16, useState as useState13 } from "react";
+import { useRef as useRef17, useState as useState13 } from "react";
 import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
 var ColorSlider = ({
   value,
@@ -5054,7 +5110,7 @@ var ColorSlider = ({
   valueText,
   children
 }) => {
-  const trackRef = useRef16(null);
+  const trackRef = useRef17(null);
   const [dragging, setDragging] = useState13(false);
   const moveTo = (event) => {
     var _a;
@@ -5140,15 +5196,15 @@ ColorSlider.displayName = "ColorSlider";
 var ColorSlider_default = ColorSlider;
 
 // src/components/ColorPicker/FormatSelect/FormatSelect.tsx
-import { useEffect as useEffect11, useRef as useRef17, useState as useState14 } from "react";
+import { useEffect as useEffect12, useRef as useRef18, useState as useState14 } from "react";
 import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 var FormatSelect = ({ value, options, labels, disabled, onChange }) => {
-  const rootRef = useRef17(null);
-  const listRef = useRef17(null);
+  const rootRef = useRef18(null);
+  const listRef = useRef18(null);
   const [open, setOpen] = useState14(false);
   const [active, setActive] = useState14(() => Math.max(options.indexOf(value), 0));
-  useClickOutside_default(() => setOpen(false), [rootRef]);
-  useEffect11(() => {
+  useClickOutside_default(() => setOpen(false), [rootRef], open);
+  useEffect12(() => {
     var _a;
     if (!open) return;
     setActive(Math.max(options.indexOf(value), 0));
@@ -5246,7 +5302,7 @@ FormatSelect.displayName = "FormatSelect";
 var FormatSelect_default = FormatSelect;
 
 // src/components/ColorPicker/SaturationArea/SaturationArea.tsx
-import { useRef as useRef18, useState as useState15 } from "react";
+import { useRef as useRef19, useState as useState15 } from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var SaturationArea = ({
   hsva,
@@ -5256,7 +5312,7 @@ var SaturationArea = ({
   label,
   children
 }) => {
-  const areaRef = useRef18(null);
+  const areaRef = useRef19(null);
   const [dragging, setDragging] = useState15(false);
   const moveTo = (event) => {
     var _a;
@@ -5386,12 +5442,12 @@ var ColorPicker = (_a) => {
   const [hasDropper, setHasDropper] = useState16(false);
   const preferred = (_a2 = formats[0]) != null ? _a2 : "hex";
   const [active, setActive] = useState16(preferred);
-  useEffect12(() => setActive(preferred), [preferred]);
-  const emitted = useRef19(null);
-  useEffect12(() => {
+  useEffect13(() => setActive(preferred), [preferred]);
+  const emitted = useRef20(null);
+  useEffect13(() => {
     setHasDropper(typeof window !== "undefined" && typeof window.EyeDropper === "function");
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     if (value === void 0 || value === emitted.current) return;
     const parsed = parseColor(value);
     if (parsed && !sameColor(parsed, internal)) setInternal(parsed);
@@ -5599,8 +5655,8 @@ var ColorInput = (_a) => {
     "wrapperClassName",
     "pickerClassName"
   ]);
-  const fieldRef = useRef20(null);
-  const panelRef = useRef20(null);
+  const fieldRef = useRef21(null);
+  const panelRef = useRef21(null);
   const [internal, setInternal] = useState17(defaultValue);
   const [open, setOpen] = useState17(false);
   const floating = useFloating6({
@@ -5617,7 +5673,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) => {
@@ -5825,7 +5881,7 @@ RHFDateRangeInput.displayName = "RHFDateRangeInput";
 var RHFDateRangeInput_default = RHFDateRangeInput;
 
 // src/components/FileInput/FileInput.tsx
-import { useRef as useRef21, useState as useState18 } from "react";
+import { useRef as useRef22, useState as useState18 } from "react";
 
 // src/components/FileInput/FileInput.utils.ts
 var countLabel = (count) => {
@@ -5872,7 +5928,7 @@ var FileInput = (props) => {
     "unique",
     "max"
   ]);
-  const fieldRef = useRef21(null);
+  const fieldRef = useRef22(null);
   const [dragging, setDragging] = useState18(false);
   const [loading, setLoading] = useState18(false);
   const held = multiple ? value != null ? value : [] : value ? [value] : [];
@@ -6036,7 +6092,7 @@ RHFFileInput.displayName = "RHFFileInput";
 var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
-import { forwardRef as forwardRef8, useRef as useRef22 } from "react";
+import { forwardRef as forwardRef8, useRef as useRef23 } from "react";
 import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
 var OTPInput = forwardRef8(
   (_a, ref) => {
@@ -6065,7 +6121,7 @@ var OTPInput = forwardRef8(
       "disabled",
       "aria-invalid"
     ]);
-    const divRef = useRef22(null);
+    const divRef = useRef23(null);
     const { dataAttributes } = splitDataAttributes(props);
     const focus = (index) => {
       var _a2, _b2;
@@ -6229,7 +6285,7 @@ var RHFOTPInput_default = RHFOTPInput;
 
 // src/components/Select/Select/Select.tsx
 import { autoUpdate as autoUpdate6, flip as flip7, offset as offset7, size, useFloating as useFloating7 } from "@floating-ui/react";
-import { Children as Children4, useMemo as useMemo4, useRef as useRef24, useState as useState19 } from "react";
+import { Children as Children4, useMemo as useMemo4, useRef as useRef25, useState as useState19 } from "react";
 
 // src/components/Select/Select.utils.ts
 var isSelect = hasDisplayName("Select");
@@ -6292,7 +6348,7 @@ function findSelectOptions(el) {
 }
 
 // src/components/Select/SelectButton/SelectButton.tsx
-import { Children as Children2, useId as useId6, useMemo as useMemo2, useRef as useRef23 } from "react";
+import { Children as Children2, useId as useId6, useMemo as useMemo2, useRef as useRef24 } from "react";
 
 // src/utils/createLabel.ts
 function isBlankLabel(value) {
@@ -6334,7 +6390,7 @@ function createLabel(item) {
 var createLabel_default = createLabel;
 
 // src/components/Select/hooks/useSelectTrigger.tsx
-import { useEffect as useEffect13, useMemo } from "react";
+import { useEffect as useEffect14, useMemo } from "react";
 
 // src/components/Select/useSelect.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -6361,14 +6417,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];
     }
@@ -6376,7 +6435,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();
@@ -6420,7 +6488,7 @@ var useSelectTrigger = () => {
     }
   };
   const matchesAnOption = options.some((opt) => isEqual_default(opt.value, value));
-  useEffect13(() => {
+  useEffect14(() => {
     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."
@@ -6486,7 +6554,7 @@ function SelectButton(_a) {
     clearable
   } = useSelect();
   const id = useId6();
-  const pointerDownRef = useRef23(false);
+  const pointerDownRef = useRef24(false);
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
   const trigger = useMemo2(() => Children2.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
@@ -6556,6 +6624,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 : (
@@ -6669,7 +6738,7 @@ SelectButton.displayName = "SelectButton";
 var SelectButton_default = SelectButton;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-import { Children as Children3, useMemo as useMemo3 } from "react";
+import { Children as Children3, useEffect as useEffect15, useMemo as useMemo3 } from "react";
 
 // src/components/Select/SelectDropdownSearch/SelectDropdownSearch.tsx
 import { jsx as jsx63 } from "react/jsx-runtime";
@@ -6775,6 +6844,8 @@ var SelectMenu = (_a) => {
     disabled,
     open,
     filterable,
+    autoFocusSearch,
+    searchFocusRequest,
     menuScrollContainerRef,
     floating: { refs, floatingStyles }
   } = useSelect();
@@ -6782,6 +6853,11 @@ var SelectMenu = (_a) => {
     () => Children3.toArray(children).filter((el) => !isSelectTrigger(el)),
     [children]
   );
+  useEffect15(() => {
+    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;
   }
@@ -6795,7 +6871,13 @@ var SelectMenu = (_a) => {
       "data-with-search": hasDropdownSearch || void 0
     }, rest), {
       children: [
-        hasDropdownSearch && /* @__PURE__ */ jsx65(SelectDropdownSearch_default, { className: "GeckoUISelectMenu__search-container", autoFocus: true }),
+        hasDropdownSearch && /* @__PURE__ */ jsx65(
+          SelectDropdownSearch_default,
+          {
+            className: "GeckoUISelectMenu__search-container",
+            autoFocus: autoFocusSearch
+          }
+        ),
         /* @__PURE__ */ jsxs31("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
           menuItems,
           /* @__PURE__ */ jsx65(Empty, { children: menuItems })
@@ -6817,8 +6899,8 @@ var SelectMenu_default = SelectMenu;
 // src/components/Select/Select/Select.tsx
 import { jsx as jsx66, jsxs as jsxs32 } from "react/jsx-runtime";
 var Select = (props) => {
-  const inputRef = useRef24(null);
-  const menuScrollContainerRef = useRef24(null);
+  const inputRef = useRef25(null);
+  const menuScrollContainerRef = useRef25(null);
   const _a = props, {
     disabled,
     inputRef: customInputRef,
@@ -6848,6 +6930,7 @@ var Select = (props) => {
   ]);
   const [open, setOpen] = useState19(false);
   const [keyword, setKeyword] = useState19("");
+  const [searchFocusRequest, setSearchFocusRequest] = useState19(0);
   const [focusedOption, setFocusedOption] = useState19(null);
   const floating = useFloating7({
     placement,
@@ -6920,9 +7003,13 @@ var Select = (props) => {
       onChange([...prevValue, optionValue]);
     }
   };
-  useClickOutside_default(() => {
-    closeMenu();
-  }, [refs.reference]);
+  useClickOutside_default(
+    () => {
+      closeMenu();
+    },
+    [refs.reference],
+    open
+  );
   return /* @__PURE__ */ jsx66(
     SelectContext.Provider,
     {
@@ -6931,6 +7018,8 @@ var Select = (props) => {
         setOpen,
         keyword,
         setKeyword,
+        searchFocusRequest,
+        requestSearchFocus: () => setSearchFocusRequest((n) => n + 1),
         floating,
         openMenu,
         closeMenu,
@@ -6970,7 +7059,7 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
-import { useEffect as useEffect14, useRef as useRef25 } from "react";
+import { useEffect as useEffect16, useRef as useRef26 } from "react";
 import { jsx as jsx67, jsxs as jsxs33 } from "react/jsx-runtime";
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
@@ -6993,7 +7082,7 @@ var SelectOption = (_a) => {
     "onRemove",
     "disabled"
   ]);
-  const ref = useRef25(null);
+  const ref = useRef26(null);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const {
     closeMenuOnSelect,
@@ -7011,7 +7100,7 @@ var SelectOption = (_a) => {
   } = useSelect();
   const selected = isSelected(value);
   const focused = !isNil_default(focusedOption) && isEqual_default(focusedOption == null ? void 0 : focusedOption.value, value);
-  useEffect14(() => {
+  useEffect16(() => {
     if (!ref.current || !menuScrollContainerRef.current) return;
     if ((focusedOption == null ? void 0 : focusedOption.focusType) !== "mouse" && focused) {
       const scrollContainer = menuScrollContainerRef.current;
@@ -7279,13 +7368,13 @@ Tabs.displayName = "Tabs";
 var Tabs_default = Tabs;
 
 // src/components/Tabs/TabList/TabList.tsx
-import { useEffect as useEffect15, useRef as useRef26 } from "react";
+import { useEffect as useEffect17, useRef as useRef27 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var TabList = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
   const { selectedValue, isNav, orientation } = useTabs();
-  const listRef = useRef26(null);
-  useEffect15(() => {
+  const listRef = useRef27(null);
+  useEffect17(() => {
     const list = listRef.current;
     if (!list) return;
     const tab = list.querySelector('[data-gecko-tab][data-state="selected"]');
@@ -7428,7 +7517,7 @@ TabPanel.displayName = "TabPanel";
 var TabPanel_default = TabPanel;
 
 // src/components/Accordion/Accordion/Accordion.tsx
-import { useRef as useRef27, useState as useState21 } from "react";
+import { useRef as useRef28, useState as useState21 } from "react";
 
 // src/components/Accordion/useAccordion.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
@@ -7479,7 +7568,7 @@ var Accordion = (_a) => {
     "className",
     "children"
   ]);
-  const rootRef = useRef27(null);
+  const rootRef = useRef28(null);
   const [internalValue, setInternalValue] = useState21(defaultValue);
   const isControlled = value !== void 0;
   const openValues = toArray(isControlled ? value : internalValue);
@@ -7930,13 +8019,13 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Progress/Progress.tsx
-import { forwardRef as forwardRef12, useEffect as useEffect16 } from "react";
+import { forwardRef as forwardRef12, useEffect as useEffect18 } from "react";
 import { jsx as jsx82, jsxs as jsxs38 } from "react/jsx-runtime";
 var Progress = forwardRef12(
   (_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;
-    useEffect16(() => {
+    useEffect18(() => {
       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);
@@ -7974,7 +8063,7 @@ var Progress_default = Progress;
 
 // src/components/Breadcrumb/Breadcrumb/Breadcrumb.tsx
 import { autoUpdate as autoUpdate7, flip as flip8, offset as offset8, shift as shift5, useFloating as useFloating8 } from "@floating-ui/react";
-import { Children as Children6, Fragment as Fragment13, isValidElement as isValidElement5, useRef as useRef28, useState as useState23 } from "react";
+import { Children as Children6, Fragment as Fragment13, isValidElement as isValidElement5, useRef as useRef29, useState as useState23 } from "react";
 
 // src/components/Breadcrumb/useBreadcrumb.tsx
 import { createContext as createContext6, useContext as useContext6 } from "react";
@@ -8010,8 +8099,8 @@ var Breadcrumb = (_a) => {
     "menuClassName",
     "aria-label"
   ]);
-  const triggerRef = useRef28(null);
-  const menuRef = useRef28(null);
+  const triggerRef = useRef29(null);
+  const menuRef = useRef29(null);
   const [open, setOpen] = useState23(false);
   const floating = useFloating8({
     placement: menuPlacement,
@@ -8020,7 +8109,7 @@ var Breadcrumb = (_a) => {
     open,
     onOpenChange: setOpen
   });
-  useClickOutside_default(() => setOpen(false), [menuRef, triggerRef]);
+  useClickOutside_default(() => setOpen(false), [menuRef, triggerRef], open);
   const crumbs = Children6.toArray(children);
   const claimed = crumbs.some(
     (crumb) => isValidElement5(crumb) && crumb.props.current
@@ -8406,7 +8495,7 @@ import {
   shift as shift6,
   useFloating as useFloating9
 } from "@floating-ui/react";
-import { useEffect as useEffect17, useRef as useRef29, useState as useState24 } from "react";
+import { useEffect as useEffect19, useRef as useRef30, useState as useState24 } from "react";
 
 // src/components/Popover/usePopover.tsx
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -8450,9 +8539,9 @@ var Popover = (_a) => {
     "className",
     "children"
   ]);
-  const arrowRef = useRef29(null);
-  const triggerRef = useRef29(null);
-  const rootRef = useRef29(null);
+  const arrowRef = useRef30(null);
+  const triggerRef = useRef30(null);
+  const rootRef = useRef30(null);
   const [internalOpen, setInternalOpen] = useState24(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const open = disabled ? false : isControlled ? controlledOpen : internalOpen;
@@ -8483,11 +8572,13 @@ var Popover = (_a) => {
     open,
     onOpenChange: setOpen
   });
-  useEffect17(() => {
+  const isTop = useLayer(open);
+  useEffect19(() => {
     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);
@@ -8517,6 +8608,7 @@ var Popover = (_a) => {
           className: classNames("GeckoUIPopover", className),
           onKeyDown: (e) => {
             if (!dismissOnEscape || !open || e.key !== "Escape") return;
+            if (!isTop()) return;
             e.stopPropagation();
             close();
           }
@@ -8567,13 +8659,13 @@ var PopoverTrigger_default = PopoverTrigger;
 
 // src/components/Popover/PopoverContent/PopoverContent.tsx
 import { FloatingArrow as FloatingArrow2 } from "@floating-ui/react";
-import { useEffect as useEffect18, useRef as useRef30 } from "react";
+import { useEffect as useEffect20, useRef as useRef31 } from "react";
 import { jsx as jsx90, jsxs as jsxs42 } from "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 = useRef30(null);
-  useEffect18(() => {
+  const contentRef = useRef31(null);
+  useEffect20(() => {
     var _a2, _b2;
     if (!open) return;
     const focusable = (_a2 = contentRef.current) == null ? void 0 : _a2.querySelector(
@@ -8614,7 +8706,7 @@ PopoverContent.displayName = "PopoverContent";
 var PopoverContent_default = PopoverContent;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-import { useCallback as useCallback7, useEffect as useEffect20, useState as useState26 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect22, useState as useState26 } from "react";
 
 // src/components/GeckoUIProvider/overlay-store.ts
 var OVERLAY_ANIMATION_DURATION = 300;
@@ -8746,7 +8838,7 @@ var overlayStore = {
 };
 
 // src/components/Dialog/DialogSurface.tsx
-import { useCallback as useCallback6, useEffect as useEffect19, useRef as useRef31, useState as useState25 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect21, useRef as useRef32, useState as useState25 } from "react";
 import { jsx as jsx91 } from "react/jsx-runtime";
 function DialogSurface({
   open,
@@ -8763,24 +8855,24 @@ function DialogSurface({
   const [animationState, setAnimationState] = useState25(
     open ? "entering" : "closed"
   );
-  const rootRef = useRef31(null);
-  const backdropRef = useRef31(null);
-  const pressedOutside = useRef31(false);
-  const onDismissRef = useRef31(onDismiss);
-  const onExitedRef = useRef31(onExited);
+  const rootRef = useRef32(null);
+  const backdropRef = useRef32(null);
+  const pressedOutside = useRef32(false);
+  const onDismissRef = useRef32(onDismiss);
+  const onExitedRef = useRef32(onExited);
   onDismissRef.current = onDismiss;
   onExitedRef.current = onExited;
-  const requestDismiss = useCallback6(() => {
+  const requestDismiss = useCallback7(() => {
     var _a;
     (_a = onDismissRef.current) == null ? void 0 : _a.call(onDismissRef);
   }, []);
-  useEffect19(() => {
+  useEffect21(() => {
     setAnimationState((current) => {
       if (open) return current === "open" ? current : "entering";
       return current === "closed" ? current : "closing";
     });
   }, [open]);
-  useEffect19(() => {
+  useEffect21(() => {
     if (animationState === "entering") {
       let innerFrame = 0;
       const outerFrame = requestAnimationFrame(() => {
@@ -8802,7 +8894,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 = useCallback7(() => {
+    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);
@@ -8810,7 +8906,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__ */ jsx91(
@@ -8895,7 +8991,7 @@ function ConfirmDialogContent({
   const [cancelLoading, setCancelLoading] = useState26(false);
   const [confirmLoading, setConfirmLoading] = useState26(false);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
-  const handleConfirm = useCallback7(() => __async(null, null, function* () {
+  const handleConfirm = useCallback8(() => __async(null, null, function* () {
     const isAsync = isAsyncFn(onConfirm);
     if (isAsync) {
       setConfirmLoading(true);
@@ -8912,7 +9008,7 @@ function ConfirmDialogContent({
     setCancelLoading(false);
     attachPreventDefault(dismiss);
   });
-  useEffect20(() => {
+  useEffect22(() => {
     if (!isTop) return;
     const onKeyDown = (e) => {
       const el = document.activeElement;
@@ -9076,7 +9172,7 @@ import { useState as useState28, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Toast/ToastItem.tsx
-import { useCallback as useCallback8, useEffect as useEffect21, useRef as useRef32, useState as useState27 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect23, useRef as useRef33, useState as useState27 } from "react";
 
 // src/components/Toast/Toast.utils.ts
 var swipeDirectionsFor = (position) => ({
@@ -9154,23 +9250,23 @@ function ToastItem({ toast: toast2, defaults, paused, position }) {
   const [offset10, setOffset] = useState27(0);
   const [axis, setAxis] = useState27(null);
   const [dragging, setDragging] = useState27(false);
-  const dragFrom = useRef32({ x: 0, y: 0 });
-  const dragStartedAt = useRef32(0);
-  const remaining = useRef32(duration);
-  const startedAt = useRef32(0);
-  const closedBy = useRef32(null);
-  const close = useCallback8((reason) => {
+  const dragFrom = useRef33({ x: 0, y: 0 });
+  const dragStartedAt = useRef33(0);
+  const remaining = useRef33(duration);
+  const startedAt = useRef33(0);
+  const closedBy = useRef33(null);
+  const close = useCallback9((reason) => {
     if (closedBy.current) return;
     closedBy.current = reason;
     setState("closing");
   }, []);
-  useEffect21(() => toastStore.registerDismiss(toast2.id, () => close("manual")), [toast2.id, close]);
-  useEffect21(() => {
+  useEffect23(() => toastStore.registerDismiss(toast2.id, () => close("manual")), [toast2.id, close]);
+  useEffect23(() => {
     const raf = requestAnimationFrame(() => setState("open"));
     return () => cancelAnimationFrame(raf);
   }, []);
-  const generationRef = useRef32(toast2.generation);
-  useEffect21(() => {
+  const generationRef = useRef33(toast2.generation);
+  useEffect23(() => {
     if (generationRef.current !== toast2.generation) {
       generationRef.current = toast2.generation;
       remaining.current = duration;
@@ -9388,11 +9484,11 @@ function Toaster(_a) {
 }
 
 // src/components/GeckoUIProvider/GeckoUIProvider.tsx
-import { useCallback as useCallback10, useEffect as useEffect23, useRef as useRef34, useState as useState30, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect25, useRef as useRef35, useState as useState30, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/Drawer/Drawer.tsx
-import { useCallback as useCallback9, useEffect as useEffect22, useRef as useRef33, useState as useState29, version } from "react";
+import { useCallback as useCallback10, useEffect as useEffect24, useRef as useRef34, useState as useState29, version } from "react";
 import { jsx as jsx97, jsxs as jsxs46 } from "react/jsx-runtime";
 function Drawer({
   open = false,
@@ -9407,9 +9503,9 @@ function Drawer({
   keepMounted = false,
   style
 }) {
-  const drawerRef = useRef33(null);
+  const drawerRef = useRef34(null);
   const [readyFor, setReadyFor] = useState29(null);
-  useEffect22(() => {
+  useEffect24(() => {
     const frame = requestAnimationFrame(() => setReadyFor(placement));
     return () => cancelAnimationFrame(frame);
   }, [placement]);
@@ -9421,24 +9517,28 @@ function Drawer({
     setPrevOpen(open);
     setClosing(!open);
   }
-  useEffect22(() => {
+  useEffect24(() => {
     if (!closing) return;
     const timer = setTimeout(() => setClosing(false), OVERLAY_ANIMATION_DURATION);
     return () => clearTimeout(timer);
   }, [closing]);
-  const onCloseRef = useRef33(onClose);
+  const onCloseRef = useRef34(onClose);
   onCloseRef.current = onClose;
-  const handleDismiss = useCallback9(() => {
+  const isTop = useLayer(open);
+  const handleDismiss = useCallback10(() => {
     var _a;
     (_a = onCloseRef.current) == null ? void 0 : _a.call(onCloseRef);
   }, []);
-  const dismissOnClickOutside = useCallback9(() => {
+  const dismissIfTop = useCallback10(() => {
+    if (isTop()) handleDismiss();
+  }, [isTop, handleDismiss]);
+  const dismissOnClickOutside = useCallback10(() => {
     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__ */ jsxs46("div", { className: "GeckoUIDrawer", style, children: [
     /* @__PURE__ */ jsx97(
       "div",
@@ -9446,7 +9546,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"
       }
     ),
@@ -9491,11 +9591,11 @@ var getNotMounted = () => false;
 var useIsMounted = () => useSyncExternalStore2(emptySubscribe, getMounted, getNotMounted);
 function useOverlayEntry(id) {
   const [open, setOpen] = useState30(true);
-  const close = useCallback10(() => {
+  const close = useCallback11(() => {
     setOpen(false);
     overlayStore.markClosing(id);
   }, [id]);
-  const handleExited = useCallback10(() => {
+  const handleExited = useCallback11(() => {
     overlayStore.remove(id);
   }, [id]);
   return { open, close, handleExited };
@@ -9513,7 +9613,7 @@ function DialogEntryRenderer({ id, options, isTop, zIndex }) {
     "dismissOnOutsideClick"
   ]);
   const { open, close, handleExited } = useOverlayEntry(id);
-  useEffect23(() => overlayStore.registerDismiss(id, close), [id, close]);
+  useEffect25(() => overlayStore.registerDismiss(id, close), [id, close]);
   return /* @__PURE__ */ jsx98(
     DialogSurface,
     {
@@ -9538,15 +9638,15 @@ function DrawerEntryRenderer({
   zIndex
 }) {
   const { open, close, handleExited } = useOverlayEntry(id);
-  const onCloseRef = useRef34(options.onClose);
+  const onCloseRef = useRef35(options.onClose);
   onCloseRef.current = options.onClose;
-  const handleClose = useCallback10(() => {
+  const handleClose = useCallback11(() => {
     var _a;
     (_a = onCloseRef.current) == null ? void 0 : _a.call(onCloseRef);
     close();
   }, [close]);
-  useEffect23(() => overlayStore.registerDismiss(id, handleClose), [id, handleClose]);
-  useEffect23(() => {
+  useEffect25(() => overlayStore.registerDismiss(id, handleClose), [id, handleClose]);
+  useEffect25(() => {
     if (open) return;
     const timer = setTimeout(handleExited, OVERLAY_ANIMATION_DURATION);
     return () => clearTimeout(timer);
@@ -9576,7 +9676,7 @@ function OverlayEntryRenderer({
 function GeckoUIProvider({ children, toastOptions = {} }) {
   const mounted2 = useIsMounted();
   const [hostId] = useState30(() => overlayStore.createHostId());
-  useEffect23(() => overlayStore.registerHost(hostId), [hostId]);
+  useEffect25(() => overlayStore.registerHost(hostId), [hostId]);
   const activeHost2 = useSyncExternalStore2(
     overlayStore.subscribe,
     overlayStore.getActiveHost,
@@ -9611,7 +9711,7 @@ function GeckoUIProvider({ children, toastOptions = {} }) {
 
 // src/components/Menu/Menu/Menu.tsx
 import { autoUpdate as autoUpdate9, flip as flip10, offset as offset9, useFloating as useFloating10 } from "@floating-ui/react";
-import { Children as Children8, useCallback as useCallback11, useRef as useRef36, useState as useState31 } from "react";
+import { Children as Children8, useCallback as useCallback12, useRef as useRef37, useState as useState31 } from "react";
 
 // src/components/Menu/Menu.utils.ts
 import { isValidElement as isValidElement7 } from "react";
@@ -9672,7 +9772,7 @@ MenuButton.displayName = "MenuButton";
 var MenuButton_default = MenuButton;
 
 // src/components/Menu/MenuPanel/MenuPanel.tsx
-import { useEffect as useEffect24, useRef as useRef35 } from "react";
+import { useEffect as useEffect26, useRef as useRef36 } from "react";
 import { jsx as jsx100 } from "react/jsx-runtime";
 var MenuPanel = ({ children, className }) => {
   const {
@@ -9682,8 +9782,8 @@ var MenuPanel = ({ children, className }) => {
     menuRef,
     floating: { refs, floatingStyles }
   } = useMenu();
-  const panelRef = useRef35(null);
-  useEffect24(() => {
+  const panelRef = useRef36(null);
+  useEffect26(() => {
     if (!open || !panelRef.current) return;
     panelRef.current.focus();
   }, [open]);
@@ -9747,7 +9847,7 @@ var Menu = ({
   buttonClassName,
   children
 }) => {
-  const menuRef = useRef36(null);
+  const menuRef = useRef37(null);
   const [open, setOpen] = useState31(false);
   const floating = useFloating10({
     placement,
@@ -9758,23 +9858,27 @@ var Menu = ({
     onOpenChange: setOpen
   });
   const { refs } = floating;
-  const openMenu = useCallback11(() => {
+  const openMenu = useCallback12(() => {
     if (disabled || open) return;
     setOpen(true);
   }, [disabled, open]);
-  const closeMenu = useCallback11(() => {
+  const closeMenu = useCallback12(() => {
     setOpen(false);
   }, []);
-  const toggleMenu = useCallback11(() => {
+  const toggleMenu = useCallback12(() => {
     if (open) {
       closeMenu();
     } else {
       openMenu();
     }
   }, [open, openMenu, closeMenu]);
-  useClickOutside_default(() => {
-    closeMenu();
-  }, [refs.reference]);
+  useClickOutside_default(
+    () => {
+      closeMenu();
+    },
+    [refs.reference],
+    open
+  );
   const childArray = Children8.toArray(children);
   const trigger = childArray.find(isMenuTrigger);
   const menuItems = childArray.filter((el) => !isMenuTrigger(el));