@x-plat/design-system 0.5.42 → 0.5.44

package/dist/components/Dropdown/index.cjs

@@ -37,14 +37,28 @@ module.exports = __toCommonJS(Dropdown_exports);
 // src/components/Dropdown/Dropdown.tsx
 var import_react4 = __toESM(require("react"), 1);
 
-// src/tokens/hooks/useAutoPosition.ts
+// 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);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+var import_react2 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react.default.useState({
+  const [position, setPosition] = import_react2.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react.default.useCallback(() => {
+  const calculatePosition = import_react2.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -71,13 +85,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react.default.useLayoutEffect(() => {
+  import_react2.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -85,7 +99,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -99,9 +113,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react2.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -123,20 +137,6 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/Portal.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react3.default.createContext(null);
-var Portal = ({ children }) => {
-  const contextContainer = import_react3.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 Portal_default = Portal;
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";

package/dist/components/Dropdown/index.js

@@ -1,14 +1,28 @@
 // src/components/Dropdown/Dropdown.tsx
 import React4 from "react";
 
-// src/tokens/hooks/useAutoPosition.ts
+// 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);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+import React2 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React.useState({
+  const [position, setPosition] = React2.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React.useCallback(() => {
+  const calculatePosition = React2.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -35,13 +49,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -49,7 +63,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -63,9 +77,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React2 from "react";
+import React3 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -87,20 +101,6 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/Portal.tsx
-import React3 from "react";
-import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React3.createContext(null);
-var Portal = ({ children }) => {
-  const contextContainer = React3.useContext(PortalContainerContext);
-  if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
-};
-Portal.displayName = "Portal";
-var Portal_default = Portal;
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";

package/dist/components/PopOver/index.cjs

@@ -37,14 +37,28 @@ module.exports = __toCommonJS(PopOver_exports);
 // src/components/PopOver/PopOver.tsx
 var import_react4 = __toESM(require("react"), 1);
 
-// src/tokens/hooks/useAutoPosition.ts
+// 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);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+var import_react2 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react.default.useState({
+  const [position, setPosition] = import_react2.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react.default.useCallback(() => {
+  const calculatePosition = import_react2.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -71,13 +85,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react.default.useLayoutEffect(() => {
+  import_react2.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -85,7 +99,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -99,9 +113,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react2.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -123,20 +137,6 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/Portal.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react3.default.createContext(null);
-var Portal = ({ children }) => {
-  const contextContainer = import_react3.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 Portal_default = Portal;
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";

package/dist/components/PopOver/index.js

@@ -1,14 +1,28 @@
 // src/components/PopOver/PopOver.tsx
 import React4 from "react";
 
-// src/tokens/hooks/useAutoPosition.ts
+// 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);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+import React2 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React.useState({
+  const [position, setPosition] = React2.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React.useCallback(() => {
+  const calculatePosition = React2.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -35,13 +49,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -49,7 +63,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -63,9 +77,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React2 from "react";
+import React3 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -87,20 +101,6 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/Portal.tsx
-import React3 from "react";
-import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React3.createContext(null);
-var Portal = ({ children }) => {
-  const contextContainer = React3.useContext(PortalContainerContext);
-  if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
-};
-Portal.displayName = "Portal";
-var Portal_default = Portal;
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";

package/dist/components/Select/index.cjs

@@ -38,14 +38,28 @@ module.exports = __toCommonJS(Select_exports);
 // src/components/Select/Select.tsx
 var import_react6 = __toESM(require("react"), 1);
 
-// src/tokens/hooks/useAutoPosition.ts
+// 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);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+var import_react2 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react.default.useState({
+  const [position, setPosition] = import_react2.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react.default.useCallback(() => {
+  const calculatePosition = import_react2.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -72,13 +86,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react.default.useLayoutEffect(() => {
+  import_react2.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -86,7 +100,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -100,9 +114,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react2.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -124,20 +138,6 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/Portal.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react3.default.createContext(null);
-var Portal = ({ children }) => {
-  const contextContainer = import_react3.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 Portal_default = Portal;
-
 // src/tokens/svg/action/CopyIcon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 

package/dist/components/Select/index.js

@@ -1,14 +1,28 @@
 // src/components/Select/Select.tsx
 import React6 from "react";
 
-// src/tokens/hooks/useAutoPosition.ts
+// 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);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+import React2 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React.useState({
+  const [position, setPosition] = React2.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React.useCallback(() => {
+  const calculatePosition = React2.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -35,13 +49,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -49,7 +63,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -63,9 +77,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React2 from "react";
+import React3 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -87,20 +101,6 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/Portal.tsx
-import React3 from "react";
-import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React3.createContext(null);
-var Portal = ({ children }) => {
-  const contextContainer = React3.useContext(PortalContainerContext);
-  if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
-};
-Portal.displayName = "Portal";
-var Portal_default = Portal;
-
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";