@x-plat/design-system 0.5.8 → 0.5.9

package/dist/components/index.cjs

@@ -34,10 +34,10 @@ __export(components_exports, {
   Alert: () => Alert_default,
   Avatar: () => Avatar_default,
   Badge: () => Badge_default,
+  Box: () => Box_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
   Calendar: () => Calendar_default,
-  Card: () => Card_default,
   CardTab: () => CardTab_default,
   Chart: () => Chart_default,
   CheckBox: () => CheckBox_default,
@@ -2021,16 +2021,21 @@ var Calendar = (props) => {
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
-// src/components/Card/Card.tsx
+// src/components/Box/Box.tsx
 var import_jsx_runtime302 = require("react/jsx-runtime");
-var Card = ({ children, title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "lib-xplat-card", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "content", children })
+var Box = ({
+  children,
+  title,
+  variant = "outlined",
+  padding = "md"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "box-content", children })
   ] });
 };
-Card.displayName = "Card";
-var Card_default = Card;
+Box.displayName = "Box";
+var Box_default = Box;
 
 // src/components/CardTab/CardTab.tsx
 var import_react4 = __toESM(require("react"), 1);
@@ -2129,6 +2134,39 @@ var getPalette = (palettes, index, key) => {
   return palettes[(index + offset) % palettes.length];
 };
 var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
+var toSmoothPath = (points) => {
+  if (points.length < 2) return "";
+  const p = points;
+  let d = `M ${p[0].x} ${p[0].y}`;
+  for (let i = 0; i < p.length - 1; i++) {
+    const p0 = p[Math.max(0, i - 1)];
+    const p1 = p[i];
+    const p2 = p[i + 1];
+    const p3 = p[Math.min(p.length - 1, i + 2)];
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+  }
+  return d;
+};
+var useChartSize = (ref) => {
+  const [size, setSize] = import_react5.default.useState({ width: 0, height: 0 });
+  import_react5.default.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setSize({ width: Math.floor(width), height: Math.floor(height) });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+};
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = import_react5.default.useState({
     visible: false,
@@ -2163,15 +2201,15 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLeave }) => {
+var LineChart = import_react5.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
   const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react5.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
-  const chartW = 600 - PADDING.left - PADDING.right;
-  const chartH = 300 - PADDING.top - PADDING.bottom;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
   const seriesPoints = import_react5.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
@@ -2182,18 +2220,18 @@ var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onL
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
       const y = PADDING.top + (1 - ratio) * chartH;
       const val = Math.round(maxVal * ratio);
       return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: 600 - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
         /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
       ] }, ratio);
     }),
     labels.map((label, i) => {
       const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -2228,7 +2266,73 @@ var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onL
   ] });
 });
 LineChart.displayName = "LineChart";
-var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLeave }) => {
+var CurveChart = import_react5.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react5.default.useMemo(() => {
+    const allValues = entries.flatMap(([, v]) => v);
+    return Math.max(...allValues) * 1.2 || 1;
+  }, [entries]);
+  const count = labels.length;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
+  const seriesPoints = import_react5.default.useMemo(
+    () => entries.map(
+      ([, values]) => values.map((v, i) => ({
+        x: PADDING.left + i / (count - 1 || 1) * chartW,
+        y: PADDING.top + (1 - v / maxVal) * chartH,
+        v
+      }))
+    ),
+    [entries, count, chartW, chartH, maxVal]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+      const y = PADDING.top + (1 - ratio) * chartH;
+      const val = Math.round(maxVal * ratio);
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+      ] }, ratio);
+    }),
+    labels.map((label, i) => {
+      const x = PADDING.left + i / (count - 1 || 1) * chartW;
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    }),
+    entries.map(([key], di) => {
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
+      const areaColor = palette[0];
+      const points = seriesPoints[di];
+      const gradientId = `curve-gradient-${di}`;
+      const linePath = toSmoothPath(points);
+      const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
+        points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: "4",
+            fill: color,
+            className: "chart-point",
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${p.v}`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          },
+          i
+        ))
+      ] }, di);
+    })
+  ] });
+});
+CurveChart.displayName = "CurveChart";
+var BarChart = import_react5.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
   const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react5.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2236,8 +2340,8 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
   }, [entries]);
   const count = labels.length;
   const groupCount = entries.length;
-  const chartW = 600 - PADDING.left - PADDING.right;
-  const chartH = 300 - PADDING.top - PADDING.bottom;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
   const barW = Math.min(32, groupW * 0.7 / groupCount);
   const bars = import_react5.default.useMemo(
@@ -2251,16 +2355,16 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
     ),
     [entries, maxVal, chartH, groupW, barW, groupCount]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
       const y = PADDING.top + (1 - ratio) * chartH;
       const val = Math.round(maxVal * ratio);
       return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: 600 - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
         /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
       ] }, ratio);
     }),
-    labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
+    labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2271,7 +2375,7 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
           y: b.y,
           width: b.w,
           height: b.h,
-          rx: "2",
+          rx: Math.min(4, b.w / 2),
           fill: color,
           className: "chart-bar",
           onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
@@ -2285,14 +2389,15 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
 });
 BarChart.displayName = "BarChart";
 var PieDonutChart = import_react5.default.memo(
-  ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
+  ({ data, labels, width, height, isDoughnut, onHover, onMove, onLeave }) => {
     const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
     const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
     const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
-    const cx = 150;
-    const cy = 150;
-    const r2 = 120;
-    const innerR = isDoughnut ? 60 : 0;
+    const size = Math.min(width, height);
+    const cx = size / 2;
+    const cy = size / 2;
+    const r2 = size * 0.4;
+    const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
     const sliceData = import_react5.default.useMemo(() => {
@@ -2323,8 +2428,8 @@ var PieDonutChart = import_react5.default.memo(
         angle0 = endAngle;
         return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
       });
-    }, [values, total, innerR, labels]);
-    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
+    }, [values, total, cx, cy, r2, innerR, labels]);
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
         "path",
         {
@@ -2341,22 +2446,42 @@ var PieDonutChart = import_react5.default.memo(
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
+var TooltipBubble = ({ x, y, containerWidth, children }) => {
+  const ref = import_react5.default.useRef(null);
+  const [adjustedX, setAdjustedX] = import_react5.default.useState(x);
+  import_react5.default.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const half = w / 2;
+    const margin = 8;
+    let nx = x;
+    if (x - half < margin) nx = half + margin;
+    else if (x + half > containerWidth - margin) nx = containerWidth - half - margin;
+    setAdjustedX(nx);
+  }, [x, containerWidth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+    "div",
+    {
+      ref,
+      className: "chart-tooltip",
+      style: { left: adjustedX, top: y },
+      children
+    }
+  );
+};
 var Chart = (props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { width, height } = useChartSize(containerRef);
+  const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-      "div",
-      {
-        className: "chart-tooltip",
-        style: { left: tooltip.x, top: tooltip.y },
-        children: tooltip.content
-      }
-    )
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 };
 Chart.displayName = "Chart";
@@ -2608,42 +2733,66 @@ var PasswordInput = import_react8.default.forwardRef(
 PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
-// src/tokens/hooks/useClickOutside.ts
+// src/components/Modal/Modal.tsx
 var import_react9 = __toESM(require("react"), 1);
-var useClickOutside = (refs, handler, enabled = true) => {
+var import_react_dom = require("react-dom");
+var import_jsx_runtime311 = require("react/jsx-runtime");
+var ANIMATION_DURATION_MS = 200;
+var Modal = (props) => {
+  const { isOpen, onClose, children } = props;
+  const [mounted, setMounted] = import_react9.default.useState(false);
+  const [visible, setVisible] = import_react9.default.useState(false);
   import_react9.default.useEffect(() => {
-    if (!enabled) return;
-    const refArray = Array.isArray(refs) ? refs : [refs];
-    const listener = (event) => {
-      const target = event.target;
-      const isInside = refArray.some(
-        (ref) => ref.current && ref.current.contains(target)
-      );
-      if (!isInside) {
-        handler();
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  if (typeof document === "undefined") return null;
+  if (!mounted) return null;
+  const stateClass = visible ? "enter" : "exit";
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+      "div",
+      {
+        className: clsx_default("lib-xplat-modal", "dim", stateClass),
+        onClick: onClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+          "div",
+          {
+            className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
       }
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [refs, handler, enabled]);
+    ),
+    document.body
+  );
 };
-var useClickOutside_default = useClickOutside;
+Modal.displayName = "Modal";
+var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_react10 = __toESM(require("react"), 1);
-var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_jsx_runtime312 = require("react/jsx-runtime");
 var DayCell2 = import_react10.default.memo(
   ({
     day,
     disabled,
     selected,
     highlighted,
+    isStart,
+    isEnd,
+    inRange,
     onSelect
-  }) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
     "button",
     {
       type: "button",
@@ -2651,8 +2800,9 @@ var DayCell2 = import_react10.default.memo(
         "datepicker-day",
         !day.isCurrentMonth && "outside",
         disabled && "disabled",
-        selected && "selected",
+        (selected || isStart || isEnd) && "selected",
         highlighted && !selected && "highlighted",
+        inRange && !isStart && !isEnd && "in-range",
         day.isToday && "today",
         day.isSunday && "sunday",
         day.isSaturday && "saturday"
@@ -2664,7 +2814,7 @@ var DayCell2 = import_react10.default.memo(
       children: day.day
     }
   ),
-  (prev, next) => prev.selected === next.selected && prev.disabled === next.disabled && prev.highlighted === next.highlighted && prev.day === next.day
+  (prev, next) => prev.selected === next.selected && prev.disabled === next.disabled && prev.highlighted === next.highlighted && prev.isStart === next.isStart && prev.isEnd === next.isEnd && prev.inRange === next.inRange && prev.day === next.day
 );
 DayCell2.displayName = "DayCell";
 var SingleDatePicker = (props) => {
@@ -2674,7 +2824,9 @@ var SingleDatePicker = (props) => {
     minDate,
     maxDate,
     highlightDates = [],
-    locale = "ko"
+    locale = "ko",
+    rangeStart,
+    rangeEnd
   } = props;
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
@@ -2722,6 +2874,8 @@ var SingleDatePicker = (props) => {
     else if (pickerMode === "months") {
       setYearRangeStart(Math.floor(year / 12) * 12);
       setPickerMode("years");
+    } else {
+      setPickerMode("days");
     }
   };
   const handleMonthSelect = (m) => {
@@ -2735,71 +2889,80 @@ var SingleDatePicker = (props) => {
   const weekdays = WEEKDAY_LABELS[locale];
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
+  const hasRange = rangeStart != null && rangeEnd != null;
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "datepicker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(ChevronRightIcon_default, {}) })
         ] }),
-        pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
-          const y = yearRangeStart + i;
-          return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "datepicker-body", children: [
+          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+            const y = yearRangeStart + i;
+            return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+              "button",
+              {
+                type: "button",
+                className: clsx_default("datepicker-picker-cell", y === year && "active"),
+                onClick: () => handleYearSelect(y),
+                children: y
+              },
+              y
+            );
+          }) }),
+          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
             "button",
             {
               type: "button",
-              className: clsx_default("datepicker-picker-cell", y === year && "active"),
-              onClick: () => handleYearSelect(y),
-              children: y
-            },
-            y
-          );
-        }) }),
-        pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-          "button",
-          {
-            type: "button",
-            className: clsx_default("datepicker-picker-cell", i === month && "active"),
-            onClick: () => handleMonthSelect(i),
-            children: label
-          },
-          i
-        )) }),
-        pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-            "div",
-            {
-              className: clsx_default(
-                "datepicker-weekday",
-                i === 0 && "sunday",
-                i === 6 && "saturday"
-              ),
+              className: clsx_default("datepicker-picker-cell", i === month && "active"),
+              onClick: () => handleMonthSelect(i),
               children: label
             },
-            label
+            i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
-            const t = day.date.getTime();
-            const disabled = t < minTime || t > maxTime;
-            const selected = value ? isSameDay(day.date, value) : false;
-            const highlighted = highlightSet.has(
-              `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
-            );
-            return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-              DayCell2,
+          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+              "div",
               {
-                day,
-                disabled,
-                selected,
-                highlighted,
-                onSelect: handleSelect
+                className: clsx_default(
+                  "datepicker-weekday",
+                  i === 0 && "sunday",
+                  i === 6 && "saturday"
+                ),
+                children: label
               },
-              idx
-            );
-          }) })
+              label
+            )) }),
+            /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
+              const t = day.date.getTime();
+              const disabled = t < minTime || t > maxTime;
+              const selected = value ? isSameDay(day.date, value) : false;
+              const highlighted = highlightSet.has(
+                `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
+              );
+              const isStart = hasRange ? isSameDay(day.date, rangeStart) : false;
+              const isEnd = hasRange ? isSameDay(day.date, rangeEnd) : false;
+              const inRangeVal = hasRange ? isInRange(day.date, rangeStart, rangeEnd) : false;
+              return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+                DayCell2,
+                {
+                  day,
+                  disabled,
+                  selected,
+                  highlighted,
+                  isStart,
+                  isEnd,
+                  inRange: inRangeVal,
+                  onSelect: handleSelect
+                },
+                idx
+              );
+            }) })
+          ] })
         ] })
       ]
     }
@@ -2809,7 +2972,7 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_jsx_runtime312 = require("react/jsx-runtime");
+var import_jsx_runtime313 = require("react/jsx-runtime");
 var formatDate = (date) => {
   if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
@@ -2818,137 +2981,131 @@ var formatDate = (date) => {
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
   const [isOpen, setIsOpen] = import_react11.default.useState(false);
-  const containerRef = import_react11.default.useRef(null);
-  const calendarRef = import_react11.default.useRef(null);
-  useClickOutside_default([containerRef], () => setIsOpen(false), isOpen);
+  const [tempDate, setTempDate] = import_react11.default.useState(value ?? /* @__PURE__ */ new Date());
+  const handleOpen = () => {
+    if (disabled) return;
+    setTempDate(value ?? /* @__PURE__ */ new Date());
+    setIsOpen(true);
+  };
   const handleSelect = (date) => {
-    if (!date) return;
-    onChange?.(date);
+    if (date) setTempDate(date);
+  };
+  const handleApply = () => {
+    onChange?.(tempDate);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
-    "div",
-    {
-      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
-      ref: containerRef,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-          "div",
-          {
-            className: "input-datepicker-trigger",
-            onClick: () => !disabled && setIsOpen((o) => !o),
-            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-              Input_default,
-              {
-                value: formatDate(value),
-                placeholder,
-                suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CalenderIcon_default, {}),
-                disabled,
-                readOnly: true
-              }
-            )
-          }
-        ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-          SingleDatePicker_default,
-          {
-            value: value ?? /* @__PURE__ */ new Date(),
-            onChange: handleSelect,
-            minDate,
-            maxDate,
-            locale
-          }
-        ) })
-      ]
-    }
-  );
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+      Input_default,
+      {
+        value: formatDate(value),
+        placeholder,
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(CalenderIcon_default, {}),
+        disabled,
+        readOnly: true
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+        SingleDatePicker_default,
+        {
+          value: tempDate,
+          onChange: handleSelect,
+          minDate,
+          maxDate,
+          locale
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+      ] })
+    ] }) })
+  ] });
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react14 = __toESM(require("react"), 1);
-
-// src/components/Modal/Modal.tsx
-var import_react12 = __toESM(require("react"), 1);
-var import_react_dom = require("react-dom");
-var import_jsx_runtime313 = require("react/jsx-runtime");
-var ANIMATION_DURATION_MS = 200;
-var Modal = (props) => {
-  const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react12.default.useState(false);
-  const [visible, setVisible] = import_react12.default.useState(false);
-  import_react12.default.useEffect(() => {
-    if (isOpen) {
-      setMounted(true);
-      const t2 = setTimeout(() => setVisible(true), 1);
-      return () => clearTimeout(t2);
-    }
-    setVisible(false);
-    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
-    return () => clearTimeout(t);
-  }, [isOpen]);
-  if (typeof document === "undefined") return null;
-  if (!mounted) return null;
-  const stateClass = visible ? "enter" : "exit";
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
-      "div",
-      {
-        className: clsx_default("lib-xplat-modal", "dim", stateClass),
-        onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
-          "div",
-          {
-            className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
-            role: "dialog",
-            "aria-modal": "true",
-            onClick: (e) => e.stopPropagation(),
-            children
-          }
-        )
-      }
-    ),
-    document.body
-  );
-};
-Modal.displayName = "Modal";
-var Modal_default = Modal;
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
+var import_react14 = __toESM(require("react"), 1);
+
+// src/components/Tab/Tab.tsx
 var import_react13 = __toESM(require("react"), 1);
+
+// src/components/Tab/TabItem.tsx
+var import_react12 = __toESM(require("react"), 1);
 var import_jsx_runtime314 = require("react/jsx-runtime");
-var RangeDayCell = import_react13.default.memo(
-  ({
-    day,
-    disabled,
-    isStart,
-    isEnd,
-    inRange,
-    onClick
-  }) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-    "button",
+var TabItem = import_react12.default.forwardRef((props, ref) => {
+  const { isActive, title, onClick } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+    "div",
     {
-      type: "button",
-      className: clsx_default(
-        "datepicker-day",
-        !day.isCurrentMonth && "outside",
-        disabled && "disabled",
-        (isStart || isEnd) && "selected",
-        inRange && !isStart && !isEnd && "in-range",
-        day.isToday && "today",
-        day.isSunday && "sunday",
-        day.isSaturday && "saturday"
-      ),
-      disabled: disabled || !day.isCurrentMonth,
+      ref,
+      className: clsx_default("tab-item", isActive ? "active" : null),
       onClick,
-      children: day.day
+      children: title
     }
-  )
-);
-RangeDayCell.displayName = "RangeDayCell";
+  );
+});
+TabItem.displayName = "TabItem";
+var TabItem_default = TabItem;
+
+// src/components/Tab/Tab.tsx
+var import_jsx_runtime315 = require("react/jsx-runtime");
+var Tab = (props) => {
+  const { activeIndex, onChange, tabs, type, size = "md" } = props;
+  const [underlineStyle, setUnderlineStyle] = import_react13.default.useState({
+    left: 0,
+    width: 0
+  });
+  const itemRefs = import_react13.default.useRef([]);
+  const handleChangeActiveTab = (tabItem, tabIdx) => {
+    onChange(tabItem, tabIdx);
+  };
+  import_react13.default.useEffect(() => {
+    const el = itemRefs.current[activeIndex];
+    if (el) {
+      setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
+    }
+  }, [activeIndex, tabs.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+      TabItem_default,
+      {
+        onClick: () => handleChangeActiveTab(tab, idx),
+        isActive: activeIndex === idx,
+        ref: (el) => {
+          itemRefs.current[idx] = el;
+        },
+        title: tab.title
+      },
+      `${tab.value}_${idx}`
+    )),
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+      "div",
+      {
+        className: "tab-toggle-underline",
+        style: {
+          left: underlineStyle.left,
+          width: underlineStyle.width
+        }
+      }
+    )
+  ] });
+};
+Tab.displayName = "Tab";
+var Tab_default = Tab;
+
+// src/components/DatePicker/RangePicker/index.tsx
+var import_jsx_runtime316 = require("react/jsx-runtime");
 var RangePicker = (props) => {
   const {
     startDate,
@@ -2958,139 +3115,92 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = import_react13.default.useState("start");
-  const startCal = useCalendar(startDate.getFullYear(), startDate.getMonth());
-  const endCal = useCalendar(endDate.getFullYear(), endDate.getMonth());
-  const isDisabled = (date, type) => {
-    const d = date.getTime();
-    if (minDate) {
-      const min = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime();
-      if (d < min) return true;
-    }
-    if (maxDate) {
-      const max = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime();
-      if (d > max) return true;
-    }
-    if (type === "end") {
-      const start = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()).getTime();
-      if (d < start) return true;
-    }
-    if (type === "start") {
-      const end = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate()).getTime();
-      if (d > end) return true;
-    }
-    return false;
+  const [activeTab, setActiveTab] = import_react14.default.useState("start");
+  const handleStartChange = (date) => {
+    if (!date) return;
+    const newStart = date > endDate ? endDate : date;
+    onChange?.({ startDate: newStart, endDate });
   };
-  const weekdays = WEEKDAY_LABELS[locale];
-  const renderCalendar = (cal, type) => {
-    const label = type === "start" ? locale === "ko" ? "\uC2DC\uC791" : "Start" : locale === "ko" ? "\uC885\uB8CC" : "End";
-    return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "datepicker-range-panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("span", { className: "datepicker-range-label", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "datepicker-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-          "button",
-          {
-            className: "datepicker-nav",
-            onClick: cal.goToPrevMonth,
-            type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(ChevronLeftIcon_default, {})
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("span", { className: "datepicker-title", children: locale === "ko" ? `${cal.year}\uB144 ${MONTH_LABELS.ko[cal.month]}` : `${MONTH_LABELS.en[cal.month]} ${cal.year}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-          "button",
-          {
-            className: "datepicker-nav",
-            onClick: cal.goToNextMonth,
-            type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(ChevronRightIcon_default, {})
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-        "div",
-        {
-          className: clsx_default(
-            "datepicker-weekday",
-            i === 0 && "sunday",
-            i === 6 && "saturday"
-          ),
-          children: w
-        },
-        w
-      )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-grid", children: cal.days.map((day, idx) => {
-        const disabled = isDisabled(day.date, type);
-        const isStart = isSameDay(day.date, startDate);
-        const isEnd = isSameDay(day.date, endDate);
-        const inRange = isInRange(day.date, startDate, endDate);
-        return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-          RangeDayCell,
-          {
-            day,
-            disabled,
-            isStart,
-            isEnd,
-            inRange,
-            onClick: () => {
-              if (!disabled && day.isCurrentMonth) {
-                if (type === "start") {
-                  const newStart = day.date > endDate ? endDate : day.date;
-                  onChange?.({ startDate: newStart, endDate });
-                } else {
-                  const newEnd = day.date < startDate ? startDate : day.date;
-                  onChange?.({ startDate, endDate: newEnd });
-                }
-              }
-            }
-          },
-          idx
-        );
-      }) })
-    ] });
+  const handleEndChange = (date) => {
+    if (!date) return;
+    const newEnd = date < startDate ? startDate : date;
+    onChange?.({ startDate, endDate: newEnd });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
-    "div",
-    {
-      className: clsx_default("lib-xplat-datepicker", "range"),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "datepicker-range-tabs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-            "button",
-            {
-              type: "button",
-              className: clsx_default("datepicker-range-tab", activeTab === "start" && "active"),
-              onClick: () => setActiveTab("start"),
-              children: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-            "button",
-            {
-              type: "button",
-              className: clsx_default("datepicker-range-tab", activeTab === "end" && "active"),
-              onClick: () => setActiveTab("end"),
-              children: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "datepicker-range-panels", children: [
-          renderCalendar(startCal, "start"),
-          renderCalendar(endCal, "end")
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? renderCalendar(startCal, "start") : renderCalendar(endCal, "end") })
-      ]
-    }
-  );
+  const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
+  const endMinDate = minDate && startDate > minDate ? startDate : startDate;
+  return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+      Tab_default,
+      {
+        activeIndex: activeTab === "start" ? 0 : 1,
+        tabs: [
+          { value: "start", title: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start" },
+          { value: "end", title: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End" }
+        ],
+        onChange: (tab) => setActiveTab(tab.value),
+        type: "toggle",
+        size: "sm"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "datepicker-range-panels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+        SingleDatePicker_default,
+        {
+          value: startDate,
+          onChange: handleStartChange,
+          minDate,
+          maxDate: startMaxDate,
+          rangeStart: startDate,
+          rangeEnd: endDate,
+          locale
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+        SingleDatePicker_default,
+        {
+          value: endDate,
+          onChange: handleEndChange,
+          minDate: endMinDate,
+          maxDate,
+          rangeStart: startDate,
+          rangeEnd: endDate,
+          locale
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+      SingleDatePicker_default,
+      {
+        value: startDate,
+        onChange: handleStartChange,
+        minDate,
+        maxDate: startMaxDate,
+        rangeStart: startDate,
+        rangeEnd: endDate,
+        locale
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+      SingleDatePicker_default,
+      {
+        value: endDate,
+        onChange: handleEndChange,
+        minDate: endMinDate,
+        maxDate,
+        rangeStart: startDate,
+        rangeEnd: endDate,
+        locale
+      }
+    ) })
+  ] });
 };
 RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_jsx_runtime315 = require("react/jsx-runtime");
+var import_jsx_runtime317 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react14.default.useState(false);
+  const [isOpen, setIsOpen] = import_react15.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -3098,11 +3208,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react14.default.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
+    import_react15.default.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -3112,7 +3222,7 @@ var PopupPicker = (props) => {
             locale
           }
         ),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -3124,8 +3234,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
           Button_default,
           {
             type: "secondary",
@@ -3133,7 +3243,7 @@ var PopupPicker = (props) => {
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3142,10 +3252,10 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/Divider/Divider.tsx
-var import_jsx_runtime316 = require("react/jsx-runtime");
+var import_jsx_runtime318 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation),
@@ -3158,15 +3268,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime317 = require("react/jsx-runtime");
+var import_jsx_runtime319 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
-  const [mounted, setMounted] = import_react15.default.useState(false);
-  const [visible, setVisible] = import_react15.default.useState(false);
-  import_react15.default.useEffect(() => {
+  const [mounted, setMounted] = import_react16.default.useState(false);
+  const [visible, setVisible] = import_react16.default.useState(false);
+  import_react16.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3181,12 +3291,12 @@ var Drawer = (props) => {
   const stateClass = visible ? "enter" : "exit";
   const widthValue = typeof width === "number" ? `${width}px` : width;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, stateClass),
@@ -3195,11 +3305,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "drawer-body", children })
+              /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -3212,16 +3322,16 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react16.default.useState({
+  const [position, setPosition] = import_react17.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react16.default.useCallback(() => {
+  const calculatePosition = import_react17.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -3243,7 +3353,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react16.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     calculatePosition();
     window.addEventListener("resize", calculatePosition);
     return () => window.removeEventListener("resize", calculatePosition);
@@ -3252,18 +3362,43 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 };
 var useAutoPosition_default = useAutoPosition;
 
+// src/tokens/hooks/useClickOutside.ts
+var import_react18 = __toESM(require("react"), 1);
+var useClickOutside = (refs, handler, enabled = true) => {
+  import_react18.default.useEffect(() => {
+    if (!enabled) return;
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    const listener = (event) => {
+      const target = event.target;
+      const isInside = refArray.some(
+        (ref) => ref.current && ref.current.contains(target)
+      );
+      if (!isInside) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler, enabled]);
+};
+var useClickOutside_default = useClickOutside;
+
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_jsx_runtime320 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react17.default.useState(false);
-  const [mounted, setMounted] = import_react17.default.useState(false);
-  const [visible, setVisible] = import_react17.default.useState(false);
-  const triggerRef = import_react17.default.useRef(null);
-  const menuRef = import_react17.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react19.default.useState(false);
+  const [mounted, setMounted] = import_react19.default.useState(false);
+  const [visible, setVisible] = import_react19.default.useState(false);
+  const triggerRef = import_react19.default.useRef(null);
+  const menuRef = import_react19.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  import_react17.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3278,8 +3413,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -3288,14 +3423,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
       "div",
       {
         ref: menuRef,
         className: clsx_default("dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -3317,23 +3452,23 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime319 = require("react/jsx-runtime");
+var import_jsx_runtime321 = require("react/jsx-runtime");
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react18 = __toESM(require("react"), 1);
-var import_jsx_runtime320 = require("react/jsx-runtime");
+var import_react20 = __toESM(require("react"), 1);
+var import_jsx_runtime322 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
     accept,
@@ -3343,8 +3478,8 @@ var FileUpload = (props) => {
     label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description
   } = props;
-  const [isDragOver, setIsDragOver] = import_react18.default.useState(false);
-  const inputRef = import_react18.default.useRef(null);
+  const [isDragOver, setIsDragOver] = import_react20.default.useState(false);
+  const inputRef = import_react20.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -3374,7 +3509,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -3383,7 +3518,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
           "input",
           {
             ref: inputRef,
@@ -3393,9 +3528,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(UploadIcon_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -3404,10 +3539,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react19 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -3475,41 +3610,41 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react19.default.createElement(tag, props);
+    return import_react21.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react19.default.createElement(tag, props, ...children);
+  return import_react21.default.createElement(tag, props, ...children);
 };
 var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : import_react19.default.createElement(import_react19.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react21.default.createElement(import_react21.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_jsx_runtime321 = require("react/jsx-runtime");
+var import_jsx_runtime323 = require("react/jsx-runtime");
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react20.default.useState(0);
-  const doneCalledRef = import_react20.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react20.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react22.default.useState(0);
+  const doneCalledRef = import_react22.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react22.default.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  import_react20.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react20.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -3517,33 +3652,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react20.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react20.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react20.default.useMemo(
+  const parsed = import_react22.default.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_jsx_runtime322 = require("react/jsx-runtime");
+var import_react23 = __toESM(require("react"), 1);
+var import_jsx_runtime324 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = import_react21.default.useState();
-  import_react21.default.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = import_react23.default.useState();
+  import_react23.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -3552,7 +3687,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react21.default.useRef(null);
+  const inputRef = import_react23.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -3565,8 +3700,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
       "input",
       {
         type: "file",
@@ -3576,13 +3711,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: "action-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(UploadIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "action-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(UploadIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(ImageIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -3590,7 +3725,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime323 = require("react/jsx-runtime");
+var import_jsx_runtime325 = require("react/jsx-runtime");
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -3633,19 +3768,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
+      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -3656,14 +3791,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -3672,17 +3807,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react22 = __toESM(require("react"), 1);
-var import_jsx_runtime324 = require("react/jsx-runtime");
+var import_react24 = __toESM(require("react"), 1);
+var import_jsx_runtime326 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react22.default.useRef(null);
-  const triggerRef = import_react22.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react22.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react22.default.useState(false);
+  const popRef = import_react24.default.useRef(null);
+  const triggerRef = import_react24.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react24.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react24.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react22.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -3695,7 +3830,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -3705,7 +3840,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
           "div",
           {
             className: clsx_default(
@@ -3728,7 +3863,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-var import_jsx_runtime325 = require("react/jsx-runtime");
+var import_jsx_runtime327 = require("react/jsx-runtime");
 var Progress = (props) => {
   const {
     value,
@@ -3738,8 +3873,8 @@ var Progress = (props) => {
     showLabel = false
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
       "div",
       {
         className: "track",
@@ -3747,7 +3882,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
           "div",
           {
             className: "bar",
@@ -3756,7 +3891,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -3766,17 +3901,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react23 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react23.default.createContext(
+var import_react25 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react25.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react23.default.useContext(RadioGroupContext);
+  return import_react25.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime326 = require("react/jsx-runtime");
+var import_jsx_runtime328 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
@@ -3794,7 +3929,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)(
     "label",
     {
       className: clsx_default(
@@ -3804,18 +3939,18 @@ var Radio = (props) => {
         localChecked ? "checked" : void 0
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("span", { children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("span", { children: label })
       ]
     }
   );
@@ -3824,28 +3959,28 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_jsx_runtime329 = require("react/jsx-runtime");
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(import_jsx_runtime327.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(import_jsx_runtime329.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-var import_react26 = __toESM(require("react"), 1);
+var import_react28 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react24 = __toESM(require("react"), 1);
-var SelectContext = import_react24.default.createContext(null);
+var import_react26 = __toESM(require("react"), 1);
+var SelectContext = import_react26.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react25 = __toESM(require("react"), 1);
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_react27 = __toESM(require("react"), 1);
+var import_jsx_runtime330 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = import_react25.default.useContext(context_default);
+  const ctx = import_react27.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -3854,7 +3989,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled"),
@@ -3875,7 +4010,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_jsx_runtime331 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -3887,26 +4022,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = import_react26.default.Children.toArray(children).filter(
-    (child) => import_react26.default.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = import_react28.default.Children.toArray(children).filter(
+    (child) => import_react28.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react26.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react26.default.useState(null);
-  const controlledLabel = import_react26.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react28.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react28.default.useState(null);
+  const controlledLabel = import_react28.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
-  const triggerRef = import_react26.default.useRef(null);
-  const contentRef = import_react26.default.useRef(null);
-  const [mounted, setMounted] = import_react26.default.useState(false);
-  const [visible, setVisible] = import_react26.default.useState(false);
-  import_react26.default.useEffect(() => {
+  const triggerRef = import_react28.default.useRef(null);
+  const contentRef = import_react28.default.useRef(null);
+  const [mounted, setMounted] = import_react28.default.useState(false);
+  const [visible, setVisible] = import_react28.default.useState(false);
+  import_react28.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react26.default.useEffect(() => {
+  import_react28.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3916,12 +4051,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = import_react26.default.useCallback(() => setOpen(true), []);
-  const close = import_react26.default.useCallback(() => setOpen(false), []);
-  const toggle = import_react26.default.useCallback(() => setOpen((prev) => !prev), []);
+  const open = import_react28.default.useCallback(() => setOpen(true), []);
+  const close = import_react28.default.useCallback(() => setOpen(false), []);
+  const toggle = import_react28.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react26.default.useCallback(
+  const setSelected = import_react28.default.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -3930,7 +4065,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react26.default.useMemo(
+  const ctxValue = import_react28.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -3951,7 +4086,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -3962,7 +4097,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(
           "div",
           {
             ref: triggerRef,
@@ -3986,7 +4121,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
                 "span",
                 {
                   className: clsx_default(
@@ -3996,18 +4131,18 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
           "div",
           {
             className: clsx_default("select-content", position.direction, stateClass),
@@ -4028,14 +4163,14 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime330 = require("react/jsx-runtime");
+var import_jsx_runtime332 = require("react/jsx-runtime");
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
     width: typeof width === "number" ? `${width}px` : width,
     height: typeof height === "number" ? `${height}px` : height
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -4048,20 +4183,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime331 = require("react/jsx-runtime");
+var import_jsx_runtime333 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
           "circle",
           {
             className: "track",
@@ -4071,7 +4206,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
           "circle",
           {
             className: "indicator",
@@ -4090,20 +4225,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-var import_jsx_runtime332 = require("react/jsx-runtime");
+var import_jsx_runtime334 = require("react/jsx-runtime");
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("span", { children: index + 1 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)("div", { className: "step-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("span", { children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("div", { className: "step-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -4112,8 +4247,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-var import_react27 = __toESM(require("react"), 1);
-var import_jsx_runtime333 = require("react/jsx-runtime");
+var import_react29 = __toESM(require("react"), 1);
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
     auto = false,
@@ -4136,23 +4271,23 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = import_react27.default.useMemo(() => {
+  const extendedItems = import_react29.default.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = import_react27.default.useState(
+  const [innerIndex, setInnerIndex] = import_react29.default.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = import_react27.default.useState(false);
-  const [dragOffset, setDragOffset] = import_react27.default.useState(0);
-  const [animated, setAnimated] = import_react27.default.useState(true);
-  const [containerWidth, setContainerWidth] = import_react27.default.useState(0);
-  const containerRef = import_react27.default.useRef(null);
-  const startXRef = import_react27.default.useRef(0);
-  const startTimeRef = import_react27.default.useRef(0);
-  const autoplayTimerRef = import_react27.default.useRef(null);
-  import_react27.default.useEffect(() => {
+  const [isDragging, setIsDragging] = import_react29.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react29.default.useState(0);
+  const [animated, setAnimated] = import_react29.default.useState(true);
+  const [containerWidth, setContainerWidth] = import_react29.default.useState(0);
+  const containerRef = import_react29.default.useRef(null);
+  const startXRef = import_react29.default.useRef(0);
+  const startTimeRef = import_react29.default.useRef(0);
+  const autoplayTimerRef = import_react29.default.useRef(null);
+  import_react29.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -4171,7 +4306,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = import_react27.default.useCallback(
+  const moveToInner = import_react29.default.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -4199,7 +4334,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = import_react27.default.useCallback(() => {
+  const handleTransitionEnd = import_react29.default.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -4209,7 +4344,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = import_react27.default.useCallback(
+  const slideTo = import_react29.default.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -4219,7 +4354,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = import_react27.default.useCallback(() => {
+  const slideNext = import_react29.default.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -4228,7 +4363,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = import_react27.default.useCallback(() => {
+  const slidePrev = import_react29.default.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -4237,7 +4372,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  import_react27.default.useEffect(() => {
+  import_react29.default.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -4245,12 +4380,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  import_react27.default.useImperativeHandle(swiperRef, () => ({
+  import_react29.default.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  import_react27.default.useEffect(() => {
+  import_react29.default.useEffect(() => {
     if (!auto || !canSlide) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -4273,7 +4408,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  import_react27.default.useEffect(() => {
+  import_react29.default.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -4311,8 +4446,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = import_react27.default.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+  const slideElements = import_react29.default.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -4331,14 +4466,14 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
-        children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
           "div",
           {
             className: clsx_default(
@@ -4356,7 +4491,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -4366,7 +4501,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+    canSlide && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
       "button",
       {
         className: clsx_default(
@@ -4384,8 +4519,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-var import_react28 = __toESM(require("react"), 1);
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_react30 = __toESM(require("react"), 1);
+var import_jsx_runtime336 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -4395,9 +4530,9 @@ var Switch = (props) => {
     disabled,
     onChange
   } = props;
-  const [isAnimating, setIsAnimating] = import_react28.default.useState(false);
-  const timeoutRef = import_react28.default.useRef(null);
-  import_react28.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react30.default.useState(false);
+  const timeoutRef = import_react30.default.useRef(null);
+  import_react30.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -4412,7 +4547,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
     "div",
     {
       className: clsx_default(
@@ -4425,80 +4560,13 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;
 
-// src/components/Tab/Tab.tsx
-var import_react30 = __toESM(require("react"), 1);
-
-// src/components/Tab/TabItem.tsx
-var import_react29 = __toESM(require("react"), 1);
-var import_jsx_runtime335 = require("react/jsx-runtime");
-var TabItem = import_react29.default.forwardRef((props, ref) => {
-  const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
-    "div",
-    {
-      ref,
-      className: clsx_default("tab-item", isActive ? "active" : null),
-      onClick,
-      children: title
-    }
-  );
-});
-TabItem.displayName = "TabItem";
-var TabItem_default = TabItem;
-
-// src/components/Tab/Tab.tsx
-var import_jsx_runtime336 = require("react/jsx-runtime");
-var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react30.default.useState({
-    left: 0,
-    width: 0
-  });
-  const itemRefs = import_react30.default.useRef([]);
-  const handleChangeActiveTab = (tabItem, tabIdx) => {
-    onChange(tabItem, tabIdx);
-  };
-  import_react30.default.useEffect(() => {
-    const el = itemRefs.current[activeIndex];
-    if (el) {
-      setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
-    }
-  }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
-      TabItem_default,
-      {
-        onClick: () => handleChangeActiveTab(tab, idx),
-        isActive: activeIndex === idx,
-        ref: (el) => {
-          itemRefs.current[idx] = el;
-        },
-        title: tab.title
-      },
-      `${tab.value}_${idx}`
-    )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
-      "div",
-      {
-        className: "tab-toggle-underline",
-        style: {
-          left: underlineStyle.left,
-          width: underlineStyle.width
-        }
-      }
-    )
-  ] });
-};
-Tab.displayName = "Tab";
-var Tab_default = Tab;
-
 // src/components/Table/TableContext.tsx
 var import_react31 = __toESM(require("react"), 1);
 var TableContext = import_react31.default.createContext(null);
@@ -5246,10 +5314,10 @@ var Video_default = Video;
   Alert,
   Avatar,
   Badge,
+  Box,
   Breadcrumb,
   Button,
   Calendar,
-  Card,
   CardTab,
   Chart,
   CheckBox,