@ecohouse/ui 0.1.61 → 0.1.63

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, useId, useImperativeHandle, isValidElement, cloneElement } from 'react';
+import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, useId, useImperativeHandle, useSyncExternalStore, isValidElement, cloneElement } from 'react';
 import { View, Text, Platform, Pressable, StyleSheet, Image, useWindowDimensions, Animated, Easing, TouchableOpacity, ActivityIndicator, Modal as Modal$1, TextInput, ScrollView, PanResponder } from 'react-native';
 import Svg31, { Path, Rect } from 'react-native-svg';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -18765,29 +18765,29 @@ var require_react_dom_development = __commonJS({
           }
           return [newState, dispatch];
         }
-        function mountMutableSource(source, getSnapshot, subscribe) {
+        function mountMutableSource(source, getSnapshot, subscribe2) {
           {
             return void 0;
           }
         }
-        function updateMutableSource(source, getSnapshot, subscribe) {
+        function updateMutableSource(source, getSnapshot, subscribe2) {
           {
             return void 0;
           }
         }
-        function mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+        function mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2) {
           var fiber = currentlyRenderingFiber$1;
           var hook = mountWorkInProgressHook();
           var nextSnapshot;
           var isHydrating2 = getIsHydrating();
           if (isHydrating2) {
-            if (getServerSnapshot === void 0) {
+            if (getServerSnapshot2 === void 0) {
               throw new Error("Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.");
             }
-            nextSnapshot = getServerSnapshot();
+            nextSnapshot = getServerSnapshot2();
             {
               if (!didWarnUncachedGetSnapshot) {
-                if (nextSnapshot !== getServerSnapshot()) {
+                if (nextSnapshot !== getServerSnapshot2()) {
                   error("The result of getServerSnapshot should be cached to avoid an infinite loop");
                   didWarnUncachedGetSnapshot = true;
                 }
@@ -18818,12 +18818,12 @@ var require_react_dom_development = __commonJS({
             getSnapshot
           };
           hook.queue = inst;
-          mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
+          mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe2), [subscribe2]);
           fiber.flags |= Passive;
           pushEffect(HasEffect | Passive$1, updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), void 0, null);
           return nextSnapshot;
         }
-        function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+        function updateSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2) {
           var fiber = currentlyRenderingFiber$1;
           var hook = updateWorkInProgressHook();
           var nextSnapshot = getSnapshot();
@@ -18843,7 +18843,7 @@ var require_react_dom_development = __commonJS({
             markWorkInProgressReceivedUpdate();
           }
           var inst = hook.queue;
-          updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
+          updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe2), [subscribe2]);
           if (inst.getSnapshot !== getSnapshot || snapshotChanged || // Check if the susbcribe function changed. We can save some memory by
           // checking whether we scheduled a subscription effect above.
           workInProgressHook !== null && workInProgressHook.memoizedState.tag & HasEffect) {
@@ -18886,13 +18886,13 @@ var require_react_dom_development = __commonJS({
             forceStoreRerender(fiber);
           }
         }
-        function subscribeToStore(fiber, inst, subscribe) {
+        function subscribeToStore(fiber, inst, subscribe2) {
           var handleStoreChange = function() {
             if (checkIfSnapshotChanged(inst)) {
               forceStoreRerender(fiber);
             }
           };
-          return subscribe(handleStoreChange);
+          return subscribe2(handleStoreChange);
         }
         function checkIfSnapshotChanged(inst) {
           var latestGetSnapshot = inst.getSnapshot;
@@ -19473,15 +19473,15 @@ var require_react_dom_development = __commonJS({
               mountHookTypesDev();
               return mountTransition();
             },
-            useMutableSource: function(source, getSnapshot, subscribe) {
+            useMutableSource: function(source, getSnapshot, subscribe2) {
               currentHookNameInDev = "useMutableSource";
               mountHookTypesDev();
               return mountMutableSource();
             },
-            useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+            useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
               currentHookNameInDev = "useSyncExternalStore";
               mountHookTypesDev();
-              return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+              return mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
             },
             useId: function() {
               currentHookNameInDev = "useId";
@@ -19577,15 +19577,15 @@ var require_react_dom_development = __commonJS({
               updateHookTypesDev();
               return mountTransition();
             },
-            useMutableSource: function(source, getSnapshot, subscribe) {
+            useMutableSource: function(source, getSnapshot, subscribe2) {
               currentHookNameInDev = "useMutableSource";
               updateHookTypesDev();
               return mountMutableSource();
             },
-            useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+            useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
               currentHookNameInDev = "useSyncExternalStore";
               updateHookTypesDev();
-              return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+              return mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
             },
             useId: function() {
               currentHookNameInDev = "useId";
@@ -19681,15 +19681,15 @@ var require_react_dom_development = __commonJS({
               updateHookTypesDev();
               return updateTransition();
             },
-            useMutableSource: function(source, getSnapshot, subscribe) {
+            useMutableSource: function(source, getSnapshot, subscribe2) {
               currentHookNameInDev = "useMutableSource";
               updateHookTypesDev();
               return updateMutableSource();
             },
-            useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+            useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
               currentHookNameInDev = "useSyncExternalStore";
               updateHookTypesDev();
-              return updateSyncExternalStore(subscribe, getSnapshot);
+              return updateSyncExternalStore(subscribe2, getSnapshot);
             },
             useId: function() {
               currentHookNameInDev = "useId";
@@ -19785,15 +19785,15 @@ var require_react_dom_development = __commonJS({
               updateHookTypesDev();
               return rerenderTransition();
             },
-            useMutableSource: function(source, getSnapshot, subscribe) {
+            useMutableSource: function(source, getSnapshot, subscribe2) {
               currentHookNameInDev = "useMutableSource";
               updateHookTypesDev();
               return updateMutableSource();
             },
-            useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+            useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
               currentHookNameInDev = "useSyncExternalStore";
               updateHookTypesDev();
-              return updateSyncExternalStore(subscribe, getSnapshot);
+              return updateSyncExternalStore(subscribe2, getSnapshot);
             },
             useId: function() {
               currentHookNameInDev = "useId";
@@ -19903,17 +19903,17 @@ var require_react_dom_development = __commonJS({
               mountHookTypesDev();
               return mountTransition();
             },
-            useMutableSource: function(source, getSnapshot, subscribe) {
+            useMutableSource: function(source, getSnapshot, subscribe2) {
               currentHookNameInDev = "useMutableSource";
               warnInvalidHookAccess();
               mountHookTypesDev();
               return mountMutableSource();
             },
-            useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+            useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
               currentHookNameInDev = "useSyncExternalStore";
               warnInvalidHookAccess();
               mountHookTypesDev();
-              return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+              return mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
             },
             useId: function() {
               currentHookNameInDev = "useId";
@@ -20024,17 +20024,17 @@ var require_react_dom_development = __commonJS({
               updateHookTypesDev();
               return updateTransition();
             },
-            useMutableSource: function(source, getSnapshot, subscribe) {
+            useMutableSource: function(source, getSnapshot, subscribe2) {
               currentHookNameInDev = "useMutableSource";
               warnInvalidHookAccess();
               updateHookTypesDev();
               return updateMutableSource();
             },
-            useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+            useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
               currentHookNameInDev = "useSyncExternalStore";
               warnInvalidHookAccess();
               updateHookTypesDev();
-              return updateSyncExternalStore(subscribe, getSnapshot);
+              return updateSyncExternalStore(subscribe2, getSnapshot);
             },
             useId: function() {
               currentHookNameInDev = "useId";
@@ -20145,17 +20145,17 @@ var require_react_dom_development = __commonJS({
               updateHookTypesDev();
               return rerenderTransition();
             },
-            useMutableSource: function(source, getSnapshot, subscribe) {
+            useMutableSource: function(source, getSnapshot, subscribe2) {
               currentHookNameInDev = "useMutableSource";
               warnInvalidHookAccess();
               updateHookTypesDev();
               return updateMutableSource();
             },
-            useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+            useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
               currentHookNameInDev = "useSyncExternalStore";
               warnInvalidHookAccess();
               updateHookTypesDev();
-              return updateSyncExternalStore(subscribe, getSnapshot);
+              return updateSyncExternalStore(subscribe2, getSnapshot);
             },
             useId: function() {
               currentHookNameInDev = "useId";
@@ -33156,14 +33156,23 @@ var styles18 = StyleSheet.create({
     includeFontPadding: false
   }
 });
+
+// src/components/Counter/Counter.utils.ts
+function clampCounterValue(value, min, max) {
+  return Math.max(min, max === void 0 ? value : Math.min(value, max));
+}
+function resolveCounterValue(controlledValue, uncontrolledValue, min, max) {
+  if (controlledValue !== void 0 && Number.isFinite(controlledValue)) return controlledValue;
+  return clampCounterValue(controlledValue === void 0 ? uncontrolledValue : min, min, max);
+}
+function stepCounterValue(current, delta, min, max) {
+  return clampCounterValue(current + delta, min, max);
+}
 var BUTTON_SIZE = 32;
 var webBlurStyle7 = Platform.OS === "web" ? {
   backdropFilter: "blur(20px)",
   WebkitBackdropFilter: "blur(20px)"
 } : {};
-function clamp(value, min, max) {
-  return Math.max(min, max === void 0 ? value : Math.min(value, max));
-}
 var Counter = forwardRef(function Counter2({
   value,
   defaultValue,
@@ -33181,16 +33190,16 @@ var Counter = forwardRef(function Counter2({
   const containerRef = useRef(null);
   const isControlled = value !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = useState(
-    () => clamp(defaultValue ?? min, min, max)
+    () => clampCounterValue(defaultValue ?? min, min, max)
   );
-  const resolvedValue = clamp(isControlled ? value : uncontrolledValue, min, max);
+  const resolvedValue = resolveCounterValue(value, uncontrolledValue, min, max);
   const resolvedClassName = className?.trim() || void 0;
   const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
   const decrementDisabled = disabled || resolvedValue <= min;
   const incrementDisabled = disabled || max !== void 0 && resolvedValue >= max;
   useApplyWebClassName(containerRef, resolvedClassName);
-  const updateValue = (nextValue) => {
-    const next = clamp(nextValue, min, max);
+  const updateValue = (delta) => {
+    const next = stepCounterValue(resolvedValue, delta, min, max);
     if (next === resolvedValue) return;
     if (!isControlled) setUncontrolledValue(next);
     onValueChange?.(next);
@@ -33200,7 +33209,7 @@ var Counter = forwardRef(function Counter2({
     {
       disabled: decrementDisabled,
       hitSlop,
-      onPress: () => updateValue(resolvedValue - step),
+      onPress: () => updateValue(-step),
       accessibilityRole: "button",
       accessibilityLabel: "Decrease value",
       accessibilityState: { disabled: decrementDisabled },
@@ -33213,7 +33222,7 @@ var Counter = forwardRef(function Counter2({
     {
       disabled: incrementDisabled,
       hitSlop,
-      onPress: () => updateValue(resolvedValue + step),
+      onPress: () => updateValue(step),
       accessibilityRole: "button",
       accessibilityLabel: "Increase value",
       accessibilityState: { disabled: incrementDisabled },
@@ -34496,6 +34505,15 @@ var styles25 = StyleSheet.create({
     top: 0
   }
 });
+
+// src/utils/webToggleKey.ts
+function handleWebToggleKeyDown(event, onToggle) {
+  const isSpace = event.key === " " || event.key === "Spacebar";
+  if (!isSpace || event.target !== event.currentTarget) return false;
+  event.preventDefault();
+  if (!event.repeat) onToggle();
+  return true;
+}
 var BOX_SIZE = 20;
 var BOX_RADIUS = 6;
 var CHECK_SIZE = 12;
@@ -34551,6 +34569,8 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
+      "aria-checked": isActive,
+      ...Platform.OS === "web" && !disabled ? { onKeyDown: (event) => handleWebToggleKeyDown(event, handlePress) } : null,
       style: [styles26.root, disabled && styles26.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
@@ -34644,8 +34664,23 @@ function abbreviateMonthName(monthName, letterCount = 3) {
   }
   return chars.slice(0, end).join("");
 }
+function abbreviateMonthNames(monthNames, letterCount = 3) {
+  return monthNames.map((name, index) => {
+    const maxLetters = abbreviatedLetterCount(name);
+    let count = letterCount;
+    while (count < maxLetters && monthNames.some(
+      (other, otherIndex) => otherIndex !== index && abbreviateMonthName(other, count) === abbreviateMonthName(name, count)
+    )) {
+      count += 1;
+    }
+    return abbreviateMonthName(name, count);
+  });
+}
+function abbreviatedLetterCount(monthName) {
+  return Array.from(monthName.replace(/ու/g, "u")).length;
+}
 function formatDateDayShortMonth(date, monthNames, letterCount = 3) {
-  const month = abbreviateMonthName(monthNames[date.getMonth()] ?? "", letterCount);
+  const month = abbreviateMonthNames(monthNames, letterCount)[date.getMonth()] ?? "";
   return `${date.getDate()} ${month} ${date.getFullYear()}`;
 }
 function getMonthMatrix(monthDate, weekStartsOn = 1) {
@@ -34669,6 +34704,78 @@ function getMonthMatrix(monthDate, weekStartsOn = 1) {
   }
   return weeks;
 }
+
+// src/utils/overlayStack.ts
+function createOverlayStack(target) {
+  const layers = [];
+  const top = (kind) => {
+    for (let index = layers.length - 1; index >= 0; index -= 1) {
+      if (layers[index].kind === kind) return layers[index];
+    }
+    return void 0;
+  };
+  const handleCapture = (event) => {
+    const layer = top("popover");
+    if (event.key !== "Escape" || event.defaultPrevented || !layer) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    layer.onEscape();
+  };
+  const handleBubble = (event) => {
+    const layer = top("overlay");
+    if (event.key !== "Escape" || event.defaultPrevented || !layer) return;
+    event.preventDefault();
+    layer.onEscape();
+  };
+  return {
+    push(layer) {
+      layers.push(layer);
+      if (layers.length === 1) {
+        target.addEventListener("keydown", handleCapture, true);
+        target.addEventListener("keydown", handleBubble, false);
+      }
+      return () => {
+        const index = layers.indexOf(layer);
+        if (index === -1) return;
+        layers.splice(index, 1);
+        if (layers.length === 0) {
+          target.removeEventListener("keydown", handleCapture, true);
+          target.removeEventListener("keydown", handleBubble, false);
+        }
+      };
+    },
+    isTop: (layer) => top(layer.kind) === layer
+  };
+}
+var documentStack = null;
+function getDocumentOverlayStack() {
+  if (!documentStack) {
+    documentStack = createOverlayStack(document);
+  }
+  return documentStack;
+}
+
+// src/utils/useOverlayLayer.ts
+function useOverlayLayer(kind, active, onEscape) {
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  const layerRef = useRef(null);
+  useEffect(() => {
+    if (!active || Platform.OS !== "web" || typeof document === "undefined") return void 0;
+    const layer = { kind, onEscape: () => onEscapeRef.current() };
+    const stack = getDocumentOverlayStack();
+    const remove = stack.push(layer);
+    layerRef.current = layer;
+    return () => {
+      remove();
+      if (layerRef.current === layer) layerRef.current = null;
+    };
+  }, [active, kind]);
+  return useCallback(() => {
+    const layer = layerRef.current;
+    return layer !== null && getDocumentOverlayStack().isTop(layer);
+  }, []);
+}
 var DEFAULT_MONTH_NAMES = [
   "\u0540\u0578\u0582\u0576\u057E\u0561\u0580",
   "\u0553\u0565\u057F\u0580\u057E\u0561\u0580",
@@ -34863,17 +34970,7 @@ var DatePicker = forwardRef(
       setOpen(false);
       focusTrigger();
     }, [focusTrigger, setOpen]);
-    useEffect(() => {
-      if (Platform.OS !== "web" || !isOpen) return;
-      const handleKeyDown = (event) => {
-        if (event.key === "Escape") {
-          event.preventDefault();
-          closeAndFocusTrigger();
-        }
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isOpen, closeAndFocusTrigger]);
+    useOverlayLayer("popover", isOpen, closeAndFocusTrigger);
     const handleTriggerPress = () => {
       if (disabled) return;
       setOpen(!isOpen);
@@ -34963,6 +35060,7 @@ var DatePicker = forwardRef(
                   accessibilityRole: "button",
                   accessibilityLabel: resolvedAccessibilityLabel,
                   accessibilityState: { disabled, expanded: isOpen },
+                  "aria-expanded": isOpen,
                   style: [
                     styles27.trigger,
                     usesRangeTrigger && styles27.rangeTrigger,
@@ -35521,6 +35619,78 @@ var styles28 = StyleSheet.create({
 
 // src/components/Modal/Modal.tsx
 var import_react_dom = __toESM(require_react_dom());
+var subscribe = () => () => {
+};
+var getClientSnapshot = () => true;
+var getServerSnapshot = () => false;
+function useHydrated() {
+  return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
+}
+
+// src/utils/focusTrap.ts
+var TABBABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input:not([type='hidden'])",
+  "select",
+  "textarea",
+  "iframe",
+  "[contenteditable='true']",
+  "[tabindex]"
+].join(",");
+function getTabbableElements(container) {
+  return Array.from(container.querySelectorAll(TABBABLE_SELECTOR)).filter(
+    (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true" && element.getClientRects().length > 0
+  );
+}
+function getWrappedFocusIndex(count, currentIndex, backwards) {
+  if (count === 0) return null;
+  if (currentIndex === -1) return backwards ? count - 1 : 0;
+  if (backwards && currentIndex === 0) return count - 1;
+  if (!backwards && currentIndex === count - 1) return 0;
+  return null;
+}
+
+// src/utils/useWebFocusTrap.ts
+function useWebFocusTrap(containerRef, active, isTopLayer) {
+  useEffect(() => {
+    if (!active || Platform.OS !== "web" || typeof document === "undefined") return void 0;
+    const container = containerRef.current;
+    if (!container) return void 0;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (!container.contains(document.activeElement)) container.focus({ preventScroll: true });
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab" || event.defaultPrevented || !isTopLayer()) return;
+      const activeElement = document.activeElement;
+      if (activeElement !== null && activeElement !== document.body && !container.contains(activeElement)) {
+        return;
+      }
+      const tabbables = getTabbableElements(container);
+      if (tabbables.length === 0) {
+        event.preventDefault();
+        container.focus({ preventScroll: true });
+        return;
+      }
+      const nextIndex = getWrappedFocusIndex(
+        tabbables.length,
+        tabbables.indexOf(activeElement),
+        event.shiftKey
+      );
+      if (nextIndex === null) return;
+      event.preventDefault();
+      tabbables[nextIndex].focus();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      const current = document.activeElement;
+      if (previouslyFocused?.isConnected && (current === null || current === document.body || container.contains(current))) {
+        previouslyFocused.focus({ preventScroll: true });
+      }
+    };
+  }, [active, containerRef, isTopLayer]);
+}
 var BACKDROP_COLOR = "#09090933";
 var WEB_Z_INDEX = 500;
 var webBackdropDomStyle = {
@@ -35548,6 +35718,13 @@ var webRootDomStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
+var webDialogDomStyle = {
+  position: "relative",
+  zIndex: 1,
+  maxWidth: "100%",
+  maxHeight: "100%",
+  outline: "none"
+};
 var Modal = forwardRef(function Modal2({
   open,
   onClose,
@@ -35558,22 +35735,22 @@ var Modal = forwardRef(function Modal2({
   className
 }, forwardedRef) {
   const contentRef = useRef(null);
+  const dialogRef = useRef(null);
   const setContentRef = useMemo(() => mergeRefs(contentRef, forwardedRef), [forwardedRef]);
   const resolvedClassName = className?.trim() || void 0;
-  useApplyWebClassName(contentRef, resolvedClassName, open && Platform.OS === "web");
+  const hydrated = useHydrated();
+  const webOpen = open && hydrated && Platform.OS === "web";
+  useApplyWebClassName(contentRef, resolvedClassName, webOpen);
   useEffect(() => {
-    if (!open || Platform.OS !== "web") return void 0;
+    if (!webOpen) return void 0;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
     return () => {
       document.body.style.overflow = previousOverflow;
-      document.removeEventListener("keydown", onKeyDown);
     };
-  }, [open, onClose]);
+  }, [webOpen]);
+  const isTopLayer = useOverlayLayer("overlay", webOpen, onClose);
+  useWebFocusTrap(dialogRef, webOpen, isTopLayer);
   const content = /* @__PURE__ */ jsx(
     View,
     {
@@ -35584,7 +35761,7 @@ var Modal = forwardRef(function Modal2({
     }
   );
   if (Platform.OS === "web") {
-    if (!open || typeof document === "undefined") return null;
+    if (!webOpen) return null;
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ jsxs("div", { style: webRootDomStyle, role: "presentation", children: [
         /* @__PURE__ */ jsx(
@@ -35597,7 +35774,16 @@ var Modal = forwardRef(function Modal2({
             style: webBackdropDomStyle
           }
         ),
-        /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1, maxWidth: "100%", maxHeight: "100%" }, children: content })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            tabIndex: -1,
+            style: webDialogDomStyle,
+            children: content
+          }
+        )
       ] }),
       document.body
     );
@@ -35672,20 +35858,18 @@ var Drawer = forwardRef(function Drawer2({
   const [entered, setEntered] = useState(false);
   const animatedWidth = useRef(new Animated.Value(open ? width : 0)).current;
   const animatedBackdrop = useRef(new Animated.Value(open ? 1 : 0)).current;
-  useApplyWebClassName(panelRef, resolvedClassName, mounted && Platform.OS === "web");
+  const hydrated = useHydrated();
+  const webMounted = mounted && hydrated && Platform.OS === "web";
+  useApplyWebClassName(panelRef, resolvedClassName, webMounted);
   useEffect(() => {
-    if (!mounted || Platform.OS !== "web") return void 0;
+    if (!webMounted) return void 0;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
     return () => {
       document.body.style.overflow = previousOverflow;
-      document.removeEventListener("keydown", onKeyDown);
     };
-  }, [mounted, onClose]);
+  }, [webMounted]);
+  useOverlayLayer("overlay", webMounted && open, onClose);
   const targetWidth = Math.min(width, typeof window !== "undefined" ? window.innerWidth : width);
   const playWidth = useCallback(
     (target) => {
@@ -35726,7 +35910,7 @@ var Drawer = forwardRef(function Drawer2({
     };
   }, [open, animationDuration, playWidth]);
   useEffect(() => {
-    if (Platform.OS !== "web" || !mounted || !open) return void 0;
+    if (!webMounted || !open) return void 0;
     const shell = shellRef.current;
     if (shell) {
       shell.style.transition = "none";
@@ -35739,7 +35923,7 @@ var Drawer = forwardRef(function Drawer2({
       });
     });
     return () => cancelAnimationFrame(frame);
-  }, [mounted, open, targetWidth, playWidth]);
+  }, [webMounted, open, targetWidth, playWidth]);
   useEffect(() => {
     if (Platform.OS === "web") return void 0;
     if (open) {
@@ -35820,7 +36004,7 @@ var Drawer = forwardRef(function Drawer2({
     }
   );
   if (Platform.OS === "web") {
-    if (!mounted || typeof document === "undefined") return null;
+    if (!webMounted) return null;
     return (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ jsxs(
         "div",
@@ -36520,21 +36704,44 @@ var styles32 = StyleSheet.create({
 function normalizeVerificationCode(value, length) {
   return value.replace(/\D/g, "").slice(0, Math.max(1, length));
 }
-function updateVerificationCode(currentCode, index, input, length) {
+function toVerificationCells(code, length) {
   const safeLength = Math.max(1, length);
-  const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
-  const current = normalizeVerificationCode(currentCode, safeLength);
+  const digits = normalizeVerificationCode(code, safeLength);
+  return Array.from({ length: safeLength }, (_, index) => digits[index] ?? "");
+}
+function verificationCellsToCode(cells) {
+  return cells.join("");
+}
+function isVerificationCodeComplete(cells) {
+  return cells.length > 0 && cells.every((cell) => cell !== "");
+}
+function reconcileVerificationCells(cells, code, length) {
+  const safeLength = Math.max(1, length);
+  const normalized = normalizeVerificationCode(code, safeLength);
+  if (cells.length === safeLength && verificationCellsToCode(cells) === normalized) {
+    return [...cells];
+  }
+  return toVerificationCells(normalized, safeLength);
+}
+function updateVerificationCells(currentCells, index, input, length) {
+  const safeLength = Math.max(1, length);
+  const focusedIndex = Math.min(Math.max(0, index), safeLength - 1);
+  const cells = Array.from({ length: safeLength }, (_, cellIndex) => {
+    const cell = currentCells[cellIndex] ?? "";
+    return /^\d$/.test(cell) ? cell : "";
+  });
+  const pastedDigits = input.replace(/\D/g, "");
+  const safeIndex = pastedDigits.length > 1 && pastedDigits.length > safeLength - focusedIndex ? 0 : focusedIndex;
   const insertedDigits = normalizeVerificationCode(input, safeLength - safeIndex);
   if (!insertedDigits) {
-    return {
-      code: `${current.slice(0, safeIndex)}${current.slice(safeIndex + 1)}`,
-      nextFocus: safeIndex
-    };
+    cells[safeIndex] = "";
+    return { cells, nextFocus: safeIndex };
   }
+  Array.from(insertedDigits).forEach((digit, offset) => {
+    cells[safeIndex + offset] = digit;
+  });
   return {
-    code: `${current.slice(0, safeIndex)}${insertedDigits}${current.slice(
-      safeIndex + insertedDigits.length
-    )}`.slice(0, safeLength),
+    cells,
     nextFocus: Math.min(safeIndex + insertedDigits.length, safeLength - 1)
   };
 }
@@ -36565,17 +36772,17 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
 }, forwardedRef) {
   const safeLength = Math.max(1, Math.floor(length));
   const isControlled = typeof value === "string";
-  const [uncontrolledValue, setUncontrolledValue] = useState(
-    () => normalizeVerificationCode(defaultValue, safeLength)
-  );
+  const [cellsState, setCellsState] = useState(() => toVerificationCells(defaultValue, safeLength));
   const [focusedIndex, setFocusedIndex] = useState(null);
   const { width: viewportWidth } = useWindowDimensions();
   const rootRef = useRef(null);
   const inputRefs = useRef([]);
-  const currentCode = normalizeVerificationCode(
-    isControlled ? value : uncontrolledValue,
+  const cells = reconcileVerificationCells(
+    cellsState,
+    isControlled ? value : verificationCellsToCode(cellsState),
     safeLength
   );
+  const currentCode = verificationCellsToCode(cells);
   useApplyWebClassName(rootRef, className);
   const focus = useCallback(
     (index = 0) => {
@@ -36585,39 +36792,37 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
     [safeLength]
   );
   const commit = useCallback(
-    (nextValue) => {
-      const normalized = normalizeVerificationCode(nextValue, safeLength);
-      if (!isControlled) {
-        setUncontrolledValue(normalized);
-      }
-      onValueChange?.(normalized);
-      if (normalized.length === safeLength) {
-        onComplete?.(normalized);
+    (nextCells) => {
+      setCellsState(nextCells);
+      const code = verificationCellsToCode(nextCells);
+      onValueChange?.(code);
+      if (isVerificationCodeComplete(nextCells)) {
+        onComplete?.(code);
       }
     },
-    [isControlled, onComplete, onValueChange, safeLength]
+    [onComplete, onValueChange]
   );
   useImperativeHandle(
     forwardedRef,
     () => ({
       clear: () => {
-        commit("");
+        commit(toVerificationCells("", safeLength));
         focus(0);
       },
       focus
     }),
-    [commit, focus]
+    [commit, focus, safeLength]
   );
   const handleChange = (index, input) => {
-    const update = updateVerificationCode(currentCode, index, input, safeLength);
-    commit(update.code);
+    const update = updateVerificationCells(cells, index, input, safeLength);
+    commit(update.cells);
     focus(update.nextFocus);
   };
   const handleKeyPress = (index, event) => {
     const key = event.nativeEvent.key;
-    if (key === "Backspace" && !currentCode[index] && index > 0) {
-      const update = updateVerificationCode(currentCode, index - 1, "", safeLength);
-      commit(update.code);
+    if (key === "Backspace" && !cells[index] && index > 0) {
+      const update = updateVerificationCells(cells, index - 1, "", safeLength);
+      commit(update.cells);
       focus(index - 1);
       return;
     }
@@ -36685,7 +36890,7 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
                     Platform.OS === "android" ? styles33.cellAndroid : null,
                     inputStyle
                   ],
-                  value: currentCode[index] ?? ""
+                  value: cells[index] ?? ""
                 },
                 index
               );
@@ -36771,6 +36976,9 @@ var FALLBACK_ELLIPSIS_WIDTH = 20;
 var WEB_MENU_Z_INDEX = 600;
 var WEB_VIEWPORT_PADDING = 8;
 var WEB_MENU_GAP = 8;
+function webListboxProps(multiple) {
+  return { role: "listbox", "aria-multiselectable": multiple };
+}
 function itemBackground(state) {
   switch (state) {
     case "hover":
@@ -37084,6 +37292,7 @@ var Select = forwardRef(
       setOpen(false);
       focusTrigger();
     }, [focusTrigger, setOpen]);
+    useOverlayLayer("popover", isOpen, closeAndFocusTrigger);
     useEffect(() => {
       if (Platform.OS !== "web") return;
       const isTriggerFocused = () => document.activeElement === triggerRef.current;
@@ -37097,11 +37306,6 @@ var Select = forwardRef(
           }
           return;
         }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          closeAndFocusTrigger();
-          return;
-        }
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
           event.preventDefault();
           setHoveredValue((current) => {
@@ -37139,7 +37343,6 @@ var Select = forwardRef(
       filteredOptions,
       hoveredValue,
       multiple,
-      closeAndFocusTrigger,
       focusTrigger,
       handleSelect,
       setOpen
@@ -37206,6 +37409,7 @@ var Select = forwardRef(
               contentContainerStyle: styles34.optionListContent,
               keyboardShouldPersistTaps: "handled",
               showsVerticalScrollIndicator: false,
+              ...Platform.OS === "web" ? webListboxProps(multiple) : null,
               children: [
                 loading ? /* @__PURE__ */ jsx(View, { style: styles34.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles34.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles34.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles34.statusText, children: emptyText }) }) : null,
                 !loading && filteredOptions.map((option) => {
@@ -37223,6 +37427,8 @@ var Select = forwardRef(
                       onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
                       accessibilityRole: multiple ? "checkbox" : "button",
                       accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+                      role: Platform.OS === "web" ? "option" : void 0,
+                      "aria-selected": isSelected,
                       style: [
                         styles34.item,
                         {
@@ -37263,6 +37469,7 @@ var Select = forwardRef(
                 accessibilityRole: "combobox",
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
+                "aria-expanded": isOpen,
                 style: [
                   styles34.trigger,
                   {
@@ -37746,6 +37953,8 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
+      "aria-checked": isActive,
+      ...Platform.OS === "web" && !disabled ? { onKeyDown: (event) => handleWebToggleKeyDown(event, handlePress) } : null,
       style: [styles36.pressable, disabled && styles36.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
@@ -37897,7 +38106,7 @@ var BASE_ITEM_SIZE = 16;
 var ICON_WIDTH_RATIO = 12.57 / BASE_ITEM_SIZE;
 var ICON_HEIGHT_RATIO = 11.98 / BASE_ITEM_SIZE;
 var STAR_GAP_RATIO = 2 / BASE_ITEM_SIZE;
-function clamp2(value) {
+function clamp(value) {
   return Math.max(0, Math.min(value, STAR_COUNT));
 }
 var RatingInput = forwardRef(
@@ -37921,8 +38130,8 @@ var RatingInput = forwardRef(
     const containerRef = useRef(null);
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const isControlled = value !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = useState(() => clamp2(defaultValue));
-    const selectedValue = clamp2(isControlled ? value : uncontrolledValue);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => clamp(defaultValue));
+    const selectedValue = clamp(isControlled ? value : uncontrolledValue);
     const selectedStarCount = Math.round(selectedValue);
     const iconWidth = size * ICON_WIDTH_RATIO;
     const iconHeight = size * ICON_HEIGHT_RATIO;
@@ -39085,6 +39294,12 @@ var RadioButton = forwardRef(
         accessibilityRole: "radio",
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: { selected: isActive, disabled },
+        ...Platform.OS === "web" ? {
+          "aria-checked": isActive,
+          ...disabled ? null : {
+            onKeyDown: (event) => handleWebToggleKeyDown(event, handlePress)
+          }
+        } : null,
         style: [styles42.root, disabled && styles42.disabled, style],
         children: [
           /* @__PURE__ */ jsx(View, { style: styles42.control, children: isActive ? /* @__PURE__ */ jsx(View, { style: styles42.dot }) : null }),
@@ -39236,6 +39451,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-export { Accordion, AccordionItem, AccountHeader, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, BackspaceIcon, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BookingWarningNotification, BrandLogo, BuildingIcon, Button, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CancelledBookingNotification, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, CurrentLocationIcon, CutleryIcon, DatePicker, DeactivateIcon, DollarIcon, DoubleCheckIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, FiltersIcon, FingerprintIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GoogleBrandIcon, GooglePlayIcon, GuestCheckInNotification, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, IconStatusBadge, ImageIcon, InfoCardV2, InfoCircleIcon, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NewBookingNotification, NoPetsIcon, NoReviewIcon, NoSmokingIcon, NotificationCancelledIcon, NotificationCheckoutIcon, NotificationQrCodeIcon, NotificationStatusSkeleton, NotificationSuccessIcon, NotificationWarningIcon, PaginationDots, PawIcon, PaymentCardIcon, PhoneIcon, PlusIcon, QrCodeIcon, QrKeyNotification, QuantityInput, QuietHoursIcon, RadioButton, Range, RatingInput, RatingStarIcon, ReceiptIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, StarOutlineIcon, StatCard, StatusBadge, StatusIndicator, StayHomeIcon, StepList, StepPager, SunIcon, TableViewIcon, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { Accordion, AccordionItem, AccountHeader, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, BackspaceIcon, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BookingWarningNotification, BrandLogo, BuildingIcon, Button, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CancelledBookingNotification, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, CurrentLocationIcon, CutleryIcon, DatePicker, DeactivateIcon, DollarIcon, DoubleCheckIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, FiltersIcon, FingerprintIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GoogleBrandIcon, GooglePlayIcon, GuestCheckInNotification, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, IconStatusBadge, ImageIcon, InfoCardV2, InfoCircleIcon, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NewBookingNotification, NoPetsIcon, NoReviewIcon, NoSmokingIcon, NotificationCancelledIcon, NotificationCheckoutIcon, NotificationQrCodeIcon, NotificationStatusSkeleton, NotificationSuccessIcon, NotificationWarningIcon, PaginationDots, PawIcon, PaymentCardIcon, PhoneIcon, PlusIcon, QrCodeIcon, QrKeyNotification, QuantityInput, QuietHoursIcon, RadioButton, Range, RatingInput, RatingStarIcon, ReceiptIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, StarOutlineIcon, StatCard, StatusBadge, StatusIndicator, StayHomeIcon, StepList, StepPager, SunIcon, TableViewIcon, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, abbreviateMonthNames, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map