@x-plat/design-system 0.14.19 → 0.15.1

package/dist/index.cjs

@@ -7648,8 +7648,10 @@ var import_react11 = __toESM(require("react"), 1);
 var import_react10 = __toESM(require("react"), 1);
 var findScrollParent = (el) => {
   for (let p = el.parentElement; p; p = p.parentElement) {
-    const { overflowY, overflowX } = getComputedStyle(p);
-    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+    if (p.dataset.xplatOverlayEscape !== void 0) continue;
+    const { overflowY } = getComputedStyle(p);
+    if (!/(auto|scroll)/.test(overflowY)) continue;
+    if (p.scrollHeight > p.clientHeight) return p;
   }
   return null;
 };
@@ -7745,8 +7747,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     if (frozenMaxRef.current === void 0) frozenMaxRef.current = suggested;
     const maxHeight = frozenMaxRef.current;
-    pop.style.top = `${top + window.scrollY}px`;
-    pop.style.left = `${left + window.scrollX}px`;
+    const hostRect = (pop.offsetParent ?? pop.parentElement)?.getBoundingClientRect();
+    pop.style.top = `${top - (hostRect?.top ?? 0)}px`;
+    pop.style.left = `${left - (hostRect?.left ?? 0)}px`;
     pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
     pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
     directionRef.current = next;
@@ -8548,13 +8551,13 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom3 = __toESM(require("react-dom"), 1);
-var Portal = ({ children }) => {
+var Portal = ({ children, container }) => {
   if (typeof document === "undefined") return null;
-  return import_react_dom3.default.createPortal(children, document.body);
+  return import_react_dom3.default.createPortal(children, container ?? document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -8584,15 +8587,42 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/useOverlayHost.ts
+var import_react21 = __toESM(require("react"), 1);
+var useOverlayHost = (triggerRef, enabled) => {
+  const [host, setHost] = import_react21.default.useState(null);
+  import_react21.default.useLayoutEffect(() => {
+    if (!enabled || !triggerRef.current) {
+      setHost(null);
+      return;
+    }
+    const el = document.createElement("div");
+    el.dataset.xplatOverlayHost = "";
+    el.style.position = "relative";
+    el.style.width = "0";
+    el.style.height = "0";
+    const parent = findScrollParent(triggerRef.current) ?? document.body;
+    parent.appendChild(el);
+    setHost(el);
+    return () => {
+      el.remove();
+      setHost(null);
+    };
+  }, [enabled, triggerRef]);
+  return host;
+};
+var useOverlayHost_default = useOverlayHost;
+
 // src/components/Dropdown/Dropdown.tsx
 var import_jsx_runtime322 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react21.default.useState(false);
-  const [mounted, setMounted] = import_react21.default.useState(false);
-  const [visible, setVisible] = import_react21.default.useState(false);
-  const triggerRef = import_react21.default.useRef(null);
-  const menuRef = import_react21.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react22.default.useState(false);
+  const [mounted, setMounted] = import_react22.default.useState(false);
+  const [visible, setVisible] = import_react22.default.useState(false);
+  const triggerRef = import_react22.default.useRef(null);
+  const menuRef = import_react22.default.useRef(null);
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, menuRef, () => setIsOpen(false));
@@ -8600,7 +8630,7 @@ var Dropdown = (props) => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
   });
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8625,7 +8655,7 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
       "div",
       {
         ref: menuRef,
@@ -8653,7 +8683,7 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/Editor/Editor.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 
 // src/components/Editor/highlight.ts
 var CODE_LANGUAGES = [
@@ -8924,22 +8954,22 @@ var Editor = (props) => {
     onImageUpload,
     minHeight = 200
   } = props;
-  const editorRef = import_react22.default.useRef(null);
-  const lastRangeRef = import_react22.default.useRef(null);
-  const composingRef = import_react22.default.useRef(false);
-  const [isFocused, setIsFocused] = import_react22.default.useState(false);
-  const [isEmpty, setIsEmpty] = import_react22.default.useState(!value);
-  const [activeFormats, setActiveFormats] = import_react22.default.useState(/* @__PURE__ */ new Set());
-  const [slashOpen, setSlashOpen] = import_react22.default.useState(false);
-  const [slashFilter, setSlashFilter] = import_react22.default.useState("");
-  const [slashIdx, setSlashIdx] = import_react22.default.useState(0);
-  const [slashPos, setSlashPos] = import_react22.default.useState({ top: 0, left: 0 });
-  const slashStartRangeRef = import_react22.default.useRef(null);
-  const [linkOpen, setLinkOpen] = import_react22.default.useState(false);
-  const [linkValue, setLinkValue] = import_react22.default.useState("");
-  const [linkPos, setLinkPos] = import_react22.default.useState({ top: 0, left: 0 });
-  const lastEmittedRef = import_react22.default.useRef(null);
-  import_react22.default.useEffect(() => {
+  const editorRef = import_react23.default.useRef(null);
+  const lastRangeRef = import_react23.default.useRef(null);
+  const composingRef = import_react23.default.useRef(false);
+  const [isFocused, setIsFocused] = import_react23.default.useState(false);
+  const [isEmpty, setIsEmpty] = import_react23.default.useState(!value);
+  const [activeFormats, setActiveFormats] = import_react23.default.useState(/* @__PURE__ */ new Set());
+  const [slashOpen, setSlashOpen] = import_react23.default.useState(false);
+  const [slashFilter, setSlashFilter] = import_react23.default.useState("");
+  const [slashIdx, setSlashIdx] = import_react23.default.useState(0);
+  const [slashPos, setSlashPos] = import_react23.default.useState({ top: 0, left: 0 });
+  const slashStartRangeRef = import_react23.default.useRef(null);
+  const [linkOpen, setLinkOpen] = import_react23.default.useState(false);
+  const [linkValue, setLinkValue] = import_react23.default.useState("");
+  const [linkPos, setLinkPos] = import_react23.default.useState({ top: 0, left: 0 });
+  const lastEmittedRef = import_react23.default.useRef(null);
+  import_react23.default.useEffect(() => {
     const el = editorRef.current;
     if (!el) return;
     if (value === lastEmittedRef.current) return;
@@ -9021,10 +9051,10 @@ var Editor = (props) => {
     const current = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
     setBlock(current === tag ? "p" : tag);
   };
-  const historyRef = import_react22.default.useRef([]);
-  const historyIdxRef = import_react22.default.useRef(-1);
-  const lastPushAtRef = import_react22.default.useRef(0);
-  const isRestoringRef = import_react22.default.useRef(false);
+  const historyRef = import_react23.default.useRef([]);
+  const historyIdxRef = import_react23.default.useRef(-1);
+  const lastPushAtRef = import_react23.default.useRef(0);
+  const isRestoringRef = import_react23.default.useRef(false);
   const caretOffset = (rootEl) => {
     const el = rootEl ?? editorRef.current;
     const sel = window.getSelection();
@@ -9101,8 +9131,8 @@ var Editor = (props) => {
     const cls = Array.from(pre.classList).find((c) => c.startsWith("lang-"));
     return cls?.slice(5) ?? "plain";
   };
-  const [codeLang, setCodeLang] = import_react22.default.useState("plain");
-  const highlightRafRef = import_react22.default.useRef(0);
+  const [codeLang, setCodeLang] = import_react23.default.useState("plain");
+  const highlightRafRef = import_react23.default.useRef(0);
   const rehighlight = (pre) => {
     if (composingRef.current) return;
     const code = pre.querySelector("code");
@@ -9447,7 +9477,7 @@ var Editor = (props) => {
     setSlashIdx(0);
     slashStartRangeRef.current = null;
   };
-  const filteredSlashItems = import_react22.default.useMemo(() => {
+  const filteredSlashItems = import_react23.default.useMemo(() => {
     if (!slashFilter) return SLASH_ITEMS;
     const f = slashFilter.toLowerCase();
     return SLASH_ITEMS.filter((it) => it.label.toLowerCase().includes(f) || it.key.includes(f));
@@ -9712,7 +9742,7 @@ var Editor = (props) => {
       }
     }
   };
-  const plainPasteRef = import_react22.default.useRef(false);
+  const plainPasteRef = import_react23.default.useRef(false);
   const handlePaste = (e) => {
     if (readOnly) return;
     e.preventDefault();
@@ -10013,7 +10043,7 @@ var EditorToolbar = ({
   ] });
 };
 var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
-  import_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       const menu = document.querySelector(".lib-xplat-editor__slash-menu");
@@ -10047,8 +10077,8 @@ var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
   );
 };
 var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
-  const inputRef = import_react22.default.useRef(null);
-  import_react22.default.useEffect(() => {
+  const inputRef = import_react23.default.useRef(null);
+  import_react23.default.useEffect(() => {
     inputRef.current?.focus();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
@@ -10106,7 +10136,7 @@ EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_jsx_runtime325 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
@@ -10120,9 +10150,9 @@ var FileUpload = (props) => {
     label,
     required
   } = props;
-  const fieldId = import_react23.default.useId();
-  const [isDragOver, setIsDragOver] = import_react23.default.useState(false);
-  const inputRef = import_react23.default.useRef(null);
+  const fieldId = import_react24.default.useId();
+  const [isDragOver, setIsDragOver] = import_react24.default.useState(false);
+  const inputRef = import_react24.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -10185,10 +10215,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react24 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -10256,15 +10286,15 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react24.default.createElement(tag, props);
+    return import_react25.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react24.default.createElement(tag, props, ...children);
+  return import_react25.default.createElement(tag, props, ...children);
 };
 var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : import_react24.default.createElement(import_react24.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react25.default.createElement(import_react25.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
@@ -10277,20 +10307,20 @@ var HtmlTypeWriter = ({
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react25.default.useState(0);
-  const doneCalledRef = import_react25.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react25.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react26.default.useState(0);
+  const doneCalledRef = import_react26.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react26.default.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  import_react25.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react25.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -10298,18 +10328,18 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react25.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react25.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react25.default.useMemo(
+  const parsed = import_react26.default.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
@@ -10319,13 +10349,13 @@ HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react26 = __toESM(require("react"), 1);
+var import_react27 = __toESM(require("react"), 1);
 var import_jsx_runtime327 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, placeholder, onChange, validations, label, required } = props;
-  const fieldId = import_react26.default.useId();
-  const [previewUrl, setPreviewUrl] = import_react26.default.useState();
-  import_react26.default.useEffect(() => {
+  const fieldId = import_react27.default.useId();
+  const [previewUrl, setPreviewUrl] = import_react27.default.useState();
+  import_react27.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -10334,7 +10364,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react26.default.useRef(null);
+  const inputRef = import_react27.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -10517,22 +10547,23 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react27 = __toESM(require("react"), 1);
+var import_react28 = __toESM(require("react"), 1);
 var import_jsx_runtime332 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react27.default.useRef(null);
-  const triggerRef = import_react27.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react27.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react27.default.useState(false);
+  const popRef = import_react28.default.useRef(null);
+  const triggerRef = import_react28.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react28.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react28.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, popRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, localOpen);
   useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react27.default.useEffect(() => {
+  import_react28.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -10555,7 +10586,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
           "div",
           {
             className: clsx_default(
@@ -10613,12 +10644,12 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react28 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react28.default.createContext(
+var import_react29 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react29.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react28.default.useContext(RadioGroupContext);
+  return import_react29.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
@@ -10694,19 +10725,19 @@ RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-var import_react31 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react29 = __toESM(require("react"), 1);
-var SelectContext = import_react29.default.createContext(null);
+var import_react30 = __toESM(require("react"), 1);
+var SelectContext = import_react30.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react30 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 var import_jsx_runtime336 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = import_react30.default.useContext(context_default);
+  const ctx = import_react31.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -10756,29 +10787,29 @@ var SelectRoot = (props) => {
     required,
     size = "md"
   } = props;
-  const fieldId = import_react31.default.useId();
-  const itemChildren = import_react31.default.Children.toArray(children).filter(
-    (child) => import_react31.default.isValidElement(child) && child.type === SelectItem_default
+  const fieldId = import_react32.default.useId();
+  const itemChildren = import_react32.default.Children.toArray(children).filter(
+    (child) => import_react32.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react31.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react31.default.useState(null);
-  const [uncontrolledValue, setUncontrolledValue] = import_react31.default.useState(void 0);
-  const controlledLabel = import_react31.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react32.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react32.default.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = import_react32.default.useState(void 0);
+  const controlledLabel = import_react32.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
   const selectedValue = isControlled ? valueProp : uncontrolledValue;
-  const triggerRef = import_react31.default.useRef(null);
-  const contentRef = import_react31.default.useRef(null);
-  const [mounted, setMounted] = import_react31.default.useState(false);
-  const [visible, setVisible] = import_react31.default.useState(false);
-  import_react31.default.useEffect(() => {
+  const triggerRef = import_react32.default.useRef(null);
+  const contentRef = import_react32.default.useRef(null);
+  const [mounted, setMounted] = import_react32.default.useState(false);
+  const [visible, setVisible] = import_react32.default.useState(false);
+  import_react32.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -10788,33 +10819,34 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const [query, setQuery] = import_react31.default.useState("");
+  const [query, setQuery] = import_react32.default.useState("");
   const textOf = (node) => {
     if (node === null || node === void 0 || typeof node === "boolean") return "";
     if (typeof node === "string" || typeof node === "number") return String(node);
     if (Array.isArray(node)) return node.map(textOf).join("");
-    if (import_react31.default.isValidElement(node)) return textOf(node.props.children);
+    if (import_react32.default.isValidElement(node)) return textOf(node.props.children);
     return "";
   };
-  const visibleItems = import_react31.default.useMemo(() => {
+  const visibleItems = import_react32.default.useMemo(() => {
     if (!searchable || !query.trim()) return itemChildren;
     const q = query.trim().toLowerCase();
     return itemChildren.filter((c) => textOf(c.props.children).toLowerCase().includes(q));
   }, [searchable, query, itemChildren]);
-  const open = import_react31.default.useCallback(() => setOpen(true), []);
-  const close = import_react31.default.useCallback(() => {
+  const open = import_react32.default.useCallback(() => setOpen(true), []);
+  const close = import_react32.default.useCallback(() => {
     setOpen(false);
     setQuery("");
   }, []);
-  const toggle = import_react31.default.useCallback(() => setOpen((prev) => !prev), []);
+  const toggle = import_react32.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react31.default.useCallback(
+  const setSelected = import_react32.default.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label2);
@@ -10824,7 +10856,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react31.default.useMemo(
+  const ctxValue = import_react32.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -10903,7 +10935,7 @@ var SelectRoot = (props) => {
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", size, stateClass),
@@ -11069,7 +11101,7 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-var import_react32 = __toESM(require("react"), 1);
+var import_react33 = __toESM(require("react"), 1);
 var import_jsx_runtime342 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
@@ -11094,26 +11126,26 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = import_react32.default.useMemo(() => {
+  const extendedItems = import_react33.default.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = import_react32.default.useState(
+  const [innerIndex, setInnerIndex] = import_react33.default.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = import_react32.default.useState(false);
-  const [dragOffset, setDragOffset] = import_react32.default.useState(0);
-  const [animated, setAnimated] = import_react32.default.useState(false);
-  const [containerWidth, setContainerWidth] = import_react32.default.useState(0);
-  const containerRef = import_react32.default.useRef(null);
-  const startXRef = import_react32.default.useRef(0);
-  const startTimeRef = import_react32.default.useRef(0);
-  const autoplayTimerRef = import_react32.default.useRef(null);
-  const resumeTimeoutRef = import_react32.default.useRef(null);
-  const [paused, setPaused] = import_react32.default.useState(false);
-  const initializedRef = import_react32.default.useRef(false);
-  import_react32.default.useEffect(() => {
+  const [isDragging, setIsDragging] = import_react33.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react33.default.useState(0);
+  const [animated, setAnimated] = import_react33.default.useState(false);
+  const [containerWidth, setContainerWidth] = import_react33.default.useState(0);
+  const containerRef = import_react33.default.useRef(null);
+  const startXRef = import_react33.default.useRef(0);
+  const startTimeRef = import_react33.default.useRef(0);
+  const autoplayTimerRef = import_react33.default.useRef(null);
+  const resumeTimeoutRef = import_react33.default.useRef(null);
+  const [paused, setPaused] = import_react33.default.useState(false);
+  const initializedRef = import_react33.default.useRef(false);
+  import_react33.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -11136,7 +11168,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = import_react32.default.useCallback(
+  const moveToInner = import_react33.default.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -11164,7 +11196,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = import_react32.default.useCallback(() => {
+  const handleTransitionEnd = import_react33.default.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -11174,7 +11206,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = import_react32.default.useCallback(
+  const slideTo = import_react33.default.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -11184,7 +11216,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = import_react32.default.useCallback(() => {
+  const slideNext = import_react33.default.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -11193,7 +11225,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = import_react32.default.useCallback(() => {
+  const slidePrev = import_react33.default.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -11202,7 +11234,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  import_react32.default.useEffect(() => {
+  import_react33.default.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -11210,12 +11242,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  import_react32.default.useImperativeHandle(swiperRef, () => ({
+  import_react33.default.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  import_react32.default.useEffect(() => {
+  import_react33.default.useEffect(() => {
     if (!auto || !canSlide || paused) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -11241,7 +11273,7 @@ var Swiper = (props) => {
       resumeTimeoutRef.current = null;
     }, pauseOnInteraction);
   };
-  import_react32.default.useEffect(() => {
+  import_react33.default.useEffect(() => {
     return () => {
       if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
     };
@@ -11259,7 +11291,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  import_react32.default.useEffect(() => {
+  import_react33.default.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -11298,7 +11330,7 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = import_react32.default.useMemo(
+  const slideElements = import_react33.default.useMemo(
     () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
       "div",
       {
@@ -11372,7 +11404,7 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-var import_react33 = __toESM(require("react"), 1);
+var import_react34 = __toESM(require("react"), 1);
 var import_jsx_runtime343 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
@@ -11386,11 +11418,11 @@ var Switch = (props) => {
     label,
     required
   } = props;
-  const fieldId = import_react33.default.useId();
+  const fieldId = import_react34.default.useId();
   const statusType = normalizeStatus(type);
-  const [isAnimating, setIsAnimating] = import_react33.default.useState(false);
-  const timeoutRef = import_react33.default.useRef(null);
-  import_react33.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react34.default.useState(false);
+  const timeoutRef = import_react34.default.useRef(null);
+  import_react34.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -11429,10 +11461,10 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-var import_react34 = __toESM(require("react"), 1);
-var TableContext = import_react34.default.createContext(null);
+var import_react35 = __toESM(require("react"), 1);
+var TableContext = import_react35.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react34.default.useContext(TableContext);
+  const ctx = import_react35.default.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -11449,18 +11481,25 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
-    TableContext_default.Provider,
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+    "div",
     {
-      value: {
-        rowBorderUse,
-        colBorderUse,
-        headerSticky,
-        stickyShadow
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("table", { className: "lib-xplat-table", children })
+      className: `lib-xplat-table-wrapper ${size}`,
+      "data-xplat-overlay-escape": "",
+      children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+        TableContext_default.Provider,
+        {
+          value: {
+            rowBorderUse,
+            colBorderUse,
+            headerSticky,
+            stickyShadow
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("table", { className: "lib-xplat-table", children })
+        }
+      )
     }
-  ) });
+  );
 };
 Table.displayName = "Table";
 var Table_default = Table;
@@ -11475,24 +11514,24 @@ TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react37 = __toESM(require("react"), 1);
+var import_react38 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react35 = __toESM(require("react"), 1);
-var TableHeadContext = import_react35.default.createContext(
+var import_react36 = __toESM(require("react"), 1);
+var TableHeadContext = import_react36.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react35.default.useContext(TableHeadContext);
+  const ctx = import_react36.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react36 = __toESM(require("react"), 1);
-var TableRowContext = import_react36.default.createContext(null);
+var import_react37 = __toESM(require("react"), 1);
+var TableRowContext = import_react37.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react36.default.useContext(TableRowContext);
+  const ctx = import_react37.default.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -11500,7 +11539,7 @@ var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
 var import_jsx_runtime346 = require("react/jsx-runtime");
-var TableCell = import_react37.default.memo((props) => {
+var TableCell = import_react38.default.memo((props) => {
   const {
     children,
     align = "center",
@@ -11514,9 +11553,9 @@ var TableCell = import_react37.default.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react37.default.useState(0);
-  const cellRef = import_react37.default.useRef(null);
-  const calculateLeft = import_react37.default.useCallback(() => {
+  const [left, setLeft] = import_react38.default.useState(0);
+  const cellRef = import_react38.default.useRef(null);
+  const calculateLeft = import_react38.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -11525,7 +11564,7 @@ var TableCell = import_react37.default.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react37.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -11583,9 +11622,9 @@ TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react38 = __toESM(require("react"), 1);
+var import_react39 = __toESM(require("react"), 1);
 var import_jsx_runtime348 = require("react/jsx-runtime");
-var TableRow = import_react38.default.memo((props) => {
+var TableRow = import_react39.default.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -11594,7 +11633,7 @@ var TableRow = import_react38.default.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react38.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react39.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -11658,9 +11697,9 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react39 = __toESM(require("react"), 1);
+var import_react40 = __toESM(require("react"), 1);
 var import_jsx_runtime350 = require("react/jsx-runtime");
-var TextArea = import_react39.default.forwardRef(
+var TextArea = import_react40.default.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -11673,7 +11712,7 @@ var TextArea = import_react39.default.forwardRef(
       disabled,
       ...textareaProps
     } = props;
-    const autoId = import_react39.default.useId();
+    const autoId = import_react40.default.useId();
     const fieldId = props.id ?? autoId;
     const control = /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
       "textarea",
@@ -11695,7 +11734,7 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/TimePicker/TimePicker.tsx
-var import_react40 = __toESM(require("react"), 1);
+var import_react41 = __toESM(require("react"), 1);
 var import_jsx_runtime351 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS4 = 200;
 var toMinutes = (hhmm) => {
@@ -11733,13 +11772,13 @@ var TimePicker = (props) => {
     required,
     validations
   } = props;
-  const fieldId = import_react40.default.useId();
-  const triggerRef = import_react40.default.useRef(null);
-  const contentRef = import_react40.default.useRef(null);
-  const [isOpen, setOpen] = import_react40.default.useState(false);
-  const [mounted, setMounted] = import_react40.default.useState(false);
-  const [visible, setVisible] = import_react40.default.useState(false);
-  const options = import_react40.default.useMemo(() => {
+  const fieldId = import_react41.default.useId();
+  const triggerRef = import_react41.default.useRef(null);
+  const contentRef = import_react41.default.useRef(null);
+  const [isOpen, setOpen] = import_react41.default.useState(false);
+  const [mounted, setMounted] = import_react41.default.useState(false);
+  const [visible, setVisible] = import_react41.default.useState(false);
+  const options = import_react41.default.useMemo(() => {
     const safeStep = step > 0 && step <= 720 ? step : 30;
     const lo = toMinutes(min) ?? 0;
     const hi = toMinutes(max) ?? 24 * 60 - 1;
@@ -11747,18 +11786,19 @@ var TimePicker = (props) => {
     for (let t = lo; t <= hi; t += safeStep) out.push(toHHmm(t));
     return out;
   }, [step, min, max]);
-  const close = import_react40.default.useCallback(() => setOpen(false), []);
+  const close = import_react41.default.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, contentRef, mounted);
-  import_react40.default.useEffect(() => {
+  import_react41.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react40.default.useEffect(() => {
+  import_react41.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -11796,7 +11836,7 @@ var TimePicker = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: clsx_default("time-picker-value", !value && "placeholder"), children: value ? display(value, use12Hours) : placeholder })
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
       "div",
       {
         ref: contentRef,
@@ -11830,20 +11870,20 @@ TimePicker.displayName = "TimePicker";
 var TimePicker_default = TimePicker;
 
 // src/components/Toast/Toast.tsx
-var import_react41 = __toESM(require("react"), 1);
+var import_react42 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 var import_jsx_runtime352 = require("react/jsx-runtime");
-var ToastContext = import_react41.default.createContext(null);
+var ToastContext = import_react42.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react41.default.useContext(ToastContext);
+  const ctx = import_react42.default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = import_react41.default.useRef(null);
-  const [height, setHeight] = import_react41.default.useState(void 0);
-  import_react41.default.useEffect(() => {
+  const ref = import_react42.default.useRef(null);
+  const [height, setHeight] = import_react42.default.useState(void 0);
+  import_react42.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
@@ -11875,13 +11915,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react41.default.useState([]);
-  const [removing, setRemoving] = import_react41.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react41.default.useState(false);
-  import_react41.default.useEffect(() => {
+  const [toasts, setToasts] = import_react42.default.useState([]);
+  const [removing, setRemoving] = import_react42.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react42.default.useState(false);
+  import_react42.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react41.default.useCallback((id) => {
+  const remove = import_react42.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -11892,7 +11932,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react41.default.useCallback(
+  const toast = import_react42.default.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -11945,7 +11985,7 @@ ToggleChip.displayName = "ToggleChip";
 var ToggleChip_default = ToggleChip;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react42 = __toESM(require("react"), 1);
+var import_react43 = __toESM(require("react"), 1);
 var import_jsx_runtime354 = require("react/jsx-runtime");
 var OFFSET = 12;
 var GAP = 8;
@@ -11961,14 +12001,14 @@ var Tooltip = (props) => {
     disabled = false
   } = props;
   const shape = variant ?? type ?? "dark";
-  const triggerRef = import_react42.default.useRef(null);
-  const tooltipRef = import_react42.default.useRef(null);
-  const [visible, setVisible] = import_react42.default.useState(false);
-  const [pos, setPos] = import_react42.default.useState({ left: 0, top: 0 });
-  const delayTimer = import_react42.default.useRef(0);
-  const rafRef = import_react42.default.useRef(0);
-  const cursor = import_react42.default.useRef(null);
-  const clamp = import_react42.default.useCallback((left, top, w, h) => {
+  const triggerRef = import_react43.default.useRef(null);
+  const tooltipRef = import_react43.default.useRef(null);
+  const [visible, setVisible] = import_react43.default.useState(false);
+  const [pos, setPos] = import_react43.default.useState({ left: 0, top: 0 });
+  const delayTimer = import_react43.default.useRef(0);
+  const rafRef = import_react43.default.useRef(0);
+  const cursor = import_react43.default.useRef(null);
+  const clamp = import_react43.default.useCallback((left, top, w, h) => {
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     return {
@@ -11976,7 +12016,7 @@ var Tooltip = (props) => {
       top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
     };
   }, []);
-  const placeAtCursor = import_react42.default.useCallback((x, y) => {
+  const placeAtCursor = import_react43.default.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -11987,7 +12027,7 @@ var Tooltip = (props) => {
     if (top < GAP) top = y + OFFSET;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const placeAtTrigger = import_react42.default.useCallback(() => {
+  const placeAtTrigger = import_react43.default.useCallback(() => {
     const el = tooltipRef.current;
     const trigger = triggerRef.current;
     if (!el || !trigger) return;
@@ -11999,19 +12039,19 @@ var Tooltip = (props) => {
     const left = rect.left + rect.width / 2 - w / 2;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const reposition = import_react42.default.useCallback(() => {
+  const reposition = import_react43.default.useCallback(() => {
     if (follow && cursor.current) {
       placeAtCursor(cursor.current.x, cursor.current.y);
     } else {
       placeAtTrigger();
     }
   }, [follow, placeAtCursor, placeAtTrigger]);
-  const handleMouseEnter = import_react42.default.useCallback((e) => {
+  const handleMouseEnter = import_react43.default.useCallback((e) => {
     if (disabled) return;
     cursor.current = { x: e.clientX, y: e.clientY };
     delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = import_react42.default.useCallback((e) => {
+  const handleMouseMove = import_react43.default.useCallback((e) => {
     cursor.current = { x: e.clientX, y: e.clientY };
     if (!visible || !follow) return;
     cancelAnimationFrame(rafRef.current);
@@ -12019,25 +12059,25 @@ var Tooltip = (props) => {
       if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
     });
   }, [visible, follow, placeAtCursor]);
-  const close = import_react42.default.useCallback(() => {
+  const close = import_react43.default.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleMouseLeave = import_react42.default.useCallback(() => {
+  const handleMouseLeave = import_react43.default.useCallback(() => {
     cursor.current = null;
     close();
   }, [close]);
-  const handleFocus = import_react42.default.useCallback(() => {
+  const handleFocus = import_react43.default.useCallback(() => {
     if (disabled) return;
     cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  import_react42.default.useLayoutEffect(() => {
+  import_react43.default.useLayoutEffect(() => {
     if (!visible) return;
     reposition();
   }, [visible, reposition]);
-  import_react42.default.useEffect(() => {
+  import_react43.default.useEffect(() => {
     if (!visible || follow) return;
     const onChange = () => placeAtTrigger();
     window.addEventListener("scroll", onChange, true);
@@ -12047,7 +12087,7 @@ var Tooltip = (props) => {
       window.removeEventListener("resize", onChange);
     };
   }, [visible, follow, placeAtTrigger]);
-  import_react42.default.useEffect(() => () => {
+  import_react43.default.useEffect(() => () => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
@@ -12086,7 +12126,7 @@ Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-var import_react43 = __toESM(require("react"), 1);
+var import_react44 = __toESM(require("react"), 1);
 var import_jsx_runtime355 = require("react/jsx-runtime");
 var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
   /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
@@ -12098,7 +12138,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = import_react43.default.forwardRef((props, ref) => {
+var Video = import_react44.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -12122,21 +12162,21 @@ var Video = import_react43.default.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = import_react43.default.useRef(null);
-  const videoRef = import_react43.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react43.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react43.default.useState(false);
-  const [currentTime, setCurrentTime] = import_react43.default.useState(0);
-  const [duration, setDuration] = import_react43.default.useState(0);
-  const [buffered, setBuffered] = import_react43.default.useState(0);
-  const [volume, setVolume] = import_react43.default.useState(1);
-  const [isMuted, setIsMuted] = import_react43.default.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = import_react43.default.useState(false);
-  const [playbackRate, setPlaybackRate] = import_react43.default.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = import_react43.default.useState(false);
-  const [captionsOn, setCaptionsOn] = import_react43.default.useState(false);
-  const [isPip, setIsPip] = import_react43.default.useState(false);
-  const setRefs = import_react43.default.useCallback(
+  const containerRef = import_react44.default.useRef(null);
+  const videoRef = import_react44.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react44.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react44.default.useState(false);
+  const [currentTime, setCurrentTime] = import_react44.default.useState(0);
+  const [duration, setDuration] = import_react44.default.useState(0);
+  const [buffered, setBuffered] = import_react44.default.useState(0);
+  const [volume, setVolume] = import_react44.default.useState(1);
+  const [isMuted, setIsMuted] = import_react44.default.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = import_react44.default.useState(false);
+  const [playbackRate, setPlaybackRate] = import_react44.default.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = import_react44.default.useState(false);
+  const [captionsOn, setCaptionsOn] = import_react44.default.useState(false);
+  const [isPip, setIsPip] = import_react44.default.useState(false);
+  const setRefs = import_react44.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -12144,14 +12184,14 @@ var Video = import_react43.default.forwardRef((props, ref) => {
     },
     [ref]
   );
-  import_react43.default.useEffect(() => {
+  import_react44.default.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  import_react43.default.useEffect(() => {
+  import_react44.default.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -12540,13 +12580,13 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-var import_react45 = __toESM(require("react"), 1);
+var import_react46 = __toESM(require("react"), 1);
 
 // src/layout/SideBar/SideBarContext.tsx
-var import_react44 = __toESM(require("react"), 1);
-var SideBarContext = import_react44.default.createContext(null);
+var import_react45 = __toESM(require("react"), 1);
+var SideBarContext = import_react45.default.createContext(null);
 var useSideBarContext = () => {
-  const ctx = import_react44.default.useContext(SideBarContext);
+  const ctx = import_react45.default.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
@@ -12556,7 +12596,7 @@ var SideBarContext_default = SideBarContext;
 var import_jsx_runtime361 = require("react/jsx-runtime");
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = import_react45.default.useState(true);
+  const [isOpen, setIsOpen] = import_react46.default.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };