@x-plat/design-system 0.8.0 → 0.8.1

package/dist/components/Dropdown/index.cjs

@@ -35,30 +35,25 @@ __export(Dropdown_exports, {
 module.exports = __toCommonJS(Dropdown_exports);
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
-var import_react = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react.default.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = import_react.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return import_react_dom.default.createPortal(children, container);
+  return import_react_dom.default.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react2.default.useState({
+  const [position, setPosition] = import_react.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react2.default.useCallback(() => {
+  const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -85,13 +80,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react2.default.useLayoutEffect(() => {
+  import_react.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -99,7 +94,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -113,9 +108,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react3 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react3.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -154,17 +149,17 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react4.default.useState(false);
-  const [mounted, setMounted] = import_react4.default.useState(false);
-  const [visible, setVisible] = import_react4.default.useState(false);
-  const triggerRef = import_react4.default.useRef(null);
-  const menuRef = import_react4.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react3.default.useState(false);
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  const [visible, setVisible] = import_react3.default.useState(false);
+  const triggerRef = import_react3.default.useRef(null);
+  const menuRef = import_react3.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  import_react4.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -179,8 +174,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -189,14 +184,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {

package/dist/components/Dropdown/index.js

@@ -1,28 +1,23 @@
 // src/components/Dropdown/Dropdown.tsx
-import React4 from "react";
+import React3 from "react";
 
 // src/tokens/hooks/Portal.tsx
-import React from "react";
 import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = React.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
+  return ReactDOM.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-import React2 from "react";
+import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React2.useState({
+  const [position, setPosition] = React.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React2.useCallback(() => {
+  const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -49,13 +44,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React2.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -63,7 +58,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -77,9 +72,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React3 from "react";
+import React2 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -118,17 +113,17 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React4.useState(false);
-  const [mounted, setMounted] = React4.useState(false);
-  const [visible, setVisible] = React4.useState(false);
-  const triggerRef = React4.useRef(null);
-  const menuRef = React4.useRef(null);
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const [mounted, setMounted] = React3.useState(false);
+  const [visible, setVisible] = React3.useState(false);
+  const triggerRef = React3.useRef(null);
+  const menuRef = React3.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -144,7 +139,7 @@ var Dropdown = (props) => {
     setIsOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       "div",
       {
         ref: triggerRef,
@@ -153,14 +148,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsx2(
+    mounted && /* @__PURE__ */ jsx(Portal_default, { children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ jsx2(
+        children: items.map((item) => /* @__PURE__ */ jsx(
           "button",
           {
             className: clsx_default("dropdown-item", {

package/dist/components/Modal/index.cjs

@@ -35,22 +35,8 @@ __export(Modal_exports, {
 module.exports = __toCommonJS(Modal_exports);
 
 // src/components/Modal/Modal.tsx
-var import_react2 = __toESM(require("react"), 1);
-var import_react_dom2 = require("react-dom");
-
-// src/tokens/hooks/Portal.tsx
 var import_react = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react.default.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalContainerContext.Provider, { value: container, children });
-var Portal = ({ children }) => {
-  const contextContainer = import_react.default.useContext(PortalContainerContext);
-  if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return import_react_dom.default.createPortal(children, container);
-};
-Portal.displayName = "Portal";
+var import_react_dom = require("react-dom");
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -69,19 +55,24 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react2.default.useState(false);
-  const [visible, setVisible] = import_react2.default.useState(false);
-  const boxRef = import_react2.default.useRef(null);
-  import_react2.default.useEffect(() => {
+  const [mounted, setMounted] = import_react.default.useState(false);
+  const [visible, setVisible] = import_react.default.useState(false);
+  const [settled, setSettled] = import_react.default.useState(false);
+  import_react.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
-      const t2 = setTimeout(() => setVisible(true), 1);
-      return () => clearTimeout(t2);
+      const show = setTimeout(() => setVisible(true), 1);
+      const settle = setTimeout(() => setSettled(true), ANIMATION_DURATION_MS + 50);
+      return () => {
+        clearTimeout(show);
+        clearTimeout(settle);
+      };
     }
+    setSettled(false);
     setVisible(false);
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
     return () => clearTimeout(t);
@@ -89,21 +80,20 @@ var Modal = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            ref: boxRef,
-            className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            className: clsx_default("lib-xplat-modal", "modal-box", stateClass, settled && "settled"),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PortalProvider, { container: boxRef.current, children })
+            children
           }
         )
       }

package/dist/components/Modal/index.css

@@ -18,6 +18,9 @@
   transform: scale(1);
   opacity: 1;
 }
+.lib-xplat-modal.modal-box.enter.settled {
+  transform: none;
+}
 .lib-xplat-modal.modal-box.exit {
   transform: scale(0.9);
   opacity: 0;

package/dist/components/Modal/index.js

@@ -1,20 +1,6 @@
 // src/components/Modal/Modal.tsx
-import React2 from "react";
-import { createPortal } from "react-dom";
-
-// src/tokens/hooks/Portal.tsx
 import React from "react";
-import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: container, children });
-var Portal = ({ children }) => {
-  const contextContainer = React.useContext(PortalContainerContext);
-  if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
-};
-Portal.displayName = "Portal";
+import { createPortal } from "react-dom";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -33,19 +19,24 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React2.useState(false);
-  const [visible, setVisible] = React2.useState(false);
-  const boxRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const [mounted, setMounted] = React.useState(false);
+  const [visible, setVisible] = React.useState(false);
+  const [settled, setSettled] = React.useState(false);
+  React.useEffect(() => {
     if (isOpen) {
       setMounted(true);
-      const t2 = setTimeout(() => setVisible(true), 1);
-      return () => clearTimeout(t2);
+      const show = setTimeout(() => setVisible(true), 1);
+      const settle = setTimeout(() => setSettled(true), ANIMATION_DURATION_MS + 50);
+      return () => {
+        clearTimeout(show);
+        clearTimeout(settle);
+      };
     }
+    setSettled(false);
     setVisible(false);
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
     return () => clearTimeout(t);
@@ -54,20 +45,19 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal(
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
-            ref: boxRef,
-            className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            className: clsx_default("lib-xplat-modal", "modal-box", stateClass, settled && "settled"),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx2(PortalProvider, { container: boxRef.current, children })
+            children
           }
         )
       }

package/dist/components/PopOver/index.cjs

@@ -35,30 +35,25 @@ __export(PopOver_exports, {
 module.exports = __toCommonJS(PopOver_exports);
 
 // src/components/PopOver/PopOver.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
-var import_react = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react.default.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = import_react.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return import_react_dom.default.createPortal(children, container);
+  return import_react_dom.default.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react2.default.useState({
+  const [position, setPosition] = import_react.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react2.default.useCallback(() => {
+  const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -85,13 +80,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react2.default.useLayoutEffect(() => {
+  import_react.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -99,7 +94,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -113,9 +108,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react3 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react3.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -154,16 +149,16 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/PopOver/PopOver.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react4.default.useRef(null);
-  const triggerRef = import_react4.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react4.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react4.default.useState(false);
+  const popRef = import_react3.default.useRef(null);
+  const triggerRef = import_react3.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react3.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react3.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react4.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -176,7 +171,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -186,7 +181,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             className: clsx_default(

package/dist/components/PopOver/index.js

@@ -1,28 +1,23 @@
 // src/components/PopOver/PopOver.tsx
-import React4 from "react";
+import React3 from "react";
 
 // src/tokens/hooks/Portal.tsx
-import React from "react";
 import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = React.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
+  return ReactDOM.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-import React2 from "react";
+import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React2.useState({
+  const [position, setPosition] = React.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React2.useCallback(() => {
+  const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -49,13 +44,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React2.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -63,7 +58,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -77,9 +72,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React3 from "react";
+import React2 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -118,16 +113,16 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/PopOver/PopOver.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React4.useRef(null);
-  const triggerRef = React4.useRef(null);
-  const [localOpen, setLocalOpen] = React4.useState(false);
-  const [eventTrigger, setEventTrigger] = React4.useState(false);
+  const popRef = React3.useRef(null);
+  const triggerRef = React3.useRef(null);
+  const [localOpen, setLocalOpen] = React3.useState(false);
+  const [eventTrigger, setEventTrigger] = React3.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -150,7 +145,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsx2(
+        localOpen && /* @__PURE__ */ jsx(Portal_default, { children: /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx_default(