@x-plat/design-system 0.14.2 → 0.14.4

package/dist/components/AutoResizeTextArea/index.d.cts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */

package/dist/components/AutoResizeTextArea/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */

package/dist/components/Badge/index.d.cts

@@ -1,4 +1,4 @@
 export { Badge, Badge as NotificationBadge, Badge as default } from '../NotificationBadge/index.cjs';
 import 'react/jsx-runtime';
 import 'react';
-import '../../status-njWqQWFV.cjs';
+import '../../status-C70BBv2S.cjs';

package/dist/components/Badge/index.d.ts

@@ -1,4 +1,4 @@
 export { Badge, Badge as NotificationBadge, Badge as default } from '../NotificationBadge/index.js';
 import 'react/jsx-runtime';
 import 'react';
-import '../../status-njWqQWFV.js';
+import '../../status-C70BBv2S.js';

package/dist/components/ChatInput/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 type ButtonType = "primary" | "secondary" | "ghost";
 interface ChatInputProps {

package/dist/components/ChatInput/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 type ButtonType = "primary" | "secondary" | "ghost";
 interface ChatInputProps {

package/dist/components/CheckBox/index.cjs

@@ -27,6 +27,9 @@ module.exports = __toCommonJS(CheckBox_exports);
 // src/tokens/colors.ts
 var import_tokens_core = require("@x-plat/tokens-core");
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 
@@ -1019,9 +1022,6 @@ var import_jsx_runtime294 = require("react/jsx-runtime");
 // src/tokens/index.ts
 var import_tokens_core2 = require("@x-plat/tokens-core");
 
-// src/tokens/interface/status.ts
-var normalizeStatus = (value) => value === "brand" ? "primary" : value;
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";

package/dist/components/CheckBox/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";

package/dist/components/CheckBox/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";

package/dist/components/CheckBox/index.js

@@ -1,6 +1,9 @@
 // src/tokens/colors.ts
 import { semantic } from "@x-plat/tokens-core";
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -993,9 +996,6 @@ import { jsx as jsx294, jsxs as jsxs188 } from "react/jsx-runtime";
 // src/tokens/index.ts
 import { cssVar } from "@x-plat/tokens-core";
 
-// src/tokens/interface/status.ts
-var normalizeStatus = (value) => value === "brand" ? "primary" : value;
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";

package/dist/components/DatePicker/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface InputDatePickerProps {

package/dist/components/DatePicker/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface InputDatePickerProps {

package/dist/components/Dropdown/index.cjs

@@ -49,23 +49,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react.default.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = import_react.default.useState("bottom");
+  const directionRef = import_react.default.useRef("bottom");
   const calculatePosition = import_react.default.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -75,7 +74,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
     if (!enabled) return;
@@ -106,7 +110,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -184,7 +188,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = import_react4.default.useState(false);
   const triggerRef = import_react4.default.useRef(null);
   const menuRef = import_react4.default.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -220,7 +224,6 @@ var Dropdown = (props) => {
       {
         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_runtime.jsx)(
           "button",

package/dist/components/Dropdown/index.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /* src/components/Dropdown/dropdown.scss */
 .lib-xplat-dropdown {
   position: relative;
@@ -8,7 +10,7 @@
   cursor: pointer;
 }
 .lib-xplat-dropdown-menu {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   min-width: 160px;
   background: var(--semantic-surface-neutral-primary);

package/dist/components/Dropdown/index.js

@@ -13,23 +13,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = React.useState("bottom");
+  const directionRef = React.useRef("bottom");
   const calculatePosition = React.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
     if (!enabled) return;
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -148,7 +152,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React4.useState(false);
   const triggerRef = React4.useRef(null);
   const menuRef = React4.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -184,7 +188,6 @@ var Dropdown = (props) => {
       {
         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__ */ jsx(
           "button",

package/dist/components/FieldMessage/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 interface FieldMessageProps {
     /** 표시할 검증 메시지 목록. 비어 있거나 없으면 아무것도 그리지 않는다 */

package/dist/components/FieldMessage/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 interface FieldMessageProps {
     /** 표시할 검증 메시지 목록. 비어 있거나 없으면 아무것도 그리지 않는다 */

package/dist/components/FileUpload/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 interface FileUploadProps {
     /** 고를 수 있는 파일 형식 (input 의 accept 와 같다) */

package/dist/components/FileUpload/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 interface FileUploadProps {
     /** 고를 수 있는 파일 형식 (input 의 accept 와 같다) */

package/dist/components/ImageSelector/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 interface ImageSelectorProps {
     /** 선택된 이미지 파일. 주면 미리보기가 나온다 */

package/dist/components/ImageSelector/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 interface ImageSelectorProps {
     /** 선택된 이미지 파일. 주면 미리보기가 나온다 */

package/dist/components/Input/index.d.cts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 type InputSize$1 = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputAttributes, "size"> {

package/dist/components/Input/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 type InputSize$1 = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputAttributes, "size"> {

package/dist/components/NotificationBadge/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
 
 /** NotificationBadge 의 상태 색 */
 type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";

package/dist/components/NotificationBadge/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
 
 /** NotificationBadge 의 상태 색 */
 type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";

package/dist/components/Pagination/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
 
 type PaginationSize = "sm" | "md" | "lg";
 /** Pagination 의 상태 색 */

package/dist/components/Pagination/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
 
 type PaginationSize = "sm" | "md" | "lg";
 /** Pagination 의 상태 색 */

package/dist/components/PopOver/index.cjs

@@ -49,23 +49,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react.default.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = import_react.default.useState("bottom");
+  const directionRef = import_react.default.useRef("bottom");
   const calculatePosition = import_react.default.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -75,7 +74,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
     if (!enabled) return;
@@ -106,7 +110,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -221,9 +225,6 @@ var PopOver = (props) => {
               eventTrigger && "visible"
             ),
             ref: popRef,
-            style: {
-              ...position.position
-            },
             children: PopOverEl
           }
         ) })

package/dist/components/PopOver/index.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /* src/components/PopOver/popOver.scss */
 .lib-xplat-pop-over {
   position: relative;
@@ -7,7 +9,7 @@
   user-select: none;
 }
 .lib-xplat-pop-over-content {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;

package/dist/components/PopOver/index.js

@@ -13,23 +13,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = React.useState("bottom");
+  const directionRef = React.useRef("bottom");
   const calculatePosition = React.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
     if (!enabled) return;
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -185,9 +189,6 @@ var PopOver = (props) => {
               eventTrigger && "visible"
             ),
             ref: popRef,
-            style: {
-              ...position.position
-            },
             children: PopOverEl
           }
         ) })

package/dist/components/Progress/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
 
 type ProgressSize = "sm" | "md" | "lg";
 /** Progress 의 상태 색 */

package/dist/components/Progress/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
 
 type ProgressSize = "sm" | "md" | "lg";
 /** Progress 의 상태 색 */

package/dist/components/Radio/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";

package/dist/components/Radio/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";

package/dist/components/Select/index.cjs

@@ -50,23 +50,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react.default.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = import_react.default.useState("bottom");
+  const directionRef = import_react.default.useRef("bottom");
   const calculatePosition = import_react.default.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -76,7 +75,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
     if (!enabled) return;
@@ -107,7 +111,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -1414,7 +1418,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, width: triggerRef.current?.offsetWidth },
+            style: { width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: [
               searchable && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: "select-search", children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(