@x-plat/design-system 0.7.1 → 0.8.0

package/dist/components/index.js

@@ -2207,9 +2207,16 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
+var formatTick = (value, maxVal) => {
+  const step = maxVal / 4;
+  if (!Number.isFinite(step) || step <= 0) return "0";
+  const decimals = step >= 1 ? 0 : Math.min(4, Math.ceil(-Math.log10(step)));
+  const fixed = value.toFixed(decimals);
+  return decimals === 0 ? Number(fixed).toLocaleString("en-US") : fixed;
+};
 var GridLines = React6.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx305(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
-  const val = Math.round(maxVal * ratio);
+  const val = formatTick(maxVal * ratio, maxVal);
   return /* @__PURE__ */ jsxs195("g", { children: [
     /* @__PURE__ */ jsx305("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
     /* @__PURE__ */ jsx305("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
@@ -4807,8 +4814,46 @@ var ImageSelector = (props) => {
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
+// src/components/Link/Link.tsx
+import { jsx as jsx329 } from "react/jsx-runtime";
+var Link = (props) => {
+  const { children, href, underline = "always", target, rel, ...rest } = props;
+  return /* @__PURE__ */ jsx329(
+    "a",
+    {
+      className: clsx_default("lib-xplat-link", `underline-${underline}`),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+Link.displayName = "Link";
+var Link_default = Link;
+
+// src/components/LinkButton/LinkButton.tsx
+import { jsx as jsx330 } from "react/jsx-runtime";
+var LinkButton = (props) => {
+  const { children, href, type = "primary", size = "md", target, rel, ...rest } = props;
+  return /* @__PURE__ */ jsx330(
+    "a",
+    {
+      className: clsx_default("lib-xplat-button", type, size),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+LinkButton.displayName = "LinkButton";
+var LinkButton_default = LinkButton;
+
 // src/components/NotificationBadge/NotificationBadge.tsx
-import { jsx as jsx329, jsxs as jsxs211 } from "react/jsx-runtime";
+import { jsx as jsx331, jsxs as jsxs211 } from "react/jsx-runtime";
 var NotificationBadge = (props) => {
   const {
     children,
@@ -4822,14 +4867,14 @@ var NotificationBadge = (props) => {
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ jsxs211("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ jsx329("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ jsx331("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";
 var NotificationBadge_default = NotificationBadge;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx330, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx332, jsxs as jsxs212 } from "react/jsx-runtime";
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -4873,18 +4918,18 @@ var Pagination = (props) => {
     }
   };
   return /* @__PURE__ */ jsxs212("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ jsx330(
+    /* @__PURE__ */ jsx332(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx330(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ jsx332(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ jsx330("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx330(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx332("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx332(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -4895,14 +4940,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ jsx330(
+    /* @__PURE__ */ jsx332(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx330(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ jsx332(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -4912,7 +4957,7 @@ var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
 import React27 from "react";
-import { jsx as jsx331, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx333, jsxs as jsxs213 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
   const popRef = React27.useRef(null);
@@ -4944,7 +4989,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx331(Portal_default, { children: /* @__PURE__ */ jsx331(
+        localOpen && /* @__PURE__ */ jsx333(Portal_default, { children: /* @__PURE__ */ jsx333(
           "div",
           {
             className: clsx_default(
@@ -4967,7 +5012,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-import { jsx as jsx332, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx334, jsxs as jsxs214 } from "react/jsx-runtime";
 var Progress = (props) => {
   const {
     value,
@@ -4978,7 +5023,7 @@ var Progress = (props) => {
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
   return /* @__PURE__ */ jsxs214("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ jsx332(
+    /* @__PURE__ */ jsx334(
       "div",
       {
         className: "track",
@@ -4986,7 +5031,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx332(
+        children: /* @__PURE__ */ jsx334(
           "div",
           {
             className: "bar",
@@ -5015,7 +5060,7 @@ var useRadioGroupContext = () => {
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx333, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx335, jsxs as jsxs215 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
@@ -5045,18 +5090,18 @@ var Radio = (props) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx333("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ jsx333(
+        /* @__PURE__ */ jsx335("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ jsx335(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ jsx333("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ jsx335("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ jsx333("span", { children: label })
+        label && /* @__PURE__ */ jsx335("span", { children: label })
       ]
     }
   );
@@ -5065,10 +5110,10 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment as Fragment4, jsx as jsx334 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx336 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx334(Fragment4, { children: /* @__PURE__ */ jsx334(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx336(Fragment4, { children: /* @__PURE__ */ jsx336(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
@@ -5083,7 +5128,7 @@ var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
 import React30 from "react";
-import { jsx as jsx335 } from "react/jsx-runtime";
+import { jsx as jsx337 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
   const ctx = React30.useContext(context_default);
@@ -5096,7 +5141,7 @@ var SelectItem = (props) => {
     onClick?.();
   };
   const isSelected = value !== void 0 ? ctx?.selectedValue === value : ctx?.selectedLabel === children;
-  return /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsx337(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled", isSelected && "is-selected"),
@@ -5117,7 +5162,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx336, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx338, jsxs as jsxs216 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -5197,7 +5242,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx336(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
+  return /* @__PURE__ */ jsx338(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
     "div",
     {
       className: clsx_default(
@@ -5232,7 +5277,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ jsx336(
+              /* @__PURE__ */ jsx338(
                 "span",
                 {
                   className: clsx_default(
@@ -5242,25 +5287,25 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ jsx336(
+              /* @__PURE__ */ jsx338(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx336(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ jsx338(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx336(Portal_default, { children: /* @__PURE__ */ jsx336(
+        mounted && /* @__PURE__ */ jsx338(Portal_default, { children: /* @__PURE__ */ jsx338(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
-            children: /* @__PURE__ */ jsx336(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: /* @__PURE__ */ jsx338(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
         ) })
       ]
@@ -5274,7 +5319,7 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx337 } from "react/jsx-runtime";
+import { jsx as jsx339 } from "react/jsx-runtime";
 var SIZE_MAP = {
   xs: "var(--spacing-space-1)",
   sm: "var(--spacing-space-2)",
@@ -5290,7 +5335,7 @@ var Skeleton = (props) => {
     ...width != null && { width: SIZE_MAP[width] },
     ...height != null && { height: SIZE_MAP[height] }
   };
-  return /* @__PURE__ */ jsx337(
+  return /* @__PURE__ */ jsx339(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -5303,20 +5348,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx338, jsxs as jsxs217 } from "react/jsx-runtime";
+import { jsx as jsx340, jsxs as jsxs217 } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx338(
+  return /* @__PURE__ */ jsx340(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ jsxs217("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx338(
+        /* @__PURE__ */ jsx340(
           "circle",
           {
             className: "track",
@@ -5326,7 +5371,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ jsx338(
+        /* @__PURE__ */ jsx340(
           "circle",
           {
             className: "indicator",
@@ -5345,20 +5390,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-import { jsx as jsx339, jsxs as jsxs218 } from "react/jsx-runtime";
+import { jsx as jsx341, jsxs as jsxs218 } from "react/jsx-runtime";
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx339("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx341("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ jsxs218("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ jsx339("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx339(CheckIcon_default, {}) : /* @__PURE__ */ jsx339("span", { children: index + 1 }) }),
+      /* @__PURE__ */ jsx341("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx341(CheckIcon_default, {}) : /* @__PURE__ */ jsx341("span", { children: index + 1 }) }),
       /* @__PURE__ */ jsxs218("div", { className: "step-content", children: [
-        /* @__PURE__ */ jsx339("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ jsx339("span", { className: "step-description", children: item.description })
+        /* @__PURE__ */ jsx341("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ jsx341("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -5368,7 +5413,7 @@ var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
 import React32 from "react";
-import { jsx as jsx340, jsxs as jsxs219 } from "react/jsx-runtime";
+import { jsx as jsx342, jsxs as jsxs219 } from "react/jsx-runtime";
 var Swiper = (props) => {
   const {
     auto = false,
@@ -5597,7 +5642,7 @@ var Swiper = (props) => {
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
   const slideElements = React32.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx340(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx342(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -5617,14 +5662,14 @@ var Swiper = (props) => {
     totalSteps - 1
   );
   return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ jsx340(
+    /* @__PURE__ */ jsx342(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
         onDragStart: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsx340(
+        children: /* @__PURE__ */ jsx342(
           "div",
           {
             className: clsx_default(
@@ -5642,7 +5687,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ jsx340("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx340("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx340(
+    showProgress && canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx342(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -5652,7 +5697,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ jsx340("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx340(
+    canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx342(
       "button",
       {
         className: clsx_default(
@@ -5671,7 +5716,7 @@ var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
 import React33 from "react";
-import { jsx as jsx341 } from "react/jsx-runtime";
+import { jsx as jsx343 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -5698,7 +5743,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx343(
     "div",
     {
       className: clsx_default(
@@ -5711,7 +5756,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx341("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx343("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -5729,7 +5774,7 @@ var useTableContext = () => {
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx342 } from "react/jsx-runtime";
+import { jsx as jsx344 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     children,
@@ -5739,7 +5784,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx342("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx342(
+  return /* @__PURE__ */ jsx344("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx344(
     TableContext_default.Provider,
     {
       value: {
@@ -5748,7 +5793,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx342("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx344("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -5756,10 +5801,10 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx343 } from "react/jsx-runtime";
+import { jsx as jsx345 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx343("tbody", { children });
+  return /* @__PURE__ */ jsx345("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
@@ -5789,7 +5834,7 @@ var useTableRowContext = () => {
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-import { jsx as jsx344 } from "react/jsx-runtime";
+import { jsx as jsx346 } from "react/jsx-runtime";
 var TableCell = React37.memo((props) => {
   const {
     children,
@@ -5834,7 +5879,7 @@ var TableCell = React37.memo((props) => {
   const CellTag = isHeaderCell ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ jsx344(
+  return /* @__PURE__ */ jsx346(
     CellTag,
     {
       ref: cellRef,
@@ -5861,20 +5906,20 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx345 } from "react/jsx-runtime";
+import { jsx as jsx347 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx345(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx345("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ jsx347(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx347("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
 import React38 from "react";
-import { jsx as jsx346 } from "react/jsx-runtime";
+import { jsx as jsx348 } from "react/jsx-runtime";
 var TableRow = React38.memo((props) => {
   const {
     children,
@@ -5891,7 +5936,7 @@ var TableRow = React38.memo((props) => {
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ jsx346(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx346(
+  return /* @__PURE__ */ jsx348(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx348(
     "tr",
     {
       className: clsx_default(
@@ -5915,7 +5960,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx347, jsxs as jsxs220 } from "react/jsx-runtime";
+import { jsx as jsx349, jsxs as jsxs220 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
@@ -5936,8 +5981,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ jsx347("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ jsx347("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx347(XIcon_default, {}) })
+        /* @__PURE__ */ jsx349("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ jsx349("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx349(XIcon_default, {}) })
       ]
     }
   );
@@ -5947,7 +5992,7 @@ var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
 import React39 from "react";
-import { jsx as jsx348 } from "react/jsx-runtime";
+import { jsx as jsx350 } from "react/jsx-runtime";
 var TextArea = React39.forwardRef(
   (props, ref) => {
     const {
@@ -5958,7 +6003,7 @@ var TextArea = React39.forwardRef(
       disabled,
       ...textareaProps
     } = props;
-    return /* @__PURE__ */ jsx348("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx348(
+    return /* @__PURE__ */ jsx350("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx350(
       "textarea",
       {
         ...textareaProps,
@@ -5977,7 +6022,7 @@ var TextArea_default = TextArea;
 // src/components/Toast/Toast.tsx
 import React40 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx349, jsxs as jsxs221 } from "react/jsx-runtime";
+import { jsx as jsx351, jsxs as jsxs221 } from "react/jsx-runtime";
 var ToastContext = React40.createContext(null);
 var useToast = () => {
   const ctx = React40.useContext(ToastContext);
@@ -5993,7 +6038,7 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ jsx349(
+  return /* @__PURE__ */ jsx351(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -6008,8 +6053,8 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx349("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ jsx349("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ jsx351("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx351("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -6050,7 +6095,7 @@ var ToastProvider = ({
   return /* @__PURE__ */ jsxs221(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && createPortal3(
-      /* @__PURE__ */ jsx349("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx349(
+      /* @__PURE__ */ jsx351("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx351(
         ToastItemComponent,
         {
           item: t,
@@ -6067,15 +6112,17 @@ ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
 import React41 from "react";
-import { Fragment as Fragment5, jsx as jsx350, jsxs as jsxs222 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx352, jsxs as jsxs222 } from "react/jsx-runtime";
 var OFFSET = 12;
+var GAP = 8;
 var SHOW_DELAY = 300;
 var Tooltip = (props) => {
   const {
-    type = "dark",
+    children,
     title,
     description,
-    children,
+    type = "dark",
+    follow = false,
     disabled = false
   } = props;
   const triggerRef = React41.useRef(null);
@@ -6083,50 +6130,92 @@ var Tooltip = (props) => {
   const [visible, setVisible] = React41.useState(false);
   const [pos, setPos] = React41.useState({ left: 0, top: 0 });
   const delayTimer = React41.useRef(0);
-  const calculatePos = React41.useCallback((clientX, clientY) => {
+  const rafRef = React41.useRef(0);
+  const cursor = React41.useRef(null);
+  const clamp = React41.useCallback((left, top, w, h) => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    return {
+      left: Math.min(Math.max(GAP, left), Math.max(GAP, vw - w - GAP)),
+      top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
+    };
+  }, []);
+  const placeAtCursor = React41.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
     const h = el.offsetHeight;
-    const vw = window.innerWidth;
-    let left = clientX + OFFSET;
-    let top = clientY - h - OFFSET;
-    if (left + w > vw - 8) left = clientX - w - OFFSET;
-    if (top < 8) top = clientY + OFFSET;
-    if (left < 8) left = 8;
-    setPos({ left, top });
-  }, []);
-  const handleMouseEnter = React41.useCallback(() => {
+    let left = x + OFFSET;
+    let top = y - h - OFFSET;
+    if (left + w > window.innerWidth - GAP) left = x - w - OFFSET;
+    if (top < GAP) top = y + OFFSET;
+    setPos(clamp(left, top, w, h));
+  }, [clamp]);
+  const placeAtTrigger = React41.useCallback(() => {
+    const el = tooltipRef.current;
+    const trigger = triggerRef.current;
+    if (!el || !trigger) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const rect = trigger.getBoundingClientRect();
+    let top = rect.top - h - GAP;
+    if (top < GAP) top = rect.bottom + GAP;
+    const left = rect.left + rect.width / 2 - w / 2;
+    setPos(clamp(left, top, w, h));
+  }, [clamp]);
+  const reposition = React41.useCallback(() => {
+    if (follow && cursor.current) {
+      placeAtCursor(cursor.current.x, cursor.current.y);
+    } else {
+      placeAtTrigger();
+    }
+  }, [follow, placeAtCursor, placeAtTrigger]);
+  const handleMouseEnter = React41.useCallback((e) => {
     if (disabled) return;
-    delayTimer.current = window.setTimeout(() => {
-      setVisible(true);
-    }, SHOW_DELAY);
+    cursor.current = { x: e.clientX, y: e.clientY };
+    delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
   const handleMouseMove = React41.useCallback((e) => {
-    if (!visible) return;
-    calculatePos(e.clientX, e.clientY);
-  }, [visible, calculatePos]);
-  const handleMouseLeave = React41.useCallback(() => {
-    window.clearTimeout(delayTimer.current);
-    setVisible(false);
-  }, []);
-  const handleClick = React41.useCallback(() => {
+    cursor.current = { x: e.clientX, y: e.clientY };
+    if (!visible || !follow) return;
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
+    });
+  }, [visible, follow, placeAtCursor]);
+  const close = React41.useCallback(() => {
     window.clearTimeout(delayTimer.current);
+    cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
+  const handleMouseLeave = React41.useCallback(() => {
+    cursor.current = null;
+    close();
+  }, [close]);
   const handleFocus = React41.useCallback(() => {
     if (disabled) return;
+    cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  const handleBlur = React41.useCallback(() => {
-    setVisible(false);
-  }, []);
   React41.useLayoutEffect(() => {
-    if (!visible || !triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    calculatePos(rect.right, rect.top);
-  }, [visible, calculatePos]);
-  if (!title && !description) return /* @__PURE__ */ jsx350(Fragment5, { children });
+    if (!visible) return;
+    reposition();
+  }, [visible, reposition]);
+  React41.useEffect(() => {
+    if (!visible || follow) return;
+    const onChange = () => placeAtTrigger();
+    window.addEventListener("scroll", onChange, true);
+    window.addEventListener("resize", onChange);
+    return () => {
+      window.removeEventListener("scroll", onChange, true);
+      window.removeEventListener("resize", onChange);
+    };
+  }, [visible, follow, placeAtTrigger]);
+  React41.useEffect(() => () => {
+    window.clearTimeout(delayTimer.current);
+    cancelAnimationFrame(rafRef.current);
+  }, []);
+  if (!title && !description) return /* @__PURE__ */ jsx352(Fragment5, { children });
   return /* @__PURE__ */ jsxs222(
     "div",
     {
@@ -6135,20 +6224,21 @@ var Tooltip = (props) => {
       onMouseEnter: handleMouseEnter,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      onClick: handleClick,
+      onClick: close,
       onFocus: handleFocus,
-      onBlur: handleBlur,
+      onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ jsx350(Portal_default, { children: /* @__PURE__ */ jsxs222(
+        visible && /* @__PURE__ */ jsx352(Portal_default, { children: /* @__PURE__ */ jsxs222(
           "div",
           {
             ref: tooltipRef,
+            role: "tooltip",
             className: clsx_default("lib-xplat-tooltip", type),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ jsx350("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ jsx350("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ jsx352("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx352("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })
@@ -6161,10 +6251,10 @@ var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
 import React42 from "react";
-import { jsx as jsx351, jsxs as jsxs223 } from "react/jsx-runtime";
+import { jsx as jsx353, jsxs as jsxs223 } from "react/jsx-runtime";
 var PipIcon = () => /* @__PURE__ */ jsxs223("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx351("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ jsx351("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+  /* @__PURE__ */ jsx353("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx353("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
 ] });
 var formatTime = (sec) => {
   if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -6345,7 +6435,7 @@ var Video = React42.forwardRef((props, ref) => {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ jsx351(
+        /* @__PURE__ */ jsx353(
           "video",
           {
             ref: setRefs,
@@ -6366,7 +6456,7 @@ var Video = React42.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx351(
+        showCenterPlay && /* @__PURE__ */ jsx353(
           "button",
           {
             type: "button",
@@ -6378,11 +6468,11 @@ var Video = React42.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx351("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx351(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ jsx353("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx353(PlayCircleIcon_default, {}) })
           }
         ),
         showControls && /* @__PURE__ */ jsxs223("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx351(
+          /* @__PURE__ */ jsx353(
             "input",
             {
               type: "range",
@@ -6400,28 +6490,28 @@ var Video = React42.forwardRef((props, ref) => {
             }
           ),
           /* @__PURE__ */ jsxs223("div", { className: "controls-row", children: [
-            /* @__PURE__ */ jsx351(
+            /* @__PURE__ */ jsx353(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ jsx351(PauseIcon_default, {}) : /* @__PURE__ */ jsx351(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ jsx353(PauseIcon_default, {}) : /* @__PURE__ */ jsx353(PlayIcon_default, {})
               }
             ),
             /* @__PURE__ */ jsxs223("div", { className: "volume-group", children: [
-              /* @__PURE__ */ jsx351(
+              /* @__PURE__ */ jsx353(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ jsx351(VolumeGlyph, {})
+                  children: /* @__PURE__ */ jsx353(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ jsx351(
+              /* @__PURE__ */ jsx353(
                 "input",
                 {
                   type: "range",
@@ -6441,7 +6531,7 @@ var Video = React42.forwardRef((props, ref) => {
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ jsx351("div", { className: "controls-spacer" }),
+            /* @__PURE__ */ jsx353("div", { className: "controls-spacer" }),
             playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs223("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
               /* @__PURE__ */ jsxs223(
                 "button",
@@ -6457,7 +6547,7 @@ var Video = React42.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ jsx351("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx351("li", { children: /* @__PURE__ */ jsxs223(
+              rateMenuOpen && /* @__PURE__ */ jsx353("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx353("li", { children: /* @__PURE__ */ jsxs223(
                 "button",
                 {
                   type: "button",
@@ -6471,7 +6561,7 @@ var Video = React42.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx351(
+            showCaptions && /* @__PURE__ */ jsx353(
               "button",
               {
                 type: "button",
@@ -6479,37 +6569,37 @@ var Video = React42.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ jsx351(TypeIcon_default, {})
+                children: /* @__PURE__ */ jsx353(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ jsx351(
+            showPip && pipSupported && /* @__PURE__ */ jsx353(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ jsx351(PipIcon, {})
+                children: /* @__PURE__ */ jsx353(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ jsx351(
+            showDownload && /* @__PURE__ */ jsx353(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ jsx351(DownloadIcon_default, {})
+                children: /* @__PURE__ */ jsx353(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsx351(
+            /* @__PURE__ */ jsx353(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ jsx351(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx351(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ jsx353(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx353(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -6547,6 +6637,8 @@ export {
   ImageSelector_default as ImageSelector,
   Input_default as Input,
   InputDatePicker_default as InputDatePicker,
+  Link_default as Link,
+  LinkButton_default as LinkButton,
   Modal_default as Modal,
   NotificationBadge_default as NotificationBadge,
   Pagination_default as Pagination,