@x-plat/design-system 0.14.1 → 0.14.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/components/AutoResizeTextArea/index.d.cts +1 -1
  2. package/dist/components/AutoResizeTextArea/index.d.ts +1 -1
  3. package/dist/components/Badge/index.d.cts +1 -1
  4. package/dist/components/Badge/index.d.ts +1 -1
  5. package/dist/components/ChatInput/index.d.cts +1 -1
  6. package/dist/components/ChatInput/index.d.ts +1 -1
  7. package/dist/components/CheckBox/index.cjs +3 -3
  8. package/dist/components/CheckBox/index.d.cts +2 -2
  9. package/dist/components/CheckBox/index.d.ts +2 -2
  10. package/dist/components/CheckBox/index.js +3 -3
  11. package/dist/components/DatePicker/index.d.cts +1 -1
  12. package/dist/components/DatePicker/index.d.ts +1 -1
  13. package/dist/components/Dropdown/index.cjs +16 -13
  14. package/dist/components/Dropdown/index.js +16 -13
  15. package/dist/components/FieldMessage/index.d.cts +1 -1
  16. package/dist/components/FieldMessage/index.d.ts +1 -1
  17. package/dist/components/FileUpload/index.d.cts +1 -1
  18. package/dist/components/FileUpload/index.d.ts +1 -1
  19. package/dist/components/ImageSelector/index.d.cts +1 -1
  20. package/dist/components/ImageSelector/index.d.ts +1 -1
  21. package/dist/components/Input/index.d.cts +1 -1
  22. package/dist/components/Input/index.d.ts +1 -1
  23. package/dist/components/NotificationBadge/index.d.cts +1 -1
  24. package/dist/components/NotificationBadge/index.d.ts +1 -1
  25. package/dist/components/Pagination/index.d.cts +1 -1
  26. package/dist/components/Pagination/index.d.ts +1 -1
  27. package/dist/components/PopOver/index.cjs +15 -14
  28. package/dist/components/PopOver/index.js +15 -14
  29. package/dist/components/Progress/index.d.cts +1 -1
  30. package/dist/components/Progress/index.d.ts +1 -1
  31. package/dist/components/Radio/index.d.cts +2 -2
  32. package/dist/components/Radio/index.d.ts +2 -2
  33. package/dist/components/Select/index.cjs +16 -12
  34. package/dist/components/Select/index.d.cts +1 -1
  35. package/dist/components/Select/index.d.ts +1 -1
  36. package/dist/components/Select/index.js +16 -12
  37. package/dist/components/Spinner/index.d.cts +1 -1
  38. package/dist/components/Spinner/index.d.ts +1 -1
  39. package/dist/components/Stat/index.d.cts +1 -1
  40. package/dist/components/Stat/index.d.ts +1 -1
  41. package/dist/components/Steps/index.d.cts +1 -1
  42. package/dist/components/Steps/index.d.ts +1 -1
  43. package/dist/components/Switch/index.d.cts +2 -2
  44. package/dist/components/Switch/index.d.ts +2 -2
  45. package/dist/components/TextArea/index.d.cts +1 -1
  46. package/dist/components/TextArea/index.d.ts +1 -1
  47. package/dist/components/TimePicker/index.cjs +17 -13
  48. package/dist/components/TimePicker/index.d.cts +1 -1
  49. package/dist/components/TimePicker/index.d.ts +1 -1
  50. package/dist/components/TimePicker/index.js +17 -13
  51. package/dist/components/index.cjs +22 -22
  52. package/dist/components/index.d.cts +2 -2
  53. package/dist/components/index.d.ts +2 -2
  54. package/dist/components/index.js +22 -22
  55. package/dist/index.cjs +24 -22
  56. package/dist/index.d.cts +3 -3
  57. package/dist/index.d.ts +3 -3
  58. package/dist/index.js +23 -22
  59. package/dist/layout/Layout/index.d.cts +15 -7
  60. package/dist/layout/Layout/index.d.ts +15 -7
  61. package/dist/{status-njWqQWFV.d.cts → status-C70BBv2S.d.cts} +3 -1
  62. package/dist/{status-njWqQWFV.d.ts → status-C70BBv2S.d.ts} +3 -1
  63. package/dist/tokens/index.cjs +5 -0
  64. package/dist/tokens/index.d.cts +3 -0
  65. package/dist/tokens/index.d.ts +3 -0
  66. package/dist/tokens/index.js +4 -0
  67. package/dist/{validation-Dqo1zqhT.d.cts → validation-BYpAI6Ct.d.cts} +1 -1
  68. package/dist/{validation-Dqo1zqhT.d.ts → validation-BYpAI6Ct.d.ts} +1 -1
  69. package/guidelines/MIGRATION.md +50 -1
  70. package/package.json +1 -1
@@ -13,23 +13,22 @@ var Portal_default = Portal;
13
13
  // src/tokens/hooks/useAutoPosition.ts
14
14
  import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
- const [position, setPosition] = React.useState({
17
- position: {},
18
- direction: "bottom"
19
- });
16
+ const [direction, setDirection] = React.useState("bottom");
17
+ const directionRef = React.useRef("bottom");
20
18
  const calculatePosition = React.useCallback(() => {
21
- if (!triggerRef.current || !popRef.current) return;
19
+ const pop = popRef.current;
20
+ if (!triggerRef.current || !pop) return;
22
21
  const triggerRect = triggerRef.current.getBoundingClientRect();
23
- const popW = popRef.current.offsetWidth;
24
- const popH = popRef.current.offsetHeight;
22
+ const popW = pop.offsetWidth;
23
+ const popH = pop.offsetHeight;
25
24
  const viewportHeight = window.innerHeight;
26
25
  const viewportWidth = window.innerWidth;
27
26
  if (popH === 0 || popW === 0) return;
28
- let direction = "bottom";
27
+ let next = "bottom";
29
28
  let top;
30
29
  let left;
31
30
  if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
32
- direction = "top";
31
+ next = "top";
33
32
  top = triggerRect.top - popH;
34
33
  } else {
35
34
  top = triggerRect.bottom;
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
39
38
  left = triggerRect.right - popW;
40
39
  }
41
40
  if (left < 8) left = 8;
42
- setPosition({ position: { top, left }, direction });
41
+ pop.style.top = `${top}px`;
42
+ pop.style.left = `${left}px`;
43
+ if (next !== directionRef.current) {
44
+ directionRef.current = next;
45
+ setDirection(next);
46
+ }
43
47
  }, [triggerRef, popRef]);
44
48
  React.useLayoutEffect(() => {
45
49
  if (!enabled) return;
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
70
74
  window.removeEventListener("scroll", onScrollOrResize, true);
71
75
  };
72
76
  }, [calculatePosition, enabled]);
73
- return position;
77
+ return { direction };
74
78
  };
75
79
  var useAutoPosition_default = useAutoPosition;
76
80
 
@@ -1377,7 +1381,7 @@ var SelectRoot = (props) => {
1377
1381
  {
1378
1382
  className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
1379
1383
  ref: contentRef,
1380
- style: { ...position.position, width: triggerRef.current?.offsetWidth },
1384
+ style: { width: triggerRef.current?.offsetWidth },
1381
1385
  role: "listbox",
1382
1386
  children: [
1383
1387
  searchable && /* @__PURE__ */ jsx297("div", { className: "select-search", children: /* @__PURE__ */ jsx297(
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
2
+ import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
3
3
 
4
4
  type SpinnerSize = "sm" | "md" | "lg";
5
5
  /** Spinner 의 상태 색 */
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
2
+ import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
3
3
 
4
4
  type SpinnerSize = "sm" | "md" | "lg";
5
5
  /** Spinner 의 상태 색 */
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { S as StatusTypeInput } from '../../status-njWqQWFV.cjs';
3
+ import { a as StatusTypeInput } from '../../status-C70BBv2S.cjs';
4
4
 
5
5
  type StatSize = "sm" | "md" | "lg";
6
6
  type TrendDirection = "up" | "down" | "flat";
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { S as StatusTypeInput } from '../../status-njWqQWFV.js';
3
+ import { a as StatusTypeInput } from '../../status-C70BBv2S.js';
4
4
 
5
5
  type StatSize = "sm" | "md" | "lg";
6
6
  type TrendDirection = "up" | "down" | "flat";
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
2
+ import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
3
3
 
4
4
  interface StepItem {
5
5
  title: string;
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
2
+ import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
3
3
 
4
4
  interface StepItem {
5
5
  title: string;
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
4
- import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
3
+ import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
4
+ import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
5
5
 
6
6
  type SwitchSize = "sm" | "md" | "lg";
7
7
  /** Switch 의 상태 색 */
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
4
- import { V as Validation } from '../../validation-Dqo1zqhT.js';
3
+ import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
4
+ import { V as Validation } from '../../validation-BYpAI6Ct.js';
5
5
 
6
6
  type SwitchSize = "sm" | "md" | "lg";
7
7
  /** Switch 의 상태 색 */
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
3
- import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
3
+ import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
4
4
 
5
5
  type TextAreaSize = "sm" | "md" | "lg";
6
6
  type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
3
- import { V as Validation } from '../../validation-Dqo1zqhT.js';
3
+ import { V as Validation } from '../../validation-BYpAI6Ct.js';
4
4
 
5
5
  type TextAreaSize = "sm" | "md" | "lg";
6
6
  type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
@@ -49,23 +49,22 @@ var Portal_default = Portal;
49
49
  // src/tokens/hooks/useAutoPosition.ts
50
50
  var import_react = __toESM(require("react"), 1);
51
51
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
52
- const [position, setPosition] = import_react.default.useState({
53
- position: {},
54
- direction: "bottom"
55
- });
52
+ const [direction, setDirection] = import_react.default.useState("bottom");
53
+ const directionRef = import_react.default.useRef("bottom");
56
54
  const calculatePosition = import_react.default.useCallback(() => {
57
- if (!triggerRef.current || !popRef.current) return;
55
+ const pop = popRef.current;
56
+ if (!triggerRef.current || !pop) return;
58
57
  const triggerRect = triggerRef.current.getBoundingClientRect();
59
- const popW = popRef.current.offsetWidth;
60
- const popH = popRef.current.offsetHeight;
58
+ const popW = pop.offsetWidth;
59
+ const popH = pop.offsetHeight;
61
60
  const viewportHeight = window.innerHeight;
62
61
  const viewportWidth = window.innerWidth;
63
62
  if (popH === 0 || popW === 0) return;
64
- let direction = "bottom";
63
+ let next = "bottom";
65
64
  let top;
66
65
  let left;
67
66
  if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
68
- direction = "top";
67
+ next = "top";
69
68
  top = triggerRect.top - popH;
70
69
  } else {
71
70
  top = triggerRect.bottom;
@@ -75,7 +74,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
75
74
  left = triggerRect.right - popW;
76
75
  }
77
76
  if (left < 8) left = 8;
78
- setPosition({ position: { top, left }, direction });
77
+ pop.style.top = `${top}px`;
78
+ pop.style.left = `${left}px`;
79
+ if (next !== directionRef.current) {
80
+ directionRef.current = next;
81
+ setDirection(next);
82
+ }
79
83
  }, [triggerRef, popRef]);
80
84
  import_react.default.useLayoutEffect(() => {
81
85
  if (!enabled) return;
@@ -106,7 +110,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
106
110
  window.removeEventListener("scroll", onScrollOrResize, true);
107
111
  };
108
112
  }, [calculatePosition, enabled]);
109
- return position;
113
+ return { direction };
110
114
  };
111
115
  var useAutoPosition_default = useAutoPosition;
112
116
 
@@ -371,7 +375,7 @@ var TimePicker = (props) => {
371
375
  close();
372
376
  triggerRef.current?.focus({ preventScroll: true });
373
377
  });
374
- const position = useAutoPosition_default(triggerRef, contentRef, mounted);
378
+ useAutoPosition_default(triggerRef, contentRef, mounted);
375
379
  import_react4.default.useEffect(() => {
376
380
  if (disabled && isOpen) setOpen(false);
377
381
  }, [disabled, isOpen]);
@@ -418,7 +422,7 @@ var TimePicker = (props) => {
418
422
  {
419
423
  ref: contentRef,
420
424
  className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
421
- style: { ...position.position, width: triggerRef.current?.offsetWidth },
425
+ style: { width: triggerRef.current?.offsetWidth },
422
426
  role: "listbox",
423
427
  children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
424
428
  "div",
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
3
+ import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
4
4
 
5
5
  type TimePickerSize = "sm" | "md" | "lg";
6
6
  interface TimePickerProps {
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { V as Validation } from '../../validation-Dqo1zqhT.js';
3
+ import { V as Validation } from '../../validation-BYpAI6Ct.js';
4
4
 
5
5
  type TimePickerSize = "sm" | "md" | "lg";
6
6
  interface TimePickerProps {
@@ -13,23 +13,22 @@ var Portal_default = Portal;
13
13
  // src/tokens/hooks/useAutoPosition.ts
14
14
  import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
- const [position, setPosition] = React.useState({
17
- position: {},
18
- direction: "bottom"
19
- });
16
+ const [direction, setDirection] = React.useState("bottom");
17
+ const directionRef = React.useRef("bottom");
20
18
  const calculatePosition = React.useCallback(() => {
21
- if (!triggerRef.current || !popRef.current) return;
19
+ const pop = popRef.current;
20
+ if (!triggerRef.current || !pop) return;
22
21
  const triggerRect = triggerRef.current.getBoundingClientRect();
23
- const popW = popRef.current.offsetWidth;
24
- const popH = popRef.current.offsetHeight;
22
+ const popW = pop.offsetWidth;
23
+ const popH = pop.offsetHeight;
25
24
  const viewportHeight = window.innerHeight;
26
25
  const viewportWidth = window.innerWidth;
27
26
  if (popH === 0 || popW === 0) return;
28
- let direction = "bottom";
27
+ let next = "bottom";
29
28
  let top;
30
29
  let left;
31
30
  if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
32
- direction = "top";
31
+ next = "top";
33
32
  top = triggerRect.top - popH;
34
33
  } else {
35
34
  top = triggerRect.bottom;
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
39
38
  left = triggerRect.right - popW;
40
39
  }
41
40
  if (left < 8) left = 8;
42
- setPosition({ position: { top, left }, direction });
41
+ pop.style.top = `${top}px`;
42
+ pop.style.left = `${left}px`;
43
+ if (next !== directionRef.current) {
44
+ directionRef.current = next;
45
+ setDirection(next);
46
+ }
43
47
  }, [triggerRef, popRef]);
44
48
  React.useLayoutEffect(() => {
45
49
  if (!enabled) return;
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
70
74
  window.removeEventListener("scroll", onScrollOrResize, true);
71
75
  };
72
76
  }, [calculatePosition, enabled]);
73
- return position;
77
+ return { direction };
74
78
  };
75
79
  var useAutoPosition_default = useAutoPosition;
76
80
 
@@ -335,7 +339,7 @@ var TimePicker = (props) => {
335
339
  close();
336
340
  triggerRef.current?.focus({ preventScroll: true });
337
341
  });
338
- const position = useAutoPosition_default(triggerRef, contentRef, mounted);
342
+ useAutoPosition_default(triggerRef, contentRef, mounted);
339
343
  React4.useEffect(() => {
340
344
  if (disabled && isOpen) setOpen(false);
341
345
  }, [disabled, isOpen]);
@@ -382,7 +386,7 @@ var TimePicker = (props) => {
382
386
  {
383
387
  ref: contentRef,
384
388
  className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
385
- style: { ...position.position, width: triggerRef.current?.offsetWidth },
389
+ style: { width: triggerRef.current?.offsetWidth },
386
390
  role: "listbox",
387
391
  children: options.map((t) => /* @__PURE__ */ jsx5(
388
392
  "div",
@@ -2991,12 +2991,12 @@ var ChatInput_default = ChatInput;
2991
2991
  // src/tokens/colors.ts
2992
2992
  var import_tokens_core = require("@x-plat/tokens-core");
2993
2993
 
2994
- // src/tokens/index.ts
2995
- var import_tokens_core2 = require("@x-plat/tokens-core");
2996
-
2997
2994
  // src/tokens/interface/status.ts
2998
2995
  var normalizeStatus = (value) => value === "brand" ? "primary" : value;
2999
2996
 
2997
+ // src/tokens/index.ts
2998
+ var import_tokens_core2 = require("@x-plat/tokens-core");
2999
+
3000
3000
  // src/components/CheckBox/CheckBox.tsx
3001
3001
  var import_jsx_runtime309 = require("react/jsx-runtime");
3002
3002
  var CheckBox = (props) => {
@@ -3976,23 +3976,22 @@ var Portal_default = Portal;
3976
3976
  // src/tokens/hooks/useAutoPosition.ts
3977
3977
  var import_react19 = __toESM(require("react"), 1);
3978
3978
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3979
- const [position, setPosition] = import_react19.default.useState({
3980
- position: {},
3981
- direction: "bottom"
3982
- });
3979
+ const [direction, setDirection] = import_react19.default.useState("bottom");
3980
+ const directionRef = import_react19.default.useRef("bottom");
3983
3981
  const calculatePosition = import_react19.default.useCallback(() => {
3984
- if (!triggerRef.current || !popRef.current) return;
3982
+ const pop = popRef.current;
3983
+ if (!triggerRef.current || !pop) return;
3985
3984
  const triggerRect = triggerRef.current.getBoundingClientRect();
3986
- const popW = popRef.current.offsetWidth;
3987
- const popH = popRef.current.offsetHeight;
3985
+ const popW = pop.offsetWidth;
3986
+ const popH = pop.offsetHeight;
3988
3987
  const viewportHeight = window.innerHeight;
3989
3988
  const viewportWidth = window.innerWidth;
3990
3989
  if (popH === 0 || popW === 0) return;
3991
- let direction = "bottom";
3990
+ let next = "bottom";
3992
3991
  let top;
3993
3992
  let left;
3994
3993
  if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
3995
- direction = "top";
3994
+ next = "top";
3996
3995
  top = triggerRect.top - popH;
3997
3996
  } else {
3998
3997
  top = triggerRect.bottom;
@@ -4002,7 +4001,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4002
4001
  left = triggerRect.right - popW;
4003
4002
  }
4004
4003
  if (left < 8) left = 8;
4005
- setPosition({ position: { top, left }, direction });
4004
+ pop.style.top = `${top}px`;
4005
+ pop.style.left = `${left}px`;
4006
+ if (next !== directionRef.current) {
4007
+ directionRef.current = next;
4008
+ setDirection(next);
4009
+ }
4006
4010
  }, [triggerRef, popRef]);
4007
4011
  import_react19.default.useLayoutEffect(() => {
4008
4012
  if (!enabled) return;
@@ -4033,7 +4037,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4033
4037
  window.removeEventListener("scroll", onScrollOrResize, true);
4034
4038
  };
4035
4039
  }, [calculatePosition, enabled]);
4036
- return position;
4040
+ return { direction };
4037
4041
  };
4038
4042
  var useAutoPosition_default = useAutoPosition;
4039
4043
 
@@ -4071,7 +4075,7 @@ var Dropdown = (props) => {
4071
4075
  const [visible, setVisible] = import_react21.default.useState(false);
4072
4076
  const triggerRef = import_react21.default.useRef(null);
4073
4077
  const menuRef = import_react21.default.useRef(null);
4074
- const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
4078
+ const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
4075
4079
  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
4076
4080
  useEscapeKey(isOpen, () => {
4077
4081
  setIsOpen(false);
@@ -4107,7 +4111,6 @@ var Dropdown = (props) => {
4107
4111
  {
4108
4112
  ref: menuRef,
4109
4113
  className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
4110
- style: { top: position.top, left: position.left },
4111
4114
  role: "menu",
4112
4115
  children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
4113
4116
  "button",
@@ -6041,9 +6044,6 @@ var PopOver = (props) => {
6041
6044
  eventTrigger && "visible"
6042
6045
  ),
6043
6046
  ref: popRef,
6044
- style: {
6045
- ...position.position
6046
- },
6047
6047
  children: PopOverEl
6048
6048
  }
6049
6049
  ) })
@@ -6386,7 +6386,7 @@ var SelectRoot = (props) => {
6386
6386
  {
6387
6387
  className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
6388
6388
  ref: contentRef,
6389
- style: { ...position.position, width: triggerRef.current?.offsetWidth },
6389
+ style: { width: triggerRef.current?.offsetWidth },
6390
6390
  role: "listbox",
6391
6391
  children: [
6392
6392
  searchable && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "select-search", children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
@@ -7231,7 +7231,7 @@ var TimePicker = (props) => {
7231
7231
  close();
7232
7232
  triggerRef.current?.focus({ preventScroll: true });
7233
7233
  });
7234
- const position = useAutoPosition_default(triggerRef, contentRef, mounted);
7234
+ useAutoPosition_default(triggerRef, contentRef, mounted);
7235
7235
  import_react40.default.useEffect(() => {
7236
7236
  if (disabled && isOpen) setOpen(false);
7237
7237
  }, [disabled, isOpen]);
@@ -7278,7 +7278,7 @@ var TimePicker = (props) => {
7278
7278
  {
7279
7279
  ref: contentRef,
7280
7280
  className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
7281
- style: { ...position.position, width: triggerRef.current?.offsetWidth },
7281
+ style: { width: triggerRef.current?.offsetWidth },
7282
7282
  role: "listbox",
7283
7283
  children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
7284
7284
  "div",
@@ -49,6 +49,6 @@ export { Tooltip } from './Tooltip/index.cjs';
49
49
  export { Video, VideoProps } from './Video/index.cjs';
50
50
  import 'react';
51
51
  import '../attributes-DJIWir_0.cjs';
52
- import '../validation-Dqo1zqhT.cjs';
52
+ import '../validation-BYpAI6Ct.cjs';
53
53
  import 'react/jsx-runtime';
54
- import '../status-njWqQWFV.cjs';
54
+ import '../status-C70BBv2S.cjs';
@@ -49,6 +49,6 @@ export { Tooltip } from './Tooltip/index.js';
49
49
  export { Video, VideoProps } from './Video/index.js';
50
50
  import 'react';
51
51
  import '../attributes-DJIWir_0.js';
52
- import '../validation-Dqo1zqhT.js';
52
+ import '../validation-BYpAI6Ct.js';
53
53
  import 'react/jsx-runtime';
54
- import '../status-njWqQWFV.js';
54
+ import '../status-C70BBv2S.js';
@@ -2889,12 +2889,12 @@ var ChatInput_default = ChatInput;
2889
2889
  // src/tokens/colors.ts
2890
2890
  import { semantic } from "@x-plat/tokens-core";
2891
2891
 
2892
- // src/tokens/index.ts
2893
- import { cssVar } from "@x-plat/tokens-core";
2894
-
2895
2892
  // src/tokens/interface/status.ts
2896
2893
  var normalizeStatus = (value) => value === "brand" ? "primary" : value;
2897
2894
 
2895
+ // src/tokens/index.ts
2896
+ import { cssVar } from "@x-plat/tokens-core";
2897
+
2898
2898
  // src/components/CheckBox/CheckBox.tsx
2899
2899
  import { jsx as jsx309, jsxs as jsxs198 } from "react/jsx-runtime";
2900
2900
  var CheckBox = (props) => {
@@ -3874,23 +3874,22 @@ var Portal_default = Portal;
3874
3874
  // src/tokens/hooks/useAutoPosition.ts
3875
3875
  import React19 from "react";
3876
3876
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3877
- const [position, setPosition] = React19.useState({
3878
- position: {},
3879
- direction: "bottom"
3880
- });
3877
+ const [direction, setDirection] = React19.useState("bottom");
3878
+ const directionRef = React19.useRef("bottom");
3881
3879
  const calculatePosition = React19.useCallback(() => {
3882
- if (!triggerRef.current || !popRef.current) return;
3880
+ const pop = popRef.current;
3881
+ if (!triggerRef.current || !pop) return;
3883
3882
  const triggerRect = triggerRef.current.getBoundingClientRect();
3884
- const popW = popRef.current.offsetWidth;
3885
- const popH = popRef.current.offsetHeight;
3883
+ const popW = pop.offsetWidth;
3884
+ const popH = pop.offsetHeight;
3886
3885
  const viewportHeight = window.innerHeight;
3887
3886
  const viewportWidth = window.innerWidth;
3888
3887
  if (popH === 0 || popW === 0) return;
3889
- let direction = "bottom";
3888
+ let next = "bottom";
3890
3889
  let top;
3891
3890
  let left;
3892
3891
  if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
3893
- direction = "top";
3892
+ next = "top";
3894
3893
  top = triggerRect.top - popH;
3895
3894
  } else {
3896
3895
  top = triggerRect.bottom;
@@ -3900,7 +3899,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3900
3899
  left = triggerRect.right - popW;
3901
3900
  }
3902
3901
  if (left < 8) left = 8;
3903
- setPosition({ position: { top, left }, direction });
3902
+ pop.style.top = `${top}px`;
3903
+ pop.style.left = `${left}px`;
3904
+ if (next !== directionRef.current) {
3905
+ directionRef.current = next;
3906
+ setDirection(next);
3907
+ }
3904
3908
  }, [triggerRef, popRef]);
3905
3909
  React19.useLayoutEffect(() => {
3906
3910
  if (!enabled) return;
@@ -3931,7 +3935,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3931
3935
  window.removeEventListener("scroll", onScrollOrResize, true);
3932
3936
  };
3933
3937
  }, [calculatePosition, enabled]);
3934
- return position;
3938
+ return { direction };
3935
3939
  };
3936
3940
  var useAutoPosition_default = useAutoPosition;
3937
3941
 
@@ -3969,7 +3973,7 @@ var Dropdown = (props) => {
3969
3973
  const [visible, setVisible] = React21.useState(false);
3970
3974
  const triggerRef = React21.useRef(null);
3971
3975
  const menuRef = React21.useRef(null);
3972
- const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
3976
+ const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
3973
3977
  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
3974
3978
  useEscapeKey(isOpen, () => {
3975
3979
  setIsOpen(false);
@@ -4005,7 +4009,6 @@ var Dropdown = (props) => {
4005
4009
  {
4006
4010
  ref: menuRef,
4007
4011
  className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
4008
- style: { top: position.top, left: position.left },
4009
4012
  role: "menu",
4010
4013
  children: items.map((item) => /* @__PURE__ */ jsx322(
4011
4014
  "button",
@@ -5939,9 +5942,6 @@ var PopOver = (props) => {
5939
5942
  eventTrigger && "visible"
5940
5943
  ),
5941
5944
  ref: popRef,
5942
- style: {
5943
- ...position.position
5944
- },
5945
5945
  children: PopOverEl
5946
5946
  }
5947
5947
  ) })
@@ -6284,7 +6284,7 @@ var SelectRoot = (props) => {
6284
6284
  {
6285
6285
  className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
6286
6286
  ref: contentRef,
6287
- style: { ...position.position, width: triggerRef.current?.offsetWidth },
6287
+ style: { width: triggerRef.current?.offsetWidth },
6288
6288
  role: "listbox",
6289
6289
  children: [
6290
6290
  searchable && /* @__PURE__ */ jsx337("div", { className: "select-search", children: /* @__PURE__ */ jsx337(
@@ -7129,7 +7129,7 @@ var TimePicker = (props) => {
7129
7129
  close();
7130
7130
  triggerRef.current?.focus({ preventScroll: true });
7131
7131
  });
7132
- const position = useAutoPosition_default(triggerRef, contentRef, mounted);
7132
+ useAutoPosition_default(triggerRef, contentRef, mounted);
7133
7133
  React40.useEffect(() => {
7134
7134
  if (disabled && isOpen) setOpen(false);
7135
7135
  }, [disabled, isOpen]);
@@ -7176,7 +7176,7 @@ var TimePicker = (props) => {
7176
7176
  {
7177
7177
  ref: contentRef,
7178
7178
  className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
7179
- style: { ...position.position, width: triggerRef.current?.offsetWidth },
7179
+ style: { width: triggerRef.current?.offsetWidth },
7180
7180
  role: "listbox",
7181
7181
  children: options.map((t) => /* @__PURE__ */ jsx351(
7182
7182
  "div",